Mon Mar 31 20:17:00 CST 2025 inscode

src/mockData/benefitList.js

+export const benefitList = [
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-chong-feng-yi.png",
+        "label": "限时送",
+        "title": "头盔",
+        "uniqueId": "6929_3_612118_6497_21337",
+        "desc": "头盔兑换券"
+    },
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-chong-feng-yi.png",
+        "label": "限时送",
+        "title": "配送箱",
+        "uniqueId": "6929_3_612118_6497_21339",
+        "desc": "配送箱兑换券"
+    },
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-xian-jin-fan-xian.png",
+        "title": "100元现金返现",
+        "uniqueId": "6929_3_612125_6497_-999",
+        "desc": "专属奖励任务"
+    },
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-dan-dan-fan-li.png",
+        "label": "单单享",
+        "title": "10天单单返利",
+        "uniqueId": "6929_3_612111_6497_-999",
+        "desc": "单单多赚50%"
+    },
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-mian-chou-cheng.png",
+        "label": "免抽成",
+        "title": "1张免抽成卡",
+        "uniqueId": "6929_3_612115_6497_-999",
+        "desc": "0抽成，赚更多"
+    },
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-zeng-feng-shou-ka.png",
+        "title": "赠“1号PLUS”周卡",
+        "uniqueId": "6929_1_-999_6497_-999",
+        "desc": "能量值+50"
+    },
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-you-xian-qiang-dan.png",
+        "title": "2张优先抢单卡",
+        "uniqueId": "6929_3_612124_6497_-999",
+        "desc": "抢单成功率翻倍"
+    },
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-neng-liang-bao-hu.png",
+        "title": "2天能量值保护",
+        "uniqueId": "6929_3_612117_6497_-999",
+        "desc": "能量值+100，只增不扣"
+    },
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-wu-xian-zuo-dan.png",
+        "title": "无限做单",
+        "uniqueId": "6929_3_612119_6497_-999",
+        "desc": "做单无限制"
+    },
+    {
+        "icon": "https://s3-gz01.didistatic.com/freight-web-v3/driver-client-page/driverGuarantee/icon-zi-dong-qiang-dan.png",
+        "title": "2张自动抢单",
+        "uniqueId": "6929_3_612128_6497_-999",
+        "desc": "自动抢单省心省力"
+    }
+]
\ No newline at end of file

src/router/index.js

@@ -3,7 +3,8 @@ import Home from '../views/Home.vue';
 import VoucherNormal from '../views/VoucherNormal/index.vue';
 import ExportFile from '../views/ExportFile/index.vue';
 import Sortable from '../views/Sortable/index.vue';
