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

2025-12-03 01:17:06 +08:00
parent a30d3572a5
commit 2c38893c43
10 changed files with 696 additions and 741 deletions
--- a/config/index.ts
+++ b/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]',
--- a/config/reserve.ts
+++ b/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') })
-    //     }))
-    // }
-  },
-};
-
--- a/package.json
+++ b/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",
--- a/src/components/StoreList.vue
+++ b/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"
--- a/src/pages/index/components/HomeNew.vue
+++ b/src/pages/index/components/HomeNew.vue
--- a/src/pages/index/components/HomeOld.vue
+++ b/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>
-
--- a/src/pages/index/components/home-new.scss
+++ b/src/pages/index/components/home-new.scss
@@ -1,10 +0,0 @@
-/* HomeNew 页面样式 */
-page {
-  background-color: #f5f6f7;
-}
-
-.home-new {
-  background-color: #f5f6f7;
-  min-height: 100vh;
-}
-
--- a/src/pages/index/components/home-old.scss
+++ b/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;
-}
-
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -1,8 +1,6 @@
 <template>
-  <view>
-    <HomeNew v-if="isNewHome" />
-    <HomeOld v-else />
-  </view>
+  <HomeNew v-if="isNewHome" />
+  <HomeOld v-else />
 </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');
-
-console.log(process.env.TARO_APP_SHOW_NEW_HOME);
-console.log(isNewHome.value);
+const isNewHome = process.env.TARO_APP_SHOW_NEW_HOME === 'yes';
 </script>

 <style lang="scss" scoped></style>
--- a/src/pages/search/index.vue
+++ b/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>