tab

src/assets/tabbar_icon_home_pre.svg

@@ -1,12 +1,20 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>tabbar_icon_01</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
-        <g id="首页+滚屏" transform="translate(-33.000000, -1204.000000)" fill-rule="nonzero">
-            <g id="编组-3备份" transform="translate(0.000000, 1199.000000)">
-                <g id="标签一" transform="translate(19.000000, 5.000000)">
+    <defs>
+        <linearGradient x1="77.8235366%" y1="18.7004042%" x2="19.7473006%" y2="91.9315942%" id="linearGradient-1">
+            <stop stop-color="#FB35FF" offset="0%"></stop>
+            <stop stop-color="#FFCC39" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页+滚屏" transform="translate(-22.000000, -1212.000000)" fill-rule="nonzero">
+            <g id="编组-3备份" transform="translate(0.000000, 1207.000000)">
+                <g id="标签一" transform="translate(8.000000, 5.000000)">
                     <g id="编组" transform="translate(14.000000, 0.000000)">
-                        <path d="M13.9741102,4.00008433 L24,11.2103168 L24,18 C24,21.3137085 21.3137085,24 18,24 L4,24 L4,11.2100545 L13.9741102,4.00008433 Z M10.6,14 L9,14 L9,20 L10.6,20 L10.6,14 Z M18.6,14 L17,14 L17,20 L18.6,20 L18.6,14 Z" id="形状结合"></path>
+                        <path d="M24,11.2100545 L24,24 L10,24 C6.6862915,24 4,21.3137085 4,18 L4,11.2103168 L4,11.2103168 L14.0258898,4.00008433 L24,11.2100545 Z" id="路径" fill="url(#linearGradient-1)" transform="translate(14.000000, 14.000042) scale(-1, 1) translate(-14.000000, -14.000042) "></path>
+                        <polygon id="矩形" fill="#FFFFFF" points="10.6 14 10.6 20 9 20 9 14"></polygon>
+                        <polygon id="矩形备份" fill="#FFFFFF" points="18.6 14 18.6 20 17 20 17 14"></polygon>
                     </g>
                 </g>
             </g>

src/assets/tabbar_icon_mine_pre.svg

@@ -1,14 +1,27 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1"
-    xmlns="http://www.w3.org/2000/svg"
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>tabbar_icon_01</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
-        <g id="我的" transform="translate(-266.000000, -734.000000)">
-            <g id="编组-3" transform="translate(0.000000, 729.000000)">
-                <g id="标签二" transform="translate(252.000000, 5.000000)">
+<svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>tabbar_icon_04</title>
+    <defs>
+        <linearGradient x1="0%" y1="0%" x2="77.8235366%" y2="92.8431135%" id="linearGradient-1">
+            <stop stop-color="#FB35FF" offset="0%"></stop>
+            <stop stop-color="#F7FF39" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="0%" y1="0%" x2="77.8235366%" y2="92.8431135%" id="linearGradient-2">
+            <stop stop-color="#FB35FF" offset="0%"></stop>
+            <stop stop-color="#FFCC39" offset="100%"></stop>
+        </linearGradient>
+        <path d="M4,4 L14.5,4 C20.2989899,4 25,8.70101013 25,14.5 C25,20.2989899 20.2989899,25 14.5,25 C8.70101013,25 4,20.2989899 4,14.5 L4,4 L4,4 Z" id="path-3"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="我的" transform="translate(-326.000000, -734.000000)">
+            <g id="编组-3备份" transform="translate(0.000000, 729.000000)">
+                <g id="标签二" transform="translate(312.000000, 5.000000)">
                     <g id="编组" transform="translate(14.000000, 0.000000)">
-                        <path d="M14.5,4 C20.2989899,4 25,8.70101013 25,14.5 C25,20.2989899 20.2989899,25 14.5,25 C8.70101013,25 4,20.2989899 4,14.5 L4,4 L14.5,4 Z M11.8,17.2 L11.8,18.8 L17.8,18.8 L17.8,17.2 L11.8,17.2 Z" id="形状结合"></path>
+                        <g id="矩形">
+                            <use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
+                            <use fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
+                        </g>
+                        <rect id="矩形备份" fill="#FFFFFF" transform="translate(14.800000, 18.000000) rotate(-270.000000) translate(-14.800000, -18.000000) " x="14" y="15" width="1.6" height="6"></rect>
                     </g>
                 </g>
             </g>

src/assets/tabbar_icon_news_pre.svg

@@ -1,12 +1,22 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>tabbar_icon_02</title>
-    <g id="页面-1" stroke="none" stroke-width="1" fill-rule="evenodd">
+    <defs>
+        <linearGradient x1="10.7755102%" y1="0%" x2="71.8272806%" y2="92.8431135%" id="linearGradient-1">
+            <stop stop-color="#FB35FF" offset="0%"></stop>
+            <stop stop-color="#FFCC39" offset="100%"></stop>
+        </linearGradient>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="新闻资讯" transform="translate(-127.000000, -734.000000)" fill-rule="nonzero">
             <g id="编组-3备份" transform="translate(0.000000, 729.000000)">
                 <g id="标签一备份" transform="translate(113.000000, 5.000000)">
                     <g id="编组" transform="translate(14.000000, 0.000000)">
