登录、注册界面的外观

src/main.js

@@ -4,6 +4,7 @@ import 'element-ui/lib/theme-chalk/index.css'
 import App from './App.vue'
 import '@/mixins'
 import router from './router'
+import store from './store'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
 import clickOutside from "@/directives/v-click-outside.js"
@@ -27,5 +28,6 @@ Vue.use(clickOutside)
 
 new Vue({
   router,
+  store,
   render: h => h(App)
 }).$mount('#app')

src/router/index.js

@@ -2,6 +2,8 @@ import Vue from 'vue'
 import VueRouter from 'vue-router'
 import Home from '../pages/Home.vue'
 import RuleDesc from "@/views/gui/RuleDesc.vue"
+import Login from "@/views/gui/Login.vue"
+import SignUp from "@/views/gui/SignUp.vue"
 
 const originalPush = VueRouter.prototype.push
 VueRouter.prototype.push = function push (location) {
@@ -20,6 +22,16 @@ const routes = [
         path: 'rule-desc',
         name: 'RuleDesc',
         component: RuleDesc,
+      },
+      {
+        path: 'login',
+        name: 'Login',
+        component: Login,
+      },
+      {
+        path: 'sign-up',
+        name: 'SignUp',
+        component: SignUp,
       }
     ]
   }

src/store/index.js

