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

style:根据UI设计图跳转页面样式

Browse Source
This commit is contained in:
ISFP_T
2025-10-15 01:35:23 +08:00
parent 4408673438
commit 46179c5d3f
30 changed files with 4632 additions and 2459 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/device/detail.vue
+184 -319
View File
@@ -1,44 +1,19 @@
<template>
<view class="container">
<!-- 顶部设备信息 -->
<view class="device-header">
<view class="device-status-card" :class="deviceStatus.class">
<view class="status-indicator"></view>
<text class="status-text">{{ deviceStatus.text }}</text>
</view>
<view class="device-title">
<text class="name">共享风扇</text>
<view class="device-meta">
<text class="id-label">设备号：</text>
<text class="id-value">{{ deviceId }}</text>
</view>
</view>
</view>
<!-- 设备信息卡片 -->
<view class="card device-info-card">
<view class="card-row">
<view class="card-item">
<view class="item-icon location-icon">
<!-- <uni-icons type="location" size="24" color="#fff"></uni-icons> -->
<image src="/static/images/location-map.svg" mode="aspectFill"
style="width: 45rpx;height: 45rpx;"></image>
</view>
<view class="item-content">
<text class="item-label">当前位置</text>
<text class="item-value">{{ deviceLocation }}</text>
</view>
<view class="device-location">
<view class="location-left">
<image src="/static/images/location-map.svg" mode="aspectFit" class="location-icon"></image>
<text class="location-name">{{ deviceLocation }}</text>
</view>
<!-- <view class="card-item">
<view class="item-icon battery-icon" :class="{ 'battery-low': batteryLevel < 20 }">
<image src="/static/images/Electricity.svg" mode="aspectFill"
style="width: 45rpx;height: 45rpx;"></image>
</view>
<view class="item-content">
<text class="item-label">电池电量</text>
<text class="item-value">{{ batteryLevel }}%</text>
</view>
</view> -->
<view class="device-status" :class="deviceStatus.class">
<text class="status-text">{{ deviceStatus.text }}</text>
</view>
</view>
<view class="device-id">
<text class="id-label">设备号：</text>
<text class="id-value">{{ deviceId }}</text>
</view>
</view>
@@ -50,46 +25,33 @@
<view class="pricing-banner">
<view class="pricing-main">
<text class="price">¥{{deviceFeeConfig.maxHourPrice}}</text>
<text class="price-symbol">¥</text>
<text class="price">{{ deviceFeeConfig.maxHourPrice || '5.00' }}</text>
<text class="unit">/小时</text>
</view>
<text class="cap-price">封顶 ¥{{deviceInfo.depositAmount}}</text>
<view class="cap-badge">
<text class="cap-text">{{ deviceInfo.depositAmount || '99' }}元封顶</text>
</view>
</view>
<view class="pricing-rules">
<!-- <view class="rule-item">
<view class="rule-dot"></view>
<text class="rule-text">前15分钟内归还<text class="highlight">免费</text></text>
</view> -->
<view class="rule-item">
<view class="rule-dot"></view>
<text class="rule-text">不足60分钟按60分钟计费</text>
<view class="pricing-info">
<view class="info-icon">
<text class="icon-text">ⓘ</text>
</view>
<view class="rule-item">
<view class="rule-dot"></view>
<text class="rule-text">持续计费至99元视为买断</text>
<text class="info-text">5元/小时，45元/24小时</text>
</view>
<view class="pricing-info">
<view class="info-icon">
<text class="icon-text">ⓘ</text>
</view>
<text class="info-text">前15分钟内归还免费，不足60分钟按60分钟计费点总封顶99元，持续计费至99元视为买断</text>
</view>
</view>
<!-- 手机号输入 -->
<!-- <view class="card phone-card" v-if="!hasActiveOrder">
<view class="card-header">
<text class="card-title">联系方式</text>
</view>
<view class="phone-input-container">
<view class="input-wrapper">
<text class="prefix">+86</text>
<input type="number" class="phone-input" maxlength="11" placeholder="请输入手机号码"
v-model="phoneNumber" />
</view>
</view>
</view> -->
<!-- 使用须知 -->
<!-- 使用说明 -->
<view class="card notice-card">
<view class="card-header">
<text class="card-title">使用须知</text>
<text class="card-title">使用说明</text>
</view>
<view class="notice-items">
<view class="notice-item">
@@ -98,34 +60,25 @@
</view>
<view class="notice-item">
<view class="notice-dot"></view>
<text class="notice-text">请在指定区域内使用设备</text>
<text class="notice-text">超出使用时间将自动按小时计费</text>
</view>
<view class="notice-item">
<view class="notice-dot"></view>
<text class="notice-text">归还时请确保设备完好，避免损坏</text>
<text class="notice-text">请在指定区域内使用设备</text>
</view>
</view>
</view>
<!-- 底部操作区 -->
<view class="footer">
<button class="rent-button" :class="{ 'return-button': hasActiveOrder }"
@click="handleRent('wx-score-pay')">
<text>{{ hasActiveOrder ? '归还设备' : '免押租借' }}</text>
<text>{{ hasActiveOrder ? '归还设备' : '免押金租借' }}</text>
</button>
<view class="wechat-credit">
<image src="/static/images/wxpayflag.png" mode="aspectFit" class="wx-icon"></image>
<view class="credit-text">
<text>微信支付分</text>
<text class="credit-divider">|</text>
<text class="credit-score">550分及以上优享</text>
</view>
<text class="credit-text">微信支付分 <text class="divider">|</text> 550分以上优享</text>
</view>
<!-- <view class="" style="align-items: center;align-content: center;text-align: center;line-height: 50rpx;"
@click="handleRent('wx-pay')">
无法免押点这里</view> -->
</view>
<!-- 手机号授权弹窗 -->
@@ -539,81 +492,11 @@
box-sizing: border-box;
}
// 顶部设备信息
.device-header {
display: flex;
flex-direction: column;
margin-bottom: 30rpx;
.device-status-card {
display: flex;
align-items: center;
margin-bottom: 20rpx;
.status-indicator {
width: 20rpx;
height: 20rpx;
border-radius: 50%;
margin-right: 10rpx;
}
&.available {
.status-indicator {
background-color: #10c469;
box-shadow: 0 0 10rpx rgba(16, 196, 105, 0.5);
}
.status-text {
color: #10c469;
}
}
&.offline {
.status-indicator {
background-color: #9a9a9a;
}
.status-text {
color: #9a9a9a;
}
}
.status-text {
font-size: 28rpx;
font-weight: 500;
}
}
.device-title {
.name {
font-size: 48rpx;
font-weight: bold;
color: #333;
}
.device-meta {
margin-top: 10rpx;
display: flex;
align-items: center;
.id-label {
font-size: 26rpx;
color: #999;
}
.id-value {
font-size: 26rpx;
color: #666;
}
}
}
}
// 卡片通用样式
.card {
background-color: #fff;
border-radius: 24rpx;
box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.03);
box-shadow: 0 2rpx 16rpx rgba(0, 0, 0, 0.04);
padding: 30rpx;
margin-bottom: 30rpx;
@@ -631,177 +514,161 @@
}
}
// 设备信息卡
// 设备信息卡片
.device-info-card {
.card-row {
display: flex;
justify-content: space-between;
}
.card-item {
.device-location {
display: flex;
align-items: center;
flex: 1;
justify-content: space-between;
margin-bottom: 20rpx;
.item-icon {
width: 60rpx;
height: 60rpx;
border-radius: 12rpx;
margin-right: 20rpx;
.location-left {
display: flex;
align-items: center;
justify-content: center;
font-size: 30rpx;
color: #fff;
&.location-icon {
background: linear-gradient(135deg, #40c9ff, #32a5ff);
// &::before {
// content: "\e900"; // 使用字体图标，需要自行替换
// }
.location-icon {
width: 40rpx;
height: 40rpx;
margin-right: 12rpx;
background-color: #10d673;
border-radius: 50%;
}
&.battery-icon {
background: linear-gradient(135deg, #33db92, #10c469);
// &::before {
// content: "\e901"; // 使用字体图标，需要自行替换
// }
&.battery-low {
background: linear-gradient(135deg, #ff7676, #f54f4f);
}
}
}
.item-content {
display: flex;
flex-direction: column;
.item-label {
font-size: 26rpx;
color: #999;
margin-bottom: 4rpx;
}
.item-value {
font-size: 30rpx;
.location-name {
font-size: 32rpx;
color: #333;
font-weight: 500;
}
}
.device-status {
padding: 8rpx 24rpx;
border-radius: 30rpx;
font-size: 24rpx;
&.available {
background-color: #d4f4dd;
.status-text {
color: #07c160;
}
}
&.offline {
background-color: #f0f0f0;
.status-text {
color: #999;
}
}
.status-text {
font-size: 24rpx;
}
}
}
.device-id {
display: flex;
align-items: center;
.id-label {
font-size: 28rpx;
color: #999;
}
.id-value {
font-size: 28rpx;
color: #666;
}
}
}
// 计费规则
// 计费规则卡片
.pricing-card {
.pricing-banner {
background: linear-gradient(to right, #f8f9ff, #e8f0ff);
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 30rpx;
background: linear-gradient(135deg, #e8f5e9, #c8e6c9);
border-radius: 20rpx;
padding: 40rpx 30rpx;
margin-bottom: 24rpx;
display: flex;
flex-direction: column;
align-items: center;
.pricing-main {
display: flex;
align-items: flex-end;
align-items: baseline;
margin-bottom: 16rpx;
.price-symbol {
font-size: 48rpx;
font-weight: bold;
color: #07c160;
margin-right: 4rpx;
}
.price {
font-size: 60rpx;
font-size: 80rpx;
font-weight: bold;
color: #ff6b6b;
color: #07c160;
line-height: 1;
}
.unit {
font-size: 32rpx;
color: #07c160;
margin-left: 8rpx;
}
}
.cap-badge {
background-color: #07c160;
padding: 10rpx 32rpx;
border-radius: 30rpx;
.cap-text {
font-size: 26rpx;
color: #fff;
font-weight: 500;
}
}
}
.pricing-info {
display: flex;
align-items: flex-start;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
.info-icon {
width: 32rpx;
height: 32rpx;
display: flex;
align-items: center;
justify-content: center;
margin-right: 12rpx;
margin-top: 2rpx;
.icon-text {
font-size: 28rpx;
color: #999;
margin-left: 4rpx;
margin-bottom: 10rpx;
}
}
.cap-price {
margin-top: 10rpx;
.info-text {
flex: 1;
font-size: 26rpx;
color: #666;
background-color: rgba(255, 107, 107, 0.1);
padding: 6rpx 20rpx;
border-radius: 20rpx;
}
}
.pricing-rules {
.rule-item {
display: flex;
align-items: center;
margin-bottom: 16rpx;
&:last-child {
margin-bottom: 0;
}
.rule-dot {
width: 10rpx;
height: 10rpx;
border-radius: 50%;
background-color: #ff6b6b;
margin-right: 16rpx;
}
.rule-text {
font-size: 28rpx;
color: #666;
.highlight {
color: #ff6b6b;
font-weight: bold;
}
}
line-height: 1.6;
}
}
}
// 手机号输入
.phone-card {
.phone-input-container {
.input-wrapper {
display: flex;
align-items: center;
height: 88rpx;
background-color: #f5f7fa;
border-radius: 16rpx;
padding: 0 24rpx;
.prefix {
font-size: 28rpx;
color: #666;
margin-right: 16rpx;
padding-right: 16rpx;
border-right: 1px solid #e0e0e0;
}
.phone-input {
flex: 1;
height: 88rpx;
font-size: 28rpx;
color: #333;
padding-left: 10rpx;
}
}
.phone-tip {
font-size: 24rpx;
color: #999;
margin-top: 16rpx;
display: block;
}
}
}
// 使用须知
// 使用说明卡片
.notice-card {
.notice-items {
.notice-item {
@@ -814,15 +681,17 @@
}
.notice-dot {
width: 10rpx;
height: 10rpx;
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #32a5ff;
background-color: #07c160;
margin-right: 16rpx;
margin-top: 12rpx;
margin-top: 10rpx;
flex-shrink: 0;
}
.notice-text {
flex: 1;
font-size: 28rpx;
color: #666;
line-height: 1.6;
@@ -838,58 +707,31 @@
left: 0;
right: 0;
background-color: #fff;
padding: 20rpx 30rpx;
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
box-shadow: 0 -2rpx 20rpx rgba(0, 0, 0, 0.05);
padding: 24rpx 30rpx;
padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
z-index: 100;
display: flex;
flex-direction: column;
// 添加一个变量来保存footer高度，方便管理和确保一致性
--footer-height: 180rpx;
.wechat-credit {
display: flex;
align-items: center;
justify-content: center;
margin-top: 10rpx;
.wx-icon {
width: 50rpx;
height: 40rpx;
margin-right: 10rpx;
}
.credit-text {
font-size: 24rpx;
color: #07c160;
display: flex;
align-items: center;
.credit-divider {
margin: 0 10rpx;
}
.credit-score {
font-weight: 500;
}
}
}
align-items: center;
.rent-button {
height: 92rpx;
border-radius: 46rpx;
width: 100%;
height: 96rpx;
border-radius: 48rpx;
background: linear-gradient(135deg, #07c160, #10d673);
color: #fff;
font-size: 32rpx;
font-size: 34rpx;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
border: none;
width: 90%;
box-shadow: 0 8rpx 20rpx rgba(7, 193, 96, 0.3);
&.return-button {
background: linear-gradient(135deg, #FF9800, #FFB74D);
box-shadow: 0 8rpx 20rpx rgba(255, 152, 0, 0.3);
}
&:active {
@@ -897,6 +739,29 @@
opacity: 0.9;
}
}
.wechat-credit {
display: flex;
align-items: center;
justify-content: center;
margin-top: 16rpx;
.wx-icon {
width: 48rpx;
height: 38rpx;
margin-right: 8rpx;
}
.credit-text {
font-size: 24rpx;
color: #999;
.divider {
margin: 0 8rpx;
color: #ddd;
}
}
}
}
/* 手机号授权弹窗样式 */