0322

src/main/h5/package.json

@@ -14,6 +14,7 @@
     "element-ui": "^2.15.1",
     "vant": "^2.12.7",
     "vue": "^2.6.11",
+    "vue-meta-info": "^0.1.7",
     "vue-router": "^3.2.0",
     "vuex": "^3.4.0"
   },

src/main/h5/src/App.vue

@@ -5,7 +5,15 @@
 </template>
 
 <style lang="less">
+html,
 body {
   margin: 0;
+  padding: 0;
+}
+#app {
+  overflow: hidden;
+  width: 100vw;
+  min-height: 100vh;
+  background-color: #f5f7fa;
 }
 </style>

src/main/h5/src/assets/icon_dizhi.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_dizhi</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="督查列表" transform="translate(-36.000000, -284.000000)">
+            <g id="编组-3" transform="translate(16.000000, 193.000000)">
+                <g id="icon/地址" transform="translate(20.000000, 91.000000)">
+                    <g id="icon_dizhi" transform="translate(1.000000, 0.000000)">
+                        <ellipse id="椭圆形" fill="#DEE5F4" cx="7" cy="15" rx="5" ry="1"></ellipse>
+                        <path d="M7,0 C10.8659932,0 14,3.13400675 14,7 C14,9.19671967 12.3049348,11.7004916 8.91480449,14.5113157 C7.80429764,15.4320589 6.19570372,15.4320589 5.08519684,14.5113157 L5.08519684,14.5113157 L4.76241071,14.2402596 C1.58747024,11.5392778 0,9.12585792 0,7 C0,3.13400675 3.13400675,0 7,0 Z M7,5 C5.8954305,5 5,5.8954305 5,7 C5,8.1045695 5.8954305,9 7,9 C8.1045695,9 9,8.1045695 9,7 C9,5.8954305 8.1045695,5 7,5 Z" id="形状结合" fill="#2C96FF"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/h5/src/assets/icon_login_iphone.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_login_iphone</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="登录" transform="translate(-25.000000, -296.000000)" stroke="#313233" stroke-width="1.5">
+            <g id="编组-3" transform="translate(25.000000, 278.000000)">
+                <g id="编组-2" transform="translate(0.000000, 18.000000)">
+                    <g id="编组" transform="translate(5.000000, 3.000000)">
+                        <rect id="矩形" x="0.75" y="0.75" width="12.5" height="16.5" rx="2"></rect>
+                        <path d="M12,0.75 C12.345178,0.75 12.657678,0.889911016 12.8838835,1.11611652 C13.110089,1.34232203 13.25,1.65482203 13.25,2 L13.25,2 L13.25,10 C13.25,10.345178 13.110089,10.657678 12.8838835,10.8838835 C12.657678,11.110089 12.345178,11.25 12,11.25 L12,11.25 L2,11.25 C1.65482203,11.25 1.34232203,11.110089 1.11611652,10.8838835 C0.889911016,10.657678 0.75,10.345178 0.75,10 L0.75,10 L0.75,2 C0.75,1.65482203 0.889911016,1.34232203 1.11611652,1.11611652 C1.34232203,0.889911016 1.65482203,0.75 2,0.75 L2,0.75 Z" id="矩形"></path>
+                        <line x1="5.5" y1="14.5" x2="8.5" y2="14.5" id="直线" stroke-linecap="round" stroke-linejoin="round"></line>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/h5/src/assets/icon_sel_no.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_sel_no</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="添加记录" transform="translate(-296.000000, -328.000000)">
+            <g id="编组-5" transform="translate(16.000000, 238.000000)">
+                <g id="编组-3" transform="translate(196.000000, 62.000000)">
+                    <g id="icon_sel_no" transform="translate(84.000000, 28.000000)">
+                        <path d="M15.5,0.5 L15.5,8 C15.5,10.0710678 14.6605339,11.9460678 13.3033009,13.3033009 C11.9460678,14.6605339 10.0710678,15.5 8,15.5 L8,15.5 L0.5,15.5 L0.5,8 C0.5,5.92893219 1.33946609,4.05393219 2.69669914,2.69669914 C4.05393219,1.33946609 5.92893219,0.5 8,0.5 L8,0.5 L15.5,0.5 Z" id="矩形" stroke="#FA5151" fill="#FA5151"></path>
+                        <polyline id="路径" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="5 8 7 10 11 6"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/h5/src/assets/icon_sel_yes.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_sel_yes</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="添加记录" transform="translate(-146.000000, -194.000000)">
+            <g id="编组-5" transform="translate(16.000000, 104.000000)">
+                <g id="编组-2" transform="translate(46.000000, 62.000000)">
+                    <g id="icon_sel_yes" transform="translate(84.000000, 28.000000)">
+                        <path d="M15.5,0.5 L15.5,8 C15.5,10.0710678 14.6605339,11.9460678 13.3033009,13.3033009 C11.9460678,14.6605339 10.0710678,15.5 8,15.5 L8,15.5 L0.5,15.5 L0.5,8 C0.5,5.92893219 1.33946609,4.05393219 2.69669914,2.69669914 C4.05393219,1.33946609 5.92893219,0.5 8,0.5 L8,0.5 L15.5,0.5 Z" id="矩形" stroke="#2C96FF" fill="#2C96FF"></path>
+                        <polyline id="路径" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" points="5 8 7 10 11 6"></polyline>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/h5/src/assets/icon_status.svg

@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon_dizhi</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="督查列表" transform="translate(-36.000000, -254.000000)">
+            <g id="编组-3" transform="translate(16.000000, 193.000000)">
+                <g id="icon/状态" transform="translate(20.000000, 61.000000)">
+                    <g id="icon_dizhi" transform="translate(1.000000, 0.000000)">
+                        <rect id="矩形" fill="#FAEBCB" x="4" y="12" width="6" height="4" rx="1"></rect>
+                        <circle id="椭圆形" fill="#FFC449" cx="7" cy="7" r="7"></circle>
+                        <polygon id="路径" fill="#FFFFFF" points="3.5 8 6.5 8 6.5 11 10.5 6 7.5 6 7.5 3"></polygon>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/main/h5/src/main.js

@@ -7,12 +7,18 @@ import ElementUI from "element-ui";
 import "element-ui/lib/theme-chalk/index.css";
 import Vant from "vant";
 import "vant/lib/index.css";
+import MetaInfo from "vue-meta-info";
+Vue.prototype.$colors = {
+  prim: "#2C96FF",
+  text2:'#939599'
+};
 
 Vue.use(Vant);
 
 Vue.use(ElementUI);
 Vue.use(http);
 Vue.config.productionTip = false;
