navigator switch icon text

pages/enter/enter-navigator.vue

@@ -4,9 +4,12 @@
 			<image src="../../static/nav_robot.png" mode="aspectFit"></image>
 		</view>
 		<view class="titleText">SmartAssistant</view>
-		<view class="selectContent">
-			<view class="select_box" v-for="(item, index) in dataList" :key="index" @click="clickToItem(item, index)">
-				{{ item }}
+		<view class="navigatorContent">
+			<view class="navigator_box" v-for="(item, index) in dataList" :key="index" @click="clickToItem(item, index)">
+				<view v-if="currenIndex == index" class="navigator_box_selected">
+					<image :src="item.s_icon" mode="aspectFit"></image>
+				</view>
+				<view v-else class="navigator_box_normal">{{ item.t }}</view>
 			</view>
 		</view>
 		<view class="userState_login" v-if="is_login == false">
@@ -21,7 +24,9 @@
 	export default {
 		data() {
 			return {
-				dataList: ['首页', 'AI聊天', 'AI画图'],
+				dataList: [{'t': '首页', 's_icon': '/static/navigator/navigator_home.png'},
+				           {'t': 'AI聊天', 's_icon': '/static/navigator/navigator_chat.png'},
+						   {'t': 'AI画图', 's_icon': '/static/navigator/navigator_draw.png'}],
 				currenIndex: this.selectedIndex,
 				is_login: false
 			}
@@ -128,16 +133,32 @@
 			font-weight: 500;
 			color: #ffffff;
 		}
-		.selectContent{
+		.navigatorContent{
 			display: flex;
 			flex-direction: row;
 			height: 100%;
 			align-items: center;
 			
-			.select_box{
+			.navigator_box{
 				display: flex;
-				margin-left: 40px;
-				color: #ffffff;
+				margin-left: 30px;
+				width: 80px;
+				height: 67px;
+				justify-content: center;
+				align-items: center;
+				
+				.navigator_box_normal{
+					font-size: 20px;
+					color: #ffffff;
+				}
+				.navigator_box_selected{
+					width: 55px;
+					height: 40px;
+					image{
+						width: 100%;
+						height: 100%;
+					}
+				}
 			}
 		}