route

src/App.vue

@@ -10,7 +10,17 @@ import sl1 from './assets/s5.png'
 import sl2 from './assets/s6.png'
 import sl3 from './assets/s7.png'
 import sl4 from './assets/s8.png'
-let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 }, { btname: '生活助手', imgurl: s2, simgurl: sl2 }, { btname: '智能优推', imgurl: s3, simgurl: sl3 }, { btname: '大众点评', imgurl: s4, simgurl: sl4 }])
+import { useRoute, useRouter } from 'vue-router'
+// const route = useRoute() 
+// let routePath = ref(route.path)
+const router = useRouter()
+let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 ,path:'/'}, { btname: '生活助手', imgurl: s2, simgurl: sl2 ,path:'/chat'}, { btname: '智能优推', imgurl: s3, simgurl: sl3,path:'/' }, { btname: '大众点评', imgurl: s4, simgurl: sl4 ,path:'/'}])
+
+let selctdeNum = ref(0)
+let clickNum = (num,path) => {
+  selctdeNum.value = num
+  router.push(path)
+}
 </script>
 
 <template>
@@ -30,10 +40,11 @@ let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 }, {
   <!-- <RouterLink to="/chat">Chat</RouterLink> -->
   <RouterView />
   <div class="bottom">
-    <div class="bt_itm" v-for="(v, i) in bt_data" :key="i">
+    <div class="bt_itm" v-for="(v, i) in bt_data" :key="i" @click="clickNum(i,v.path)">
-      <img :src="v.imgurl" alt="">
+
-      <!-- <img :src="v.simgurl" alt=""> -->
+      <img v-if="selctdeNum != i" :src="v.imgurl" alt="">
-      <span>{{ v.btname }}</span>
+      <img v-else :src="v.simgurl" alt="">
+      <span :class="{ slectedfont: selctdeNum == i }">{{ v.btname }}</span>
     </div>
   </div>
 </template>
@@ -43,17 +54,25 @@ let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 }, {
   padding: 0px;
 }
 
+
+
 .bottom {
-  background-color: #fff;
+  background-color: #fff !important;
   display: flex;
   align-items: center;
   justify-content: space-around;
+  position: fixed;
+  bottom: 0px;
+  left: 0px;
+  width: 100vw;
+  border: 1px solid red;
 
   .bt_itm {
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
+
     img {
       width: 24px;
       height: 24px;
@@ -65,6 +84,13 @@ let bt_data = reactive([{ btname: '优惠服务', imgurl: s1, simgurl: sl1 }, {
       font-weight: 400;
       color: #999999;
     }
+
+    .slectedfont {
+      font-size: 10px;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      color: #447AFF;
+    }
   }
 }
 
@@ -128,4 +154,5 @@ nav a:first-of-type {
     padding: 1rem 0;
     margin-top: 1rem;
   }
-} */</style>
+} */
+</style>

src/assets/main.css

@@ -1,11 +1,13 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
+  /* max-width: 1280px;
   margin: 0 auto;
   padding: 2rem;
 
-  font-weight: normal;
+  font-weight: normal; */
+  /* background-color: ; */
+  background-color: #F5F5FB;
 }
 
 a,
@@ -15,7 +17,7 @@ a,
   transition: 0.4s;
 }
 
-@media (hover: hover) {
+/* @media (hover: hover) {
   a:hover {
     background-color: hsla(160, 100%, 37%, 0.2);
   }
@@ -33,3 +35,4 @@ a,
     padding: 0 2rem;
   }
 }
+ */

src/main.js

@@ -1,4 +1,4 @@
-// import './assets/main.css'
+import './assets/main.css'
 
 import { createApp } from 'vue'
 import { createPinia } from 'pinia'

src/views/IndexChat.vue

@@ -257,13 +257,13 @@ line-height: 14px;margin-left: 8px;">有问题尽管问我~</div> -->
     }
 
     .c_bottom {
-        width: 99vw;
+        width: 100vw;
         // height: 60px;
         min-height: 60px;
         background-color: #fff;
         border: 1px solid red;
         position: absolute;
-        bottom: 0px;
+        bottom: 180px;
         left: 0px;
 
         // display: flex;