首页样式完成。

components/DeepMate.vue

@@ -5,18 +5,18 @@
 				<view class="title-container">
 					<view class="title-left">
 						<text class="deepmate-title">DeepMate</text>
+						<text class="deepmate-subtitle">您的市场最佳顾问~</text>
 					</view>
 					<view class="title-right">
 						<image class="deepmate-icon" src="https://d31zlh4on95l9h.cloudfront.net/images/7faa683450cc071bcc746fea8191ff6b.png" mode="aspectFit"></image>
 					</view>
 				</view>
-				<text class="deepmate-subtitle">您的市场最佳顾问~</text>
 			</view>
 			<view class="deepmate-content">
+				<view class="deepmate-hotspots">
 					<view class="deepmate-question">
-					<text>今日股票策略推荐是什么？</text>
+						<text class="question-text">今日股票策略晨报</text>
 					</view>
-				<view class="deepmate-hotspots">
 					<view class="hotspot-item">
 						<text>热门股票分析</text>
 					</view>
@@ -35,11 +35,13 @@
 				</view>
 				<view class="deepmate-action">
 					<input class="stock-input" type="text" placeholder="请输入股票代码/名称，获取AI洞察" />
+					<view class="send-button-container">
 						<image class="send-button" src="https://d31zlh4on95l9h.cloudfront.net/images/3da018821a5c82b06a1d6ddc81b960ac.png" mode="aspectFit"></image>
 					</view>
 				</view>
 			</view>
 		</view>
+	</view>
 </template>
 
 <script>
@@ -78,34 +80,67 @@
 
 .title-left {
 	width: 50%;
+	display: flex;
+	flex-direction: column;
 }
 
 .title-right {
 	width: 50%;
 	display: flex;
-	justify-content: flex-end;
+	justify-content: center;
+	align-items: center;
 }
 
 .deepmate-title {
 	font-size: 18px;
 	font-weight: bold;
 	color: #ff4d4f;
+	display: block;
 }
 
 .deepmate-icon {
-	width: 30px;
-	height: 30px;
+	width: 50px;
+	height: 50px;
 	margin-left: 0;
 }
 
 .deepmate-subtitle {
 	font-size: 12px;
 	color: #666;
-	margin-left: 5px;
+	display: block;
+	margin-top: 5px;
 }
 
 .deepmate-hotspots {
 	margin: 10px 0;
+	background-color: #ffffff;
+	border-radius: 10px;
+	padding: 10px;
+}
+
+.deepmate-question {
+	display: flex;
+	align-items: center;
+	margin-bottom: 10px;
+	padding-left: 10px;
+	position: relative;
+}
+
+.deepmate-question:before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	background-color: #ff4d4f;
+	border-radius: 2px;
+}
+
+.question-text {
+	font-size: 16px;
+	font-weight: bold;
+	color: #333;
 }
 
 .hotspot-item {
@@ -124,25 +159,40 @@
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
-	background-color: #ffffff;
-	padding: 8px 10px;
-	border-radius: 6px;
+	background-color: #ff4d4f;
+	padding: 8px 15px;
+	border-radius: 25px;
 	margin-top: 10px;
-	border: 1px solid #e0e0e0;
+	border: none;
 }
 
 .stock-input {
 	flex: 1;
 	height: 36px;
 	font-size: 14px;
-	color: #333;
+	color: #ffffff;
 	padding: 0 10px;
 	border: none;
+	background-color: transparent;
 }
 
-.send-button {
-	width: 30px;
-	height: 30px;
+.stock-input::placeholder {
+	color: rgba(255, 255, 255, 0.8);
+}
+
+.send-button-container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 36px;
+	height: 36px;
+	background-color: #ffffff;
+	border-radius: 50%;
 	margin-left: 10px;
 }
+
+.send-button {
+	width: 20px;
+	height: 20px;
+}
 </style>

pages/home/home.vue

@@ -106,7 +106,9 @@
 					
 					<!-- 机构动向简报数据 -->
 					<view class="institutional-reports">
+						<view class="section-title-container">
 							<text class="section-title-text">机构动向简报</text>
+						</view>
 						<view class="text-gap"></view>
 						<view class="report-item" v-for="(report, index) in institutionalReports" :key="index">
 							<view class="report-stock">{{report.stock}}</view>
@@ -534,7 +536,7 @@ export default {
 .stock-list {
 	display: flex;
 	flex-direction: row;
-	justify-content: space-between;
+	justify-content: center;
 	background-color: #f8f8f8;
 	border-radius: 8px;
 	padding: 15px;
@@ -644,6 +646,23 @@ export default {
 	padding: 10px;
 }
 
+.section-title-container {
+	position: relative;
+	padding-left: 10px;
+	margin-bottom: 5px;
+}
+
+.section-title-container:before {
+	content: "";
+	position: absolute;
+	left: 0;
+	top: 0;
+	bottom: 0;
+	width: 4px;
+	background-color: #ff4d4f;
+	border-radius: 2px;
+}
+
 .report-item {
 	background-color: #ffffff;
 	border-radius: 8px;