搞搞搞

src/App.vue

@@ -146,7 +146,8 @@ export default {
 }
 
 #popup {
-  background: rgba(0, 0, 0, 0.7);
+  background: rgba(46,32,19,0.55);
+  backdrop-filter: blur(5px);
 }
 
 .el-message-box__wrapper {

src/views/gui/RuleDesc.vue

@@ -48,27 +48,33 @@
       <p class="desc">
         共设置【营造专家】【历史达人】【护书使者】三个徽章，每个部分查看超过5个知识点即可获得相应徽章。
       </p>
-      <h1 class="login-tip">
-        需登陆后才能参与答题
-      </h1>
-      <div class="login-button-wrap">
-        <button
-          class="login"
-          @click="$router.push({name: 'Login'})"
-        >
-          <div class="text-wrapper">
-            登录
-          </div>
-        </button>
-        <button
-          class="sign-up"
-          @click="$router.push({name: 'SignUp'})"
+      <template
+        v-if="!loginStatus"
+      >
+        <h1 class="login-tip">
+          需登陆后才能参与答题
+        </h1>
+        <div
+          class="login-button-wrap"
         >
-          <div class="text-wrapper">
-            注册
-          </div>
-        </button>
-      </div>
+          <button
+            class="login"
+            @click="$router.push({name: 'Login'})"
+          >
+            <div class="text-wrapper">
+              登录
+            </div>
+          </button>
+          <button
+            class="sign-up"
+            @click="$router.push({name: 'SignUp'})"
+          >
+            <div class="text-wrapper">
+              注册
+            </div>
+          </button>
+        </div>
+      </template>
       <p class="statistics">
         当前访客{{ visitNum }}人次，已发放[营造专家]徽章{{ yingZaoZhuanJiaNum }}枚，[历史达人]{{ liShiDaRen }}枚徽章，[护书使者]徽章{{ liShiDaRen }}枚
       </p>
@@ -86,6 +92,11 @@ export default {
       huShuShiZhe: 32,
     }
   },
+  computed: {
+    ...globalMapState([
+      'loginStatus',
+    ])
+  }
 }
 </script>
 
@@ -248,7 +259,11 @@ export default {
       }
     }
     > .statistics {
-      margin-top: 30px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      white-space: pre;
+      bottom: 60px;
       font-size: 16px;
       font-family: Source Han Sans CN-Regular, Source Han Sans CN;
       font-weight: 400;

src/views/gui/UserInfo.vue

@@ -101,7 +101,10 @@
         </div>
       </div>
       <button>
-        <div class="text-wrapper">
+        <div
+          class="text-wrapper"
+          @click="onClickRuleDesc"
+        >
           规则说明
         </div>
       </button>
@@ -192,6 +195,9 @@ export default {
     onClickLogout() {
       globalApi.logout()
     },
+    onClickRuleDesc() {
+      this.$router.push({ name: 'RuleDesc' })
+    }
   }
 }
 </script>