zhangguoping
/
marketingSaaS-front_ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

云南邮储活动

This commit is contained in:
zhangguoping 2024-09-26 13:49:45 +08:00
parent aa922a57b9
commit f51449d10a
13 changed files with 117 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/ynyc/login.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
src/assets/images/ynyc/login.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 86 KiB

BIN
src/assets/images/ynyc/notLogin.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 156 KiB

BIN
src/assets/images/ynyc/notLogin.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.7 KiB

BIN
src/assets/images/ynyc/receive.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 MiB

BIN
src/assets/images/ynyc/result.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.3 MiB

BIN
src/assets/images/ynyc/result.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 71 KiB

BIN
src/assets/images/ynyc/rules.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 464 KiB

BIN
src/assets/images/ynyc/rules.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 33 KiB

BIN
src/assets/images/ynyc/view.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 1.9 MiB

BIN
src/assets/images/ynyc/view.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 102 KiB

112
src/pages/ynyc/index.vue
View File

@ -240,8 +240,9 @@ page {
} }
.ynyc { .ynyc {
width: 100vw; width: 100vw;
height: 1334rpx; height: 100vh;
// height: 100vh; // max-height: 1334rpx;
overflow: auto;
.mast-content { .mast-content {
height: 100% !important; height: 100% !important;
@ -253,7 +254,7 @@ page {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-image: url('@/assets/images/ynyc/rules.png'); background-image: url('@/assets/images/ynyc/rules.webp');
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;
@ -325,22 +326,26 @@ page {
.receive { .receive {
position: relative; position: relative;
background-image: url('@/assets/images/ynyc/receive.png'); background-image: url('@/assets/images/ynyc/view.webp');
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: 100%; // height: 100%;
height: 1660rpx;
} }
.receive-rules { .receive-rules {
position: absolute; position: absolute;
top: 123rpx; // top: 103rpx;
top: 133rpx;
right: 0; right: 0;
z-index: 1; z-index: 1;
width: 50rpx; width: 50rpx;
height: 124rpx; // height: 124rpx;
height: 144rpx;
} }
.receive-btn { .receive-btn {
position: absolute; position: absolute;
top: 813rpx; // top: 753rpx;
top: 953rpx;
left: 102rpx; left: 102rpx;
width: 553rpx; width: 553rpx;
height: 122rpx !important; height: 122rpx !important;
@ -352,7 +357,8 @@ page {
} }
.receive-content { .receive-content {
position: absolute; position: absolute;
top: 923rpx; // top: 863rpx;
top: 1103rpx;
left: 0; left: 0;
width: 100%; width: 100%;
height: 102rpx; height: 102rpx;
@ -364,39 +370,41 @@ page {
color: #ffcc89; color: #ffcc89;
font-size: 27rpx; font-size: 27rpx;
} }
.receive-txt::before { // .receive-txt::before {
content: ''; // content: '';
display: block; // display: block;
position: absolute; // position: absolute;
top: 30rpx; // top: 50rpx;
left: 110rpx; // left: 110rpx;
width: 50rpx; // width: 50rpx;
height: 50rpx; // height: 50rpx;
border-radius: 50%; // border-radius: 50%;
background-color: rgb(249, 76, 58); // background-color: rgb(249, 76, 58);
} // }
.receive-txt::after { // .receive-txt::after {
content: ''; // content: '';
display: block; // display: block;
position: absolute; // position: absolute;
top: 28rpx; // top: 28rpx;
right: 108rpx; // right: 108rpx;
width: 50rpx; // width: 50rpx;
height: 50rpx; // height: 50rpx;
border-radius: 50%; // border-radius: 50%;
background-color: rgb(249, 76, 58); // background-color: rgb(249, 76, 58);
} // }
.result { .result {
position: relative; position: relative;
background-image: url('@/assets/images/ynyc/result.png'); background-image: url('@/assets/images/ynyc/result.webp');
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: 100%; // height: 100%;
// height: 1334rpx;
height: 1660rpx;
} }
.result-title { .result-title {
position: absolute; position: absolute;
top: 590rpx; top: 850rpx;
left: 0; left: 0;
width: 100%; width: 100%;
} }
@ -412,17 +420,41 @@ page {
} }
.result-cancle { .result-cancle {
position: absolute; position: absolute;
top: 834rpx; top: 1034rpx;
left: 344rpx; left: 324rpx;
width: 62rpx; width: 62rpx;
height: 62rpx; height: 62rpx;
border-radius: 50%;
border: 5rpx solid #fff;
}
.result-cancle::before {
content: '';
display: block;
width: 41rpx;
height: 6rpx;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(45deg);
}
.result-cancle::after {
content: '';
display: block;
width: 41rpx;
height: 6rpx;
background: #fff;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) rotate(-45deg);
} }
.result-led { .result-led {
position: absolute; position: absolute;
top: 404rpx; top: 614rpx;
left: 454rpx; left: 445rpx;
width: 142rpx; width: 142rpx;
height: 122rpx; height: 142rpx;
} }
.result-bottom { .result-bottom {
position: fixed; position: fixed;
@ -430,7 +462,7 @@ page {
bottom: 0; bottom: 0;
width: 100%; width: 100%;
background-color: rgba(0, 0, 0, 0.6); background-color: rgba(0, 0, 0, 0.6);
height: calc(100vh - 1334rpx); height: calc(100vh - 1660rpx);
} }
} }
</style> </style>

72
src/pages/ynyc/login.vue
View File

@ -31,7 +31,7 @@
<wd-button class="login-btn" plain hairline @click="loginFun">立即参与</wd-button> <wd-button class="login-btn" plain hairline @click="loginFun">立即参与</wd-button>
<wd-popup custom-style=" width: 599rpx;height: 543rpx;" v-model="show" closable> <wd-popup custom-style=" width: 599rpx;height: 543rpx;" v-model="show" closable>
<view class="notLogin"> <view class="notLogin">
<view class="notLogin-txt">对不起，您不符合活动参与资格！</view> <view class="notLogin-txt">{{ showmsg }}</view>
<view class="notLogin-btn" @click="show = !show"></view> <view class="notLogin-btn" @click="show = !show"></view>
</view> </view>
</wd-popup> </wd-popup>
@ -92,7 +92,8 @@ const code = ref('')
const codemsg = ref('获取验证码') const codemsg = ref('获取验证码')
const codesecond = ref(60) const codesecond = ref(60)
const show = ref(false) const show = ref(false)
const phoneRegex = /^(\+\d{1,2}\s)?\(?\d{3,4}\)?[\s.-]?\d{3,4}[\s.-]?\d{4}$/ const showmsg = ref('对不起，您不符合活动参与资格！')
const phoneRegex = /^1[3-9]\d{9}$/
const query = reactive<any>({}) const query = reactive<any>({})
const contentMsg = ref('') const contentMsg = ref('')
@ -140,10 +141,12 @@ const getPhoneVaild = async () => {
} }
}, 800) }, 800)
} else { } else {
uni.showToast({ show.value = true
title: res.message, showmsg.value = res.message
icon: 'none', // uni.showToast({
}) // title: res.message,
// icon: 'none',
// })
} }
} }
@ -182,10 +185,12 @@ const loginFun = async () => {
'*', '*',
) )
} else { } else {
uni.showToast({ show.value = true
title: res.message, showmsg.value = res.message
icon: 'none', // uni.showToast({
}) // title: res.message,
// icon: 'none',
// })
} }
} }
@ -214,8 +219,11 @@ page {
min-height: 38rpx; min-height: 38rpx;
} }
.ynyc { .ynyc {
position: relative;
width: 100vw; width: 100vw;
height: 1334rpx; height: 100vh;
max-height: 1334rpx;
overflow: hidden;
background-color: #fafafa; background-color: #fafafa;
.mast-content { .mast-content {
@ -225,15 +233,18 @@ page {
} }
.login { .login {
position: relative; position: fixed;
background-image: url('@/assets/images/ynyc/login.png'); top: 0;
left: 0;
background-image: url('@/assets/images/ynyc/login.webp');
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: 100%; // height: 100%;
height: 1334rpx;
} }
.notLogin { .notLogin {
position: relative; position: relative;
background-image: url('@/assets/images/ynyc/notLogin.png'); background-image: url('@/assets/images/ynyc/notLogin.webp');
background-size: 100% 100%; background-size: 100% 100%;
width: 599rpx; width: 599rpx;
height: 543rpx; height: 543rpx;
@ -241,7 +252,9 @@ page {
.notLogin-txt { .notLogin-txt {
position: absolute; position: absolute;
top: 278rpx; top: 278rpx;
left: 58rpx; left: 0;
width: 100%;
text-align: center;
} }
.notLogin-btn { .notLogin-btn {
position: absolute; position: absolute;
@ -252,7 +265,7 @@ page {
} }
.login-rules { .login-rules {
position: absolute; position: absolute;
top: 65rpx; top: 155rpx;
right: 0; right: 0;
z-index: 1; z-index: 1;
width: 50rpx; width: 50rpx;
@ -260,26 +273,31 @@ page {
} }
.login-input-name { .login-input-name {
position: absolute; position: absolute;
top: 583rpx; top: 680rpx;
left: 110rpx; left: 118rpx;
width: 530rpx; width: 530rpx;
height: 38rpx !important; height: 38rpx !important;
background-color: #f2f2f2; background-color: #f2f2f2;
} }
.login-input-verify { .login-input-verify {
position: absolute; position: absolute;
top: 673rpx; top: 760rpx;
left: 110rpx; left: 85rpx;
width: 260rpx; // width: 260rpx;
height: 38rpx !important; // height: 38rpx !important;
// background-color: #f2f2f2;
width: 230rpx;
height: 40rpx !important;
padding: 24rpx 32rpx 22rpx;
background-color: #f2f2f2; background-color: #f2f2f2;
border-radius: 30rpx;
} }
.login-valid { .login-valid {
position: absolute !important; position: absolute !important;
top: 662rpx; top: 760rpx;
right: 84rpx; right: 84rpx;
width: 262rpx; width: 262rpx;
height: 76rpx !important; height: 86rpx !important;
color: #c91b10 !important; color: #c91b10 !important;
border: 2rpx solid #c91b10 !important; border: 2rpx solid #c91b10 !important;
border-radius: 50rpx !important; border-radius: 50rpx !important;
@ -287,7 +305,7 @@ page {
} }
.login-btn { .login-btn {
position: absolute; position: absolute;
top: 800rpx; top: 900rpx;
left: 82rpx; left: 82rpx;
width: 586rpx; width: 586rpx;
height: 102rpx !important; height: 102rpx !important;
@ -302,7 +320,7 @@ page {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
left: 0; left: 0;
background-image: url('@/assets/images/ynyc/rules.png'); background-image: url('@/assets/images/ynyc/rules.webp');
background-size: 100% 100%; background-size: 100% 100%;
width: 100%; width: 100%;
height: 100%; height: 100%;