+Vue.use(MetaInfo);
 
 new Vue({
   router,

src/main/h5/src/plugins/http.js

@@ -1,11 +1,10 @@
 import axios from "axios";
-import router from "../router";
 import qs from "qs";
 /* eslint-disable */
 let baseUrl = "http://localhost:8080";
 switch (process.env.NODE_ENV) {
   case "development":
-    baseUrl = "http://localhost:8080";
+    baseUrl = "http://wlj.izouma.com";
     // baseUrl = 'http://192.168.50.127:8080';
     break;
   case "test":
@@ -45,17 +44,16 @@ axiosInstance.interceptors.response.use(
       };
     } else {
       errorData = error.response.data;
-      if (401 === error.response.status) {
-        if (router.currentRoute.name !== "login") {
-          router.replace({
-            name: "login",
-            params: {
-              from: router.currentRoute.name
-            }
-          });
-        } else {
-        }
-      }
+      // if (401 === error.response.status) {
+      //   if (router.currentRoute.name !== "login") {
+      //     router.replace({
+      //       name: "login",
+      //       params: {
+      //         from: router.currentRoute.name
+      //       }
+      //     });
+      //   } else {
+      //   }
     }
     return Promise.reject(errorData);
   }

src/main/h5/src/router/index.js

@@ -23,17 +23,26 @@ const routes = [
   {
     path: "/inspectorList",
     name: "inspectorList",
-    component: () => import("../views/inspector/inspectorList.vue")
+    component: () => import("../views/inspector/inspectorList.vue"),
+    meta: {
+      checkLogin: true
+    }
   },
   {
     path: "/inspectorRecord",
     name: "inspectorRecord",
-    component: () => import("../views/inspector/inspectorRecord.vue")
+    component: () => import("../views/inspector/inspectorRecord.vue"),
+    meta: {
+      checkLogin: true
+    }
   },
   {
     path: "/addRecord",
     name: "addRecord",
-    component: () => import("../views/inspector/addRecord.vue")
+    component: () => import("../views/inspector/addRecord.vue"),
+    meta: {
+      checkLogin: true
+    }
   }
 ];
 
@@ -44,7 +53,7 @@ const router = new VueRouter({
 });
 
 router.beforeEach((to, from, next) => {
-  if (!store.state.userInfo && to.path !== "/login") {
+  if (!store.state.userInfo && to.path !== "/login" && to.meta.checkLogin) {
     http.axios
       .get("/user/my")
       .then(res => {

src/main/h5/src/views/Home.vue

@@ -1,65 +1,107 @@
 <template>
   <div class="home">
-    <div class="tab">
-      <div class="tab_item" :class="{ active: tab === 1 }" @click="tab = 1">
-        基础信息
-      </div>
-      <div class="tab_item" :class="{ active: tab === 2 }" @click="tab = 2">
-        评奖信息
-      </div>
-      <div class="tab_item" :class="{ active: tab === 3 }" @click="tab = 3">
-        查看证书
+    <div class="info">
+      <van-image
+        width="63"
+        height="63"
+        :src="require('../assets/img_touxiang.png')"
+      />
+      <div class="text">
+        <div class="name">夏秋雨</div>
+        <div class="sub">艺考考生</div>
       </div>
+      <div class="btn">切换账号</div>
     </div>
-    <div class="tab_content">
-      <div class="tab_content_item tab1" v-if="tab == 1">
-        <!-- <img src="" alt=""> -->
-        <div class="code">
-          <img src="../assets/code.png" />
-        </div>
-        <div class="baseInfo">
-          <div class="row">
-            <span class="name">节目名称</span>
-            <span class="content">节目1</span>
+    <van-tabs
+      v-model="tab"
+      :title-active-color="$colors.prim"
+      :title-inactive-color="$colors.text2"
+      :color="$colors.prim"
+      line-width="26px"
+      swipeable
+    >
+      <van-tab title="基础信息">
+        <div class="base">
+          <div class="code">
+            <van-image
+              :src="require('../assets/code.png')"
+              width="220"
+              height="220"
+            />
           </div>
-          <div class="row">
-            <span class="name">参演时间</span>
-            <span class="content">2021-03-14 15：00</span>
+
+          <div class="base-info">
+            <div class="base-info-item">
+              <div class="text1">节目名称</div>
+              <div class="text2">飞弦踏春</div>
+            </div>
+            <div class="base-info-item">
+              <div class="text1">参演时间</div>
+              <div class="text2">2021-03-14 15:00</div>
+            </div>
+            <div class="base-info-item">
+              <div class="text1">参演人员</div>
+              <div class="text2">岩洁 付妍元 俞贵</div>
+            </div>
+
+            <img
+              class="left-icon icon"
+              src="../assets/icon_lianjie.png"
+              alt=""
+            />
+            <img
+              class="right-icon icon"
+              src="../assets/icon_lianjie.png"
+              alt=""
+            />
           </div>
         </div>
-        <div class="num">
-          <div>参演人员</div>
-          <div>张三</div>
-          <div>李四</div>
-        </div>
-      </div>
-      <div class="tab_content_item tab2" v-if="tab == 2">
-        <div class="grades">85分</div>
-        <div class="row">
-          <div class="name">得分明细1</div>
-          <div class="num">30分</div>
-        </div>
-        <div class="row">
-          <div class="name">得分明细2</div>
-          <div class="num">30分</div>
+      </van-tab>
+      <van-tab title="评奖信息">
+        <div class="score">
+          <div class="score-main">
+            <div class="name">总得分</div>
+            <div class="val">85</div>
+          </div>
+
+          <div class="score-list">
+            <div class="score-item">
+              <div class="name">得分明细1</div>
+              <div class="val">30</div>
+            </div>
+            <div class="score-item">
+              <div class="name">得分明细2</div>
+              <div class="val">26</div>
+            </div>
+            <div class="score-item">
+              <div class="name">得分明细3</div>
+              <div class="val">29</div>
+            </div>
+          </div>
         </div>
-        <div class="row">
-          <div class="name">得分明细3</div>
-          <div class="num">25分</div>
+      </van-tab>
+      <van-tab title="查看证书">
+        <div class="certificate">
+          <div class="certificate-img">
+            <img src="../assets/image.jpg" alt="" />
+          </div>
+          <div class="certificate-img">
+            <img src="../assets/image.jpg" alt="" />
+          </div>
         </div>
-        <div class="prize">二等奖</div>
-      </div>
-      <div class="tab_content_item tab3" v-if="tab == 3">
-        <img src="../assets/image.png" />
-        <img src="../assets/image.png" />
-      </div>
-    </div>
+      </van-tab>
+    </van-tabs>
   </div>
 </template>
 
 <script>
 export default {
   name: "home",
+  metaInfo() {
+    return {
+      title: "文旅局艺考"
+    };
+  },
   data() {
     return {
       tab: 1
@@ -68,99 +110,187 @@ export default {
 };
 </script>
 <style lang="less" scoped>
-html,
-body {
-  margin: 0;
-  padding: 0;
-}
-.home {
-  .tab {
-    display: flex;
-    justify-content: space-between;
-    text-align: center;
-    .tab_item {
-      width: 100%;
-      height: 36px;
-      line-height: 36px;
-      font-size: 16px;
-      color: #333;
-      border: 1px solid #333;
-      box-sizing: border-box;
-      &.active {
-        background-color: skyblue;
-      }
+.info {
+  background-color: #fff;
+  display: flex;
+  padding: 16px;
+  align-items: center;
+  .text {
+    flex-grow: 1;
+    margin-left: 12px;
+    .name {
+      font-size: 22px;
+      font-weight: bold;
+      color: #000000;
+      line-height: 30px;
+    }
+
+    .sub {
+      font-size: 14px;
+      color: #939599;
+      line-height: 20px;
+      margin-top: 2px;
     }
   }
+
+  .btn {
+    font-size: 14px;
+    color: #c4c7cc;
+    line-height: 20px;
+    align-self: flex-end;
+  }
 }
-.tab_content {
-  .tab_content_item {
-    padding: 20px;
+
+.base {
+  padding: 20px 16px;
+  .code {
+    padding: 30px 60px;
+    background-color: #fff;
+    border-radius: 12px;
   }
-  .tab1 {
-    .code {
-      text-align: center;
-      img {
-        width: 150px;
-        height: 150px;
-      }
-    }
-    .row {
+
+  .base-info {
+    position: relative;
+    padding: 22px 44px;
+    background: #ffffff;
+    border-radius: 12px;
+    margin-top: 8px;
+    .base-info-item {
       display: flex;
-      justify-content: space-evenly;
-      margin-top: 20px;
-      .name {
-        width: 100%;
-        font-size: 16px;
-        color: #333;
+      align-items: center;
+      font-size: 14px;
+      color: #000000;
+      line-height: 26px;
+
+      .text1 {
+        font-weight: bold;
       }
-      .content {
-        width: 100%;
+
+      .text2 {
         font-size: 16px;
-        color: #333;
+        margin-left: 20px;
       }
-    }
-    .num {
-      margin-top: 20px;
 
-      div {
-        margin-top: 10px;
+      &:not(:first-child) {
+        margin-top: 12px;
       }
     }
   }
-  .tab2 {
-    .grades {
-      margin: 20px 0 40px;
-      text-align: center;
-      font-size: 56px;
-      font-weight: 700;
-      color: #333;
+
+  .icon {
+    width: 10px;
+    height: 54px;
+    position: absolute;
+    top: 0;
+    transform: translateY(-50%);
+
+    &.left-icon {
+      left: 16px;
     }
-    .row {
+
+    &.right-icon {
+      right: 16px;
+    }
+  }
+}
+
+.score {
+  margin: 20px 16px;
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 0 20px;
+
+  .score-main {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 47px 0 20px;
+
+    .name {
+      font-size: 16px;
+      color: #939599;
+      line-height: 22px;
+    }
+
+    .val {
+      font-size: 85px;
+      font-weight: bold;
+      color: #000000;
+      line-height: 119px;
+    }
+  }
+
+  .score-list {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 38px 0 48px;
+    .score-item {
       display: flex;
-      justify-content: space-evenly;
-      margin-top: 20px;
       .name {
-        width: 100%;
-        font-size: 16px;
-        color: #333;
+        font-size: 14px;
+        color: #939599;
+        line-height: 26px;
       }
-      .num {
-        width: 100%;
-        font-size: 16px;
-        color: #333;
+
+      .val {
+        font-size: 18px;
+        font-weight: bold;
+        color: #000000;
+        line-height: 26px;
+        margin-left: 20px;
+      }
+
+      &:not(:first-child) {
+        margin-top: 16px;
       }
     }
-    .prize {
-      margin-top: 80px;
-      text-align: center;
-      font-size: 56px;
-      font-weight: 700;
-      color: #333;
-    }
+
+    border-top: 1px solid #f5f7fa;
   }
-  .tab3 {
+}
+
+.certificate {
+  padding: 20px 16px;
+
+  .certificate-img {
+    padding: 16px;
+    background: #ffffff;
+    border-radius: 12px;
     img {
-      width: 100%;
+      width: 331px;
+      height: 197px;
+      display: block;
+    }
+
+    &:not(:first-child) {
+      margin-top: 12px;
+    }
+  }
+}
+</style>
+
+<style lang="less">
+.home {
+  .van-tabs__line {
+    bottom: 20px;
+  }
+  .van-tabs__wrap {
+    height: 50px;
+  }
+  .van-tabs__nav {
+    padding: 0 6px 15px;
+  }
+  .van-tab {
+    flex: 0;
+    white-space: nowrap;
+    font-size: 16px;
+    line-height: 22px;
+    padding: 0 10px;
+
+    &.van-tab--active {
+      font-size: 20px;
+      font-weight: bold;
     }
   }
 }

src/main/h5/src/views/inspector/addRecord.vue

@@ -1,52 +1,93 @@
 <template>
   <div class="addRecord">
-    <div class="title">
-      {{ formData.id ? "记录详情" : "添加记录" }}
-    </div>
-
     <van-form :readonly="!!formData.id">
       <div v-if="formData.id">
         <van-field v-model="formData.createdAt" label="监管时间" />
       </div>
-      <van-field name="isRecord" label="是否考前备案">
+      <van-field name="isRecord" label="1.是否考前备案">
         <template #input>
           <van-radio-group
             :disabled="!!formData.id"
             v-model="formData.isRecord"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
-      <van-field name="isPostExamGuide" label="是否明显位置张贴《考试简章》">
+      <van-field name="isPostExamGuide" label="2.是否明显位置张贴《考试简章》?">
         <template #input>
           <van-radio-group
             :disabled="!!formData.id"
             v-model="formData.isPostExamGuide"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
-      <van-field name="isPerfectDeviceServices" label="考场服务设备是否完善">
+      <van-field name="isPerfectDeviceServices" label="3.考场服务设备是否完善?">
         <template #input>
           <van-radio-group
             :disabled="!!formData.id"
             v-model="formData.isPerfectDeviceServices"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
       <van-field
         name="isHaveTheSameTime"
-        label="考试时间与备案考试时间是否一致"
+        label="4.考试时间与备案考试时间是否一致?"
       >
         <template #input>
           <van-radio-group
@@ -54,38 +95,83 @@
             v-model="formData.isHaveTheSameTime"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
-      <van-field name="isExaminer" label="是否有无相关专业考官且佩戴考官证">
+      <van-field name="isExaminer" label="5.是否有无相关专业考官且佩戴考官证?">
         <template #input>
           <van-radio-group
             :disabled="!!formData.id"
             v-model="formData.isExaminer"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
-      <van-field name="isRate" label="是否现场对艺术水平做出评定">
+      <van-field name="isRate" label="6.是否现场对艺术水平做出评定?">
         <template #input>
           <van-radio-group
             :disabled="!!formData.id"
             v-model="formData.isRate"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
       <van-field
         name="isSureContent"
-        label="是否是所属考级机构教材确定的考级内容"
+        label="7.是否是所属考级机构教材确定的考级内容?"
       >
         <template #input>
           <van-radio-group
@@ -93,14 +179,29 @@
             v-model="formData.isSureContent"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
       <van-field
         name="isPostPoster"
-        label="是否在明显位置张贴《疫情防控指南》海报"
+        label="8.是否在明显位置张贴《疫情防控指南》海报?"
       >
         <template #input>
           <van-radio-group
@@ -108,15 +209,30 @@
             v-model="formData.isPostPoster"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
 
       <van-field
         name="isHaveThermometer"
-        label="考点是否配备测量体温设备，且专人值守"
+        label="9.考点是否配备测量体温设备，且专人值守?"
       >
         <template #input>
           <van-radio-group
@@ -124,20 +240,50 @@
             v-model="formData.isHaveThermometer"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
-      <van-field name="isSchedule" label="考场是否实施预约限流措施">
+      <van-field name="isSchedule" label="10.考场是否实施预约限流措施?">
         <template #input>
           <van-radio-group
             :disabled="!!formData.id"
             v-model="formData.isSchedule"
             direction="horizontal"
           >
-            <van-radio :name="true" label-disabled>是</van-radio>
-            <van-radio :name="false" label-disabled>否</van-radio>
+            <van-radio :name="true">
+              是
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon : inactiveIcon"
+                />
+              </template>
+            </van-radio>
+            <van-radio class="no" :name="false"
+              >否
+              <template #icon="props">
+                <img
+                  class="img-icon"
+                  :src="props.checked ? activeIcon2 : inactiveIcon"
+                /> </template
+            ></van-radio>
           </van-radio-group>
         </template>
       </van-field>
@@ -148,26 +294,41 @@
         label="其他"
         type="textarea"
         maxlength="200"
-        placeholder="请输入留言"
-        show-word-limit
+        placeholder="请输入备注信息…"
+        class="textfield"
       />
-      <div style="margin: 16px;" v-if="!formData.id">
-        <van-button round block type="info" @click="onSave">提交</van-button>
+    </van-form>
+
+    <div class="bottom">
+      <div v-if="!formData.id">
+        <van-button round block :color="$colors.prim" @click="onSave"
+          >提交</van-button
+        >
       </div>
-      <div style="margin: 16px;" v-else>
-        <van-button round block plain @click="$router.go(-1)">返回</van-button>
+      <div v-else>
+        <van-button round block color="#C4C7CC" @click="$router.go(-1)"
+          >返回</van-button
+        >
       </div>
-    </van-form>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
   name: "addRecord",
+  metaInfo() {
+    return {
+      title: this.formData.id ? "记录详情" : "添加记录"
+    };
+  },
   data() {
     return {
       formData: {},
-      rules: {}
+      rules: {},
+      activeIcon: require("../../assets/icon_sel_yes.svg"),
+      activeIcon2: require("../../assets/icon_sel_no.svg"),
+      inactiveIcon: ""
     };
   },
   mounted() {
@@ -243,6 +404,26 @@ export default {
     }
   }
 }
+.van-form {
+  padding: 16px 16px 100px;
+}
+.van-cell {
+  background: #ffffff;
+  border-radius: 12px;
+  padding: 20px;
+  &::after {
+    content: none;
+  }
+
+  &:not(:first-child) {
+    margin-top: 12px;
+  }
+}
+
+.van-radio {
+  width: 100px;
+  height: 44px;
+}
 </style>
 
 <style lang="less">
@@ -251,11 +432,87 @@ export default {
 }
 .van-field__label {
   width: 100%;
-  color: #000;
+  color: #313233;
   font-weight: bold;
+  font-size: 18px;
 }
 
 .van-field__value {
   margin-top: 10px;
 }
+
+.van-radio {
+  position: relative;
+  font-size: 16px;
+  text-align: center;
+  display: flex;
+  justify-content: center;
+
+  .van-radio__label {
+    margin-left: 0;
+    color: #313233;
+    position: relative;
+    z-index: 1;
+  }
+
+  .van-radio__icon {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 44px;
+    border: 1px solid #e6e7eb;
+    background: #ffffff;
+    border-radius: 8px;
+    box-sizing: border-box;
+    z-index: 0;
+    .img-icon {
+      position: absolute;
+      right: 0px;
+      bottom: -1px;
+    }
+  }
+  .van-radio__icon--checked {
+    background: rgba(44, 150, 255, 0.12);
+    border: 1px solid #2c96ff;
+  }
+  .van-radio__icon--checked + .van-radio__label {
+    color: #2c96ff;
+  }
+
+  &.no {
+    .van-radio__icon--checked {
+      background: rgba(250, 81, 81, 0.12);
+      border: 1px solid #fa5151;
+    }
+    .van-radio__icon--checked + .van-radio__label {
+      color: #fa5151;
+    }
+  }
+}
+
+.textfield {
+  .van-field__value {
+    padding: 0 10px;
+  }
+  .van-field__body {
+    padding: 6px 14px;
+    border-radius: 8px;
+    border: 1px solid #e6e7eb;
+  }
+}
+
+.bottom {
+  position: fixed;
+  background: #ffffff;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 6px 26px calc(env(safe-area-inset-bottom) + 6px);
+  z-index: 20;
+  .van-button {
+    height: 48px;
+  }
+}
 </style>

src/main/h5/src/views/inspector/inspectorList.vue

@@ -1,36 +1,55 @@
 <template>
   <div class="inspectorList">
-    <div class="title">
-      督察列表
+    <div class="header-info">
+      <van-image
+        width="63"
+        height="63"
+        :src="require('../../assets/img_touxiang.png')"
+      />
+      <div class="text">
+        <div class="name">{{ userInfo.nickname }}</div>
+        <div class="sub">督察员</div>
+      </div>
+      <div class="btn">切换账号</div>
     </div>
-    <div class="table">
-      <el-table :data="tableData" style="width: 100%">
-        <el-table-column label="承办单位" prop="organizer" width="100%">
-        </el-table-column>
-        <el-table-column label="地址" prop="examinationAddress" width="100%">
-        </el-table-column>
-        <el-table-column
-          label="状态"
-          width="100%"
-          prop="status"
-          :formatter="statusFormatter"
-        >
-        </el-table-column>
-        <el-table-column label="操作">
-          <template slot-scope="scope">
-            <el-button size="mini" @click="handleEdit(scope.$index, scope.row)"
-              >详情</el-button
+
+    <div class="list">
+      <div
+        class="item"
+        v-for="item in tableData"
+        :key="item.id"
+        @click="handleEdit(item)"
+      >
+        <div class="left">
+          <div class="name">{{ item.organizer }}</div>
+          <div class="status">
+            <img src="../../assets/icon_status.svg" alt="" />
+            <van-tag type="success" v-if="item.status" size="large"
+              >状态正常</van-tag
             >
-          </template>
-        </el-table-column>
-      </el-table>
+            <van-tag type="danger" v-else size="large">状态异常</van-tag>
+          </div>
+
+          <div class="location" v-if="item.examinationAddress">
+            <img src="../../assets/icon_dizhi.svg" alt="" />
+            <span>{{ item.examinationAddress }}</span>
+          </div>
+        </div>
+        <van-icon name="arrow" :size="16" color="#000000" />
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+import { mapState } from "vuex";
 export default {
   name: "inspectorList",
+  metaInfo() {
+    return {
+      title: "督察列表"
+    };
+  },
   data() {
     return {
       tableData: [],
@@ -39,8 +58,11 @@ export default {
       }
     };
   },
+  computed: {
+    ...mapState(["userInfo"])
+  },
   methods: {
-    handleEdit(index, row) {
+    handleEdit(row) {
       this.$router.push({
         name: "inspectorRecord",
         query: {
@@ -70,6 +92,8 @@ export default {
   .table {
     margin-top: 50px;
   }
+
+  background: linear-gradient(180deg, #ffffff 0%, #f5f7fa 235px);
 }
 // /deep/.el-table--scrollable-x .el-table__body-wrapper {
 //   overflow-x: hidden;
@@ -77,4 +101,83 @@ export default {
 // /deep/.el-table__body {
 //   width: 100%;
 // }
+
+.header-info {
+  display: flex;
+  padding: 16px;
+  align-items: center;
+  .text {
+    flex-grow: 1;
+    margin-left: 12px;
+    .name {
+      font-size: 22px;
+      font-weight: bold;
+      color: #000000;
+      line-height: 30px;
+    }
+
+    .sub {
+      font-size: 14px;
+      color: #939599;
+      line-height: 20px;
+      margin-top: 2px;
+    }
+  }
+
+  .btn {
+    font-size: 14px;
+    color: #c4c7cc;
+    line-height: 20px;
+    align-self: flex-end;
+  }
+}
+
+.list {
+  padding: 20px 16px;
+  .item {
+    padding: 20px;
+    background: #ffffff;
+    border-radius: 12px;
+    display: flex;
+    align-items: center;
+
+    .left {
+      flex-grow: 1;
+    }
+
+    .name {
+      font-size: 18px;
+      font-weight: bold;
+      color: #313233;
+      line-height: 28px;
+    }
+
+    .status {
+      display: flex;
+      align-items: center;
+      margin-top: 10px;
+      img {
+        margin-right: 6px;
+      }
+    }
+
+    .location {
+      display: flex;
+      align-items: center;
+      margin-top: 8px;
+      img {
+        margin-right: 6px;
+      }
+      span {
+        font-size: 14px;
+        color: #939599;
+        line-height: 22px;
+      }
+    }
+
+    &:not(:first-child) {
+      margin-top: 12px;
+    }
+  }
+}
 </style>

src/main/h5/src/views/inspector/inspectorRecord.vue

@@ -1,29 +1,42 @@
 <template>
   <div class="inspectorRecord">
-    <div class="title">
-      督察记录
+    <div class="table-top">
+      <div class="header-item">日期</div>
+      <div class="header-item">督察人员</div>
     </div>
-    <div class="add" @click="add">添加记录</div>
-    <div class="table">
-      <div class="row">
-        <div class="data">日期</div>
-        <div class="name">督察人员</div>
-        <div class="operat">操作</div>
-      </div>
-      <div class="row" v-for="item in list" :key="item.id">
-        <div class="data">{{ item.createdAt }}</div>
-        <div class="name">{{ item.supervisorUser.nickname }}</div>
-        <div class="operat" @click="goDetail(item.id)">
-          <span>详情</span>
-        </div>
+
+    <div class="list">
+      <div
+        class="item"
+        v-for="item in list"
+        :key="item.id"
+        @click="goDetail(item.id)"
+      >
+        <span>{{ item.createdAt }}</span>
+        <span>{{ item.supervisorUser.nickname }}</span>
+        <van-icon name="arrow" :size="14" color="#000000" />
       </div>
     </div>
+
+    <div class="bottom">
+      <van-button round color="#C4C7CC" @click="$router.go(-1)"
+        >返回</van-button
+      >
+      <van-button round :color="$colors.prim" @click="add">添加记录</van-button>
+    </div>
+
+    <!-- <div class="add" @click="add">添加记录</div> -->
   </div>
 </template>
 
 <script>
 export default {
   name: "inspectorRecord",
+  metaInfo() {
+    return {
+      title: "监察记录"
+    };
+  },
   data() {
     return {
       list: []
@@ -96,10 +109,74 @@ export default {
     }
   }
 }
-// /deep/.el-table--scrollable-x .el-table__body-wrapper {
-//   overflow-x: hidden;
-// }
-// /deep/.el-table__body {
-//   width: 100%;
-// }
+.table-top {
+  position: fixed;
+  height: 44px;
+  background: #ffffff;
+  top: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  padding: 0 36px;
+  .header-item {
+    flex-grow: 1;
+    font-size: 14px;
+    color: #c4c7cc;
+    line-height: 44px;
+    text-align: center;
+  }
+}
+
+.list {
+  padding: 60px 16px calc(env(safe-area-inset-bottom) + 100px);
+}
+
+.item {
+  display: flex;
+  height: 70px;
+  background: #ffffff;
+  border-radius: 12px;
+  align-items: center;
+  position: relative;
+  padding: 0 20px;
+  span {
+    font-size: 14px;
+    font-weight: bold;
+    color: #313233;
+    line-height: 28px;
+    flex-grow: 1;
+    // text-align: center;
+  }
+
+  .van-icon {
+    position: absolute;
+    right: 10px;
+  }
+
+  &:not(:first-child) {
+    margin-top: 12px;
+  }
+}
+
+.bottom {
+  background: #ffffff;
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  padding: 6px 26px calc(env(safe-area-inset-bottom) + 6px);
+  display: flex;
+  justify-content: space-between;
+  z-index: 20;
+
+  .van-button {
+    height: 48px !important;
+    &:first-child {
+      width: 82px;
+    }
+    &:last-child {
+      width: 228px;
+    }
+  }
+}
 </style>

src/main/h5/src/views/login.vue

@@ -1,88 +1,97 @@
 <template>
   <div class="login">
-    <div class="title">
-      监管人员登录
+    <div class="login-title" v-if="!isSend">欢迎您<br />立即登录</div>
+    <div class="login-title" v-else>
+      <div class="text1">输入验证码</div>
+      <div class="text2">验证码已发送到 {{ ruleForm.phone }}</div>
+      <div class="text3">{{ num }}S后重新发送</div>
     </div>
-    <div class="form">
-      <el-form
-        :model="ruleForm"
-        :rules="rules"
-        ref="ruleForm"
-        label-width="100px"
-        label-position="right"
+
+    <van-field
+      name="用户名"
+      :left-icon="require('../assets/icon_login_iphone.svg')"
+      placeholder="请输入手机号"
+      v-model="ruleForm.phone"
+      v-if="!isSend"
+    />
+    <div v-else class="code">
+      <div class="code-mask" v-html="mask(ruleForm.code)"></div>
+      <van-field v-model="ruleForm.code" type="digit" maxlength="6" />
+    </div>
+
+    <div class="submit">
+      <van-button
+        :disabled="ruleForm.code.length === 6"
+        v-if="isSend"
+        block
+        round
+        :color="$colors.prim"
+        @click="login"
+        >确认</van-button
+      >
+      <van-button
+        :disabled="!ruleForm.phone"
+        v-else
+        block
+        round
+        :color="$colors.prim"
+        @click="sendSms"
+        >发送验证码</van-button
       >
-        <el-form-item label="手机号" prop="phone">
-          <el-input v-model="ruleForm.phone"></el-input>
-        </el-form-item>
-        <el-form-item label="验证码" prop="code" class="ipt">
-          <el-input v-model="ruleForm.code"></el-input>
-          <div class="code" @click="sendSms" :class="{ noSend: isSend }">
-            {{ isSend ? `已发送(${num}S)` : "发送验证码" }}
-          </div>
-        </el-form-item>
-      </el-form>
     </div>
-    <div class="button" @click="login">登录</div>
   </div>
 </template>
 
 <script>
 export default {
   name: "login",
+  metaInfo() {
+    return {
+      title: "文旅局艺考监管平台"
+    };
+  },
   data() {
     return {
       ruleForm: {
         phone: "18000000000",
         code: ""
       },
-      rules: {
-        phone: [{ required: true, message: "请输入手机号", trigger: "blur" }],
-        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
-      },
       isSend: false,
       num: 60
     };
   },
   methods: {
     login() {
-      //   this.$router.push({ name: "inspectorList" });
-      this.$refs.ruleForm.validate(valid => {
-        if (valid) {
-          this.loading = true;
-          this.$http
-            .post("/auth/phoneLogin", {
-              phone: this.ruleForm.phone
-            })
-            .then(res => {
-              localStorage.setItem("token", res);
-              return this.$http.get("/user/my");
-            })
-            .then(res => {
-              this.logining = false;
-              this.$store.commit("updateUserInfo", res);
-              this.$router.replace({ path: "/inspectorList" });
-            })
-            .catch(e => {
-              this.logining = false;
-              this.$message.error(e.error || "登录失败");
-            });
-        }
+      this.$toast.loading({
+        message: "加载中...",
+        forbidClick: true
       });
+      this.$http
+        .post("/auth/phoneLogin", {
+          phone: this.ruleForm.phone
+        })
+        .then(res => {
+          localStorage.setItem("token", res);
+          return this.$http.get("/user/my");
+        })
+        .then(res => {
+          this.$toast.clear();
+          this.$store.commit("updateUserInfo", res);
+          this.$router.replace({ path: "/inspectorList" });
+        })
+        .catch(e => {
+          this.$toast.clear();
+          this.$toast(e.error || "登录失败");
+        });
     },
     sendSms() {
-      this.$refs.ruleForm.validateField("phone", valid => {
-        console.log(valid);
-        if (!valid && !this.isSend) {
-          this.$http
-            .get("sms/sendVerify", {
-              phone: this.ruleForm.phone
-            })
-            .then(() => {
-              this.isSend = true;
-              this.changeTime(60);
-            });
-        }
-      });
+      if (!this.ruleForm.phone) {
+        this.$toast("手机号码不能为空");
+        return;
+      }
+
+      this.isSend = true;
+      this.changeTime(60);
     },
     changeTime(num) {
       this.num = num;
@@ -94,71 +103,115 @@ export default {
       } else {
         this.isSend = false;
       }
+    },
+    mask(code) {
+      var list = code.split("");
+      var _back = "";
+      _back += list
+        .map(item => {
+          return `<span>${item}</span>`;
+        })
+        .join("");
+      if (list.length < 6) {
+        for (var i = 0; i < 6 - list.length; i++) {
+          _back += "<span></span>";
+        }
+      }
+      return _back;
     }
   }
 };
 </script>
 <style lang="less" scoped>
 .login {
-  overflow: hidden;
-  .title {
-    font-size: 36px;
-    text-align: center;
-    font-weight: 700;
-    margin: 20px;
-  }
-  .form {
-    margin-top: 100px;
-    // text-align: center;
-    padding-left: 20px;
-    .el-form-item__label {
-      line-height: 30px;
-    }
-    .el-input {
-      height: 14px;
-      width: 150px;
-      + .el-input {
-        margin-top: 20px;
-      }
+  min-height: 100vh;
+  background-color: #fff;
+
+  .login-title {
+    font-size: 30px;
+    font-weight: bold;
+    color: #292c33;
+    line-height: 50px;
+    padding: 50px 30px 40px;
+
+    .text2 {
+      font-size: 14px;
+      color: #313233;
+      line-height: 24px;
+      margin-top: 11px;
+      font-weight: normal;
     }
-    /deep/.el-input__inner {
-      height: 30px;
-      //   border: none;
-      //   border-radius: 0px;
-      //   border-bottom: 1px solid #f2f3f5;
-      //   padding: 0px;
+
+    .text3 {
+      font-size: 14px;
+      color: #c4c7cc;
+      line-height: 24px;
+      margin-top: 6px;
+      font-weight: normal;
     }
-    .ipt {
-      position: relative;
+  }
+
+  .submit {
+    padding: 40px 48px;
+  }
+
+  .code {
+    position: relative;
+    .van-field {
+      position: absolute;
+      left: 0;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 2;
+      opacity: 0;
     }
-    .code {
+  }
+}
+</style>
+
+<style lang="less">
+.login {
+  .van-cell {
+    padding: 18px 25px;
+  }
+
+  .van-field {
+    position: relative;
+    &::after {
+      content: "";
       position: absolute;
-      right: 10px;
-      top: 5px;
-      padding: 0 5px;
-      height: 30px;
-      line-height: 30px;
-      text-align: center;
-      color: #fff;
-      font-size: 14px;
-      background-color: skyblue;
-      border-radius: 4px;
+      bottom: 0px;
+      background-color: #f5f7fa;
+      left: 30px;
+      right: 30px;
+      height: 1px;
+    }
+  }
+
+  .van-button {
+    height: 48px;
+  }
 
-      &.noSend {
-        background-color: rgb(170, 169, 169);
+  .code {
+    .code-mask {
+      display: flex;
+      justify-content: center;
+      span {
+        border-bottom: 1px solid #c4c7cc;
+        line-height: 60px;
+        font-size: 26px;
+        color: #000000;
+        letter-spacing: 1px;
+        display: inline-block;
+        width: 40px;
+        text-align: center;
+        height: 60px;
+        &:not(:first-child) {
+          margin-left: 15px;
+        }
       }
     }
   }
-  .button {
-    margin: 100px auto 0;
-    text-align: center;
-    width: 100px;
-    height: 30px;
-    line-height: 30px;
-    font-size: 14px;
-    background-color: skyblue;
-    border-radius: 4px;
-    color: #fff;
-  }
 }
 </style>

src/main/h5/vue.config.js

@@ -1,3 +1,18 @@
 module.exports = {
-    publicPath: process.env.NODE_ENV === 'production' ? '/h5/' : '/'
-}
+  publicPath: process.env.NODE_ENV === "production" ? "/h5/" : "/",
+  css: {
+    loaderOptions: {
+      less: {
+        // 若 less-loader 版本小于 6.0，请移除 lessOptions 这一级，直接配置选项。
+        lessOptions: {
+          modifyVars: {
+            // 直接覆盖变量
+            "button-primary-color": "#2C96FF",
+            "text-color": "#000",
+            "active-color": "#2C96FF"
+          }
+        }
+      }
+    }
+  }
+};

src/main/h5/yarn.lock

@@ -1594,16 +1594,40 @@ accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
+acorn-jsx@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/acorn-jsx/-/acorn-jsx-3.0.1.tgz#afdf9488fb1ecefc8348f6fb22f464e32a58b36b"
+  integrity sha1-r9+UiPsezvyDSPb7IvRk4ypYs2s=
+  dependencies:
+    acorn "^3.0.4"
+
 acorn-jsx@^5.2.0:
   version "5.3.1"
   resolved "https://registry.npm.taobao.org/acorn-jsx/download/acorn-jsx-5.3.1.tgz#fc8661e11b7ac1539c47dbfea2e72b3af34d267b"
   integrity sha1-/IZh4Rt6wVOcR9v+oucrOvNNJns=
 
+acorn-object-spread@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/acorn-object-spread/-/acorn-object-spread-1.0.0.tgz#48ead0f4a8eb16995a17a0db9ffc6acaada4ba68"
+  integrity sha1-SOrQ9KjrFplaF6Dbn/xqyq2kumg=
+  dependencies:
+    acorn "^3.1.0"
+
 acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.npm.taobao.org/acorn-walk/download/acorn-walk-7.2.0.tgz?cache=0&sync_timestamp=1611560672540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn-walk%2Fdownload%2Facorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha1-DeiJpgEgOQmw++B7iTjcIdLpZ7w=
 
+acorn@^3.0.4, acorn@^3.1.0, acorn@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
+  integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
+
+acorn@^5.2.1:
+  version "5.7.4"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.4.tgz#3e8d8a9947d0599a1796d10225d7432f4a4acf5e"
+  integrity sha512-1D++VG7BhrtvQpNbBzovKNc1FLGGEE/oGe7b9xJm/RFHMBeUaUGpluV9RLjZa47YFdPcDAenEYuq9pQPcMdLJg==
+
 acorn@^6.4.1:
   version "6.4.2"
   resolved "https://registry.npm.taobao.org/acorn/download/acorn-6.4.2.tgz?cache=0&sync_timestamp=1611561113015&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Facorn%2Fdownload%2Facorn-6.4.2.tgz#35866fd710528e92de10cf06016498e47e39e1e6"
@@ -2201,6 +2225,19 @@ browserslist@^4.0.0, browserslist@^4.12.0, browserslist@^4.14.5, browserslist@^4
     escalade "^3.1.1"
     node-releases "^1.1.70"
 
+buble@^0.15.0:
+  version "0.15.2"
+  resolved "https://registry.yarnpkg.com/buble/-/buble-0.15.2.tgz#547fc47483f8e5e8176d82aa5ebccb183b02d613"
+  integrity sha1-VH/EdIP45egXbYKqXrzLGDsC1hM=
+  dependencies:
+    acorn "^3.3.0"
+    acorn-jsx "^3.0.1"
+    acorn-object-spread "^1.0.0"
+    chalk "^1.1.3"
+    magic-string "^0.14.0"
+    minimist "^1.2.0"
+    os-homedir "^1.0.1"
+
 buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.npm.taobao.org/buffer-from/download/buffer-from-1.1.1.tgz#32713bc028f75c02fdb710d7c7bcec1f2c6070ef"
@@ -2230,6 +2267,11 @@ buffer@^4.3.0:
     ieee754 "^1.1.4"
     isarray "^1.0.0"
 
+builtin-modules@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/builtin-modules/-/builtin-modules-2.0.0.tgz#60b7ef5ae6546bd7deefa74b08b62a43a232648e"
+  integrity sha512-3U5kUA5VPsRUA3nofm/BXX7GVHKfxz0hOBAPxXrIvHzlDRkQVqEn6yi8QJegxl4LzOHLdvb7XF5dVawa/VVYBg==
+
 builtin-status-codes@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npm.taobao.org/builtin-status-codes/download/builtin-status-codes-3.0.0.tgz#85982878e21b98e1c66425e03d0174788f569ee8"
@@ -3743,6 +3785,21 @@ estraverse@^5.1.0, estraverse@^5.2.0:
   resolved "https://registry.npm.taobao.org/estraverse/download/estraverse-5.2.0.tgz#307df42547e6cc7324d3cf03c155d5cdb8c53880"
   integrity sha1-MH30JUfmzHMk088DwVXVzbjFOIA=
 
+estree-walker@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.2.1.tgz#bdafe8095383d8414d5dc2ecf4c9173b6db9412e"
+  integrity sha1-va/oCVOD2EFNXcLs9MkXO225QS4=
+
+estree-walker@^0.5.0:
+  version "0.5.2"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.5.2.tgz#d3850be7529c9580d815600b53126515e146dd39"
+  integrity sha512-XpCnW/AE10ws/kDAs37cngSkvgIR8aN3G0MS85m7dUpuK2EREo9VJ00uvw6Dg/hXEpfsE1I1TvJOJr+Z+TL+ig==
+
+estree-walker@^0.6.1:
+  version "0.6.1"
+  resolved "https://registry.yarnpkg.com/estree-walker/-/estree-walker-0.6.1.tgz#53049143f40c6eb918b23671d1fe3219f3a1b362"
+  integrity sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==
+
 esutils@^2.0.2:
   version "2.0.3"
   resolved "https://registry.npm.taobao.org/esutils/download/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
@@ -5080,6 +5137,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
+is-module@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/is-module/-/is-module-1.0.0.tgz#3258fb69f78c14d5b815d664336b4cffb6441591"
+  integrity sha1-Mlj7afeMFNW4FdZkM2tM/7ZEFZE=
+
 is-negative-zero@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npm.taobao.org/is-negative-zero/download/is-negative-zero-2.0.1.tgz?cache=0&sync_timestamp=1607123314998&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fis-negative-zero%2Fdownload%2Fis-negative-zero-2.0.1.tgz#3de746c18dda2319241a53675908d8f766f11c24"
@@ -5672,6 +5734,20 @@ lru-cache@^5.1.1:
   dependencies:
     yallist "^3.0.2"
 
+magic-string@^0.14.0:
+  version "0.14.0"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.14.0.tgz#57224aef1701caeed273b17a39a956e72b172462"
+  integrity sha1-VyJK7xcByu7Sc7F6OalW5ysXJGI=
+  dependencies:
+    vlq "^0.2.1"
+
+magic-string@^0.22.4:
+  version "0.22.5"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.22.5.tgz#8e9cf5afddf44385c1da5bc2a6a0dbd10b03657e"
+  integrity sha512-oreip9rJZkzvA8Qzk9HFs8fZGF/u7H/gtrE8EN6RjKJ9kh2HlC+yQ2QezifqTZfGyiuAV0dRv5a+y/8gBb1m9w==
+  dependencies:
+    vlq "^0.2.2"
+
 make-dir@^2.0.0, make-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npm.taobao.org/make-dir/download/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
@@ -5853,7 +5929,7 @@ minimalistic-crypto-utils@^1.0.1:
   resolved "https://registry.npm.taobao.org/minimalistic-crypto-utils/download/minimalistic-crypto-utils-1.0.1.tgz#f6c00c1c0b082246e5c4d99dfb8c7c083b2b582a"
   integrity sha1-9sAMHAsIIkblxNmd+4x8CDsrWCo=
 
-minimatch@^3.0.4:
+minimatch@^3.0.2, minimatch@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npm.taobao.org/minimatch/download/minimatch-3.0.4.tgz#5166e286457f03306064be5497e8dbb0c3d32083"
   integrity sha1-UWbihkV/AzBgZL5Ul+jbsMPTIIM=
@@ -6353,6 +6429,11 @@ os-browserify@^0.3.0:
   resolved "https://registry.npm.taobao.org/os-browserify/download/os-browserify-0.3.0.tgz#854373c7f5c2315914fc9bfc6bd8238fdda1ec27"
   integrity sha1-hUNzx/XCMVkU/Jv8a9gjj92h7Cc=
 
+os-homedir@^1.0.1:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/os-homedir/-/os-homedir-1.0.2.tgz#ffbc4988336e0e833de0c168c7ef152121aa7fb3"
+  integrity sha1-/7xJiDNuDoM94MFox+8VISGqf7M=
+
 os-tmpdir@~1.0.2:
   version "1.0.2"
   resolved "https://registry.npm.taobao.org/os-tmpdir/download/os-tmpdir-1.0.2.tgz#bbe67406c79aa85c5cfec766fe5734555dfa1274"
@@ -7418,7 +7499,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.npm.taobao.org/resolve-url/download/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2:
+resolve@^1.1.6, resolve@^1.10.0, resolve@^1.12.0, resolve@^1.14.2, resolve@^1.4.0:
   version "1.20.0"
   resolved "https://registry.npm.taobao.org/resolve/download/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"
   integrity sha1-YpoBP7P3B1XW8LeTXMHCxTeLGXU=
@@ -7496,6 +7577,56 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rollup-plugin-buble@^0.15.0:
+  version "0.15.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-buble/-/rollup-plugin-buble-0.15.0.tgz#83c3e89c7fd2266c7918f41ba3980313519c7fd0"
+  integrity sha1-g8PonH/SJmx5GPQbo5gDE1Gcf9A=
+  dependencies:
+    buble "^0.15.0"
+    rollup-pluginutils "^1.5.0"
+
+rollup-plugin-commonjs@^8.2.0:
+  version "8.4.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-commonjs/-/rollup-plugin-commonjs-8.4.1.tgz#5c9cea2b2c3de322f5fbccd147e07ed5e502d7a0"
+  integrity sha512-mg+WuD+jlwoo8bJtW3Mvx7Tz6TsIdMsdhuvCnDMoyjh0oxsVgsjB/N0X984RJCWwc5IIiqNVJhXeeITcc73++A==
+  dependencies:
+    acorn "^5.2.1"
+    estree-walker "^0.5.0"
+    magic-string "^0.22.4"
+    resolve "^1.4.0"
+    rollup-pluginutils "^2.0.1"
+
+rollup-plugin-json@^2.3.0:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-json/-/rollup-plugin-json-2.3.1.tgz#9759d27f33dcd2c896de18b6235df162b88edd77"
+  integrity sha512-alQQQVPo2z9pl6LSK8QqyDlWwCH5KeE8YxgQv7fa/SeTxz+gQe36jBjcha7hQW68MrVh9Ms71EQaMZDAG3w2yw==
+  dependencies:
+    rollup-pluginutils "^2.0.1"
+
+rollup-plugin-node-resolve@^3.0.0:
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-3.4.0.tgz#908585eda12e393caac7498715a01e08606abc89"
+  integrity sha512-PJcd85dxfSBWih84ozRtBkB731OjXk0KnzN0oGp7WOWcarAFkVa71cV5hTJg2qpVsV2U8EUwrzHP3tvy9vS3qg==
+  dependencies:
+    builtin-modules "^2.0.0"
+    is-module "^1.0.0"
+    resolve "^1.1.6"
+
+rollup-pluginutils@^1.5.0:
+  version "1.5.2"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-1.5.2.tgz#1e156e778f94b7255bfa1b3d0178be8f5c552408"
+  integrity sha1-HhVud4+UtyVb+hs9AXi+j1xVJAg=
+  dependencies:
+    estree-walker "^0.2.1"
+    minimatch "^3.0.2"
+
+rollup-pluginutils@^2.0.1:
+  version "2.8.2"
+  resolved "https://registry.yarnpkg.com/rollup-pluginutils/-/rollup-pluginutils-2.8.2.tgz#72f2af0748b592364dbd3389e600e5a9444a351e"
+  integrity sha512-EEp9NhnUkwY8aif6bxgovPHMoMoNr2FulJziTndpt5H9RdwC47GSGuII9XxpSdzVGM0GWrNPHV6ie1LTNJPaLQ==
+  dependencies:
+    estree-walker "^0.6.1"
+
 run-async@^2.4.0:
   version "2.4.1"
   resolved "https://registry.npm.taobao.org/run-async/download/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
@@ -8686,6 +8817,11 @@ verror@1.10.0:
     core-util-is "1.0.2"
     extsprintf "^1.2.0"
 
+vlq@^0.2.1, vlq@^0.2.2:
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/vlq/-/vlq-0.2.3.tgz#8f3e4328cf63b1540c0d67e1b2778386f8975b26"
+  integrity sha512-DRibZL6DsNhIgYQ+wNdWDL2SL3bKPlVrRiBqV5yuMm++op8W4kGFtaQfCs4KEJn0wBZcHVHJ3eoywX8983k1ow==
+
 vm-browserify@^1.0.1:
   version "1.1.2"
   resolved "https://registry.npm.taobao.org/vm-browserify/download/vm-browserify-1.1.2.tgz#78641c488b8e6ca91a75f511e7a3b32a86e5dda0"
@@ -8733,6 +8869,23 @@ vue-loader@^15.9.2:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-meta-info@^0.1.7:
+  version "0.1.7"
+  resolved "https://registry.yarnpkg.com/vue-meta-info/-/vue-meta-info-0.1.7.tgz#01063a7d77af93265d98558438c67bfda96dc2f3"
+  integrity sha512-0tfCM0XB6aU44ycijhGBCiLe9bLsFa82qZ1fA3gaEnvpQCw4Tnk6p5R3JpppZTThycr70ckf9Wx49C7ESDp75A==
+  dependencies:
+    rollup-plugin-buble "^0.15.0"
+    rollup-plugin-commonjs "^8.2.0"
+    rollup-plugin-json "^2.3.0"
+    rollup-plugin-node-resolve "^3.0.0"
+    vue "^2.4.2"
+    vue-router "^2.7.0"
+
+vue-router@^2.7.0:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/vue-router/-/vue-router-2.8.1.tgz#9833c9ee57ac83beb0269056fefee71713f20695"
+  integrity sha512-MC4jacHBhTPKtmcfzvaj2N7g6jgJ/Z/eIjZdt+yUaUOM1iKC0OUIlO/xCtz6OZFFTNUJs/1YNro2GN/lE+nOXA==
+
 vue-router@^3.2.0:
   version "3.5.1"
   resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-3.5.1.tgz?cache=0&sync_timestamp=1613740784642&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-3.5.1.tgz#edf3cf4907952d1e0583e079237220c5ff6eb6c9"
@@ -8759,7 +8912,7 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.npm.taobao.org/vue-template-es2015-compiler/download/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha1-HuO8mhbsv1EYvjNLsV+cRvgvWCU=
 
-vue@^2.6.11:
+vue@^2.4.2, vue@^2.6.11:
   version "2.6.12"
   resolved "https://registry.npm.taobao.org/vue/download/vue-2.6.12.tgz#f5ebd4fa6bd2869403e29a896aed4904456c9123"
   integrity sha1-9evU+mvShpQD4pqJau1JBEVskSM=