feat: 潮流样式

src/base/Temperature/Temperature.vue

@@ -22,7 +22,7 @@ const { weather, icon } = useWeather()
   z-index: 11;
 }
 .weather-icon {
-  color: #000000;
+  color: #fff;
   font-size: 36px;
   font-weight: bolder;
   font-family: 'font_bold';
@@ -34,7 +34,7 @@ const { weather, icon } = useWeather()
   font-size: 36px;
   line-height: 44px;
   letter-spacing: 0.05em;
-  color: #000000;
+  color: #fff;
   margin-right: 12px;
 }
 </style>

src/base/Time/Time.vue

@@ -23,7 +23,7 @@ const { dateRef, whichWeekRef } = useDay()
   font-weight: 700;
   font-size: 36px;
   line-height: 44px;
-  color: #000;
+  color: #ffffff;
   z-index: 11;
 }
 .month {
@@ -36,6 +36,7 @@ const { dateRef, whichWeekRef } = useDay()
   font-size: 13px;
   line-height: 16px;
   z-index: 11;
+  color: #ffffff;
 }
 .week {
   position: fixed;
@@ -46,7 +47,7 @@ const { dateRef, whichWeekRef } = useDay()
   font-weight: 700;
   font-size: 13px;
   line-height: 16px;
-  color: #516dd8;
+  color: #f0b92b;
   z-index: 11;
 }
 </style>

src/components/BrandScroll/BrandScroll.vue

@@ -128,7 +128,7 @@ watch([scroll, () => props.shop], () => {
   font-weight: 900;
   font-size: 32px;
   line-height: 38px;
-  color: rgba(0, 0, 0, 0.8);
+  color: #ffffff;
   padding-bottom: 24px;
   display: flex;
   align-items: baseline;
@@ -137,7 +137,7 @@ watch([scroll, () => props.shop], () => {
     font-weight: 500;
     font-size: 20px;
     line-height: 23px;
-    color: rgba(0, 0, 0, 0.6);
+    color: rgba(255, 255, 255, 0.8);
   }
   .current {
     display: flex;

src/components/CarouselWithIntro/CarouselWithIntro.vue

@@ -94,7 +94,7 @@ const qr = computed(() => props.data.qrFileList ?? [])
   font-weight: 700;
   font-size: 28px;
   line-height: 150%;
-  color: rgba(0, 0, 0, 0.8);
+  color: #ffffff;
 }
 
 .intro-scroll {
@@ -111,7 +111,7 @@ const qr = computed(() => props.data.qrFileList ?? [])
     font-size: 16px;
     line-height: 200%;
     text-align: justify;
-    color: rgba(0, 0, 0, 0.6);
+    color: #ffffff;
   }
 }
 </style>

src/components/Map/Map.vue

@@ -33,6 +33,7 @@ const { shop } = storeToRefs(store)
   width: 1080px;
   z-index: 10;
   overflow: hidden;
+  background: #dee2f6;
   &.billboard {
     pointer-events: none;
   }

src/components/PublicComponent/SearchBar.vue

@@ -30,14 +30,15 @@ const handleSearch = () => store.SET_SHOW_SEARCH(true)
     margin-right: 40px;
     background: center / cover no-repeat url(./back.png);
     box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
-    border-radius: 24px;
+    border-radius: 100px;
   }
   .bar {
     flex: 1;
     height: 100px;
-    background: #ffffff;
+    background: rgba(255, 255, 255, 0.6);
+    border: 2px solid #ffffff;
     box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
-    border-radius: 24px;
+    border-radius: 100px;
     display: flex;
     padding-left: 40px;
     align-items: center;
@@ -58,7 +59,7 @@ const handleSearch = () => store.SET_SHOW_SEARCH(true)
       font-weight: 700;
       font-size: 20px;
       line-height: 23px;
-      color: rgba(0, 0, 0, 0.2);
+      color: rgba(0, 0, 0, 0.6);
     }
   }
 }

src/components/PublicComponent/Tabs.vue