-                        <path d="M23.6,4 L23.6,18.3888889 C23.6,22.0401047 20.5555363,25 16.8,25 L5,25 L5,4 L23.6,4 Z M8.8,17.2 L8.8,18.8 L14.8,18.8 L14.8,17.2 L8.8,17.2 Z M9,9 L9,14 L10.3333333,14 L10.333,11.325 L12.1729699,13.9554349 L12.186,13.944 L12.1867362,14 L13.5200695,14 L13.5200695,9 L12.1867362,9 L12.186,11.65 L10.3333333,9 L9,9 Z" id="形状结合"></path>
+                        <path d="M23.6,4 L5,4 L5,25 L16.8,25 C20.5555363,25 23.6,22.0401047 23.6,18.3888889 L23.6,4 Z" id="路径" fill="url(#linearGradient-1)"></path>
+                        <rect id="矩形备份-2" fill="#FFFFFF" transform="translate(11.800000, 18.000000) rotate(-270.000000) translate(-11.800000, -18.000000) " x="11" y="15" width="1.6" height="6"></rect>
+                        <rect id="矩形备份-3" fill="#FFFFFF" transform="translate(9.666667, 11.500000) rotate(-180.000000) translate(-9.666667, -11.500000) " x="9" y="9" width="1.33333333" height="5"></rect>
+                        <polygon id="矩形备份-4" fill="#FFFFFF" transform="translate(12.853403, 11.500000) rotate(-180.000000) translate(-12.853403, -11.500000) " points="12.1867362 9 13.5200695 9 13.5200695 14 12.1867362 14"></polygon>
+                        <polygon id="矩形备份-5" fill="#FFFFFF" points="13.2378172 13.1530149 12.1729699 13.9554349 9.26848599 9.80242003 10.3333333 9"></polygon>
                     </g>
                 </g>
             </g>

src/assets/tabbar_icon_profit_pre.svg

@@ -1,12 +1,23 @@
 <?xml version="1.0" encoding="UTF-8"?>
 <svg width="28px" height="28px" viewBox="0 0 28 28" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <title>tabbar_icon_04</title>
+    <defs>
+        <linearGradient x1="32.0825878%" y1="22.5219896%" x2="77.4099314%" y2="88.4882183%" id="linearGradient-1">
+            <stop stop-color="#FB35FF" offset="0%"></stop>
+            <stop stop-color="#FFD21A" offset="100%"></stop>
+        </linearGradient>
+    </defs>
     <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
         <g id="分红" transform="translate(-250.000000, -734.000000)">
             <g id="编组-3备份" transform="translate(0.000000, 729.000000)">
                 <g id="标签一备份-2" transform="translate(236.000000, 5.000000)">
                     <g id="编组" transform="translate(14.000000, 0.000000)">
-                        <path d="M14,3 L26,12.0103173 L23.0413297,12.0103173 L23.0408463,19 C23.0402021,22.3135464 20.3539777,24.999585 17.0404313,25 L4.95956873,25 L4.96046721,12.0103173 L2,12.0103173 L14,3 Z M15.9740342,12.0436602 L13.999,14.017 L12.0259658,12.0436602 L10.8945949,13.1750311 L12.653,14.934 L11.2300851,14.9349291 L11.2300851,16.5349291 L13.277,16.534 L13.277,17.148 L11.2300851,17.1482853 L11.2300851,18.7482853 L13.277,18.748 L13.2779244,20.7961247 L14.8779244,20.7961247 L14.877,18.748 L16.9257637,18.7482853 L16.9257637,17.1482853 L14.877,17.148 L14.877,16.534 L16.9257637,16.5349291 L16.9257637,14.9349291 L15.346,14.934 L17.1054051,13.1750311 L15.9740342,12.0436602 Z" id="形状结合" fill="#FFFFFF" fill-rule="nonzero"></path>
+                        <path d="M14,3 L26,12.0103173 L23.0413297,12.0103173 L23.0408463,19 C23.0402021,22.3135464 20.3539777,24.999585 17.0404313,25 L4.95956873,25 L4.96046721,12.0103173 L2,12.0103173 L14,3 Z" id="路径" fill="url(#linearGradient-1)" fill-rule="nonzero"></path>
+                        <polygon id="路径" fill="#FFFFFF" fill-rule="nonzero" points="16.9257637 14.9349291 16.9257637 16.5349291 11.2300851 16.5349291 11.2300851 14.9349291"></polygon>
+                        <polygon id="路径备份" fill="#FFFFFF" fill-rule="nonzero" points="16.9257637 17.1482853 16.9257637 18.7482853 11.2300851 18.7482853 11.2300851 17.1482853"></polygon>
+                        <polygon id="路径备份" fill="#FFFFFF" fill-rule="nonzero" transform="translate(14.077924, 17.948285) rotate(-270.000000) translate(-14.077924, -17.948285) " points="16.9257637 17.1482853 16.9257637 18.7482853 11.2300851 18.7482853 11.2300851 17.1482853"></polygon>
+                        <polygon id="路径备份-2" fill="#FFFFFF" fill-rule="nonzero" transform="translate(14.813668, 14.335397) rotate(-225.000000) translate(-14.813668, -14.335397) " points="17.2546735 13.5353969 17.2546735 15.1353969 12.3726632 15.1353969 12.3726632 13.5353969"></polygon>
+                        <polygon id="路径备份-2" fill="#FFFFFF" fill-rule="nonzero" transform="translate(13.186332, 14.335397) scale(-1, 1) rotate(-225.000000) translate(-13.186332, -14.335397) " points="15.6273368 13.5353969 15.6273368 15.1353969 10.7453265 15.1353969 10.7453265 13.5353969"></polygon>
                         <g transform="translate(10.894595, 12.043660)" id="编组-2"></g>
                     </g>
                 </g>

