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;
}
}
}
}