@@ -0,0 +1,21 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+
+Vue.use(Vuex)
+
+export default new Vuex.Store({
+  state: {
+    loginStatus: false,
+  },
+  getters: {
+  },
+  mutations: {
+    setLoginStatus(state, value) {
+      state.loginStatus = value
+    },
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

src/views/gui/Login.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="rule-desc">
+    <div class="wrapper-1">
+      <button
+        class="close"
+        @click="$router.go(-1)"
+      />
+      <h1 class="">
+        欢迎登录
+      </h1>
+
+      <div class="form-item">
+        <img
+          class=""
+          src="@/assets/images/username-icon.png"
+          alt=""
+          draggable="false"
+        >
+        <input
+          type="text"
+          placeholder="请输入账号..."
+        >
+      </div>
+      <div class="form-item">
+        <img
+          class=""
+          src="@/assets/images/password-icon.png"
+          alt=""
+          draggable="false"
+        >
+        <input
+          type="text"
+          placeholder="请输入密码..."
+        >
+      </div>
+
+      <button class="login">
+        <div class="text-wrapper">
+          登录
+        </div>
+      </button>
+      <button
+        class="sign-up"
+        @click="$router.replace({name: 'SignUp'})"
+      >
+        <div class="text-wrapper">
+          还没有账号？立即注册！
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visitNum: 1939,
+      yingZaoZhuanJiaNum: 56,
+      liShiDaRen: 424,
+      huShuShiZhe: 32,
+    }
+  },
+  mounted() {
+    window.ifPreventKeyOperationInScene = true
+  },
+  beforeDestroy() {
+    window.ifPreventKeyOperationInScene = false
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.rule-desc {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(46,32,19,0.55);
+  backdrop-filter: blur(5px);
+  z-index: 10000;
+  > .wrapper-1 {
+    width: 624px;
+    height: 525px;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-image: url(@/assets/images/login-bg.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    text-align: center;
+    padding: 29px 100px 40px 100px;
+    overflow: auto;
+    > .close {
+      position: absolute;
+      top: 19px;
+      right: 100px;
+      width: 45px;
+      height: 45px;
+      opacity: 0;
+    }
+    > h1 {
+      display: inline-block;
+      background-image: url(@/assets/images/title-decorator-long.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      padding: 0 45px 20px 45px;
+      font-size: 36px;
+      font-family: LiSu-Regular, LiSu;
+      font-weight: 400;
+      color: #9A2D0A;
+      margin-bottom: 60px;
+    }
+    > .form-item {
+      height: 43px;
+      width: 300px;
+      border-bottom: 1px solid #A4573F;
+      display: inline-flex;
+      align-items: center;
+      padding: 0 12px;
+      margin-bottom: 10px;
+      > img {
+        flex: 0 0 auto;
+        width: 26px;
+        height: 26px;
+        margin-right: 14px;
+      }
+      > input {
+        flex: 1 0 1px;
+        font-size: 16px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #9A2D0A;
+      }
+    }
+
+    > button.login {
+      background-image: url(@/assets/images/button-border-long-transparent.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      height: 50px;
+      width: 300px;
+      padding: 4px 8px 4px 6px;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      > .text-wrapper {
+        height: 100%;
+        width: 100%;
+        background: rgba(143, 72, 49, 0.8);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+        font-family: LiSu-Regular, LiSu;
+        font-weight: 400;
+        color: #FFFFFF;
+        letter-spacing: 4px;
+      }
+    }
+    > button.sign-up {
+      background-image: url(@/assets/images/button-border-long-transparent.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      height: 50px;
+      width: 300px;
+      padding: 4px 8px 4px 6px;
+      margin-bottom: 10px;
+      > .text-wrapper {
+        height: 100%;
+        width: 100%;
+        background: transparent;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+        font-family: LiSu-Regular, LiSu;
+        font-weight: 400;
+        color: #955D4B;
+      }
+    }
+    > .statistics {
+      margin-top: 30px;
+      font-size: 16px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #693D2F;
+      line-height: 26px;
+      letter-spacing: 1px;
+    }
+  }
+}
+</style>

src/views/gui/QuizMenu.vue

@@ -4,7 +4,7 @@
       v-if="!isMobile"
       class="pc-wrapper"
     >
-      <button>
+      <button @click="$router.push({name: 'Login'})">
         <div class="text-wrapper">
           请先登录再答题
         </div>

src/views/gui/RuleDesc.vue

@@ -52,12 +52,18 @@
         需登陆后才能参与答题
       </h1>
       <div class="login-button-wrap">
-        <button class="login">
+        <button
+          class="login"
+          @click="$router.push({name: 'Login'})"
+        >
           <div class="text-wrapper">
             登录
           </div>
         </button>
-        <button class="sign-up">
+        <button
+          class="sign-up"
+          @click="$router.push({name: 'SignUp'})"
+        >
           <div class="text-wrapper">
             注册
           </div>
@@ -91,7 +97,7 @@ export default {
   width: 100%;
   height: 100%;
   background: rgba(46,32,19,0.55);
-  backdrop-filter: blur(10px);
+  backdrop-filter: blur(5px);
   z-index: 10000;
   > .wrapper-1 {
     width: 1200px;

src/views/gui/SignUp.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="rule-desc">
+    <div class="wrapper-1">
+      <button
+        class="close"
+        @click="$router.go(-1)"
+      />
+      <h1 class="">
+        欢迎注册
+      </h1>
+
+      <div class="form-item">
+        <img
+          class=""
+          src="@/assets/images/username-icon.png"
+          alt=""
+          draggable="false"
+        >
+        <input
+          type="text"
+          placeholder="请输入账号..."
+        >
+      </div>
+      <div class="form-item">
+        <img
+          class=""
+          src="@/assets/images/password-icon.png"
+          alt=""
+          draggable="false"
+        >
+        <input
+          type="text"
+          placeholder="请输入密码..."
+        >
+      </div>
+      <div class="form-item">
+        <img
+          class=""
+          src="@/assets/images/password-icon.png"
+          alt=""
+          draggable="false"
+        >
+        <input
+          type="text"
+          placeholder="请输入密码..."
+        >
+      </div>
+
+      <button class="login">
+        <div class="text-wrapper">
+          立即注册
+        </div>
+      </button>
+      <button
+        class="sign-up"
+        @click="$router.replace({name: 'Login'})"
+      >
+        <div class="text-wrapper">
+          已有账号，去登录
+        </div>
+      </button>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      visitNum: 1939,
+      yingZaoZhuanJiaNum: 56,
+      liShiDaRen: 424,
+      huShuShiZhe: 32,
+    }
+  },
+  mounted() {
+    window.ifPreventKeyOperationInScene = true
+  },
+  beforeDestroy() {
+    window.ifPreventKeyOperationInScene = false
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.rule-desc {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(46,32,19,0.55);
+  backdrop-filter: blur(5px);
+  z-index: 10000;
+  > .wrapper-1 {
+    width: 624px;
+    height: calc(624px * 525 / 637);
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    background-image: url(@/assets/images/sign-up-bg.png);
+    background-size: contain;
+    background-repeat: no-repeat;
+    background-position: center center;
+    text-align: center;
+    padding: 29px 100px 40px 100px;
+    overflow: auto;
+    > .close {
+      position: absolute;
+      top: 19px;
+      right: 100px;
+      width: 45px;
+      height: 45px;
+      opacity: 0;
+    }
+    > h1 {
+      display: inline-block;
+      background-image: url(@/assets/images/title-decorator-long.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      padding: 0 45px 20px 45px;
+      font-size: 36px;
+      font-family: LiSu-Regular, LiSu;
+      font-weight: 400;
+      color: #9A2D0A;
+      margin-bottom: 30px;
+    }
+    > .form-item {
+      height: 43px;
+      width: 300px;
+      border-bottom: 1px solid #A4573F;
+      display: inline-flex;
+      align-items: center;
+      padding: 0 12px;
+      margin-bottom: 10px;
+      > img {
+        flex: 0 0 auto;
+        width: 26px;
+        height: 26px;
+        margin-right: 14px;
+      }
+      > input {
+        flex: 1 0 1px;
+        font-size: 16px;
+        font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+        font-weight: 400;
+        color: #9A2D0A;
+      }
+    }
+
+    > button.login {
+      background-image: url(@/assets/images/button-border-long-transparent.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      height: 50px;
+      width: 300px;
+      padding: 4px 8px 4px 6px;
+      margin-top: 20px;
+      margin-bottom: 10px;
+      > .text-wrapper {
+        height: 100%;
+        width: 100%;
+        background: rgba(143, 72, 49, 0.8);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+        font-family: LiSu-Regular, LiSu;
+        font-weight: 400;
+        color: #FFFFFF;
+        letter-spacing: 4px;
+      }
+    }
+    > button.sign-up {
+      background-image: url(@/assets/images/button-border-long-transparent.png);
+      background-size: contain;
+      background-repeat: no-repeat;
+      background-position: center center;
+      height: 50px;
+      width: 300px;
+      padding: 4px 8px 4px 6px;
+      margin-bottom: 10px;
+      > .text-wrapper {
+        height: 100%;
+        width: 100%;
+        background: transparent;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 20px;
+        font-family: LiSu-Regular, LiSu;
+        font-weight: 400;
+        color: #955D4B;
+      }
+    }
+    > .statistics {
+      margin-top: 30px;
+      font-size: 16px;
+      font-family: Source Han Sans CN-Regular, Source Han Sans CN;
+      font-weight: 400;
+      color: #693D2F;
+      line-height: 26px;
+      letter-spacing: 1px;
+    }
+  }
+}
+</style>