@@ -27,6 +27,31 @@ const goPage = item => {
   left: 68px;
   right: 68px;
   display: flex;
+  .item:nth-child(5n + 1) {
+    .icon {
+      background: linear-gradient(180deg, #e97893 0%, #f48bca 100%);
+    }
+  }
+  .item:nth-child(5n + 2) {
+    .icon {
+      background: linear-gradient(180deg, #f29348 0%, #f9ba61 100%);
+    }
+  }
+  .item:nth-child(5n + 3) {
+    .icon {
+      background: linear-gradient(180deg, #53ba82 0%, #89d963 100%);
+    }
+  }
+  .item:nth-child(5n + 4) {
+    .icon {
+      background: linear-gradient(180deg, #c57df1 0%, #ec86f2 100%);
+    }
+  }
+  .item:nth-child(5n + 5) {
+    .icon {
+      background: linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%);
+    }
+  }
   .item {
     position: relative;
     display: flex;
@@ -50,16 +75,14 @@ const goPage = item => {
       font-size: 18px;
       line-height: 21px;
       text-align: center;
-      color: rgba(0, 0, 0, 0.4);
+      color: #ffffff;
       margin-top: 12px;
     }
     &.active {
       .icon {
-        background: #ffffff;
-      }
-      .title {
-        color: rgba(0, 0, 0, 0.8);
+        border: 2px solid rgba(255, 255, 255, 0.8);
       }
+
       &::after {
         content: '';
         display: block;

src/layouts/View.vue

@@ -24,7 +24,7 @@ defineProps({
   flex-direction: column;
   width: 100vw;
   height: 100vh;
-  background: #dee6f6;
+  background: linear-gradient(180deg, #6257d7 0%, #f191c0 100%);
   .bgTop {
     background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.5) 100%);
     border-bottom: 1px solid rgba(255, 255, 255, 0.8);

src/views/Billboard/Billboard.vue

@@ -220,7 +220,7 @@ watch(scrollLefts, _scrollLefts => {
   left: 0;
   right: 0;
   bottom: 0;
-  background: #dee6f6;
+  background: linear-gradient(180deg, #6257d7 0%, #f191c0 100%);
   z-index: 100;
   .ip {
     position: absolute;

src/views/Guide/Guide.vue

@@ -251,7 +251,7 @@ watch(
   left: 0;
   right: 0;
   height: 642px;
-  background: left / 150px 100% no-repeat linear-gradient(180deg, #6c7ca6 0%, #879aca 100%), #dee6f6;
+  background: left / 150px 100% no-repeat linear-gradient(180deg, #6257d7 0%, #f191c0 100%), #dee6f6;
   z-index: 100;
   .row {
     height: 76px;
@@ -350,7 +350,7 @@ watch(
   z-index: 60;
   display: block;
   overflow: hidden;
-  background: linear-gradient(113.71deg, #435acd 0%, #749cf3 100%);
+  background: linear-gradient(90deg, #302159 0%, #7756b4 96.35%);
 
   &::-webkit-scrollbar {
     display: none;

src/views/Index/Index.vue

@@ -138,7 +138,7 @@ getActivityList(3).then(({ data }) => {
         font-weight: 900;
         font-size: 20px;
         line-height: 23px;
-        color: rgba(0, 0, 0, 0.8);
+        color: #fff;
       }
       .row {
         margin-top: 16px;
@@ -188,7 +188,8 @@ getActivityList(3).then(({ data }) => {
         flex: 0 0 339px;
         width: 339px;
         height: 557px;
-        background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
+        background: rgba(255, 255, 255, 0.6);
+        border: 2px solid rgba(255, 255, 255, 0.6);
         border-radius: 32px;
         overflow: hidden;
         padding: 460px 0 0 40px;
@@ -199,7 +200,7 @@ getActivityList(3).then(({ data }) => {
           left: 0;
           width: 100%;
           height: 432px;
-          background: linear-gradient(180deg, #435acd 0%, #749cf3 100%);
+          background: linear-gradient(180deg, #6257d7 0%, #f191c0 100%);
           border-radius: 32px;
           padding: 40px;
           z-index: 1;
@@ -229,7 +230,7 @@ getActivityList(3).then(({ data }) => {
           height: 156px;
           right: 0;
           bottom: 0;
-          background: rgba(255, 255, 255, 0.2);
+          background: #ffffff;
           padding-top: 132px;
           font-weight: 700;
           font-size: 14px;
@@ -305,7 +306,7 @@ getActivityList(3).then(({ data }) => {
         width: 100%;
         height: 100%;
         margin-left: 40px;
-        background: linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%);
+        background: rgba(255, 255, 255, 0.6);
         border-radius: 32px;
         border: 4px solid rgba(246, 139, 81, 1);
         align-items: center;
@@ -327,7 +328,8 @@ getActivityList(3).then(({ data }) => {
         width: 100%;
         height: 100%;
         margin-left: 40px;
-        background: linear-gradient(180deg, #ffffff 0%, #f2f4f8 100%);
+        background: rgba(255, 255, 255, 0.6);
+        border: 2px solid rgba(255, 255, 255, 0.6);
         border-radius: 32px;
         align-items: center;
         overflow: hidden;
@@ -346,6 +348,31 @@ getActivityList(3).then(({ data }) => {
     .r2 {
       display: flex;
       margin-top: 40px;
+      .item:nth-child(5n + 1) {
+        .icon {
+          background: linear-gradient(180deg, #e97893 0%, #f48bca 100%);
+        }
+      }
+      .item:nth-child(5n + 2) {
+        .icon {
+          background: linear-gradient(180deg, #f29348 0%, #f9ba61 100%);
+        }
+      }
+      .item:nth-child(5n + 3) {
+        .icon {
+          background: linear-gradient(180deg, #53ba82 0%, #89d963 100%);
+        }
+      }
+      .item:nth-child(5n + 4) {
+        .icon {
+          background: linear-gradient(180deg, #c57df1 0%, #ec86f2 100%);
+        }
+      }
+      .item:nth-child(5n + 5) {
+        .icon {
+          background: linear-gradient(180deg, #418fea 0%, #59b0f2 94.79%);
+        }
+      }
       .item {
         display: flex;
         flex-direction: column;
@@ -369,9 +396,10 @@ getActivityList(3).then(({ data }) => {
           font-size: 18px;
           line-height: 21px;
           text-align: center;
-          color: rgba(0, 0, 0, 0.8);
+          color: #fff;
         }
       }
+
       .item + .item {
         margin-left: 24px;
       }