优化样式

pages/control/index.vue

@@ -11,6 +11,39 @@ import { useI18n } from 'vue-i18n';
 const { t, locale } = useI18n();
 const userStore = useUserStore();
 
+// 表情数组
+const emotionList = ref([
+	{
+		icon:'heart',
+		text:'HAPPY',
+		isCurrent: true,
+	},
+	{
+		icon:'heart',
+		text:'LOVE',
+		isCurrent: false,
+	},
+	{
+		icon:'heart',
+		text:'EXCITED',
+		isCurrent: false,
+	},
+	{
+		icon:'heart',
+		text:'PEACEFUL',
+		isCurrent: false,
+	}
+	
+])
+
+// 选择表情数组
+const selectEmotion = (index) => {
+	for (let i = 0; i < emotionList.value.length; i++) {
+		emotionList.value[i].isCurrent = i === index;
+	}
+}
+
+
 
 /**
  * @desc 跳转至详情页面
@@ -28,6 +61,11 @@ const getProductList = async()=>{
 	console.log("商品数据",productData.value);
 }
 
+//返回按钮
+const back = function() {
+	uni.navigateBack()
+}
+
 
 onLoad(()=>{
 
@@ -53,7 +91,7 @@ const handleBook = (productId) => {
 	  <view class="sticky top-0 w-full pt-6 flex flex-col bg-white">
 		  <view class="flex gap-2 px-6">
 		  	<!-- 返回按钮 -->
-		  	<u-icon name="arrow-leftward" size="50"></u-icon>
+		  	<u-icon name="arrow-leftward" size="50" @click="back"></u-icon>
 		  	<!-- title & 状态 -->
 		  	<view class="flex flex-col gap-[10px]">
 		  				  <text class="text-2xl font-bold">Control Console</text>
@@ -65,22 +103,38 @@ const handleBook = (productId) => {
 		  </view>
 		  <uv-divider line-color="#333333" hairline="false"></uv-divider>
 	  </view>
-	  <view class="flex flex-col px-6 pt-2 gap-2">
+	  <view class="flex flex-col px-6 pt-2 pb-8 gap-2">
 		  <!-- title -->
 		  <text class="text-lg text-[#808080]">TEXT TO SPEECH</text>
 		  <!-- 输入框 -->
 		  <view class="flex gap-2">
-			  <view class="flex flex-1  border border-solid border-theme border-[3px] rounded-lg p-2">
+			  <view class="flex flex-1 border border-solid  border-theme border-[3px] rounded-lg p-2">
 			  	<u-icon name="mic" size="30"></u-icon>
 				<u-input placeholder="Type what Sweekar should say..."></u-input>
 			  </view>
-			<view class="rounded-lg bg-[#808080] w-4 flex justify-center items-center">
-				<u-icon name="chat"></u-icon>
+			<view class="rounded-lg bg-[#808080] p-3  flex justify-center items-center shadow-[4px_4px_1px_0_rgba(64,64,64,1)]">
+				<u-icon name="chat" size="40" color="#fff"></u-icon>
 				
 			</view>
 		  </view>
+	  </view>
 	  
+	  <view class="flex flex-col px-6 pt-2 gap-2">
+	  		  <!-- title -->
+	  		  <text class="text-lg text-[#808080]">TEXT TO SPEECH</text>
+	  		  <!-- 表情选择 -->
+	  		  <view class="flex overflow-x-auto whitespace-nowrap gap-2">
+	  			 <view v-for="(item,index) in emotionList" 
+				 class="border border-solid border-theme border-[3px] p-5 rounded-lg flex flex-col justify-center items-center gap-2"
+				 :class="item.isCurrent?'bg-theme':''"
+				 @click="selectEmotion(index)"
+				 >
+					 <!-- 表情 -->
+					 <u-icon name="heart" size="40" :color="item.isCurrent?'#fff':'#000000'"></u-icon>
+					 <text class="text-sm" :class="item.isCurrent?'text-[#fff]':'text-theme'">{{ item.text }}</text>
 	  			 	
+	  			 </view>
+	  		  </view>
 	  </view>