导航栏图标更新

hookehuyr
Commit 9726038a28db13264468bf7d7d82bd952f6684da 9726038a 1 parent 0d9d8367
Showing 2 changed files with 44 additions and 24 deletions
src/components/navBar.vue
src/pages/my/index.vue
--- a/src/components/navBar.vue
View file @9726038
+++ b/src/components/navBar.vue
View file @9726038
 <!--
  * @Date: 2022-09-21 11:59:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-14 18:15:06
+ * @LastEditTime: 2023-12-19 10:43:00
  * @FilePath: /meihuaApp/src/components/navBar.vue
  * @Description: 底部导航栏
 -->
 <template>
   <view id="navbar-page" class="navbar-page">
     <view @tap="goTo('index')" class="home">
-      <view style="height: 2rem;">
+      <view style="height: 1.5rem;">
-        <IconFont :name="icon_home" size="2rem" color="" />
+        <IconFont :name="icon_home" size="1.5rem" color="" />
       </view>
       <view><text :style="homeStyle">首页</text></view>
     </view>
     <view @tap="goTo('book')" class="book">
-      <view style="height: 2rem;">
+      <view style="height: 1.5rem;">
-        <IconFont :name="icon_add" size="2rem" color="" />
+        <IconFont :name="icon_book" size="1.5rem" color="" />
       </view>
       <view><text :style="bookStyle">订房</text></view>
     </view>
     <view @tap="goTo('my')" class="my">
-      <view style="height: 2rem;">
+      <view style="height: 1.5rem;">
-        <IconFont :name="icon_my" size="2rem" color="" />
+        <IconFont :name="icon_my" size="1.5rem" color="" />
       </view>
       <view><text :style="myStyle">我的</text></view>
     </view>
@@ -31,11 +31,12 @@
 <script setup>
 import Taro from '@tarojs/taro'
 import { ref, defineProps, computed, onMounted } from 'vue'
-import icon_home1 from '@/images/icon/home01@2x.png'
+import icon_home1 from '@/images/icon/icon_home1@2x.png'
-import icon_home2 from '@/images/icon/home02@2x.png'
+import icon_home2 from '@/images/icon/icon_home2@2x.png'
-import icon_my1 from '@/images/icon/my01@2x.png'
+import icon_my1 from '@/images/icon/icon_my1@2x.png'
-import icon_my2 from '@/images/icon/my02@2x.png'
+import icon_my2 from '@/images/icon/icon_my2@2x.png'
-import icon_add from '@/images/icon/new@2x.png'
+import icon_book1 from '@/images/icon/icon_book1@2x.png'
+import icon_book2 from '@/images/icon/icon_book2@2x.png'
 import { hostListAPI } from '@/api/Host/index'
 import { IconFont } from '@nutui/icons-vue-taro';
@@ -101,16 +102,23 @@ const icon_home = computed(() => {
   }
 })
 const icon_my = computed(() => {
-  if (props.activated === 'index') {
+  if (props.activated === 'my') {
+    return icon_my1
+  } else {
     return icon_my2
+  }
+})
+const icon_book = computed(() => {
+  if (props.activated === 'book') {
+    return icon_book1
   } else {
-    return icon_my1
+    return icon_book2
   }
 })
 if (props.activated === 'index') {
   homeStyle.value = {
-    color: '#2A5F45',
+    color: '#6A4925',
     fontSize: '0.9rem'
   }
   myStyle.value = {
@@ -121,17 +129,30 @@ if (props.activated === 'index') {
     color: '#999999',
     fontSize: '0.9rem'
   }
+} else if (props.activated === 'my') {
+  homeStyle.value = {
+    color: '#999999',
+    fontSize: '0.9rem'
+  }
+  myStyle.value = {
+    color: '#6A4925',
+    fontSize: '0.9rem'
+  }
+  bookStyle.value = {
+    color: '#999999',
+    fontSize: '0.9rem'
+  }
 } else {
   homeStyle.value = {
     color: '#999999',
     fontSize: '0.9rem'
   }
   myStyle.value = {
-    color: '#2A5F45',
+    color: '#999999',
     fontSize: '0.9rem'
   }
   bookStyle.value = {
-    color: '#2A5F45',
+    color: '#6A4925',
     fontSize: '0.9rem'
   }
 }
--- a/src/pages/my/index.vue
View file @9726038
+++ b/src/pages/my/index.vue
View file @9726038
 <!--
  * @Date: 2023-12-13 11:13:13
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-12-19 10:12:17
+ * @LastEditTime: 2023-12-19 10:46:04
  * @FilePath: /meihuaApp/src/pages/my/index.vue
  * @Description: 文件描述
 -->
@@ -19,12 +19,12 @@
       </view>
       <view style="position: absolute; left: 0%; right: 0%; bottom: 0%; height: 20rpx; width: 100%; background-color: #FFF; border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;"></view>
     </view>
-    <view v-if="showContent">
+    <view>
       <view id="title" style="padding-left: 1.5rem; font-size: 35rpx; font-weight: bold;">我的订单</view>
       <view>
         <nut-tabs v-model="value" title-scroll title-gutter="0" name="tabName" background="#FFF" color="#6A4925" animated-time="0">
           <nut-tab-pane v-for="item in tabList" :title="item.title" :pane-key="item.key">
-            <view class="book-list">
+            <view v-if="showContent" class="book-list">
               <scroll-view :style="scrollStyle" :scroll-y="true" :scroll-with-animation="true" @scrolltolower="onScrollToLower">
                 <view v-for="(item, index) in 10" :key="index">
                   <order-card :key="index" @onPay="onPay"></order-card>
@@ -106,10 +106,9 @@ export default {
     // 设置首页封面高度
     const windowHeight = wx.getSystemInfoSync().windowHeight;
     // 处理切换显示白屏问题
-    // setTimeout(() => {
+    setTimeout(() => {
-    //   this.showContent = true;
+      this.showContent = true;
-    // }, 1);
+    }, 100);
-    this.showContent = true;
     setTimeout(async () => {
       const navHeight = await $('#navbar-page').height();
       const avatorHeight = await $('#avator').height();