|
@@ -1,9 +1,45 @@
|
|
|
<template>
|
|
<template>
|
|
|
- <view class="model" v-if="loginStyle == 0">
|
|
|
|
|
- <view style="color:white;font-size:36upx;margin-top:300upx;margin-bottom:30upx;">首次使用,请先登录</view>
|
|
|
|
|
- <view class="freeApply" @click="login">手机号一键登录</view>
|
|
|
|
|
|
|
+ <view class="login-overlay" v-if="loginStyle == 0">
|
|
|
|
|
+ <view class="login-modal">
|
|
|
|
|
+ <!-- 背景装饰 -->
|
|
|
|
|
+ <view class="bg-decoration">
|
|
|
|
|
+ <view class="circle circle-1"></view>
|
|
|
|
|
+ <view class="circle circle-2"></view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 主要内容 -->
|
|
|
|
|
+ <view class="content-wrapper">
|
|
|
|
|
+ <!-- 图标区域 -->
|
|
|
|
|
+ <view class="icon-section">
|
|
|
|
|
+ <view class="login-icon">
|
|
|
|
|
+ <text class="icon-text">🔐</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 文字区域 -->
|
|
|
|
|
+ <view class="text-section">
|
|
|
|
|
+ <view class="title">请先登录</view>
|
|
|
|
|
+ <view class="subtitle">登录后享受更多功能</view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 按钮区域 -->
|
|
|
|
|
+ <view class="button-section">
|
|
|
|
|
+ <view class="login-btn" @click="login">
|
|
|
|
|
+ <text class="btn-text">手机号一键登录</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+ <!-- 说明文字 -->
|
|
|
|
|
+ <view class="notice-section">
|
|
|
|
|
+ <text class="notice-text">为了更好提供服务,需要获取您的手机号,如不接受,你可以拒绝使用,点右上角关闭此小程序</text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+
|
|
|
|
|
+
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
</view>
|
|
</view>
|
|
|
</template>
|
|
</template>
|
|
|
|
|
+
|
|
|
<script>
|
|
<script>
|
|
|
export default {
|
|
export default {
|
|
|
props: {
|
|
props: {
|
|
@@ -26,7 +62,7 @@ export default {
|
|
|
</script>
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
<style lang="scss" scoped>
|
|
|
-.model {
|
|
|
|
|
|
|
+.login-overlay {
|
|
|
position: fixed;
|
|
position: fixed;
|
|
|
z-index: 9999;
|
|
z-index: 9999;
|
|
|
top: 0;
|
|
top: 0;
|
|
@@ -34,64 +70,204 @@ export default {
|
|
|
width: 100vw;
|
|
width: 100vw;
|
|
|
height: 100vh;
|
|
height: 100vh;
|
|
|
background: rgba(0, 0, 0, 0.6);
|
|
background: rgba(0, 0, 0, 0.6);
|
|
|
- color: #fff;
|
|
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.login-modal {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ width: 600upx;
|
|
|
|
|
+ max-width: 90vw;
|
|
|
|
|
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
|
|
|
|
+ border-radius: 24upx;
|
|
|
|
|
+ box-shadow: 0 20upx 60upx rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ overflow: hidden;
|
|
|
|
|
+ animation: modalShow 0.3s ease-out;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@keyframes modalShow {
|
|
|
|
|
+ from {
|
|
|
|
|
+ opacity: 0;
|
|
|
|
|
+ transform: scale(0.8) translateY(50upx);
|
|
|
|
|
+ }
|
|
|
|
|
+ to {
|
|
|
|
|
+ opacity: 1;
|
|
|
|
|
+ transform: scale(1) translateY(0);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 背景装饰
|
|
|
|
|
+.bg-decoration {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ top: 0;
|
|
|
|
|
+ left: 0;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 100%;
|
|
|
overflow: hidden;
|
|
overflow: hidden;
|
|
|
|
|
+
|
|
|
|
|
+ .circle {
|
|
|
|
|
+ position: absolute;
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
|
|
+ animation: float 4s ease-in-out infinite;
|
|
|
|
|
+
|
|
|
|
|
+ &.circle-1 {
|
|
|
|
|
+ width: 80upx;
|
|
|
|
|
+ height: 80upx;
|
|
|
|
|
+ top: 20%;
|
|
|
|
|
+ right: 10%;
|
|
|
|
|
+ animation-delay: 0s;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ &.circle-2 {
|
|
|
|
|
+ width: 60upx;
|
|
|
|
|
+ height: 60upx;
|
|
|
|
|
+ bottom: 30%;
|
|
|
|
|
+ left: 10%;
|
|
|
|
|
+ animation-delay: 2s;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+@keyframes float {
|
|
|
|
|
+ 0%, 100% {
|
|
|
|
|
+ transform: translateY(0px) rotate(0deg);
|
|
|
|
|
+ }
|
|
|
|
|
+ 50% {
|
|
|
|
|
+ transform: translateY(-10px) rotate(90deg);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+.content-wrapper {
|
|
|
|
|
+ position: relative;
|
|
|
|
|
+ z-index: 2;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
- & > .noData_img {
|
|
|
|
|
- width: 318upx;
|
|
|
|
|
- height: 318upx;
|
|
|
|
|
- margin: 100upx auto 0;
|
|
|
|
|
|
|
+ padding: 60upx 40upx;
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 图标区域
|
|
|
|
|
+.icon-section {
|
|
|
|
|
+ margin-bottom: 40upx;
|
|
|
|
|
+
|
|
|
|
|
+ .login-icon {
|
|
|
|
|
+ width: 100upx;
|
|
|
|
|
+ height: 100upx;
|
|
|
|
|
+ margin: 0 auto;
|
|
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
|
|
+ border-radius: 50%;
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ backdrop-filter: blur(10px);
|
|
|
|
|
+ border: 2upx solid rgba(255, 255, 255, 0.3);
|
|
|
|
|
+ box-shadow: 0 8upx 32upx rgba(0, 0, 0, 0.1);
|
|
|
|
|
+
|
|
|
|
|
+ .icon-text {
|
|
|
|
|
+ font-size: 50upx;
|
|
|
|
|
+ }
|
|
|
}
|
|
}
|
|
|
- & > .no_data_text {
|
|
|
|
|
- font-size: 32upx;
|
|
|
|
|
- color: #ffffff;
|
|
|
|
|
- text-align: center;
|
|
|
|
|
- margin: 50upx 0;
|
|
|
|
|
- }
|
|
|
|
|
- & > .freeApply {
|
|
|
|
|
- width: 320upx;
|
|
|
|
|
- height: 110upx;
|
|
|
|
|
- line-height:110upx;
|
|
|
|
|
- background: linear-gradient(90deg, #3385ff, #33b0ff);
|
|
|
|
|
- border-radius:20upx;
|
|
|
|
|
- margin: 0upx auto 0 auto;
|
|
|
|
|
- font-size: 34upx;
|
|
|
|
|
- font-weight:bold;
|
|
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 文字区域
|
|
|
|
|
+.text-section {
|
|
|
|
|
+ margin-bottom: 50upx;
|
|
|
|
|
+
|
|
|
|
|
+ .title {
|
|
|
|
|
+ font-size: 36upx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
|
|
|
+ margin-bottom: 16upx;
|
|
|
|
|
+ text-shadow: 0 2upx 4upx rgba(0, 0, 0, 0.3);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .subtitle {
|
|
|
|
|
+ font-size: 28upx;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.9);
|
|
|
|
|
+ line-height: 1.4;
|
|
|
|
|
+ text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 按钮区域
|
|
|
|
|
+.button-section {
|
|
|
|
|
+ margin-bottom: 30upx;
|
|
|
|
|
+
|
|
|
|
|
+ .login-btn {
|
|
|
|
|
+ display: flex;
|
|
|
|
|
+ align-items: center;
|
|
|
|
|
+ justify-content: center;
|
|
|
|
|
+ width: 100%;
|
|
|
|
|
+ height: 88upx;
|
|
|
|
|
+ background: linear-gradient(135deg, #ff6b6b, #ee5a24);
|
|
|
|
|
+ border-radius: 44upx;
|
|
|
|
|
+ box-shadow: 0 8upx 24upx rgba(238, 90, 36, 0.4);
|
|
|
|
|
+ transition: all 0.3s ease;
|
|
|
|
|
+ border: none;
|
|
|
|
|
+ cursor: pointer;
|
|
|
|
|
+
|
|
|
|
|
+ &:active {
|
|
|
|
|
+ transform: translateY(2upx);
|
|
|
|
|
+ box-shadow: 0 4upx 12upx rgba(238, 90, 36, 0.4);
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-icon {
|
|
|
|
|
+ font-size: 32upx;
|
|
|
|
|
+ margin-right: 12upx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .btn-text {
|
|
|
|
|
+ font-size: 32upx;
|
|
|
|
|
+ font-weight: 600;
|
|
|
|
|
+ color: #ffffff;
|
|
|
|
|
+ letter-spacing: 1upx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 说明文字区域
|
|
|
|
|
+.notice-section {
|
|
|
|
|
+ .notice-text {
|
|
|
|
|
+ font-size: 24upx;
|
|
|
|
|
+ color: rgba(255, 255, 255, 0.8);
|
|
|
|
|
+ line-height: 1.5;
|
|
|
text-align: center;
|
|
text-align: center;
|
|
|
|
|
+ text-shadow: 0 1upx 2upx rgba(0, 0, 0, 0.2);
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+
|
|
|
|
|
+// 响应式适配
|
|
|
|
|
+@media (max-width: 750upx) {
|
|
|
|
|
+ .login-modal {
|
|
|
|
|
+ width: 520upx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .content-wrapper {
|
|
|
|
|
+ padding: 50upx 30upx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .icon-section .login-icon {
|
|
|
|
|
+ width: 80upx;
|
|
|
|
|
+ height: 80upx;
|
|
|
|
|
+
|
|
|
|
|
+ .icon-text {
|
|
|
|
|
+ font-size: 40upx;
|
|
|
|
|
+ }
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text-section .title {
|
|
|
|
|
+ font-size: 32upx;
|
|
|
|
|
+ }
|
|
|
|
|
+
|
|
|
|
|
+ .text-section .subtitle {
|
|
|
|
|
+ font-size: 26upx;
|
|
|
}
|
|
}
|
|
|
- &>.experience{
|
|
|
|
|
- margin-top: 40upx;
|
|
|
|
|
- color: #fff;
|
|
|
|
|
- font-size: 30upx;
|
|
|
|
|
- }
|
|
|
|
|
- &>.experFrame{
|
|
|
|
|
- margin-top: 50upx;
|
|
|
|
|
- height: 50upx;
|
|
|
|
|
- &>view{
|
|
|
|
|
- margin: 0 auto;
|
|
|
|
|
- &>.experInput{
|
|
|
|
|
- height: 70upx;
|
|
|
|
|
- width: 250upx;
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- vertical-align: middle;
|
|
|
|
|
- border-radius: 8upx;
|
|
|
|
|
- background-color: #fff;
|
|
|
|
|
- border: 1px solid #ccc;
|
|
|
|
|
- color: #666;
|
|
|
|
|
- padding-left: 20upx;
|
|
|
|
|
- box-sizing: border-box;
|
|
|
|
|
- text-align: left;
|
|
|
|
|
- }
|
|
|
|
|
- &>text{
|
|
|
|
|
- display: inline-block;
|
|
|
|
|
- line-height: 70upx;
|
|
|
|
|
- padding: 0 20upx;
|
|
|
|
|
- background-color: #3385FF;
|
|
|
|
|
- vertical-align: middle;
|
|
|
|
|
- font-size: 30upx;
|
|
|
|
|
- margin-left: 20upx;
|
|
|
|
|
- }
|
|
|
|
|
|
|
+
|
|
|
|
|
+ .button-section .login-btn {
|
|
|
|
|
+ height: 80upx;
|
|
|
|
|
+
|
|
|
|
|
+ .btn-text {
|
|
|
|
|
+ font-size: 30upx;
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|
|
|
}
|
|
}
|