hookehuyr

refactor(CheckinMap): 优化签到卡片布局与样式

重构卡片模板结构,将日期栏与进入按钮分组为底部模块;修复封面图片显示问题;统一使用flex布局优化整体排版
......@@ -18,6 +18,7 @@
<!-- 卡片内容 -->
<view class="card-content">
<text class="card-title">{{ item.title }}</text>
<view class="card-bottom-module">
<view class="card-time-wrapper">
<text class="card-time-label">活动日期</text>
<text class="card-time">{{ item.timeRange }}</text>
......@@ -28,6 +29,7 @@
</view>
</view>
</view>
</view>
<BottomNav />
</view>
......@@ -178,6 +180,8 @@ useLoad(() => {
}
.map-card {
display: flex;
flex-direction: column;
background-color: #ffffff;
border-radius: 16px;
overflow: hidden;
......@@ -197,7 +201,9 @@ useLoad(() => {
.cover-image {
width: 100%;
/* 高度由 mode="widthFix" 自动控制,保持宽高比 */
height: 100%;
display: block;
object-fit: cover;
}
.card-content {
......@@ -205,6 +211,7 @@ useLoad(() => {
display: flex;
flex-direction: column;
gap: 12px;
flex: 1;
}
.card-title {
......@@ -218,6 +225,13 @@ useLoad(() => {
-webkit-box-orient: vertical;
}
.card-bottom-module {
margin-top: auto;
display: flex;
flex-direction: column;
gap: 12px;
}
.card-time-wrapper {
display: flex;
flex-direction: column;
......