-import Anchor from '../views/Anchor/index.vue';
+// import Anchor from '../views/Anchor/index.vue';
+import SameHeightPeers from '../views/SameHeightPeers/index.vue';
 
 const routes = [
   {
@@ -26,10 +27,15 @@ const routes = [
     name: 'Sortable',
     component: Sortable,
   },
+  // {
+  //   path: '/Anchor',
+  //   name: 'Anchor',
+  //   component: Anchor,
+  // },
   {
-    path: '/Anchor',
-    name: 'Anchor',
-    component: Anchor,
+    path: '/SameHeightPeers',
+    name: 'SameHeightPeers',
+    component: SameHeightPeers,
   },
 ];
 

src/views/Experience/css-scene.md

@@ -7,3 +7,5 @@
 -- 使用flex-end结合margin-bottom实现
 
 # 权益卡片：有限空间内，主副标题长度不确定且无法限制，如何保证上下边距不变，且内容显示完整
+解决方案：使用flex布局 + 高度由内容撑开方式
+-- flex布局可以使同行的卡片高度保持一致
\ No newline at end of file

src/views/Home.vue

@@ -4,7 +4,7 @@
   <Cell title="汲取经验" is-link to="/Experience" />
   <Cell title="table实现拖拽" is-link to="/Sortable" />
   <!-- <Cell title="锚点" is-link to="/Anchor" /> -->
-  <Cell title="卡片随内容自适应，同行同高" is-link to="/Anchor" />
+  <Cell title="卡片随内容自适应，同行同高" is-link to="/SameHeightPeers" />
 </template>
 <script setup>
 import { Cell } from 'vant'

src/views/SameHeightPeers/components/NewRewardCard.vue

+<template>
+  <div :class="['new-reward-card', cardItem.locked ? 'unlocked' : 'locked']">
+    <div v-if="cardItem.label" class="badge">{{ cardItem.label }}</div>
+    <div class="left">
+      <div :class="['title', cardItem.locked ? 'unlocked' : 'locked']">{{ cardItem.title }}</div>
+      <div :class="['desc', cardItem.locked ? 'unlocked' : 'locked']">{{ cardItem.desc }}</div>
+    </div>
+    <div class="right">
+      <img class="icon-main" :src="cardItem.icon" />
+    </div>
+  </div>
+</template>
+<script setup>
+
+const props = defineProps({
+  cardItem: {
+    type: Object,
+    default: () => ({}),
+  },
+});
+
+</script>
+<style lang="less" scoped>
+.new-reward-card {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  border-radius: 16px;
+  width: calc((100% - 20px) / 2);
+  margin-bottom: 20px;
+  position: relative;
+  padding-top: 25px;
+  padding-bottom: 24px;
+  &.locked {
+    background: linear-gradient(113deg, #fffcf5 3%, #ffe9be 100%, #ffe8af 100%);
+    border: 1px solid linear-gradient(111deg, #fff1d6 2%, #ffe4b0 94%) 1;
+  }
+  &.unlocked {
+    background: #f3f3fd;
+    border: 1px solid rgba(191, 191, 202, 0.2);
+  }
+  .badge {
+    font-family: PingFang SC;
+    font-size: 20px;
+    font-weight: 600;
+    line-height: normal;
+    color: #fffefe;
+    border-radius: 0.16rem 0 0.16rem 0;
+    opacity: 1;
+    background: linear-gradient(0deg, #ff6426, #ff6426), linear-gradient(270deg, #ff4d4d 0%, #fe5054 63%, #f774a2 107%);
+    position: absolute;
+    top: -0.14rem;
+    padding: 0.04rem 0.16rem;
+  }
+  .left {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: calc(100% - 0.92rem);
+    margin-left: 0.24rem;
+    .title {
+      font-family: PingFang SC;
+      font-size: 0.28rem;
+      font-weight: 500;
+      line-height: normal;
+      letter-spacing: 0.02em;
+      &.locked {
+        color: #a05600;
+      }
+      &.unlocked {
+        color: #666666;
+      }
+    }
+    .desc {
+      font-family: PingFang SC;
+      font-size: 0.2rem;
+      font-weight: normal;
+      line-height: 0.2rem;
+      letter-spacing: 0.02em;
+      margin-top: 0.05rem;
+      &.locked {
+        color: #bc8a66;
+      }
+      &.unlocked {
+        color: #999999;
+      }
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    width: 0.92rem;
+    margin-right: 0.24rem;
+    .icon-main {
+      width: 0.68rem;
+      height: 0.68rem;
+    }
+  }
+}
+</style>
\ No newline at end of file

src/views/SameHeightPeers/index.vue

+<template>
+    <div class="reward-list-contain">
+        <NewRewardCard
+        v-for="(rewardItem, idx) in rewardList"
+        :key="idx"
+        :card-item="rewardItem"
+        />
+    </div>
+</template>
+<script setup>
+import { ref } from 'vue'
+import { benefitList } from '@/mockData/benefitList.js'
+import NewRewardCard from './components/NewRewardCard.vue'
+const rewardList = ref(benefitList)
+
+</script>
+<style lang="less" scoped>
+.reward-list-contain {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 24px;
+    flex-direction: row;
+    justify-content: space-between;
+}
+</style>
\ No newline at end of file