换用vant

package.json

@@ -10,6 +10,7 @@
     "axios": "^0.22.0",
     "core-js": "^3.6.5",
     "dayjs": "^1.10.7",
+    "vant": "^3.3.7",
     "vue": "^3.2.16",
     "vue-axios": "^3.3.7",
     "vue-router": "^4.0.11",

src/App.vue

@@ -46,9 +46,14 @@ export default {
 <style lang="less">
 @import url('./assets/css/reset.less');
 @import url('./assets/css/iconfont.less');
-html, body, #app, .container {
+@import url('./assets/css/variable.css');
+html, body, #app {
   height: 100%;
 }
+.container {
+  min-height: 100%;
+  box-sizing: border-box;
+}
 body {
   font-family: Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Heiti SC", "MicrosoftYaHei", "WenQuanYi Micro Hei", sans-serif;
 }
@@ -59,21 +64,13 @@ body {
 .light {
   background-color: #f0eff4;
 }
+.van-dialog {
+  color: #000;
+}
 .btn-wrapper {
   text-align: center;
-  .btn {
-    border-radius: 4px;
-    border: none;
-    padding: 7px 15px;
-    font-size: 12px;
-    &.btn-primary {
-      color: #FFF;
-      background-color: #1aac19;
-    }
-    &.btn-error {
-      color: #FFF;
-      background-color: #e64240;
-    }
+  button {
+    vertical-align: middle;
   }
 }
 .text-wrapper {

src/assets/css/variable.css

@@ -0,0 +1,4 @@
+:root {
+  --van-button-default-height: 30px;
+  --van-dialog-header-padding-top: 10px;
+}

src/main.js

@@ -10,8 +10,22 @@ const service = axios.create({
   timeout: 10000
 })
 service.interceptors.response.use(response => response.data.data)
+
+import { /*ConfigProvider,*/ Button, Dialog, Field, CellGroup } from 'vant'
+import 'vant/es/button/style'
+import 'vant/es/dialog/style'
+import 'vant/es/cell-group/style'
+import 'vant/es/field/style'
+
+import './assets/css/variable.css'
+
 createApp(App)
   .use(router)
   .use(store)
   .use(VueAxios, service)
+  // .use(ConfigProvider)
+  .use(Button)
+  .use(Dialog)
+  .use(Field)
+  .use(CellGroup)
   .mount('#app')

src/views/Guide.vue

@@ -4,8 +4,8 @@
     <div class="text" v-for="(item,index) in guideText[guideIndex]" :key="index" v-text="item"></div>
   </div>
   <div class="btn-wrapper">
-    <button class="btn" @click="nextStep(-1)" v-if="guideIndex > 1" style="margin-right: 45px">上一步</button>
-    <button class="btn btn-primary" @click="nextStep(1)" v-text="btnText"></button>
+    <van-button type="default" @click="nextStep(-1)" v-if="guideIndex > 1" style="margin-right: 45px">上一步</van-button>
+    <van-button type="success" @click="nextStep(1)" v-text="btnText"></van-button>
     <div class="tip" v-show="guideIndex > 0">准备好后，点击"下一步"</div>
   </div>
 </div>

src/views/Introduce.vue

@@ -10,13 +10,13 @@
       <div class="card-item" :style="{backgroundColor: cardType.rgb}" v-for="cardType in cardTypes" :key="cardType.code"></div>
     </div>
     <div class="btn-wrapper" style="position: absolute;top: 154px;width: 100%;">
-      <button class="btn btn-primary" @click="showCard" >查收今天卡片</button>
+      <van-button type="success" @click="showCard" >查收今天卡片</van-button>
     </div>
   </template>
   <div class="btn-wrapper" :style="{visibility: isShowCard ? 'visible' : 'hidden'}" style="margin: 20px 0 50px 0">
-    <button class="btn btn-error">保存</button>
-    <button class="btn" style="margin: 0 30px">树洞</button>
-    <button class="btn btn-primary" @click="nextQuestion">心灵问句({{ questionIndex + 1 }}/{{ questions.length }})</button>
+    <van-button type="danger" >保存</van-button>
+    <van-button type="default" @click="treeHoleShow = true" style="margin: 0 30px">树洞</van-button>
+    <van-button type="success" @click="nextQuestion">心灵问句({{ questionIndex + 1 }}/{{ questions.length }})</van-button>
   </div>
   <div class="question center" v-if="questionIndex !== -1">{{ questions[questionIndex] }}</div>
   <div class="center tip" v-show="questionIndex === -1">
@@ -36,6 +36,21 @@
       </div>
     </div>
   </div>
+  <van-dialog v-model:show="treeHoleShow" title="记录心·晴" confirm-button-text="存进树洞" cancel-button-text="算了" show-cancel-button @confirm="saveToTreeHole" @closed="treeHoleClosed">
+    <template #default>
+      <van-cell-group inset>
+        <van-field
+          v-model="treeHoleContent"
+          rows="5"
+          autosize
+          type="textarea"
+          maxlength="100"
+          placeholder="只能保存一条呦"
+          show-word-limit
+        />
+      </van-cell-group>
+    </template>
+  </van-dialog>
 </div>
 </template>
 
@@ -55,7 +70,9 @@ export default {
         '你将采取怎样的行动？'
       ],
       questionIndex: -1, // 展示的心灵问句
-      currentCard: null // 当前卡片信息
+      currentCard: null, // 当前卡片信息
+      treeHoleShow: false, // 树洞
+      treeHoleContent: localStorage.getItem('tree_hole')
     }
   },
   async created() {
@@ -95,6 +112,12 @@ export default {
       } else {
         this.questionIndex++
       }
+    },
+    saveToTreeHole() {
+      localStorage.setItem('tree_hole', this.treeHoleContent)
+    },
+    treeHoleClosed() {
+      this.treeHoleContent = localStorage.getItem('tree_hole')
     }
   }
 }

