From c628500fbc17c3277cbe6e9105fa7c909eaafb51 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A7=9C=E9=91=AB?= <damon@DamondeMacBook-Pro.local>
Date: Tue, 19 Jul 2022 18:10:33 +0800
Subject: [PATCH] =?UTF-8?q?=E5=93=81=E7=89=8C=20=E7=BE=8E=E9=A3=9F=20?=
 =?UTF-8?q?=E6=B4=BB=E5=8A=A8=20=E6=9C=8D=E5=8A=A1=20=E6=90=9C=E7=B4=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/fly.png                     | Bin 0 -> 825 bytes
 src/assets/images/search/back.png             | Bin 0 -> 234 bytes
 .../ActivitiesList/ActivitiesList.vue         | 236 +++++--------
 .../ActivityDetail/ActivityDetail.vue         |   2 +-
 src/components/Benefits/Benefits.vue          |  15 +-
 src/components/BrandDetail/BrandDetail.vue    |  17 +-
 .../BrandDetail/children/Activity.vue         |  10 +-
 .../BrandDetail/children/Comment.vue          |   8 +-
 src/components/BrandDetail/children/Goods.vue |   8 +-
 .../BrandDetail/children/Recommend.vue        |   8 +-
 .../BrandRecommend/BrandRecommend.vue         | 104 ++++++
 src/components/BrandScroll/BrandScroll.vue    |  52 +++
 src/components/Busniness/Busniness.vue        |  20 +-
 src/components/Industry/Industry.vue          |  11 +-
 src/components/LoginByPhone/LoginByPhone.vue  |   2 +-
 .../MallIntroduce/MallIntroduce.vue           |  34 +-
 src/components/MovieDetail/MovieDetail.vue    |  23 +-
 src/components/PlateInput/PlateInput.vue      |  48 +--
 .../PlateKeyboard/PlateKeyboard.vue           |  16 +-
 src/components/Search/Search.vue              | 315 ++++++++++--------
 src/components/ServiceList/ServiceList.vue    |  11 +-
 src/components/Traffic/Traffic.vue            |  13 +-
 src/layouts/View.vue                          |   2 +-
 src/views/Activities/Activities.vue           |   7 +-
 src/views/Brand/Brand.vue                     | 219 +++---------
 src/views/Foods/Foods.vue                     | 244 +++-----------
 src/views/Member/Member.vue                   |  27 +-
 src/views/Member/tabs.js                      |   6 +-
 src/views/Movie/Movie.vue                     | 170 ++++++----
 src/views/Nav/Nav.vue                         |   2 +-
 src/views/Parking/Parking.vue                 | 107 +++---
 src/views/Service/Service.vue                 |   9 +-
 32 files changed, 822 insertions(+), 924 deletions(-)
 create mode 100644 src/assets/images/fly.png
 create mode 100644 src/assets/images/search/back.png
 create mode 100644 src/components/BrandRecommend/BrandRecommend.vue
 create mode 100644 src/components/BrandScroll/BrandScroll.vue

diff --git a/src/assets/images/fly.png b/src/assets/images/fly.png
new file mode 100644
index 0000000000000000000000000000000000000000..cc799c2af811f7ae0c5efa90e5dc0186cd527b22
GIT binary patch
literal 825
zcmV-91IGM`P)<h;3K|Lk000e1NJLTq002+`002-31^@s6juG;$00009a7bBm000&x
z000&x0ZCFM@Bjb+0drDELIAGL9O(c600d`2O+f$vv5yP<VFdsH0?tW9K~#7F?VImy
z+b|Ht&qW7FH|Pi%fg7YFcm#KXA{%6brW3T8z}iG3G#k8-P=qLkcsh!d#6R}~2!EhW
zQP1zFXG$hg6h%=KMNw)3z@2Sp+YBi(-bK6EcEx85Df2L*O}UWrfl#z5_tZKoL>uY3
zalcZ<IMM9O*|rDU46UQ%I;#^fk!Vw1xXu$*zy_jC`F1*;UVWX#I&fprMmkPBM^OUq
zB-)f0DxHX{C&z!=o@_G<<CYm;wifN?I6ivGT(c=*Y*U_Y{rY3uKf9K7GyR77Y)1kP
z74RU@raUlxd9HtZm8WnnJu~JV<w8!PP3CmZjD3}kvsnq_`0`xBFn!0AZ;no5=6Yq0
zxnF!KNwk|e`w+#KkyRy({L6C*!}N6&fLOo^M4Pf-e8F&I<%)D{TAspl>Y4eai!blu
zRUz8soRY+sk);xj{We^Q{<P)!O!;7#zU1ZWu2#>8=dW!)C<Aare6a(6$575a;^=Mr
z<;J4}K*IPEGYPkcR-`N4@tFDiraeJ{u5=<X^EhsaK_RY0?z=C@*p)~eUp5Dsxe~+g
zbszaY`+{_?jB*KTxOs$lR~lLYa)>V}!FpG&av^exFR4MeD-8vLT;oehAa`Z33sK6=
zqf}sd7sv#RRaSgS1^BC`_{33ae2E3a+8FIZ)cEX+lvo#{w)hfCtP4?de3264LbMQH
zmWXj7T8l3}*0>Nm#g{Ks29Hdi@wm`1pDF**-B3bZh?e8a90*to(RzIGA$1`%zRV+a
zAvC`Dk+={VU;GGMcv%v-d9eOzG5zDTL*POm`p4;!6)xN)zLfGyWRAzc_jjaxCeVd#
z$Co(}widP>UwjB%xLJHDc?}$qtcC6EzJwrfp~e@Eg|)EV-Iov;7q+|m5(48wjW1F>
zF4XuUWyXcN`x45H3(us4f#ESZC*qTquc9c5qSVYAI&$mrXxY^800000NkvXXu0mjf
DJ`Z`a

literal 0
HcmV?d00001

diff --git a/src/assets/images/search/back.png b/src/assets/images/search/back.png
new file mode 100644
index 0000000000000000000000000000000000000000..fc75824deccbf98d4082a4a5aabf2d1428fa275a
GIT binary patch
literal 234
zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q1|(OsS<3+_&H|6fVg?3oVGw3ym^DWND9BhG
z<nF|<?wrg^AcrO0(btiIVPik{pF~z5zuwcuF{Fa=?F~b&1_J??ix-6}7gq=ue_k=c
zq*0}pWAh*O=-jV2^HhOK849NcT{51ow5rf|%?UlduqO)ZET7~EmY<R=T-Q<TI!F6a
zjNtdpvG;GO?Ow!j&)aw13=zhOE>en<Jd|C8GE)R!{x!>Cn;1E<WMZV?)e|}(6YcUC
V=Sk^#gs4`4c%H6)F6*2UngBvVNiqNc

literal 0
HcmV?d00001

diff --git a/src/components/ActivitiesList/ActivitiesList.vue b/src/components/ActivitiesList/ActivitiesList.vue
index 95282c2..2b1e1fc 100644
--- a/src/components/ActivitiesList/ActivitiesList.vue
+++ b/src/components/ActivitiesList/ActivitiesList.vue
@@ -1,38 +1,27 @@
 <template>
-  <div class="activity-wrapper">
-    <Swiper
-      @tap="tap"
-      @init="init"
-      :loop="true"
-      :centered-slides="true"
-      :loop-additional-slides="2"
-      :slide-to-clicked-slide="true"
-      :modules="[Pagination, EffectCoverflow]"
-      effect="coverflow"
-      :space-between="40"
-      :coverflow-effect="{ rotate: 68, stretch: 0, depth: 100, modifier: 1, slideShadows: false }"
-      :pagination="true"
-    >
-      <SwiperSlide v-for="item of list" :key="item.activityId">
-        <div class="banner-box">
-          <img class="banner" :src="config.sourceUrl + item.fileUrl" alt="" />
-          <div class="masker">
-            <slot :item="item">
-              <div class="flex">
-                <h1 class="activity-name">{{ switchLanguage(item, 'activityName') }}</h1>
-                <div class="line"></div>
-                <div class="time-wrapper">
-                  <p class="common first">{{ $t('ActivityTime') }}：{{ item.startDate }} {{ $t('zhi') + item.endDate }}</p>
-                  <p class="common">{{ $t('activityAddress') }}：{{ switchLanguage(item, 'activityAddress') }}</p>
-                </div>
-              </div>
-            </slot>
-            <div class="btn">查看详情</div>
+  <ScrollView class="scroll" :list="list">
+    <TransitionGroup name="zoom" tag="div" class="scroll-content">
+      <div class="content-item" v-for="item of list" :key="item.activityId" @click="handleActivity(item)">
+        <div class="item-left">
+          <img :src="config.sourceUrl + item.fileUrl" alt="" />
+        </div>
+        <div class="item-right">
+          <div class="full">
+            <h1 class="activity-name">{{ switchLanguage(item, 'activityName') }}</h1>
+            <div class="common-box">
+              <div class="common">{{ $t('ActivityTime') }}：</div>
+              <div class="info">{{ item.startDate }} {{ $t('zhi') + item.endDate }}</div>
+            </div>
+            <div class="common-box">
+              <div class="common">{{ $t('activityAddress') }}：</div>
+              <div class="info">{{ switchLanguage(item, 'activityAddress') }}</div>
+            </div>
           </div>
+          <div class="btn">查看活动</div>
         </div>
-      </SwiperSlide>
-    </Swiper>
-  </div>
+      </div>
+    </TransitionGroup>
+  </ScrollView>
   <Teleport to="body">
     <Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
       <ActivityDetail @close="showDetail = false" :config="config" :activity="activity" v-if="showDetail" />
@@ -41,20 +30,17 @@
 </template>
 
 <script setup>
-import { watch, ref } from 'vue'
+import { ref } from 'vue'
 import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
-import SwiperCore, { Pagination, EffectCoverflow } from 'swiper'
-import { Swiper, SwiperSlide } from 'swiper/vue'
 import ActivityDetail from '../ActivityDetail/ActivityDetail.vue'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
 
 import 'swiper/css'
 import 'swiper/css/pagination'
 import 'swiper/css/effect-coverflow'
 
