180 lines
3.9 KiB
Vue
180 lines
3.9 KiB
Vue
<template>
|
||
<!-- 产品参数：普通参数行 + 可展开的"补充说明" -->
|
||
<view class="params-wrap">
|
||
<text class="title">产品参数</text>
|
||
|
||
<!-- 普通参数行 -->
|
||
<view
|
||
class="param-row"
|
||
v-for="(item, index) in normalParams"
|
||
:key="index"
|
||
>
|
||
<text class="param-label">{{ item.label }}</text>
|
||
<text class="param-value">{{ item.value }}</text>
|
||
</view>
|
||
|
||
<!-- 可展开的"补充说明" -->
|
||
<view class="param-row expandable-row" v-if="expandableParam">
|
||
<text class="param-label">{{ expandableParam.label }}</text>
|
||
<view class="expandable-content">
|
||
<text class="param-value" :class="{ 'value-collapsed': !expanded }">{{ expandableParam.value }}</text>
|
||
|
||
<!-- 渐变遮罩 + 展开按钮（仅收起态显示） -->
|
||
<view class="expand-overlay" v-if="!expanded">
|
||
<view class="gradient-mask"></view>
|
||
<view class="expand-btn" @tap="toggleExpand">
|
||
<text class="expand-text">展开</text>
|
||
<view class="arrow-down"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 展开后的"收起"按钮 -->
|
||
<view class="collapse-btn" v-if="expanded" @tap="toggleExpand">
|
||
<text class="expand-text">收起</text>
|
||
<view class="arrow-up"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'ParamsTable',
|
||
props: {
|
||
list: {
|
||
type: Array,
|
||
default: () => []
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
expanded: false
|
||
}
|
||
},
|
||
computed: {
|
||
normalParams() {
|
||
return this.list.filter((item) => !item.expandable)
|
||
},
|
||
expandableParam() {
|
||
return this.list.find((item) => item.expandable)
|
||
}
|
||
},
|
||
methods: {
|
||
toggleExpand() {
|
||
this.expanded = !this.expanded
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.params-wrap {
|
||
padding: 30rpx 20rpx; /* 15px 10px */
|
||
background: #ffffff;
|
||
}
|
||
|
||
/* 标题 */
|
||
.title {
|
||
display: block;
|
||
font-size: 29rpx; /* 15px */
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
margin-bottom: 20rpx; /* 10px */
|
||
}
|
||
|
||
/* 普通参数行 */
|
||
.param-row {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding: 10rpx 0; /* 5px 上下 */
|
||
}
|
||
.param-label {
|
||
width: 170rpx; /* 给 label 固定宽度对齐 */
|
||
flex-shrink: 0;
|
||
font-size: 25rpx; /* 13px */
|
||
color: rgba(0, 0, 0, 0.5); /* 黑色 50% 透明度 */
|
||
line-height: 33rpx;
|
||
}
|
||
.param-value {
|
||
flex: 1;
|
||
font-size: 25rpx; /* 13px */
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
}
|
||
|
||
/* 可展开的"补充说明"行 */
|
||
.expandable-row {
|
||
align-items: flex-start;
|
||
}
|
||
.expandable-content {
|
||
position: relative;
|
||
flex: 1;
|
||
}
|
||
|
||
/* 收起态：限制高度（约 5 行，留出渐变遮罩空间） */
|
||
.value-collapsed {
|
||
display: block;
|
||
max-height: 165rpx; /* 约 5 行 33rpx */
|
||
overflow: hidden;
|
||
}
|
||
|
||
/* 渐变遮罩：绝对定位在容器底部 60px，从透明到白 */
|
||
.expand-overlay {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
height: 120rpx; /* 60px */
|
||
pointer-events: none;
|
||
}
|
||
.gradient-mask {
|
||
position: absolute;
|
||
inset: 0;
|
||
background: linear-gradient(
|
||
180deg,
|
||
rgba(255, 255, 255, 0) 0%,
|
||
rgba(255, 255, 255, 1) 52%
|
||
);
|
||
}
|
||
|
||
/* 展开/收起按钮：居中显示，可点击 */
|
||
.expand-btn,
|
||
.collapse-btn {
|
||
position: absolute;
|
||
bottom: 10rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8rpx; /* 4px */
|
||
pointer-events: auto;
|
||
}
|
||
/* 展开态的"收起"按钮：在文本下方居中 */
|
||
.collapse-btn {
|
||
position: relative;
|
||
margin-top: 16rpx;
|
||
left: auto;
|
||
transform: none;
|
||
justify-content: center;
|
||
}
|
||
.expand-text {
|
||
font-size: 23rpx; /* 12px */
|
||
color: #000000;
|
||
line-height: 33rpx;
|
||
}
|
||
|
||
/* CSS 箭头：12x12，下/上 */
|
||
.arrow-down,
|
||
.arrow-up {
|
||
width: 12rpx;
|
||
height: 12rpx;
|
||
border-right: 2rpx solid #000;
|
||
border-bottom: 2rpx solid #000;
|
||
transform: rotate(45deg);
|
||
}
|
||
.arrow-up {
|
||
transform: rotate(-135deg);
|
||
}
|
||
</style>
|