fix: 877 广告位图片未自适应

src/views/Index/Index.vue

@@ -240,10 +240,12 @@ const handleFood = id => {
   height: 100vh;
   position: absolute;
   top: 0;
+
   .header {
     width: 100%;
     height: 515px;
     padding: 392px 0 0 68px;
+
     .hot-search {
       .title {
         font-style: normal;
@@ -252,8 +254,10 @@ const handleFood = id => {
         line-height: 23px;
         color: var(--index-hotSearchTitleColor);
       }
+
       .row {
         margin-top: 16px;
+
         .item {
           position: relative;
           display: inline-block;
@@ -262,6 +266,7 @@ const handleFood = id => {
 
           background: var(--index-hotSearchBg);
           border-radius: var(--global-radius, 100px);
+
           .text {
             text-align: center;
             font-weight: 900;
@@ -285,12 +290,14 @@ const handleFood = id => {
             top: -10px;
           }
         }
+
         .item + .item {
           margin-left: 24px;
         }
       }
     }
   }
+
   .content {
     position: relative;
     width: 100%;
@@ -318,6 +325,7 @@ const handleFood = id => {
         border-radius: var(--global-radius, 32px);
         padding: 40px;
         z-index: 1;
+
         .title {
           font-style: normal;
           font-weight: 900;
@@ -325,6 +333,7 @@ const handleFood = id => {
           line-height: 66px;
           color: #ffffff;
         }
+
         .meta {
           margin-top: 8px;
           font-style: normal;
@@ -333,11 +342,13 @@ const handleFood = id => {
           line-height: 19px;
           color: rgba(255, 255, 255, 0.8);
         }
+
         img {
           margin-top: 40px;
           width: 259px;
         }
       }
+
       .bottom-right {
         position: absolute;
         width: 108px;
@@ -351,6 +362,7 @@ const handleFood = id => {
         line-height: 16px;
         text-align: center;
         color: var(--index-guideMetaColor);
+
         .qrcode {
           position: absolute;
           width: 84px;
@@ -363,6 +375,7 @@ const handleFood = id => {
           align-items: center;
         }
       }
+
       .meta1 {
         display: inline-flex;
         font-weight: 700;
@@ -370,12 +383,14 @@ const handleFood = id => {
         line-height: 23px;
         color: var(--index-guideMetaColor);
         margin-bottom: 6px;
+
         img {
           width: 20px;
           height: 20px;
           margin-left: 4px;
         }
       }
+
       .meta2 {
         font-weight: 900;
         font-size: 32px;
@@ -383,6 +398,7 @@ const handleFood = id => {
         color: var(--index-guideColor);
       }
     }
+
     .food,
     .rec {
       position: absolute;
@@ -392,6 +408,7 @@ const handleFood = id => {
       left: 447px;
       width: 565px;
       height: 557px;
+
       h1 {
         z-index: 1;
         font-weight: 900;
@@ -400,6 +417,7 @@ const handleFood = id => {
         color: #ffffff;
         margin-bottom: 8px;
       }
+
       h2 {
         z-index: 1;
         font-weight: 700;
@@ -407,9 +425,11 @@ const handleFood = id => {
         line-height: 19px;
         color: rgba(255, 255, 255, 0.8);
       }
+
       .brandSwiper {
         height: 389px;
         z-index: 0;
+
         :deep() {
           .swiper-wrapper {
             transition-timing-function: linear;
@@ -422,12 +442,14 @@ const handleFood = id => {
         flex: 1;
         overflow: hidden;
       }
+
       .grid {
         margin-top: 40px;
         display: grid;
         grid-template-columns: 1fr 1fr 1fr 1fr;
         width: 485px;
         gap: 15px;
+
         .item {
           width: 110px;
           height: 110px;
@@ -438,6 +460,7 @@ const handleFood = id => {
         }
       }
     }
+
     .food {
       display: flex;
       flex-direction: column;
@@ -446,6 +469,7 @@ const handleFood = id => {
       border: var(--index-foodBorder);
       align-items: center;
       overflow: hidden;
+
       .title {
         z-index: 1;
         margin-top: 4px;
@@ -458,6 +482,7 @@ const handleFood = id => {
         padding: 32px 0 0 40px;
       }
     }
+
     .rec {
       display: flex;
       flex-direction: column;
@@ -466,6 +491,7 @@ const handleFood = id => {
       border-radius: var(--global-radius, 32px);
       align-items: center;
       overflow: hidden;
+
       .title {
         z-index: 1;
         margin-top: 8px;
@@ -485,48 +511,57 @@ const handleFood = id => {
       right: 68px;
       top: 637px;
       display: flex;
+
       .item:nth-child(5n + 1) {
         .icon {
           background: var(--menu-indexBg1);
         }
       }
+
       .item:nth-child(5n + 2) {
         .icon {
           background: var(--menu-indexBg2);
         }
       }
+
       .item:nth-child(5n + 3) {
         .icon {
           background: var(--menu-indexBg3);
         }
       }
+
       .item:nth-child(5n + 4) {
         .icon {
           background: var(--menu-indexBg4);
         }
       }
+
       .item:nth-child(5n + 5) {
         .icon {
           background: var(--menu-indexBg5);
         }
       }
+
       .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;
           border-radius: var(--global-radius, 24px);
+
           img {
             width: 80px;
             height: 80px;
           }
         }
+
         .title {
           font-weight: 700;
           font-size: 18px;
@@ -535,10 +570,12 @@ const handleFood = id => {
           color: var(--menu-indexColor);
         }
       }
+
       .item + .item {
         margin-left: 24px;
       }
     }
+
     .acts {
       position: absolute;
       left: 68px;
@@ -546,6 +583,7 @@ const handleFood = id => {
       bottom: 46px;
       width: 944px;
       height: 531px;
+
       :deep(.swiper) {
         .swiper-pagination {
           top: 20px;
@@ -553,6 +591,7 @@ const handleFood = id => {
           bottom: auto;
           left: auto;
           width: auto;
+
           .swiper-pagination-bullet {
             width: 34px !important;
             height: 4px !important;
@@ -560,6 +599,7 @@ const handleFood = id => {
             border-radius: 6px !important;
             opacity: inherit !important;
             margin: 0;
+
             &.swiper-pagination-bullet-active {
               background: #ffffff;
               border-radius: 6px !important;
@@ -567,17 +607,21 @@ const handleFood = id => {
           }
         }
       }
+
       .banner-wrapper {
         position: relative;
-        width: 100%;
-        height: 100%;
+        width: 944px;
+        height: 531px;
         border-radius: var(--global-radius, 24px);
         overflow: hidden;
+
         .banner {
           width: 100%;
           height: 100%;
           object-fit: cover;
+          border-radius: var(--global-radius, 24px);
         }
+
         .name {
           position: absolute;
           bottom: 0;
@@ -603,56 +647,73 @@ const handleFood = id => {
     font-weight: 700;
     color: var(--color-white-opacity);
     text-transform: uppercase;
+
     i {
       font-size: 60px;
     }
   }
 }
+
 @media (min-aspect-ratio: 1/1) {
   .index-container {
     .header {
       height: 280px;
       flex: 0 0 280px;
       padding: 157px 0 0 0;
+
       .hot-search {
         .title {
           text-align: center;
         }
+
         .row {
           display: flex;
           justify-content: center;
         }
       }
     }
+
     .content {
       .guide {
         top: 84px;
         width: 339px;
         height: 625px;
         padding: 528px 0 0 40px;
+
         .top {
           height: 500px;
         }
       }
+
       .rec,
       .food {
         height: 625px;
         top: 84px;
+
         .brandSwiper {
           height: 457px;
         }
       }
+
       .menu {
         left: 1068px;
         right: 68px;
         top: 84px;
       }
+
       .acts {
         top: 267px;
         left: 1068px;
         right: 68px;
         width: 784px;
         height: 442px;
+        .banner-wrapper {
+          width: 784px;
+          height: 442px;
+          .name {
+            width: 784px;
+          }
+        }
       }
     }
   }