'首页和商品详情页初稿'

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,179 @@
+<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>