src/views/HomePage.vue

@@ -46,7 +46,13 @@
             </div>
 
             <!-- 通知 -->
-            <van-notice-bar v-if="notice" left-icon="volume-o" background="var(--ion-color-step-50)" :text="notice">
+            <van-notice-bar
+                v-if="notice"
+                ref="noticeBarRef"
+                left-icon="volume-o"
+                background="var(--ion-color-step-50)"
+                :text="notice"
+            >
                 <template #left-icon>
                     <img class="bar-icon" src="../assets/home_icon_redian.png" alt="" />
                     <div class="driver"></div>
@@ -135,8 +141,8 @@ import { Swiper, SwiperSlide } from 'swiper/vue'
 import 'swiper/swiper.min.css'
 import 'swiper/swiper-bundle.min.css'
 import SwiperCore, { Pagination, Autoplay, Parallax, Controller } from 'swiper'
-import { useRouter } from 'vue-router'
-import { ref, getCurrentInstance, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { ref, getCurrentInstance, onMounted, watch } from 'vue'
 
 import swiperImg from '../assets/bg.png'
 import firstImg from '../assets/p1.png'
@@ -147,6 +153,7 @@ import productInfo from '../components/ProductInfo.vue'
 import { isAfter, isBefore, parse, getYear, getMonth, getDate, addDays, getTime } from 'date-fns'
 import { http } from '@/plugins/http'
 import toast from '@/utils/toast'
+import { usePageVisibility } from '@vant/use'
 
 const router = useRouter()
 function navigate() {
@@ -183,27 +190,27 @@ function getSaleBatch() {
                 hotInfo: {}
             }
         })
-        if (!res.empty) {
-            res.content.forEach((item, index) => {
-                http.post(
-                    '/product/list',
-                    {
-                        query: {
-                            batchId: item.id,
-                            status: 'IN_STOCK'
-                        },
-                        size: 1,
-                        sort: 'id,desc'
-                    },
-                    { body: 'json' }
-                ).then(res => {
-                    saleBatches.value[index].empty = res.empty
-                    if (!res.empty) {
-                        saleBatches.value[index].hotInfo = res.content[0]
-                    }
-                })
-            })
-        }
+        // if (!res.empty) {
+        //     res.content.forEach((item, index) => {
+        //         http.post(
+        //             '/product/list',
+        //             {
+        //                 query: {
+        //                     batchId: item.id,
+        //                     status: 'IN_STOCK'
+        //                 },
+        //                 size: 1,
+        //                 sort: 'id,desc'
+        //             },
+        //             { body: 'json' }
+        //         ).then(res => {
+        //             saleBatches.value[index].empty = res.empty
+        //             if (!res.empty) {
+        //                 saleBatches.value[index].hotInfo = res.content[0]
+        //             }
+        //         })
+        //     })
+        // }
     })
 }
 
@@ -239,6 +246,14 @@ function getNotice() {
     })
 }
 
+const noticeBarRef = ref(null)
+const route = useRoute()
+watch(route, value => {
+    if (value.name === 'home' && noticeBarRef.value) {
+        noticeBarRef.value.reset()
+    }
+})
+
 const getStatus = info => {
     let date1 = getYear(new Date()) + '/' + (getMonth(new Date()) + 1) + '/' + getDate(new Date())
     if (info && info.saleStart) {

src/views/TabsPage.vue

@@ -90,4 +90,12 @@ ion-icon {
     width: 56px;
     height: 49px;
 }
+:deep(.tab-selected) {
+    ion-label {
+        color: var(--color-selected);
+        background: linear-gradient(140deg, #fb35ff 0%, #ffcc3d 100%);
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+    }
+}
 </style>