timi/gao-customer-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix PackageConfigList.vue style

Browse Source
This commit is contained in:
Timi
2026-09-09 11:21:07 +08:00
parent f91fb530a4
commit 32268dbe76
1 changed files with 81 additions and 77 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/package/PackageConfigList.vue
+81 -77
View File
@@ -28,50 +28,48 @@
class="list fix-last-cell-line empty-cell-title-margin"
theme="card"
>
<div
<t-cell
class="item"
v-for="(item, index) in configList"
:key="item.id"
v-entrance-transition="index * 30"
>
<t-cell class="cell">
<template #title>
<div class="title">
<strong v-text="item.name || '未命名套餐'" />
<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
<template #title>
<div class="title">
<strong v-text="item.name || '未命名套餐'" />
<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
</div>
</template>
<template #description>
<div class="description">
<div class="products">
<t-tag
v-for="productItem in item.itemList || []"
:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
:content="getProductRightText(productItem)"
theme="primary"
variant="light"
/>
<t-tag v-if="!item.itemList?.length" content="暂无产品权益" />
</div>
</template>
<template #description>
<div class="description">
<div class="products">
<t-tag
v-for="productItem in item.itemList || []"
:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
:content="getProductRightText(productItem)"
<div class="price-actions">
<div class="price">
<span class="red">￥</span>
<span class="value red" v-text="formatPackageAmount(item.standardAmount)" />
</div>
<div v-if="item.id" class="actions" @click.stop>
<t-button
class="detail"
theme="primary"
variant="light"
size="extra-small"
content="详情"
@click.stop="toDetail(item)"
/>
<t-tag v-if="!item.itemList?.length" content="暂无产品权益" />
</div>
<div class="price-actions">
<div class="price">
<span class="red">￥</span>
<span class="value red" v-text="formatPackageAmount(item.standardAmount)" />
</div>
<div v-if="item.id" class="actions" @click.stop>
<t-button
class="detail"
theme="primary"
size="extra-small"
content="详情"
@click.stop="toDetail(item)"
/>
</div>
</div>
</div>
</template>
</t-cell>
</div>
</div>
</template>
</t-cell>
</t-cell-group>
<div v-else class="center-tips" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
<div class="center-tips" v-text="loadStateText" />
@@ -256,60 +254,66 @@ onUnmounted(() => {
}
.list {
gap: 1rem;
display: flex;
padding-top: 1rem;
flex-direction: column;
.item {
background: var(--td-bg-color-container);
border-radius: 1rem;
overflow: hidden;
padding: 10px;
min-width: 0;
.cell {
padding: 10px;
:deep(.t-cell__title) {
min-width: 0;
}
.title {
gap: .5rem;
flex: 1;
.title {
gap: .5rem;
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
}
.description {
display: flex;
flex-direction: column;
min-width: 0;
.products {
gap: .35rem;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
min-width: 0;
max-width: 100%;
flex-wrap: nowrap;
margin-top: .5rem;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
.description {
display: flex;
flex-direction: column;
.products {
gap: .35rem;
display: flex;
max-width: 100%;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
:deep(.t-tag) {
flex: 0 0 auto;
}
&::-webkit-scrollbar {
display: none;
}
:deep(.t-tag) {
flex: 0 0 auto;
}
.price-actions {
gap: .5rem;
display: flex;
margin-top: .5rem;
align-items: center;
justify-content: end;
&::-webkit-scrollbar {
display: none;
}
}
.price {
.price-actions {
gap: .5rem;
display: flex;
margin-top: .5rem;
align-items: center;
justify-content: end;
.value {
font-size: 1.25rem;
}
.price {
.value {
font-size: 1.25rem;
}
}
}