登录页初步

README.md

@@ -1,11 +1,15 @@
 ## 部署测试环境
-文件存放位置：
+文件存放位置：/Default/阿里云/项目节点/项目测试/阿里云-四维时代-项目测试服务器-8.135.106.227/data/data/museum_wx_jiangsu_wuxi_data/PC/
 
-访问url：
+访问url：https://sit-wuxicishan.4dage.com/PC/#/tab-1
 
-## 待办
-小图切图要按照蓝湖切。
+## 微信相关
+appId: wx0bc995dace29b2ba
 
+## 待办
 文字介绍和相应链接到哪里找？
 
-下边的按钮有啥用
+下边的按钮有啥用
+
+### 微信扫码页面url
+https://open.weixin.qq.com/connect/qrconnect?appid=wx0bc995dace29b2ba&redirect_uri=https%3A%2F%2Fsit-wuxicishan.4dage.com%2FPC%2F%23%2Ftab-1&response_type=code&scope=snsapi_login&state=STATE#wechat_redirect

src/router/index.js

@@ -1,4 +1,5 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
+import LoginView from "../views/LoginView.vue"
 import HomeView from '../views/HomeView.vue'
 import RelicSearch from '../views/RelicSearch.vue'
 // import store from '@/store/index.js'
@@ -9,6 +10,11 @@ const routes = [
     redirect: '/tab-1',
   },
   {
+    path: '/login',
+    name: 'LoginView',
+    component: LoginView,
+  },
+  {
     path: '/tab-1',
     name: 'HomeView',
     component: HomeView,

src/store/index.js

@@ -1,15 +1,32 @@
 import { createStore } from 'vuex'
 
+const loginStatusEnum = {
+  notLogin: 'not-login',
+  visitor: 'visitor',
+  wxUser: 'wxUser',
+}
+
 export default createStore({
   state: {
     haveShownStartUp: false,
+    loginStatus: loginStatusEnum.notLogin,
+    userName: '',
   },
   getters: {
+    loginStatusEnum() {
+      return loginStatusEnum
+    }
   },
   mutations: {
     recordShowStartUp(state) {
       state.haveShownStartUp = true
     },
+    setLoginStatus(state, value) {
+      state.loginStatus = value
+    },
+    setUserName(state, value) {
+      state.userName = value
+    }
   },
   actions: {
   },

src/views/HomeView.vue

@@ -650,39 +650,23 @@ const activeHotRelicIdx = ref(0)
         height: 39px;
         border-radius: 53px 53px 53px 53px;
         border: 1px solid #589498;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #589498;
+        line-height: 16px;
+        &:hover{
+          color: #fff;
+          background-color: #589498;
+        }
       }
     }
-    >button.category{
+    >button.search, button.category{
       display: block;
       width: 375px;
       height: 67px;
       margin-left: auto;
-      background: linear-gradient( 90deg, rgba(88,148,152,0) 0%, #589498 100%);
-      box-shadow: inset -1px 1px 1px 0px rgba(255,255,255,0.25);
       margin-bottom: 2vh;
-      display: flex;
-      justify-content: flex-end;
-      align-items: center;
-      font-family: Source Han Sans CN, Source Han Sans CN;
-      font-weight: bold;
-      font-size: 20px;
-      color: #589498;
-      line-height: 23px;
-      &:hover{
-        font-weight: bold;
-        color: #FFFFFF;
-      }
-      >img{
-        width: 20px;
-        margin-left: 12px;
-        margin-right: 24px;
-      }
-    }
-    >button.search{
-      display: block;
-      width: 375px;
-      height: 67px;
-      margin-left: auto;
       border: 1px solid;
       border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(88, 148, 152, 1)) 1 1;
       display: flex;
@@ -694,6 +678,8 @@ const activeHotRelicIdx = ref(0)
       color: #589498;
       line-height: 23px;
       &:hover{
+        background: linear-gradient( 90deg, rgba(88,148,152,0) 0%, #589498 100%);
+        border: none;
         font-weight: bold;
         color: #FFFFFF;
       }

src/views/LoginView.vue

@@ -0,0 +1,154 @@
+<template>
+  <div class="login-view">
+    <img
+      class="title"
+      src="@/assets/images/login-page-title.png"
+      alt=""
+      draggable="false"
+    >
+    <div class="interaction-area">
+      <div class="row-1">
+        <div class="input-wrap">
+          <input
+            v-model="nickName"
+            type="text"
+            maxlength="6"
+            placeholder="请输入昵称"
+          >
+          <div class="count">
+            {{ nickName.length }}/6
+          </div>
+        </div>
+        <button
+          class="as-visitor"
+          :disabled="!nickName"
+          @click="onClickAsVisitor"
+        >
+          游客模式
+        </button>
+      </div>
+      <button class="as-wx-user" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch, onMounted } from "vue"
+import { useRoute, useRouter } from "vue-router"
+import { useStore } from "vuex"
+
+const route = useRoute()
+const router = useRouter()
+const store = useStore()
+
+const nickName = ref('')
+
+function onClickAsVisitor() {
+  store.commit('setLoginStatus', store.getters.loginStatusEnum.visitor)
+  if (route.query.redirect) {
+    router.push({
+      path: decodeURI(route.query.redirect)
+    })
+  } else {
+    router.push({
+      name: 'HomeView'
+    })
+  }
+}
+
+
+</script>
+
+<style lang="less" scoped>
+.login-view{
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  background-image: url(@/assets/images/login-bg.jpg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  >img.title{
+    position: absolute;
+    left: 50%;
+    bottom: 50%;
+    transform: translate(-50%, 0);
+    width: 30vw;
+  }
+  >.interaction-area{
+    position: absolute;
+    left: 50%;
+    bottom: calc(107 / 972 * 100%);
+    transform: translate(-50%, 0);
+    >.row-1{
+      display: flex;
+      align-items: center;
+      margin-bottom: 12px;
+      >.input-wrap{
+        width: 283px;
+        height: 75px;
+        background: rgba(0,0,0,0.25);
+        border-radius: 8px 8px 8px 8px;
+        border: 2px solid #FFFFFF;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding-left: 27px;
+        padding-right: 22px;
+        margin-right: 10px;
+        >input{
+          width: 170px;
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #FFFFFF;
+          line-height: 28px;
+          &::placeholder {
+            font-size: 24px;
+            color: rgba(255, 255, 255, 0.5);
+            line-height: 28px;
+          }
+        }
+        >.count{
+          flex: 0 0 auto;
+          font-family: Source Han Sans CN, Source Han Sans CN;
+          font-weight: 400;
+          font-size: 24px;
+          color: #FFFFFF;
+          line-height: 28px;
+          opacity: 0.5;
+        }
+      }
+      >button.as-visitor{
+        width: 135px;
+        height: 88px;
+        background-image: url(@/assets/images/visitor-login-button-bg.png);
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
+        font-family: Source Han Sans CN, Source Han Sans CN;
+        font-weight: 400;
+        font-size: 24px;
+        color: #FFFFFF;
+        line-height: 28px;
+        text-shadow: 0px 1px 1px rgba(135,111,82,0.5);
+        &[disabled] {
+          opacity: 0.7;
+          cursor: not-allowed;
+        }
+      }
+    }
+    >button.as-wx-user{
+      width: 422px;
+      height: 75px;
+      background-image: url(@/assets/images/button-wechat.png);
+      background-size: cover;
+      background-repeat: no-repeat;
+      background-position: center center;
+    }
+  }
+
+}
+</style>