fix(components): 修复搜索页样式错乱

config/index.ts

@@ -55,6 +55,7 @@ const config = {
   },
   sass: {
     data: `@import "@nutui/nutui-taro/dist/styles/variables.scss";`,
+    silenceDeprecations: ['import'],
   },
   alias: {
     '@': join(__dirname, '..', 'src'),
@@ -98,7 +99,7 @@ const config = {
         },
       },
       cssModules: {
-        enable: false, // 默认为 false，如需使用 css modules 功能，则设为 true
+        enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
         config: {
           namingPattern: 'module', // 转换模式，取值为 global/module
           generateScopedName: '[name]__[local]___[hash:base64:5]',

config/reserve.ts

@@ -1,37 +0,0 @@
-// @ts-nocheck
-
-module.exports = {
-  env: {
-    NODE_ENV: '"production"',
-  },
-  mini: {},
-  h5: {
-    /**
-     * WebpackChain 插件配置
-     * @docs https://github.com/neutrinojs/webpack-chain
-     */
-    // webpackChain (chain) {
-    //   /**
-    //    * 如果 h5 端编译后体积过大,可以使用 webpack-bundle-analyzer 插件对打包体积进行分析。
-    //    * @docs https://github.com/webpack-contrib/webpack-bundle-analyzer
-    //    */
-    //   chain.plugin('analyzer')
-    //     .use(require('webpack-bundle-analyzer').BundleAnalyzerPlugin, [])
-    //   /**
-    //    * 如果 h5 端首屏加载时间过长,可以使用 prerender-spa-plugin 插件预加载首页。
-    //    * @docs https://github.com/chrisvfritz/prerender-spa-plugin
-    //    */
-    //   const path = require('path')
-    //   const Prerender = require('prerender-spa-plugin')
-    //   const staticDir = path.join(__dirname, '..', 'dist')
-    //   chain
-    //     .plugin('prerender')
-    //     .use(new Prerender({
-    //       staticDir,
-    //       routes: [ '/pages/index/index' ],
-    //       postProcess: (context) => ({ ...context, outputPath: path.join(staticDir, 'index.html') })
-    //     }))
-    // }
-  },
-};
-

package.json

@@ -1,8 +1,8 @@
 {
   "name": "jdt-user",
-  "version": "4.0.16",
+  "version": "4.0.17",
   "taroConfig": {
-    "version": "4.0.16"
+    "version": "4.0.17"
   },
   "scripts": {
     "build:weapp": "taro build --type weapp",

src/components/StoreList.vue

@@ -1,6 +1,6 @@
 <template>
   <view>
-    <view class="flex justify-center" v-if="storeList.length > 0">
+    <view v-if="storeList.length > 0">
       <view
         class="bg-white rounded-[15px] mt-3 p-2 w-[95%] flex items-center"
         v-for="(item, index) in storeList"

src/pages/index/components/HomeNew.vue

@@ -315,32 +315,32 @@ const toMerDetails = item => {
 </script>
 
 <style lang="scss">
-@import './home-new.scss';
-
 /* 所有新版样式包裹在 .home-new 作用域下 */
 .home-new {
-/* Header Styles */
+  background-color: #f5f6f7;
-.header-fixed {
+  min-height: 100vh;
+  /* Header Styles */
+  .header-fixed {
     position: sticky;
     top: 0;
     z-index: 50;
     background: linear-gradient(180deg, #eff6ff 0%, #f5f6f7 100%);
-}
+  }
 
-.header-content {
+  .header-content {
     padding: 10px 20px 10px;
-}
+  }
 
-.location-bar {
+  .location-bar {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 10px;
     font-size: 22px;
     color: #6b7280;
-}
+  }
 
-.location-inner {
+  .location-inner {
     display: flex;
     align-items: center;
     max-width: 90%;
@@ -348,55 +348,55 @@ const toMerDetails = item => {
     padding: 8px 16px;
     border-radius: 50px;
     backdrop-filter: blur(10px);
-}
+  }
 
-.location-icon {
+  .location-icon {
     width: 26px;
     height: 26px;
     margin-right: 8px;
     color: #374151;
-}
+  }
 
-.location-text {
+  .location-text {
     flex: 1;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
     font-weight: 500;
-}
+  }
 
-.location-arrow {
+  .location-arrow {
     width: 20px;
     height: 20px;
     margin-left: 8px;
     color: #9ca3af;
-}
+  }
 
-.search-container {
+  .search-container {
     position: relative;
     // margin: 10px auto;
     margin-top: 20px;
-}
+  }
 
-.search-input {
+  .search-input {
     height: 70px;
     background-color: #ffffff;
     border: none;
     border-radius: 20px;
     padding: 10px 20px 10px 70px;
     font-size: 28px;
-}
+  }
 
-.search-icon-left {
+  .search-icon-left {
     position: absolute;
     left: 20px;
     top: 50%;
     transform: translateY(-50%);
     color: #9ca3af;
     font-size: 30px;
-}
+  }
 
-.search-btn {
+  .search-btn {
     position: absolute;
     right: 10px;
     top: 50%;
@@ -412,15 +412,15 @@ const toMerDetails = item => {
     align-items: center;
     justify-content: center;
     z-index: 10;
-}
+  }
 
-/* Main Content */
+  /* Main Content */
-.main-content {
+  .main-content {
     padding: 0 20px 180px;
-}
+  }
 
-/* Banner Hero */
+  /* Banner Hero */
-.banner-hero {
+  .banner-hero {
     position: relative;
     border-radius: 20px;
     overflow: hidden;
@@ -428,83 +428,83 @@ const toMerDetails = item => {
     height: 280px;
     margin-top: 20px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
+  }
 
-.banner-decoration {
+  .banner-decoration {
     position: absolute;
     border-radius: 50%;
     opacity: 0.1;
-}
+  }
 
-.banner-decoration-top {
+  .banner-decoration-top {
     top: -80px;
     right: -80px;
     width: 240px;
     height: 240px;
     background-color: rgba(255, 255, 255, 0.3);
-}
+  }
 
-.banner-decoration-bottom {
+  .banner-decoration-bottom {
     bottom: -60px;
     left: -60px;
     width: 180px;
     height: 180px;
     background-color: rgba(147, 197, 253, 0.3);
-}
+  }
 
-.banner-inner {
+  .banner-inner {
     position: relative;
-  height: 100%;
+    // height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     text-align: center;
     padding: 30px;
-}
+  }
 
-.banner-title {
+  .banner-title {
     font-size: 60px;
     font-weight: 900;
     color: #ffffff;
     letter-spacing: 4px;
     font-style: italic;
     margin-bottom: 8px;
-}
+  }
 
-.banner-title-yellow {
+  .banner-title-yellow {
     color: #fde047;
-}
+  }
 
-.banner-subtitle-wrapper {
+  .banner-subtitle-wrapper {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 30px;
     opacity: 0.95;
-}
+  }
 
-.banner-divider {
+  .banner-divider {
     width: 60px;
     height: 1px;
     background-color: rgba(255, 255, 255, 0.5);
-}
+  }
 
-.banner-subtitle {
+  .banner-subtitle {
     color: #ffffff;
     font-size: 22px;
     font-weight: 500;
     letter-spacing: 2px;
-}
+  }
 
-.banner-buttons {
+  .banner-buttons {
     display: flex;
     width: 100%;
     max-width: 600px;
     gap: 20px;
-}
+  }
 
-.banner-btn {
+  .banner-btn {
     flex: 1;
     border-radius: 50px;
     padding: 15px 0;
@@ -516,50 +516,50 @@ const toMerDetails = item => {
     gap: 8px;
     pointer-events: none;
     transform: scale(0.9);
-}
+  }
 
-.banner-btn-primary {
+  .banner-btn-primary {
     background-color: rgba(255, 255, 255, 0.1);
     color: #ffffff;
     border: 1px solid rgba(255, 255, 255, 0.2);
     backdrop-filter: blur(10px);
-}
+  }
 
-.banner-btn-secondary {
+  .banner-btn-secondary {
     background-color: rgba(255, 255, 255, 0.1);
     color: rgba(255, 255, 255, 0.8);
     border: 1px solid rgba(255, 255, 255, 0.1);
     backdrop-filter: blur(10px);
-}
+  }
 
-.banner-btn-icon {
+  .banner-btn-icon {
     font-size: 36px;
     opacity: 0.8;
-}
+  }
 
-/* Navigation Grid */
+  /* Navigation Grid */
-.nav-grid-wrapper {
+  .nav-grid-wrapper {
     background-color: #ffffff;
     border-radius: 20px;
     padding: 30px;
     margin-top: 20px;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
-}
+  }
 
-.nav-grid {
+  .nav-grid {
     display: grid;
     grid-template-columns: repeat(4, 1fr);
     gap: 20px;
-}
+  }
 
-.nav-item {
+  .nav-item {
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
-}
+  }
 
-.nav-icon-wrapper {
+  .nav-icon-wrapper {
     width: 88px;
     height: 88px;
     border-radius: 50%;
@@ -568,14 +568,14 @@ const toMerDetails = item => {
     align-items: center;
     justify-content: center;
     overflow: hidden;
-}
+  }
 
-.nav-icon {
+  .nav-icon {
     width: 60px;
     height: 60px;
-}
+  }
 
-.nav-label {
+  .nav-label {
     font-size: 22px;
     font-weight: 500;
     color: #374151;
@@ -584,51 +584,51 @@ const toMerDetails = item => {
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-}
+  }
 
-/* Featured Section */
+  /* Featured Section */
-.featured-section {
+  .featured-section {
     display: flex;
     gap: 20px;
     height: 280px;
     margin-top: 20px;
-}
+  }
 
-.featured-card {
+  .featured-card {
     background-color: #ffffff;
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
     position: relative;
-}
+  }
 
-.featured-card-left {
+  .featured-card-left {
     flex: 1.2;
     background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
     border: 1px solid #fed7aa;
     padding: 20px;
     display: flex;
     flex-direction: column;
-}
+  }
 
-.featured-content {
+  .featured-content {
     position: relative;
     z-index: 10;
-}
+  }
 
-.featured-title {
+  .featured-title {
     font-size: 30px;
     font-weight: bold;
     color: #1f2937;
-}
+  }
 
-.featured-desc {
+  .featured-desc {
     font-size: 20px;
     color: #f97316;
     margin-top: 4px;
-}
+  }
 
-.featured-btn {
+  .featured-btn {
     margin-top: 20px;
     background: linear-gradient(90deg, #f97316 0%, #ef4444 100%);
     color: #ffffff;
@@ -640,79 +640,83 @@ const toMerDetails = item => {
     display: inline-block;
     line-height: 1.5;
     box-shadow: 0 2px 4px rgba(249, 115, 22, 0.3);
-}
+  }
 
-.featured-bg {
+  .featured-bg {
     position: absolute;
     bottom: 0;
     right: 0;
     opacity: 0.1;
     pointer-events: none;
-}
+  }
 
-.featured-svg {
+  .featured-svg {
     width: 180px;
     height: 180px;
     color: #ea580c;
     transform: rotate(-12deg) translate(30px, 30px);
-}
+  }
 
-.featured-card-right {
+  .featured-card-right {
     flex: 1;
     border: 1px solid #e5e7eb;
     display: flex;
     flex-direction: column;
-}
+  }
 
-.featured-image {
+  .featured-image {
     height: 67%;
     position: relative;
-}
+  }
 
-.featured-img {
+  .featured-img {
     width: 100%;
     height: 100%;
-}
+  }
 
-.featured-overlay {
+  .featured-overlay {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
-  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.6) 100%);
+    background: linear-gradient(
+      180deg,
+      transparent 0%,
+      rgba(0, 0, 0, 0.6) 100%
+    );
     padding: 10px 15px;
     display: flex;
     flex-direction: column;
     justify-content: flex-end;
-}
+  }
 
-.featured-overlay-title {
+  .featured-overlay-title {
     color: #ffffff;
     font-weight: bold;
     font-size: 26px;
-}
+  }
 
-.featured-footer {
+  .featured-footer {
     height: 33%;
     padding: 0 15px;
     display: flex;
     align-items: center;
     justify-content: space-between;
     background-color: #ffffff;
-}
+  }
 
-.featured-footer-left {
+  .featured-footer-left {
     display: flex;
     flex-direction: column;
-}
+  }
 
-.featured-footer-title {
+  .featured-footer-title {
     font-size: 22px;
     font-weight: bold;
     color: #1f2937;
-}
+  }
 
-.featured-footer-arrow {
+  .featured-footer-arrow {
     width: 44px;
     height: 44px;
     border-radius: 50%;
@@ -722,47 +726,47 @@ const toMerDetails = item => {
     align-items: center;
     justify-content: center;
     font-size: 24px;
-}
+  }
 
-/* Store Section */
+  /* Store Section */
-.store-section {
+  .store-section {
     padding-bottom: 20px;
     margin-top: 20px;
-}
+  }
 
-.store-header {
+  .store-header {
     font-size: 30px;
     font-weight: bold;
     color: #1f2937;
     padding: 0 8px 15px;
     display: flex;
     align-items: center;
-}
+  }
 
-.store-header-line {
+  .store-header-line {
     width: 6px;
     height: 30px;
     background-color: #fa2c19;
     border-radius: 50px;
     margin-right: 15px;
-}
+  }
 
-.store-list {
+  .store-list {
     display: flex;
     flex-direction: column;
     gap: 20px;
-}
+  }
 
-.store-item {
+  .store-item {
     background-color: #ffffff;
     border-radius: 20px;
     padding: 15px;
     display: flex;
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
     border: 1px solid #f9fafb;
-}
+  }
 
-.store-image-wrapper {
+  .store-image-wrapper {
     width: 180px;
     height: 180px;
     flex-shrink: 0;
@@ -770,14 +774,14 @@ const toMerDetails = item => {
     border-radius: 16px;
     overflow: hidden;
     position: relative;
-}
+  }
 
-.store-image {
+  .store-image {
     width: 100%;
     height: 100%;
-}
+  }
 
-.store-badge {
+  .store-badge {
     position: absolute;
     top: 0;
     left: 0;
@@ -787,9 +791,9 @@ const toMerDetails = item => {
     padding: 4px 12px;
     border-bottom-right-radius: 16px;
     font-weight: bold;
-}
+  }
 
-.store-info {
+  .store-info {
     margin-left: 20px;
     flex: 1;
     display: flex;
@@ -797,9 +801,9 @@ const toMerDetails = item => {
     height: 180px;
     justify-content: space-between;
     padding: 8px 0;
-}
+  }
 
-.store-name {
+  .store-name {
     font-weight: bold;
     color: #1f2937;
     font-size: 30px;
@@ -807,68 +811,67 @@ const toMerDetails = item => {
     text-overflow: ellipsis;
     white-space: nowrap;
     line-height: 1.2;
-}
+  }
 
-.store-rating {
+  .store-rating {
     display: flex;
     align-items: center;
     font-size: 22px;
     margin-top: 4px;
-}
+  }
 
-.rating-stars {
+  .rating-stars {
     display: flex;
     align-items: center;
     margin-right: 15px;
-}
+  }
 
-.stars-text {
+  .stars-text {
     color: #fbbf24;
     font-size: 20px;
     margin-right: 8px;
-}
+  }
 
-.rating-score {
+  .rating-score {
     color: #fa2c19;
     font-weight: bold;
-}
+  }
 
-.rating-divider {
+  .rating-divider {
     color: #d1d5db;
     margin: 0 10px;
-}
+  }
 
-.rating-sales {
+  .rating-sales {
     color: #6b7280;
-}
+  }
 
-.store-distance {
+  .store-distance {
     display: flex;
     align-items: center;
     justify-content: space-between;
-}
+  }
 
-.distance-placeholder {
+  .distance-placeholder {
     font-size: 22px;
     color: transparent;
     user-select: none;
-}
+  }
 
-.distance-text {
+  .distance-text {
     font-size: 22px;
     color: #9ca3af;
-}
+  }
 
-.store-empty {
+  .store-empty {
     text-align: center;
     padding: 80px 0;
     color: #9ca3af;
     font-size: 26px;
-}
+  }
 
-.iconfont {
+  .iconfont {
     font-size: inherit;
-}
+  }
-
 } /* .home-new 作用域结束 */
 </style>

src/pages/index/components/HomeOld.vue

@@ -237,9 +237,130 @@ const toPage = item => {
 </script>
 
 <style lang="scss">
-/* 旧版样式包裹在 .home-old 作用域下 */
+/* 旧版样式 - 所有样式包裹在 .home-old 作用域下 */
+page {
+  background-image: url('//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png');
+  background-size: 100% 57%;
+  background-repeat: no-repeat;
+  box-sizing: border-box;
+  min-height: 100vh;
+}
 .home-old {
-  @import './home-old.scss';
+  .local {
+    margin-left: 15px;
+    display: flex;
+    align-items: flex-end;
+    color: #fff;
+  }
+
+  .search {
+    margin: 30px auto;
+    display: flex;
+    border-radius: 18px;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px 15px;
+    background: rgba(255, 255, 255, 0.8);
+    width: 730px;
+
+    input {
+      flex: 1;
+    }
+
+    .search-btn {
+      background-color: #f83d3d;
+      color: #fff;
+      border-radius: 10px;
+      width: 100px;
+      height: 60px;
+      text-align: center;
+      line-height: 60px;
+    }
+  }
+
+  .banner {
+    position: relative;
+    text-align: center;
+    .title {
+      width: 600px;
+      height: 90px;
+      left: 50%;
+    }
+
+    .jf-btn {
+      margin: 15px auto;
+      background-image: url('//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png');
+      background-size: 100% 100%;
+      width: 350px;
+      height: 70px;
+    }
+
+    .footer {
+      display: flex;
+      align-items: flex-end;
+      justify-content: space-between;
+      margin: 0 auto;
+      padding: 0 15px;
+
+      .btn-1 {
+        background-image: url('//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png');
+        background-size: 100% 100%;
+        width: 200px;
+        height: 220px;
+      }
+
+      .btn-2 {
+        // background-image: url('//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png');
+        background-image: url('../../../static/game_banner.png');
+        background-size: 100% 100%;
+        width: 300px;
+        height: 220px;
+      }
+
+      .btn-3 {
+        background-image: url('//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png');
+        background-size: 100% 100%;
+        width: 200px;
+        height: 220px;
+      }
+    }
+  }
+
+  .navigation {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-gap: 40px;
+    margin: 20px;
+    height: auto;
+    background-color: #fff;
+    border-radius: 20px;
+    padding: 32px 0;
+
+    .item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .icon {
+        background-size: 100% 100%;
+        width: 90px;
+        height: 90px;
+      }
+
+      .text {
+        color: #333333;
+        font-size: 26px;
+        margin-top: 6px;
+      }
+    }
+  }
+
+  .ad {
+    // background-image: url('https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png');
+    background-image: url('https://pic.imgdb.cn/item/6697aa0dd9c307b7e95c94d9.png');
+    background-size: 100% 100%;
+    height: 180px;
+    margin: 20px;
+  }
 }
 </style>
-

src/pages/index/components/home-new.scss

@@ -1,10 +0,0 @@
-/* HomeNew 页面样式 */
-page {
-  background-color: #f5f6f7;
-}
-
-.home-new {
-  background-color: #f5f6f7;
-  min-height: 100vh;
-}
-

src/pages/index/components/home-old.scss

@@ -1,124 +0,0 @@
-page {
-  background-image: url('//p0.meituan.net/csc/aaaccd28594119e4b838d07d30739471440261.png');
-  background-size: 100% 57%;
-  background-repeat: no-repeat;
-  box-sizing: border-box;
-}
-
-.local {
-  margin-left: 15px;
-  display: flex;
-  align-items: flex-end;
-  color: #fff;
-}
-
-.search {
-  margin: 30px auto;
-  display: flex;
-  border-radius: 18px;
-  justify-content: space-between;
-  align-items: center;
-  padding: 10px 15px;
-  background: rgba(255, 255, 255, 0.8);
-  width: 730px;
-
-  input {
-    flex: 1;
-  }
-
-  .search-btn {
-    background-color: #f83d3d;
-    color: #fff;
-    border-radius: 10px;
-    width: 100px;
-    height: 60px;
-    text-align: center;
-    line-height: 60px;
-  }
-}
-
-.banner {
-  position: relative;
-  text-align: center;
-  .title {
-    width: 600px;
-    height: 90px;
-    left: 50%;
-  }
-
-  .jf-btn {
-    margin: 15px auto;
-    background-image: url('//p1.meituan.net/csc/e125184432dc591137c24a26abe5796a25262.png');
-    background-size: 100% 100%;
-    width: 350px;
-    height: 70px;
-  }
-
-  .footer {
-    display: flex;
-    align-items: flex-end;
-    justify-content: space-between;
-    margin: 0 auto;
-    padding: 0 15px;
-
-    .btn-1 {
-      background-image: url('//p0.meituan.net/csc/7708348ee250eae910328bb7c12197f029562.png');
-      background-size: 100% 100%;
-      width: 200px;
-      height: 220px;
-    }
-
-    .btn-2 {
-      // background-image: url('//p1.meituan.net/csc/8cc2b518031eb7424b184d90a583d805146287.png');
-      background-image: url('../../../static/game_banner.png');
-      background-size: 100% 100%;
-      width: 300px;
-      height: 220px;
-    }
-
-    .btn-3 {
-      background-image: url('//p0.meituan.net/csc/31bd1f5c791c95557758dfa5c96e001529545.png');
-      background-size: 100% 100%;
-      width: 200px;
-      height: 220px;
-    }
-  }
-}
-
-.navigation {
-  display: grid;
-  grid-template-columns: repeat(4, 1fr);
-  grid-gap: 40px;
-  margin: 20px;
-  height: auto;
-  background-color: #fff;
-  border-radius: 20px;
-  padding: 32px 0;
-
-  .item {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    .icon {
-      background-size: 100% 100%;
-      width: 90px;
-      height: 90px;
-    }
-
-    .text {
-      color: #333333;
-      font-size: 26px;
-      margin-top: 6px;
-    }
-  }
-}
-
-.ad {
-  // background-image: url('https://jdt168.oss-cn-guangzhou.aliyuncs.com/ad.png');
-  background-image: url('https://pic.imgdb.cn/item/6697aa0dd9c307b7e95c94d9.png');
-  background-size: 100% 100%;
-  height: 180px;
-  margin: 20px;
-}
-

src/pages/index/index.vue

@@ -1,8 +1,6 @@
 <template>
-  <view>
   <HomeNew v-if="isNewHome" />
   <HomeOld v-else />
-  </view>
 </template>
 
 <script setup lang="ts">
@@ -10,10 +8,7 @@ import { ref } from 'vue';
 import HomeOld from './components/HomeOld.vue';
 import HomeNew from './components/HomeNew.vue';
 
-const isNewHome = ref(process.env.TARO_APP_SHOW_NEW_HOME === 'yes');
+const isNewHome = process.env.TARO_APP_SHOW_NEW_HOME === 'yes';
-
-console.log(process.env.TARO_APP_SHOW_NEW_HOME);
-console.log(isNewHome.value);
 </script>
 
 <style lang="scss" scoped></style>

src/pages/search/index.vue

@@ -25,10 +25,16 @@ onMounted(() => {
 </script>
 
 <template>
-  <view>
+  <view class="search-page">
     <MerList v-if="classId" v-model="classId" />
     <Storelist v-else v-model="name" />
   </view>
 </template>
 
-<style lang="scss"></style>
+<style lang="scss">
+.search-page {
+  min-height: 100vh;
+  background-color: #f5f6f7;
+  background-image: none;
+}
+</style>