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 {
+  .back {
     position: fixed;
-  top: 260px;
     left: 68px;
-  right: 68px;
-  height: 100px;
-  display: flex;
-  z-index: 100;
-  .back {
+    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,7 +52,7 @@
               <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="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>
@@ -70,6 +70,8 @@
               </EffectFade>
             </div>
           </div>
+        </div>
+      </div>
 
       <router-view />
     </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,7 +348,11 @@ getActivityList(3).then(({ data }) => {
           padding: 32px 0 0 40px;
         }
       }
-    }
+      .c3 {
+        margin-left: 56px;
+        display: flex;
+        flex-direction: column;
+        justify-content: flex-end;
         .r2 {
           display: flex;
           margin-top: 40px;
@@ -377,9 +387,9 @@ getActivityList(3).then(({ data }) => {
           }
         }
         .r3 {
-      margin-top: 40px;
-      width: 944px;
-      height: 531px;
+          margin-top: 32px;
+          width: 784px;
+          height: 442px;
           :deep(.swiper) {
             .swiper-pagination {
               top: 20px;
@@ -403,20 +413,20 @@ getActivityList(3).then(({ data }) => {
           }
           .banner-wrapper {
             position: relative;
-        width: 944px;
-        height: 531px;
+            width: 784px;
+            height: 442px;
             border-radius: 24px;
             overflow: hidden;
             .banner {
-          width: 944px;
-          height: 531px;
+              width: 784px;
+              height: 442px;
               object-fit: cover;
             }
             .name {
               position: absolute;
               bottom: 0;
               left: 0;
-          width: 944px;
+              width: 784px;
               height: 58px;
               background: rgba(0, 0, 0, 0.4);
               font-weight: 700;
@@ -431,6 +441,8 @@ getActivityList(3).then(({ data }) => {
           }
         }
       }
+    }
+  }
 
   .text {
     font-size: 88px;