首页外观

game/src/store/index.js

@@ -2,10 +2,10 @@ import { createStore } from 'vuex'
 
 export default createStore({
   state: {
-    loginStatus: 0, // 0: 未登录；1：已登录
+    loginStatus: 1, // 0: 未登录；1：已登录
     avatar: '',
-    userName: '',
-    bonusPoint: 0,
+    userName: 'sdfsdfsdfsdfsdfsdfsdfsdfsdfsdf',
+    bonusPoint: 1243,
   },
   getters: {
   },

game/src/views/HomeView.vue

@@ -2,7 +2,125 @@
   <div
     class="home"
   >
-    sdfsf
+    <div
+      v-if="store.state.loginStatus === 0"
+      class="for-visitor"
+    >
+      <button class="login">
+        <img
+          class=""
+          src="@/assets/images/btn-login-bg.png"
+          alt=""
+          draggable="false"
+        >
+        <span>登录</span>
+      </button>
+      <button class="sign-up">
+        <img
+          class=""
+          src="@/assets/images/btn-sign-up-bg.png"
+          alt=""
+          draggable="false"
+        >
+        <span>注册</span>
+      </button>
+    </div>
+    <div
+      v-else
+      class="after-login"
+    >
+      <img
+        class="avatar"
+        src="@/assets/images/btn-login-bg.png"
+        alt=""
+        draggable="false"
+      >
+      <div class="info-wrap">
+        <div class="user-id">
+          <span class="title">用户ID：</span><span
+            class="value"
+            :title="store.state.userName"
+          >{{ store.state.userName }}</span>
+        </div>
+        <div class="point-bonus">
+          <span class="title">当前积分：</span><span class="value">{{ store.state.bonusPoint }}</span>
+        </div>
+      </div>
+      <button class="change-password">
+        <img
+          class=""
+          src="@/assets/images/icon-password.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button class="log-out">
+        <img
+          class=""
+          src="@/assets/images/icon-exit.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </div>
+    <div class="entry-list">
+      <button class="game-entry plant-tree-entry">
+        <img
+          class=""
+          src="@/assets/images/plant-tree-entry.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button class="game-entry exam-paper-entry">
+        <img
+          class=""
+          src="@/assets/images/exam-paper-entry.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button class="game-entry pair-up-entry">
+        <img
+          class=""
+          src="@/assets/images/pair-up-entry.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button class="game-entry antibody-battle-entry">
+        <img
+          class=""
+          src="@/assets/images/antibody-battle-entry.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button class="game-entry disaster-relief-entry">
+        <img
+          class=""
+          src="@/assets/images/disaster-relief-entry.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button class="game-entry enviroment-protection">
+        <img
+          class=""
+          src="@/assets/images/enviroment-protection.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+      <button class="game-entry lost-children-entry">
+        <img
+          class=""
+          src="@/assets/images/lost-children-entry.png"
+          alt=""
+          draggable="false"
+        >
+      </button>
+    </div>
   </div>
 </template>
 
@@ -14,11 +132,136 @@ import { useStore } from "vuex"
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+
+const {
+  windowSizeInCssForRef,
+  windowSizeWhenDesignForRef,
+} = useSizeAdapt(390, 752)
+
+
 </script>
 
 <style lang="less" scoped>
 .home {
   width: 100%;
   height: 100%;
+  >.for-visitor{
+    margin-top: calc(18 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-left: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >button{
+      width: calc(170 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      position: relative;
+      >img{
+        width: 100%;
+        height: 100%;
+      }
+      >span{
+        position: absolute;
+        left: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        top: calc(32 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        font-family: Source Han Sans SC, Source Han Sans SC;
+        font-weight: bold;
+        color: #A97C46;
+        line-height: calc(28 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      }
+    }
+  }
+  >.after-login{
+    margin-top: calc(25 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    width: 100%;
+    display: flex;
+    align-items: center;
+    padding-left: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-right: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-top: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    padding-bottom: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    background: rgba(226, 201, 163, 0.5);
+    box-shadow: inset -1px -2px 1px 0px #E2C9A3;
+    border-radius: calc(4 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >img.avatar{
+      width: calc(54 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(54 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      border-radius: calc(27 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-left: calc(13 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      object-fit: cover;
+    }
+    >.info-wrap{
+      margin-left: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      font-family: Source Han Sans SC, Source Han Sans SC;
+      font-weight: 400;
+      color: #A97C46;
+      line-height: 1.5;
+      white-space: pre;
+      >.user-id{
+        >.title{
+          vertical-align: middle;
+          display: inline-block;
+          width: calc(69 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          letter-spacing: calc(3 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >.value{
+          vertical-align: middle;
+          display: inline-block;
+          overflow: hidden;
+          white-space: pre;
+          text-overflow: ellipsis;
+          width: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+      }
+      >.point-bonus{
+        >.title{
+          vertical-align: middle;
+          display: inline-block;
+          width: calc(69 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+          margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+        }
+        >.value{
+          vertical-align: middle;
+          display: inline-block;
+          overflow: hidden;
+          white-space: pre;
+          text-overflow: ellipsis;
+          width: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+
+        }
+      }
+    }
+    >button.change-password{
+      width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-left: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+    >button.log-out{
+      width: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      height: calc(30 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      margin-left: calc(19 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+      >img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+  >.entry-list{
+    margin-left: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    margin-right: calc(10 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
+    >button.game-entry{
+      width: 100%;
+      >img{
+        width: 100%;
+      }
+    }
+  }
 }
 </style>

game/src/views/PairUp.vue

@@ -175,32 +175,32 @@ const logoFileNameList = [
   '北京中金公益基金会.png',
   '创金合信基金管理有限公司.png',
   '德邦基金管理有限公司.png',
-  '东方财富证券股份有限公司.gif',
-  '东海证券股份有限公司.jpg',
+  '东方财富证券股份有限公司.png',
+  '东海证券股份有限公司.png',
   '富国基金管理有限公司.png',
   '广发证券股份有限公司.png',
   '国盛证券有限责任公司.png',
   '国元证券股份有限公司.png',
   '华安基金管理有限公司.png',
-  '华泰证券股份有限公司.jpg',
-  '汇添富基金管理股份有限公司.jpg',
+  '华泰证券股份有限公司.png',
+  '汇添富基金管理股份有限公司.png',
   '金信期货有限公司.png',
   '南华期货股份有限公司.png',
   '鹏华基金管理有限公司.png',
-  '鹏扬基金管理有限公司.jpg',
+  '鹏扬基金管理有限公司.png',
   '平安证券股份有限公司.png',
-  '睿远公益基金会.jpg',
+  '睿远公益基金会.png',
   '上海东方证券资产管理有限公司.png',
   '上海证券交易所公益基金会.png',
-  '深圳市银华公益基金会.jpg',
+  '深圳市银华公益基金会.png',
   '泰达宏利基金.png',
   '万家基金管理有限公司.png',
   '兴业证券股份有限公司.png',
   '兴证全球基金管理有限公司.png',
   '圆信永丰基金管理有限公司.png',
   '长江证券股份有限公司.png',
-  '郑州商品交易所.jpg',
-  '中国金融期货交易所.jpg',
+  '郑州商品交易所.png',
+  '中国金融期货交易所.png',
   '中国期货市场监控中心有限责任公司.png',
   '中国证券登记结算有限责任公司.png',
 ]