登录前后端联调对接

Yi.Vue3.x.Vant/package-lock.json

@@ -10,9 +10,11 @@
       "dependencies": {
         "axios": "^1.1.2",
         "json-bigint": "^1.0.0",
+        "pinia": "^2.0.23",
         "vant": "^3.6.3",
         "vue": "^3.2.37",
-        "vue-router": "^4.1.5"
+        "vue-router": "^4.1.5",
+        "vuex": "^4.0.2"
       },
       "devDependencies": {
         "@types/json-bigint": "^1.0.1",
@@ -279,9 +281,9 @@
       }
     },
     "node_modules/@vue/devtools-api": {
-      "version": "6.4.3",
+      "version": "6.4.4",
-      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.4.tgz",
-      "integrity": "sha512-9WCRwdROJvWcHAdyrR7SZMM/qUvllDZnpndHXokThkUsjnJ2xe4/pvsH9FZrxFe22L+JmDKczL79HjLJ7DK9rg=="
+      "integrity": "sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw=="
     },
     "node_modules/@vue/reactivity": {
       "version": "3.2.40",
@@ -1162,6 +1164,56 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.0.23",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.23.tgz",
+      "integrity": "sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.4.4",
+        "vue-demi": "*"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.2.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.13.11",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.17",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.17.tgz",
@@ -1351,7 +1403,7 @@
       "version": "4.8.4",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.8.4.tgz",
       "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
-      "dev": true,
+      "devOptional": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -1513,6 +1565,17 @@
         "typescript": "*"
       }
     },
+    "node_modules/vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      },
+      "peerDependencies": {
+        "vue": "^3.0.2"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -1748,9 +1811,9 @@
       }
     },
     "@vue/devtools-api": {
-      "version": "6.4.3",
+      "version": "6.4.4",
-      "resolved": "https://registry.npmmirror.com/@vue/devtools-api/-/devtools-api-6.4.3.tgz",
+      "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.4.tgz",
-      "integrity": "sha512-9WCRwdROJvWcHAdyrR7SZMM/qUvllDZnpndHXokThkUsjnJ2xe4/pvsH9FZrxFe22L+JmDKczL79HjLJ7DK9rg=="
+      "integrity": "sha512-Ku31WzpOV/8cruFaXaEZKF81WkNnvCSlBY4eOGtz5WMSdJvX1v1WWlSMGZeqUwPtQ27ZZz7B62erEMq8JDjcXw=="
     },
     "@vue/reactivity": {
       "version": "3.2.40",
@@ -2308,6 +2371,23 @@
       "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
+    "pinia": {
+      "version": "2.0.23",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.23.tgz",
+      "integrity": "sha512-N15hFf4o5STrxpNrib1IEb1GOArvPYf1zPvQVRGOO1G1d74Ak0J0lVyalX/SmrzdT4Q0nlEFjbURsmBmIGUR5Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.4.4",
+        "vue-demi": "*"
+      },
+      "dependencies": {
+        "vue-demi": {
+          "version": "0.13.11",
+          "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+          "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+          "requires": {}
+        }
+      }
+    },
     "postcss": {
       "version": "8.4.17",
       "resolved": "https://registry.npmmirror.com/postcss/-/postcss-8.4.17.tgz",
@@ -2416,7 +2496,7 @@
       "version": "4.8.4",
       "resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.8.4.tgz",
       "integrity": "sha512-QCh+85mCy+h0IGff8r5XWzOVSbBO+KfeYrMQh7NJ58QujwcE22u+NUSmUxqF+un70P9GXKxa2HCNiTTMJknyjQ==",
-      "dev": true
+      "devOptional": true
     },
     "unplugin": {
       "version": "0.9.6",
@@ -2512,6 +2592,14 @@
         "@volar/vue-typescript": "0.40.13"
       }
     },
