前端登录逻辑对接

Yi.Framework.Net6/Yi.Framework.ApiMicroservice/Properties/launchSettings.json

@@ -2,7 +2,8 @@
   "profiles": {
     "Yi.Framework.ApiMicroservice": {
       "commandName": "Project",
-      "launchBrowser": true,
+      //<2F><><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>Ƿ<EFBFBD><C7B7>Զ<EFBFBD><D4B6><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD><EFBFBD>˸о<CBB8><D0BE><EFBFBD><EFBFBD><EFBFBD><EFBFBD>عرȽ<D8B1><C8BD>鷳
+      "launchBrowser": false,
       "environmentVariables": {
         "ASPNETCORE_ENVIRONMENT": "Development"
       },

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

@@ -1,6 +1,8 @@
 import { createApp } from 'vue'
 import './style.css'
 import 'vant/es/image-preview/style';
+import 'vant/es/toast/style';
+import 'vant/es/dialog/style';
 import router from './router'
 import store from './store'
 import './permission'

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

@@ -4,59 +4,44 @@ import router from './router'
 // 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 { isRelogin } from '@/utils/myaxios'
 // import useSettingsStore from '@/store/modules/settings'
 // import usePermissionStore from '@/store/modules/permission'
 
 // NProgress.configure({ showSpinner: false });
 
-const whiteList = ['/square', '/auth-redirect', '/bind', '/register'];
+const whiteList = ['/login', '/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') {
+    if (to.path === '/login') {
       next({ path: '/' })
       // NProgress.done()
     } else {
-      useUserStore().getInfo();
+      if (useUserStore().roles.length === 0) {
+        isRelogin.show = true
+        useUserStore().getInfo().then((response: any) => {
           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 => {
+      else
-      //     useUserStore().logOut().then(() => {
+      {
-      //       // ElMessage.error(err)
+        next()
-      //       next({ path: '/' })
+      }
-      //     })
-      //   })
-      // } else {
-      //   next()
-      // }
     }
   } else {
+
     // 没有token
     if (whiteList.indexOf(to.path) !== -1) {
       // 在免登录白名单，直接进入
       next()
     } else {
-      next(`/square?redirect=${to.fullPath}`) // 否则全部重定向到登录页
+      next(`/login?redirect=${to.fullPath}`) // 否则全部重定向到登录页
       // NProgress.done()
     }
   }

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

@@ -2,6 +2,7 @@ import { createWebHistory, createRouter } from 'vue-router';
 import Layout from '@/layout/index.vue';
 
 export const constantRoutes = [
+  
     {
       name:'Layout',
       path: '/',
@@ -45,7 +46,7 @@ export const constantRoutes = [
     },
     {
       path: '/login',
-      component: () => import('@/view/Login.vue'),
+      component: () => import('@/view/login.vue'),
       name: 'Login',
     },
   ];

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

@@ -24,7 +24,7 @@ const useUserStore = defineStore(
           login(username, password, code, uuid).then(res => {
             setToken(res.data.token);
             this.token = res.data.token;
-            resolve();
+            resolve(res);
           }).catch(error => {
             reject(error)
           })
@@ -37,7 +37,7 @@ const useUserStore = defineStore(
             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;
-    
+            const avatar=""
             if (res.roleCodes && res.roleCodes.length > 0) { // 验证返回的roles是否是一个非空数组
               this.roles = res.roleCodes
               this.permissions = res.permissionCodes
@@ -63,12 +63,12 @@ const useUserStore = defineStore(
       // 退出系统
       logOut() {
         return new Promise((resolve, reject) => {
-          logout(this.token).then(() => {
+          logout(this.token).then((response) => {
             this.token = ''
             this.roles = []
             this.permissions = []
             removeToken()
-            resolve()
+            resolve(response)
           }).catch(error => {
             reject(error)
           })

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

@@ -3,7 +3,10 @@ import axios from 'axios'
 // import vm from '../main'
 import JsonBig from 'json-bigint'
 import { getToken } from '@/utils/auth'
+import { useRouter } from "vue-router";
+import useUserStore from '@/store/modules/user'
 // import VuetifyDialogPlugin from 'vuetify-dialog/nuxt/index';
+export let isRelogin = { show: false };
 const myaxios = axios.create({
         // baseURL:'/'// 
         baseURL: import.meta.env.VITE_APP_BASE_API, // /dev-apis
@@ -35,13 +38,68 @@ myaxios.interceptors.request.use(function(config) {
 
 // 响应拦截器
 myaxios.interceptors.response.use(async function(response) {
+//成功
     const resp = response.data
+    // if (resp.code == undefined && resp.message == undefined) {
+    //     alert("直接爆炸")
+    //     // vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
+    //     //     position: "top-right",
+    //     //     timeout: 5000,
+    //     // });
+    // } else if (resp.code == 401) {
+    //     alert("登录过期！重新登录");
+
+    //     const router = useRouter();
+    //     router.push({ path:"/login" });
+
+    //     // const res = await vm.$dialog.error({
+    //     //     text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
+    //     //     title: '错误',
+    //     //     actions: {
+    //     //         'false': '取消',
+    //     //         'true': '跳转'
+    //     //     }
+    //     // });
+    //     // if (res) {
+    //     //     vm.$router.push({ path: "/login" });
+    //     // }
+
+    // } else if (resp.code !== 200) {
+    //     // vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
+    //     //     position: "top-right",
+    //     //     timeout: 5000,
+    //     // });
+    // }
+
+    // store.dispatch("closeLoad");
+    return resp;
+}, async function(error) {
+//未授权、失败
+const resp = error.response.data
+
+
 if (resp.code == undefined && resp.message == undefined) {
+    alert("直接爆炸")
     // vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
     //     position: "top-right",
     //     timeout: 5000,
     // });
 } else if (resp.code == 401) {
+    if (!isRelogin.show) {
+
+     
+
+    alert("登录过期！重新登录");
+    //登出
+    useUserStore().logOut().then(() => {
+        location.href = '/';
+      })
+
+      isRelogin.show = false;
+    }
+    // const router = useRouter();
+    // router.push({ path:"/login" });
+
     // const res = await vm.$dialog.error({
     //     text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
     //     title: '错误',
@@ -55,44 +113,13 @@ myaxios.interceptors.response.use(async function(response) {
     // }
 
 } else if (resp.code !== 200) {
+    alert("服务器内部错误")
     // vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
     //     position: "top-right",
     //     timeout: 5000,
     // });
 }
 
-    // store.dispatch("closeLoad");
-    return resp;
-}, async function(error) {
-    // const resp = error.response.data
-    // if (resp.code == undefined && resp.message == undefined) {
-    //     vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
-    //         position: "top-right",
-    //         timeout: 5000,
-    //     });
-    // } else if (resp.code == 401) {
-    //     const res = await vm.$dialog.error({
-    //         text: `错误代码：${resp.code}，原因：${resp.message}<br>是否重新进行登录？`,
-    //         title: '错误',
-    //         actions: {
-    //             'false': '取消',
-    //             'true': '跳转'
-    //         }
-    //     });
-    //     if (res) {
-    //         vm.$store.dispatch("Logout").then((resp) => {
-    //             vm.$router.push({ path: "/login" });
-    //         });
-    //     }
-
-    // } else if (resp.code !== 200) {
-    //     vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.message}`, {
-    //         position: "top-right",
-    //         timeout: 5000,
-    //     });
-    // }
-
-    // store.dispatch("closeLoad");
     return Promise.reject(error);
 });
 export default myaxios

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

@@ -1,19 +1,27 @@
 <template>
-
   <div class="div-top">
- 
     <span class="title">农夫山泉</span>
-     <br>
+    <br />
     <span class="subtitle">农夫山泉有点甜</span>
   </div>
   <div class="div-bottom">
     <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="3"></van-col>
       <van-col span="6"><van-icon name="like" size="2rem" /></van-col>
@@ -21,18 +29,47 @@
       <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';
+import { ref } from "vue";
- const value=ref("")
+import { useRouter } from "vue-router";
+import useUserStore from "@/store/modules/user";
+import { Toast } from "vant";
 
+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((response: any) => {
+      Toast({
+        message: response.message,
+        position: "bottom",
+      });
+      router.push({ path: redirect.value || "/" });
+    })
+    .catch((response:any) => {
+      Toast({
+        message: response.message,
+        position: "bottom",
+      });
+      // loading.value = false;
+      // // 重新获取验证码
+      // if (captchaEnabled.value) {
+      //   getCode();
+      // }
+    });
+};
 </script>
 <style scoped>
 .div-top {
@@ -42,7 +79,6 @@
   left: 0;
   right: 0;
   bottom: 60%;
- 
 }
 .div-bottom {
   background-color: bisque;
@@ -63,19 +99,16 @@
   font-size: 1.8rem;
   font-weight: bolder;
 }
- .subtitle
+.subtitle {
- {
   transform: translateX(-50%);
   position: absolute;
   top: 30%;
   font-weight: lighter;
 }
- .van-field-username
+.van-field-username {
- {
   margin-top: 2rem;
 }
- .van-field-password
+.van-field-password {
- {
   margin-top: 1rem;
 }
 h5 {
@@ -83,18 +116,14 @@
   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 {
   text-align: center;
- 
+}
- };
 .row-bottom {
- 
- 
 }
 </style>

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

@@ -30,7 +30,7 @@
 
         <van-col class="rowBody" span="24">{{ item.content }}</van-col>
 
-        <van-col
+        <!-- <van-col
           span="8"
           v-for="(image, imageIndex) in item.images"
           :key="imageIndex"
@@ -42,7 +42,7 @@
             :src="url + image"
             radius="5"
           />
-        </van-col>
+        </van-col> -->
 
         <van-col span="24" class="bottomRow">
           <van-grid direction="horizontal" :column-num="3">

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

@@ -1,123 +1 @@
-<template>
+<template>这里是广场</template>
-  <div class="div-top">
-    <span class="title">农夫山泉</span>
-    <br />
-    <span class="subtitle">农夫山泉有点甜</span>
-  </div>
-  <div class="div-bottom">
-    <h5>密码登录</h5>
-    <van-field
-      class="van-field-username"
-      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-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";
-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 {
-  background-color: aqua;
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 60%;
-}
-.div-bottom {
-  background-color: bisque;
-  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/my.vue

@@ -1,11 +1,10 @@
 <template>
-
-
-
   <van-row class="headRow">
     <van-col span="2"><van-icon name="scan" size="1.5rem" /></van-col>
     <van-col span="20"></van-col>
-        <van-col span="2"><van-icon name="setting-o" size="1.5rem" @click="show=true"/></van-col>
+    <van-col span="2"
+      ><van-icon name="setting-o" size="1.5rem" @click="show = true"
+    /></van-col>
   </van-row>
 
   <van-row class="bodyRow">
@@ -18,30 +17,51 @@
       />
     </van-col>
     <van-col span="12" class="title"><span>大白不在家</span></van-col>
-          <van-col span="6" class="subtitle"><span >个人主页<van-icon name="arrow" /></span></van-col>
+    <van-col span="6" class="subtitle"
+      ><span>个人主页<van-icon name="arrow" /></span
+    ></van-col>
 
-
+    <van-col span="6" class="bodyCol"
-          <van-col span="6" class="bodyCol"><div><span>6</span><br>关注</div></van-col>
+      ><div><span>6</span><br />关注</div></van-col
-          <van-col span="6" class="bodyCol"><div><span>3</span><br>粉丝</div></van-col>
+    >
-          <van-col span="6" class="bodyCol"><div><span>0</span><br>人气</div></van-col>
+    <van-col span="6" class="bodyCol"
-          <van-col span="6" class="bodyCol"><div><span>3</span><br>钱钱</div></van-col>
+      ><div><span>3</span><br />粉丝</div></van-col
+    >
+    <van-col span="6" class="bodyCol"
+      ><div><span>0</span><br />人气</div></van-col
+    >
+    <van-col span="6" class="bodyCol"
+      ><div><span>3</span><br />钱钱</div></van-col
+    >
 
     <van-col span="24">
       <van-row class="btnRow">
-            <van-col span="12" >   <van-button class="btn"  > <van-icon name="bag"  size="1.8rem"/> 我的购物<van-icon name="arrow" size="1.2rem" /></van-button></van-col>
+        <van-col span="12">
+          <van-button class="btn">
+            <van-icon name="bag" size="1.8rem" /> 我的购物<van-icon
+              name="arrow"
+              size="1.2rem" /></van-button
+        ></van-col>
 
-            <van-col span="12">   <van-button class="btn"><van-icon name="send-gift" size="1.8rem" />我的签到<van-icon name="arrow" size="1.2rem"/></van-button></van-col>
+        <van-col span="12">
+          <van-button class="btn"
+            ><van-icon name="send-gift" size="1.8rem" />我的签到<van-icon
+              name="arrow"
+              size="1.2rem" /></van-button
+        ></van-col>
       </van-row>
     </van-col>
 
-
+    <AppGrid class="grid" :data="data1"></AppGrid>
-          <AppGrid class="grid" :data='data1'></AppGrid>
+    <AppGrid class="grid" :data="data2"></AppGrid>
-          <AppGrid class="grid" :data='data2'></AppGrid>
+    <AppGrid class="grid" :data="data3"></AppGrid>
-          <AppGrid class="grid" :data='data3'></AppGrid>
   </van-row>
 
-    <van-popup v-model:show="show" position="right" :style="{ height:'100%',width:'100%',backgroundColor:'#F8F8F8' }" >
+  <van-popup
-
+    v-model:show="show"
+    position="right"
+    :style="{ height: '100%', width: '100%', backgroundColor: '#F8F8F8' }"
+  >
     <van-nav-bar
       title="设置"
       left-text="返回"
@@ -67,75 +87,93 @@
       <van-cell title="给个好评" is-link />
     </van-cell-group>
 
-      <van-button type="danger">退出登录</van-button>
+    <van-button type="danger" @click="outLog">退出登录</van-button>
   </van-popup>
   <!-- <van-popup v-model:show="show" position="right">
      <div class="body-div"> 内容</div>
       </van-popup> -->
 </template>
 <script setup lang="ts">
-import AppGrid from '@/components/AppGrid.vue'
+import AppGrid from "@/components/AppGrid.vue";
-import {AppGridData} from '@/type/class/AppGridData.ts'
+import { AppGridData } from "@/type/class/AppGridData.ts";
-import {ref} from 'vue'
+import { ref } from "vue";
+import { Dialog } from "vant";
+import useUserStore from "@/store/modules/user";
 const show = ref<boolean>(false);
 let data1: AppGridData = {
   head: "个人中心",
   body: [
     {
       title: "我的消息",
-    icon:"comment-o"
+      icon: "comment-o",
     },
     {
       title: "我的聊天",
-    icon:"chat-o"
+      icon: "chat-o",
     },
     {
       title: "我的喜欢",
-    icon:"like-o"
+      icon: "like-o",
     },
     {
       title: "我的关注",
-    icon:"user-o"
+      icon: "user-o",
     },
-]
+  ],
 };
 let data2: AppGridData = {
   head: "功能",
   body: [
     {
       title: "排行榜",
-    icon:"medal-o"
+      icon: "medal-o",
     },
     {
       title: "活动报名",
-    icon:"balance-list-o"
+      icon: "balance-list-o",
     },
     {
       title: "钱钱兑换",
-    icon:"gem-o"
+      icon: "gem-o",
     },
     {
       title: "全网上新",
-    icon:"gift-card-o"
+      icon: "gift-card-o",
     },
-]
+  ],
 };
 let data3: AppGridData = {
   head: "服务",
   body: [
     {
       title: "客服",
-    icon:"service-o"
+      icon: "service-o",
     },
     {
       title: "小黑屋",
-    icon:"wap-home-o"
+      icon: "wap-home-o",
     },
     {
       title: "邀请好友",
-    icon:"friends-o"
+      icon: "friends-o",
-  }
+    },
-]
+  ],
+};
+const outLog = () => {
+  Dialog.confirm({
+    title: "提示",
+    message: "确定退出当前用户吗？",
+  })
+    .then(() => {
+      useUserStore()
+        .logOut()
+        .then((response: any) => {
+          location.href = "/";
+        });
+    })
+    .catch(() => {
+      // on cancel
+    });
 };
 </script>
 <style scoped>
@@ -146,24 +184,21 @@ let data3 :AppGridData={
 .headRow {
   padding: 0.5rem 0.5rem 0.5rem 0.5rem;
 }
-.bodyRow
+.bodyRow {
-{
   text-align: left;
   margin-top: 1.5rem;
   padding-left: 1.5rem;
-    padding-right: 1.5rem;;
+  padding-right: 1.5rem;
   padding-bottom: 4rem;
 }
 
-.title
+.title {
-{
   font-size: 1.5rem;
   line-height: 4rem;
 }
-.subtitle
+.subtitle {
-{
   line-height: 4rem;
-    color:#CBCBCB ;
+  color: #cbcbcb;
 }
 .bodyCol {
   text-align: center;
@@ -174,7 +209,7 @@ let data3 :AppGridData={
   width: 100%;
   margin: 0;
   padding: 0;
-    background-color: #FFFFFF;
+  background-color: #ffffff;
   border: none;
   color: black;
 }
@@ -182,30 +217,23 @@ let data3 :AppGridData={
   margin-top: 1.5rem;
   box-shadow: 0rem 0rem 0.2rem 0.2rem #f3f3f3;
 }
-.btnRow .van-button
+.btnRow .van-button {
-{
   font-size: 1.2rem;
 }
-.van-icon-send-gift
+.van-icon-send-gift {
-{
   margin-right: 0.5rem;
 }
-.btnRow .van-icon-arrow
+.btnRow .van-icon-arrow {
-{
   margin-left: 0.45rem;
 }
-.van-cell
+.van-cell {
-{
   text-align: left;
 }
-.group
+.group {
-{
   margin-top: 1rem;
 }
-.van-popup .van-button
+.van-popup .van-button {
-{
   width: 90%;
   margin-top: 2rem;
 }
-
 </style>