fix PackageConfigList.vue style
This commit is contained in:
Timi
@@ -28,50 +28,48 @@
|
|||||||
class="list fix-last-cell-line empty-cell-title-margin"
|
class="list fix-last-cell-line empty-cell-title-margin"
|
||||||
theme="card"
|
theme="card"
|
||||||
>
|
>
|
||||||
<div
|
<t-cell
|
||||||
class="item"
|
class="item"
|
||||||
v-for="(item, index) in configList"
|
v-for="(item, index) in configList"
|
||||||
:key="item.id"
|
:key="item.id"
|
||||||
v-entrance-transition="index * 30"
|
v-entrance-transition="index * 30"
|
||||||
>
|
>
|
||||||
<t-cell class="cell">
|
<template #title>
|
||||||
<template #title>
|
<div class="title">
|
||||||
<div class="title">
|
<strong v-text="item.name || '未命名套餐'" />
|
||||||
<strong v-text="item.name || '未命名套餐'" />
|
<t-tag :content="getPackageConfigStatusText(item.status)" variant="light-outline" :theme="getStatusTheme(item.status)" />
|
||||||
<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>
|
</div>
|
||||||
</template>
|
<div class="price-actions">
|
||||||
<template #description>
|
<div class="price">
|
||||||
<div class="description">
|
<span class="red">￥</span>
|
||||||
<div class="products">
|
<span class="value red" v-text="formatPackageAmount(item.standardAmount)" />
|
||||||
<t-tag
|
</div>
|
||||||
v-for="productItem in item.itemList || []"
|
<div v-if="item.id" class="actions" @click.stop>
|
||||||
:key="productItem.id || `${productItem.skuId}-${productItem.skuUnitId}`"
|
<t-button
|
||||||
:content="getProductRightText(productItem)"
|
class="detail"
|
||||||
theme="primary"
|
theme="primary"
|
||||||
variant="light"
|
size="extra-small"
|
||||||
|
content="详情"
|
||||||
|
@click.stop="toDetail(item)"
|
||||||
/>
|
/>
|
||||||
<t-tag v-if="!item.itemList?.length" content="暂无产品权益" />
|
|
||||||
</div>
|
</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>
|
</div>
|
||||||
</template>
|
</div>
|
||||||
</t-cell>
|
</template>
|
||||||
</div>
|
</t-cell>
|
||||||
</t-cell-group>
|
</t-cell-group>
|
||||||
<div v-else class="center-tips" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
|
<div v-else class="center-tips" v-text="loading ? '正在加载套餐配置' : '暂无套餐配置'" />
|
||||||
<div class="center-tips" v-text="loadStateText" />
|
<div class="center-tips" v-text="loadStateText" />
|
||||||
@@ -256,60 +254,66 @@ onUnmounted(() => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.list {
|
.list {
|
||||||
|
gap: 1rem;
|
||||||
|
display: flex;
|
||||||
padding-top: 1rem;
|
padding-top: 1rem;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
.item {
|
.item {
|
||||||
background: var(--td-bg-color-container);
|
padding: 10px;
|
||||||
border-radius: 1rem;
|
min-width: 0;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.cell {
|
:deep(.t-cell__title) {
|
||||||
padding: 10px;
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.title {
|
.title {
|
||||||
gap: .5rem;
|
gap: .5rem;
|
||||||
flex: 1;
|
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;
|
display: flex;
|
||||||
align-items: center;
|
min-width: 0;
|
||||||
justify-content: space-between;
|
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 {
|
:deep(.t-tag) {
|
||||||
display: flex;
|
flex: 0 0 auto;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.price-actions {
|
&::-webkit-scrollbar {
|
||||||
gap: .5rem;
|
display: none;
|
||||||
display: flex;
|
}
|
||||||
margin-top: .5rem;
|
}
|
||||||
align-items: center;
|
|
||||||
justify-content: end;
|
|
||||||
|
|
||||||
.price {
|
.price-actions {
|
||||||
|
gap: .5rem;
|
||||||
|
display: flex;
|
||||||
|
margin-top: .5rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: end;
|
||||||
|
|
||||||
.value {
|
.price {
|
||||||
font-size: 1.25rem;
|
|
||||||
}
|
.value {
|
||||||
|
font-size: 1.25rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user