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

sytle:图片

Browse Source
This commit is contained in:
田柯
2025-01-06 13:57:36 +08:00
parent a9d99871a3
commit 7343bf0e3c
21 changed files with 2776 additions and 76 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/index/index.vue
+85 -63
View File
@@ -11,13 +11,19 @@
<!-- 功能按钮区域 -->
<view class="function-area">
<view class="function-btn rent" @click="goToRent">
<text class="btn-text">扫码租借</text>
<text class="btn-desc">快速租借风扇</text>
<view class="btn-content">
<image class="btn-icon" src="../../static/scan-icon.png" mode="aspectFit" />
<text class="btn-text">扫码租借</text>
</view>
<text class="btn-desc">快速租借风扇</text>
</view>
<view class="function-btn return" @click="goToReturn">
<text class="btn-text">扫码归还</text>
<text class="btn-desc">轻松完成归还</text>
<view class="btn-content">
<image class="btn-icon" src="../../static/scan-icon.png" mode="aspectFit" />
<text class="btn-text">扫码归还</text>
</view>
<text class="btn-desc">轻松完成归还</text>
</view>
</view>
@@ -73,26 +79,26 @@
padding: 20rpx;
.temp-banner {
height: 320rpx;
background: linear-gradient(135deg, #1976D2, #64B5F6);
border-radius: 24rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
box-shadow: 0 4rpx 20rpx rgba(25, 118, 210, 0.2);
.banner-text {
font-size: 48rpx;
font-weight: bold;
margin-bottom: 16rpx;
}
.banner-subtitle {
font-size: 28rpx;
opacity: 0.9;
}
height: 320rpx;
background: linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(100, 181, 246, 0.8));
border-radius: 24rpx;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
box-shadow: 0 4rpx 20rpx rgba(25, 118, 210, 0.2);
.banner-text {
font-size: 48rpx;
font-weight: bold;
margin-bottom: 16rpx;
}
.banner-subtitle {
font-size: 28rpx;
opacity: 0.9;
}
}
}
@@ -102,45 +108,61 @@
justify-content: space-between;
.function-btn {
width: 320rpx;
height: 180rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0,0,0,0.06);
transition: all 0.3s;
&:active {
transform: scale(0.98);
}
.btn-text {
font-size: 36rpx;
font-weight: 500;
margin-bottom: 8rpx;
}
.btn-desc {
font-size: 24rpx;
color: #666;
}
&.rent {
background: linear-gradient(135deg, #4CAF50, #81C784);
.btn-text, .btn-desc {
color: #fff;
}
}
&.return {
background: linear-gradient(135deg, #FF9800, #FFB74D);
.btn-text, .btn-desc {
color: #fff;
}
}
width: 320rpx;
height: 180rpx;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 20rpx;
box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.06);
transition: all 0.3s;
&:active {
transform: scale(0.98);
}
.btn-content {
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 8rpx;
.btn-icon {
width: 36rpx;
height: 36rpx;
margin-right: 8rpx;
}
.btn-text {
font-size: 36rpx;
font-weight: 500;
}
}
.btn-desc {
font-size: 24rpx;
color: #666;
}
&.rent {
background: linear-gradient(135deg, #4CAF50, #81C784);
.btn-text,
.btn-desc {
color: #fff;
}
}
&.return {
background: linear-gradient(135deg, #FF9800, #FFB74D);
.btn-text,
.btn-desc {
color: #fff;
}
}
}
}
pages/my/index.vue
+13 -11
View File
@@ -29,7 +29,7 @@
<view class="function-item" @click="navigateTo('/pages/order/index')">
<view class="item-left">
<view class="icon-wrap order">
<view class="icon-placeholder"></view>
<!-- <view class="icon-placeholder"></view> -->
</view>
<text class="title">租借记录</text>
</view>
@@ -40,7 +40,7 @@
<view class="function-item" @click="navigateTo('/pages/feedback/index')">
<view class="item-left">
<view class="icon-wrap feedback">
<view class="icon-placeholder"></view>
<!-- <view class="icon-placeholder"></view> -->
</view>
<text class="title">投诉与建议</text>
</view>
@@ -51,7 +51,7 @@
<view class="function-item" @click="navigateTo('/pages/help/index')">
<view class="item-left">
<view class="icon-wrap help">
<view class="icon-placeholder"></view>
<!-- <view class="icon-placeholder"></view> -->
</view>
<text class="title">帮助中心</text>
</view>
@@ -116,7 +116,7 @@ export default {
height: 120rpx;
border-radius: 60rpx;
overflow: hidden;
background: #fff;
background: url('../../static/head.png') center/cover no-repeat;
margin-right: 30rpx;
border: 4rpx solid rgba(255,255,255,0.3);
@@ -233,15 +233,15 @@ export default {
.icon-wrap {
width: 80rpx;
height: 80rpx;
border-radius: 16rpx;
margin-right: 20rpx;
display: flex;
align-items: center;
justify-content: center;
&.order {
background: #E3F2FD;
color: #1976D2;
background: url('../../static/jl.png') center/cover no-repeat;
width: 50rpx;
height: 50rpx;
}
&.deposit {
@@ -250,13 +250,15 @@ export default {
}
&.feedback {
background: #E8F5E9;
color: #4CAF50;
background: url('../../static/complaint.png') center/cover no-repeat;
width: 50rpx;
height: 50rpx;
}
&.help {
background: #F3E5F5;
color: #9C27B0;
background: url('../../static/hlep.png') center/cover no-repeat;
width: 50rpx;
height: 50rpx;
}
.icon-placeholder {