.

src/components/ProductInfo.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="product-info">
-        <van-image width="104" height="104" fit="cover" src="https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg" />
+        <van-image width="104" height="104" fit="cover" :src="require('@assets/c1.png')" />
         <div class="content">
             <div class="text1 van-ellipsis">名称名称名称名称名称名称名称名称名称名称名称名称…</div>
             <div class="badges">

src/locales/zh.json

@@ -2,5 +2,8 @@
   "zhong-ji-chang": "中级场",
   "chu-ji-chang": "初级场",
   "xian-liang-fa-shou": "限量发售",
-  "gai-nian-chao-liu-cang-pin": "概念潮流藏品"
+  "gai-nian-chao-liu-cang-pin": "概念潮流藏品",
+  "wu-lun-wo-men-neng-huo-duo-jiu-wo-men-neng-gou-xiang-shou-de-zhi-you-wu-fa-fen-ge-de-ci-ke-ci-wai-bie-wu-qi-ta": "无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。",
+  "quan-bu": "全部",
+  "kai-qi": "开启"
 }

src/views/Home.vue

@@ -48,7 +48,11 @@
             left-icon="volume-o"
             background="#fff"
             color="#000"
-            text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。"
+            :text="
+                $t(
+                    'wu-lun-wo-men-neng-huo-duo-jiu-wo-men-neng-gou-xiang-shou-de-zhi-you-wu-fa-fen-ge-de-ci-ke-ci-wai-bie-wu-qi-ta'
+                )
+            "
         >
             <template #left-icon>
                 <img class="bar-icon" src="@assets/home_icon_redian.png" alt="" />
@@ -57,7 +61,7 @@
         </van-notice-bar>
 
         <!-- 初级场 -->
-        <van-cell title="$t('chu-ji-chang')" value="全部" :border="false" is-link />
+        <van-cell :title="$t('chu-ji-chang')" :value="$t('quan-bu')" :border="false" is-link />
 
         <div class="first">
             <van-image
@@ -71,11 +75,34 @@
                 <product-info></product-info>
             </div>
 
-            <div class="status hot"></div>
+            <div class="status hot">
+                <img src="@assets/info_icon_qianggouzhong.png" alt="" />
+                <span>火爆抢购中…</span>
+            </div>
         </div>
 
         <!-- 中级场 -->
-        <van-cell title="$t('zhong-ji-chang')" value="全部" :border="false" is-link />
+        <van-cell :title="$t('zhong-ji-chang')" :value="$t('quan-bu')" :border="false" is-link />
+
+        <div class="second">
+            <van-image :src="require('@assets/bg2.png')" fit="cover" />
+
+            <div class="status">
+                <img src="@assets/info_icon_shijian.png" alt="" />
+                <span>15:00 {{ $t('kai-qi') }}</span>
+            </div>
+        </div>
+
+        <div class="tools">
+            <div class="tool">
+                <img src="@assets/home_icon_pingtaixieyi.png" alt="" />
+                <span>平台协议</span>
+            </div>
+            <div class="tool">
+                <img src="@assets/home_icon_liucheng.png" alt="" />
+                <span>使用教程</span>
+            </div>
+        </div>
     </div>
 </template>
 
@@ -207,4 +234,60 @@ export default {
         overflow: hidden;
     }
 }
+
+.status {
+    .flex();
+    padding: 2px 6px;
+    background: var(--green);
+    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    position: absolute;
+    top: 18px;
+    left: 18px;
+    img {
+        width: 18px;
+        height: 18px;
+    }
+    span {
+        font-size: 12px;
+        color: #ffffff;
+        line-height: 22px;
+        margin-left: 6px;
+    }
+
+    &.hot {
+        background: var(--red);
+    }
+}
+
+:has(.status) {
+    position: relative;
+}
+
+.second {
+    margin: 4px 20px 14px;
+    border-radius: 4px;
+    overflow: hidden;
+}
+
+.tools {
+    .flex();
+    padding: 14px 20px 30px;
+    .tool {
+        width: 50%;
+        .flex();
+        justify-content: center;
+        height: 58px;
+        background: #efefef;
+        border-radius: 4px;
+        img {
+            width: 22px;
+            height: 22px;
+            margin-right: 6px;
+        }
+    }
+    .tool + .tool {
+        margin-left: 15px;
+    }
+}
 </style>

src/views/Index.vue

@@ -1,6 +1,6 @@
 <template>
     <div class="index">
-        <router-view v-slot="{ Component }">
+        <router-view v-slot="{ Component }" class="index-container">
             <keep-alive :include="keeps">
                 <component :is="Component" class="container" />
             </keep-alive>
@@ -63,6 +63,7 @@ export default {
 .container {
     box-sizing: border-box;
     flex-grow: 1;
+    padding-bottom: 100px;
 }
 
 /deep/.van-tabbar-item__icon img {