pcwl_yancheng/uni-fans-score
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style

Browse Source
This commit is contained in:
jiang
2025-01-09 15:48:41 +08:00
parent 04eddee3c3
commit 90a57bcfdb
8 changed files with 1187 additions and 341 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/my/index.vue
+200 -104
View File
@@ -2,22 +2,30 @@
<view class="my-container">
<!-- 用户信息区域 -->
<view class="user-info">
<view class="avatar-wrap">
<image class="avatar" :src="userInfo.avatarUrl || '/static/default-avatar.png'" mode="aspectFill" />
</view>
<view class="info-content">
<text class="nickname">{{ userInfo.nickName || '未登录' }}</text>
<text class="phone">{{ userInfo.phone || '点击登录' }}</text>
<view class="floating-dots"></view>
<view class="user-info-content" @click="handleLogin">
<view class="avatar-wrap">
<image class="avatar" src="/static/user.png" mode="aspectFill" />
</view>
<view class="info-content" v-if="userInfo.nickName">
<text class="nickname">{{ userInfo.nickName }}</text>
<text class="phone">{{ userInfo.phone }}</text>
</view>
<view class="info-content not-login" v-else>
<text class="login-text">点击登录</text>
<text class="login-desc">登录后享受更多服务</text>
</view>
</view>
<view class="wave-decoration"></view>
</view>
<!-- 押金卡片 -->
<view class="balance-card" @click="navigateTo('/pages/deposit/index')">
<view class="balance-card">
<view class="balance-content">
<text class="label">押金余额</text>
<text class="amount">¥{{ deposit }}</text>
</view>
<view class="withdraw-btn">
<view class="withdraw-btn" @click="navigateTo('/pages/deposit/index')">
提现
<view class="arrow"></view>
</view>
@@ -29,7 +37,7 @@
<view class="function-item" @click="navigateTo('/pages/order/index')">
<view class="item-left">
<view class="icon-wrap order">
<!-- <view class="icon-placeholder"></view> -->
<image src="/static/jl.png" mode="aspectFit" class="icon-image" />
</view>
<text class="title">租借记录</text>
</view>
@@ -40,7 +48,7 @@
<view class="function-item" @click="navigateTo('/pages/feedback/index')">
<view class="item-left">
<view class="icon-wrap feedback">
<!-- <view class="icon-placeholder"></view> -->
<image src="/static/complaint.png" mode="aspectFit" class="icon-image" />
</view>
<text class="title">投诉与建议</text>
</view>
@@ -51,7 +59,7 @@
<view class="function-item" @click="navigateTo('/pages/help/index')">
<view class="item-left">
<view class="icon-wrap help">
<!-- <view class="icon-placeholder"></view> -->
<image src="/static/hlep.png" mode="aspectFit" class="icon-image" />
</view>
<text class="title">帮助中心</text>
</view>
@@ -79,7 +87,19 @@ export default {
this.userInfo = userInfo
}
},
handleLogin() {
if (!this.userInfo.nickName) {
uni.navigateTo({
url: '/pages/login/index'
})
}
},
navigateTo(url) {
// 判断是否需要登录
// if (!this.userInfo.nickName && url !== '/pages/help/index') {
// this.handleLogin()
// return
// }
uni.navigateTo({ url })
}
}
@@ -90,107 +110,205 @@ export default {
.my-container {
min-height: 87.5vh;
background: #f8f8f8;
padding-bottom: 40rpx;
padding-bottom: env(safe-area-inset-bottom);
.user-info {
background: linear-gradient(135deg, #1976D2, #64B5F6);
padding: 40rpx 30rpx;
display: flex;
align-items: center;
height: 360rpx;
background: linear-gradient(135deg, #1976D2, #42A5F5);
position: relative;
overflow: hidden;
&::before,
&::after {
content: '';
position: absolute;
right: -20%;
bottom: -30%;
width: 400rpx;
height: 400rpx;
background: rgba(255,255,255,0.1);
border-radius: 50%;
background-repeat: no-repeat;
opacity: 0.1;
}
.avatar-wrap {
width: 120rpx;
height: 120rpx;
border-radius: 60rpx;
overflow: hidden;
background: url('../../static/head.png') center/cover no-repeat;
margin-right: 30rpx;
border: 4rpx solid rgba(255,255,255,0.3);
.avatar {
width: 100%;
height: 100%;
&::before {
width: 200rpx;
height: 200rpx;
left: -40rpx;
top: -40rpx;
background-image: radial-gradient(circle, #fff 2rpx, transparent 3rpx);
background-size: 30rpx 30rpx;
transform: rotate(30deg);
}
&::after {
width: 300rpx;
height: 300rpx;
right: -60rpx;
bottom: -60rpx;
background:
radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 30%, transparent 30.5%),
radial-gradient(circle at center, rgba(255,255,255,0.2) 0%, rgba(255,255,255,0.2) 20%, transparent 20.5%);
background-size: 60rpx 60rpx;
background-position: 0 0, 30rpx 30rpx;
transform: rotate(-15deg);
}
.floating-dots {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none;
&::before,
&::after {
content: '';
position: absolute;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background: rgba(255,255,255,0.3);
animation: float 3s infinite ease-in-out;
}
&::before {
top: 20%;
right: 10%;
animation-delay: -2s;
}
&::after {
top: 50%;
right: 20%;
width: 8rpx;
height: 8rpx;
animation-delay: -1s;
}
}
.info-content {
color: #fff;
.user-info-content {
position: relative;
z-index: 1;
z-index: 2;
padding: 60rpx 40rpx;
display: flex;
align-items: center;
.nickname {
font-size: 36rpx;
font-weight: 500;
margin-bottom: 10rpx;
display: block;
.avatar-wrap {
width: 140rpx;
height: 140rpx;
border-radius: 70rpx;
border: 6rpx solid rgba(255,255,255,0.3);
overflow: hidden;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.1),
0 0 0 6rpx rgba(255,255,255,0.1);
margin-right: 40rpx;
position: relative;
&::after {
content: '';
position: absolute;
top: -10%;
left: -10%;
right: -10%;
bottom: -10%;
background: linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
animation: shine 2s infinite;
}
.avatar {
width: 100%;
height: 100%;
background: #fff;
}
}
.phone {
font-size: 28rpx;
opacity: 0.9;
.info-content {
flex: 1;
&.not-login {
.login-text {
font-size: 40rpx;
color: #fff;
font-weight: 500;
margin-bottom: 12rpx;
display: block;
}
.login-desc {
font-size: 28rpx;
color: rgba(255,255,255,0.9);
display: block;
}
}
}
}
.wave-decoration {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 120rpx;
background: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNDQwIDMyMCI+PHBhdGggZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjEpIiBkPSJNMCwyNjAuMjI3YzE3My42NjEsMCwzMjEuMTM3LDAsNDQyLjQyOCwwYzE4MS41MTcsMCwyODUuNjQ1LDAsMzk3LjU3MiwwQzk1Mi4zODksMjYwLjIyNywxMTQwLjI3MSwyNjAuMjI3LDE0NDAsMjYwLjIyN1YwSDBWMjYwLjIyN3oiLz48L3N2Zz4=') bottom/100% no-repeat;
opacity: 0.8;
}
}
@keyframes float {
0%, 100% {
transform: translateY(0) scale(1);
}
50% {
transform: translateY(-20rpx) scale(1.1);
}
}
@keyframes shine {
0% {
transform: translateX(-100%) rotate(45deg);
}
80%, 100% {
transform: translateX(100%) rotate(45deg);
}
}
.balance-card {
margin: 20rpx 30rpx;
margin: -60rpx 30rpx 30rpx;
background: #fff;
border-radius: 20rpx;
padding: 30rpx;
border-radius: 24rpx;
padding: 40rpx;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
position: relative;
overflow: hidden;
&::after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 200rpx;
height: 200rpx;
background: linear-gradient(135deg, transparent, rgba(25,118,210,0.1));
border-radius: 0 0 0 200rpx;
}
z-index: 3;
box-shadow: 0 8rpx 32rpx rgba(25,118,210,0.1);
.balance-content {
.label {
font-size: 28rpx;
color: #666;
margin-bottom: 10rpx;
margin-bottom: 12rpx;
display: block;
}
.amount {
font-size: 48rpx;
font-size: 52rpx;
color: #1976D2;
font-weight: bold;
}
}
.withdraw-btn {
padding: 16rpx 32rpx;
background: #1976D2;
padding: 20rpx 36rpx;
background: linear-gradient(135deg, #1976D2, #42A5F5);
color: #fff;
border-radius: 30rpx;
font-size: 28rpx;
border-radius: 36rpx;
font-size: 30rpx;
display: flex;
align-items: center;
box-shadow: 0 4rpx 12rpx rgba(25,118,210,0.2);
&:active {
transform: scale(0.98);
}
.arrow {
width: 12rpx;
@@ -198,23 +316,23 @@ export default {
border-top: 3rpx solid #fff;
border-right: 3rpx solid #fff;
transform: rotate(45deg);
margin-left: 8rpx;
margin-left: 12rpx;
}
}
}
.function-list {
margin: 30rpx;
margin: 0 30rpx;
background: #fff;
border-radius: 20rpx;
padding: 0 20rpx;
border-radius: 24rpx;
padding: 10rpx 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.04);
.function-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 30rpx 10rpx;
padding: 32rpx 20rpx;
border-bottom: 1rpx solid #f5f5f5;
transition: all 0.3s;
@@ -233,53 +351,31 @@ export default {
.icon-wrap {
width: 80rpx;
height: 80rpx;
margin-right: 20rpx;
margin-right: 24rpx;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20rpx;
background: #F5F9FF;
&.order {
background: url('../../static/jl.png') center/cover no-repeat;
width: 50rpx;
height: 50rpx;
}
&.deposit {
background: #FFF3E0;
color: #FF9800;
}
&.feedback {
background: url('../../static/complaint.png') center/cover no-repeat;
width: 50rpx;
height: 50rpx;
}
&.help {
background: url('../../static/hlep.png') center/cover no-repeat;
width: 50rpx;
height: 50rpx;
}
.icon-placeholder {
width: 40rpx;
height: 40rpx;
background: currentColor;
border-radius: 8rpx;
.icon-image {
width: 44rpx;
height: 44rpx;
}
}
.title {
font-size: 30rpx;
font-size: 32rpx;
color: #333;
font-weight: 500;
}
}
.arrow {
width: 16rpx;
height: 16rpx;
border-top: 4rpx solid #999;
border-right: 4rpx solid #999;
border-top: 3rpx solid #999;
border-right: 3rpx solid #999;
transform: rotate(45deg);
}
}