outsource/mi-assessment
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

页面优化
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
18631081161 2026-03-25 22:14:16 +08:00
parent 7877d2ba97
commit 725cf1a287
1 changed files with 7 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
uniapp/pages/index/index.vue
View File

@ -16,6 +16,7 @@
scroll-y
refresher-enabled
:refresher-triggered="isRefreshing"
:style="{ height: 'calc(100vh - ' + totalNavbarHeight + 'px)' }"
@refresherrefresh="onRefresh"
>
<!-- Banner 轮播图 -->
@ -57,13 +58,9 @@
:key="index"
@click="handleCardClick(item)"
>
<!-- 即将上线标签 -->
<view v-if="item.actionType === 3" class="coming-soon-tag">
<text>即将上线</text>
</view>
<image
:src="item.imageUrl"
mode="aspectFill"
mode="aspectFit"
class="assessment-image"
/>
</view>
@ -96,13 +93,9 @@
:class="{ 'more-card--full': moreList.length % 2 === 1 && index === moreList.length - 1 }"
@click="handleCardClick(item)"
>
<!-- 即将上线标签 -->
<view v-if="item.actionType === 3" class="coming-soon-tag">
<text>即将上线</text>
</view>
<image
:src="item.imageUrl"
mode="aspectFill"
mode="aspectFit"
class="more-card__image"
/>
</view>
@ -322,8 +315,7 @@ onMounted(() => {
// 页面内容
.page-content {
height: calc(100vh - var(--navbar-height, 0px));
padding-bottom: env(safe-area-inset-bottom);
// 高度通过内联 style 动态计算，不在此处设置
}
// Banner轮播
@ -393,25 +385,9 @@ onMounted(() => {
// 卡片区域总宽 = 750rpx - 左右 section-card margin 32rpx*2 - 左右 section-card padding 32rpx*2 = 622rpx
width: 299rpx;
height: 240rpx;
border-radius: $border-radius-xl;
overflow: hidden;
flex-shrink: 0;
.coming-soon-tag {
position: absolute;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
padding: 6rpx 20rpx;
border-radius: 0 $border-radius-xl 0 $border-radius-lg;
z-index: 1;
text {
font-size: $font-size-xs;
color: $text-white;
}
}
.assessment-image {
width: 100%;
height: 100%;
@ -439,37 +415,22 @@ onMounted(() => {
.more-grid {
display: flex;
flex-wrap: wrap;
gap: $spacing-md;
justify-content: space-between;
}
.more-card {
position: relative;
width: calc(50% - #{$spacing-md} / 2);
width: 48.5%;
height: 160rpx;
border-radius: $border-radius-xl;
overflow: hidden;
box-sizing: border-box;
margin-bottom: $spacing-md;
// 奇数个时最后一个占满整行
&--full {
width: 100%;
}
.coming-soon-tag {
position: absolute;
top: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.3);
padding: 6rpx 20rpx;
border-radius: 0 $border-radius-xl 0 $border-radius-lg;
z-index: 1;
text {
font-size: $font-size-xs;
color: $text-white;
}
}
&__image {
width: 100%;
height: 100%;