-SwiperCore.use([Pagination, EffectCoverflow])
-
-const props = defineProps({
+defineProps({
   list: {
     type: Array,
     default: () => []
@@ -63,137 +49,89 @@ const props = defineProps({
 
 const showDetail = ref(false)
 const activity = ref({})
-function tap(_swiper, event) {
-  const { target } = event
-  if (target.className === 'btn') {
-    const realIndex = _swiper.realIndex
-    activity.value = props.list[realIndex]
-    showDetail.value = true
-  }
-}
-
-const swiper = ref(null)
-function init(_swiper) {
-  swiper.value = _swiper
+function handleActivity(item) {
+  activity.value = item
+  showDetail.value = true
 }
 
 const store = useStore()
 const { config } = storeToRefs(store)
-
-watch(
-  () => props.list,
-  newVal => {
-    if (newVal.length) {
-      setTimeout(() => {
-        swiper.value.update()
-        swiper.value.slideToLoop(0, 0, false)
-      }, 0)
-    }
-  }
-)
 </script>
 
 <style lang="scss" scoped>
-.activity-wrapper {
-  position: relative;
-  width: 870px;
-  height: 490px;
-  border-radius: 12px;
-  margin: 0 auto;
-
-  :deep(.swiper) {
-    overflow: visible;
-    .swiper-slide {
-      border-radius: 12px;
-    }
-    .swiper-slide-active .masker {
-      display: block;
-    }
-    .swiper-pagination {
-      bottom: -80px;
-    }
-    .swiper-pagination-bullet {
-      width: 16px;
-      height: 3px;
-      background: rgba(0, 0, 0, 0.5);
-      border-radius: 3px;
-      opacity: auto !important;
-      display: inline-block;
-      margin-right: 4px;
-    }
-    .swiper-pagination-bullet-active {
-      background: #f1b33e;
-    }
-  }
-
-  .banner-box {
-    width: 870px;
-    height: 490px;
+.scroll {
+  position: absolute;
+  top: 360px;
+  left: 170px;
+  right: 40px;
+  bottom: 0;
+  overflow: hidden;
+  .content-item {
+    display: flex;
+    height: 340px;
+    background: #ffffff;
     border-radius: 12px;
     overflow: hidden;
-
-    .banner {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-      border-radius: 12px;
-    }
-    .masker {
-      display: none;
-      position: absolute;
-      height: 72px;
-      left: 0px;
-      right: 0;
-      bottom: 0px;
-      background: rgba(0, 0, 0, 0.4);
-      padding: 16px 32px 0 32px;
-      border-radius: 0 0 12px 12px;
-
-      .flex {
-        display: flex;
+    margin-bottom: 24px;
+    .item-left {
+      flex-shrink: 0;
+      width: 600px;
+      height: 340px;
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
       }
-      .activity-name {
+    }
+    .item-right {
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      padding: 32px 0 0 0;
+      .full {
         flex: 1;
+      }
+      .btn {
         font-weight: 700;
-        font-size: 18px;
+        font-size: 16px;
+        line-height: 56px;
+        text-align: center;
         font-family: 'font_bold';
-        color: #ffffff;
+        color: rgba(0, 0, 0, 0.6);
+        height: 56px;
+        border-top: 1px solid rgba(0, 0, 0, 0.05);
       }
-      .line {
-        margin-left: 50px;
-        margin-right: 25px;
-        width: 2px;
-        height: 34px;
-        background: rgba(255, 255, 255, 0.4);
-        border-radius: 2px;
+
+      .activity-name {
+        font-weight: 700;
+        font-size: 20px;
+        line-height: 150%;
+        text-align: justify;
+        color: rgba(0, 0, 0, 0.8);
+        font-family: 'font_bold';
+        margin: 0 32px;
+        margin-bottom: 49px;
+
+        @include more-wrap(3);
       }
-      .common {
+      .common-box {
+        margin-bottom: 16px;
         font-weight: 700;
-        font-size: 14px;
+        margin-left: 32px;
+        margin-right: 32px;
+
         font-family: 'font_bold';
-        color: #ffffff;
-        &.first {
-          padding-bottom: 8px;
+        .common {
+          font-size: 12px;
+          color: rgba(0, 0, 0, 0.6);
+          padding-bottom: 6px;
+        }
+        .info {
+          font-size: 10px;
+          color: rgba(0, 0, 0, 0.4);
         }
       }
     }
-    .btn {
-      position: absolute;
-      width: 216px;
-      height: 48px;
-      line-height: 48px;
-      left: 50%;
-      transform: translateX(-50%);
-      bottom: -24px;
-      background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
-      box-shadow: 0px 20px 30px rgba(221, 152, 55, 0.2);
-      border-radius: 53px;
-      font-weight: 700;
-      font-family: 'font_bold';
-      font-size: 16px;
-      text-align: center;
-      color: #ffffff;
-    }
   }
 }
 </style>
diff --git a/src/components/ActivityDetail/ActivityDetail.vue b/src/components/ActivityDetail/ActivityDetail.vue
index 4790da5..ed785e3 100644
--- a/src/components/ActivityDetail/ActivityDetail.vue
+++ b/src/components/ActivityDetail/ActivityDetail.vue
@@ -82,7 +82,7 @@ function back() {
   position: relative;
   width: 700px;
   margin: 0 auto;
-  margin-top: 124px;
+  margin-top: 350px;
   z-index: 2;
   .thumbs {
     position: absolute;
diff --git a/src/components/Benefits/Benefits.vue b/src/components/Benefits/Benefits.vue
index efeb382..9a1003a 100644
--- a/src/components/Benefits/Benefits.vue
+++ b/src/components/Benefits/Benefits.vue
@@ -64,17 +64,15 @@ const showLoginError = ref(false)
 
 <style lang="scss" scoped>
 .benefits-wrapper {
-  display: flex;
-  width: 1776px;
-  height: 510px;
+  width: 870px;
   left: 72px;
   top: 344px;
   background: rgba(255, 255, 255, 0.4);
   box-shadow: inset 1px 0px 0px #ffffff;
   border-radius: 12px;
-  margin-left: 72px;
-  margin-top: 98px;
-  padding-left: 48px;
+  margin-left: 170px;
+  margin-top: 58px;
+  padding-bottom: 56px;
 
   :deep(.swiper-pagination-bullet) {
     width: 16px !important;
@@ -106,6 +104,7 @@ const showLoginError = ref(false)
   display: flex;
   justify-content: space-between;
   padding-right: 56px;
+  margin-left: 56px;
 }
 .bottom-right {
   display: flex;
@@ -152,15 +151,17 @@ const showLoginError = ref(false)
   line-height: 28px;
   color: rgba(0, 0, 0, 0.8);
   padding-bottom: 32px;
+  margin-left: 56px;
 }
 
 .intro-scroll {
   position: relative;
   height: 156px;
   overflow: hidden;
+  margin-left: 56px;
   margin-right: 34px;
   padding-right: 16px;
-  margin-bottom: 52px;
+  margin-bottom: 67px;
   .intro {
     font-weight: 400;
     font-size: 14px;
diff --git a/src/components/BrandDetail/BrandDetail.vue b/src/components/BrandDetail/BrandDetail.vue
index 7e7fa60..ed686e7 100644
--- a/src/components/BrandDetail/BrandDetail.vue
+++ b/src/components/BrandDetail/BrandDetail.vue
@@ -1,6 +1,6 @@
 <template>
   <Dialog @close="back">
-    <div class="content">
+    <div class="content" :class="{ active: shop.activityList.length || shop.thirdKouCode }">
       <div class="left">
         <div class="carousel">
           <EffectFade :list="shop.doorMaterialList">
@@ -141,11 +141,13 @@ function back() {
 <style lang="scss" scoped>
 .content {
   position: absolute;
-  display: flex;
-  top: 50%;
+  top: 350px;
   left: 50%;
-  transform: translate3d(-50%, -50%, 0);
+  transform: translate3d(-50%, 0, 0);
   z-index: 2;
+  &.active {
+    top: 100px;
+  }
   &::before {
     content: '';
     position: absolute;
@@ -169,8 +171,12 @@ function back() {
   .left {
     width: 700px;
     .carousel {
+      position: relative;
       width: 700px;
       height: 393px;
+      background-color: #fff;
+      border-radius: 12px;
+      overflow: hidden;
       .like-wrapper {
         position: absolute;
         left: 571px;
@@ -181,6 +187,7 @@ function back() {
         padding: 0 14px;
         background: rgba(0, 0, 0, 0.2);
         border-radius: 54px;
+
         z-index: 1;
         .like-num {
           padding-left: 8px;
@@ -425,7 +432,7 @@ function back() {
   .right {
     width: 700px;
     flex: 1;
-    margin-left: 40px;
+    margin-top: 40px;
   }
   .btn {
     position: absolute;
diff --git a/src/components/BrandDetail/children/Activity.vue b/src/components/BrandDetail/children/Activity.vue
index 816cbad..58f455d 100644
--- a/src/components/BrandDetail/children/Activity.vue
+++ b/src/components/BrandDetail/children/Activity.vue
@@ -68,15 +68,11 @@ function handleActivity(item) {
 
 <style lang="scss" scoped>
 .activity-scroll {
-  position: absolute;
-  right: 0;
-  top: 120px;
-  width: 700px;
-  bottom: 0;
+  position: relative;
   overflow: hidden;
-  height: 880px;
+  height: 690px;
   &.active {
-    top: 0;
+    height: 860px;
   }
   .title {
     font-weight: 700;
diff --git a/src/components/BrandDetail/children/Comment.vue b/src/components/BrandDetail/children/Comment.vue
index 9561ab8..b215442 100644
--- a/src/components/BrandDetail/children/Comment.vue
+++ b/src/components/BrandDetail/children/Comment.vue
@@ -70,11 +70,8 @@ function starList() {
   margin-bottom: 24px;
 }
 .scroll {
-  position: absolute;
-  width: 700px;
-  top: 244px;
-  right: 0;
-  height: 784px;
+  position: relative;
+  height: 618px;
   overflow: hidden;
   .comments {
     display: flex;
@@ -110,6 +107,7 @@ function starList() {
 .score-wrapper {
   display: flex;
   align-items: center;
+  margin-bottom: 25px;
   .score-num {
     font-weight: 700;
     font-family: 'font_bold';
diff --git a/src/components/BrandDetail/children/Goods.vue b/src/components/BrandDetail/children/Goods.vue
index 95bc89d..636c26d 100644
--- a/src/components/BrandDetail/children/Goods.vue
+++ b/src/components/BrandDetail/children/Goods.vue
@@ -66,13 +66,9 @@ function show(flag) {
   margin-bottom: 24px;
 }
 .scroll {
-  position: absolute;
-  right: 0;
-  top: 169px;
-  width: 700px;
-  bottom: 0;
+  position: relative;
   overflow: hidden;
-  height: 830px;
+  height: 690px;
 }
 .goods {
   padding-bottom: 8px;
diff --git a/src/components/BrandDetail/children/Recommend.vue b/src/components/BrandDetail/children/Recommend.vue
index b3ceaca..9bd3651 100644
--- a/src/components/BrandDetail/children/Recommend.vue
+++ b/src/components/BrandDetail/children/Recommend.vue
@@ -37,13 +37,9 @@ const recommendList = ref([
   margin-bottom: 24px;
 }
 .scroll {
-  position: absolute;
-  right: 0;
-  top: 169px;
-  width: 700px;
-  bottom: 0;
+  position: relative;
   overflow: hidden;
-  height: 830px;
+  height: 690px;
   .recommends {
     display: grid;
     grid-template-columns: repeat(3, 220px);
diff --git a/src/components/BrandRecommend/BrandRecommend.vue b/src/components/BrandRecommend/BrandRecommend.vue
new file mode 100644
index 0000000..41ac01b
--- /dev/null
+++ b/src/components/BrandRecommend/BrandRecommend.vue
@@ -0,0 +1,104 @@
+<template>
+  <div class="brand-recommend">
+    <p class="title">热门推荐</p>
+    <ScrollView :list="list" scroll-x class="content">
+      <div class="recommend-content">
+        <div class="group-item" @click="handleShop(item)" v-for="item of list" :key="item.shopId">
+          <div class="logo-wrapper">
+            <img loading="lazy" :src="config.sourceUrl + item.materialList?.[0]" alt="" class="shop-logo" />
+          </div>
+          <p class="name">
+            <span class="shop-name">{{ switchLanguage(item, 'shopName') }}</span>
+            <span class="name-right"><img :src="config.sourceUrl + item.industryUrl" class="format-icon" alt="" />{{ item.floor }}</span>
+          </p>
+        </div>
+      </div>
+    </ScrollView>
+  </div>
+</template>
+
+<script setup>
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+
+defineProps({
+  list: Array,
+  config: Object
+})
+const emits = defineEmits(['click'])
+
+function handleShop(item) {
+  emits('click', item)
+}
+</script>
+
+<style lang="scss" scoped>
+.brand-recommend {
+  margin-left: 170px;
+
+  .title {
+    font-weight: 700;
+    font-size: 24px;
+    font-family: 'font_bold';
+    color: rgba(0, 0, 0, 0.8);
+    padding-bottom: 12px;
+  }
+  .content {
+    width: 910px;
+    overflow: hidden;
+    margin-bottom: 40px;
+  }
+  .recommend-content {
+    display: inline-block;
+    white-space: nowrap;
+    padding-top: 32px;
+    height: 255px;
+  }
+  .group-item {
+    display: inline-block;
+    width: 320px;
+    height: 220px;
+    background: rgba(255, 255, 255, 0.4);
+    border-radius: 8px;
+    overflow: hidden;
+    margin-right: 16px;
+  }
+  .logo-wrapper {
+    width: 320px;
+    height: 180px;
+    background-color: #fff;
+  }
+  .shop-logo {
+    width: 100%;
+    height: 100%;
+    border-radius: 8px;
+    object-fit: cover;
+  }
+  .name {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 13px 12px;
+  }
+  .shop-name {
+    font-weight: 700;
+    font-size: 12px;
+    line-height: 14px;
+    font-family: 'font_bold';
+    color: rgba(0, 0, 0, 0.6);
+  }
+  .name-right {
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    font-size: 12px;
+    line-height: 14px;
+    font-family: 'font_bold';
+    color: rgba(0, 0, 0, 0.4);
+  }
+  .format-icon {
+    width: 14px;
+    height: 14px;
+    margin-right: 8px;
+  }
+}
+</style>
diff --git a/src/components/BrandScroll/BrandScroll.vue b/src/components/BrandScroll/BrandScroll.vue
new file mode 100644
index 0000000..95eeeff
--- /dev/null
+++ b/src/components/BrandScroll/BrandScroll.vue
@@ -0,0 +1,52 @@
+<template>
+  <ScrollView class="brand-scroll" :list="list">
+    <div class="brand-content">
+      <div class="groups" v-for="item of list" v-show="item.shopList.length" :key="item.name">
+        <h1 class="info">{{ item.name }}</h1>
+        <TransitionGroup name="zoom" mode="out-in" tag="div" class="group">
+          <ShopItem :config="config" :shop="shop" @click="handleShop(shop)" v-for="shop of item.shopList" :key="shop.shopId" />
+        </TransitionGroup>
+      </div>
+    </div>
+  </ScrollView>
+</template>
+
+<script setup>
+import ShopItem from '@/base/ShopItem/ShopItem.vue'
+import ScrollView from '@/base/ScrollView/ScrollView.vue'
+
+defineProps({
+  list: Array,
+  config: Object
+})
+
+const emits = defineEmits(['click'])
+function handleShop(item) {
+  emits('click', item)
+}
+</script>
+
+<style lang="scss" scoped>
+.brand-scroll {
+  overflow: hidden;
+  height: 1255px;
+  margin-left: 170px;
+}
+.brand-content {
+  padding-top: 20px;
+  padding-bottom: 180px;
+}
+.info {
+  font-weight: 700;
+  font-size: 24px;
+  font-family: 'font_bold';
+  color: rgba(0, 0, 0, 0.8);
+  padding-bottom: 20px;
+}
+.group {
+  display: grid;
+  grid-template-columns: repeat(3, 212px);
+  gap: 24px 8px;
+  margin-bottom: 24px;
+}
+</style>
diff --git a/src/components/Busniness/Busniness.vue b/src/components/Busniness/Busniness.vue
index ea888c1..e5019f4 100644
--- a/src/components/Busniness/Busniness.vue
+++ b/src/components/Busniness/Busniness.vue
@@ -1,5 +1,5 @@
 <template>
-  <ScrollView scroll-x class="business-scroll">
+  <ScrollView class="business-scroll">
     <div class="business-content">
       <div class="three-wrapper" :class="{ active: cardIdx === index }" v-for="(item, index) of 10" :key="item">
         <div class="front">
@@ -42,18 +42,19 @@ function handleCard(item, index) {
 <style lang="scss" scoped>
 .business-scroll {
   position: relative;
-  // overflow: hidden;
-  margin-left: 72px;
-  margin-top: 48px;
-  height: 600px;
+  margin-left: 170px;
+  overflow: hidden;
+  margin-top: 58px;
+  height: 1560px;
   .business-content {
-    display: inline-block;
-    white-space: nowrap;
+    display: grid;
+    grid-template-columns: repeat(2, 420px);
+    gap: 56px 30px;
   }
 
   .three-wrapper {
     display: inline-block;
-    width: 528px;
+    width: 420px;
     height: 528px;
     position: relative;
     transform-style: preserve-3d;
@@ -68,7 +69,7 @@ function handleCard(item, index) {
   }
   .front,
   .back {
-    width: 528px;
+    width: 420px;
     height: 528px;
     backface-visibility: hidden;
     background: url('../../assets/images/member/line.png') no-repeat center 445px rgba(255, 255, 255, 0.8);
@@ -131,6 +132,7 @@ function handleCard(item, index) {
       font-size: 24px;
       color: rgba(0, 0, 0, 0.8);
       margin-bottom: 40px;
+      font-family: 'font_bold';
       margin-left: 56px;
     }
     .intro-scroll {
diff --git a/src/components/Industry/Industry.vue b/src/components/Industry/Industry.vue
index 8181157..91c8d34 100644
--- a/src/components/Industry/Industry.vue
+++ b/src/components/Industry/Industry.vue
@@ -93,17 +93,18 @@ function handleChildFormat(child, childIdx) {
   overflow: hidden;
   height: 810px;
   border-radius: 8px;
-  width: 312px;
-  background: rgba(255, 255, 255, 0.6);
+  width: 200px;
+  margin-top: 18px;
   .format-scroll {
-    padding-bottom: 220px;
+    overflow: hidden;
+    border-radius: 8px;
   }
   .format-item {
-    width: 312px;
+    width: 200px;
     background-color: #fff;
     .parent {
       height: 56px;
-      padding: 0 24px 0 45px;
+      padding: 0 12px 0 24px;
       justify-content: space-between;
       align-items: center;
       &.active {
diff --git a/src/components/LoginByPhone/LoginByPhone.vue b/src/components/LoginByPhone/LoginByPhone.vue
index 956d320..c474260 100644
--- a/src/components/LoginByPhone/LoginByPhone.vue
+++ b/src/components/LoginByPhone/LoginByPhone.vue
@@ -155,7 +155,7 @@ function handleClose() {
   width: 484px;
   height: 732px;
   margin: 0 auto;
-  margin-top: 158px;
+  margin-top: 594px;
   background: #ffffff;
   box-shadow: 0px 40px 60px rgba(0, 0, 0, 0.08);
   border-radius: 12px;
diff --git a/src/components/MallIntroduce/MallIntroduce.vue b/src/components/MallIntroduce/MallIntroduce.vue
index cc0d3aa..29a84ab 100644
--- a/src/components/MallIntroduce/MallIntroduce.vue
+++ b/src/components/MallIntroduce/MallIntroduce.vue
@@ -9,14 +9,12 @@
         </template>
       </EffectFade>
     </div>
-    <div class="mall-right">
-      <h1 class="title">{{ $t('mallIntroduce') }}</h1>
-      <ScrollView :list="introduce.content" scrollbar class="mall-intro-scroll">
-        <p class="mall-intro">
-          {{ switchLanguage(introduce, 'content') }}
-        </p>
-      </ScrollView>
-    </div>
+    <h1 class="title">{{ $t('mallIntroduce') }}</h1>
+    <ScrollView :list="introduce.content" scrollbar class="mall-intro-scroll">
+      <p class="mall-intro">
+        {{ switchLanguage(introduce, 'content') }}
+      </p>
+    </ScrollView>
   </div>
 </template>
 
@@ -40,22 +38,20 @@ getMallInfoList().then(({ data }) => {
 
 <style lang="scss" scoped>
 .mall-wrapper {
-  width: 1776px;
-  height: 510px;
-  display: inline-flex;
-  margin-left: 72px;
-  margin-top: 50px;
+  width: 870px;
+  margin-left: 170px;
+  margin-right: 40px;
+  margin-top: 58px;
   background: rgba(255, 255, 255, 0.4);
   box-shadow: inset 1px 0px 0px #ffffff;
   border-radius: 12px;
-  padding-left: 48px;
+  padding-bottom: 52px;
   .carousel {
     width: 870px;
     height: 490px;
     background: #ffffff;
     margin-right: 56px;
     border-radius: 8px;
-    margin-top: -28px;
     overflow: hidden;
     .banner-wrapper {
       width: 870px;
@@ -67,12 +63,11 @@ getMallInfoList().then(({ data }) => {
       object-fit: cover;
     }
   }
-  .mall-right {
-    flex: 1;
-  }
+
   .title {
     padding-top: 48px;
     padding-bottom: 32px;
+    margin-left: 56px;
     font-weight: 700;
     font-size: 24px;
     color: rgba(0, 0, 0, 0.8);
@@ -81,7 +76,8 @@ getMallInfoList().then(({ data }) => {
   .mall-intro-scroll {
     position: relative;
     overflow: hidden;
-    height: 350px;
+    height: 758px;
+    margin-left: 56px;
     margin-right: 34px;
     padding-right: 16px;
     .mall-intro {
diff --git a/src/components/MovieDetail/MovieDetail.vue b/src/components/MovieDetail/MovieDetail.vue
index 57a1aa4..6a3d309 100644
--- a/src/components/MovieDetail/MovieDetail.vue
+++ b/src/components/MovieDetail/MovieDetail.vue
@@ -70,7 +70,7 @@
                   <div class="type">IMAX</div>
                   <div class="ting">激光 3 厅</div>
                 </td>
-                <td class="w-150 line">
+                <td class="w-190 line">
                   <div class="ticket">06<i>张</i></div>
                   <div class="rest">余票</div>
                 </td>
@@ -138,7 +138,7 @@ function close() {
   position: relative;
   display: flex;
   margin: 0 auto;
-  margin-top: 150px;
+  margin-top: 360px;
   width: max-content;
   z-index: 10;
 
@@ -160,7 +160,7 @@ function close() {
     background: #ffffff;
     border-radius: 12px;
     padding: 4px;
-    margin-right: 40px;
+    margin-right: 24px;
     .poster-wrapper {
       width: 252px;
       height: 380px;
@@ -233,17 +233,16 @@ function close() {
   .date-scroll {
     position: relative;
     overflow: hidden;
-    width: 950px;
-    height: 80px;
+    width: 680px;
+    height: 128px;
     background: rgba(0, 0, 0, 0.2);
     border-radius: 12px;
-    padding: 6px 0;
+    padding: 6px;
     margin-bottom: 24px;
 
     .date-content {
       display: inline-block;
       white-space: nowrap;
-      padding: 0 6px;
       &::before {
         position: absolute;
         content: '';
@@ -253,7 +252,7 @@ function close() {
         border-radius: 8px;
         border: 1px solid rgba(255, 189, 53, 1);
         width: 134px;
-        height: 68px;
+        height: 116px;
         z-index: 0;
         transition: all 0.5s;
         transform: translate3d(v-bind(distance), 0, 0);
@@ -266,7 +265,7 @@ function close() {
       }
       .flex {
         width: 134px;
-        height: 68px;
+        height: 116px;
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -297,7 +296,7 @@ function close() {
     overflow: hidden;
     border-radius: 8px;
     table {
-      width: 950px;
+      width: 680px;
       tr {
         display: block;
         background-color: #fff;
@@ -387,8 +386,8 @@ function close() {
   }
   .btn {
     position: absolute;
-    right: -112px;
-    top: 0;
+    right: 0;
+    top: -104px;
   }
 }
 </style>
diff --git a/src/components/PlateInput/PlateInput.vue b/src/components/PlateInput/PlateInput.vue
index 85f323a..7c8f34a 100644
--- a/src/components/PlateInput/PlateInput.vue
+++ b/src/components/PlateInput/PlateInput.vue
@@ -18,7 +18,7 @@
       <span class="text" v-if="!_isEnergy">新能源</span>
       <span class="text" v-else>{{ _isEnergy ? (license.length === ENERGY_PLATE && license[license.length - 1]) || '' : '' }}</span>
     </div>
-    <div key="btn" class="btn" :class="{ active: searchMethods === '车位' }">
+    <div key="btn" class="btn">
       <img src="../../assets/images/parking/search-parking.png" class="icon" alt="" />
     </div>
   </TransitionGroup>
@@ -64,13 +64,12 @@ function handleEnergy() {
 <style lang="scss" scoped>
 .plateinput-wrapper {
   display: flex;
-  margin-left: 72px;
   position: relative;
-  margin-bottom: 40px;
-  padding-right: 160px;
+  margin-bottom: 32px;
+  margin-left: 170px;
   &.active {
     &::before {
-      left: 102px;
+      left: 141px;
     }
   }
   &::before {
@@ -80,7 +79,7 @@ function handleEnergy() {
     height: 63px;
     background: rgba(0, 0, 0, 0.1);
     border-radius: 2px;
-    left: 204px;
+    left: 176px;
     top: 50%;
     transform: translateY(-50%);
     transition: left 0.5s;
@@ -89,18 +88,23 @@ function handleEnergy() {
 .input {
   position: relative;
   border-radius: 8px;
-  width: 90px;
-  height: 90px;
-  margin-right: 12px;
+  width: 80px;
+  height: 100px;
+  margin-right: 8px;
   font-weight: 700;
   font-size: 32px;
-  line-height: 90px;
+  line-height: 100px;
   text-align: center;
   color: rgba(0, 0, 0, 0.8);
   font-family: 'font_bold';
+  background: #ffffff;
+  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.03);
+  border-radius: 8px;
   &.space {
+    margin-right: 8px !important;
+    width: 132px;
     &:first-child {
-      margin-right: 24px;
+      margin-right: 22px !important;
     }
   }
   .text {
@@ -109,8 +113,8 @@ function handleEnergy() {
   }
 
   &::after {
-    width: 90px;
-    height: 90px;
+    width: 80px;
+    height: 100px;
     left: 0;
     top: 0;
     content: '';
@@ -139,7 +143,7 @@ function handleEnergy() {
     }
   }
   &:nth-child(2) {
-    margin-right: 24px;
+    margin-right: 18px;
   }
 }
 
@@ -168,8 +172,8 @@ function handleEnergy() {
     background: transparent;
   }
   .text {
-    width: 90px;
-    height: 90px;
+    width: 80px;
+    height: 100px;
     display: inline-block;
     font-weight: 700;
     font-size: 18px;
@@ -184,21 +188,17 @@ function handleEnergy() {
 
 .btn {
   position: absolute;
-  right: 8px;
+  right: 40px;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-left: 12px;
-  width: 160px;
-  height: 90px;
+  width: 156px;
+  height: 100px;
   background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%);
   box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.03), inset 0px -4px 0px rgba(243, 176, 36, 0.5);
   border-radius: 8px;
   transition: all 0.5s;
-  &.active {
-    transform: translateX(-306px);
-    transition-delay: 0.05s;
-  }
 
   .icon {
     width: 32px;
@@ -207,7 +207,7 @@ function handleEnergy() {
 
 .width-enter-active,
 .width-leave-active {
-  width: 90px;
+  width: 80px;
   transition: all 0.5s;
   transition-timing-function: cubic-bezier(0.75, 0, 0.24, 1);
 }
diff --git a/src/components/PlateKeyboard/PlateKeyboard.vue b/src/components/PlateKeyboard/PlateKeyboard.vue
index 2495515..951e32a 100644
--- a/src/components/PlateKeyboard/PlateKeyboard.vue
+++ b/src/components/PlateKeyboard/PlateKeyboard.vue
@@ -45,27 +45,28 @@ function handleKeyboard(item, index) {
 
 <style lang="scss" scoped>
 .keyboard-wrapper {
-  width: 1008px;
   display: flex;
   flex-wrap: wrap;
-  margin-left: 72px;
+  margin-left: 170px;
+  margin-right: 32px;
+  margin-bottom: 56px;
   .keyboard-item {
-    width: 48px;
+    width: 41.76px;
     height: 48px;
     background: rgba(255, 255, 255, 0.6);
     box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.03), inset 0px -1px 0px rgba(177, 189, 220, 0.1);
     border-radius: 6px;
     text-align: center;
-    margin-right: 8px;
+    margin-right: 7px;
     margin-bottom: 8px;
     font-size: 18px;
     font-family: 'font_medium';
     line-height: 48px;
     color: rgba(0, 0, 0, 0.8);
     &.space {
-      width: 104px;
+      width: 90.48px;
       &.del {
-        width: 216px;
+        width: 187.92px;
       }
     }
     &.uppercase {
@@ -75,9 +76,10 @@ function handleKeyboard(item, index) {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: 104px;
+      width: 90px;
       line-height: initial;
       background: rgba(0, 0, 0, 0.05);
+      box-shadow: inset 0px -1px 0px rgba(0, 0, 0, 0.1);
     }
     &.active {
       background: #f1b33e;
diff --git a/src/components/Search/Search.vue b/src/components/Search/Search.vue
index ff2310f..03493b1 100644
--- a/src/components/Search/Search.vue
+++ b/src/components/Search/Search.vue
@@ -3,47 +3,19 @@
     <View title="全局搜索" sub-title="Global search" :show-input="false">
       <div class="search-content">
         <div class="search-left">
-          <div class="left-box" v-show="!keywords.length && !showVoice">
-            <h1 class="title">万象热搜</h1>
-            <h1 class="title-en">MIXC hot search</h1>
-            <ScrollView class="hot-scroll" :list="hotRecommend" scrollbar>
-              <div class="hot-box">
-                <div class="recommend-item" v-for="item of hotRecommend" :key="item.shopId" @click="handleShop(item)">{{ item.shopName }}</div>
-              </div>
-            </ScrollView>
-
-            <h1 class="title">常见问题</h1>
-            <h1 class="title-en">common problem</h1>
-
-            <div class="question-box">
-              <QuestionList />
-              <div class="more-question" @click="showClassify = true">{{ $t('more') }}</div>
-              <Teleport to="body">
-                <Transition enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__fadeOutUp">
-                  <QuestionClassify @close="showClassify = false" v-if="showClassify" />
-                </Transition>
-              </Teleport>
-            </div>
-          </div>
-          <SearchResultList
-            @handle-shop="handleShop"
-            @handle-activity="handleActivity"
-            :list="searchShopListRef"
-            :config="config"
-            v-show="keywords.length && !showVoice"
-          />
-        </div>
-        <div class="search-right">
           <div class="input-wrapper">
             <img src="../../assets/images/index/index_search.png" class="search-icon" alt="" />
             <input @click="setSearch" v-model="keywords" placeholder="输入首字母搜索店铺" type="text" readonly class="input" />
             <img @click="setVoice" src="../../assets/images/search/search-voice.png" class="voice-icon" alt="" />
           </div>
-          <div class="right-box" v-show="!showVoice">
-            <h1 class="title align-right">快捷入口</h1>
-            <h1 class="title-en align-right">Quick entrance</h1>
-            <div class="facility-list">
-              <FacilityItem class="margin" :facility="item" v-for="item of facilityList" :key="item.title" />
+
+          <div class="flex">
+            <div class="right-box" v-show="!showVoice">
+              <h1 class="title">快捷入口</h1>
+              <h1 class="title-en">Quick entrance</h1>
+              <div class="facility-list">
+                <FacilityItem class="margin" :facility="item" v-for="item of facilityList" :key="item.title" />
+              </div>
             </div>
             <div class="keyboard-wrapper">
               <Tabs @click="handleTab" :list="list" class="width" />
@@ -51,10 +23,48 @@
               <keyboardByWritten @del="del" @handle-word="handleLetter" v-else />
             </div>
           </div>
-          <Voice @handle-question="showClassify = true" v-if="showVoice" />
+
+          <!-- <div class="left-box" v-show="!keywords.length && !showVoice">
+            
+ 
+           
+          </div>
+          <SearchResultList
+            @handle-shop="handleShop"
+            @handle-activity="handleActivity"
+            :list="searchShopListRef"
+            :config="config"
+            v-show="keywords.length && !showVoice"
+          /> -->
+        </div>
+        <h1 class="title">万象热搜</h1>
+        <h1 class="title-en">MIXC hot search</h1>
+        <ScrollView class="hot-scroll" :list="hotRecommend" scrollbar>
+          <div class="hot-box">
+            <div class="recommend-item" v-for="item of hotRecommend" :key="item.shopId" @click="handleShop(item)">{{ item.shopName }}</div>
+          </div>
+        </ScrollView>
+        <h1 class="title">常见问题</h1>
+        <h1 class="title-en">common problem</h1>
+
+        <div class="question-box">
+          <QuestionList />
+          <div class="more-question" @click="showClassify = true">{{ $t('more') }}</div>
+          <Teleport to="body">
+            <Transition enter-active-class="animate__animated animate__fadeInDown" leave-active-class="animate__animated animate__fadeOutUp">
+              <QuestionClassify @close="showClassify = false" v-if="showClassify" />
+            </Transition>
+          </Teleport>
         </div>
+        <!-- <div class="search-right">
+          
+          
+          <Voice @handle-question="showClassify = true" v-if="showVoice" />
+        </div> -->
+      </div>
+      <div class="search-btn" @click="close">
+        <img src="../../assets/images/search/back.png" alt="" />
       </div>
-      <Button class="search-btn" @click="close" />
     </View>
   </Dialog>
 </template>
@@ -68,7 +78,6 @@ import { list } from './tabs'
 import { useSearchShop } from '@/composables/useSearchShop'
 import View from '@/layouts/View.vue'
 import Dialog from '@/layouts/Dialog.vue'
-import Button from '@/base/Button/Button.vue'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
 import QuestionList from '@/components/QuestionList/QuestionList.vue'
 import FacilityItem from '@/base/FacilityItem/FacilityItem.vue'
@@ -131,6 +140,13 @@ onBeforeUnmount(() => {
 </script>
 
 <style lang="scss" scoped>
+:deep(.header-left) {
+  padding-left: 80px;
+}
+:deep(.view-container) {
+  position: relative;
+  z-index: 50;
+}
 ::-webkit-input-placeholder {
   position: relative;
   top: -8px;
@@ -144,6 +160,7 @@ onBeforeUnmount(() => {
   bottom: 0;
   left: 0;
   display: flex;
+  flex-direction: column;
   align-items: stretch;
   z-index: -1;
   .title {
@@ -151,6 +168,7 @@ onBeforeUnmount(() => {
     font-size: 24px;
     color: rgba(0, 0, 0, 0.6);
     font-family: 'font_bold';
+    padding-left: 64px;
     padding-bottom: 4px;
   }
   .title-en {
@@ -158,72 +176,124 @@ onBeforeUnmount(() => {
     line-height: 16px;
     text-transform: uppercase;
     color: rgba(0, 0, 0, 0.4);
+    padding-left: 64px;
     margin-bottom: 32px;
   }
-  .align-right {
-    text-align: right;
-  }
 }
-.search-left {
-  padding-top: 180px;
-  flex: 1;
-  padding-left: 72px;
+.input-wrapper {
+  display: flex;
+  align-items: center;
+  padding-right: 5px;
+  padding-left: 32px;
+  width: 552px;
+  height: 88px;
+  background: #ffffff;
+  box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 4px 30px rgba(0, 0, 0, 0.02);
+  border-radius: 51px;
+  margin-bottom: 56px;
+  margin-top: 174px;
+  margin-left: 432px;
 
-  .hot-scroll {
-    position: relative;
-    margin-bottom: 64px;
-    margin-right: 20px;
-    overflow: hidden;
-    height: 142px;
-    :deep(.bscroll-vertical-scrollbar) {
+  .search-icon {
+    width: 40px;
+    margin-right: 24px;
+  }
+  .input {
+    border: none;
+    outline: none;
+    width: 255px;
+    height: 78px;
+    background: transparent;
+    font-weight: 700;
+    font-size: 48px;
+    color: rgba(0, 0, 0, 0.8);
+  }
+  .voice-icon {
+    width: 190px;
+  }
+}
+.flex {
+  display: flex;
+  justify-content: space-between;
+  padding-right: 56px;
+}
+.facility-list {
+  width: 432px;
+  display: flex;
+  flex-wrap: wrap;
+  padding-left: 64px;
+  .margin {
+    margin-right: 40px;
+    margin-bottom: 38px;
+  }
+}
+.width {
+  width: 552px;
+}
+.hot-scroll {
+  position: relative;
+  margin-bottom: 64px;
+  margin-right: 20px;
+  overflow: hidden;
+  margin-left: 64px;
+  height: 142px;
+  :deep(.bscroll-vertical-scrollbar) {
+    width: 6px !important;
+    background: rgba(0, 0, 0, 0.02) !important;
+    border-radius: 6px !important;
+    opacity: 1 !important;
+    .bscroll-indicator {
       width: 6px !important;
-      background: rgba(0, 0, 0, 0.02) !important;
+      background: rgba(0, 0, 0, 0.1) !important;
       border-radius: 6px !important;
-      opacity: 1 !important;
-      .bscroll-indicator {
-        width: 6px !important;
-        background: rgba(0, 0, 0, 0.1) !important;
-        border-radius: 6px !important;
-        border: none !important;
-      }
+      border: none !important;
     }
   }
-  .recommend-item {
-    display: inline-block;
-    height: 59px;
-    padding: 0 32px;
-    font-weight: 700;
-    font-family: 'font_bold';
-    font-size: 16px;
-    line-height: 59px;
-    text-align: center;
-    color: var(--color-black-opacity-6);
-    background: var(--color-white-opacity);
-    border-radius: 50px;
+}
+.recommend-item {
+  display: inline-block;
+  height: 59px;
+  padding: 0 32px;
+  font-weight: 700;
+  font-family: 'font_bold';
+  font-size: 16px;
+  line-height: 59px;
+  text-align: center;
+  color: var(--color-black-opacity-6);
+  background: var(--color-white-opacity);
+  border-radius: 50px;
+  margin-right: 16px;
+  margin-bottom: 24px;
+}
+.question-box {
+  display: flex;
+  margin-left: 64px;
+
+  :deep(.question_item) {
     margin-right: 16px;
-    margin-bottom: 24px;
   }
-  .question-box {
+  .more-question {
     display: flex;
-    :deep(.question_item) {
-      margin-right: 16px;
-    }
-    .more-question {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      background: rgba(255, 255, 255, 0.4);
-      width: 160px;
-      height: 225px;
-      border-radius: 12px;
-      font-weight: 700;
-      font-size: 20px;
-      font-family: 'font_bold';
-      color: rgba(0, 0, 0, 0.6);
-      padding: 0 60px;
-    }
+    justify-content: center;
+    align-items: center;
+    background: rgba(255, 255, 255, 0.4);
+    width: 160px;
+    height: 225px;
+    border-radius: 12px;
+    font-weight: 700;
+    font-size: 20px;
+    font-family: 'font_bold';
+    color: rgba(0, 0, 0, 0.6);
+    padding: 0 60px;
   }
 }
+.search-left {
+  width: 1048px;
+  height: 722px;
+  background: rgba(255, 255, 255, 0.6);
+  border-radius: 12px;
+  margin: 16px 16px 64px 16px;
+}
 .search-right {
   position: relative;
   background: rgba(255, 255, 255, 0.6);
@@ -238,57 +308,26 @@ onBeforeUnmount(() => {
     bottom: 56px;
     top: 684px;
   }
-  .width {
-    width: 552px;
-  }
+
   .title,
   .title-en {
     margin-right: 76px;
   }
-  .input-wrapper {
-    display: flex;
-    align-items: center;
-    padding-right: 5px;
-    padding-left: 32px;
-    width: 568px;
-    height: 88px;
-    background: #ffffff;
-    box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 4px 30px rgba(0, 0, 0, 0.02);
-    border-radius: 51px;
-    margin-bottom: 56px;
-    .search-icon {
-      width: 40px;
-      margin-right: 24px;
-    }
-    .input {
-      border: none;
-      outline: none;
-      width: 277px;
-      height: 78px;
-      background: transparent;
-      font-weight: 700;
-      font-size: 48px;
-      color: rgba(0, 0, 0, 0.8);
-    }
-    .voice-icon {
-      width: 190px;
-    }
-  }
-  .facility-list {
-    display: flex;
-    flex-direction: row-reverse;
-    margin-right: 76px;
-    flex-wrap: wrap;
-    .margin {
-      margin-left: 40px;
-      margin-bottom: 20px;
-    }
-  }
 }
 .search-btn {
-  position: absolute;
-  left: 72px;
-  bottom: 56px;
-  width: 132px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: fixed;
+  left: 80px;
+  top: 190px;
+  width: 88px;
+  height: 88px;
+  z-index: 52;
+  background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
+  border-radius: 12px;
+  img {
+    width: 56px;
+  }
 }
 </style>
diff --git a/src/components/ServiceList/ServiceList.vue b/src/components/ServiceList/ServiceList.vue
index 7003f73..67ce10f 100644
--- a/src/components/ServiceList/ServiceList.vue
+++ b/src/components/ServiceList/ServiceList.vue
@@ -1,6 +1,6 @@
 <template>
   <ScrollView class="serve-scroll" :list="serveList">
-    <div class="serve-content">
+    <TransitionGroup name="zoom" tag="div" class="serve-content">
       <div class="serve-item" v-for="item of serveList" :key="item.name">
         <div class="white-bg">
           <div class="icon-box">
@@ -10,7 +10,7 @@
         <p class="name">{{ item.name }}</p>
         <p class="en">{{ item.nameEn }}</p>
       </div>
-    </div>
+    </TransitionGroup>
   </ScrollView>
 </template>
 
@@ -34,12 +34,15 @@ getServeList().then(({ data }) => {
 .serve-scroll {
   position: relative;
   overflow: hidden;
-  margin-left: 72px;
+  margin-left: 170px;
+  margin-right: 24px;
+  margin-top: 58px;
+  height: 1560px;
   .serve-content {
     display: flex;
     flex-wrap: wrap;
     .serve-item {
-      width: 240px;
+      width: 279px;
       height: 225px;
       // TODO 需动态切换背景色
       background: #fcf8ec;
diff --git a/src/components/Traffic/Traffic.vue b/src/components/Traffic/Traffic.vue
index 722a465..ca73c98 100644
--- a/src/components/Traffic/Traffic.vue
+++ b/src/components/Traffic/Traffic.vue
@@ -29,18 +29,21 @@ getTrafficList().then(({ data }) => {
 <style lang="scss" scoped>
 .carousel {
   position: relative;
-  width: 1130px;
-  height: 616px;
-  margin: 0 auto;
+  width: 870px;
+  height: 1300px;
+  margin-top: 58px;
+  margin-left: 170px;
+  margin-right: 40px;
 }
 .banner-wrapper {
-  width: 1130px;
-  height: 616px;
+  width: 870px;
+  height: 1300px;
   overflow: hidden;
 }
 .banner {
   width: 100%;
   height: 100%;
+  border-radius: 10px;
   object-fit: cover;
 }
 </style>
diff --git a/src/layouts/View.vue b/src/layouts/View.vue
index 3935089..6de9607 100644
--- a/src/layouts/View.vue
+++ b/src/layouts/View.vue
@@ -99,7 +99,7 @@ function handleVoice() {
   position: relative;
   display: flex;
   align-items: center;
-  width: 420px;
+  width: 365px;
   height: 88px;
   background: var(--color-black-opacity-05);
   box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.3), inset 0px 4px 30px rgba(0, 0, 0, 0.02);
diff --git a/src/views/Activities/Activities.vue b/src/views/Activities/Activities.vue
index d269572..12e7294 100644
--- a/src/views/Activities/Activities.vue
+++ b/src/views/Activities/Activities.vue
@@ -34,9 +34,10 @@ function _getActivityList(type) {
 
 <style lang="scss" scoped>
 .width {
+  position: absolute;
+  top: 214px;
+  left: 170px;
   width: 440px;
-  margin-left: 72px;
-  margin-top: 30px;
-  margin-bottom: 54px;
+  height: 88px;
 }
 </style>
diff --git a/src/views/Brand/Brand.vue b/src/views/Brand/Brand.vue
index dadb179..12bf165 100644
--- a/src/views/Brand/Brand.vue
+++ b/src/views/Brand/Brand.vue
@@ -1,65 +1,38 @@
 <template>
   <View title="品牌列表" sub-title="Brand list">
     <div class="container flex">
+      <BrandRecommend @click="handleShop" :config="config" :list="recommendList" />
       <div class="brand-left">
         <div class="top-title">
           <p class="title">{{ selectedTitle }}</p>
-          <div class="currentfloor mr-16">
+          <div class="currentfloor">
             <img src="../../assets/images/guide/guide_zhong.png" class="zhong" alt="" />
             <span class="floor"><i>当前楼层</i>{{ currentFloor.floor }}</span>
           </div>
         </div>
-        <ScrollView class="brand-scroll" :list="selectedList">
-          <div class="brand-content">
-            <div class="groups" v-for="item of selectedList" v-show="item.shopList.length" :key="item.name">
-              <h1 class="info">{{ item.name }}</h1>
-              <TransitionGroup name="zoom" mode="out-in" tag="div" class="group">
-                <div class="group-item" @click="handleShop(shop)" v-for="shop of item.shopList" :key="shop.shopId">
-                  <div class="logo-wrapper">
-                    <img loading="lazy" :src="config.sourceUrl + shop.logoUrl" alt="" class="shop-logo" />
-                  </div>
-                  <p class="name">
-                    <span class="shop-name">{{ switchLanguage(shop, 'shopName') }}</span>
-                    <span class="name-right"><img :src="config.sourceUrl + shop.industryUrl" class="format-icon" alt="" />{{ shop.floor }}</span>
-                  </p>
+        <div class="line"></div>
+
+        <div class="bottom-content">
+          <BrandScroll @click="handleShop" :list="selectedList" :config="config" />
+
+          <div class="brand-middle">
+            <Tabs class="width" :list="list" @click="handleTab" />
+            <Transition name="zoom" mode="out-in">
+              <Industry @click="handleFormat" v-if="tabIdx === 0" :config="config" :list="formatList" />
+              <div v-else class="floor-list">
+                <div
+                  class="floor-item"
+                  @click="handleFloor(item, index)"
+                  :class="[index === 0 ? 'width' : '', index === floorIdx ? 'active' : '']"
+                  v-for="(item, index) of mergeFloorsList"
+                  :key="item.floor"
+                >
+                  {{ item.floor }}
                 </div>
-              </TransitionGroup>
-            </div>
-          </div>
-        </ScrollView>
-      </div>
-      <div class="brand-middle">
-        <Tabs class="mb-24 width" :list="list" @click="handleTab" />
-        <Transition name="zoom" mode="out-in">
-          <Industry @click="handleFormat" v-if="tabIdx === 0" :config="config" :list="formatList" />
-          <div v-else class="floor-list">
-            <div
-              class="floor-item"
-              @click="handleFloor(item, index)"
-              :class="[index === 0 ? 'width' : '', index === floorIdx ? 'active' : '']"
-              v-for="(item, index) of mergeFloorsList"
-              :key="item.floor"
-            >
-              {{ item.floor }}
-            </div>
-          </div>
-        </Transition>
-      </div>
-      <div class="brand-right">
-        <p class="title">热门推荐</p>
-        <ScrollView :list="recommendList" class="content">
-          <div class="recommend-content">
-            <div class="group-item" @click="handleShop(item)" v-for="item of recommendList" :key="item.shopId">
-              <div class="logo-wrapper">
-                <img loading="lazy" :src="config.sourceUrl + item.materialList?.[0]" alt="" class="shop-logo" />
               </div>
-              <p class="name">
-                <span class="shop-name">{{ switchLanguage(item, 'shopName') }}</span>
-                <span class="name-right"><img :src="config.sourceUrl + item.industryUrl" class="format-icon" alt="" />{{ item.floor }}</span>
-              </p>
-            </div>
+            </Transition>
           </div>
-        </ScrollView>
+        </div>
       </div>
     </div>
   </View>
@@ -72,9 +45,10 @@ import { useStore } from '@/store/root'
 import { getBrandList, getBrandListByFormat, getBrandListByFloor } from '@/http/brand/api'
 import { list } from './Tabs'
 import View from '@/layouts/View.vue'
-import ScrollView from '@/base/ScrollView/ScrollView.vue'
 import Industry from '@/components/Industry/Industry.vue'
 import Tabs from '@/components/Tabs/Tabs.vue'
+import BrandRecommend from '@/components/BrandRecommend/BrandRecommend.vue'
+import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
 
 const ALL_BRAND = '全部品牌'
 
@@ -160,19 +134,6 @@ function handleShop(item) {
 <style lang="scss" scoped>
 .flex {
   position: relative;
-  display: flex;
-  align-items: stretch;
-  height: 100%;
-  padding-top: 46px;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 1px;
-    border-bottom: 1px solid #fff;
-    top: 80px;
-  }
 }
 .title {
   font-weight: 700;
@@ -181,19 +142,27 @@ function handleShop(item) {
   color: rgba(0, 0, 0, 0.8);
   padding-bottom: 12px;
 }
-.mr-16 {
-  margin-right: 16px;
-}
-.width {
-  width: 312px !important;
+
+.bottom-content {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 40px;
 }
+
 .brand-left {
-  width: 1024px;
-  margin-left: 72px;
   .top-title {
+    margin-left: 170px;
+    margin-right: 258px;
+    margin-bottom: 14px;
     display: flex;
     align-items: baseline;
     justify-content: space-between;
+    .title {
+      padding-bottom: 0;
+    }
+  }
+  .line {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
   }
 
   .currentfloor {
@@ -217,53 +186,34 @@ function handleShop(item) {
       padding-right: 17px;
     }
   }
-  .brand-scroll {
-    overflow: hidden;
-    height: 883px;
-  }
-  .brand-content {
-    padding-top: 32px;
-    padding-bottom: 180px;
-  }
-  .info {
-    font-weight: 700;
-    font-size: 24px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.8);
-    padding-bottom: 20px;
-  }
-  .group {
-    display: flex;
-    flex-wrap: wrap;
-  }
 }
 .brand-middle {
-  flex: 1;
-  padding-left: 24px;
-  padding-top: 36px;
-  padding-right: 35px;
-  .mb-24 {
-    margin-bottom: 24px;
-    margin-top: 32px;
+  padding-top: 20px;
+  .width {
+    height: 180px;
+    flex-direction: column;
+    width: 200px;
+    :deep(.tab) {
+      height: 90px;
+    }
   }
+
   .floor-list {
-    display: flex;
-    flex-wrap: wrap;
-    width: 324px;
+    width: 200px;
+    border-radius: 8px;
+    overflow: hidden;
+    margin-top: 18px;
   }
   .floor-item {
-    width: 96px;
-    height: 96px;
+    width: 200px;
+    height: 72px;
     background: rgba(255, 255, 255, 0.6);
-    border-radius: 8px;
-    line-height: 96px;
+    line-height: 72px;
     text-align: center;
     font-family: 'font_bold';
     font-weight: 700;
     font-size: 20px;
     color: rgba(0, 0, 0, 0.6);
-    margin-right: 12px;
-    margin-bottom: 12px;
 
     &.active {
       background: linear-gradient(90deg, #ffbd35 0%, #ffd260 100%);
@@ -271,63 +221,4 @@ function handleShop(item) {
     }
   }
 }
-.brand-right {
-  .content {
-    height: 883px;
-    width: 440px;
-    background: rgba(0, 0, 0, 0.03);
-    border-left: 1px solid #fff;
-    overflow: hidden;
-  }
-  .recommend-content {
-    padding-top: 32px;
-    padding-left: 48px;
-    padding-bottom: 180px;
-  }
-  .group-item {
-    width: 320px;
-    height: 220px;
-    background: rgba(255, 255, 255, 0.4);
-    border-radius: 8px;
-    overflow: hidden;
-    margin-bottom: 32px;
-  }
-  .logo-wrapper {
-    width: 320px;
-    height: 180px;
-    background-color: #fff;
-  }
-  .shop-logo {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .name {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 13px 12px;
-  }
-  .shop-name {
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 14px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .name-right {
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    line-height: 14px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.4);
-  }
-  .format-icon {
-    width: 14px;
-    height: 14px;
-    margin-right: 8px;
-  }
-}
 </style>
diff --git a/src/views/Foods/Foods.vue b/src/views/Foods/Foods.vue
index 16f228b..ba1b8d3 100644
--- a/src/views/Foods/Foods.vue
+++ b/src/views/Foods/Foods.vue
@@ -1,6 +1,7 @@
 <template>
   <View title="品牌列表" sub-title="Brand list">
     <div class="container flex">
+      <BrandRecommend @click="handleShop" :config="config" :list="recommendList" />
       <div class="brand-left">
         <div class="top-title">
           <p class="title">{{ selectedTitle }}</p>
@@ -9,55 +10,26 @@
             <span class="floor"><i>当前楼层</i>{{ currentFloor.floor }}</span>
           </div>
         </div>
-        <ScrollView class="brand-scroll" :list="selectedList">
-          <div class="brand-content">
-            <div class="groups" v-for="item of selectedList" v-show="item.shopList.length" :key="item.name">
-              <h1 class="info">{{ item.name }}</h1>
-              <TransitionGroup appear name="zoom" mode="out-in" tag="div" class="group">
-                <div class="group-item" @click="handleShop(shop)" v-for="shop of item.shopList" :key="shop.shopId">
-                  <div class="logo-wrapper">
-                    <img loading="lazy" :src="config.sourceUrl + shop.logoUrl" alt="" class="shop-logo" />
-                  </div>
-                  <p class="name">
-                    <span class="shop-name">{{ switchLanguage(shop, 'shopName') }}</span>
-                    <span class="name-right"><img :src="config.sourceUrl + shop.industryUrl" class="format-icon" alt="" />{{ shop.floor }}</span>
-                  </p>
+        <div class="line"></div>
+
+        <div class="bottom-content">
+          <BrandScroll @click="handleShop" :list="selectedList" :config="config" />
+          <div class="brand-middle">
+            <Transition appear name="zoom" mode="out-in">
+              <div class="format-wrapper">
+                <div
+                  class="format-item"
+                  @click="handleFormat(item, index)"
+                  :class="{ active: formatIdx === index }"
+                  v-for="(item, index) of formatList"
+                  :key="item.industryId"
+                >
+                  {{ switchLanguage(item, 'industryName') }}
                 </div>
-              </TransitionGroup>
-            </div>
-          </div>
-        </ScrollView>
-      </div>
-      <div class="brand-middle">
-        <Transition appear name="zoom" mode="out-in">
-          <div class="format-wrapper">
-            <div
-              class="format-item"
-              @click="handleFormat(item, index)"
-              :class="{ active: formatIdx === index }"
-              v-for="(item, index) of formatList"
-              :key="item.industryId"
-            >
-              {{ switchLanguage(item, 'industryName') }}
-            </div>
-          </div>
-        </Transition>
-      </div>
-      <div class="brand-right">
-        <p class="title">热门推荐</p>
-        <ScrollView :list="recommendList" class="content">
-          <TransitionGroup appear tag="div" name="zoom" class="recommend-content">
-            <div class="group-item" @click="handleShop(item)" v-for="item of recommendList" :key="item.shopId">
-              <div class="logo-wrapper">
-                <img loading="lazy" :src="config.sourceUrl + item.materialList?.[0]" alt="" class="shop-logo" />
               </div>
-              <p class="name">
-                <span class="shop-name">{{ switchLanguage(item, 'shopName') }}</span>
-                <span class="name-right"><img :src="config.sourceUrl + item.industryUrl" class="format-icon" alt="" />{{ item.floor }}</span>
-              </p>
-            </div>
-          </TransitionGroup>
-        </ScrollView>
+            </Transition>
+          </div>
+        </div>
       </div>
     </div>
   </View>
@@ -69,7 +41,8 @@ import { storeToRefs } from 'pinia'
 import { useStore } from '@/store/root'
 import { getBrandList, getBrandListByFloor } from '@/http/brand/api'
 import View from '@/layouts/View.vue'
-import ScrollView from '@/base/ScrollView/ScrollView.vue'
+import BrandRecommend from '@/components/BrandRecommend/BrandRecommend.vue'
+import BrandScroll from '@/components/BrandScroll/BrandScroll.vue'
 
 const ALL_BRAND = '全部品牌'
 
@@ -129,19 +102,6 @@ function handleShop(item) {
 <style lang="scss" scoped>
 .flex {
   position: relative;
-  display: flex;
-  align-items: stretch;
-  height: 100%;
-  padding-top: 46px;
-  &::before {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    height: 1px;
-    border-bottom: 1px solid #fff;
-    top: 80px;
-  }
 }
 .title {
   font-weight: 700;
@@ -150,19 +110,26 @@ function handleShop(item) {
   color: rgba(0, 0, 0, 0.8);
   padding-bottom: 12px;
 }
-.mr-16 {
-  margin-right: 16px;
-}
-.width {
-  width: 312px !important;
+.bottom-content {
+  display: flex;
+  justify-content: space-between;
+  margin-right: 40px;
 }
+
 .brand-left {
-  width: 1024px;
-  margin-left: 72px;
   .top-title {
+    margin-left: 170px;
+    margin-right: 258px;
+    margin-bottom: 14px;
     display: flex;
     align-items: baseline;
     justify-content: space-between;
+    .title {
+      padding-bottom: 0;
+    }
+  }
+  .line {
+    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
   }
 
   .currentfloor {
@@ -186,90 +153,20 @@ function handleShop(item) {
       padding-right: 17px;
     }
   }
-  .brand-scroll {
-    overflow: hidden;
-    height: 883px;
-  }
-  .brand-content {
-    padding-top: 32px;
-    padding-bottom: 180px;
-  }
-  .info {
-    font-weight: 700;
-    font-size: 24px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.8);
-    padding-bottom: 20px;
-  }
-  .group {
-    display: flex;
-    flex-wrap: wrap;
-  }
-  .group-item {
-    width: 240px;
-    height: 220px;
-    background: rgba(255, 255, 255, 0.4);
-    border-radius: 8px;
-    overflow: hidden;
-    margin-right: 16px;
-    margin-bottom: 32px;
-  }
-  .logo-wrapper {
-    width: 240px;
-    height: 180px;
-    padding: 15px 45px;
-    background-color: #fff;
-  }
-  .shop-logo {
-    width: 100%;
-    height: 100%;
-    object-fit: contain;
-  }
-  .name {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-
-    padding: 13px 12px;
-  }
-  .shop-name {
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 14px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .name-right {
-    display: flex;
-    align-items: center;
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 14px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.4);
-  }
-  .format-icon {
-    width: 14px;
-    margin-right: 8px;
-    height: 14px;
-  }
 }
 .brand-middle {
-  flex: 1;
-  padding-left: 24px;
-  padding-top: 36px;
-  padding-right: 35px;
   .format-wrapper {
+    width: 200px;
     background: rgba(255, 255, 255, 0.6);
-    width: 312px;
-    margin-top: 32px;
+    margin-top: 20px;
+    border-radius: 12px;
+    overflow: hidden;
     .format-item {
-      height: 64px;
-      line-height: 64px;
+      height: 72px;
+      line-height: 72px;
       text-align: center;
       font-weight: 700;
       font-size: 14px;
-      line-height: 64px;
       text-align: center;
       font-family: 'font_bold';
       color: rgba(0, 0, 0, 0.6);
@@ -281,63 +178,4 @@ function handleShop(item) {
     }
   }
 }
-.brand-right {
-  .content {
-    height: 883px;
-    width: 440px;
-    background: rgba(0, 0, 0, 0.03);
-    border-left: 1px solid #fff;
-    overflow: hidden;
-  }
-  .recommend-content {
-    padding-top: 32px;
-    padding-left: 48px;
-    padding-bottom: 180px;
-  }
-  .group-item {
-    width: 320px;
-    height: 220px;
-    background: rgba(255, 255, 255, 0.4);
-    border-radius: 8px;
-    overflow: hidden;
-    margin-bottom: 32px;
-  }
-  .logo-wrapper {
-    width: 320px;
-    height: 180px;
-    background-color: #fff;
-  }
-  .shop-logo {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .name {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 13px 12px;
-  }
-  .shop-name {
-    font-weight: 700;
-    font-size: 12px;
-    line-height: 14px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.6);
-  }
-  .name-right {
-    font-weight: 700;
-    display: flex;
-    align-items: center;
-    font-size: 12px;
-    line-height: 14px;
-    font-family: 'font_bold';
-    color: rgba(0, 0, 0, 0.4);
-  }
-  .format-icon {
-    width: 14px;
-    height: 14px;
-    margin-right: 8px;
-  }
-}
 </style>
diff --git a/src/views/Member/Member.vue b/src/views/Member/Member.vue
index e5c3519..d30d6f8 100644
--- a/src/views/Member/Member.vue
+++ b/src/views/Member/Member.vue
@@ -1,14 +1,8 @@
 <template>
   <View title="会员专享" sub-title="member privileges">
     <Tabs class="width" @click="handleTab" :list="list" />
-    <div class="mt-54" v-if="tabIdx === 0">
-      <ActivitiesList :list="activityList">
-        <template v-slot="{ item }">
-          <h1 class="title">{{ switchLanguage(item, 'activityName') }}</h1>
-        </template>
-      </ActivitiesList>
-    </div>
 
+    <ActivitiesList :list="activityList" v-if="tabIdx === 0" />
     <Benefits :benefits="benefits" v-else-if="tabIdx === 1" />
     <Busniness v-else />
   </View>
@@ -60,19 +54,10 @@ function _getMemberBenefits() {
 
 <style lang="scss" scoped>
 .width {
-  width: 660px;
-  margin-left: 72px;
-  margin-top: 30px;
-}
-.mt-54 {
-  margin-top: 54px;
-}
-.title {
-  font-weight: 700;
-  font-size: 18px;
-  line-height: 21px;
-  font-family: 'font_bold';
-  text-align: center;
-  color: #ffffff;
+  position: absolute;
+  top: 214px;
+  left: 170px;
+  width: 491px;
+  height: 88px;
 }
 </style>
diff --git a/src/views/Member/tabs.js b/src/views/Member/tabs.js
index 5840eb6..9a36936 100644
--- a/src/views/Member/tabs.js
+++ b/src/views/Member/tabs.js
@@ -1,19 +1,19 @@
 export const list = [
   {
     name: '会员活动',
-    nameEn: 'member activities',
+    nameEn: 'activities',
     icon: require('@/assets/images/member/activity.png'),
     iconActive: require('@/assets/images/member/activity_active.png')
   },
   {
     name: '会员权益',
-    nameEn: 'member benefits',
+    nameEn: 'benefits',
     icon: require('@/assets/images/member/benefits.png'),
     iconActive: require('@/assets/images/member/benefits_active.png')
   },
   {
     name: '会员业务',
-    nameEn: 'member business',
+    nameEn: 'business',
     icon: require('@/assets/images/member/business.png'),
     iconActive: require('@/assets/images/member/business_active.png')
   }
diff --git a/src/views/Movie/Movie.vue b/src/views/Movie/Movie.vue
index b06ba28..d89d08b 100644
--- a/src/views/Movie/Movie.vue
+++ b/src/views/Movie/Movie.vue
@@ -11,29 +11,38 @@
             </template>
           </EffectFade>
         </div>
-        <h1 class="title">{{ switchLanguage(cinema, 'shopName') }}</h1>
-        <ScrollView class="intro-scroll" scrollbar :list="cinema.content">
-          <p class="intro">{{ switchLanguage(cinema, 'intro') }}</p>
-        </ScrollView>
-        <Go />
+
+        <div class="top-right">
+          <div class="go">
+            <img src="../../assets/images/fly.png" class="fly" alt="" />
+            <div class="text-wrapper">
+              <p class="en">GO HERE！</p>
+              <p class="text">去这里!</p>
+            </div>
+          </div>
+          <h1 class="title">{{ switchLanguage(cinema, 'shopName') }}</h1>
+        </div>
       </div>
-      <ScrollView scroll-x class="movie-scroll">
+      <ScrollView class="intro-scroll" scrollbar :list="cinema.content">
+        <p class="intro">
+          欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)，并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来，欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿。销售业绩评效均名列前茅，整体业绩不断上扬！在女装市场享有一定的知名度和美誉度。欧时力(香港)集团全权代理意大利品牌欧时力(OCHIRLY)，并组建欧时力(中国)有限公司，全权负责OCHIRLY在大中华区的品牌经营。欧时力自1999年进入中国市场以来，欧时力以前所未有的速度在中国市场发展壮大。在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在短短的两、三年间，迅速于中国60多个一、二类主要消费城市的160余家加盟店以及专柜年销售额达到2.5亿在短短的两、三年间，迅速于中
+        </p>
+      </ScrollView>
+      <ScrollView class="movie-scroll">
         <div class="scroll-content">
-          <div class="flex">
-            <div class="movie-item" v-for="item of list" @click="handleMovie(item)" :key="item.id">
-              <div class="poster-wrapper">
-                <img class="poster" :src="item.posterPath" alt="" />
-              </div>
-              <p class="name">{{ item.showName }}</p>
-              <div class="info">{{ item.duration }}{{ $t('fenzhong') }} | {{ item.type }} | {{ item.language }} | {{ item.director }}</div>
-              <div class="remark">
-                <span>{{ $t('rate') }}</span>
-                {{ item.remark }}
-              </div>
-              <div class="price">
-                <div class="price-num">¥<i>36</i>起</div>
-                <div class="buy">{{ $t('ticket') }}</div>
-              </div>
+          <div class="movie-item" v-for="item of list" @click="handleMovie(item)" :key="item.id">
+            <div class="poster-wrapper">
+              <img class="poster" :src="item.posterPath" alt="" />
+            </div>
+            <p class="name">{{ item.showName }}</p>
+            <div class="info">{{ item.duration }}{{ $t('fenzhong') }} | {{ item.type }} | {{ item.language }} | {{ item.director }}</div>
+            <div class="remark">
+              <span>{{ $t('rate') }}</span>
+              {{ item.remark }}
+            </div>
+            <div class="price">
+              <div class="price-num">¥<i>36</i>起</div>
+              <div class="buy">{{ $t('ticket') }}</div>
             </div>
           </div>
         </div>
@@ -54,7 +63,6 @@ import { getCinemaInfo } from '@/http/api'
 import View from '@/layouts/View.vue'
 import EffectFade from '@/components/EffectFade/EffectFade.vue'
 import ScrollView from '@/base/ScrollView/ScrollView.vue'
-import Go from '@/base/Go/Go.vue'
 import MovieDetail from '@/components/MovieDetail/MovieDetail.vue'
 
 const store = useStore()
@@ -77,20 +85,53 @@ function handleMovie(item) {
 
 <style lang="scss" scoped>
 .content {
-  display: flex;
-  margin-top: 92px;
+  width: 870px;
+  height: 1504px;
+  margin-left: 170px;
+  margin-top: 58px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 12px;
 }
 .flex {
   display: flex;
 }
 .movie-left {
+  display: flex;
   position: relative;
-  width: 500px;
-  height: 600px;
-  margin-right: 72px;
-  margin-left: 72px;
-  background: rgba(255, 255, 255, 0.4);
   border-radius: 12px;
+  margin-bottom: 32px;
+  .go {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 282px;
+    height: 80px;
+    background: linear-gradient(90deg, #f6a62c 0%, #ffbc3f 100%);
+    font-weight: 700;
+    font-family: 'font_bold';
+    color: #ffffff;
+    margin-top: 32px;
+    border-radius: 53px;
+    &::before {
+      position: absolute;
+      content: '';
+      top: 25px;
+      left: 105px;
+      width: 1px;
+      height: 30px;
+      background: rgba(255, 255, 255, 0.2);
+    }
+    .fly {
+      width: 40px;
+      margin: 0 40px;
+    }
+    .en {
+      font-size: 20px;
+    }
+    .text {
+      font-size: 16px;
+    }
+  }
   :deep(.swiper) {
     overflow: visible !important;
     z-index: auto;
@@ -113,9 +154,20 @@ function handleMovie(item) {
     }
   }
   .carousel {
+    flex-shrink: 0;
     position: relative;
+    display: inline-block;
+    margin-left: 40px;
+    margin-right: 24px;
     width: 500px;
     height: 282px;
+    margin-top: -40px;
+    background-color: #fff;
+    border-radius: 10px;
+    overflow: hidden;
+    :deep(.stay-tuned) {
+      height: 200px;
+    }
   }
   .banner-wrapper {
     width: 500px;
@@ -131,53 +183,57 @@ function handleMovie(item) {
   }
 
   .title {
-    padding: 48px 0 32px 40px;
     font-weight: 700;
     font-size: 24px;
     color: rgba(0, 0, 0, 0.8);
     font-family: 'font_bold';
+    padding-top: 102px;
+    text-align: right;
+    padding-right: 40px;
   }
-
-  .intro-scroll {
-    position: relative;
-    margin: 0 18px 23px 40px;
-    padding-right: 16px;
-    overflow: hidden;
-    height: 152px;
-    :deep(.bscroll-vertical-scrollbar) {
+}
+.intro-scroll {
+  position: relative;
+  margin: 0 18px 52px 40px;
+  padding-right: 16px;
+  overflow: hidden;
+  height: 131px;
+  z-index: 1;
+  :deep(.bscroll-vertical-scrollbar) {
+    width: 6px !important;
+    background: rgba(0, 0, 0, 0.02) !important;
+    border-radius: 6px !important;
+    opacity: 1 !important;
+    .bscroll-indicator {
       width: 6px !important;
-      background: rgba(0, 0, 0, 0.02) !important;
+      background: rgba(0, 0, 0, 0.1) !important;
       border-radius: 6px !important;
-      opacity: 1 !important;
-      .bscroll-indicator {
-        width: 6px !important;
-        background: rgba(0, 0, 0, 0.1) !important;
-        border-radius: 6px !important;
-        border: none !important;
-      }
-    }
-    .intro {
-      font-weight: 400;
-      font-size: 14px;
-      line-height: 200%;
-      text-align: justify;
-      color: rgba(0, 0, 0, 0.6);
+      border: none !important;
     }
   }
+  .intro {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 200%;
+    text-align: justify;
+    color: rgba(0, 0, 0, 0.6);
+  }
 }
 .movie-scroll {
   flex: 1;
   overflow: hidden;
   border-radius: 12px 0 0 12px;
+  margin-left: 40px;
+  height: 1103px;
 
   .scroll-content {
-    display: inline-block;
-    white-space: nowrap;
-    padding-right: 24px;
+    display: grid;
+    grid-template-columns: repeat(3, 260px);
+    gap: 36px 8px;
+    padding-bottom: 36px;
   }
 
   .movie-item {
-    display: inline-block;
     width: 260px;
     height: 600px;
     background: #ffffff;
diff --git a/src/views/Nav/Nav.vue b/src/views/Nav/Nav.vue
index e21299a..5781af3 100644
--- a/src/views/Nav/Nav.vue
+++ b/src/views/Nav/Nav.vue
@@ -57,7 +57,7 @@ const { shop, currentFloor, config } = storeToRefs(store)
 const { replay, pause, speedUp, handleReplay, togglePause, handleSpeedUp, setPause } = useMapNavControl()
 const { directionInfo, pathShopList, backPathArray } = useStartNavi(shop, currentFloor, setPause)
 const { methodIdx, handleControl } = useChangeNavMethod(backPathArray)
-const { cameraViewsImage, cameraViewsText, setCameraViews } = useSetCameraViews(pause)
+const { cameraViewsImage, setCameraViews } = useSetCameraViews(pause)
 
 window.Map_QM.changeWindowResize(1366, 1080)
 
diff --git a/src/views/Parking/Parking.vue b/src/views/Parking/Parking.vue
index eb83965..459cd41 100644
--- a/src/views/Parking/Parking.vue
+++ b/src/views/Parking/Parking.vue
@@ -1,26 +1,22 @@
 <template>
   <View class="bef" title="泊车缴费" sub-title="parking payment">
-    <div class="flex">
-      <div class="parking-left">
-        <Tabs class="width" @click="handleTab" :list="list" />
-        <PlateInput @handle-energy="handleEnergy" :search-methods="searchMethods" :license="license" :needsEnergy="needsEnergy" />
-        <PlateKeyboard @del="del" @handle-keyboard="handleKeyboard" :search-methods="searchMethods" />
-      </div>
-      <div class="parking-right">
-        <div class="carousel">
-          <EffectFade :list="banners">
-            <template v-slot="{ item }">
-              <div class="banner-wrapper">
-                <img :src="config.sourceUrl + item" class="banner" alt="" />
-              </div>
-            </template>
-          </EffectFade>
-        </div>
-        <h1 class="title">{{ switchLanguage(parkingInfo, 'title') }}</h1>
-        <ScrollView class="intro-scroll" scrollbar :list="parkingInfo.content">
-          <p class="intro">{{ switchLanguage(parkingInfo, 'content') }}</p>
-        </ScrollView>
-      </div>
+    <Tabs class="width" @click="handleTab" :list="list" />
+    <div class="carousel">
+      <EffectFade :list="banners">
+        <template v-slot="{ item }">
+          <div class="banner-wrapper">
+            <img :src="config.sourceUrl + item" class="banner" alt="" />
+          </div>
+        </template>
+      </EffectFade>
+    </div>
+    <PlateInput @handle-energy="handleEnergy" :search-methods="searchMethods" :license="license" :needsEnergy="needsEnergy" />
+    <PlateKeyboard @del="del" @handle-keyboard="handleKeyboard" :search-methods="searchMethods" />
+    <div class="parking-info">
+      <h1 class="title">{{ switchLanguage(parkingInfo, 'title') }}</h1>
+      <ScrollView class="intro-scroll" scrollbar :list="parkingInfo.content">
+        <p class="intro">{{ switchLanguage(parkingInfo, 'content') }}</p>
+      </ScrollView>
     </div>
   </View>
   <Transition enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut">
@@ -118,31 +114,25 @@ const showCarInfo = ref(false)
   justify-content: space-between;
 }
 .width {
-  width: 660px;
-  margin-left: 72px;
-  margin-top: 30px;
-  margin-bottom: 182px;
-}
-.parking-left {
-  flex: 1;
-  margin-right: 68px;
-  overflow: hidden;
+  position: absolute;
+  top: 214px;
+  left: 170px;
+  width: 468px;
+  height: 88px;
 }
-.parking-right {
-  width: 700px;
-  margin-right: 72px;
-  margin-top: 30px;
-  background: rgba(255, 255, 255, 0.4);
-  border-radius: 12px;
+.carousel {
+  position: relative;
+  width: 870px;
+  height: 490px;
+  margin-left: 170px;
+  margin-top: 58px;
+  margin-bottom: 80px;
   :deep(.swiper) {
     overflow: visible !important;
     z-index: auto;
   }
   :deep(.swiper-pagination) {
-    right: 32px;
-    left: auto;
-    bottom: -15px;
-    width: auto;
+    bottom: -24px;
   }
   :deep(.swiper-pagination-bullet) {
     width: 16px !important;
@@ -155,23 +145,26 @@ const showCarInfo = ref(false)
       border-radius: 3px !important;
     }
   }
-  .carousel {
-    position: relative;
-    width: 700px;
-    height: 400px;
-  }
-  .banner-wrapper {
-    width: 700px;
-    height: 400px;
-    overflow: hidden;
-    border-radius: 8px;
-    background: #ffffff;
-    .banner {
-      width: 100%;
-      height: 100%;
-      object-fit: cover;
-    }
+}
+.banner-wrapper {
+  width: 870px;
+  height: 490px;
+  overflow: hidden;
+  border-radius: 8px;
+  background: #ffffff;
+  .banner {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
   }
+}
+
+.parking-info {
+  margin-left: 170px;
+  margin-right: 40px;
+  background: rgba(255, 255, 255, 0.4);
+  border-radius: 12px;
+  height: 532px;
 
   .title {
     padding: 48px 0 32px 56px;
@@ -185,7 +178,7 @@ const showCarInfo = ref(false)
     position: relative;
     margin: 0 34px 0 56px;
     overflow: hidden;
-    height: 180px;
+    height: 372px;
     :deep(.bscroll-vertical-scrollbar) {
       width: 6px !important;
       background: rgba(0, 0, 0, 0.02) !important;
diff --git a/src/views/Service/Service.vue b/src/views/Service/Service.vue
index ff998b7..9310895 100644
--- a/src/views/Service/Service.vue
+++ b/src/views/Service/Service.vue
@@ -27,9 +27,10 @@ const currentComp = computed(() => dynamicComList[tabIdx.value])
 
 <style lang="scss" scoped>
 .width {
-  width: 660px;
-  margin-left: 72px;
-  margin-top: 30px;
-  margin-bottom: 48px;
+  position: absolute;
+  top: 214px;
+  left: 170px;
+  width: 491px;
+  height: 88px;
 }
 </style>