``` 内容更新和性能优化 - 更新了关于页面的文字内容，使其更加精简和准确。 -移除了不必要的加载动画，提升了页面加载速度和用户体验。 - 注释掉了一些敏感信息获取代码，以遵守最新的隐私政策。 - 修正了登录功能中的一个错误，确保用户登录时的UUID正确分配。- 移除了天气相关功能，减少了不必要的API调用，提高了页面响应速度。 - 优化了图片路径和资源引用，符合最新的设计规范。 - 调整了路由逻辑，使得页面跳转更加清晰和有逻辑性。 -修正了数据序列化和存储的一些问题，确保数据一致性和安全性。```lu_quan_dev
@ -0,0 +1,165 @@ |
||||
<template> |
||||
<view class="mask mask-show u_loading" :data-theme="isDark?'dark':'light'" v-if="loadingShow" @touchmove.stop.prevent="preventTouchMove"> |
||||
<!-- 加载动画开始 --> |
||||
<view class="preloader u-flex u-flex-column u-flex-center"> |
||||
<view class="loader"> |
||||
<view></view> |
||||
<view></view> |
||||
<view></view> |
||||
<view></view> |
||||
<view></view> |
||||
</view> |
||||
<!-- <view class="title">加载中...</view> --> |
||||
</view> |
||||
<!-- 加载动画结束 --> |
||||
|
||||
</view> |
||||
</template> |
||||
|
||||
<script scoped="true"> |
||||
import { mapState, mapMutations } from 'vuex'; |
||||
export default { |
||||
computed: { |
||||
...mapState(['loadingShow','isDark']) |
||||
}, |
||||
methods:{ |
||||
preventTouchMove(){ |
||||
console.log('stop user scroll it!'); |
||||
return; |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.u_loading{ |
||||
&.mask { |
||||
/* pointer-events: none; */ |
||||
position: fixed; |
||||
z-index: 99999; |
||||
top: 0; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 0; |
||||
height: 100vh; |
||||
width: 100vw; |
||||
/* #ifndef APP-NVUE */ |
||||
display: flex; |
||||
/* #endif */ |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
flex-wrap: wrap; |
||||
} |
||||
&.mask-show { |
||||
background: rgba(255,255,255, 0); |
||||
} |
||||
.title { |
||||
color: #666; |
||||
font-size: 28rpx; |
||||
margin-top: 40rpx; |
||||
} |
||||
.preloader{ |
||||
width: 220rpx; |
||||
height: 170rpx; |
||||
background-color: transparent; |
||||
border-radius: 18rpx; |
||||
} |
||||
.loader { |
||||
width: 36px; |
||||
position: relative; |
||||
} |
||||
.loader view { |
||||
display: block; |
||||
position: absolute; |
||||
bottom: 0px; |
||||
width: 4px; |
||||
height: 5px; |
||||
background: coral; |
||||
-webkit-animation: loader 1.5s infinite ease-in-out; |
||||
animation: loader 1.5s infinite ease-in-out; |
||||
} |
||||
.loader view:nth-child(2) { |
||||
left: 8px; |
||||
-webkit-animation-delay: 0.2s; |
||||
animation-delay: 0.2s; |
||||
} |
||||
.loader view:nth-child(3) { |
||||
left: 16px; |
||||
-webkit-animation-delay: 0.4s; |
||||
animation-delay: 0.4s; |
||||
} |
||||
.loader view:nth-child(4) { |
||||
left: 24px; |
||||
-webkit-animation-delay: 0.6s; |
||||
animation-delay: 0.6s; |
||||
} |
||||
.loader view:nth-child(5) { |
||||
left: 32px; |
||||
-webkit-animation-delay: 0.8s; |
||||
animation-delay: 0.8s; |
||||
} |
||||
|
||||
@-webkit-keyframes loader { |
||||
0% { |
||||
height: 5px; |
||||
-webkit-transform: translateY(0px); |
||||
transform: translateY(0px); |
||||
background: coral; |
||||
} |
||||
25% { |
||||
height: 30px; |
||||
-webkit-transform: translateY(15px); |
||||
transform: translateY(15px); |
||||
background: cornflowerblue; |
||||
} |
||||
50% { |
||||
height: 5px; |
||||
-webkit-transform: translateY(0px); |
||||
transform: translateY(0px); |
||||
background: cornflowerblue; |
||||
} |
||||
100% { |
||||
height: 5px; |
||||
-webkit-transform: translateY(0px); |
||||
transform: translateY(0px); |
||||
background: coral; |
||||
} |
||||
} |
||||
|
||||
@keyframes loader { |
||||
0% { |
||||
height: 5px; |
||||
-webkit-transform: translateY(0px); |
||||
transform: translateY(0px); |
||||
background: coral; |
||||
} |
||||
25% { |
||||
height: 30px; |
||||
-webkit-transform: translateY(15px); |
||||
transform: translateY(15px); |
||||
background: cornflowerblue; |
||||
} |
||||
50% { |
||||
height: 5px; |
||||
-webkit-transform: translateY(0px); |
||||
transform: translateY(0px); |
||||
background: cornflowerblue; |
||||
} |
||||
100% { |
||||
height: 5px; |
||||
-webkit-transform: translateY(0px); |
||||
transform: translateY(0px); |
||||
background: coral; |
||||
} |
||||
} |
||||
|
||||
} |
||||
[data-theme=dark] { |
||||
.u_loading{ |
||||
&.mask-show { |
||||
background: rgba(0,0,0, 0.3); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.8 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB |