卡片详细页面的细化更新

This commit is contained in:
minimaxagent1 2025-08-04 16:17:43 +08:00
parent 9c189af1bd
commit 9cef926543
4 changed files with 42 additions and 26 deletions

View File

@ -20,7 +20,7 @@
<!-- 活动名称 -->
<view class="activity-name">
<text class="name-text">{{ activity.name }}</text>
<text class="name-text">{{ activityName }}</text>
</view>
<!-- 活动状态 -->
@ -102,7 +102,10 @@ export default {
//
statusClass() {
return ACTIVITY_STATUS_CLASS[this.activity.status] || ''
}
},
activityName() {
return this.activity.name.split(' ')[0] || this.activity.name
},
},
methods: {
//

View File

@ -8,7 +8,9 @@ export const CommonEnum = {
TILE: "https://api.ccttiot.com/image-1753750309203.png", //瓦片图片
FILTER: "https://api.ccttiot.com/image-1753954149098.png", //筛选图标
REFRESH:"https://api.ccttiot.com/%E5%AE%B9%E5%99%A8-1754011714179.png", //刷新图标
NAV_ARROW:"https://api.ccttiot.com/image-1754127104177.png" //导航箭头
NAV_ARROW:"https://api.ccttiot.com/image-1754127104177.png", //导航箭头
PHONE:"https://api.ccttiot.com/image-1754292810234.png",//电话图标
ADDRESS:"https://api.ccttiot.com/image-1754292905805.png"//地址图标
};
export default CommonEnum;

View File

@ -64,11 +64,11 @@
<!-- 底部操作按钮 -->
<view class="bottom-actions">
<view class="action-button phone-button" @click="handlePhoneCall">
<text class="button-icon">📞</text>
<image class="button-icon" :src="CommonEnum.PHONE" mode="aspectFit"></image>
<text class="button-text">电话</text>
</view>
<view class="action-button location-button" @click="handleLocation">
<text class="button-icon">📍</text>
<image class="button-icon" :src="CommonEnum.ADDRESS" mode="aspectFit"></image>
<text class="button-text">地址</text>
</view>
<view class="action-button register-button" @click="handleRegister">
@ -319,7 +319,7 @@ page {
align-items: flex-start;
flex-direction: column;
padding: 0 15rpx;
padding-bottom: 40rpx;
padding-bottom: 200rpx; /* 为固定底部按钮留出空间 */
}
.activity-detail {
@ -391,11 +391,9 @@ page {
.activity-description {
width: 100%;
background: #fff;
border-radius: 16rpx;
padding: 30rpx;
margin-bottom: 30rpx;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
.description-title {
margin-bottom: 20rpx;
@ -418,41 +416,54 @@ page {
}
.bottom-actions {
position: fixed;
bottom: 0;
left: 0;
right: 0;
width: 100%;
display: flex;
align-items: center;
gap: 20rpx;
padding: 20rpx 0;
height: 62px;
padding: 30rpx 40rpx;
background: #fff;
border-top: 1rpx solid #f0f0f0;
border-radius: 20rpx 20rpx 0 0;
margin-bottom: 12rpx;
.action-button {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20rpx;
border-radius: 12rpx;
background: #fff;
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
&.phone-button, &.location-button {
flex: 1;
min-height: 120rpx;
background: transparent;
.button-icon {
font-size: 40rpx;
margin-bottom: 10rpx;
width: 48rpx;
height: 48rpx;
margin-bottom: 12rpx;
filter: brightness(0) saturate(100%) invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}
.button-text {
font-size: 24rpx;
color: #666;
font-size: 26rpx;
color: #522510;
font-weight: 400;
}
}
&.register-button {
flex: 2;
min-height: 120rpx;
background: #E74C3C;
flex: 4;
background: #A24242;
border-radius: 60rpx;
padding: 0 40rpx;
width: 227px;
height: 38px;
.button-text {
font-size: 32rpx;

View File

@ -39,8 +39,8 @@
<view class="hua">
<image src="https://api.ccttiot.com/smartmeter/img/static/uyz1LDPTjPqeOzBMjLZ7" mode=""></image>
</view>
<view class="list-scroll">
<view class="list">
<view class="list-scroll">
<view class="list">
<view
class="li"
v-for="item in navigationItems"
@ -48,12 +48,12 @@
@click="navigateToPage(item.page)"
>
<image :src="item.img" mode=""></image>
<view class="da">
<view class="da">
{{ item.title }}
</view>
<view class="xiao">
</view>
<view class="xiao">
{{ item.subtitle }}
</view>
</view>
</view>
</view>
</view>