Skip to content

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

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

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