feat: 首页样式更新

src/App.vue

@@ -13,8 +13,8 @@ import PublicComponent from '@/components/PublicComponent/PublicComponent.vue'
 body,
 html,
 #app {
-  width: 1080px;
-  height: 1920px;
+  width: 100vw;
+  height: 100vh;
   background-color: #dee6f6;
   overflow: hidden;
 }

src/base/Temperature/Temperature.vue

@@ -14,7 +14,7 @@ const { weather, icon } = useWeather()
 <style lang="scss" scoped>
 .Temperature-wrapper {
   position: fixed;
-  top: 48px;
+  top: 32px;
   right: 68px;
   height: 44px;
   display: flex;

src/base/Time/Time.vue

@@ -16,8 +16,8 @@ const { dateRef, whichWeekRef } = useDay()
 <style lang="scss" scoped>
 .time {
   position: fixed;
-  top: 48px;
-  left: 659px;
+  top: 32px;
+  left: 1499px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
@@ -28,8 +28,8 @@ const { dateRef, whichWeekRef } = useDay()
 }
 .month {
   position: fixed;
-  top: 54px;
-  left: 783px;
+  top: 38px;
+  left: 1623px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;
@@ -39,8 +39,8 @@ const { dateRef, whichWeekRef } = useDay()
 }
 .week {
   position: fixed;
-  top: 70px;
-  left: 783px;
+  top: 54px;
+  left: 1623px;
   font-family: 'Montserrat';
   font-style: normal;
   font-weight: 700;

src/components/PublicComponent/SearchBar.vue

@@ -17,23 +17,25 @@ const handleSearch = () => store.SET_SHOW_SEARCH(true)
 
 <style lang="scss" scoped>
 .row {
-  position: fixed;
-  top: 260px;
-  left: 68px;
-  right: 68px;
-  height: 100px;
-  display: flex;
-  z-index: 100;
   .back {
+    position: fixed;
+    left: 68px;
+    top: 161px;
     width: 130px;
     height: 100px;
     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;
+    z-index: 100;
   }
   .bar {
-    flex: 1;
+    position: fixed;
+    width: 698px;
+    top: 38px;
+    left: 0;
+    right: 0;
+    margin: auto;
     height: 100px;
     background: #ffffff;
     box-shadow: 0px 15px 24px rgba(0, 0, 0, 0.05);
@@ -41,6 +43,7 @@ const handleSearch = () => store.SET_SHOW_SEARCH(true)
     display: flex;
     padding-left: 40px;
     align-items: center;
+    z-index: 100;
     .icon {
       width: 56px;
       height: 56px;

src/layouts/View.vue

@@ -1,22 +1,11 @@
 <template>
   <div class="view-container">
-    <div :class="['bgTop', long ? 'long' : '', mid ? 'mid' : '']"></div>
+    <div class="bgTop"></div>
     <slot />
   </div>
 </template>
 
-<script setup>
-defineProps({
-  long: {
-    type: Boolean,
-    default: false
-  },
-  mid: {
-    type: Boolean,
-    default: false
-  }
-})
-</script>
+<script setup></script>
 
 <style lang="scss" scoped>
 .view-container {
@@ -28,13 +17,7 @@ defineProps({
   .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);
-    height: 408px;
-    &.long {
-      height: 570px;
-    }
-    &.mid {
-      height: 515px;
-    }
+    height: 280px;
   }
 }
 </style>

src/views/Index/Index.vue

@@ -52,22 +52,24 @@
               <img class="item" v-for="shop of shopList.slice(0, 16)" :key="shop.id" :src="config.sourceUrl + shop.logoUrl" alt="" />
             </div>
           </div>
-        </div>
-        <div class="r2">
-          <div class="item" v-for="tab of sidebarList" :key="tab.title" @click="goPage(tab)">
-            <div class="icon"><img :src="tab.icon" /></div>
-            <div class="title">{{ switchLanguage(tab, 'title') }}</div>
-          </div>
-        </div>
-        <div class="r3">
-          <EffectFade :list="activityList ?? []">
-            <template v-slot="{ item }">
-              <div class="banner-wrapper">
-                <img class="banner" :src="config.sourceUrl + item.fileUrl" alt="" />
-                <div class="name">{{ item.activityName }}</div>
+          <div class="c3">
+            <div class="r2">
+              <div class="item" v-for="tab of sidebarList" :key="tab.title" @click="goPage(tab)">
+                <div class="icon"><img :src="tab.icon" /></div>
+                <div class="title">{{ switchLanguage(tab, 'title') }}</div>
               </div>
-            </template>
-          </EffectFade>
+            </div>
+            <div class="r3">
+              <EffectFade :list="activityList ?? []">
+                <template v-slot="{ item }">
+                  <div class="banner-wrapper">
+                    <img class="banner" :src="config.sourceUrl + item.fileUrl" alt="" />
+                    <div class="name">{{ item.activityName }}</div>
+                  </div>
+                </template>
+              </EffectFade>
+            </div>
+          </div>
         </div>
       </div>
 
@@ -130,8 +132,9 @@ getActivityList(3).then(({ data }) => {
   top: 0;
   .header {
     width: 100%;
-    height: 515px;
-    padding: 392px 0 0 68px;
+    height: 280px;
+    flex: 0 0 280px;
+    padding: 157px 0 0 0;
     .hot-search {
       .title {
         font-style: normal;
@@ -139,8 +142,11 @@ getActivityList(3).then(({ data }) => {
         font-size: 20px;
         line-height: 23px;
         color: rgba(0, 0, 0, 0.8);
+        text-align: center;
       }
       .row {
+        display: flex;
+        justify-content: center;
         margin-top: 16px;
         .item {
           position: relative;
@@ -179,26 +185,26 @@ getActivityList(3).then(({ data }) => {
   .content {
     width: 100%;
     flex: 1;
-    padding: 40px 68px 0 68px;
+    padding: 84px 68px;
     .r1 {
       display: flex;
-      height: 557px;
+      height: 625px;
       .guide {
         position: relative;
         flex: 0 0 339px;
         width: 339px;
-        height: 557px;
+        height: 625px;
         background: linear-gradient(99.5deg, #f0b92b 0%, #f9d556 100%);
         border-radius: 32px;
         overflow: hidden;
-        padding: 460px 0 0 40px;
+        padding: 528px 0 0 40px;
 
         .top {
           position: absolute;
           top: 0;
           left: 0;
           width: 100%;
-          height: 432px;
+          height: 500px;
           background: linear-gradient(180deg, #435acd 0%, #749cf3 100%);
           border-radius: 32px;
           padding: 40px;
@@ -342,91 +348,97 @@ getActivityList(3).then(({ data }) => {
           padding: 32px 0 0 40px;
         }
       }
-    }
-    .r2 {
-      display: flex;
-      margin-top: 40px;
-      .item {
+      .c3 {
+        margin-left: 56px;
         display: flex;
         flex-direction: column;
-        flex: 1;
-        height: 151px;
-        justify-content: space-between;
-        .icon {
+        justify-content: flex-end;
+        .r2 {
           display: flex;
-          justify-content: center;
-          align-items: center;
-          height: 118px;
-          background: #ffffff;
-          border-radius: 24px;
-          img {
-            width: 80px;
-            height: 80px;
-          }
-        }
-        .title {
-          font-weight: 700;
-          font-size: 18px;
-          line-height: 21px;
-          text-align: center;
-          color: rgba(0, 0, 0, 0.8);
-        }
-      }
-      .item + .item {
-        margin-left: 24px;
-      }
-    }
-    .r3 {
-      margin-top: 40px;
-      width: 944px;
-      height: 531px;
-      :deep(.swiper) {
-        .swiper-pagination {
-          top: 20px;
-          right: 27px;
-          bottom: auto;
-          left: auto;
-          width: auto;
-          .swiper-pagination-bullet {
-            width: 34px !important;
-            height: 4px !important;
-            background: rgba(0, 0, 0, 0.6);
-            border-radius: 6px !important;
-            opacity: inherit !important;
-            margin: 0;
-            &.swiper-pagination-bullet-active {
+          margin-top: 40px;
+          .item {
+            display: flex;
+            flex-direction: column;
+            flex: 1;
+            height: 151px;
+            justify-content: space-between;
+            .icon {
+              display: flex;
+              justify-content: center;
+              align-items: center;
+              height: 118px;
               background: #ffffff;
-              border-radius: 6px !important;
+              border-radius: 24px;
+              img {
+                width: 80px;
+                height: 80px;
+              }
+            }
+            .title {
+              font-weight: 700;
+              font-size: 18px;
+              line-height: 21px;
+              text-align: center;
+              color: rgba(0, 0, 0, 0.8);
             }
           }
+          .item + .item {
+            margin-left: 24px;
+          }
         }
-      }
-      .banner-wrapper {
-        position: relative;
-        width: 944px;
-        height: 531px;
-        border-radius: 24px;
-        overflow: hidden;
-        .banner {
-          width: 944px;
-          height: 531px;
-          object-fit: cover;
-        }
-        .name {
-          position: absolute;
-          bottom: 0;
-          left: 0;
-          width: 944px;
-          height: 58px;
-          background: rgba(0, 0, 0, 0.4);
-          font-weight: 700;
-          font-size: 24px;
-          line-height: 58px;
-          color: #ffffff;
-          white-space: nowrap;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          padding: 0 30px;
+        .r3 {
+          margin-top: 32px;
+          width: 784px;
+          height: 442px;
+          :deep(.swiper) {
+            .swiper-pagination {
+              top: 20px;
+              right: 27px;
+              bottom: auto;
+              left: auto;
+              width: auto;
+              .swiper-pagination-bullet {
+                width: 34px !important;
+                height: 4px !important;
+                background: rgba(0, 0, 0, 0.6);
+                border-radius: 6px !important;
+                opacity: inherit !important;
+                margin: 0;
+                &.swiper-pagination-bullet-active {
+                  background: #ffffff;
+                  border-radius: 6px !important;
+                }
+              }
+            }
+          }
+          .banner-wrapper {
+            position: relative;
+            width: 784px;
+            height: 442px;
+            border-radius: 24px;
+            overflow: hidden;
+            .banner {
+              width: 784px;
+              height: 442px;
+              object-fit: cover;
+            }
+            .name {
+              position: absolute;
+              bottom: 0;
+              left: 0;
+              width: 784px;
+              height: 58px;
+              background: rgba(0, 0, 0, 0.4);
+              font-weight: 700;
+              font-size: 24px;
+              line-height: 58px;
+              color: #ffffff;
+              white-space: nowrap;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              padding: 0 30px;
+            }
+          }
         }
       }
     }