yarn.lock

@@ -965,6 +965,11 @@
   resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
+"@popperjs/core@^2.9.2":
+  version "2.11.0"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.0.tgz#6734f8ebc106a0860dff7f92bf90df193f0935d7"
+  integrity sha512-zrsUxjLOKAzdewIDRWy9nsV1GQsKBCWaGwsZQlCgr6/q+vjyZhFgqedLfFBuI9anTPEUT4APq9Mu0SZBTzIcGQ==
+
 "@soda/friendly-errors-webpack-plugin@^1.7.1":
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/@soda/friendly-errors-webpack-plugin/-/friendly-errors-webpack-plugin-1.8.1.tgz#4d4fbb1108993aaa362116247c3d18188a2c6c85"
@@ -1139,6 +1144,23 @@
     anymatch "^3.0.0"
     source-map "^0.6.0"
 
+"@vant/icons@^1.7.1":
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/@vant/icons/-/icons-1.7.3.tgz#e51b46065cfde445617401ebe309a33b62a29725"
+  integrity sha512-tW4EqzxN4kXw1rnlnQJQHofEifPbt/gECOWiibomht8QLyvoGuE4iUmDFS288dJ07ZjuTy0bhdABj0SENo2fmQ==
+
+"@vant/popperjs@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@vant/popperjs/-/popperjs-1.1.0.tgz#b4edee5bbfa6fb18705986e313d4fd5f17942a0f"
+  integrity sha512-8MD1gz146awV/uPxYjz4pet22f7a9YVKqk7T+gFkWFwT9mEcrIUEg/xPrdOnWKLP9puXyYtm7oVfSDSefZ/p/w==
+  dependencies:
+    "@popperjs/core" "^2.9.2"
+
+"@vant/use@^1.3.4":
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/@vant/use/-/use-1.3.4.tgz#f99482d63682973a2775aa5c1a9cf906862a4f71"
+  integrity sha512-XvZkPCjcmEBhD+T3vB68thOG6P9jazld6aBTMenhbAQd4FT/x9AiKIWPJx4MvhYoSIWt7fju6K01XTJldWs1hw==
+
 "@vue/babel-helper-vue-jsx-merge-props@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@vue/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-1.2.1.tgz#31624a7a505fb14da1d58023725a4c5f270e6a81"
@@ -7824,6 +7846,15 @@ validate-npm-package-license@^3.0.1:
     spdx-correct "^3.0.0"
     spdx-expression-parse "^3.0.0"
 
+vant@^3.3.7:
+  version "3.3.7"
+  resolved "https://registry.yarnpkg.com/vant/-/vant-3.3.7.tgz#57e97972148e173b88254402c83191cc6148fdbf"
+  integrity sha512-xDNqdBvBAELwkkC4QqzXvcqQJMCP6l0faYDH0aU1dfkIm7Muc+7gqyHMVhPKPFcDGBP33ilZd0Vg2+JoIQWitw==
+  dependencies:
+    "@vant/icons" "^1.7.1"
+    "@vant/popperjs" "^1.1.0"
+    "@vant/use" "^1.3.4"
+
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"