种树游戏

game/README.md

@@ -5,19 +5,7 @@
 
 ## 笔记
 
-## 管美术要：
-底部按钮背景图
-
-底部数字字体文件
-
-翻翻看 card不同种类
-
-
-
-
-
-
-
+## 还缺资源：
 
 
 

game/package.json

@@ -16,9 +16,10 @@
     "lodash": "^4.17.21",
     "mitt": "^3.0.0",
     "v-viewer": "^3.0.11",
+    "vant": "^4.8.2",
     "viewerjs": "^1.11.6",
-    "vue-router": "^4.0.3",
     "vue": "^3.2.13",
+    "vue-router": "^4.0.3",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

game/src/App.vue

@@ -49,10 +49,10 @@ html, body {
 //   font-family: 'Source Han Serif CN';
 //   src: url('@/assets/style/SourceHanSerifCN-Regular.otf');
 // }
-// @font-face {
-//   font-family: 'Source Han Serif CN-Bold';
-//   src: url('@/assets/style/SourceHanSerifCN-Bold.otf');
-// }
+@font-face {
+  font-family: 'heiti';
+  src: url('@/assets/style/Adobe Heiti Std.otf');
+}
 // i {
 //   font-style: italic;
 // }
@@ -88,10 +88,10 @@ html, body {
 }
 
 .fade-in-out-enter-active {
-  transition: opacity 2s;
+  transition: opacity 1s;
 }
 .fade-in-out-leave-active {
-  transition: opacity 2s;
+  transition: opacity 1s;
   pointer-events: none;
 }
 .fade-in-out-enter-from {

game/src/components/PairUpOver.vue

@@ -17,6 +17,7 @@
       class="replay"
       @click="emit('replay')"
     >
+      <div class="highlight" />
       重新开始
     </button>
   </div>
@@ -80,7 +81,7 @@ const emit = defineEmits(['replay'])
     white-space: pre;
     >span.number{
       font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-family: heiti;
       font-weight: bold;
       color: #EFB622;
       line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -101,7 +102,7 @@ const emit = defineEmits(['replay'])
     white-space: pre;
     >span.number{
       font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-family: heiti;
       font-weight: bold;
       color: #EFB622;
       line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -127,6 +128,17 @@ const emit = defineEmits(['replay'])
     line-height: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     -webkit-text-stroke: calc(1 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #4E3933;
     padding-bottom: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >.highlight{
+      position: absolute;
+      top: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      border-radius: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background: #FFFFFF;
+      filter: blur(calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')));
+      transform: rotateZ(-27deg);
+    }
   }
 }
 </style>

game/src/main.js

@@ -9,6 +9,8 @@ import clickOutside from "@/directives/v-click-outside.js"
 import mitt from "mitt"
 import 'viewerjs/dist/viewer.css'
 import VueViewer from 'v-viewer'
+// import { showDialog  } from 'vant';
+import 'vant/lib/index.css'
 
 console.log(`version: ${process.env.VUE_APP_VERSION}`)
 console.log(`Build time: ${process.env.VUE_APP_UPDATE_TIME}`)
@@ -74,6 +76,7 @@ app.use(store)
   .use(router)
   .use(clickOutside)
   .use(VueViewer)
+  // .use(showDialog )
   // .component('HotSpot', HotSpot)
   .mount('#app')
 

game/src/router/index.js

@@ -1,5 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import HomeView from '../views/HomeView.vue'
+import PlantTree from '../views/PlantTree.vue'
 import PairUp from '../views/PairUp.vue'
 // import store from '@/store/index.js'
 
@@ -10,6 +11,11 @@ const routes = [
     component: HomeView,
   },
   {
+    path: '/plant-tree',
+    name: 'PlantTree',
+    component: PlantTree,
+  },
+  {
     path: '/pair-up',
     name: 'PairUp',
     component: PairUp,

game/src/views/PairUp.vue

@@ -399,7 +399,7 @@ function onClickCard(card, cardIdx) {
   >.common-info-group{
     position: absolute;
     left: 50%;
-    bottom: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    bottom: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
     transform: translate(-50%, 0);
     display: flex;
     gap: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
@@ -408,15 +408,19 @@ function onClickCard(card, cardIdx) {
       display: flex;
       justify-content: space-between;
       align-items: flex-end;
-      width: calc(145 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-      height: calc(31 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-bottom: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       padding-left: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
       padding-right: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background: #BB9565;
+      border-radius: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      box-shadow: #78511F calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0 0;
       >.icon{
       }
       >.number{
         font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
-        font-family: Inter, Inter;
+        font-family: heiti;
         font-weight: 400;
         color: #FFFFFF;
         line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));

game/src/views/PlantTree.vue

@@ -0,0 +1,410 @@
+<template>
+  <div class="game-view">
+    <img
+      class="title"
+      src="@/assets/images/plant-tree-title.png"
+      alt=""
+      draggable="false"
+    >
+    <!-- 左上角按钮 -->
+    <div class="btn-group">
+      <button
+        class="return-home"
+        @click="onClickReturnHome"
+      />
+      <button class="game-rule" />
+    </div>
+    <!-- 树苗 -->
+    <transition
+      name="fade-in-out"
+      mode="out-in"
+    >
+      <img
+        v-if="currentStepIdx === 0 || currentStepIdx === 1"
+        class="tree"
+        :style="{
+          width: `calc(108 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
+        }"
+        src="@/assets/images/plant-tree-tree-1.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        v-else-if="currentStepIdx === 2 || currentStepIdx === 3"
+        class="tree"
+        :style="{
+          width: `calc(242 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
+        }"
+        src="@/assets/images/plant-tree-tree-2.png"
+        alt=""
+        draggable="false"
+      >
+      <img
+        v-else-if="currentStepIdx === 4"
+        class="tree"
+        :style="{
+          width: `calc(380 / ${windowSizeWhenDesignForRef} * ${windowSizeInCssForRef})`,
+        }"
+        :src="require(`@/assets/images/plant-tree-tree-3.png`)"
+        alt=""
+        draggable="false"
+      >
+    </transition>
+    <!-- 进度条 -->
+    <div class="progress-wrapper">
+      <div
+        class="current-progress"
+        :style="{
+          width: `${stepList[currentStepIdx].progress}%`,
+        }"
+      />
+      <div
+        v-show="progress >= 5"
+        class="highlight"
+      />
+    </div>
+    <!-- 提示 -->
+    <div
+      class="tip"
+      v-html="stepList[currentStepIdx].tip()"
+    />
+    <!-- 工具栏 -->
+    <div
+      v-show="!isOver"
+      class="tool-bar"
+    >
+      <button
+        v-for="tool in toolList"
+        :key="tool.toolIdx"
+        @click="onClickTool(tool.toolIdx)"
+      >
+        <img
+          class=""
+          :src="require(`@/assets/images/plant-tree-tool-${tool.toolIdx + 1}.png`)"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </div>
+    <!-- 游戏结束后按钮 -->
+    <button
+      v-show="isOver"
+      class="game-over-confirm"
+    >
+      返回首页
+    </button>
+    <!-- 底部信息栏 -->
+    <div
+      v-show="!isOver"
+      class="common-info-group"
+    >
+      <div class="info-item bonus-point">
+        <img
+          class="icon"
+          src="@/assets/images/icon_bonus_point.png"
+          alt=""
+          draggable="false"
+        >
+        <span class="number">{{ bonusPoint }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import useSizeAdapt from "@/useFunctions/useSizeAdapt"
+import { ref, computed, watch, onMounted, onBeforeUnmount, nextTick } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+import dayjs from 'dayjs'
+import { showDialog } from 'vant'
+import { shuffle } from 'lodash'
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(390, 752)
+
+function onClickReturnHome() {
+  router.push({
+    name: 'HomeView',
+  })
+}
+
+/**
+ * 游戏规则
+ */
+const bonusPoint = ref(0)
+const toolList = ref([
+  {
+    toolIdx: 0,
+  },
+  {
+    toolIdx: 1,
+  },
+  {
+    toolIdx: 2,
+  },
+  {
+    toolIdx: 3,
+  },
+])
+toolList.value = shuffle(toolList.value)
+const stepList = [
+  {
+    tip: () => {
+      return '为树苗浇水'
+    },
+    progress: 0,
+    toolIdx: 1,
+  },
+  {
+    tip: () => {
+      return '为树苗施肥'
+    },
+    progress: 25,
+    toolIdx: 3,
+  },
+  {
+    tip: () => {
+      return '为树苗除虫'
+    },
+    progress: 50,
+    toolIdx: 2,
+  },
+  {
+    tip: () => {
+      return '请修剪枝干'
+    },
+    progress: 75,
+    toolIdx: 0,
+  },
+  {
+    tip: () => {
+      return `您已完成种植，获得<span class="number">${bonusPoint.value}</span>积分<br>请明天再来`
+    },
+    progress: 100,
+  },
+]
+const currentStepIdx = ref(0)
+const lastPlayTimeStr = localStorage.getItem('plant-tree-last-time')
+if (process.env.VUE_APP_CLI_MODE !== 'dev') {
+  if (lastPlayTimeStr) {
+    const lastPlayTime = new Date(Number(lastPlayTimeStr))
+    const lastPlayYear = lastPlayTime.getFullYear()
+    const lastPlayMonth = lastPlayTime.getMonth()
+    const lastPlayDay = lastPlayTime.getDay()
+
+    const currentTime = new Date()
+    const currentYear = currentTime.getFullYear()
+    const currentMonth = currentTime.getMonth()
+    const currentDay = currentTime.getDay()
+
+    if (lastPlayYear === currentYear && lastPlayMonth === currentMonth && lastPlayDay === currentDay) {
+      currentStepIdx.value = 4
+    }
+  }
+}
+const isOver = computed(() => {
+  return currentStepIdx.value === stepList.length - 1
+})
+watch(isOver, (vNew) => {
+  if (vNew) {
+    localStorage.setItem('plant-tree-last-time', (new Date()).getTime())
+  }
+})
+function onClickTool(toolIdx) {
+  if (toolIdx !== stepList[currentStepIdx.value].toolIdx ) {
+    showDialog({
+      message: '请选择正确的道具',
+      theme: 'round-button',
+    })
+  } else {
+    if (currentStepIdx.value < stepList.length - 1) {
+      currentStepIdx.value++
+      bonusPoint.value += 10
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.game-view{
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/plant-tree-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center bottom;
+  >img.title{
+    position: absolute;
+    left: 50%;
+    top: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    width: calc(173 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+  }
+  >.btn-group{
+    position: absolute;
+    top: calc(36 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    right: calc(12 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    display: flex;
+    flex-direction: column;
+    gap: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >button.return-home{
+      background-image: url(@/assets/images/icon_home_dark.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >button.game-rule{
+      background-image: url(@/assets/images/icon_rules_dark.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      width: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(40 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+  }
+  >img.tree{
+    position: absolute;
+    left: 50%;
+    bottom: calc(260 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+  }
+  >.progress-wrapper{
+    position: absolute;
+    left: 50%;
+    bottom: calc(230 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    background-image: url(@/assets/images/plant-tree-progress-frame.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    width: calc(185 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-left: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-top: calc(4.5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >.current-progress{
+      height: 100%;
+      background: linear-gradient(181deg, #EDC540 0%, #FFF170 100%);
+      box-shadow: inset 0px 1px 1px 0px #F7E2A6;
+      border-radius: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    }
+    >.highlight{
+      position: absolute;
+      top: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      left: calc(9 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      width: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background: #FFFFFF;
+    }
+  }
+  >.tip{
+    position: absolute;
+    left: 50%;
+    bottom: calc(200 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 50%);
+    font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 400;
+    color: #3E5851;
+    line-height: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    white-space: pre;
+    text-align: center;
+    :deep(>.number){
+      font-size: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: heiti;
+      font-weight: 400;
+      color: #FFFFFF;
+      line-height: 1.5;
+      margin-left: 0.2em;
+      margin-right: 0.2em;
+    }
+  }
+  >.tool-bar{
+    position: absolute;
+    left: 50%;
+    bottom: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 50%);
+    display: flex;
+    gap: calc(7 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >button{
+      width: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(85 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  >button.game-over-confirm{
+    position: absolute;
+    left: 50%;
+    bottom: calc(120 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 50%);
+    width: calc(300 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    height: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: linear-gradient(180deg, #F6D340 0%, #EFB622 100%);
+    box-shadow: 0px calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0px rgba(0,0,0,0.25);
+    border-radius: calc(35 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    opacity: 1;
+    border: calc(6 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) solid #FFFFFF;
+    font-size: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    font-family: Source Han Sans SC, Source Han Sans SC;
+    font-weight: 800;
+    color: #FFFFFF;
+    line-height: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    -webkit-text-stroke: calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) #4E3933;
+  }
+  >.common-info-group{
+    position: absolute;
+    left: 50%;
+    bottom: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    transform: translate(-50%, 0);
+    display: flex;
+    gap: calc(11 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >.info-item{
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      width: calc(143 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-left: calc(5 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-right: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      padding-bottom: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      background: #6ABC63;
+      border-radius: calc(14 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      box-shadow: #2E9A4F calc(2 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef')) 0 0;
+      >.icon{
+      }
+      >.number{
+        font-size: calc(20 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: heiti;
+        font-weight: 400;
+        color: #FFFFFF;
+        line-height: calc(23 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+    >.bonus-point{
+      >.icon{
+        width: calc(46 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        height: calc(41 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+}
+</style>

game/yarn.lock

@@ -1374,6 +1374,16 @@
   dependencies:
     "@types/node" "*"
 
+"@vant/popperjs@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.npmmirror.com/@vant/popperjs/-/popperjs-1.3.0.tgz#e0eff017124b5b2352ef3b36a6df06277f4400f2"
+  integrity sha512-hB+czUG+aHtjhaEmCJDuXOep0YTZjdlRR+4MSmIFnkCQIxJaXLQdSsR90XWvAI2yvKUI7TCGqR8pQg2RtvkMHw==
+
+"@vant/use@^1.6.0":
+  version "1.6.0"
+  resolved "https://registry.npmmirror.com/@vant/use/-/use-1.6.0.tgz#237df3091617255519552ca311ffdfea9de59001"
+  integrity sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.4.0":
   version "1.4.0"
   resolved "https://registry.npmmirror.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.4.0.tgz#8d53a1e21347db8edbe54d339902583176de09f2"
@@ -1715,6 +1725,11 @@
   resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.3.tgz#01d54b32b9796c85c853c670d9395a813f23a8c2"
   integrity sha512-rIwlkkP1n4uKrRzivAKPZIEkHiuwY5mmhMJ2nZKCBLz8lTUlE73rQh4n1OnnMurXt1vcUNyH4ZPfdh8QweTjpQ==
 
+"@vue/shared@^3.0.0":
+  version "3.4.4"
+  resolved "https://registry.npmmirror.com/@vue/shared/-/shared-3.4.4.tgz#26e4e62a5fbfb39c25e9e54d21eeb852f1c83a7a"
+  integrity sha512-abSgiVRhfjfl3JALR/cSuBl74hGJ3SePgf1mKzodf1eMWLwHZbfEGxT2cNJSsNiw44jEgrO7bNkhchaWA7RwNw==
+
 "@vue/vue-loader-v15@npm:vue-loader@^15.9.7":
   version "15.11.1"
   resolved "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.11.1.tgz#dee91169211276ed43c5715caef88a56b1f497b0"
@@ -6078,6 +6093,15 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vant@^4.8.2:
+  version "4.8.2"
+  resolved "https://registry.npmmirror.com/vant/-/vant-4.8.2.tgz#5257d2d9caf66595ee702eb6badc4f6cd28d8958"
+  integrity sha512-jNxpdABi8B05jxXqKChoaQYgb4fYdab8XlCBBOp85Gt75au+Fixe+oTmjCoRN75NWYiVJF8Bah7CrnFyMMpR6Q==
+  dependencies:
+    "@vant/popperjs" "^1.3.0"
+    "@vant/use" "^1.6.0"
+    "@vue/shared" "^3.0.0"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmmirror.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"