From 67461f55748c32d885db965bdff6c2cc63eb327b Mon Sep 17 00:00:00 2001
From: zhangwencui <1064582902@qq.com>
Date: 星期一, 09 二月 2026 13:36:24 +0800
Subject: [PATCH] 推送cid传值,以及打卡签到模块开发
---
src/pages_template/pages/login/index2.vue | 1219 ++++++++++++++++++++++++++++++---------------------------
1 files changed, 638 insertions(+), 581 deletions(-)
diff --git a/src/pages_template/pages/login/index2.vue b/src/pages_template/pages/login/index2.vue
index 17922c7..0573fe5 100644
--- a/src/pages_template/pages/login/index2.vue
+++ b/src/pages_template/pages/login/index2.vue
@@ -1,662 +1,719 @@
<template>
- <view>
- <view class="normal-login-container " v-if="page == 'login'">
- <view class="left" @click="back">
- <image src="../../../static/uview/demo/backTop.png" mode="" style="height: 30rpx;"></image>
- </view>
- <view class="scale-in-center">
- <view class="logo-content align-center justify-center flex">
- <text class="title">宸ヤ綔浜哄憳鍏ュ彛</text>
- </view>
- <view class="login-form-content">
- <view class="input-item flex align-center">
- <view class="iconfont icon-user icon"></view>
- <input v-model="loginForm.username" class="input" type="text" placeholder="璇疯緭鍏ヨ处鍙�"
- maxlength="30" />
- </view>
- <view class="input-item flex align-center">
- <view class="iconfont icon-password icon"></view>
- <input v-model="loginForm.password" type="password" class="input" placeholder="璇疯緭鍏ュ瘑鐮�"
- maxlength="20" />
- </view>
- <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
- <view class="iconfont icon-code icon"></view>
- <input v-model="loginForm.code" type="number" class="input" placeholder="璇疯緭鍏ラ獙璇佺爜"
- maxlength="4" />
- <view class="login-code">
- <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
- </view>
- </view>
- <view class="action-btn">
- <button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">鐧诲綍</button>
- </view>
- </view>
- </view>
- </view>
-
-
- <!-- 鐧诲綍 -->
- <view v-else>
- <view class="container">
- <view class="cover slide-top1" :style="'animation-play-state:' + play[2]">
- <view class="masking slide-top" :class="[collapsedClass, { animating: isAnimating }]"
- ref="fixedViewRef" :style="'animation-play-state:' + play[0]">
- <uni-row>
- <text class="text-first">娆㈣繋浣跨敤</text>
- <text class="text-second">鏍″洯璁垮</text>
- <text class="text-third">棰勭害绯荤粺</text>
- <view :class="{ active: isActive === true, button: isActive !== true }" @click="startplay"
- :style="'animation-play-state:' + play[1]">
- <uni-row>
- <text class="text-fifth">璁垮鐧诲綍</text>
- </uni-row>
- </view>
- <view class="shadow1" :style="'animation-play-state:' + play[1]" />
- <view class="shadow2" :style="'animation-play-state:' + play[1]" />
- <view class="shadow3" :style="'animation-play-state:' + play[1]" />
-
- <image
- style="width: 100%;height: 1050rpx;opacity: 0.05;border-radius: 0 0 400rpx 400rpx;position: absolute;"
- src="../../../static/uview/common/gray-logo.png"></image>
- <text class="text-forth" @click="login()">璐﹀彿瀵嗙爜鐧诲綍</text>
- </uni-row>
- </view>
- </view>
- <view class="sec-masking">
- <uni-row>
- <text class="text-sixth">鐗堟湰鍙�: v1.0</text>
- </uni-row>
- </view>
- </view>
- </view>
- </view>
+ <view>
+ <view class="normal-login-container "
+ v-if="page == 'login'">
+ <view class="left"
+ @click="back">
+ <image src="../../../static/uview/demo/backTop.png"
+ mode=""
+ style="height: 30rpx;"></image>
+ </view>
+ <view class="scale-in-center">
+ <view class="logo-content align-center justify-center flex">
+ <text class="title">宸ヤ綔浜哄憳鍏ュ彛</text>
+ </view>
+ <view class="login-form-content">
+ <view class="input-item flex align-center">
+ <view class="iconfont icon-user icon"></view>
+ <input v-model="loginForm.username"
+ class="input"
+ type="text"
+ placeholder="璇疯緭鍏ヨ处鍙�"
+ maxlength="30" />
+ </view>
+ <view class="input-item flex align-center">
+ <view class="iconfont icon-password icon"></view>
+ <input v-model="loginForm.password"
+ type="password"
+ class="input"
+ placeholder="璇疯緭鍏ュ瘑鐮�"
+ maxlength="20" />
+ </view>
+ <view class="input-item flex align-center"
+ style="width: 60%;margin: 0px;"
+ v-if="captchaEnabled">
+ <view class="iconfont icon-code icon"></view>
+ <input v-model="loginForm.code"
+ type="number"
+ class="input"
+ placeholder="璇疯緭鍏ラ獙璇佺爜"
+ maxlength="4" />
+ <view class="login-code">
+ <image :src="codeUrl"
+ @click="getCode"
+ class="login-code-img"></image>
+ </view>
+ </view>
+ <view class="action-btn">
+ <button @click="handleLogin"
+ class="login-btn cu-btn block bg-blue lg round">鐧诲綍</button>
+ </view>
+ </view>
+ </view>
+ </view>
+ <!-- 鐧诲綍 -->
+ <view v-else>
+ <view class="container">
+ <view class="cover slide-top1"
+ :style="'animation-play-state:' + play[2]">
+ <view class="masking slide-top"
+ :class="[collapsedClass, { animating: isAnimating }]"
+ ref="fixedViewRef"
+ :style="'animation-play-state:' + play[0]">
+ <uni-row>
+ <text class="text-first">娆㈣繋浣跨敤</text>
+ <text class="text-second">鏍″洯璁垮</text>
+ <text class="text-third">棰勭害绯荤粺</text>
+ <view :class="{ active: isActive === true, button: isActive !== true }"
+ @click="startplay"
+ :style="'animation-play-state:' + play[1]">
+ <uni-row>
+ <text class="text-fifth">璁垮鐧诲綍</text>
+ </uni-row>
+ </view>
+ <view class="shadow1"
+ :style="'animation-play-state:' + play[1]" />
+ <view class="shadow2"
+ :style="'animation-play-state:' + play[1]" />
+ <view class="shadow3"
+ :style="'animation-play-state:' + play[1]" />
+ <image style="width: 100%;height: 1050rpx;opacity: 0.05;border-radius: 0 0 400rpx 400rpx;position: absolute;"
+ src="../../../static/uview/common/gray-logo.png"></image>
+ <text class="text-forth"
+ @click="login()">璐﹀彿瀵嗙爜鐧诲綍</text>
+ </uni-row>
+ </view>
+ </view>
+ <view class="sec-masking">
+ <uni-row>
+ <text class="text-sixth">鐗堟湰鍙�: v1.0</text>
+ </uni-row>
+ </view>
+ </view>
+ </view>
+ </view>
</template>
<script setup>
-import { ref, reactive, computed, onMounted } from 'vue'
-import useUserStore from '@/store/modules/user'
-import tab from '@/plugins/tab'
-import modal from '@/plugins/modal'
+ import { ref, reactive, computed, onMounted } from "vue";
+ import { updateClientId } from "@/api/login";
+ import useUserStore from "@/store/modules/user";
+ import tab from "@/plugins/tab";
+ import modal from "@/plugins/modal";
-const src = ref("staticimagessoutheast.jpg")
-const isActive = ref(false)
-const isFixedViewVisible = ref(true)
-const animationType = ref("up") // 鍙�夊�硷細right 鎴� up
-const isAnimating = ref(false) // 鎺у埗鍔ㄧ敾鎵ц鐘舵��
-const play = ref(["paused", "paused", "paused"])
-const page = ref("index")
+ const src = ref("staticimagessoutheast.jpg");
+ const isActive = ref(false);
+ const isFixedViewVisible = ref(true);
+ const animationType = ref("up"); // 鍙�夊�硷細right 鎴� up
+ const isAnimating = ref(false); // 鎺у埗鍔ㄧ敾鎵ц鐘舵��
+ const play = ref(["paused", "paused", "paused"]);
+ const page = ref("index");
-const codeUrl = ref("")
-const captchaEnabled = ref(true)
-const loginForm = reactive({
- username: "admin",
- password: "admin123",
- code: "",
- uuid: ''
-})
+ const codeUrl = ref("");
+ const captchaEnabled = ref(true);
+ const loginForm = reactive({
+ username: "admin",
+ password: "admin123",
+ code: "",
+ uuid: "",
+ });
-const collapsedClass = computed(() => {
- return isFixedViewVisible.value ? "" : `collapsed-${animationType.value}`;
-})
+ const collapsedClass = computed(() => {
+ return isFixedViewVisible.value ? "" : `collapsed-${animationType.value}`;
+ });
-onMounted(() => {
- getCode()
-})
+ onMounted(() => {
+ getCode();
+ });
-const login = () => {
- play.value[2] = "running"
- setTimeout(() => { page.value = 'login' }, 1000)
-}
+ const login = () => {
+ play.value[2] = "running";
+ setTimeout(() => {
+ page.value = "login";
+ }, 1000);
+ };
-const back = () => {
- page.value = 'index'
- play.value[0] = "paused"
- play.value[1] = "paused"
- play.value[2] = "paused"
-}
-const startplay = () => {
- play.value[1] = "running"
- isActive.value = true;
- setTimeout(() => { isActive.value = false; }, 300);
- if (isAnimating.value) { return; }
- isAnimating.value = false; // 寮�濮嬪姩鐢绘墽琛�
- play.value[0] = "running"
- isFixedViewVisible.value = !isFixedViewVisible.value;
- setTimeout(() => { uni.navigateBack({ delta: 1 }); }, 1000)
-}
+ const back = () => {
+ page.value = "index";
+ play.value[0] = "paused";
+ play.value[1] = "paused";
+ play.value[2] = "paused";
+ };
+ const startplay = () => {
+ play.value[1] = "running";
+ isActive.value = true;
+ setTimeout(() => {
+ isActive.value = false;
+ }, 300);
+ if (isAnimating.value) {
+ return;
+ }
+ isAnimating.value = false; // 寮�濮嬪姩鐢绘墽琛�
+ play.value[0] = "running";
+ isFixedViewVisible.value = !isFixedViewVisible.value;
+ setTimeout(() => {
+ uni.navigateBack({ delta: 1 });
+ }, 1000);
+ };
-// 鑾峰彇鍥惧舰楠岃瘉鐮�
-const getCode = () => {
- let res = {}
- captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
- if (captchaEnabled.value) {
- codeUrl.value = 'data:image/gif;base64,' + res.img
- loginForm.uuid = res.uuid
- }
-}
+ // 鑾峰彇鍥惧舰楠岃瘉鐮�
+ const getCode = () => {
+ let res = {};
+ captchaEnabled.value =
+ res.captchaEnabled === undefined ? true : res.captchaEnabled;
+ if (captchaEnabled.value) {
+ codeUrl.value = "data:image/gif;base64," + res.img;
+ loginForm.uuid = res.uuid;
+ }
+ };
-// 鐧诲綍鏂规硶
-const handleLogin = async () => {
- if (loginForm.username === "") {
- modal.msgError("璇疯緭鍏ユ偍鐨勮处鍙�")
- } else if (loginForm.password === "") {
- modal.msgError("璇疯緭鍏ユ偍鐨勫瘑鐮�")
- } else if (loginForm.code === "" && captchaEnabled.value) {
- modal.msgError("璇疯緭鍏ラ獙璇佺爜")
- } else {
- modal.loading("鐧诲綍涓紝璇疯�愬績绛夊緟...")
- pwdLogin()
- }
-}
+ // 鐧诲綍鏂规硶
+ const handleLogin = async () => {
+ if (loginForm.username === "") {
+ modal.msgError("璇疯緭鍏ユ偍鐨勮处鍙�");
+ } else if (loginForm.password === "") {
+ modal.msgError("璇疯緭鍏ユ偍鐨勫瘑鐮�");
+ } else if (loginForm.code === "" && captchaEnabled.value) {
+ modal.msgError("璇疯緭鍏ラ獙璇佺爜");
+ } else {
+ modal.loading("鐧诲綍涓紝璇疯�愬績绛夊緟...");
+ pwdLogin();
+ }
+ };
-// 瀵嗙爜鐧诲綍
-const pwdLogin = async () => {
- useUserStore().login(loginForm).then(() => {
- modal.closeLoading()
- loginSuccess()
- }).catch(() => {
- if (captchaEnabled.value) {
- getCode()
- }
- })
-}
+ // 瀵嗙爜鐧诲綍
+ const pwdLogin = async () => {
+ useUserStore()
+ .login(loginForm)
+ .then(() => {
+ modal.closeLoading();
+ loginSuccess();
+ })
+ .catch(() => {
+ if (captchaEnabled.value) {
+ getCode();
+ }
+ });
+ };
-// 鐧诲綍鎴愬姛鍚庯紝澶勭悊鍑芥暟
-const loginSuccess = (result) => {
- // 璁剧疆鐢ㄦ埛淇℃伅
- useUserStore().getInfo().then(res => {
- tab.reLaunch('/pages/index')
- })
-}
+ // 鐧诲綍鎴愬姛鍚庯紝澶勭悊鍑芥暟
+ const loginSuccess = result => {
+ // 璁剧疆鐢ㄦ埛淇℃伅
+ useUserStore()
+ .getInfo()
+ .then(res => {
+ // 鐧诲綍鎴愬姛鍚庯紝灏嗗鎴风鎺ㄩ�佹爣璇嗗彂閫佸埌鏈嶅姟鍣�
+ sendClientIdToServer();
+ tab.reLaunch("/pages/index");
+ });
+ };
+
+ // 灏嗗鎴风鎺ㄩ�佹爣璇嗗彂閫佸埌鏈嶅姟鍣�
+ const sendClientIdToServer = () => {
+ // 鑾峰彇鏈湴瀛樺偍鐨勫鎴风鏍囪瘑
+ const clientId = uni.getStorageSync("clientid");
+ if (clientId) {
+ console.log("鐧诲綍鎴愬姛锛屽噯澶囧彂閫佸鎴风鏍囪瘑鍒版湇鍔″櫒:", clientId);
+ // 杩欓噷璋冪敤鍚庣鎺ュ彛鍙戦�佸鎴风鏍囪瘑
+ // 绀轰緥锛歛pi.updateClientId({ clientId: clientId });
+ updateClientId({ cid: clientId })
+ .then(res => {
+ console.log("鏈嶅姟鍣ㄥ搷搴�:", res);
+ if (res.code === 200) {
+ console.log("瀹㈡埛绔爣璇嗗凡鎴愬姛鍙戦�佸埌鏈嶅姟鍣�");
+ } else {
+ console.log("鏈嶅姟鍣ㄨ繑鍥為敊璇�:", res.msg);
+ }
+ })
+ .catch(error => {
+ console.log("鍙戦�佸鎴风鏍囪瘑鍒版湇鍔″櫒澶辫触:", error);
+ });
+ // 鐢变簬娌℃湁鍏蜂綋鐨勬帴鍙ｏ紝杩欓噷鍙墦鍗版棩蹇�
+ console.log("瀹㈡埛绔爣璇嗗凡鍙戦�佸埌鏈嶅姟鍣�");
+ } else {
+ console.log("鏈幏鍙栧埌瀹㈡埛绔帹閫佹爣璇�");
+ }
+ };
</script>
<style lang="scss">
-page {
- background-color: #ffffff;
-}
+ page {
+ background-color: #ffffff;
+ }
-.left {
- display: flex;
- width: 50rpx;
- height: 50rpx;
- position: fixed;
- top: 0px;
- padding: 10rpx;
-}
+ .left {
+ display: flex;
+ width: 50rpx;
+ height: 50rpx;
+ position: fixed;
+ top: 0px;
+ padding: 10rpx;
+ }
-.cover {
- position: absolute;
- width: 100%;
- height: 1250rpx;
- z-index: 9997;
-}
+ .cover {
+ position: absolute;
+ width: 100%;
+ height: 1250rpx;
+ z-index: 9997;
+ }
-.normal-login-container {
- width: 100%;
- margin-top: 200rpx;
+ .normal-login-container {
+ width: 100%;
+ margin-top: 200rpx;
- .logo-content {
- width: 100%;
- font-size: 21px;
- text-align: center;
- padding-top: 15%;
+ .logo-content {
+ width: 100%;
+ font-size: 21px;
+ text-align: center;
+ padding-top: 15%;
- image {
- border-radius: 4px;
- }
+ image {
+ border-radius: 4px;
+ }
- .title {
- margin-left: 10px;
- }
- }
+ .title {
+ margin-left: 10px;
+ }
+ }
- .login-form-content {
- text-align: center;
- margin: 20px auto;
- margin-top: 15%;
- width: 80%;
+ .login-form-content {
+ text-align: center;
+ margin: 20px auto;
+ margin-top: 15%;
+ width: 80%;
- .input-item {
- margin: 20px auto;
- background-color: #f5f6f7;
- height: 45px;
- border-radius: 20px;
+ .input-item {
+ margin: 20px auto;
+ background-color: #f5f6f7;
+ height: 45px;
+ border-radius: 20px;
- .icon {
- font-size: 38rpx;
- margin-left: 10px;
- color: #999;
- }
+ .icon {
+ font-size: 38rpx;
+ margin-left: 10px;
+ color: #999;
+ }
- .input {
- width: 100%;
- font-size: 14px;
- line-height: 20px;
- text-align: left;
- padding-left: 15px;
- }
+ .input {
+ width: 100%;
+ font-size: 14px;
+ line-height: 20px;
+ text-align: left;
+ padding-left: 15px;
+ }
+ }
- }
+ .login-btn {
+ margin-top: 40px;
+ height: 45px;
+ }
- .login-btn {
- margin-top: 40px;
- height: 45px;
- }
+ .xieyi {
+ color: #333;
+ margin-top: 20px;
+ }
- .xieyi {
- color: #333;
- margin-top: 20px;
- }
+ .login-code {
+ height: 38px;
+ float: right;
- .login-code {
- height: 38px;
- float: right;
+ .login-code-img {
+ height: 38px;
+ position: absolute;
+ margin-left: 10px;
+ width: 200rpx;
+ }
+ }
+ }
+ }
- .login-code-img {
- height: 38px;
- position: absolute;
- margin-left: 10px;
- width: 200rpx;
- }
- }
- }
-}
+ .container {
+ position: relative;
+ }
+ .active {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ z-index: 9999;
+ background: linear-gradient(
+ 180deg,
+ rgba(110, 109, 122, 0.595),
+ rgba(46, 87, 190, 0.714) 70.792%,
+ rgb(17, 120, 222) 100%
+ );
+ box-shadow: inset 0 0 10px 5px rgba(101, 97, 97, 0.5);
+ }
+ .masking {
+ position: absolute;
+ top: -200rpx;
+ width: 100%;
+ height: 1250rpx;
+ background-color: #9acafc;
+ border-radius: 0 0 400rpx 400rpx;
+ box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.27);
+ transition: transform 0.3s ease-out;
+ z-index: 9998;
+ padding: 200rpx 0 0 0;
+ }
+ .collapsed-up {
+ transform: translateY(-100%);
+ }
+ .button {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ transition: background-color 0.3s;
+ z-index: 9999;
+ background: linear-gradient(
+ 180deg,
+ rgba(60, 53, 239, 0.595),
+ rgba(63, 117, 255, 0.714) 70.792%,
+ rgb(70, 161, 253) 100%
+ );
+ // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
+ }
+ .shadow1 {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ border-width: 4rpx;
+ border-color: rgb(70, 161, 253);
+ transition: background-color 0.3s;
+ z-index: 9998;
+ background-color: rgba(70, 161, 253, 0);
-.container {
- position: relative;
-}
+ // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
-.active {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- z-index: 9999;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
+ -webkit-animation-name: "ripple1";
+ /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
+ -webkit-animation-duration: 0.3s;
+ /*鍔ㄧ敾鎸佺画鏃堕棿*/
+ -webkit-animation-timing-function: ease;
+ /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
+ -webkit-animation-delay: 0s;
+ /*鍔ㄧ敾寤惰繜鏃堕棿*/
+ -webkit-animation-direction: normal;
+ /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
+ }
- background: linear-gradient(180deg,
- rgba(110, 109, 122, 0.595),
- rgba(46, 87, 190, 0.714) 70.792%,
- rgb(17, 120, 222) 100%);
- box-shadow: inset 0 0 10px 5px rgba(101, 97, 97, 0.5);
-}
+ .shadow2 {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ border-width: 4rpx;
+ border-color: rgb(70, 161, 253);
+ transition: background-color 0.3s;
+ z-index: 9998;
+ background-color: rgba(70, 161, 253, 0);
-.masking {
- position: absolute;
- top: -200rpx;
- width: 100%;
- height: 1250rpx;
- background-color: #9acafc;
- border-radius: 0 0 400rpx 400rpx;
- box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.27);
- transition: transform 0.3s ease-out;
- z-index: 9998;
- padding: 200rpx 0 0 0;
-}
+ // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
-.collapsed-up {
- transform: translateY(-100%);
-}
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
+ -webkit-animation-name: "ripple2";
+ /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
+ -webkit-animation-duration: 0.4s;
+ /*鍔ㄧ敾鎸佺画鏃堕棿*/
+ -webkit-animation-timing-function: ease;
+ /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
+ -webkit-animation-delay: 0.1s;
+ /*鍔ㄧ敾寤惰繜鏃堕棿*/
+ -webkit-animation-direction: normal;
+ /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
+ }
-.button {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- transition: background-color 0.3s;
- z-index: 9999;
+ .shadow3 {
+ position: absolute;
+ width: 280rpx;
+ height: 280rpx;
+ left: 50%;
+ margin-left: -140rpx;
+ top: 533rpx;
+ bottom: 533rpx;
+ border-radius: 50%;
+ border-width: 4rpx;
+ border-color: rgb(70, 161, 253);
+ transition: background-color 0.3s;
+ z-index: 9998;
+ background-color: rgba(70, 161, 253, 0);
- background: linear-gradient(180deg,
- rgba(60, 53, 239, 0.595),
- rgba(63, 117, 255, 0.714) 70.792%,
- rgb(70, 161, 253) 100%);
- // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
+ // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
- box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
+ -webkit-animation-name: "ripple3";
+ /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
+ -webkit-animation-duration: 0.5s;
+ /*鍔ㄧ敾鎸佺画鏃堕棿*/
+ -webkit-animation-timing-function: ease;
+ /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
+ -webkit-animation-delay: 0.2s;
+ /*鍔ㄧ敾寤惰繜鏃堕棿*/
+ -webkit-animation-direction: normal;
+ /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
+ }
-}
+ .button.disabled {
+ pointer-events: none;
+ /* 绂佺敤鎸夐挳鐨勭偣鍑讳簨浠� */
+ opacity: 0.5;
+ /* 鍗婇�忔槑鏁堟灉 */
+ }
-.shadow1 {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- border-width: 4rpx;
- border-color: rgb(70, 161, 253);
- transition: background-color 0.3s;
- z-index: 9998;
- background-color: rgba(70, 161, 253, 0);
+ .text-first {
+ position: absolute;
+ width: 256rpx;
+ height: 84rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 250rpx;
+ bottom: 986.67rpx;
- // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 64rpx;
+ font-weight: 400;
+ line-height: 84rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ }
- box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
- -webkit-animation-name: 'ripple1';
- /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
- -webkit-animation-duration: 0.3s;
- /*鍔ㄧ敾鎸佺画鏃堕棿*/
- -webkit-animation-timing-function: ease;
- /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
- -webkit-animation-delay: 0s;
- /*鍔ㄧ敾寤惰繜鏃堕棿*/
- -webkit-animation-direction: normal;
- /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
-}
+ .text-second {
+ position: absolute;
+ width: 256rpx;
+ height: 84rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 350rpx;
+ bottom: 986.67rpx;
-.shadow2 {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- border-width: 4rpx;
- border-color: rgb(70, 161, 253);
- transition: background-color 0.3s;
- z-index: 9998;
- background-color: rgba(70, 161, 253, 0);
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 64rpx;
+ font-weight: 400;
+ line-height: 84rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ }
- // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
-
- box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
- -webkit-animation-name: 'ripple2';
- /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
- -webkit-animation-duration: 0.4s;
- /*鍔ㄧ敾鎸佺画鏃堕棿*/
- -webkit-animation-timing-function: ease;
- /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
- -webkit-animation-delay: 0.1s;
- /*鍔ㄧ敾寤惰繜鏃堕棿*/
- -webkit-animation-direction: normal;
- /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
-}
-
-.shadow3 {
- position: absolute;
- width: 280rpx;
- height: 280rpx;
- left: 50%;
- margin-left: -140rpx;
- top: 533rpx;
- bottom: 533rpx;
- border-radius: 50%;
- border-width: 4rpx;
- border-color: rgb(70, 161, 253);
- transition: background-color 0.3s;
- z-index: 9998;
- background-color: rgba(70, 161, 253, 0);
-
- // box-shadow: 0px 0px 62rpx rgba(1, 7, 22, 0.468);
-
- box-shadow: 0 0 10px rgba(0, 0, 0, .3) inset;
- -webkit-animation-name: 'ripple3';
- /*鍔ㄧ敾灞炴�у悕锛屼篃灏辨槸鎴戜滑鍓嶉潰keyframes瀹氫箟鐨勫姩鐢诲悕*/
- -webkit-animation-duration: 0.5s;
- /*鍔ㄧ敾鎸佺画鏃堕棿*/
- -webkit-animation-timing-function: ease;
- /*鍔ㄧ敾棰戠巼锛屽拰transition-timing-function鏄竴鏍风殑*/
- -webkit-animation-delay: 0.2s;
- /*鍔ㄧ敾寤惰繜鏃堕棿*/
- -webkit-animation-direction: normal;
- /*瀹氫箟鍔ㄧ敾鏂瑰紡*/
-}
-
-.button.disabled {
- pointer-events: none;
- /* 绂佺敤鎸夐挳鐨勭偣鍑讳簨浠� */
- opacity: 0.5;
- /* 鍗婇�忔槑鏁堟灉 */
-}
-
-.text-first {
- position: absolute;
- width: 256rpx;
- height: 84rpx;
- left: 50%;
- transform: translateX(-50%);
- top: 250rpx;
- bottom: 986.67rpx;
-
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 64rpx;
- font-weight: 400;
- line-height: 84rpx;
- letter-spacing: 0rpx;
- text-align: center;
-}
-
-.text-second {
- position: absolute;
- width: 256rpx;
- height: 84rpx;
- left: 50%;
- transform: translateX(-50%);
- top: 350rpx;
- bottom: 986.67rpx;
-
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 64rpx;
- font-weight: 400;
- line-height: 84rpx;
- letter-spacing: 0rpx;
- text-align: center;
-}
-
-.text-third {
- position: absolute;
- width: 200rpx;
- height: 60rpx;
- left: 50%;
- transform: translateX(-50%);
- top: 450rpx;
- bottom: 615rpx;
- margin: 0 auto;
-
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 50rpx;
- font-weight: 400;
- line-height: 60rpx;
- letter-spacing: 0rpx;
- text-align: center;
-}
-
-.text-forth {
- position: absolute;
- width: 180rpx;
- height: 36rpx;
- left: 0;
- right: 0;
- top: 948rpx;
- bottom: 330rpx;
- margin: 0 auto;
-
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 27rpx;
- font-weight: 400;
- line-height: 36rpx;
- letter-spacing: 0rpx;
- text-align: center;
- text-decoration-line: underline;
-}
+ .text-third {
+ position: absolute;
+ width: 200rpx;
+ height: 60rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ top: 450rpx;
+ bottom: 615rpx;
+ margin: 0 auto;
-.text-fifth {
- position: absolute;
- width: 120rpx;
- height: 150rpx;
- left: 0;
- right: 0;
- top: 60rpx;
- bottom: 418rpx;
- margin: 0 auto;
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 50rpx;
+ font-weight: 400;
+ line-height: 60rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ }
- color: rgb(255, 255, 255);
- font-family: "Microsoft YaHei";
- font-size: 60rpx;
- font-weight: 400;
- line-height: 80rpx;
- letter-spacing: 0rpx;
- text-align: center;
-}
+ .text-forth {
+ position: absolute;
+ width: 180rpx;
+ height: 36rpx;
+ left: 0;
+ right: 0;
+ top: 948rpx;
+ bottom: 330rpx;
+ margin: 0 auto;
-.text-sixth {
- position: absolute;
- width: 100rpx;
- height: 17rpx;
- margin: 0 auto;
- top: 710rpx;
- left: 50%;
- transform: translateX(-50%);
- padding: 0 179rpx 7rpx 180rpx;
- z-index: 9997;
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 27rpx;
+ font-weight: 400;
+ line-height: 36rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ text-decoration-line: underline;
+ }
- color: rgb(15, 15, 15);
- font-family: "Microsoft YaHei";
- font-size: 17rpx;
- font-weight: 400;
- line-height: 17rpx;
- letter-spacing: 0;
- text-align: left;
-}
+ .text-fifth {
+ position: absolute;
+ width: 120rpx;
+ height: 150rpx;
+ left: 0;
+ right: 0;
+ top: 60rpx;
+ bottom: 418rpx;
+ margin: 0 auto;
-.sec-masking {
- position: fixed;
- bottom: 0;
- width: 100%;
- height: 750rpx;
- background-color: #ffffff;
- z-index: 9996;
-}
+ color: rgb(255, 255, 255);
+ font-family: "Microsoft YaHei";
+ font-size: 60rpx;
+ font-weight: 400;
+ line-height: 80rpx;
+ letter-spacing: 0rpx;
+ text-align: center;
+ }
-.slide-top {
- -webkit-animation: slide-top 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
- animation: slide-top 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
-}
+ .text-sixth {
+ position: absolute;
+ width: 100rpx;
+ height: 17rpx;
+ margin: 0 auto;
+ top: 710rpx;
+ left: 50%;
+ transform: translateX(-50%);
+ padding: 0 179rpx 7rpx 180rpx;
+ z-index: 9997;
-.slide-top1 {
- -webkit-animation: slide-top1 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
- animation: slide-top1 1s cubic-bezier(0.600, -0.280, 0.735, 0.045) both;
-}
+ color: rgb(15, 15, 15);
+ font-family: "Microsoft YaHei";
+ font-size: 17rpx;
+ font-weight: 400;
+ line-height: 17rpx;
+ letter-spacing: 0;
+ text-align: left;
+ }
-.scale-in-center {
- animation: scale-in-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
-}
+ .sec-masking {
+ position: fixed;
+ bottom: 0;
+ width: 100%;
+ height: 750rpx;
+ background-color: #ffffff;
+ z-index: 9996;
+ }
-@-webkit-keyframes slide-top {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
+ .slide-top {
+ -webkit-animation: slide-top 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
+ animation: slide-top 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
+ }
- 100% {
- -webkit-transform: translateY(-1050px);
- transform: translateY(-1050px);
- }
-}
+ .slide-top1 {
+ -webkit-animation: slide-top1 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
+ animation: slide-top1 1s cubic-bezier(0.6, -0.28, 0.735, 0.045) both;
+ }
-@-webkit-keyframes slide-top1 {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
+ .scale-in-center {
+ animation: scale-in-center 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
+ }
- 100% {
- -webkit-transform: translateY(-1050px);
- transform: translateY(-1050px);
- }
-}
+ @-webkit-keyframes slide-top {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
-@keyframes ripple1 {
- 0% {
- transform: scale(1);
- }
+ 100% {
+ -webkit-transform: translateY(-1050px);
+ transform: translateY(-1050px);
+ }
+ }
- 100% {
- transform: scale(1.4);
- opacity: 0;
+ @-webkit-keyframes slide-top1 {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
- }
-}
+ 100% {
+ -webkit-transform: translateY(-1050px);
+ transform: translateY(-1050px);
+ }
+ }
-@keyframes ripple2 {
- 0% {
- transform: scale(1);
- }
+ @keyframes ripple1 {
+ 0% {
+ transform: scale(1);
+ }
- 100% {
- transform: scale(1.5);
- opacity: 0;
+ 100% {
+ transform: scale(1.4);
+ opacity: 0;
+ }
+ }
- }
-}
+ @keyframes ripple2 {
+ 0% {
+ transform: scale(1);
+ }
-@keyframes ripple3 {
- 0% {
- transform: scale(1);
- }
+ 100% {
+ transform: scale(1.5);
+ opacity: 0;
+ }
+ }
- 100% {
- transform: scale(1.6);
- opacity: 0;
+ @keyframes ripple3 {
+ 0% {
+ transform: scale(1);
+ }
- }
-}
+ 100% {
+ transform: scale(1.6);
+ opacity: 0;
+ }
+ }
-@keyframes slide-top {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
+ @keyframes slide-top {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
- 100% {
- -webkit-transform: translateY(-1050px);
- transform: translateY(-1050px);
- }
-}
+ 100% {
+ -webkit-transform: translateY(-1050px);
+ transform: translateY(-1050px);
+ }
+ }
-@keyframes slide-top1 {
- 0% {
- -webkit-transform: translateY(0);
- transform: translateY(0);
- }
+ @keyframes slide-top1 {
+ 0% {
+ -webkit-transform: translateY(0);
+ transform: translateY(0);
+ }
- 100% {
- -webkit-transform: translateY(-1050px);
- transform: translateY(-1050px);
- }
-}
+ 100% {
+ -webkit-transform: translateY(-1050px);
+ transform: translateY(-1050px);
+ }
+ }
-@keyframes scale-in-center {
- 0% {
- transform: scale(0);
- opacity: 1;
- }
+ @keyframes scale-in-center {
+ 0% {
+ transform: scale(0);
+ opacity: 1;
+ }
- 100% {
- transform: scale(1);
- opacity: 1;
- }
-}
+ 100% {
+ transform: scale(1);
+ opacity: 1;
+ }
+ }
</style>
\ No newline at end of file
--
Gitblit v1.9.3