|
|
@@ -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%;
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
future
