Skip to content

basic-uniapp-v3
basic-uniapp-v3
提交 a70adcc7 作者: e
操作

feat: 修复登录页报复和弹框文字不居中的问题

上级 f0caf954
正在显示 包含 146 行增加 和 138 行删除
src/pages/login/login.vue
......@@ -206,10 +206,6 @@
}
onHide(() => {
loop && clearInterval(loop)
loop = null
direction = 'right'
count.value = 0
model.show = false
})
......@@ -456,6 +452,18 @@
width:650rpx;
}
.fui-descr {
letter-spacing: 1rpx;
padding: 50rpx;
font-size: 24rpx;
color: #b2b2b2;
padding-top: 12rpx;
padding-bottom: 48rpx;
::v-deep(.fui-text__content) {
text-indent: 0 !important;
}
}
.form {
position: absolute;
......
src/pages/splash/splash.vue
<script setup lang="ts">
import { ref, onMounted,onUnmounted } from 'vue';
import { getQueryByType } from '/@/api/model/dict';
const mediaUrl = ref("");
const seconds = ref(4);
let timer = null;
onLoad(() => {
getServiceItems()
})
onMounted(() => {
countdown();
});
onUnmounted(() => {
clearTimerInterval()
});
function clearTimerInterval(){
clearInterval(timer);
}
function getServiceItems() {
getQueryByType({ type: 2 }).then((res) => {
mediaUrl.value = res[0].mediaUrl;
})
}
function countdown() {
timer = setInterval(() => {
if (seconds.value > 0) {
seconds.value -= 1;
console.log(seconds.value)
} else {
clearTimerInterval()
navigateToLogin();
}
}, 1000);
}
function navigateToLogin() {
uni.redirectTo({
url: '/pages/login/login'
});
// import { onMounted, onUnmounted, ref } from 'vue'
import { getQueryByType } from '/@/api/model/dict'
const mediaUrl = ref('')
const seconds = ref(4)
let timer = null
onLoad(() => {
getServiceItems()
})
onMounted(() => {
countdown()
})
onUnmounted(() => {
clearTimerInterval()
})
function clearTimerInterval() {
clearInterval(timer)
}
function getServiceItems() {
getQueryByType({ type: 2 }).then((res) => {
mediaUrl.value = res[0].mediaUrl
})
}
function countdown() {
timer = setInterval(() => {
if (seconds.value > 0) {
seconds.value -= 1
} else {
clearTimerInterval()
navigateToLogin()
}
}, 1000)
}
function navigateToLogin() {
uni.redirectTo({
url: '/pages/login/login',
})
}
</script>
<template>
<view class="container">
<image class="splash_bg" :src="mediaUrl" mode="aspectFill"></image>
<!-- <view class="middle_logo_content">
<view class="container">
<image class="splash_bg" :src="mediaUrl" mode="aspectFill" />
<!-- <view class="middle_logo_content">
<view class="logo_view">
<image class="splash_logo" src="/static/images/home/icon.png" />
</view>
......@@ -50,102 +50,102 @@
<image class="server_text_bg" src="/static/images/splash/server_text.png"></image>
<image class="outline_bg" src="/static/images/splash/outline.png"></image>
</view> -->
<view class="countdown_view">
<image class="shadow_img" src="/static/images/splash/shadow.png" />
<view class="countdown_val"><text>{{ seconds }}s</text></view>
</view>
<view class="under_btn_view">
<fui-button
height="80rpx"
background="linear-gradient(233.81deg, rgba(92, 181, 110, 1) 0%, rgba(100, 214, 62, 1) 100%)"
size="28rpx"
radius="40rpx"
text="立即体验"
@click="navigateToLogin"
/>
</view>
</view>
</template>
<view class="countdown_view">
<image class="shadow_img" src="/static/images/splash/shadow.png" />
<view class="countdown_val"
><text>{{ seconds }}s</text></view
>
</view>
<view class="under_btn_view">
<fui-button
height="80rpx"
background="linear-gradient(233.81deg, rgba(92, 181, 110, 1) 0%, rgba(100, 214, 62, 1) 100%)"
size="28rpx"
radius="40rpx"
text="立即体验"
@click="navigateToLogin"
/>
</view>
</view>
</template>
<style lang="less" scoped>
.container {
height: 100vh;
width:750rpx;
position: relative;
.splash_bg {
width: 100%;
height: 100vh;
}
.middle_logo_content{
position: absolute;
top: 250rpx;
left: 0rpx;
right: 0rpx;
display:flex;
flex-direction: column;
align-items: center;
.logo_view{
width: 136rpx;
height: 136rpx;
border-radius: 24rpx;
background-color: #fff;
display:flex;
justify-content: center;
align-items: center;
.splash_logo{
width:110rpx;
height:110rpx;
}
}
.logo_text_bg{
margin-top:32rpx;
width: 192rpx;
height: 64rpx;
}
.server_text_bg{
width: 528rpx;
height: 116rpx;
}
.outline_bg{
margin-top:-36rpx;
width: 464rpx;
height: 54rpx;
}
}
.countdown_view{
position: absolute;
left: 612rpx;
top: 118rpx;
width: 108rpx;
height: 52rpx;
.shadow_img{
width: 108rpx;
height: 52rpx;
}
.countdown_val{
width: 108rpx;
height: 52rpx;
position: absolute;
left:0rpx;
top:0rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color:#fff;
font-weight: 400;
}
}
.under_btn_view{
width:650rpx;
position: absolute;
bottom: 52rpx;
left:50rpx;
}
}
.container {
height: 100vh;
width: 750rpx;
position: relative;
.splash_bg {
width: 100%;
height: 100vh;
}
.middle_logo_content {
position: absolute;
top: 250rpx;
left: 0rpx;
right: 0rpx;
display: flex;
flex-direction: column;
align-items: center;
.logo_view {
width: 136rpx;
height: 136rpx;
border-radius: 24rpx;
background-color: #fff;
display: flex;
justify-content: center;
align-items: center;
.splash_logo {
width: 110rpx;
height: 110rpx;
}
}
.logo_text_bg {
margin-top: 32rpx;
width: 192rpx;
height: 64rpx;
}
.server_text_bg {
width: 528rpx;
height: 116rpx;
}
.outline_bg {
margin-top: -36rpx;
width: 464rpx;
height: 54rpx;
}
}
.countdown_view {
position: absolute;
left: 612rpx;
top: 118rpx;
width: 108rpx;
height: 52rpx;
.shadow_img {
width: 108rpx;
height: 52rpx;
}
.countdown_val {
width: 108rpx;
height: 52rpx;
position: absolute;
left: 0rpx;
top: 0rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 26rpx;
color: #fff;
font-weight: 400;
}
}
.under_btn_view {
width: 650rpx;
position: absolute;
bottom: 52rpx;
left: 50rpx;
}
}
</style>
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论