+    "vuex": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.2.tgz",
+      "integrity": "sha512-M6r8uxELjZIK8kTKDGgZTYX/ahzblnzC4isU1tpmEuOIIKmV+TRdc+H4s8ds2NuZ7wpUTdGRzJRtoj+lI+pc0Q==",
+      "requires": {
+        "@vue/devtools-api": "^6.0.0-beta.11"
+      }
+    },
     "webpack-sources": {
       "version": "3.2.3",
       "resolved": "https://registry.npmmirror.com/webpack-sources/-/webpack-sources-3.2.3.tgz",

Yi.Vue3.x.Vant/package.json

@@ -11,9 +11,11 @@
   "dependencies": {
     "axios": "^1.1.2",
     "json-bigint": "^1.0.0",
+    "pinia": "^2.0.23",
     "vant": "^3.6.3",
     "vue": "^3.2.37",
-    "vue-router": "^4.1.5"
+    "vue-router": "^4.1.5",
+    "vuex": "^4.0.2"
   },
   "devDependencies": {
     "@types/json-bigint": "^1.0.1",

Yi.Vue3.x.Vant/src/api/login.ts

@@ -0,0 +1,59 @@
+import myaxios from '@/utils/myaxios.ts'
+
+// 登录方法
+export function login(username:string, password:string, code:string, uuid:string) {
+  const data = {
+    username,
+    password,
+    code,
+    uuid
+  }
+  return myaxios({
+    url: '/account/login',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
+// 注册方法
+export function register(data:any) {
+  return myaxios({
+    url: '/register',
+    headers: {
+      isToken: false
+    },
+    method: 'post',
+    data: data
+  })
+}
+
+// 获取用户详细信息
+export function getInfo() {
+  return myaxios({
+    url: '/account/getUserAllInfo',
+    method: 'get'
+  })
+}
+
+// 退出方法
+export function logout() {
+  return myaxios({
+    url: '/account/logout',
+    method: 'post'
+  })
+}
+
+// 获取验证码
+export function getCodeImg() {
+  return myaxios({
+    url: '/account/captchaImage',
+    headers: {
+      isToken: false
+    },
+    method: 'get',
+    timeout: 20000
+  })
+}

Yi.Vue3.x.Vant/src/main.ts

@@ -2,8 +2,11 @@ import { createApp } from 'vue'
 import './style.css'
 import 'vant/es/image-preview/style';
 import router from './router'
+import store from './store'
+import './permission'
 import App from './App.vue'
 
 const app=createApp(App)
 app.use(router)
+app.use(store)
 app.mount('#app');

Yi.Vue3.x.Vant/src/permission.ts

@@ -0,0 +1,67 @@
+import router from './router'
+// import { ElMessage } from 'element-plus'
+// import NProgress from 'nprogress'
+// import 'nprogress/nprogress.css'
+import { getToken } from '@/utils/auth'
+// import { isHttp } from '@/utils/validate'
+// import { isRelogin } from '@/utils/request'
+import useUserStore from '@/store/modules/user'
+// import useSettingsStore from '@/store/modules/settings'
+// import usePermissionStore from '@/store/modules/permission'
+
+// NProgress.configure({ showSpinner: false });
+
+const whiteList = ['/square', '/auth-redirect', '/bind', '/register'];
+
+router.beforeEach((to, from, next) => {
+  // NProgress.start()
+  if (getToken()) {
+    // to.meta.title && useSettingsStore().setTitle(to.meta.title)
+    /* has token*/
+    if (to.path === '/square') {
+      next({ path: '/' })
+      // NProgress.done()
+    } else {
+      useUserStore().getInfo();
+      next()
+      // if (useUserStore().roles.length === 0)
+      //  {
+      //   // isRelogin.show = true
+      //   // 判断当前用户是否已拉取完user_info信息
+      //   useUserStore().getInfo().then(() => {
+      //     // isRelogin.show = false
+      //     next({ ...to, replace: true }) // hack方法 确保addRoutes已完成
+      //     // usePermissionStore().generateRoutes().then(accessRoutes => {
+      //     //   // 根据roles权限生成可访问的路由表
+      //     //   accessRoutes.forEach(route => {
+      //     //     if (!isHttp(route.path)) {
+      //     //       router.addRoute(route) // 动态添加可访问路由表
+      //     //     }
+      //     //   })
+          
+      //     // })
+      //   }).catch(err => {
+      //     useUserStore().logOut().then(() => {
+      //       // ElMessage.error(err)
+      //       next({ path: '/' })
+      //     })
+      //   })
+      // } else {
+      //   next()
+      // }
+    }
+  } else {
+    // 没有token
+    if (whiteList.indexOf(to.path) !== -1) {
+      // 在免登录白名单，直接进入
+      next()
+    } else {
+      next(`/square?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+      // NProgress.done()
+    }
+  }
+})
+
+router.afterEach(() => {
+  // NProgress.done()
+})

Yi.Vue3.x.Vant/src/store/index.ts

@@ -0,0 +1,4 @@
+import { createPinia } from 'pinia'
+const store = createPinia()
+
+export default store

Yi.Vue3.x.Vant/src/store/modules/user.ts

@@ -0,0 +1,80 @@
+import { login, logout, getInfo } from '@/api/login'
+import { getToken, setToken, removeToken } from '@/utils/auth'
+// import defAva from '@/assets/images/profile.jpg'
+import {defineStore} from 'pinia'
+const useUserStore = defineStore(
+  'user',
+  {
+    state: () => ({
+      token: getToken(),
+      name: '',
+      avatar: '',
+      roles: [],
+      permissions: []
+    }),
+    actions: {
+      // 登录
+      login(userInfo) {
+        const username = userInfo.username.trim()
+        const password = userInfo.password
+        const code = userInfo.code
+        const uuid = userInfo.uuid
+        return new Promise((resolve, reject) => {
+       
+          login(username, password, code, uuid).then(res => {
+            setToken(res.data.token);
+            this.token = res.data.token;
+            resolve();
+          }).catch(error => {
+            reject(error)
+          })
+        })
+      },
+      // 获取用户信息
+      getInfo() {
+        return new Promise((resolve, reject) => {
+          getInfo().then(response => {
+            const res=response.data;
+            const user = res.user
+            // const avatar = (user.avatar == "" || user.avatar == null) ? defAva : import.meta.env.VITE_APP_BASE_API + user.avatar;
+    
+            if (res.roleCodes && res.roleCodes.length > 0) { // 验证返回的roles是否是一个非空数组
+              this.roles = res.roleCodes
+              this.permissions = res.permissionCodes
+              // this.roles = ["admin"];
+              // this.permissions=["*:*:*"]
+
+            } else {
+              this.roles = ['ROLE_DEFAULT']
+            }
+            // this.roles = ["admin"];
+            // this.permissions=["*:*:*"]
+            this.name = user.userName
+            this.avatar = avatar;
+            resolve(res)
+          }).catch(error => {
+            reject(error)
+          })
+
+
+
+        })
+      },
+      // 退出系统
+      logOut() {
+        return new Promise((resolve, reject) => {
+          logout(this.token).then(() => {
+            this.token = ''
+            this.roles = []
+            this.permissions = []
+            removeToken()
+            resolve()
+          }).catch(error => {
+            reject(error)
+          })
+        })
+      }
+    }
+  })
+
+export default useUserStore

Yi.Vue3.x.Vant/src/utils/auth.ts

@@ -0,0 +1,13 @@
+const TokenKey = 'Admin-Token'
+
+export function getToken() {
+  return localStorage.getItem(TokenKey)
+}
+
+export function setToken(token:string) {
+  return localStorage.setItem(TokenKey, token)
+}
+
+export function removeToken() {
+  return localStorage.removeItem(TokenKey)
+}

Yi.Vue3.x.Vant/src/utils/myaxios.ts

@@ -2,6 +2,7 @@ import axios from 'axios'
 // import store from '../store/index'
 // import vm from '../main'
 import JsonBig from 'json-bigint'
+import { getToken } from '@/utils/auth'
 // import VuetifyDialogPlugin from 'vuetify-dialog/nuxt/index';
 const myaxios = axios.create({
         // baseURL:'/'// 
@@ -20,8 +21,12 @@ const myaxios = axios.create({
     })
     // 请求拦截器
 myaxios.interceptors.request.use(function(config) {
-
+    const isToken = (config.headers || {}).isToken === false
-    // config.headers.Authorization = 'Bearer ' + store.state.user.token;
+    // 是否需要防止数据重复提交
+    const isRepeatSubmit = (config.headers || {}).repeatSubmit === false
+    if (getToken() && !isToken) {
+        config.headers['Authorization'] = 'Bearer ' + getToken() // 让每个请求携带自定义token 请根据实际情况自行修改
+      }
     // store.dispatch("openLoad");
     return config;
 }, function(error) {

Yi.Vue3.x.Vant/src/view/login.vue

@@ -1,35 +1,100 @@
 <template>
-    <div class="div-top">
-        你好
-   </div>
-   <div class="div-bottom">
-      <!-- <van-field v-model="value" label="文本" placeholder="请输入用户名" /> -->
-   </div>
-   真不错
-</template>
-<script setup lang="ts">
-import {ref} from 'vue';
-const value=ref("")
 
-</script>
+   <div class="div-top">
-<style scoped>
+ 
-.div-top{
+     <span class="title">农夫山泉</span>
-    background-color: aqua;
+     <br>
-    position:absolute;
+     <span class="subtitle">农夫山泉有点甜</span>
-    top: 0;
+  </div>
-    left: 0;
+  <div class="div-bottom">
-   right: 0;
+   <h5>密码登录</h5>
-   bottom: 60%;
+     <van-field class="van-field-username" v-model="value" label="用户" placeholder="请输入用户名" />
-}
+     <van-field class="van-field-password" v-model="value" label="密码" placeholder="请输入密码" />
-.div-bottom{
+     <van-button type="primary">进入农夫山泉</van-button>
-   background-color: bisque;
+     <p>其他方式登录<van-icon name="arrow" /></p>
+ 
+     <van-row style="margin-top: 6rem;" >
+       <van-col span="24"><p> 第三方登录</p></van-col>
+       <van-col span="3"></van-col>
+       <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
+       <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
+       <van-col span="6"><van-icon name="like" size="2rem"/></van-col>
+       <van-col span="3"></van-col>
+     </van-row>
+ 
+  </div>
+ 
+ 
+ 
+ 
+ 
+ </template>
+ <script setup lang="ts">
+ import {ref} from 'vue';
+ const value=ref("")
+ 
+ </script>
+ <style scoped>
+ .div-top{
+   background-color: aqua;
    position:absolute;
-    top: 30%;
+   top: 0;
-    left: 0;
+   left: 0;
-   right: 0;
+  right: 0;
-   bottom: 0;
+  bottom: 60%;
-   border-radius: 4rem 4rem 0rem 0rem;
+ 
-   /* min-height: 70%; */
+ }
-}
+ .div-bottom{
-
+  background-color: bisque;
-</style>
+  position:absolute;
+   top: 25%;
+   left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 3rem 3rem 0rem 0rem;
+  padding: 1rem 2rem 2rem 2rem;
+ 
+  /* min-height: 70%; */
+ }
+ .title{
+   position: absolute;
+   top: 15%;
+   transform: translateX(-50%);
+   font-size: 1.8rem;
+   font-weight: bolder;
+ }
+ .subtitle
+ {
+   transform: translateX(-50%);
+   position: absolute;
+   top: 30%;
+   font-weight:lighter;
+ }
+ .van-field-username
+ {
+   margin-top:2rem;
+ }
+ .van-field-password
+ {
+   margin-top: 1rem;
+ }
+ h5{
+   text-align: left;
+   font-size: 1.2rem;
+   font-weight: bolder;
+ }
+ .div-bottom .van-button
+ {
+   margin-top: 1rem;
+   width: 100%;
+   border-radius: 0.4rem;
+ }
+ .div-bottom p{
+   text-align: center;
+ 
+ };
+ .row-bottom{
+ 
+ 
+ }
+ </style>

Yi.Vue3.x.Vant/src/view/main/recommend.vue

@@ -1,5 +1,6 @@
 <template>
-  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
+
+    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
     <van-list
       class="list"
       v-model:loading="loading"

Yi.Vue3.x.Vant/src/view/main/square.vue

@@ -1,100 +1,123 @@
 <template>
-
   <div class="div-top">
-
     <span class="title">农夫山泉</span>
-    <br>
+    <br />
     <span class="subtitle">农夫山泉有点甜</span>
- </div>
+  </div>
- <div class="div-bottom">
+  <div class="div-bottom">
-  <h5>密码登录</h5>
+    <h5>密码登录</h5>
-    <van-field class="van-field-username" v-model="value" label="文本" placeholder="请输入用户名" />
+    <van-field
-    <van-field class="van-field-password" v-model="value" label="文本" placeholder="请输入密码" />
+      class="van-field-username"
-    <van-button type="primary">进入农夫山泉</van-button>
+      v-model="loginForm.username"
+      label="用户"
+      placeholder="请输入用户名"
+    />
+    <van-field
+      class="van-field-password"
+      v-model="loginForm.password"
+      label="密码"
+      placeholder="请输入密码"
+    />
+    <van-button type="primary" @click="login">进入农夫山泉</van-button>
     <p>其他方式登录<van-icon name="arrow" /></p>
 
-    <van-row style="margin-top: 6rem;" >
+    <van-row style="margin-top: 6rem">
-      <van-col span="24"><p> 第三方登录</p></van-col>
+      <van-col span="24"><p>第三方登录</p></van-col>
       <van-col span="3"></van-col>
       <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
       <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
-      <van-col span="6"><van-icon name="like" size="2rem"/></van-col>
+      <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
       <van-col span="3"></van-col>
     </van-row>
-
+  </div>
- </div>
-
-
-
-
-
 </template>
 <script setup lang="ts">
-import {ref} from 'vue';
+import { ref } from "vue";
-const value=ref("")
+import { useRouter } from "vue-router";
+import useUserStore from "@/store/modules/user";
+const router = useRouter();
+const redirect = ref(undefined);
+const loginForm = ref({
+  username: "cc",
+  password: "123456",
+  rememberMe: false,
+  code: "",
+  uuid: "",
+});
+const userStore = useUserStore();
+const login=()=>{
+
+ // 调用action的登录方法
+userStore
+  .login(loginForm.value)
+  .then(() => {
+    alert("登录成功");
+    router.push({ path: redirect.value || "/" });
+  })
+  .catch(() => {
+    alert("登录失败");
+    // loading.value = false;
+    // // 重新获取验证码
+    // if (captchaEnabled.value) {
+    //   getCode();
+    // }
+  }); 
+}
 
 </script>
 <style scoped>
-.div-top{
+.div-top {
   background-color: aqua;
-  position:absolute;
+  position: absolute;
   top: 0;
   left: 0;
- right: 0;
+  right: 0;
- bottom: 60%;
+  bottom: 60%;
-
 }
-.div-bottom{
+.div-bottom {
- background-color: bisque;
+  background-color: bisque;
- position:absolute;
+  position: absolute;
   top: 25%;
   left: 0;
- right: 0;
+  right: 0;
- bottom: 0;
+  bottom: 0;
- border-radius: 3rem 3rem 0rem 0rem;
+  border-radius: 3rem 3rem 0rem 0rem;
- padding: 1rem 2rem 2rem 2rem;
+  padding: 1rem 2rem 2rem 2rem;
 
- /* min-height: 70%; */
+  /* min-height: 70%; */
 }
-.title{
+.title {
   position: absolute;
   top: 15%;
   transform: translateX(-50%);
   font-size: 1.8rem;
   font-weight: bolder;
 }
-.subtitle
+.subtitle {
-{
   transform: translateX(-50%);
   position: absolute;
   top: 30%;
-  font-weight:lighter;
+  font-weight: lighter;
 }
-.van-field-username
+.van-field-username {
-{
+  margin-top: 2rem;
-  margin-top:2rem;
 }
-.van-field-password
+.van-field-password {
-{
   margin-top: 1rem;
 }
-h5{
+h5 {
   text-align: left;
   font-size: 1.2rem;
   font-weight: bolder;
 }
-.div-bottom .van-button
+.div-bottom .van-button {
-{
   margin-top: 1rem;
   width: 100%;
   border-radius: 0.4rem;
 }
-.div-bottom p{
+.div-bottom p {
   text-align: center;
-
+}
-};
+.row-bottom {
-.row-bottom{
-
-
 }
 </style>