模拟假数据开发中

src/api/apiConfig/index.js

@@ -15,15 +15,15 @@ const axiosInstance = axios.create({
 function setAuth(config) {
   let userStorage = localStorage.getItem("user");
   if (userStorage && !config.noAuth) {
-    let user = JSON.parse(userStorage).user;
+    let loginInfo = JSON.parse(userStorage).loginInfo;
     const timestamp = Date.now();
     const authorization = getAuthorization(
       {
         method: config.method,
         uri: config.url.split("?")[0].trim(),
         timestamp,
-        sessionId: user.sessionId,
-        token: user.token,
+        sessionId: loginInfo.sessionId,
+        token: loginInfo.token,
       },
       "token"
     );
@@ -80,7 +80,8 @@ axiosInstance.interceptors.response.use(
           break;
         case 401:
           error.message = "请重新登录(401)";
-          router.replace({ name: "Login" });
+          //todo
+          // router.replace({ name: "Login" });
           break;
         case 403:
           error.message = "拒绝访问(403)";

src/api/user.js

@@ -9,3 +9,61 @@ export function login(data) {
     loading: true,
   });
 }
+
+//获取考生信息
+export function getStuInfo() {
+  return request({
+    url: "/api/student/info",
+    method: "post",
+  });
+}
+
+//获取系统常用属性
+export function getProperties() {
+  return request({
+    url: "/api/system/properties",
+    method: "post",
+    noAuth: true,
+  });
+}
+
+//获取考生当前进行中的预约列表(首页)
+export function getMyList() {
+  return request({
+    url: "/api/student/apply/list/for/current",
+    method: "post",
+  });
+}
+
+//获取预约考试页面的时段列表
+export function getReservationList(data) {
+  return request({
+    url: "/api/student/apply/time/period/list",
+    method: "post",
+    data,
+  });
+}
+
+//获取数据分类列表
+export function getCategoryList() {
+  return request({
+    url: "/api/student/category/list",
+    method: "post",
+  });
+}
+
+//获取“数据分类”关联的考点列表
+export function getSiteList() {
+  return request({
+    url: "/api/student/exam/site/list",
+    method: "post",
+  });
+}
+
+//获取可预约的日期列表
+export function getDateList() {
+  return request({
+    url: "/api/student/apply/date/list",
+    method: "post",
+  });
+}

src/assets/styles/base.css

@@ -42,7 +42,6 @@
 *::after {
   box-sizing: border-box;
   margin: 0;
-  position: relative;
   font-weight: normal;
 }
 body {

src/assets/styles/base.less

@@ -54,7 +54,6 @@
 *::after {
   box-sizing: border-box;
   margin: 0;
-  position: relative;
   font-weight: normal;
 }
 

src/assets/styles/main.css

@@ -0,0 +1,1947 @@
+/* 动画 */
+@keyframes ani-breathing {
+  from {
+    transform: scale(0.85);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+@keyframes ani-move-to-right {
+  0%,
+  50% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+@keyframes ani-cursor {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+/* 呼吸按钮 */
+.ani-breathing {
+  animation: ani-breathing 0.6s ease-out alternate infinite;
+}
+/* 高光动画 */
+.ani-move-to-right {
+  animation: ani-move-to-right 2s ease-out infinite;
+}
+/** 自定义光标闪烁 **/
+.ani-cursor {
+  animation: ani-cursor 0.5s linear alternate infinite;
+}
+@font-face {
+  font-family: "DIN-Bold";
+  src: url("/fonts/din-bold.otf");
+}
+@font-face {
+  font-family: "DIN-Regular";
+  src: url("/fonts/din-regular.otf");
+}
+@font-face {
+  font-family: "DIN-Black";
+  src: url("/fonts/DIN-Black.otf");
+}
+/* 字体名称 */
+.ff-DIN-Bold {
+  font-family: "DIN-Bold";
+}
+.ff-DIN-Black {
+  font-family: "DIN-Black";
+}
+.ff-DIN-Regular {
+  font-family: "DIN-Regular";
+}
+/* H5 */
+.tab-page {
+  padding-bottom: calc(var(--van-tabbar-height) + env(safe-area-inset-bottom));
+}
+.page {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.page,
+.tab-page {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f9f9f9;
+  font-family: PingFangSC-Regular, PingFang SC;
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+}
+.page .sub-page,
+.tab-page .sub-page {
+  padding-bottom: env(safe-area-inset-bottom);
+  position: absolute;
+  z-index: 1;
+  width: 100vw;
+  height: 100vh;
+  background-color: #f9f9f9;
+}
+/* 公共样式 */
+* {
+  touch-action: pan-y;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none !important;
+}
+img {
+  max-width: 100% !important;
+  width: 100%;
+  vertical-align: middle;
+}
+input {
+  outline: none;
+  border: none;
+}
+.coming-soon {
+  font-size: 32px;
+  text-align: center;
+  padding-top: 100px;
+  color: #778899;
+  letter-spacing: 2px;
+}
+/** 背景尺寸 */
+.bg-all {
+  background-size: 100% 100% !important;
+}
+.bg-cover {
+  background-size: cover !important;
+}
+.bg-contain {
+  background-size: contain !important;
+}
+/** 字体颜色 */
+.color-222222 {
+  color: #222222;
+}
+.color-333333 {
+  color: #333333;
+}
+.color-444444 {
+  color: #444444;
+}
+.color-555555 {
+  color: #555555;
+}
+.color-666666 {
+  color: #666666;
+}
+.color-777777 {
+  color: #777777;
+}
+.color-888888 {
+  color: #888888;
+}
+.color-999999 {
+  color: #999999;
+}
+.color-FFFFFF {
+  color: #ffffff;
+}
+/** 背景颜色 */
+.bg-F9F9F9 {
+  background-color: #f9f9f9;
+}
+.bg-EEEEEE {
+  background-color: #eeeeee;
+}
+.bg-DEDEDE {
+  background-color: #dedede;
+}
+.bg-FFFFFF {
+  background-color: #ffffff;
+}
+/** 尺寸相关 */
+.w-min-0 {
+  min-width: 0;
+}
+.w-0 {
+  width: 0;
+}
+.w-100 {
+  width: 100%;
+}
+.w-50 {
+  width: 50%;
+}
+.w-auto {
+  width: auto;
+}
+.h-100 {
+  height: 100%;
+}
+.h-auto {
+  height: auto;
+}
+.h-min-100 {
+  min-height: 100%;
+}
+.vw-100 {
+  width: 100vw;
+}
+.vh-100 {
+  height: 100vh;
+}
+/** 显示类型 **/
+.d-block {
+  display: block;
+}
+.d-inline {
+  display: inline;
+}
+.d-inline-block {
+  display: inline-block;
+}
+.d-flex {
+  display: flex;
+}
+.flex-1 {
+  flex: 1;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-h-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-h-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.flex-h-around {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.flex-h-start {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.flex-h-end {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.flex-v-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.flex-v {
+  flex-direction: column;
+}
+.flex-h {
+  flex-direction: row;
+}
+.flex-shrink {
+  flex-shrink: 0;
+}
+.justify-content-start {
+  justify-content: flex-start;
+}
+.justify-content-end {
+  justify-content: flex-end;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-between {
+  justify-content: space-between;
+}
+.justify-content-around {
+  justify-content: space-around;
+}
+.align-items-start {
+  align-items: flex-start;
+}
+.align-items-end {
+  align-items: flex-end;
+}
+.align-items-center {
+  align-items: center;
+}
+.align-items-baseline {
+  align-items: baseline;
+}
+/* 盒子模型 - 间距 */
+.p-1 {
+  padding-top: 1px;
+  padding-right: 1px;
+  padding-bottom: 1px;
+  padding-left: 1px;
+}
+.p-2 {
+  padding-top: 2px;
+  padding-right: 2px;
+  padding-bottom: 2px;
+  padding-left: 2px;
+}
+.p-3 {
+  padding-top: 3px;
+  padding-right: 3px;
+  padding-bottom: 3px;
+  padding-left: 3px;
+}
+.p-4 {
+  padding-top: 4px;
+  padding-right: 4px;
+  padding-bottom: 4px;
+  padding-left: 4px;
+}
+.p-6 {
+  padding-top: 6px;
+  padding-right: 6px;
+  padding-bottom: 6px;
+  padding-left: 6px;
+}
+.p-8 {
+  padding-top: 8px;
+  padding-right: 8px;
+  padding-bottom: 8px;
+  padding-left: 8px;
+}
+.p-10 {
+  padding-top: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+}
+.p-12 {
+  padding-top: 12px;
+  padding-right: 12px;
+  padding-bottom: 12px;
+  padding-left: 12px;
+}
+.p-15 {
+  padding-top: 15px;
+  padding-right: 15px;
+  padding-bottom: 15px;
+  padding-left: 15px;
+}
+.p-16 {
+  padding-top: 16px;
+  padding-right: 16px;
+  padding-bottom: 16px;
+  padding-left: 16px;
+}
+.px-2 {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.px-3 {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+.px-4 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.px-5 {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.px-6 {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.px-7 {
+  padding-left: 7px;
+  padding-right: 7px;
+}
+.px-8 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.px-9 {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+.px-10 {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.px-11 {
+  padding-left: 11px;
+  padding-right: 11px;
+}
+.px-12 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.px-13 {
+  padding-left: 13px;
+  padding-right: 13px;
+}
+.px-15 {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.px-16 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.px-17 {
+  padding-left: 17px;
+  padding-right: 17px;
+}
+.px-18 {
+  padding-left: 18px;
+  padding-right: 18px;
+}
+.px-20 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.px-22 {
+  padding-left: 22px;
+  padding-right: 22px;
+}
+.px-24 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.px-25 {
+  padding-left: 25px;
+  padding-right: 25px;
+}
+.px-27 {
+  padding-left: 27px;
+  padding-right: 27px;
+}
+.px-28 {
+  padding-left: 28px;
+  padding-right: 28px;
+}
+.px-30 {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+.px-33 {
+  padding-left: 33px;
+  padding-right: 33px;
+}
+.px-38 {
+  padding-left: 38px;
+  padding-right: 38px;
+}
+.px-40 {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+.py-1 {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+.py-2 {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.py-3 {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+.py-4 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.py-6 {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.py-8 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.py-9 {
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+.py-10 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.py-11 {
+  padding-top: 11px;
+  padding-bottom: 11px;
+}
+.py-12 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.py-13 {
+  padding-top: 13px;
+  padding-bottom: 13px;
+}
+.py-14 {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+.py-15 {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.py-16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.py-18 {
+  padding-top: 18px;
+  padding-bottom: 18px;
+}
+.py-20 {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.py-21 {
+  padding-top: 21px;
+  padding-bottom: 21px;
+}
+.py-22 {
+  padding-top: 22px;
+  padding-bottom: 22px;
+}
+.py-34 {
+  padding-top: 34px;
+  padding-bottom: 34px;
+}
+.pt-2 {
+  padding-top: 2px;
+}
+.pt-3 {
+  padding-top: 3px;
+}
+.pt-4 {
+  padding-top: 4px;
+}
+.pt-5 {
+  padding-top: 5px;
+}
+.pt-6 {
+  padding-top: 6px;
+}
+.pt-7 {
+  padding-top: 7px;
+}
+.pt-8 {
+  padding-top: 8px;
+}
+.pt-9 {
+  padding-top: 9px;
+}
+.pt-10 {
+  padding-top: 10px;
+}
+.pt-11 {
+  padding-top: 11px;
+}
+.pt-12 {
+  padding-top: 12px;
+}
+.pt-13 {
+  padding-top: 13px;
+}
+.pt-14 {
+  padding-top: 14px;
+}
+.pt-15 {
+  padding-top: 15px;
+}
+.pt-16 {
+  padding-top: 16px;
+}
+.pt-17 {
+  padding-top: 17px;
+}
+.pt-18 {
+  padding-top: 18px;
+}
+.pt-19 {
+  padding-top: 19px;
+}
+.pt-20 {
+  padding-top: 20px;
+}
+.pt-21 {
+  padding-top: 21px;
+}
+.pt-22 {
+  padding-top: 22px;
+}
+.pt-23 {
+  padding-top: 23px;
+}
+.pt-24 {
+  padding-top: 24px;
+}
+.pt-26 {
+  padding-top: 26px;
+}
+.pt-27 {
+  padding-top: 27px;
+}
+.pt-29 {
+  padding-top: 29px;
+}
+.pt-30 {
+  padding-top: 30px;
+}
+.pt-33 {
+  padding-top: 33px;
+}
+.pt-36 {
+  padding-top: 36px;
+}
+.pt-40 {
+  padding-top: 40px;
+}
+.pt-59 {
+  padding-top: 59px;
+}
+.pt-76 {
+  padding-top: 76px;
+}
+.pt-99 {
+  padding-top: 99px;
+}
+.pt-100 {
+  padding-top: 100px;
+}
+.pr-1 {
+  padding-right: 1px;
+}
+.pr-2 {
+  padding-right: 2px;
+}
+.pr-3 {
+  padding-right: 3px;
+}
+.pr-5 {
+  padding-right: 5px;
+}
+.pr-4 {
+  padding-right: 4px;
+}
+.pr-6 {
+  padding-right: 6px;
+}
+.pr-8 {
+  padding-right: 8px;
+}
+.pr-10 {
+  padding-right: 10px;
+}
+.pr-14 {
+  padding-right: 14px;
+}
+.pr-16 {
+  padding-right: 16px;
+}
+.pr-17 {
+  padding-right: 17px;
+}
+.pr-21 {
+  padding-right: 21px;
+}
+.pr-22 {
+  padding-right: 22px;
+}
+.pr-24 {
+  padding-right: 24px;
+}
+.pb-2 {
+  padding-bottom: 2px;
+}
+.pb-3 {
+  padding-bottom: 3px;
+}
+.pb-4 {
+  padding-bottom: 4px;
+}
+.pb-6 {
+  padding-bottom: 6px;
+}
+.pb-8 {
+  padding-bottom: 8px;
+}
+.pb-9 {
+  padding-bottom: 9px;
+}
+.pb-10 {
+  padding-bottom: 10px;
+}
+.pb-11 {
+  padding-bottom: 11px;
+}
+.pb-12 {
+  padding-bottom: 12px;
+}
+.pb-13 {
+  padding-bottom: 13px;
+}
+.pb-14 {
+  padding-bottom: 14px;
+}
+.pb-15 {
+  padding-bottom: 15px;
+}
+.pb-16 {
+  padding-bottom: 16px;
+}
+.pb-18 {
+  padding-bottom: 18px;
+}
+.pb-19 {
+  padding-bottom: 19px;
+}
+.pb-20 {
+  padding-bottom: 20px;
+}
+.pb-21 {
+  padding-bottom: 21px;
+}
+.pb-22 {
+  padding-bottom: 22px;
+}
+.pb-29 {
+  padding-bottom: 29px;
+}
+.pb-32 {
+  padding-bottom: 32px;
+}
+.pb-35 {
+  padding-bottom: 35px;
+}
+.pb-99 {
+  padding-bottom: 99px;
+}
+.pl-0 {
+  padding-left: 0px;
+}
+.pl-2 {
+  padding-left: 2px;
+}
+.pl-4 {
+  padding-left: 4px;
+}
+.pl-6 {
+  padding-left: 6px;
+}
+.pl-7 {
+  padding-left: 6px;
+}
+.pl-8 {
+  padding-left: 8px;
+}
+.pl-10 {
+  padding-left: 10px;
+}
+.pl-14 {
+  padding-left: 14px;
+}
+.pl-12 {
+  padding-left: 12px;
+}
+.pl-16 {
+  padding-left: 16px;
+}
+.pl-17 {
+  padding-left: 17px;
+}
+.pl-18 {
+  padding-left: 18px;
+}
+.pl-19 {
+  padding-left: 19px;
+}
+.pl-20 {
+  padding-left: 20px;
+}
+.pl-22 {
+  padding-left: 22px;
+}
+.pl-24 {
+  padding-left: 24px;
+}
+.pl-25 {
+  padding-left: 25px;
+}
+.pl-26 {
+  padding-left: 26px;
+}
+.pl-27 {
+  padding-left: 27px;
+}
+.pl-29 {
+  padding-left: 29px;
+}
+.pl-38 {
+  padding-left: 38px;
+}
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.mx-2 {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.mx-4 {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.mx-6 {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+.mx-8 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.mx-10 {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.mx-17 {
+  margin-left: 17px;
+  margin-right: 17px;
+}
+.mx-20 {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.mx-28 {
+  margin-left: 28px;
+  margin-right: 28px;
+}
+.my-2 {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+.my-3 {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+.my-4 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+.my-6 {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+.my-8 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.my-10 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.my-12 {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.my-14 {
+  margin-top: 14px;
+  margin-bottom: 14px;
+}
+.my-15 {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.my-16 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.my-24 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+.mt-1 {
+  margin-top: 1px;
+}
+.mt-2 {
+  margin-top: 2px;
+}
+.mt-3 {
+  margin-top: 3px;
+}
+.mt-4 {
+  margin-top: 4px;
+}
+.mt-5 {
+  margin-top: 5px;
+}
+.mt-6 {
+  margin-top: 6px;
+}
+.mt-7 {
+  margin-top: 7px;
+}
+.mt-8 {
+  margin-top: 8px;
+}
+.mt-9 {
+  margin-top: 9px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.mt-11 {
+  margin-top: 11px;
+}
+.mt-12 {
+  margin-top: 12px;
+}
+.mt-13 {
+  margin-top: 13px;
+}
+.mt-14 {
+  margin-top: 14px;
+}
+.mt-15 {
+  margin-top: 15px;
+}
+.mt-16 {
+  margin-top: 16px;
+}
+.mt-17 {
+  margin-top: 17px;
+}
+.mt-18 {
+  margin-top: 18px;
+}
+.mt-19 {
+  margin-top: 19px;
+}
+.mt-20 {
+  margin-top: 20px;
+}
+.mt-21 {
+  margin-top: 21px;
+}
+.mt-22 {
+  margin-top: 22px;
+}
+.mt-23 {
+  margin-top: 23px;
+}
+.mt-24 {
+  margin-top: 24px;
+}
+.mt-25 {
+  margin-top: 25px;
+}
+.mt-26 {
+  margin-top: 26px;
+}
+.mt-28 {
+  margin-top: 28px;
+}
+.mt-29 {
+  margin-top: 29px;
+}
+.mt-30 {
+  margin-top: 30px;
+}
+.mt-31 {
+  margin-top: 31px;
+}
+.mt-32 {
+  margin-top: 32px;
+}
+.mt-34 {
+  margin-top: 34px;
+}
+.mt-38 {
+  margin-top: 38px;
+}
+.mt-39 {
+  margin-top: 39px;
+}
+.mt-40 {
+  margin-top: 40px;
+}
+.mt-41 {
+  margin-top: 41px;
+}
+.mt-47 {
+  margin-top: 47px;
+}
+.mt-50 {
+  margin-top: 50px;
+}
+.mt-60 {
+  margin-top: 60px;
+}
+.mt-99 {
+  margin-top: 99px;
+}
+.mt-105 {
+  margin-top: 105px;
+}
+.mr-2 {
+  margin-right: 2px;
+}
+.mr-3 {
+  margin-right: 3px;
+}
+.mr-4 {
+  margin-right: 4px;
+}
+.mr-5 {
+  margin-right: 5px;
+}
+.mr-6 {
+  margin-right: 6px;
+}
+.mr-7 {
+  margin-right: 7px;
+}
+.mr-8 {
+  margin-right: 8px;
+}
+.mr-9 {
+  margin-right: 9px;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+.mr-11 {
+  margin-right: 11px;
+}
+.mr-12 {
+  margin-right: 12px;
+}
+.mr-13 {
+  margin-right: 13px;
+}
+.mr-14 {
+  margin-right: 14px;
+}
+.mr-15 {
+  margin-right: 15px;
+}
+.mr-16 {
+  margin-right: 16px;
+}
+.mr-18 {
+  margin-right: 18px;
+}
+.mr-20 {
+  margin-right: 20px;
+}
+.mr-21 {
+  margin-right: 21px;
+}
+.mr-25 {
+  margin-right: 25px;
+}
+.mr-30 {
+  margin-right: 30px;
+}
+.mr-35 {
+  margin-right: 35px;
+}
+.mr-40 {
+  margin-right: 40px;
+}
+.mr-79 {
+  margin-right: 79px;
+}
+.mb-0 {
+  margin-bottom: 0px;
+}
+.mb-1 {
+  margin-bottom: 1px;
+}
+.mb-2 {
+  margin-bottom: 2px;
+}
+.mb-3 {
+  margin-bottom: 3px;
+}
+.mb-4 {
+  margin-bottom: 4px;
+}
+.mb-5 {
+  margin-bottom: 5px;
+}
+.mb-6 {
+  margin-bottom: 6px;
+}
+.mb-7 {
+  margin-bottom: 7px;
+}
+.mb-8 {
+  margin-bottom: 8px;
+}
+.mb-9 {
+  margin-bottom: 9px;
+}
+.mb-10 {
+  margin-bottom: 10px;
+}
+.mb-11 {
+  margin-bottom: 11px;
+}
+.mb-12 {
+  margin-bottom: 12px;
+}
+.mb-13 {
+  margin-bottom: 13px;
+}
+.mb-14 {
+  margin-bottom: 14px;
+}
+.mb-15 {
+  margin-bottom: 15px;
+}
+.mb-16 {
+  margin-bottom: 16px;
+}
+.mb-17 {
+  margin-bottom: 17px;
+}
+.mb-18 {
+  margin-bottom: 18px;
+}
+.mb-19 {
+  margin-bottom: 19px;
+}
+.mb-20 {
+  margin-bottom: 20px;
+}
+.mb-21 {
+  margin-bottom: 21px;
+}
+.mb-23 {
+  margin-bottom: 23px;
+}
+.mb-24 {
+  margin-bottom: 24px;
+}
+.mb-25 {
+  margin-bottom: 25px;
+}
+.mb-26 {
+  margin-bottom: 26px;
+}
+.mb-28 {
+  margin-bottom: 28px;
+}
+.mb-30 {
+  margin-bottom: 30px;
+}
+.mb-31 {
+  margin-bottom: 32px;
+}
+.mb-32 {
+  margin-bottom: 32px;
+}
+.mb-36 {
+  margin-bottom: 36px;
+}
+.mb-39 {
+  margin-bottom: 39px;
+}
+.mb-48 {
+  margin-bottom: 48px;
+}
+.mb-50 {
+  margin-bottom: 50px;
+}
+.mb-66 {
+  margin-bottom: 66px;
+}
+.mb-99 {
+  margin-bottom: 99px;
+}
+.ml-2 {
+  margin-left: 2px;
+}
+.ml-3 {
+  margin-left: 3px;
+}
+.ml-4 {
+  margin-left: 4px;
+}
+.ml-5 {
+  margin-left: 5px;
+}
+.ml-6 {
+  margin-left: 6px;
+}
+.ml-7 {
+  margin-left: 7px;
+}
+.ml-8 {
+  margin-left: 8px;
+}
+.ml-10 {
+  margin-left: 10px;
+}
+.ml-12 {
+  margin-left: 12px;
+}
+.ml-13 {
+  margin-left: 13px;
+}
+.ml-15 {
+  margin-left: 15px;
+}
+.ml-16 {
+  margin-left: 16px;
+}
+.ml-17 {
+  margin-left: 17px;
+}
+.ml-20 {
+  margin-left: 20px;
+}
+.ml-22 {
+  margin-left: 22px;
+}
+.ml-23 {
+  margin-left: 23px;
+}
+.ml-24 {
+  margin-left: 24px;
+}
+.ml-35 {
+  margin-left: 35px;
+}
+/* 字体 - 粗细 */
+.f-100 {
+  font-weight: 100;
+}
+.f-200 {
+  font-weight: 200;
+}
+.f-300 {
+  font-weight: 300;
+}
+.f-400 {
+  font-weight: 400;
+}
+.f-500 {
+  font-weight: 500;
+}
+.f-600 {
+  font-weight: 600;
+}
+.f-700 {
+  font-weight: 700;
+}
+.f-800 {
+  font-weight: 800;
+}
+.f-900 {
+  font-weight: 900;
+}
+.f0 {
+  font-size: 0;
+}
+.f8 {
+  font-size: 8px;
+}
+.f9 {
+  font-size: 9px;
+}
+.f10 {
+  font-size: 10px;
+}
+.f11 {
+  font-size: 11px;
+}
+.f12 {
+  font-size: 12px;
+}
+.f13 {
+  font-size: 13px;
+}
+.f14 {
+  font-size: 14px;
+}
+.f15 {
+  font-size: 15px;
+}
+.f16 {
+  font-size: 16px;
+}
+.f17 {
+  font-size: 17px;
+}
+.f18 {
+  font-size: 18px;
+}
+.f19 {
+  font-size: 19px;
+}
+.f20 {
+  font-size: 20px;
+}
+.f21 {
+  font-size: 21px;
+}
+.f22 {
+  font-size: 22px;
+}
+.f23 {
+  font-size: 23px;
+}
+.f24 {
+  font-size: 24px;
+}
+.f25 {
+  font-size: 25px;
+}
+.f26 {
+  font-size: 26px;
+}
+.f27 {
+  font-size: 27px;
+}
+.f28 {
+  font-size: 28px;
+}
+.f29 {
+  font-size: 29px;
+}
+.f30 {
+  font-size: 30px;
+}
+.f32 {
+  font-size: 32px;
+}
+.f34 {
+  font-size: 34px;
+}
+.f35 {
+  font-size: 35px;
+}
+.f36 {
+  font-size: 36px;
+}
+.f38 {
+  font-size: 38px;
+}
+.f40 {
+  font-size: 40px;
+}
+.f43 {
+  font-size: 43px;
+}
+.f48 {
+  font-size: 48px;
+}
+.f50 {
+  font-size: 50px;
+}
+/* 字符间距 */
+.ls-1 {
+  letter-spacing: 1px;
+}
+.ls-2 {
+  letter-spacing: 2px;
+}
+/* 圆角 */
+.rounded-2 {
+  border-radius: 2px;
+}
+.rounded-3 {
+  border-radius: 3px;
+}
+.rounded-4 {
+  border-radius: 4px;
+}
+.rounded-6 {
+  border-radius: 6px;
+}
+.rounded-7 {
+  border-radius: 7px;
+}
+.rounded-8 {
+  border-radius: 8px;
+}
+.rounded-9 {
+  border-radius: 9px;
+}
+.rounded-10 {
+  border-radius: 10px;
+}
+.rounded-12 {
+  border-radius: 12px;
+}
+.rounded-13 {
+  border-radius: 13px;
+}
+.rounded-14 {
+  border-radius: 14px;
+}
+.rounded-15 {
+  border-radius: 15px;
+}
+.rounded-18 {
+  border-radius: 18px;
+}
+.rounded-19 {
+  border-radius: 19px;
+}
+.rounded-20 {
+  border-radius: 20px;
+}
+.rounded-22 {
+  border-radius: 22px;
+}
+.rounded-25 {
+  border-radius: 25px;
+}
+.rounded-49 {
+  border-radius: 49px;
+}
+.rounded-76 {
+  border-radius: 76px;
+}
+.rounded-circle {
+  border-radius: 50%;
+}
+/* 定位 */
+.position-relative {
+  position: relative;
+}
+.position-absolute {
+  position: absolute;
+}
+.position-fixed {
+  position: fixed;
+}
+.fixed-top {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.fixed-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.absolute-top {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.absolute-bottom {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.absolute-right {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.absolute-left {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
+.absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.absolute-tr {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+}
+.absolute-tl {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+.t-0 {
+  top: 0;
+}
+.t-2 {
+  top: 2px;
+}
+.t-3 {
+  top: 3px;
+}
+.t-11 {
+  top: 11px;
+}
+.t-14 {
+  top: 14px;
+}
+.r-0 {
+  right: 0;
+}
+.r-7 {
+  right: 7px;
+}
+.r-10 {
+  right: 10px;
+}
+.r-11 {
+  right: 11px;
+}
+.b-0 {
+  bottom: 0;
+}
+.b-7 {
+  bottom: 7px;
+}
+.b-10 {
+  bottom: 10px;
+}
+.l-0 {
+  left: 0;
+}
+.l-7 {
+  left: 7px;
+}
+.l-10 {
+  left: 10px;
+}
+/* 字体行高 */
+.lh-10 {
+  line-height: 10px;
+}
+.lh-12 {
+  line-height: 12px;
+}
+.lh-13 {
+  line-height: 13px;
+}
+.lh-14 {
+  line-height: 14px;
+}
+.lh-15 {
+  line-height: 15px;
+}
+.lh-16 {
+  line-height: 16px;
+}
+.lh-17 {
+  line-height: 17px;
+}
+.lh-18 {
+  line-height: 18px;
+}
+.lh-19 {
+  line-height: 19px;
+}
+.lh-20 {
+  line-height: 20px;
+}
+.lh-21 {
+  line-height: 21px;
+}
+.lh-22 {
+  line-height: 22px;
+}
+.lh-23 {
+  line-height: 23px;
+}
+.lh-24 {
+  line-height: 24px;
+}
+.lh-25 {
+  line-height: 25px;
+}
+.lh-26 {
+  line-height: 26px;
+}
+.lh-27 {
+  line-height: 27px;
+}
+.lh-28 {
+  line-height: 28px;
+}
+.lh-31 {
+  line-height: 31px;
+}
+.lh-30 {
+  line-height: 30px;
+}
+.lh-32 {
+  line-height: 32px;
+}
+.lh-33 {
+  line-height: 33px;
+}
+.lh-34 {
+  line-height: 34px;
+}
+.lh-35 {
+  line-height: 35px;
+}
+.lh-36 {
+  line-height: 36px;
+}
+.lh-37 {
+  line-height: 37px;
+}
+.lh-38 {
+  line-height: 38px;
+}
+.lh-40 {
+  line-height: 40px;
+}
+.lh-42 {
+  line-height: 42px;
+}
+.lh-43 {
+  line-height: 43px;
+}
+.lh-44 {
+  line-height: 44px;
+}
+.lh-47 {
+  line-height: 47px;
+}
+.lh-48 {
+  line-height: 48px;
+}
+.lh-49 {
+  line-height: 49px;
+}
+.lh-50 {
+  line-height: 50px;
+}
+.lh-59 {
+  line-height: 59px;
+}
+.lh-61 {
+  line-height: 61px;
+}
+.lh-66 {
+  line-height: 66px;
+}
+/* 滚动 */
+.over-hidden {
+  overflow: hidden;
+}
+.scroll-x {
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.scroll-y {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+/* 边框 */
+.border {
+  border: 1px solid #ececec;
+}
+.border-top {
+  border-top: 1px solid #ececec;
+}
+.border-right {
+  border-right: 1px solid #ececec;
+}
+.border-bottom {
+  border-bottom: 1px solid #ececec;
+}
+.border-left {
+  border-left: 1px solid #ececec;
+}
+.border-0 {
+  border: none;
+}
+.border-top-0 {
+  border-top: none;
+}
+.border-right-0 {
+  border-right: none;
+}
+.border-bottom-0 {
+  border-bottom: none;
+}
+.border-left-0 {
+  border-left: none;
+}
+.border-dashed {
+  border-style: dashed;
+}
+.border-transparent {
+  border-color: transparent;
+}
+.border-light {
+  border-color: #ffffff;
+}
+.border-dark {
+  border-color: #000000;
+}
+.border-FFCA2A {
+  border-color: #ffca2a;
+}
+.border-F1F1F1 {
+  border-color: #f1f1f1;
+}
+.border-F2F2F2 {
+  border-color: #f2f2f2;
+}
+.border-DBDBDB {
+  border-color: #dbdbdb;
+}
+.border-E5E5E5 {
+  border-color: #e5e5e5;
+}
+.border-FFC689 {
+  border-color: #ffc689;
+}
+/* 文本 */
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+.text-left {
+  text-align: left;
+}
+.text-break {
+  word-break: break-all;
+}
+/** 文本溢出 **/
+.line-clamp-1 {
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+.line-clamp-2 {
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.line-clamp-3 {
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
+/** 图标尺寸 */
+.icon-10x10 {
+  width: 10px;
+  height: 10px;
+}
+.icon-11x11 {
+  width: 11px;
+  height: 11px;
+}
+.icon-12x12 {
+  width: 12px;
+  height: 12px;
+}
+.icon-13x13 {
+  width: 13px;
+  height: 13px;
+}
+.icon-14x14 {
+  width: 14px;
+  height: 14px;
+}
+.icon-15x15 {
+  width: 15px;
+  height: 15px;
+}
+.icon-16x16 {
+  width: 16px;
+  height: 16px;
+}
+.icon-17x17 {
+  width: 17px;
+  height: 17px;
+}
+.icon-18x18 {
+  width: 18px;
+  height: 18px;
+}
+.icon-19x19 {
+  width: 19px;
+  height: 19px;
+}
+.icon-20x20 {
+  width: 20px;
+  height: 20px;
+}
+.icon-22x22 {
+  width: 22px;
+  height: 22px;
+}
+.icon-24x24 {
+  width: 24px;
+  height: 24px;
+}
+.icon-26x26 {
+  width: 26px;
+  height: 26px;
+}
+.icon-28x28 {
+  width: 28px;
+  height: 28px;
+}
+.icon-30x30 {
+  width: 30px;
+  height: 30px;
+}
+.icon-33x33 {
+  width: 33px;
+  height: 33px;
+}
+.icon-34x34 {
+  width: 34px;
+  height: 34px;
+}
+.icon-36x36 {
+  width: 36px;
+  height: 36px;
+}
+.icon-41x41 {
+  width: 41px;
+  height: 41px;
+}
+.icon-44x44 {
+  width: 44px;
+  height: 44px;
+}
+.icon-48x48 {
+  width: 48px;
+  height: 48px;
+}
+.icon-50x50 {
+  width: 50px;
+  height: 50px;
+}
+.icon-52x52 {
+  width: 52px;
+  height: 52px;
+}
+.icon-56x56 {
+  width: 56px;
+  height: 56px;
+}
+.icon-57x57 {
+  width: 57px;
+  height: 57px;
+}
+.icon-58x58 {
+  width: 58px;
+  height: 58px;
+}
+.icon-60x60 {
+  width: 60px;
+  height: 60px;
+}
+.icon-64x64 {
+  width: 64px;
+  height: 64px;
+}
+.icon-68x68 {
+  width: 68px;
+  height: 68px;
+}
+.icon-70x70 {
+  width: 70px;
+  height: 70px;
+}
+.icon-90x90 {
+  width: 90px;
+  height: 90px;
+}
+.object-fit-cover {
+  object-fit: cover;
+}
+/* 气泡框 */
+.bubble {
+  display: inline-block;
+  height: 14px;
+  background-color: #ff7e26;
+  border-radius: 2px;
+  padding: 0 4px;
+  color: #ffffff;
+  white-space: nowrap;
+  font-size: 9px;
+  text-align: center;
+  line-height: 14px;
+  position: relative;
+}
+.bubble::after {
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-color: #ff7e26 transparent transparent transparent;
+  border-width: 5px 3px 0 3px;
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+}
+/**
+ 微信公众号文章内图片样式处理
+*/
+.rich-html * {
+  max-width: 100% !important;
+}
+.rich-html img {
+  height: auto !important;
+}
+/* 层级 */
+.zIndex-1 {
+  z-index: 1;
+}
+.zIndex-2 {
+  z-index: 2;
+}
+/**
+	占位
+*/
+.space-43 {
+  height: 43px;
+}
+.space-50 {
+  height: 50px;
+}
+.space-88 {
+  height: 88px;
+}
+.space-89 {
+  height: 89px;
+}
+.space-99 {
+  height: 99px;
+}

src/assets/styles/main.less

@@ -1,715 +1,2000 @@
 /* 动画 */
-@keyframes ani-breathing { from { transform: scale(.85);} to { transform: scale(1);} }
-@keyframes ani-move-to-right  { 0%, 50% { left: -100%; } 100% { left: 100%; } }
-@keyframes ani-cursor { 0% { opacity: 0;} 100% { opacity: 1;} }
+@keyframes ani-breathing {
+  from {
+    transform: scale(0.85);
+  }
+  to {
+    transform: scale(1);
+  }
+}
+@keyframes ani-move-to-right {
+  0%,
+  50% {
+    left: -100%;
+  }
+  100% {
+    left: 100%;
+  }
+}
+@keyframes ani-cursor {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
 /* 呼吸按钮 */
-.ani-breathing { animation: ani-breathing .6s ease-out alternate infinite; }
+.ani-breathing {
+  animation: ani-breathing 0.6s ease-out alternate infinite;
+}
 /* 高光动画 */
-.ani-move-to-right  { animation: ani-move-to-right  2s ease-out  infinite; }
+.ani-move-to-right {
+  animation: ani-move-to-right 2s ease-out infinite;
+}
 /** 自定义光标闪烁 **/
-.ani-cursor { animation: ani-cursor 0.5s linear alternate infinite; }
+.ani-cursor {
+  animation: ani-cursor 0.5s linear alternate infinite;
+}
+
+@font-face {
+  font-family: "DIN-Bold";
+  src: url("/fonts/din-bold.otf");
+}
+@font-face {
+  font-family: "DIN-Regular";
+  src: url("/fonts/din-regular.otf");
+}
+@font-face {
+  font-family: "DIN-Black";
+  src: url("/fonts/DIN-Black.otf");
+}
+/* 字体名称 */
+.ff-DIN-Bold {
+  font-family: "DIN-Bold";
+}
+.ff-DIN-Black {
+  font-family: "DIN-Black";
+}
+.ff-DIN-Regular {
+  font-family: "DIN-Regular";
+}
+
+/* H5 */
+.tab-page {
+  padding-bottom: calc(var(--van-tabbar-height) + env(safe-area-inset-bottom));
+}
+.page {
+  padding-bottom: env(safe-area-inset-bottom);
+}
+.page,
+.tab-page {
+  width: 100%;
+  min-height: 100vh;
+  background-color: #f9f9f9;
+  font-family: PingFangSC-Regular, PingFang SC;
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  .sub-page {
+    padding-bottom: env(safe-area-inset-bottom);
+    position: absolute;
+    z-index: 1;
+    width: 100vw;
+    height: 100vh;
+    background-color: #f9f9f9;
+  }
+}
+
+/* 公共样式 */
+* {
+  touch-action: pan-y;
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none !important;
+}
+img {
+  max-width: 100% !important;
+  width: 100%;
+  vertical-align: middle;
+}
+input {
+  outline: none;
+  border: none;
+}
+.coming-soon {
+  font-size: 32px;
+  text-align: center;
+  padding-top: 100px;
+  color: #778899;
+  letter-spacing: 2px;
+}
+/** 背景尺寸 */
+.bg-all {
+  background-size: 100% 100% !important;
+}
+.bg-cover {
+  background-size: cover !important;
+}
+.bg-contain {
+  background-size: contain !important;
+}
+
+/** 字体颜色 */
+
+.color-222222 {
+  color: #222222;
+}
+.color-333333 {
+  color: #333333;
+}
+.color-444444 {
+  color: #444444;
+}
+.color-555555 {
+  color: #555555;
+}
+.color-666666 {
+  color: #666666;
+}
+.color-777777 {
+  color: #777777;
+}
+.color-888888 {
+  color: #888888;
+}
+.color-999999 {
+  color: #999999;
+}
+.color-FFFFFF {
+  color: #ffffff;
+}
+
+/** 背景颜色 */
+.bg-F9F9F9 {
+  background-color: #f9f9f9;
+}
+.bg-EEEEEE {
+  background-color: #eeeeee;
+}
+.bg-DEDEDE {
+  background-color: #dedede;
+}
+.bg-FFFFFF {
+  background-color: #ffffff;
+}
+
+/** 尺寸相关 */
+.w-min-0 {
+  min-width: 0;
+}
+.w-0 {
+  width: 0;
+}
+.w-100 {
+  width: 100%;
+}
+.w-50 {
+  width: 50%;
+}
+.w-auto {
+  width: auto;
+}
+
+.h-100 {
+  height: 100%;
+}
+.h-auto {
+  height: auto;
+}
+.h-min-100 {
+  min-height: 100%;
+}
+
+.vw-100 {
+  width: 100vw;
+}
+.vh-100 {
+  height: 100vh;
+}
+
+/** 显示类型 **/
+.d-block {
+  display: block;
+}
+.d-inline {
+  display: inline;
+}
+.d-inline-block {
+  display: inline-block;
+}
+.d-flex {
+  display: flex;
+}
+
+.flex-1 {
+  flex: 1;
+}
+.flex-wrap {
+  flex-wrap: wrap;
+}
+.flex-h-between {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.flex-h-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.flex-h-around {
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+.flex-h-start {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+.flex-h-end {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+}
+.flex-v-center {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.flex-v {
+  flex-direction: column;
+}
+.flex-h {
+  flex-direction: row;
+}
+.flex-shrink {
+  flex-shrink: 0;
+}
+
+.justify-content-start {
+  justify-content: flex-start;
+}
+.justify-content-end {
+  justify-content: flex-end;
+}
+.justify-content-center {
+  justify-content: center;
+}
+.justify-content-between {
+  justify-content: space-between;
+}
+.justify-content-around {
+  justify-content: space-around;
+}
+
+.align-items-start {
+  align-items: flex-start;
+}
+.align-items-end {
+  align-items: flex-end;
+}
+.align-items-center {
+  align-items: center;
+}
+.align-items-baseline {
+  align-items: baseline;
+}
+/* 盒子模型 - 间距 */
+
+.p-1 {
+  padding-top: 1px;
+  padding-right: 1px;
+  padding-bottom: 1px;
+  padding-left: 1px;
+}
+.p-2 {
+  padding-top: 2px;
+  padding-right: 2px;
+  padding-bottom: 2px;
+  padding-left: 2px;
+}
+.p-3 {
+  padding-top: 3px;
+  padding-right: 3px;
+  padding-bottom: 3px;
+  padding-left: 3px;
+}
+.p-4 {
+  padding-top: 4px;
+  padding-right: 4px;
+  padding-bottom: 4px;
+  padding-left: 4px;
+}
+.p-6 {
+  padding-top: 6px;
+  padding-right: 6px;
+  padding-bottom: 6px;
+  padding-left: 6px;
+}
+.p-8 {
+  padding-top: 8px;
+  padding-right: 8px;
+  padding-bottom: 8px;
+  padding-left: 8px;
+}
+.p-10 {
+  padding-top: 10px;
+  padding-right: 10px;
+  padding-bottom: 10px;
+  padding-left: 10px;
+}
+.p-12 {
+  padding-top: 12px;
+  padding-right: 12px;
+  padding-bottom: 12px;
+  padding-left: 12px;
+}
+.p-15 {
+  padding-top: 15px;
+  padding-right: 15px;
+  padding-bottom: 15px;
+  padding-left: 15px;
+}
+.p-16 {
+  padding-top: 16px;
+  padding-right: 16px;
+  padding-bottom: 16px;
+  padding-left: 16px;
+}
+
+.px-2 {
+  padding-left: 2px;
+  padding-right: 2px;
+}
+.px-3 {
+  padding-left: 3px;
+  padding-right: 3px;
+}
+.px-4 {
+  padding-left: 4px;
+  padding-right: 4px;
+}
+.px-5 {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.px-6 {
+  padding-left: 6px;
+  padding-right: 6px;
+}
+.px-7 {
+  padding-left: 7px;
+  padding-right: 7px;
+}
+.px-8 {
+  padding-left: 8px;
+  padding-right: 8px;
+}
+.px-9 {
+  padding-left: 9px;
+  padding-right: 9px;
+}
+.px-10 {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+.px-11 {
+  padding-left: 11px;
+  padding-right: 11px;
+}
+.px-12 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
+.px-13 {
+  padding-left: 13px;
+  padding-right: 13px;
+}
+.px-15 {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+.px-16 {
+  padding-left: 16px;
+  padding-right: 16px;
+}
+.px-17 {
+  padding-left: 17px;
+  padding-right: 17px;
+}
+.px-18 {
+  padding-left: 18px;
+  padding-right: 18px;
+}
+.px-20 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+.px-22 {
+  padding-left: 22px;
+  padding-right: 22px;
+}
+.px-24 {
+  padding-left: 24px;
+  padding-right: 24px;
+}
+.px-25 {
+  padding-left: 25px;
+  padding-right: 25px;
+}
+.px-27 {
+  padding-left: 27px;
+  padding-right: 27px;
+}
+.px-28 {
+  padding-left: 28px;
+  padding-right: 28px;
+}
+.px-30 {
+  padding-left: 30px;
+  padding-right: 30px;
+}
+.px-33 {
+  padding-left: 33px;
+  padding-right: 33px;
+}
+.px-38 {
+  padding-left: 38px;
+  padding-right: 38px;
+}
+.px-40 {
+  padding-left: 40px;
+  padding-right: 40px;
+}
+
+.py-1 {
+  padding-top: 1px;
+  padding-bottom: 1px;
+}
+.py-2 {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
+.py-3 {
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+.py-4 {
+  padding-top: 4px;
+  padding-bottom: 4px;
+}
+.py-6 {
+  padding-top: 6px;
+  padding-bottom: 6px;
+}
+.py-8 {
+  padding-top: 8px;
+  padding-bottom: 8px;
+}
+.py-9 {
+  padding-top: 9px;
+  padding-bottom: 9px;
+}
+.py-10 {
+  padding-top: 10px;
+  padding-bottom: 10px;
+}
+.py-11 {
+  padding-top: 11px;
+  padding-bottom: 11px;
+}
+.py-12 {
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+.py-13 {
+  padding-top: 13px;
+  padding-bottom: 13px;
+}
+.py-14 {
+  padding-top: 14px;
+  padding-bottom: 14px;
+}
+.py-15 {
+  padding-top: 15px;
+  padding-bottom: 15px;
+}
+.py-16 {
+  padding-top: 16px;
+  padding-bottom: 16px;
+}
+.py-18 {
+  padding-top: 18px;
+  padding-bottom: 18px;
+}
+.py-20 {
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+.py-21 {
+  padding-top: 21px;
+  padding-bottom: 21px;
+}
+.py-22 {
+  padding-top: 22px;
+  padding-bottom: 22px;
+}
+.py-34 {
+  padding-top: 34px;
+  padding-bottom: 34px;
+}
+
+.pt-2 {
+  padding-top: 2px;
+}
+.pt-3 {
+  padding-top: 3px;
+}
+.pt-4 {
+  padding-top: 4px;
+}
+.pt-5 {
+  padding-top: 5px;
+}
+.pt-6 {
+  padding-top: 6px;
+}
+.pt-7 {
+  padding-top: 7px;
+}
+.pt-8 {
+  padding-top: 8px;
+}
+.pt-9 {
+  padding-top: 9px;
+}
+.pt-10 {
+  padding-top: 10px;
+}
+.pt-11 {
+  padding-top: 11px;
+}
+.pt-12 {
+  padding-top: 12px;
+}
+.pt-13 {
+  padding-top: 13px;
+}
+.pt-14 {
+  padding-top: 14px;
+}
+.pt-15 {
+  padding-top: 15px;
+}
+.pt-16 {
+  padding-top: 16px;
+}
+.pt-17 {
+  padding-top: 17px;
+}
+.pt-18 {
+  padding-top: 18px;
+}
+.pt-19 {
+  padding-top: 19px;
+}
+.pt-20 {
+  padding-top: 20px;
+}
+.pt-21 {
+  padding-top: 21px;
+}
+.pt-22 {
+  padding-top: 22px;
+}
+.pt-23 {
+  padding-top: 23px;
+}
+.pt-24 {
+  padding-top: 24px;
+}
+.pt-26 {
+  padding-top: 26px;
+}
+.pt-27 {
+  padding-top: 27px;
+}
+.pt-29 {
+  padding-top: 29px;
+}
+.pt-30 {
+  padding-top: 30px;
+}
+.pt-33 {
+  padding-top: 33px;
+}
+.pt-36 {
+  padding-top: 36px;
+}
+.pt-40 {
+  padding-top: 40px;
+}
+.pt-59 {
+  padding-top: 59px;
+}
+.pt-76 {
+  padding-top: 76px;
+}
+.pt-99 {
+  padding-top: 99px;
+}
 
+.pt-100 {
+  padding-top: 100px;
+}
+
+.pr-1 {
+  padding-right: 1px;
+}
+.pr-2 {
+  padding-right: 2px;
+}
+.pr-3 {
+  padding-right: 3px;
+}
+.pr-5 {
+  padding-right: 5px;
+}
+.pr-4 {
+  padding-right: 4px;
+}
+.pr-6 {
+  padding-right: 6px;
+}
+.pr-8 {
+  padding-right: 8px;
+}
+.pr-10 {
+  padding-right: 10px;
+}
+.pr-14 {
+  padding-right: 14px;
+}
+.pr-16 {
+  padding-right: 16px;
+}
+.pr-17 {
+  padding-right: 17px;
+}
+.pr-21 {
+  padding-right: 21px;
+}
+.pr-22 {
+  padding-right: 22px;
+}
+.pr-24 {
+  padding-right: 24px;
+}
+
+.pb-2 {
+  padding-bottom: 2px;
+}
+.pb-3 {
+  padding-bottom: 3px;
+}
+.pb-4 {
+  padding-bottom: 4px;
+}
+.pb-6 {
+  padding-bottom: 6px;
+}
+.pb-8 {
+  padding-bottom: 8px;
+}
+.pb-9 {
+  padding-bottom: 9px;
+}
+.pb-10 {
+  padding-bottom: 10px;
+}
+.pb-11 {
+  padding-bottom: 11px;
+}
+.pb-12 {
+  padding-bottom: 12px;
+}
+.pb-13 {
+  padding-bottom: 13px;
+}
+.pb-14 {
+  padding-bottom: 14px;
+}
+.pb-15 {
+  padding-bottom: 15px;
+}
+.pb-16 {
+  padding-bottom: 16px;
+}
+.pb-18 {
+  padding-bottom: 18px;
+}
+.pb-19 {
+  padding-bottom: 19px;
+}
+.pb-20 {
+  padding-bottom: 20px;
+}
+.pb-21 {
+  padding-bottom: 21px;
+}
+.pb-22 {
+  padding-bottom: 22px;
+}
+.pb-29 {
+  padding-bottom: 29px;
+}
+.pb-32 {
+  padding-bottom: 32px;
+}
+.pb-35 {
+  padding-bottom: 35px;
+}
+.pb-99 {
+  padding-bottom: 99px;
+}
+
+.pl-0 {
+  padding-left: 0px;
+}
+.pl-2 {
+  padding-left: 2px;
+}
+.pl-4 {
+  padding-left: 4px;
+}
+.pl-6 {
+  padding-left: 6px;
+}
+.pl-7 {
+  padding-left: 6px;
+}
+.pl-8 {
+  padding-left: 8px;
+}
+.pl-10 {
+  padding-left: 10px;
+}
+.pl-14 {
+  padding-left: 14px;
+}
+.pl-12 {
+  padding-left: 12px;
+}
+.pl-16 {
+  padding-left: 16px;
+}
+.pl-17 {
+  padding-left: 17px;
+}
+.pl-18 {
+  padding-left: 18px;
+}
+.pl-19 {
+  padding-left: 19px;
+}
+.pl-20 {
+  padding-left: 20px;
+}
+.pl-22 {
+  padding-left: 22px;
+}
+.pl-24 {
+  padding-left: 24px;
+}
+.pl-25 {
+  padding-left: 25px;
+}
+.pl-26 {
+  padding-left: 26px;
+}
+.pl-27 {
+  padding-left: 27px;
+}
+.pl-29 {
+  padding-left: 29px;
+}
+.pl-38 {
+  padding-left: 38px;
+}
+
+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+.mx-2 {
+  margin-left: 2px;
+  margin-right: 2px;
+}
+.mx-4 {
+  margin-left: 4px;
+  margin-right: 4px;
+}
+.mx-6 {
+  margin-left: 6px;
+  margin-right: 6px;
+}
+.mx-8 {
+  margin-left: 8px;
+  margin-right: 8px;
+}
+.mx-10 {
+  margin-left: 10px;
+  margin-right: 10px;
+}
+.mx-17 {
+  margin-left: 17px;
+  margin-right: 17px;
+}
+.mx-20 {
+  margin-left: 20px;
+  margin-right: 20px;
+}
+.mx-28 {
+  margin-left: 28px;
+  margin-right: 28px;
+}
+
+.my-2 {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+.my-3 {
+  margin-top: 3px;
+  margin-bottom: 3px;
+}
+.my-4 {
+  margin-top: 4px;
+  margin-bottom: 4px;
+}
+.my-6 {
+  margin-top: 6px;
+  margin-bottom: 6px;
+}
+.my-8 {
+  margin-top: 8px;
+  margin-bottom: 8px;
+}
+.my-10 {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+.my-12 {
+  margin-top: 12px;
+  margin-bottom: 12px;
+}
+.my-14 {
+  margin-top: 14px;
+  margin-bottom: 14px;
+}
+.my-15 {
+  margin-top: 15px;
+  margin-bottom: 15px;
+}
+.my-16 {
+  margin-top: 16px;
+  margin-bottom: 16px;
+}
+.my-24 {
+  margin-top: 24px;
+  margin-bottom: 24px;
+}
+
+.mt-1 {
+  margin-top: 1px;
+}
+.mt-2 {
+  margin-top: 2px;
+}
+.mt-3 {
+  margin-top: 3px;
+}
+.mt-4 {
+  margin-top: 4px;
+}
+.mt-5 {
+  margin-top: 5px;
+}
+.mt-6 {
+  margin-top: 6px;
+}
+.mt-7 {
+  margin-top: 7px;
+}
+.mt-8 {
+  margin-top: 8px;
+}
+.mt-9 {
+  margin-top: 9px;
+}
+.mt-10 {
+  margin-top: 10px;
+}
+.mt-11 {
+  margin-top: 11px;
+}
+.mt-12 {
+  margin-top: 12px;
+}
+.mt-13 {
+  margin-top: 13px;
+}
+.mt-14 {
+  margin-top: 14px;
+}
+.mt-15 {
+  margin-top: 15px;
+}
+.mt-16 {
+  margin-top: 16px;
+}
+.mt-17 {
+  margin-top: 17px;
+}
+.mt-18 {
+  margin-top: 18px;
+}
+.mt-19 {
+  margin-top: 19px;
+}
+.mt-20 {
+  margin-top: 20px;
+}
+.mt-21 {
+  margin-top: 21px;
+}
+.mt-22 {
+  margin-top: 22px;
+}
+.mt-23 {
+  margin-top: 23px;
+}
+.mt-24 {
+  margin-top: 24px;
+}
+.mt-25 {
+  margin-top: 25px;
+}
+.mt-26 {
+  margin-top: 26px;
+}
+.mt-28 {
+  margin-top: 28px;
+}
+.mt-29 {
+  margin-top: 29px;
+}
+.mt-30 {
+  margin-top: 30px;
+}
+.mt-31 {
+  margin-top: 31px;
+}
+.mt-32 {
+  margin-top: 32px;
+}
+.mt-34 {
+  margin-top: 34px;
+}
+.mt-38 {
+  margin-top: 38px;
+}
+.mt-39 {
+  margin-top: 39px;
+}
+.mt-40 {
+  margin-top: 40px;
+}
+.mt-41 {
+  margin-top: 41px;
+}
+.mt-47 {
+  margin-top: 47px;
+}
+.mt-50 {
+  margin-top: 50px;
+}
+.mt-60 {
+  margin-top: 60px;
+}
+.mt-99 {
+  margin-top: 99px;
+}
+.mt-105 {
+  margin-top: 105px;
+}
+
+.mr-2 {
+  margin-right: 2px;
+}
+.mr-3 {
+  margin-right: 3px;
+}
+.mr-4 {
+  margin-right: 4px;
+}
+.mr-5 {
+  margin-right: 5px;
+}
+.mr-6 {
+  margin-right: 6px;
+}
+.mr-7 {
+  margin-right: 7px;
+}
+.mr-8 {
+  margin-right: 8px;
+}
+.mr-9 {
+  margin-right: 9px;
+}
+.mr-10 {
+  margin-right: 10px;
+}
+.mr-11 {
+  margin-right: 11px;
+}
+.mr-12 {
+  margin-right: 12px;
+}
+.mr-13 {
+  margin-right: 13px;
+}
+.mr-14 {
+  margin-right: 14px;
+}
+.mr-15 {
+  margin-right: 15px;
+}
+.mr-16 {
+  margin-right: 16px;
+}
+.mr-18 {
+  margin-right: 18px;
+}
+.mr-20 {
+  margin-right: 20px;
+}
+.mr-21 {
+  margin-right: 21px;
+}
+.mr-25 {
+  margin-right: 25px;
+}
+.mr-30 {
+  margin-right: 30px;
+}
+.mr-35 {
+  margin-right: 35px;
+}
+.mr-40 {
+  margin-right: 40px;
+}
+.mr-79 {
+  margin-right: 79px;
+}
+
+.mb-0 {
+  margin-bottom: 0px;
+}
+.mb-1 {
+  margin-bottom: 1px;
+}
+.mb-2 {
+  margin-bottom: 2px;
+}
+.mb-3 {
+  margin-bottom: 3px;
+}
+.mb-4 {
+  margin-bottom: 4px;
+}
+.mb-5 {
+  margin-bottom: 5px;
+}
+.mb-6 {
+  margin-bottom: 6px;
+}
+.mb-7 {
+  margin-bottom: 7px;
+}
+.mb-8 {
+  margin-bottom: 8px;
+}
+.mb-9 {
+  margin-bottom: 9px;
+}
+.mb-10 {
+  margin-bottom: 10px;
+}
+.mb-11 {
+  margin-bottom: 11px;
+}
+.mb-12 {
+  margin-bottom: 12px;
+}
+.mb-13 {
+  margin-bottom: 13px;
+}
+.mb-14 {
+  margin-bottom: 14px;
+}
+.mb-15 {
+  margin-bottom: 15px;
+}
+.mb-16 {
+  margin-bottom: 16px;
+}
+.mb-17 {
+  margin-bottom: 17px;
+}
+.mb-18 {
+  margin-bottom: 18px;
+}
+.mb-19 {
+  margin-bottom: 19px;
+}
+.mb-20 {
+  margin-bottom: 20px;
+}
+.mb-21 {
+  margin-bottom: 21px;
+}
+.mb-23 {
+  margin-bottom: 23px;
+}
+.mb-24 {
+  margin-bottom: 24px;
+}
+.mb-25 {
+  margin-bottom: 25px;
+}
+.mb-26 {
+  margin-bottom: 26px;
+}
+.mb-28 {
+  margin-bottom: 28px;
+}
+.mb-30 {
+  margin-bottom: 30px;
+}
+.mb-31 {
+  margin-bottom: 32px;
+}
+.mb-32 {
+  margin-bottom: 32px;
+}
+.mb-36 {
+  margin-bottom: 36px;
+}
+.mb-39 {
+  margin-bottom: 39px;
+}
+.mb-48 {
+  margin-bottom: 48px;
+}
+.mb-50 {
+  margin-bottom: 50px;
+}
+.mb-66 {
+  margin-bottom: 66px;
+}
+.mb-99 {
+  margin-bottom: 99px;
+}
 
-@font-face {
-	font-family: 'DIN-Bold';
-	src: url('/fonts/din-bold.otf');
+.ml-2 {
+  margin-left: 2px;
 }
-@font-face {
-	font-family: 'DIN-Regular';
-	src: url('/fonts/din-regular.otf');
+.ml-3 {
+  margin-left: 3px;
 }
-@font-face {
-	font-family: 'DIN-Black';
-	src: url('/fonts/DIN-Black.otf');
+.ml-4 {
+  margin-left: 4px;
 }
-/* 字体名称 */
-.ff-DIN-Bold { font-family: 'DIN-Bold'; }
-.ff-DIN-Black { font-family: 'DIN-Black';}
-.ff-DIN-Regular { font-family: 'DIN-Regular'; }
-
-/* H5 */
-.tab-page { padding-bottom: calc(var(--van-tabbar-height) + env(safe-area-inset-bottom) ); }
-.page { padding-bottom: env(safe-area-inset-bottom); }
-.page, .tab-page {
-	width: 100%;
-	min-height: 100vh; 
-	background-color: #F9F9F9;
-	font-family: PingFangSC-Regular, PingFang SC;
-	-webkit-overflow-scrolling: touch;
-
-	display: flex; 
-	flex-direction: column;
-	justify-content: flex-start;
-
+.ml-5 {
+  margin-left: 5px;
 }
-
-/* 公共样式 */
-* { touch-action: pan-y; margin: 0; padding: 0; box-sizing: border-box; }
-a { text-decoration: none !important; }
-img { max-width: 100% !important; width: 100%; vertical-align: middle; }
-input { outline: none; border: none; }
-.coming-soon { 
-	font-size: 32px;
-	text-align: center;
-	padding-top: 100px;
-	color: #778899;
-	letter-spacing: 2px;
+.ml-6 {
+  margin-left: 6px;
+}
+.ml-7 {
+  margin-left: 7px;
+}
+.ml-8 {
+  margin-left: 8px;
+}
+.ml-10 {
+  margin-left: 10px;
+}
+.ml-12 {
+  margin-left: 12px;
+}
+.ml-13 {
+  margin-left: 13px;
+}
+.ml-15 {
+  margin-left: 15px;
+}
+.ml-16 {
+  margin-left: 16px;
+}
+.ml-17 {
+  margin-left: 17px;
+}
+.ml-20 {
+  margin-left: 20px;
+}
+.ml-22 {
+  margin-left: 22px;
+}
+.ml-23 {
+  margin-left: 23px;
+}
+.ml-24 {
+  margin-left: 24px;
+}
+.ml-35 {
+  margin-left: 35px;
 }
-/** 背景尺寸 */
-.bg-all { background-size: 100% 100% !important;}
-.bg-cover { background-size: cover !important;}
-.bg-contain { background-size: contain !important; }
-
-/** 字体颜色 */
-
-.color-222222 { color: #222222; }
-.color-333333 { color: #333333; }
-.color-444444 { color: #444444; }
-.color-555555 { color: #555555; }
-.color-666666 { color: #666666; }
-.color-777777 { color: #777777; }
-.color-888888 { color: #888888; }
-.color-999999 { color: #999999; }
-.color-FFFFFF { color: #FFFFFF; }
-
-
-/** 背景颜色 */
-.bg-F9F9F9 { background-color: #F9F9F9; }
-.bg-EEEEEE { background-color: #EEEEEE; }
-.bg-DEDEDE { background-color: #DEDEDE; }
-.bg-FFFFFF { background-color: #FFFFFF; }
-
-/** 尺寸相关 */
-.w-min-0 { min-width: 0; }
-.w-0 { width:  0; }
-.w-100 { width: 100%;  }
-.w-50  { width: 50%;   }
-.w-auto { width: auto;  }
-
-
-.h-100 { height: 100%; }
-.h-auto { height: auto; }
-.h-min-100 { min-height: 100%; }
-
-.vw-100 { width: 100vw; }
-.vh-100 { height: 100vh; }
-
-
-/** 显示类型 **/
-.d-block { display: block; }
-.d-inline { display: inline; }
-.d-inline-block { display: inline-block; }
-.d-flex { display: flex; }
-
-
-.flex-1 { flex: 1; }
-.flex-wrap { flex-wrap: wrap; }
-.flex-h-between { display: flex; justify-content: space-between; align-items: center;}
-.flex-h-center { display: flex; justify-content: center; align-items: center; }
-.flex-h-around { display: flex; justify-content: space-around; align-items: center;}
-.flex-h-start { display: flex; justify-content: flex-start; align-items: center;}
-.flex-h-end { display: flex; justify-content: flex-end; align-items: center;}
-.flex-v-center { display: flex; flex-direction: column; justify-content: center; align-items: center;}
-.flex-v { flex-direction: column; }
-.flex-h { flex-direction: row; }
-.flex-shrink { flex-shrink: 0; }
-
-.justify-content-start { justify-content: flex-start; }
-.justify-content-end { justify-content: flex-end; }
-.justify-content-center { justify-content: center; }
-.justify-content-between { justify-content: space-between; }
-.justify-content-around { justify-content: space-around; }
-
-.align-items-start { align-items: flex-start; }
-.align-items-end { align-items: flex-end; }
-.align-items-center { align-items: center; }
-.align-items-baseline { align-items: baseline; }
-/* 盒子模型 - 间距 */
-
-.p-1  { padding-top: 1px;  padding-right: 1px; padding-bottom: 1px; padding-left: 1px;}
-.p-2  { padding-top: 2px;  padding-right: 2px; padding-bottom: 2px; padding-left: 2px;}
-.p-3  { padding-top: 3px;  padding-right: 3px; padding-bottom: 3px; padding-left: 3px;}
-.p-4  { padding-top: 4px;  padding-right: 4px; padding-bottom: 4px; padding-left: 4px;}
-.p-6  { padding-top: 6px;  padding-right: 6px; padding-bottom: 6px; padding-left: 6px;}
-.p-8  { padding-top: 8px;  padding-right: 8px; padding-bottom: 8px; padding-left: 8px;}
-.p-10 { padding-top: 10px; padding-right: 10px; padding-bottom: 10px; padding-left: 10px;}
-.p-12 { padding-top: 12px; padding-right: 12px; padding-bottom: 12px; padding-left: 12px;}
-.p-15 { padding-top: 15px; padding-right: 15px; padding-bottom: 15px; padding-left: 15px;}
-.p-16 { padding-top: 16px; padding-right: 16px; padding-bottom: 16px; padding-left: 16px;}
-
-.px-2  { padding-left: 2px; padding-right: 2px; }
-.px-3  { padding-left: 3px; padding-right: 3px; }
-.px-4  { padding-left: 4px; padding-right: 4px; }
-.px-5  { padding-left: 5px; padding-right: 5px; }
-.px-6  { padding-left: 6px; padding-right: 6px; }
-.px-7  { padding-left: 7px; padding-right: 7px; }
-.px-8  { padding-left: 8px; padding-right: 8px; }
-.px-9  { padding-left: 9px; padding-right: 9px; }
-.px-10 { padding-left: 10px; padding-right: 10px; }
-.px-11 { padding-left: 11px; padding-right: 11px; }
-.px-12 { padding-left: 12px; padding-right: 12px; }
-.px-13 { padding-left: 13px; padding-right: 13px; }
-.px-15 { padding-left: 15px; padding-right: 15px; }
-.px-16 { padding-left: 16px; padding-right: 16px; }
-.px-17 { padding-left: 17px; padding-right: 17px; }
-.px-18 { padding-left: 18px; padding-right: 18px; }
-.px-20 { padding-left: 20px; padding-right: 20px; }
-.px-22 { padding-left: 22px; padding-right: 22px; }
-.px-24 { padding-left: 24px; padding-right: 24px; }
-.px-25 { padding-left: 25px; padding-right: 25px; }
-.px-27 { padding-left: 27px; padding-right: 27px; }
-.px-28 { padding-left: 28px; padding-right: 28px; }
-.px-30 { padding-left: 30px; padding-right: 30px; }
-.px-33 { padding-left: 33px; padding-right: 33px; }
-.px-38 { padding-left: 38px; padding-right: 38px; }
-.px-40 { padding-left: 40px; padding-right: 40px; }
-
-.py-1  { padding-top: 1px; padding-bottom: 1px;}
-.py-2  { padding-top: 2px; padding-bottom: 2px;}
-.py-3  { padding-top: 3px; padding-bottom: 3px;}
-.py-4  { padding-top: 4px; padding-bottom: 4px;}
-.py-6  { padding-top: 6px; padding-bottom: 6px;}
-.py-8  { padding-top: 8px; padding-bottom: 8px;}
-.py-9  { padding-top: 9px; padding-bottom: 9px;}
-.py-10 { padding-top: 10px; padding-bottom: 10px;}
-.py-11 { padding-top: 11px; padding-bottom: 11px;}
-.py-12 { padding-top: 12px; padding-bottom: 12px;}
-.py-13 { padding-top: 13px; padding-bottom: 13px;}
-.py-14 { padding-top: 14px; padding-bottom: 14px;}
-.py-15 { padding-top: 15px; padding-bottom: 15px;}
-.py-16 { padding-top: 16px; padding-bottom: 16px;}
-.py-18 { padding-top: 18px; padding-bottom: 18px;}
-.py-20 { padding-top: 20px; padding-bottom: 20px;}
-.py-21 { padding-top: 21px; padding-bottom: 21px;}
-.py-22 { padding-top: 22px; padding-bottom: 22px;}
-.py-34 { padding-top: 34px; padding-bottom: 34px;}
-
-.pt-2  { padding-top: 2px; }
-.pt-3  { padding-top: 3px; }
-.pt-4  { padding-top: 4px; }
-.pt-5  { padding-top: 5px; }
-.pt-6  { padding-top: 6px; }
-.pt-7  { padding-top: 7px; }
-.pt-8  { padding-top: 8px; }
-.pt-9  { padding-top: 9px; }
-.pt-10 { padding-top: 10px; }
-.pt-11 { padding-top: 11px; }
-.pt-12 { padding-top: 12px; }
-.pt-13 { padding-top: 13px; }
-.pt-14 { padding-top: 14px; }
-.pt-15 { padding-top: 15px; }
-.pt-16 { padding-top: 16px; }
-.pt-17 { padding-top: 17px; }
-.pt-18 { padding-top: 18px; }
-.pt-19 { padding-top: 19px; }
-.pt-20 { padding-top: 20px; }
-.pt-21 { padding-top: 21px; }
-.pt-22 { padding-top: 22px; }
-.pt-23 { padding-top: 23px; }
-.pt-24 { padding-top: 24px; }
-.pt-26 { padding-top: 26px; }
-.pt-27 { padding-top: 27px; }
-.pt-29 { padding-top: 29px; }
-.pt-30 { padding-top: 30px; }
-.pt-33 { padding-top: 33px; }
-.pt-36 { padding-top: 36px; }
-.pt-40 { padding-top: 40px; }
-.pt-59 { padding-top: 59px; }
-.pt-76 { padding-top: 76px; }
-.pt-99 { padding-top: 99px; }
-
-.pt-100 { padding-top: 100px; }
-
-.pr-1  { padding-right: 1px; }
-.pr-2  { padding-right: 2px; }
-.pr-3  { padding-right: 3px; }
-.pr-5  { padding-right: 5px; }
-.pr-4  { padding-right: 4px; }
-.pr-6  { padding-right: 6px; }
-.pr-8  { padding-right: 8px; }
-.pr-10 { padding-right: 10px; }
-.pr-14 { padding-right: 14px; }
-.pr-16 { padding-right: 16px; }
-.pr-17 { padding-right: 17px; }
-.pr-21 { padding-right: 21px; }
-.pr-22 { padding-right: 22px; }
-.pr-24 { padding-right: 24px; }
-
-.pb-2  { padding-bottom: 2px;  }
-.pb-3  { padding-bottom: 3px;  }
-.pb-4  { padding-bottom: 4px;  }
-.pb-6  { padding-bottom: 6px;  }
-.pb-8  { padding-bottom: 8px;  }
-.pb-9  { padding-bottom: 9px;  }
-.pb-10 { padding-bottom: 10px; }
-.pb-11 { padding-bottom: 11px; }
-.pb-12 { padding-bottom: 12px; }
-.pb-13 { padding-bottom: 13px; }
-.pb-14 { padding-bottom: 14px; }
-.pb-15 { padding-bottom: 15px; }
-.pb-16 { padding-bottom: 16px; }
-.pb-18 { padding-bottom: 18px; }
-.pb-19 { padding-bottom: 19px; }
-.pb-20 { padding-bottom: 20px; }
-.pb-21 { padding-bottom: 21px; }
-.pb-22 { padding-bottom: 22px; }
-.pb-29 { padding-bottom: 29px; }
-.pb-32 { padding-bottom: 32px; }
-.pb-35 { padding-bottom: 35px; }
-.pb-99 { padding-bottom: 99px; }
-
-.pl-0  { padding-left: 0px;  }
-.pl-2  { padding-left: 2px;  } 
-.pl-4  { padding-left: 4px;  }
-.pl-6  { padding-left: 6px;  }
-.pl-7  { padding-left: 6px;  }
-.pl-8  { padding-left: 8px;  }
-.pl-10 { padding-left: 10px; }
-.pl-14 { padding-left: 14px; }
-.pl-12 { padding-left: 12px; }
-.pl-16 { padding-left: 16px; }
-.pl-17 { padding-left: 17px; }
-.pl-18 { padding-left: 18px; }
-.pl-19 { padding-left: 19px; }
-.pl-20 { padding-left: 20px; }
-.pl-22 { padding-left: 22px; }
-.pl-24 { padding-left: 24px; }
-.pl-25 { padding-left: 25px; }
-.pl-26 { padding-left: 26px; }
-.pl-27 { padding-left: 27px; }
-.pl-29 { padding-left: 29px; }
-.pl-38 { padding-left: 38px; }
-
-
-.mx-auto { margin-left: auto; margin-right: auto; }
-.mx-2  { margin-left: 2px; margin-right: 2px; }
-.mx-4  { margin-left: 4px; margin-right: 4px; }
-.mx-6  { margin-left: 6px; margin-right: 6px; }
-.mx-8  { margin-left: 8px; margin-right: 8px; }
-.mx-10 { margin-left: 10px; margin-right: 10px; }
-.mx-17 { margin-left: 17px; margin-right: 17px; }
-.mx-20 { margin-left: 20px; margin-right: 20px; }
-.mx-28 { margin-left: 28px; margin-right: 28px; }
-
-.my-2  { margin-top: 2px; margin-bottom: 2px; }
-.my-3  { margin-top: 3px; margin-bottom: 3px; }
-.my-4  { margin-top: 4px; margin-bottom: 4px; }
-.my-6  { margin-top: 6px; margin-bottom: 6px; }
-.my-8  { margin-top: 8px; margin-bottom: 8px; }
-.my-10 { margin-top: 10px; margin-bottom: 10px; }
-.my-12 { margin-top: 12px; margin-bottom: 12px; }
-.my-14 { margin-top: 14px; margin-bottom: 14px; }
-.my-15 { margin-top: 15px; margin-bottom: 15px; }
-.my-16 { margin-top: 16px; margin-bottom: 16px; }
-.my-24 { margin-top: 24px; margin-bottom: 24px; }
-
-.mt-1  { margin-top: 1px; }
-.mt-2  { margin-top: 2px; }
-.mt-3  { margin-top: 3px; }
-.mt-4  { margin-top: 4px; }
-.mt-5  { margin-top: 5px; }
-.mt-6  { margin-top: 6px; }
-.mt-7  { margin-top: 7px; }
-.mt-8  { margin-top: 8px; }
-.mt-9  { margin-top: 9px; }
-.mt-10 { margin-top: 10px; }
-.mt-11 { margin-top: 11px; }
-.mt-12 { margin-top: 12px; }
-.mt-13 { margin-top: 13px; }
-.mt-14 { margin-top: 14px; }
-.mt-15 { margin-top: 15px; }
-.mt-16 { margin-top: 16px; }
-.mt-17 { margin-top: 17px; }
-.mt-18 { margin-top: 18px; }
-.mt-19 { margin-top: 19px; }
-.mt-20 { margin-top: 20px; }
-.mt-21 { margin-top: 21px; }
-.mt-22 { margin-top: 22px; }
-.mt-23 { margin-top: 23px; }
-.mt-24 { margin-top: 24px; }
-.mt-25 { margin-top: 25px; }
-.mt-26 { margin-top: 26px; }
-.mt-28 { margin-top: 28px; }
-.mt-29 { margin-top: 29px; }
-.mt-30 { margin-top: 30px; }
-.mt-31 { margin-top: 31px; }
-.mt-32 { margin-top: 32px; }
-.mt-34 { margin-top: 34px; }
-.mt-38 { margin-top: 38px; }
-.mt-39 { margin-top: 39px; }
-.mt-40 { margin-top: 40px; }
-.mt-41 { margin-top: 41px; }
-.mt-47 { margin-top: 47px; }
-.mt-50 { margin-top: 50px; }
-.mt-60 { margin-top: 60px; }
-.mt-99 { margin-top: 99px; }
-.mt-105 { margin-top: 105px; }
-
-
-.mr-2  { margin-right: 2px; }
-.mr-3  { margin-right: 3px; }
-.mr-4  { margin-right: 4px; }
-.mr-5  { margin-right: 5px; }
-.mr-6  { margin-right: 6px; }
-.mr-7  { margin-right: 7px; }
-.mr-8  { margin-right: 8px; }
-.mr-9  { margin-right: 9px; }
-.mr-10 { margin-right: 10px; }
-.mr-11 { margin-right: 11px; }
-.mr-12 { margin-right: 12px; }
-.mr-13 { margin-right: 13px; }
-.mr-14 { margin-right: 14px; }
-.mr-15 { margin-right: 15px; }
-.mr-16 { margin-right: 16px; }
-.mr-18 { margin-right: 18px; }
-.mr-20 { margin-right: 20px; }
-.mr-21 { margin-right: 21px; }
-.mr-25 { margin-right: 25px; }
-.mr-30 { margin-right: 30px; }
-.mr-35 { margin-right: 35px; }
-.mr-40 { margin-right: 40px; }
-.mr-79 { margin-right: 79px; }
-
-.mb-0  { margin-bottom: 0px; }
-.mb-1  { margin-bottom: 1px; }
-.mb-2  { margin-bottom: 2px; }
-.mb-3  { margin-bottom: 3px; }
-.mb-4  { margin-bottom: 4px; }
-.mb-5  { margin-bottom: 5px; }
-.mb-6  { margin-bottom: 6px; }
-.mb-7  { margin-bottom: 7px; }
-.mb-8  { margin-bottom: 8px; }
-.mb-9  { margin-bottom: 9px; }
-.mb-10 { margin-bottom: 10px; }
-.mb-11 { margin-bottom: 11px; }
-.mb-12 { margin-bottom: 12px; }
-.mb-13 { margin-bottom: 13px; }
-.mb-14 { margin-bottom: 14px; }
-.mb-15 { margin-bottom: 15px; }
-.mb-16 { margin-bottom: 16px; }
-.mb-17 { margin-bottom: 17px; }
-.mb-18 { margin-bottom: 18px; }
-.mb-19 { margin-bottom: 19px; }
-.mb-20 { margin-bottom: 20px; }
-.mb-21 { margin-bottom: 21px; }
-.mb-23 { margin-bottom: 23px; }
-.mb-24 { margin-bottom: 24px; }
-.mb-25 { margin-bottom: 25px; }
-.mb-26 { margin-bottom: 26px; }
-.mb-28 { margin-bottom: 28px; }
-.mb-30 { margin-bottom: 30px; }
-.mb-31 { margin-bottom: 32px; }
-.mb-32 { margin-bottom: 32px; }
-.mb-36 { margin-bottom: 36px; }
-.mb-39 { margin-bottom: 39px; }
-.mb-48 { margin-bottom: 48px; }
-.mb-50 { margin-bottom: 50px; }
-.mb-66 { margin-bottom: 66px; }
-.mb-99 { margin-bottom: 99px; }
-
-
-.ml-2  { margin-left: 2px; }
-.ml-3  { margin-left: 3px; }
-.ml-4  { margin-left: 4px; }
-.ml-5  { margin-left: 5px; }
-.ml-6  { margin-left: 6px; }
-.ml-7  { margin-left: 7px; }
-.ml-8  { margin-left: 8px; }
-.ml-10 { margin-left: 10px; }
-.ml-12 { margin-left: 12px; }
-.ml-13 { margin-left: 13px; }
-.ml-15 { margin-left: 15px; }
-.ml-16 { margin-left: 16px; }
-.ml-17 { margin-left: 17px; }
-.ml-20 { margin-left: 20px; }
-.ml-22 { margin-left: 22px; }
-.ml-23 { margin-left: 23px; }
-.ml-24 { margin-left: 24px; }
-.ml-35 { margin-left: 35px; }
-
 
 /* 字体 - 粗细 */
-.f-100 { font-weight: 100; }
-.f-200 { font-weight: 200; }
-.f-300 { font-weight: 300; }
-.f-400 { font-weight: 400; }
-.f-500 { font-weight: 500; }
-.f-600 { font-weight: 600; }
-.f-700 { font-weight: 700; }
-.f-800 { font-weight: 800; }
-.f-900 { font-weight: 900; }
-
-
-.f0  { font-size:  0;   }
-.f8  { font-size:  8px; }
-.f9  { font-size:  9px; }
-.f10 { font-size: 10px; }
-.f11 { font-size: 11px; }
-.f12 { font-size: 12px; }
-.f13 { font-size: 13px; }
-.f14 { font-size: 14px; }
-.f15 { font-size: 15px; }
-.f16 { font-size: 16px; }
-.f17 { font-size: 17px; }
-.f18 { font-size: 18px; }
-.f19 { font-size: 19px; }
-.f20 { font-size: 20px; }
-.f21 { font-size: 21px; }
-.f22 { font-size: 22px; }
-.f23 { font-size: 23px; }
-.f24 { font-size: 24px; }
-.f25 { font-size: 25px; }
-.f26 { font-size: 26px; }
-.f27 { font-size: 27px; }
-.f28 { font-size: 28px; }
-.f29 { font-size: 29px;}
-.f30 { font-size: 30px; }
-.f32 { font-size: 32px; }
-.f34 { font-size: 34px; }
-.f35 { font-size: 35px; }
-.f36 { font-size: 36px; }
-.f38 { font-size: 38px; }
-.f40 { font-size: 40px; }
-.f43 { font-size: 43px; }
-.f48 { font-size: 48px; }
-.f50 { font-size: 50px; }
+.f-100 {
+  font-weight: 100;
+}
+.f-200 {
+  font-weight: 200;
+}
+.f-300 {
+  font-weight: 300;
+}
+.f-400 {
+  font-weight: 400;
+}
+.f-500 {
+  font-weight: 500;
+}
+.f-600 {
+  font-weight: 600;
+}
+.f-700 {
+  font-weight: 700;
+}
+.f-800 {
+  font-weight: 800;
+}
+.f-900 {
+  font-weight: 900;
+}
+
+.f0 {
+  font-size: 0;
+}
+.f8 {
+  font-size: 8px;
+}
+.f9 {
+  font-size: 9px;
+}
+.f10 {
+  font-size: 10px;
+}
+.f11 {
+  font-size: 11px;
+}
+.f12 {
+  font-size: 12px;
+}
+.f13 {
+  font-size: 13px;
+}
+.f14 {
+  font-size: 14px;
+}
+.f15 {
+  font-size: 15px;
+}
+.f16 {
+  font-size: 16px;
+}
+.f17 {
+  font-size: 17px;
+}
+.f18 {
+  font-size: 18px;
+}
+.f19 {
+  font-size: 19px;
+}
+.f20 {
+  font-size: 20px;
+}
+.f21 {
+  font-size: 21px;
+}
+.f22 {
+  font-size: 22px;
+}
+.f23 {
+  font-size: 23px;
+}
+.f24 {
+  font-size: 24px;
+}
+.f25 {
+  font-size: 25px;
+}
+.f26 {
+  font-size: 26px;
+}
+.f27 {
+  font-size: 27px;
+}
+.f28 {
+  font-size: 28px;
+}
+.f29 {
+  font-size: 29px;
+}
+.f30 {
+  font-size: 30px;
+}
+.f32 {
+  font-size: 32px;
+}
+.f34 {
+  font-size: 34px;
+}
+.f35 {
+  font-size: 35px;
+}
+.f36 {
+  font-size: 36px;
+}
+.f38 {
+  font-size: 38px;
+}
+.f40 {
+  font-size: 40px;
+}
+.f43 {
+  font-size: 43px;
+}
+.f48 {
+  font-size: 48px;
+}
+.f50 {
+  font-size: 50px;
+}
 
 /* 字符间距 */
-.ls-1 { letter-spacing: 1px;}
-.ls-2 { letter-spacing: 2px;}
+.ls-1 {
+  letter-spacing: 1px;
+}
+.ls-2 {
+  letter-spacing: 2px;
+}
 
 /* 圆角 */
-.rounded-2  { border-radius: 2px; }
-.rounded-3  { border-radius: 3px; }
-.rounded-4  { border-radius: 4px; }
-.rounded-6  { border-radius: 6px; }
-.rounded-7  { border-radius: 7px; }
-.rounded-8  { border-radius: 8px; }
-.rounded-9  { border-radius: 9px; }
-.rounded-10 { border-radius: 10px;}
-.rounded-12 { border-radius: 12px;}
-.rounded-13 { border-radius: 13px;}
-.rounded-14 { border-radius: 14px;}
-.rounded-15 { border-radius: 15px;}
-.rounded-18 { border-radius: 18px;}
-.rounded-19 { border-radius: 19px;}
-.rounded-20 { border-radius: 20px;}
-.rounded-22 { border-radius: 22px;}
-.rounded-25 { border-radius: 25px;}
-.rounded-49 { border-radius: 49px;}
-.rounded-76 { border-radius: 76px;}
-.rounded-circle { border-radius: 50%; }
-
+.rounded-2 {
+  border-radius: 2px;
+}
+.rounded-3 {
+  border-radius: 3px;
+}
+.rounded-4 {
+  border-radius: 4px;
+}
+.rounded-6 {
+  border-radius: 6px;
+}
+.rounded-7 {
+  border-radius: 7px;
+}
+.rounded-8 {
+  border-radius: 8px;
+}
+.rounded-9 {
+  border-radius: 9px;
+}
+.rounded-10 {
+  border-radius: 10px;
+}
+.rounded-12 {
+  border-radius: 12px;
+}
+.rounded-13 {
+  border-radius: 13px;
+}
+.rounded-14 {
+  border-radius: 14px;
+}
+.rounded-15 {
+  border-radius: 15px;
+}
+.rounded-18 {
+  border-radius: 18px;
+}
+.rounded-19 {
+  border-radius: 19px;
+}
+.rounded-20 {
+  border-radius: 20px;
+}
+.rounded-22 {
+  border-radius: 22px;
+}
+.rounded-25 {
+  border-radius: 25px;
+}
+.rounded-49 {
+  border-radius: 49px;
+}
+.rounded-76 {
+  border-radius: 76px;
+}
+.rounded-circle {
+  border-radius: 50%;
+}
 
 /* 定位 */
-.position-relative { position: relative; }
-.position-absolute { position: absolute; }
-.position-fixed    { position: fixed; }
-
-.fixed-top { position: fixed; top: 0; left: 50%; transform: translateX(-50%); }
-.fixed-bottom { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); }
-
-
-.absolute-top { position: absolute; top: 0; left: 50%; transform: translateX(-50%); }
-.absolute-bottom { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); }
-.absolute-right { position: absolute; top: 50%; right: 0; transform: translateY(-50%);}
-.absolute-left { position: absolute; top: 50%; left: 0; transform: translateY(-50%); } 
-
-.absolute-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
-.absolute-tr { position: absolute; top: -1px; right: -1px; }
-.absolute-tl { position: absolute; top: 0; left: 0; }
-
-.t-0  { top: 0;   }
-.t-2  { top: 2px; }
-.t-3  { top: 3px; }
-.t-11 { top: 11px;}
-.t-14 { top: 14px; }
+.position-relative {
+  position: relative;
+}
+.position-absolute {
+  position: absolute;
+}
+.position-fixed {
+  position: fixed;
+}
 
+.fixed-top {
+  position: fixed;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.fixed-bottom {
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
 
-.r-0  { right: 0;    }
-.r-7  { right: 7px;  }
-.r-10 { right: 10px; }
-.r-11 { right: 11px; }
+.absolute-top {
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.absolute-bottom {
+  position: absolute;
+  bottom: 0;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.absolute-right {
+  position: absolute;
+  top: 50%;
+  right: 0;
+  transform: translateY(-50%);
+}
+.absolute-left {
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+}
 
-.b-0  { bottom: 0;   }
-.b-7  { bottom: 7px; }
-.b-10 { bottom: 10px;}
+.absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.absolute-tr {
+  position: absolute;
+  top: -1px;
+  right: -1px;
+}
+.absolute-tl {
+  position: absolute;
+  top: 0;
+  left: 0;
+}
 
+.t-0 {
+  top: 0;
+}
+.t-2 {
+  top: 2px;
+}
+.t-3 {
+  top: 3px;
+}
+.t-11 {
+  top: 11px;
+}
+.t-14 {
+  top: 14px;
+}
 
-.l-0  { left: 0;   }
-.l-7  { left: 7px; }
-.l-10 { left: 10px;}
+.r-0 {
+  right: 0;
+}
+.r-7 {
+  right: 7px;
+}
+.r-10 {
+  right: 10px;
+}
+.r-11 {
+  right: 11px;
+}
 
+.b-0 {
+  bottom: 0;
+}
+.b-7 {
+  bottom: 7px;
+}
+.b-10 {
+  bottom: 10px;
+}
 
+.l-0 {
+  left: 0;
+}
+.l-7 {
+  left: 7px;
+}
+.l-10 {
+  left: 10px;
+}
 
 /* 字体行高 */
-.lh-10 { line-height: 10px;}
-.lh-12 { line-height: 12px;}
-.lh-13 { line-height: 13px;}
-.lh-14 { line-height: 14px;}
-.lh-15 { line-height: 15px;}
-.lh-16 { line-height: 16px;}
-.lh-17 { line-height: 17px;}
-.lh-18 { line-height: 18px;}
-.lh-19 { line-height: 19px;}
-.lh-20 { line-height: 20px;}
-.lh-21 { line-height: 21px;}
-.lh-22 { line-height: 22px;}
-.lh-23 { line-height: 23px;}
-.lh-24 { line-height: 24px;}
-.lh-25 { line-height: 25px;}
-.lh-26 { line-height: 26px;}
-.lh-27 { line-height: 27px;}
-.lh-28 { line-height: 28px;}
-.lh-31 { line-height: 31px;}
-.lh-30 { line-height: 30px;}
-.lh-32 { line-height: 32px;}
-.lh-33 { line-height: 33px;}
-.lh-34 { line-height: 34px;}
-.lh-35 { line-height: 35px;}
-.lh-36 { line-height: 36px;}
-.lh-37 { line-height: 37px;}
-.lh-38 { line-height: 38px;}
-.lh-40 { line-height: 40px;}
-.lh-42 { line-height: 42px;}
-.lh-43 { line-height: 43px;}
-.lh-44 { line-height: 44px;}
-.lh-47 { line-height: 47px;}
-.lh-48 { line-height: 48px;}
-.lh-49 { line-height: 49px;}
-.lh-50 { line-height: 50px;}
-.lh-59 { line-height: 59px;}
-.lh-61 { line-height: 61px;}
-.lh-66 { line-height: 66px;}
-
-
+.lh-10 {
+  line-height: 10px;
+}
+.lh-12 {
+  line-height: 12px;
+}
+.lh-13 {
+  line-height: 13px;
+}
+.lh-14 {
+  line-height: 14px;
+}
+.lh-15 {
+  line-height: 15px;
+}
+.lh-16 {
+  line-height: 16px;
+}
+.lh-17 {
+  line-height: 17px;
+}
+.lh-18 {
+  line-height: 18px;
+}
+.lh-19 {
+  line-height: 19px;
+}
+.lh-20 {
+  line-height: 20px;
+}
+.lh-21 {
+  line-height: 21px;
+}
+.lh-22 {
+  line-height: 22px;
+}
+.lh-23 {
+  line-height: 23px;
+}
+.lh-24 {
+  line-height: 24px;
+}
+.lh-25 {
+  line-height: 25px;
+}
+.lh-26 {
+  line-height: 26px;
+}
+.lh-27 {
+  line-height: 27px;
+}
+.lh-28 {
+  line-height: 28px;
+}
+.lh-31 {
+  line-height: 31px;
+}
+.lh-30 {
+  line-height: 30px;
+}
+.lh-32 {
+  line-height: 32px;
+}
+.lh-33 {
+  line-height: 33px;
+}
+.lh-34 {
+  line-height: 34px;
+}
+.lh-35 {
+  line-height: 35px;
+}
+.lh-36 {
+  line-height: 36px;
+}
+.lh-37 {
+  line-height: 37px;
+}
+.lh-38 {
+  line-height: 38px;
+}
+.lh-40 {
+  line-height: 40px;
+}
+.lh-42 {
+  line-height: 42px;
+}
+.lh-43 {
+  line-height: 43px;
+}
+.lh-44 {
+  line-height: 44px;
+}
+.lh-47 {
+  line-height: 47px;
+}
+.lh-48 {
+  line-height: 48px;
+}
+.lh-49 {
+  line-height: 49px;
+}
+.lh-50 {
+  line-height: 50px;
+}
+.lh-59 {
+  line-height: 59px;
+}
+.lh-61 {
+  line-height: 61px;
+}
+.lh-66 {
+  line-height: 66px;
+}
 
 /* 滚动 */
-.over-hidden { overflow: hidden; }
-.scroll-x { overflow-x: scroll; -webkit-overflow-scrolling: touch; }
-.scroll-y { overflow-y: scroll; -webkit-overflow-scrolling: touch; } 
+.over-hidden {
+  overflow: hidden;
+}
+.scroll-x {
+  overflow-x: scroll;
+  -webkit-overflow-scrolling: touch;
+}
+.scroll-y {
+  overflow-y: scroll;
+  -webkit-overflow-scrolling: touch;
+}
 
 /* 边框 */
-.border { border: 1px solid #ECECEC;}
-.border-top { border-top: 1px solid #ECECEC;}
-.border-right { border-right: 1px solid #ECECEC;}
-.border-bottom { border-bottom: 1px solid #ECECEC;}
-.border-left { border-left: 1px solid #ECECEC;}
-
-.border-0 { border: none;}
-.border-top-0 { border-top: none;}
-.border-right-0 { border-right: none;}
-.border-bottom-0 { border-bottom: none;}
-.border-left-0 { border-left: none;}
+.border {
+  border: 1px solid #ececec;
+}
+.border-top {
+  border-top: 1px solid #ececec;
+}
+.border-right {
+  border-right: 1px solid #ececec;
+}
+.border-bottom {
+  border-bottom: 1px solid #ececec;
+}
+.border-left {
+  border-left: 1px solid #ececec;
+}
 
-.border-dashed { border-style: dashed; }
+.border-0 {
+  border: none;
+}
+.border-top-0 {
+  border-top: none;
+}
+.border-right-0 {
+  border-right: none;
+}
+.border-bottom-0 {
+  border-bottom: none;
+}
+.border-left-0 {
+  border-left: none;
+}
 
-.border-transparent { border-color: transparent; }
-.border-light { border-color: #FFFFFF; }
-.border-dark  { border-color: #000000; }
+.border-dashed {
+  border-style: dashed;
+}
 
-.border-FFCA2A { border-color: #FFCA2A; }
-.border-F1F1F1 { border-color: #F1F1F1; }
-.border-F2F2F2 { border-color: #F2F2F2; }
-.border-DBDBDB { border-color: #DBDBDB; } 
-.border-E5E5E5 { border-color: #E5E5E5; }
-.border-FFC689 { border-color: #FFC689; }
+.border-transparent {
+  border-color: transparent;
+}
+.border-light {
+  border-color: #ffffff;
+}
+.border-dark {
+  border-color: #000000;
+}
 
+.border-FFCA2A {
+  border-color: #ffca2a;
+}
+.border-F1F1F1 {
+  border-color: #f1f1f1;
+}
+.border-F2F2F2 {
+  border-color: #f2f2f2;
+}
+.border-DBDBDB {
+  border-color: #dbdbdb;
+}
+.border-E5E5E5 {
+  border-color: #e5e5e5;
+}
+.border-FFC689 {
+  border-color: #ffc689;
+}
 
 /* 文本 */
-.text-center   { text-align: center; } 
-.text-right    { text-align: right; }
-.text-left     { text-align: left; }
-.text-break    { word-break: break-all; }
+.text-center {
+  text-align: center;
+}
+.text-right {
+  text-align: right;
+}
+.text-left {
+  text-align: left;
+}
+.text-break {
+  word-break: break-all;
+}
 
 /** 文本溢出 **/
-.line-clamp-1 { text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
-.line-clamp-2 { text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
-.line-clamp-3 { text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
-
+.line-clamp-1 {
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+}
+.line-clamp-2 {
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  overflow: hidden;
+}
+.line-clamp-3 {
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+}
 
 /** 图标尺寸 */
-.icon-10x10 { width: 10px; height: 10px; }
-.icon-11x11 { width: 11px; height: 11px; }
-.icon-12x12 { width: 12px; height: 12px; }
-.icon-13x13 { width: 13px; height: 13px; }
-.icon-14x14 { width: 14px; height: 14px; }
-.icon-15x15 { width: 15px; height: 15px; }
-.icon-16x16 { width: 16px; height: 16px; }
-.icon-17x17 { width: 17px; height: 17px; }
-.icon-18x18 { width: 18px; height: 18px; }
-.icon-19x19 { width: 19px; height: 19px; }
-.icon-20x20 { width: 20px; height: 20px; }
-.icon-22x22 { width: 22px; height: 22px; }
-.icon-24x24 { width: 24px; height: 24px; }
-.icon-26x26 { width: 26px; height: 26px; }
-.icon-28x28 { width: 28px; height: 28px; }
-.icon-30x30 { width: 30px; height: 30px; }
-.icon-33x33 { width: 33px; height: 33px; }
-.icon-34x34 { width: 34px; height: 34px; }
-.icon-36x36 { width: 36px; height: 36px; }
-.icon-41x41 { width: 41px; height: 41px; }
-.icon-44x44 { width: 44px; height: 44px; }
-.icon-48x48 { width: 48px; height: 48px; }
-.icon-50x50 { width: 50px; height: 50px; }
-.icon-52x52 { width: 52px; height: 52px; }
-.icon-56x56 { width: 56px; height: 56px; }
-.icon-57x57 { width: 57px; height: 57px; }
-.icon-58x58 { width: 58px; height: 58px; }
-.icon-60x60 { width: 60px; height: 60px; }
-.icon-64x64 { width: 64px; height: 64px; }
-.icon-68x68 { width: 68px; height: 68px; }
-.icon-70x70 { width: 70px; height: 70px; }
-.icon-90x90 { width: 90px; height: 90px; }
-.object-fit-cover {object-fit: cover}
+.icon-10x10 {
+  width: 10px;
+  height: 10px;
+}
+.icon-11x11 {
+  width: 11px;
+  height: 11px;
+}
+.icon-12x12 {
+  width: 12px;
+  height: 12px;
+}
+.icon-13x13 {
+  width: 13px;
+  height: 13px;
+}
+.icon-14x14 {
+  width: 14px;
+  height: 14px;
+}
+.icon-15x15 {
+  width: 15px;
+  height: 15px;
+}
+.icon-16x16 {
+  width: 16px;
+  height: 16px;
+}
+.icon-17x17 {
+  width: 17px;
+  height: 17px;
+}
+.icon-18x18 {
+  width: 18px;
+  height: 18px;
+}
+.icon-19x19 {
+  width: 19px;
+  height: 19px;
+}
+.icon-20x20 {
+  width: 20px;
+  height: 20px;
+}
+.icon-22x22 {
+  width: 22px;
+  height: 22px;
+}
+.icon-24x24 {
+  width: 24px;
+  height: 24px;
+}
+.icon-26x26 {
+  width: 26px;
+  height: 26px;
+}
+.icon-28x28 {
+  width: 28px;
+  height: 28px;
+}
+.icon-30x30 {
+  width: 30px;
+  height: 30px;
+}
+.icon-33x33 {
+  width: 33px;
+  height: 33px;
+}
+.icon-34x34 {
+  width: 34px;
+  height: 34px;
+}
+.icon-36x36 {
+  width: 36px;
+  height: 36px;
+}
+.icon-41x41 {
+  width: 41px;
+  height: 41px;
+}
+.icon-44x44 {
+  width: 44px;
+  height: 44px;
+}
+.icon-48x48 {
+  width: 48px;
+  height: 48px;
+}
+.icon-50x50 {
+  width: 50px;
+  height: 50px;
+}
+.icon-52x52 {
+  width: 52px;
+  height: 52px;
+}
+.icon-56x56 {
+  width: 56px;
+  height: 56px;
+}
+.icon-57x57 {
+  width: 57px;
+  height: 57px;
+}
+.icon-58x58 {
+  width: 58px;
+  height: 58px;
+}
+.icon-60x60 {
+  width: 60px;
+  height: 60px;
+}
+.icon-64x64 {
+  width: 64px;
+  height: 64px;
+}
+.icon-68x68 {
+  width: 68px;
+  height: 68px;
+}
+.icon-70x70 {
+  width: 70px;
+  height: 70px;
+}
+.icon-90x90 {
+  width: 90px;
+  height: 90px;
+}
+.object-fit-cover {
+  object-fit: cover;
+}
 /* 气泡框 */
 .bubble {
-	display: inline-block;
-	height: 14px;
-	background-color: #FF7E26;
-	border-radius: 2px;
-	padding: 0 4px;
-	color: #FFFFFF;
-	
-	white-space: nowrap;
-	font-size: 9px;
-	text-align: center;
-	line-height: 14px;
-	position: relative;
+  display: inline-block;
+  height: 14px;
+  background-color: #ff7e26;
+  border-radius: 2px;
+  padding: 0 4px;
+  color: #ffffff;
+
+  white-space: nowrap;
+  font-size: 9px;
+  text-align: center;
+  line-height: 14px;
+  position: relative;
 }
 .bubble::after {
-	content: '';
-	display: block;
-	width: 0;
-	height: 0;
-	border-style: solid;
-	border-color: #FF7E26 transparent transparent transparent;
-	border-width: 5px 3px 0 3px;
-	position: absolute;
-	top: 100%;
-	left: 50%;
-	transform: translateX(-50%);
+  content: "";
+  display: block;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-color: #ff7e26 transparent transparent transparent;
+  border-width: 5px 3px 0 3px;
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
 }
 
-
 /**
  微信公众号文章内图片样式处理
 */
-.rich-html * { max-width: 100% !important; }
-.rich-html img { height: auto !important; }
-
+.rich-html * {
+  max-width: 100% !important;
+}
+.rich-html img {
+  height: auto !important;
+}
 
 /* 层级 */
-.zIndex-1 { z-index: 1;}
-.zIndex-2 { z-index: 2;}
-
+.zIndex-1 {
+  z-index: 1;
+}
+.zIndex-2 {
+  z-index: 2;
+}
 
 /**
 	占位
 */
 
-.space-43 { height: 43px; }
-.space-50 { height: 50px; }
-.space-88 { height: 88px; }
-.space-89 { height: 89px; }
-.space-99 { height: 99px; }
+.space-43 {
+  height: 43px;
+}
+.space-50 {
+  height: 50px;
+}
+.space-88 {
+  height: 88px;
+}
+.space-89 {
+  height: 89px;
+}
+.space-99 {
+  height: 99px;
+}

src/filters/index.js

@@ -8,5 +8,43 @@ const filters = {
       window && window.screen.height >= 812 && window.devicePixelRatio >= 2
     );
   },
+  /* 日期格式化 */
+  dateFormat: (date, fmt = "yyyy/MM/dd HH:mm:ss", isDefault = "-") => {
+    if (!date) {
+      return "-";
+    }
+    if (date.toString().length === 10) {
+      date *= 1000;
+    }
+    date = new Date(date);
+
+    if (date.valueOf() < 1) {
+      return isDefault;
+    }
+    const o = {
+      "M+": date.getMonth() + 1, // 月份
+      "d+": date.getDate(), // 日
+      "H+": date.getHours(), // 小时
+      "m+": date.getMinutes(), // 分
+      "s+": date.getSeconds(), // 秒
+      "q+": Math.floor((date.getMonth() + 3) / 3), // 季度
+      S: date.getMilliseconds(), // 毫秒
+    };
+    if (/(y+)/.test(fmt)) {
+      fmt = fmt.replace(
+        RegExp.$1,
+        `${date.getFullYear()}`.substr(4 - RegExp.$1.length)
+      );
+    }
+    for (const k in o) {
+      if (new RegExp(`(${k})`).test(fmt)) {
+        fmt = fmt.replace(
+          RegExp.$1,
+          RegExp.$1.length === 1 ? o[k] : `00${o[k]}`.substr(`${o[k]}`.length)
+        );
+      }
+    }
+    return fmt;
+  },
 };
 export default filters;

src/pages/chooseSite.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="choose-site sub-page">
+    <div v-for="item in siteList" :key="item.id" @click="setActive(item)">
+      <div>{{ item.examSiteName }}</div>
+      <div>{{ item.examSiteAddress }}</div>
+    </div>
+    <button @click="confirm">确定</button>
+  </div>
+</template>
+<script name="ChooseSite" setup>
+import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { getSiteList } from "@/api/user";
+import bus from "@/utils/bus";
+
+const data = [
+  {
+    examSiteId: "1",
+    examSiteName: "作弊考点1",
+    examSiteAddress: "作弊考点地址",
+  },
+];
+
+const router = useRouter();
+const route = useRoute();
+const siteList = ref([]);
+const activeItem = ref();
+function getExamSiteList() {
+  getSiteList({ categoryId: route.params.id })
+    .then((res) => {
+      siteList.value = res;
+    })
+    .catch(() => {
+      //借用catch使用假数据先
+      siteList.value = data;
+    });
+}
+getExamSiteList();
+
+function setActive(item) {
+  activeItem.value = { ...item };
+}
+function confirm() {
+  bus.emit("site-confirm", activeItem.value);
+  router.back();
+}
+</script>
+<style lang="less" scoped></style>

src/pages/login.vue

@@ -4,6 +4,7 @@
       <van-cell-group inset>
         <van-field
           v-model="account"
+          name="学号"
           label="学号"
           placeholder="请输入学号"
           :rules="[{ required: true, message: '请输入学号' }]"
@@ -11,6 +12,7 @@
         <van-field
           v-model="password"
           type="password"
+          name="密码"
           label="密码"
           placeholder="请输入证件号后六位"
           :rules="[{ required: true, message: '请输入证件号后六位' }]"
@@ -31,11 +33,11 @@ import { useRouter } from "vue-router";
 import { useUserStore } from "@/store";
 const router = useRouter();
 const userStore = useUserStore();
-const account = ref("");
-const password = ref("");
+const account = ref("1509000120002");
+const password = ref("123456");
 const onSubmit = () => {
   login({ account: account.value, password: password.value }).then((res) => {
-    userStore.setUserInfo(res);
+    userStore.setLoginInfo(res);
     router.push("/index");
   });
 };

src/pages/tab-pages/index.vue

@@ -5,5 +5,17 @@
     <van-button>111</van-button>
   </div>
 </template>
-<script name="Index"></script>
+<script name="Index" setup>
+import { ref } from "vue";
+import { useUserStore } from "@/store";
+import { getMyList } from "@/api/user";
+const userStore = useUserStore();
+userStore.requestStuInfo();
+const resultList = ref([]);
+function getList() {
+  getMyList().then((res) => {
+    resultList.value = res || [];
+  });
+}
+</script>
 <style lang="less" scoped></style>

src/pages/tab-pages/reservation.vue

@@ -1,19 +1,264 @@
 <template>
-  <div class="reservation tab-page">
-    <van-form @submit="onSubmit">
-      <van-cell-group inset>
-        <van-field
-          v-model="username"
-          name="用户名"
-          label="用户名"
-          placeholder="用户名"
-          :rules="[{ required: true, message: '请填写用户名' }]"
-        />
-      </van-cell-group>
-    </van-form>
+  <div class="reservation tab-page position-relative">
+    <van-cell-group inset>
+      <van-field
+        v-model="params.aaa.text"
+        name="城市"
+        label="城市"
+        placeholder=""
+        input-align="right"
+        is-link
+        readonly
+        :rules="[{ required: true, message: '请选择城市' }]"
+        @click="cityStates.show = true"
+      />
+      <van-field
+        v-model="params.bbb.text"
+        name="教学点"
+        label="教学点"
+        placeholder=""
+        input-align="right"
+        is-link
+        readonly
+        :rules="[{ required: true, message: '请选择教学点' }]"
+        @click="teachStates.show = true"
+        :disabled="!params.aaa.value"
+      />
+      <van-field
+        v-model="params.examSiteId.text"
+        name="考点"
+        label="考点"
+        placeholder=""
+        input-align="right"
+        is-link
+        readonly
+        :rules="[{ required: true, message: '请选择考点' }]"
+        @click="toChooseSite"
+        :disabled="!params.bbb.value"
+      />
+      <van-field
+        v-model="params.date.text"
+        name="日期"
+        label="日期"
+        placeholder=""
+        input-align="right"
+        is-link
+        readonly
+        :rules="[{ required: true, message: '请选择日期' }]"
+        @click="dateStates.show = true"
+      />
+    </van-cell-group>
+
+    <van-popup v-model:show="cityStates.show" round position="bottom">
+      <van-picker
+        v-model="cityStates.value"
+        :columns="cityStates.columns"
+        @cancel="cityStates.show = false"
+        @confirm="cityStates.onConfirm"
+      />
+    </van-popup>
+    <van-popup v-model:show="teachStates.show" round position="bottom">
+      <van-picker
+        v-model="teachStates.value"
+        :columns="teachStates.columns"
+        @cancel="teachStates.show = false"
+        @confirm="teachStates.onConfirm"
+      />
+    </van-popup>
+    <van-popup v-model:show="dateStates.show" round position="bottom">
+      <van-picker
+        v-model="dateStates.value"
+        :columns="dateStates.columns"
+        @cancel="dateStates.show = false"
+        @confirm="dateStates.onConfirm"
+      />
+    </van-popup>
+
+    <div class="result-box" v-if="resultList.length">
+      <div>我的剩余可约时段：{{ unApplyNumber }}</div>
+      <div class="list-box">
+        <div v-for="item in resultList" :key="item.timePeriodId">
+          <div class="flex-h-between">
+            <div>{{ $filters.dateFormat(item.timePeriodStart, "mm:ss") }}</div>
+            <div>剩余{{ item.availableCount }}</div>
+            <van-button type="primary" size="small">{{
+              item.status
+            }}</van-button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <router-view v-slot="{ Component }">
+      <transition name="zoom-fade" mode="out-in" appear>
+        <component :is="Component" />
+      </transition>
+    </router-view>
   </div>
 </template>
 <script name="Reservation" setup>
-import { ref } from "vue";
+import { ref, reactive, computed, watch } from "vue";
+import { isJson } from "@/utils";
+import { getCategoryList, getDateList, getReservationList } from "@/api/user";
+import { useRouter } from "vue-router";
+import bus from "@/utils/bus";
+
+const router = useRouter();
+const data = [
+  {
+    parentId: "0",
+    id: "1",
+    name: "广州",
+    level: "1",
+    subNodes: [
+      {
+        parentId: "1",
+        id: "2",
+        name: "广州教学点A",
+        level: "2",
+        subNodes: [],
+      },
+    ],
+  },
+  {
+    parentId: "0",
+    id: "3",
+    name: "武汉",
+    level: "1",
+    subNodes: [
+      {
+        parentId: "3",
+        id: "4",
+        name: "武汉教学点A",
+        level: "2",
+        subNodes: [],
+      },
+    ],
+  },
+];
+const resultList = ref([]);
+const params = reactive({
+  aaa: { value: "", text: "" },
+  bbb: { value: "", text: "" },
+  examSiteId: { value: "", text: "" },
+  date: { value: "", text: "" },
+});
+const cityStates = reactive({
+  show: false,
+  value: [],
+  columns: [],
+  onConfirm({ selectedOptions }) {
+    let option = selectedOptions[0];
+    if (option.value != params.aaa.value) {
+      params.aaa = { ...option };
+      teachStates.value = [];
+      params.bbb = { value: "", text: "" };
+      teachStates.columns = data
+        .find((item) => item.id == option.value)
+        .subNodes.map((item) => ({ text: item.name, value: item.id }));
+    }
+    cityStates.show = false;
+  },
+});
+const teachStates = reactive({
+  show: false,
+  value: [],
+  columns: [],
+  onConfirm({ selectedOptions }) {
+    let option = selectedOptions[0];
+    if (option.value != params.bbb.value) {
+      params.bbb = { ...option };
+      params.examSiteId = { value: "", text: "" };
+    }
+    teachStates.show = false;
+  },
+});
+
+const dateStates = reactive({
+  show: false,
+  value: [],
+  columns: [],
+  onConfirm({ selectedOptions }) {
+    let option = selectedOptions[0];
+    if (option.value != params.date.value) {
+      params.date = { ...option };
+    }
+    dateStates.show = false;
+  },
+});
+
+const toChooseSite = () => {
+  router.push({ name: "ChooseSite", params: { id: params.bbb.value } });
+};
+
+function getLocation() {
+  getCategoryList()
+    .then((res) => {
+      cityStates.columns = res.map((item) => ({
+        text: item.name,
+        value: item.id,
+      }));
+    })
+    .catch(() => {
+      //借用catch使用假数据先
+      cityStates.columns = data.map((item) => ({
+        text: item.name,
+        value: item.id,
+      }));
+    });
+}
+getLocation();
+
+function getDateOptions() {
+  getDateList()
+    .then((res) => {})
+    .catch(() => {
+      let res = ["20240403"];
+      dateStates.columns = res.map((item) => ({
+        value: item,
+        text: `${item.slice(0, 4)}-${item.slice(4, 6)}-${item.slice(6)}`,
+      }));
+    });
+}
+getDateOptions();
+
+const unApplyNumber = ref("");
+function getResultList() {
+  getReservationList({
+    examSiteId: params.examSiteId.value,
+    date: params.date.value,
+  })
+    .then((res) => {
+      unApplyNumber.value = res.unApplyNumber;
+      resultList.value = res.periodList || [];
+    })
+    .catch(() => {
+      let res = {
+        unApplyNumber: 1,
+        periodList: [
+          {
+            timePeriodId: "1",
+            timePeriodStart: 1712134122545,
+            timePeriodEnd: 1714435200000,
+            availableCount: 1,
+            status: "可约",
+          },
+        ],
+      };
+      unApplyNumber.value = res.unApplyNumber;
+      resultList.value = res.periodList || [];
+    });
+}
+
+watch([() => params.examSiteId, () => params.date], ([examSiteId, date]) => {
+  if (examSiteId.value && date.value) {
+    getResultList();
+  } else {
+    resultList.value = [];
+  }
+});
+
+bus.on("site-confirm", (obj) => {
+  params.examSiteId = { text: obj.examSiteName, value: obj.examSiteId };
+});
 </script>
 <style lang="less" scoped></style>

src/router/index.js

@@ -33,7 +33,7 @@ router.beforeEach(async (to, from, next) => {
     return;
   }
   const userStore = useUserStore();
-  if (!userStore.userInfo) {
+  if (!userStore.loginInfo) {
     next({ name: "Login", replace: true });
   } else {
     next();

src/router/routes.js

@@ -18,6 +18,14 @@ const routes = [
         name: "Reservation",
         component: () => import("@/pages/tab-pages/reservation.vue"),
         meta: { title: "预约考试" },
+        children: [
+          {
+            path: "chooseSite/:id",
+            name: "ChooseSite",
+            component: () => import("@/pages/chooseSite.vue"),
+            meta: { title: "选择考点" },
+          },
+        ],
       },
       {
         path: "/mine",

src/store/modules/user.js

@@ -1,19 +1,25 @@
 import { defineStore } from "pinia";
+import { getStuInfo } from "@/api/user";
 
 const useUserStore = defineStore("user", {
   persist: {
     storage: localStorage,
-    paths: ["userInfo"],
+    paths: ["loginInfo", "stuInfo"],
   },
-  state: () => ({ userInfo: null }),
+  state: () => ({ loginInfo: null, stuInfo: null }),
   actions: {
     setState(data) {
       this.$patch(data);
     },
-    setUserInfo(data) {
-      this.userInfo = data;
+    setLoginInfo(data) {
+      this.loginInfo = data;
     },
-    resetUserInfo() {
+    requestStuInfo() {
+      getStuInfo().then((res) => {
+        this.stuInfo = res;
+      });
+    },
+    resetUser() {
       this.$reset();
     },
   },

src/utils/index.js

@@ -10,3 +10,25 @@ export function getUrlParam(name) {
   if (r != null) return unescape(r[2]);
   return null;
 }
+
+/**
+ * @description 判断字符串是不是json
+ * @param {String} str
+ * @return {Boolean}
+ * @date 2024-04-03
+ */
+export function isJson(str) {
+  if (typeof str !== "string") {
+    return false;
+  }
+  let json = null;
+  try {
+    json = JSON.parse(str);
+  } catch (e) {
+    return false;
+  }
+  if (typeof json !== "object") {
+    return false;
+  }
+  return true;
+}