|
@@ -0,0 +1,216 @@
|
|
|
+<template>
|
|
|
+ <div class="login-form">
|
|
|
+ <div class="papar">
|
|
|
+ <h1>邀 请 函</h1>
|
|
|
+ <div class="p-wrapper">
|
|
|
+ <p>
|
|
|
+ 致:
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 在这座梦幻的游戏主城中,我们不仅追逐冒险和快乐,更致力于传递爱与温暖。每一次的探索,都是为了点亮他人的心灵,每一步的冒险,都是为了温暖他人的生活。我们欢迎你加入我们的行列,成为这座城市的一员,与我们一起行善,传递爱意。在这里,每一个人都是慈善的使者,每一次游戏都是一次美好的奉献。加入我们,让我们共同创造更美好的世界!
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 期待你的加入!
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ 陶乐乐
|
|
|
+ </p>
|
|
|
+ </div>
|
|
|
+ <div class="bottom-wrap">
|
|
|
+ <input
|
|
|
+ v-model="nickName"
|
|
|
+ type="text"
|
|
|
+ maxlength="6"
|
|
|
+ placeholder="请输入6个字以内昵称"
|
|
|
+ >
|
|
|
+ <button
|
|
|
+ class="as-visitor"
|
|
|
+ :disabled="!nickName"
|
|
|
+ @click="onClickAsVisitor"
|
|
|
+ >
|
|
|
+ 我是游客
|
|
|
+ </button>
|
|
|
+ <button
|
|
|
+ class="as-wx-user"
|
|
|
+ @click="onClickLoginWx"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ class=""
|
|
|
+ src="@/assets/images/wechat-logo.png"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ 成为云城居民
|
|
|
+ </button>
|
|
|
+ </div>
|
|
|
+ </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 emit = defineEmits(['login-done'])
|
|
|
+
|
|
|
+const nickName = ref('')
|
|
|
+nickName.value = `云城居民${utils.getRandomString(2)}`
|
|
|
+
|
|
|
+function onClickAsVisitor() {
|
|
|
+ store.commit('setLoginStatus', store.getters.loginStatusEnum.visitor)
|
|
|
+ store.commit('setUserInfo', {
|
|
|
+ userName: nickName.value,
|
|
|
+ userId: null
|
|
|
+ })
|
|
|
+ emit('login-done')
|
|
|
+}
|
|
|
+
|
|
|
+function onClickLoginWx() {
|
|
|
+ location.href = `https://open.weixin.qq.com/connect/qrconnect?appid=wx3d4f2e0cfc3b8e54&redirect_uri=https%3A%2F%2Fsit-wuxicishan.4dage.com%2F%23%2Flogin-temp&response_type=code&scope=snsapi_login&state=${encodeURIComponent(route.name)}#wechat_redirect`
|
|
|
+}
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+.login-form{
|
|
|
+ position: fixed;
|
|
|
+ left: 0;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background: rgba(0,0,0,0.5);
|
|
|
+ >.papar{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 50%;
|
|
|
+ transform: translate(-50%, -50%);
|
|
|
+ width: 983px;
|
|
|
+ height: 615px;
|
|
|
+ background-image: url(@/assets/images/login-form-bg.png);
|
|
|
+ background-size: cover;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ background-position: center center;
|
|
|
+ h1{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 27px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ font-family: Source Han Serif CN, Source Han Serif CN;
|
|
|
+ // font-weight: bold;
|
|
|
+ font-size: 30px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 35px;
|
|
|
+ }
|
|
|
+ >.p-wrapper{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ top: 130px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 723px;
|
|
|
+ >p:nth-of-type(1){
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #A59E88;
|
|
|
+ line-height: 23px;
|
|
|
+ text-align: left;
|
|
|
+ margin-bottom: 2em;
|
|
|
+ }
|
|
|
+ >p:nth-of-type(2){
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #A59E88;
|
|
|
+ line-height: 32px;
|
|
|
+ text-indent: 2em;
|
|
|
+ }
|
|
|
+ >p:nth-of-type(3){
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #A59E88;
|
|
|
+ line-height: 32px;
|
|
|
+ text-indent: 2em;
|
|
|
+ margin-bottom: 40px;
|
|
|
+ }
|
|
|
+ >p:nth-of-type(4){
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 20px;
|
|
|
+ color: #A59E88;
|
|
|
+ line-height: 23px;
|
|
|
+ text-align: end;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >.bottom-wrap{
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ bottom: 59px;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ >input{
|
|
|
+ width: 160px;
|
|
|
+ height: 42px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border-radius: 21px;
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #424A4A;
|
|
|
+ line-height: 16px;
|
|
|
+ padding-left: 13px;
|
|
|
+ margin-right: 8px;
|
|
|
+ &::placeholder {
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #424A4A;
|
|
|
+ line-height: 16px;
|
|
|
+ opacity: 0.5;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >button.as-visitor{
|
|
|
+ width: 120px;
|
|
|
+ height: 42px;
|
|
|
+ background: #E4D8A7;
|
|
|
+ border-radius: 21px;
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #5A503C;
|
|
|
+ line-height: 16px;
|
|
|
+ margin-right: 30px;
|
|
|
+ &[disabled] {
|
|
|
+ opacity: 0.7;
|
|
|
+ cursor: not-allowed;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ >button.as-wx-user{
|
|
|
+ width: 245px;
|
|
|
+ height: 42px;
|
|
|
+ background: #589498;
|
|
|
+ border-radius: 21px;
|
|
|
+ border: 1px solid #E4D8A7;
|
|
|
+ font-family: Source Han Sans CN, Source Han Sans CN;
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ >img{
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ margin-right: 1px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|