黑色

.env.development

@@ -1 +1 @@
-VITE_BASE_URL=http://localhost:8080
+VITE_BASE_URL=https://paimaide.izouma.com/

src/components/ProductInfo.vue

@@ -1,9 +1,9 @@
 <template>
     <div class="product-info" :class="{ product2: list }" @click="goDetail">
-        <van-image width="104" height="104" fit="cover" :src="getImg(info.pic)" />
+        <van-image :width="width" :height="width" fit="cover" :src="getImg(info.pic)" />
         <div class="content">
             <div class="text1 van-ellipsis">{{ info.name }}</div>
-            <div class="badges">
+            <div class="badges" v-if="list">
                 <div class="badge">{{ category.name }}</div>
             </div>
             <div class="flex1"></div>
@@ -46,6 +46,11 @@ const category = computed(() => {
 })
 
 const router = useRouter()
+
+const width = computed(() => {
+    return props.list ? 104 : 78
+})
+
 const goDetail = () => {
     router.push({
         path: '/productDetail',
@@ -66,15 +71,15 @@ const goDetail = () => {
 
 .content {
     align-self: stretch;
-    padding: 6px 10px;
     flex-grow: 1;
     overflow: hidden;
+    padding: 8px;
     .f-col();
 
     .text1 {
-        font-size: 14px;
+        font-size: 13px;
         color: var(--ion-color-step-900);
-        line-height: 24px;
+        line-height: 18px;
         font-weight: bold;
     }
 
@@ -101,21 +106,22 @@ const goDetail = () => {
 
 .datas {
     .f();
+    justify-content: space-between;
     .data {
-        width: 33%;
         .f-col();
         align-items: center;
         .val {
             font-size: 13px;
             font-weight: bold;
             color: var(--ion-color-light-contrast);
-            line-height: 24px;
+            line-height: 18px;
         }
         .name {
-            font-size: 11px;
+            font-size: 10px;
             color: rgba(var(--ion-color-light-contrast-rgb), 0.6);
-            line-height: 17px;
+            line-height: 10px;
             white-space: nowrap;
+            margin-top: 2px;
         }
 
         &:nth-child(1) {
@@ -135,6 +141,14 @@ const goDetail = () => {
 
 .product2 {
     .content {
+        padding: 6px 10px;
+
+        .text1 {
+            font-size: 14px;
+            color: var(--ion-color-step-900);
+            line-height: 24px;
+            font-weight: bold;
+        }
         .badges {
             .badge {
                 color: #4078de;
@@ -142,5 +156,40 @@ const goDetail = () => {
             }
         }
     }
+
+    .datas {
+        .f();
+        .data {
+            width: 33%;
+            .f-col();
+            align-items: center;
+            .val {
+                font-size: 13px;
+                font-weight: bold;
+                color: var(--ion-color-light-contrast);
+                line-height: 24px;
+            }
+            .name {
+                font-size: 11px;
+                color: rgba(var(--ion-color-light-contrast-rgb), 0.6);
+                line-height: 17px;
+                white-space: nowrap;
+                margin-top: 0;
+            }
+
+            &:nth-child(1) {
+                align-items: flex-start;
+                .val {
+                    color: var(--red);
+                }
+            }
+
+            &:nth-child(2) {
+                .val {
+                    color: var(--green);
+                }
+            }
+        }
+    }
 }
 </style>

src/components/ProductSmallInfo.vue

@@ -0,0 +1,138 @@
+<template>
+    <div class="product-info" :class="{ product2: list }" @click="goDetail">
+        <van-image width="calc(50vw - 24px)" height="calc(50vw - 24px)" fit="cover" :src="getImg(info.pic)" />
+        <div class="content">
+            <div class="text1 van-ellipsis">{{ info.name }}</div>
+            <div class="badges">
+                <div class="badge">{{ category.name }}</div>
+            </div>
+            <div class="flex1"></div>
+            <div class="datas">
+                <div class="data">
+                    <div class="val">{{ info.currentPrice }}</div>
+                    <div class="name">当前价(元)</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { computed } from 'vue'
+import { useRouter } from 'vue-router'
+
+const props = defineProps({
+    info: {
+        type: Object,
+        default: () => {
+            return {}
+        }
+    },
+    list: {
+        type: Boolean,
+        default: false
+    }
+})
+const category = computed(() => {
+    return props.info.category || {}
+})
+
+const router = useRouter()
+const goDetail = () => {
+    router.push({
+        path: '/productDetail',
+        query: {
+            id: props.info.id
+        }
+    })
+}
+</script>
+
+<style lang="less" scoped>
+.product-info {
+    .f-col();
+    .van-image {
+        flex-shrink: 0;
+    }
+}
+
+.content {
+    align-self: stretch;
+    padding: 6px 10px;
+    flex-grow: 1;
+    overflow: hidden;
+    .f-col();
+
+    .text1 {
+        font-size: 14px;
+        color: var(--ion-color-step-900);
+        line-height: 24px;
+        font-weight: bold;
+    }
+
+    .badges {
+        .f();
+        margin-top: 2px;
+        .badge {
+            font-size: 10px;
+            color: #392d19;
+            line-height: 16px;
+            background: var(--ion-color-step-0) 66;
+            border-radius: 2px;
+            padding: 0 2px;
+        }
+        .badge + .badge {
+            margin-left: 6px;
+        }
+    }
+}
+
+.flex1 {
+    flex-grow: 1;
+}
+
+.datas {
+    .f();
+    .data {
+        width: 33%;
+        .f-col();
+        align-items: center;
+        .val {
+            font-size: 13px;
+            font-weight: bold;
+            color: var(--ion-color-light-contrast);
+            line-height: 24px;
+        }
+        .name {
+            font-size: 11px;
+            color: rgba(var(--ion-color-light-contrast-rgb), 0.6);
+            line-height: 17px;
+            white-space: nowrap;
+        }
+
+        &:nth-child(1) {
+            align-items: flex-start;
+            .val {
+                color: var(--red);
+            }
+        }
+
+        &:nth-child(2) {
+            .val {
+                color: var(--green);
+            }
+        }
+    }
+}
+
+.product2 {
+    .content {
+        .badges {
+            .badge {
+                color: #4078de;
+                background: #e9effb;
+            }
+        }
+    }
+}
+</style>

src/styles/theme/variables.less

@@ -3,33 +3,33 @@ http://ionicframework.com/docs/theming/ */
 
 /** Ionic CSS Variables **/
 :root {
-    --ion-background-color: #F5F7FA;
-	--ion-background-color-rgb: 245,247,250;
+    --ion-background-color: #f5f7fa;
+    --ion-background-color-rgb: 245, 247, 250;
 
-	--ion-text-color: #000000;
-	--ion-text-color-rgb: 0,0,0;
+    --ion-text-color: #000000;
+    --ion-text-color-rgb: 0, 0, 0;
 
     --ion-color-step-0: #ffffff;
-	--ion-color-step-50: #F5F7FA;
-	--ion-color-step-100: #e6e6e6;
-	--ion-color-step-150: #d9d9d9;
-	--ion-color-step-200: #cccccc;
-	--ion-color-step-250: #bfbfbf;
-	--ion-color-step-300: #b3b3b3;
-	--ion-color-step-350: #a6a6a6;
-	--ion-color-step-400: #999999;
-	--ion-color-step-450: #8c8c8c;
-	--ion-color-step-500: #808080;
-	--ion-color-step-550: #737373;
-	--ion-color-step-600: #666666;
-	--ion-color-step-650: #595959;
-	--ion-color-step-700: #4d4d4d;
-	--ion-color-step-750: #404040;
-	--ion-color-step-800: #333333;
-	--ion-color-step-850: #262626;
-	--ion-color-step-900: #191919;
-	--ion-color-step-950: #0d0d0d;
-    
+    --ion-color-step-50: #f5f7fa;
+    --ion-color-step-100: #e6e6e6;
+    --ion-color-step-150: #d9d9d9;
+    --ion-color-step-200: #cccccc;
+    --ion-color-step-250: #bfbfbf;
+    --ion-color-step-300: #b3b3b3;
+    --ion-color-step-350: #a6a6a6;
+    --ion-color-step-400: #999999;
+    --ion-color-step-450: #8c8c8c;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #737373;
+    --ion-color-step-600: #666666;
+    --ion-color-step-650: #595959;
+    --ion-color-step-700: #4d4d4d;
+    --ion-color-step-750: #404040;
+    --ion-color-step-800: #333333;
+    --ion-color-step-850: #262626;
+    --ion-color-step-900: #191919;
+    --ion-color-step-950: #0d0d0d;
+
     /** primary **/
     --ion-color-primary: #4078de;
     --ion-color-primary-rgb: 56, 128, 255;
@@ -107,157 +107,158 @@ http://ionicframework.com/docs/theming/ */
 * Dark Colors
 * -------------------------------------------
 */
-.dark {
-    body {
-        --ion-color-primary: #428cff;
-        --ion-color-primary-rgb: 66, 140, 255;
-        --ion-color-primary-contrast: #ffffff;
-        --ion-color-primary-contrast-rgb: 255, 255, 255;
-        --ion-color-primary-shade: #3a7be0;
-        --ion-color-primary-tint: #5598ff;
-
-        --ion-color-secondary: #50c8ff;
-        --ion-color-secondary-rgb: 80, 200, 255;
-        --ion-color-secondary-contrast: #ffffff;
-        --ion-color-secondary-contrast-rgb: 255, 255, 255;
-        --ion-color-secondary-shade: #46b0e0;
-        --ion-color-secondary-tint: #62ceff;
-
-        --ion-color-tertiary: #6a64ff;
-        --ion-color-tertiary-rgb: 106, 100, 255;
-        --ion-color-tertiary-contrast: #ffffff;
-        --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-        --ion-color-tertiary-shade: #5d58e0;
-        --ion-color-tertiary-tint: #7974ff;
-
-        --ion-color-success: #2fdf75;
-        --ion-color-success-rgb: 47, 223, 117;
-        --ion-color-success-contrast: #000000;
-        --ion-color-success-contrast-rgb: 0, 0, 0;
-        --ion-color-success-shade: #29c467;
-        --ion-color-success-tint: #44e283;
-
-        --ion-color-warning: #ffd534;
-        --ion-color-warning-rgb: 255, 213, 52;
-        --ion-color-warning-contrast: #000000;
-        --ion-color-warning-contrast-rgb: 0, 0, 0;
-        --ion-color-warning-shade: #e0bb2e;
-        --ion-color-warning-tint: #ffd948;
-
-        --ion-color-danger: #ff4961;
-        --ion-color-danger-rgb: 255, 73, 97;
-        --ion-color-danger-contrast: #ffffff;
-        --ion-color-danger-contrast-rgb: 255, 255, 255;
-        --ion-color-danger-shade: #e04055;
-        --ion-color-danger-tint: #ff5b71;
-
-        --ion-color-dark: #f4f5f8;
-        --ion-color-dark-rgb: 244, 245, 248;
-        --ion-color-dark-contrast: #000000;
-        --ion-color-dark-contrast-rgb: 0, 0, 0;
-        --ion-color-dark-shade: #d7d8da;
-        --ion-color-dark-tint: #f5f6f9;
-
-        --ion-color-medium: #989aa2;
-        --ion-color-medium-rgb: 152, 154, 162;
-        --ion-color-medium-contrast: #000000;
-        --ion-color-medium-contrast-rgb: 0, 0, 0;
-        --ion-color-medium-shade: #86888f;
-        --ion-color-medium-tint: #a2a4ab;
-
-        --ion-color-light: #222428;
-        --ion-color-light-rgb: 34, 36, 40;
-        --ion-color-light-contrast: #ffffff;
-        --ion-color-light-contrast-rgb: 255, 255, 255;
-        --ion-color-light-shade: #1e2023;
-        --ion-color-light-tint: #383a3e;
-    }
-
-    /*
+//全部dark
+// .dark {
+body {
+    --ion-color-primary: #428cff;
+    --ion-color-primary-rgb: 66, 140, 255;
+    --ion-color-primary-contrast: #ffffff;
+    --ion-color-primary-contrast-rgb: 255, 255, 255;
+    --ion-color-primary-shade: #3a7be0;
+    --ion-color-primary-tint: #5598ff;
+
+    --ion-color-secondary: #50c8ff;
+    --ion-color-secondary-rgb: 80, 200, 255;
+    --ion-color-secondary-contrast: #ffffff;
+    --ion-color-secondary-contrast-rgb: 255, 255, 255;
+    --ion-color-secondary-shade: #46b0e0;
+    --ion-color-secondary-tint: #62ceff;
+
+    --ion-color-tertiary: #6a64ff;
+    --ion-color-tertiary-rgb: 106, 100, 255;
+    --ion-color-tertiary-contrast: #ffffff;
+    --ion-color-tertiary-contrast-rgb: 255, 255, 255;
+    --ion-color-tertiary-shade: #5d58e0;
+    --ion-color-tertiary-tint: #7974ff;
+
+    --ion-color-success: #2fdf75;
+    --ion-color-success-rgb: 47, 223, 117;
+    --ion-color-success-contrast: #000000;
+    --ion-color-success-contrast-rgb: 0, 0, 0;
+    --ion-color-success-shade: #29c467;
+    --ion-color-success-tint: #44e283;
+
+    --ion-color-warning: #ffd534;
+    --ion-color-warning-rgb: 255, 213, 52;
+    --ion-color-warning-contrast: #000000;
+    --ion-color-warning-contrast-rgb: 0, 0, 0;
+    --ion-color-warning-shade: #e0bb2e;
+    --ion-color-warning-tint: #ffd948;
+
+    --ion-color-danger: #ff4961;
+    --ion-color-danger-rgb: 255, 73, 97;
+    --ion-color-danger-contrast: #ffffff;
+    --ion-color-danger-contrast-rgb: 255, 255, 255;
+    --ion-color-danger-shade: #e04055;
+    --ion-color-danger-tint: #ff5b71;
+
+    --ion-color-dark: #f4f5f8;
+    --ion-color-dark-rgb: 244, 245, 248;
+    --ion-color-dark-contrast: #000000;
+    --ion-color-dark-contrast-rgb: 0, 0, 0;
+    --ion-color-dark-shade: #d7d8da;
+    --ion-color-dark-tint: #f5f6f9;
+
+    --ion-color-medium: #989aa2;
+    --ion-color-medium-rgb: 152, 154, 162;
+    --ion-color-medium-contrast: #000000;
+    --ion-color-medium-contrast-rgb: 0, 0, 0;
+    --ion-color-medium-shade: #86888f;
+    --ion-color-medium-tint: #a2a4ab;
+
+    --ion-color-light: #222428;
+    --ion-color-light-rgb: 34, 36, 40;
+    --ion-color-light-contrast: #ffffff;
+    --ion-color-light-contrast-rgb: 255, 255, 255;
+    --ion-color-light-shade: #1e2023;
+    --ion-color-light-tint: #383a3e;
+}
+
+/*
    * iOS Dark Theme
    * -------------------------------------------
    */
 
-    &.ios body {
-        --ion-background-color: #121212;
-        --ion-background-color-rgb: 0, 0, 0;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-color-step-0: #000000;
-        --ion-color-step-50: #0d0d0d;
-        --ion-color-step-100: #1a1a1a;
-        --ion-color-step-150: #262626;
-        --ion-color-step-200: #333333;
-        --ion-color-step-250: #404040;
-        --ion-color-step-300: #4d4d4d;
-        --ion-color-step-350: #595959;
-        --ion-color-step-400: #666666;
-        --ion-color-step-450: #737373;
-        --ion-color-step-500: #808080;
-        --ion-color-step-550: #8c8c8c;
-        --ion-color-step-600: #999999;
-        --ion-color-step-650: #a6a6a6;
-        --ion-color-step-700: #b3b3b3;
-        --ion-color-step-750: #bfbfbf;
-        --ion-color-step-800: #cccccc;
-        --ion-color-step-850: #d9d9d9;
-        --ion-color-step-900: #e6e6e6;
-        --ion-color-step-950: #f2f2f2;
-
-        --ion-item-background: #000000;
-
-        --ion-card-background: #1c1c1d;
-    }
-
-    &.ios ion-modal {
-        --ion-background-color: var(--ion-color-step-100);
-        --ion-toolbar-background: var(--ion-color-step-150);
-        --ion-toolbar-border-color: var(--ion-color-step-250);
-    }
-
-    /*
+&.ios body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 0, 0, 0;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-color-step-0: #000000;
+    --ion-color-step-50: #0d0d0d;
+    --ion-color-step-100: #1a1a1a;
+    --ion-color-step-150: #262626;
+    --ion-color-step-200: #333333;
+    --ion-color-step-250: #404040;
+    --ion-color-step-300: #4d4d4d;
+    --ion-color-step-350: #595959;
+    --ion-color-step-400: #666666;
+    --ion-color-step-450: #737373;
+    --ion-color-step-500: #808080;
+    --ion-color-step-550: #8c8c8c;
+    --ion-color-step-600: #999999;
+    --ion-color-step-650: #a6a6a6;
+    --ion-color-step-700: #b3b3b3;
+    --ion-color-step-750: #bfbfbf;
+    --ion-color-step-800: #cccccc;
+    --ion-color-step-850: #d9d9d9;
+    --ion-color-step-900: #e6e6e6;
+    --ion-color-step-950: #f2f2f2;
+
+    --ion-item-background: #000000;
+
+    --ion-card-background: #1c1c1d;
+}
+
+&.ios ion-modal {
+    --ion-background-color: var(--ion-color-step-100);
+    --ion-toolbar-background: var(--ion-color-step-150);
+    --ion-toolbar-border-color: var(--ion-color-step-250);
+}
+
+/*
    * Material Design Dark Theme
    * -------------------------------------------
    */
 
-    &.md body {
-        --ion-background-color: #121212;
-        --ion-background-color-rgb: 18, 18, 18;
-
-        --ion-text-color: #ffffff;
-        --ion-text-color-rgb: 255, 255, 255;
-
-        --ion-border-color: #222222;
-
-        --ion-color-step-0: #000000;
-        --ion-color-step-50: #1e1e1e;
-        --ion-color-step-100: #2a2a2a;
-        --ion-color-step-150: #363636;
-        --ion-color-step-200: #414141;
-        --ion-color-step-250: #4d4d4d;
-        --ion-color-step-300: #595959;
-        --ion-color-step-350: #656565;
-        --ion-color-step-400: #717171;
-        --ion-color-step-450: #7d7d7d;
-        --ion-color-step-500: #898989;
-        --ion-color-step-550: #949494;
-        --ion-color-step-600: #a0a0a0;
-        --ion-color-step-650: #acacac;
-        --ion-color-step-700: #b8b8b8;
-        --ion-color-step-750: #c4c4c4;
-        --ion-color-step-800: #d0d0d0;
-        --ion-color-step-850: #dbdbdb;
-        --ion-color-step-900: #e7e7e7;
-        --ion-color-step-950: #f3f3f3;
-
-        --ion-item-background: #1e1e1e;
-
-        --ion-toolbar-background: #1f1f1f;
-
-        --ion-tab-bar-background: #1f1f1f;
-
-        --ion-card-background: #1e1e1e;
-    }
+&.md body {
+    --ion-background-color: #121212;
+    --ion-background-color-rgb: 18, 18, 18;
+
+    --ion-text-color: #ffffff;
+    --ion-text-color-rgb: 255, 255, 255;
+
+    --ion-border-color: #222222;
+
+    --ion-color-step-0: #000000;
+    --ion-color-step-50: #1e1e1e;
+    --ion-color-step-100: #2a2a2a;
+    --ion-color-step-150: #363636;
+    --ion-color-step-200: #414141;
+    --ion-color-step-250: #4d4d4d;
+    --ion-color-step-300: #595959;
+    --ion-color-step-350: #656565;
+    --ion-color-step-400: #717171;
+    --ion-color-step-450: #7d7d7d;
+    --ion-color-step-500: #898989;
+    --ion-color-step-550: #949494;
+    --ion-color-step-600: #a0a0a0;
+    --ion-color-step-650: #acacac;
+    --ion-color-step-700: #b8b8b8;
+    --ion-color-step-750: #c4c4c4;
+    --ion-color-step-800: #d0d0d0;
+    --ion-color-step-850: #dbdbdb;
+    --ion-color-step-900: #e7e7e7;
+    --ion-color-step-950: #f3f3f3;
+
+    --ion-item-background: #1e1e1e;
+
+    --ion-toolbar-background: #1f1f1f;
+
+    --ion-tab-bar-background: #1f1f1f;
+
+    --ion-card-background: #1e1e1e;
 }
+// }

src/views/HomePage.vue

@@ -8,6 +8,7 @@
                     @swiper="setSecondSwiper"
                     :controller="{ control: firstSwiper }"
                     class="mySwiper"
+                    pagination
                     :autoplay="{ delay: 3500, disableOnInteraction: false }"
                 >
                     <swiper-slide v-for="(item, index) in topBanners" :key="index">
@@ -15,7 +16,7 @@
                     </swiper-slide>
                 </swiper>
 
-                <swiper
+                <!-- <swiper
                     class="swiper-box"
                     :modules="[Controller]"
                     @swiper="setFirstSwiper"
@@ -41,7 +42,7 @@
                             限量发售
                         </div>
                     </swiper-slide>
-                </swiper>
+                </swiper> -->
             </div>
 
             <!-- 通知 -->
@@ -69,32 +70,7 @@
                         </template>
                     </van-cell>
 
-                    <div class="first" v-if="index === 0">
-                        <van-image
-                            :src="item.icon || firstImg"
-                            width="calc(100vw - 40px)"
-                            height="calc(100vw - 40px)"
-                            fit="cover"
-                            radius="4"
-                            @click="goList(item)"
-                        />
-                        <div class="first-content" v-if="!item.empty">
-                            <product-info :info="item.hotInfo"></product-info>
-                        </div>
-
-                        <div class="status hot" v-if="getStatus(item) === '抢购中'">
-                            <img src="../assets/info_icon_qianggouzhong.png" alt="" />
-                            <span>{{ $t('home.hot') }}…</span>
-                        </div>
-                        <div class="status" v-else-if="getStatus(item)">
-                            <img src="../assets/info_icon_shijian.png" alt="" />
-                            <span
-                                ><van-count-down :time="getStatus(item)" format="HH时mm分" />
-                                {{ $t('home.start') }}</span
-                            >
-                        </div>
-                    </div>
-                    <div class="second" v-else>
+                    <div class="second">
                         <van-image
                             @click="goList(item)"
                             :src="item.icon || (index == 1 ? secondImg : thirdImg)"
@@ -248,50 +224,19 @@ const getStatus = info => {
 </script>
 
 <style lang="less" scoped>
-.swiper-content {
-    padding-bottom: 6.4vw;
-}
-.swiper-box {
-    margin: 0 auto;
-    height: 25vw;
-    width: 89vw;
-    background: #112982 linear-gradient(135deg, #d700ff 0%, #3e22ff 100%);
-    box-shadow: 0px 0px 6px 0px #4a65ff;
-    border-radius: 2px;
-    --swiper-theme-color: var(--ion-color-step-0);
-    --swiper-pagination-color: var(--ion-color-step-0);
-    position: absolute;
-    top: 40vw;
-    left: 5.5vw;
-    .swiper-slide {
-        .f-col();
-        align-items: center;
-        justify-content: center;
-        .text1 {
-            font-size: 20px;
-            font-weight: bold;
-            color: var(--ion-color-step-0);
-            line-height: 28px;
-            text-shadow: 0px 0px 4px rgba(var(--ion-color-light-contrast-rgb), 0.5);
-        }
-        .text2 {
-            font-size: 12px;
-            color: var(--ion-color-step-0);
-            line-height: 17px;
-            text-shadow: 0px 0px 4px rgba(var(--ion-color-light-contrast-rgb), 0.5);
-            margin-top: 2px;
-            margin-bottom: 15px;
-        }
-    }
-
+.mySwiper {
     :deep(.swiper-pagination-bullet) {
-        background-color: var(--ion-color-step-0);
-        width: 18px;
+        background-color: var(--ion-text-color);
+        width: 12px;
         height: 2px;
         border-radius: 2px;
     }
     :deep(.swiper-pagination) {
-        bottom: calc(2.7vw + 6px);
+        bottom: 6px;
+    }
+
+    :deep(.swiper-pagination-bullet-active) {
+        width: 20px;
     }
 }
 
@@ -299,6 +244,7 @@ const getStatus = info => {
     margin: 16px 20px 14px;
     --van-notice-bar-font-size: 13px;
     border-radius: 4px;
+    --ion-text-color: rgba(255, 255, 255, 0.4);
     .bar-icon {
         width: 77px;
         height: 16px;
@@ -316,6 +262,7 @@ const getStatus = info => {
     --van-cell-background: var(--ion-background-color);
     --van-cell-horizontal-padding: 20px;
     --van-cell-text-color: var(--ion-color-step-800);
+    --van-cell-value-color: #60616d;
     .f();
     .van-cell__title {
         font-size: 16px;
@@ -356,14 +303,14 @@ const getStatus = info => {
     }
     span {
         font-size: 12px;
-        color: var(--ion-color-step-0);
+        color: #fff;
         line-height: 22px;
         margin-left: 6px;
         .f();
     }
 
     .van-count-down {
-        --van-count-down-text-color: var(--ion-color-step-0);
+        --van-count-down-text-color: #fff;
         --van-count-down-font-size: 12px;
         // margin-right: 6px;
         min-width: 55px;

src/views/ProductListPage.vue

@@ -3,9 +3,8 @@
         <ion-header>
             <ion-toolbar>
                 <ion-buttons slot="start">
-                    <ion-back-button text="" default-href="#" @click="$router.back()"></ion-back-button>
+                    <ion-back-button :text="batchInfo.name" default-href="#" @click="$router.back()"></ion-back-button>
                 </ion-buttons>
-                <ion-title>{{ batchInfo.name }}</ion-title>
                 <ion-buttons slot="end">
                     <ion-button @click="$router.push({ name: 'productSearch', query: { batchId } })">
                         <ion-icon slot="icon-only" :icon="searchOutline"></ion-icon>
@@ -42,7 +41,7 @@
 </template>
 
 <script setup>
-import productInfo from '../components/ProductInfo.vue'
+import productInfo from '../components/ProductSmallInfo.vue'
 import { ref, getCurrentInstance, onMounted, computed } from 'vue'
 import { useRoute } from 'vue-router'
 import useList from '../plugins/list'
@@ -108,11 +107,14 @@ onMounted(() => {
 }
 
 .list {
-    padding: 12px 0;
+    padding: 8px;
     .product {
-        margin: 0 16px 12px;
+        margin: 8px;
         background: var(--ion-color-step-0);
         border-radius: 4px;
+        width: calc(50vw - 24px);
+        display: inline-block;
+        overflow: hidden;
     }
 }
 
@@ -127,14 +129,14 @@ onMounted(() => {
     }
     span {
         font-size: 12px;
-        color: var(--ion-color-step-0);
+        color: #fff;
         line-height: 22px;
         margin-left: 6px;
         .f();
     }
 
     .van-count-down {
-        --van-count-down-text-color: var(--ion-color-step-0);
+        --van-count-down-text-color: #fff;
         --van-count-down-font-size: 12px;
         // margin-right: 6px;
         min-width: 55px;