card滑动效果

 

 

<template><view class="member-benefits"><!-- 卡片滑动容器 --><view class="card-slider" :style="{background: currentSliderGradient,transition: 'background 0.5s ease'  // 渐变背景平滑过渡}"><view class="title">表头</view><view class="slider-track" :style="{ transform: `translateX(-${currentIndex * (110 - overlapPercent)}%)` }"@touchstart="handleTouchStart" @touchmove="handleTouchMove" @touchend="handleTouchEnd"@touchcancel="handleTouchEnd"><view v-for="(level, index) in levels" :key="level.level" class="benefit-card" :class="{'active-card': index === currentIndex,'prev-card': index === currentIndex - 1,'next-card': index === currentIndex + 1}" :style="{ background: currentCardSliderGradient }"><view class="slider-stau">{{ level.status }}</view><view class="slider-con"><view><h2 class="benefit-title" :style="{ color: currentLevelData.testCol }">{{ level.level }}</h2><p class="benefit-desc1" :style="{ color: currentLevelData.testCol }">匹配 <text :style="{ color: currentLevelData.pricColor }">{{ level.matchTime }}</text>服务期 <text :style="{ color: currentLevelData.pricColor }">{{ level.cycle }}</text></p></view><image class="slider-con_img" src="https://qiniu.5ug.top/alabo/dev_uploads/lan/logo.png" /></view><p class="benefit-desc" :style="{ color: currentLevelData.testCol }">权益 <text :style="{ color: currentLevelData.pricColor }">{{ level.price }}</text>券 <text :style="{ color: currentLevelData.pricColor }">{{ level.ticket }}</text></p></view></view><!-- 提示语 --><view class="tips" v-if="currentLevelData.tips1" :style="{ background: currentLevelData.tipsBg }"><view class="tips-con"><view class="tips-tips1">{{ currentLevelData.tips1 }}</view><view>{{ currentLevelData.tips2 }}<text style="color:#fdca5c">{{ currentLevelData.profit }}</text></view></view><image class="tips-img" src="https://qiniu.5ug.top/alabo/dev_uploads/lan/logo.png" /></view></view><view class="upgrade-con"><view class="upgrade-tips"> 轮播文字 </view><view class="upgrade-section"><h3 class="upgrade-title">title</h3><ul class="upgrade-tasks"><!-- <li v-for="(task, index) in currentLevelData.upgrade.tasks" :key="index" class="upgrade-tasks_li"> --><li v-for="(task, index) in tasks" :key="index" class="upgrade-tasks_li"><view class="upgrade-tasks_li_t"><img :src="task.icon" alt="任务图标" class="upgrade-tasks_li_ticon" /><span>{{ task.text }}</span></view><view v-for="(dItem, dIndex) in task.device" :key="dIndex" class="upgrade-device"><text class="upgrade-device_dian">・</text>text1{{ dItem.v1 }}text2{{ dItem.examine }}，text3{{ dItem.discount }}</view></li></ul></view></view><view v-if="currentLevelData.button" class="upgrade-button">¥ price{{ currentLevelData.button.price1 }}元+券{{ currentLevelData.button.price2 }}元 {{currentLevelData.button.text}}</view></view>
</template><script>
export default {data() {return {currentIndex: 0, // 当前卡片索引startX: 0, // 触摸起始X坐标moveX: 0, // 触摸移动X坐标isDragging: false, // 是否正在拖动overlapPercent: 20, // 卡片重叠百分比（控制前后卡片显示范围）levels: [{level: "title1",cardSliderGradient: 'linear-gradient(to right, #f5fcfc, #d2e0e7, #d5e6ec, #a3bac6)',sliderGradient: "linear-gradient(to bottom, #7d979e 0%, #446f7d 100%)",status: '未达成',matchTime: '1-7天',cycle: '5天', price: '1000元',ticket: '100元',pricColor: '#446f7d',testCol: "#88939b",button: { price1: 1000, price2: 100, text: "直接开通" },},{level: "title2",cardSliderGradient: 'linear-gradient(to right, #fffbf1, #fbdcb0, #fae9d1, #fab35d)',sliderGradient: "linear-gradient(to bottom, #ca834a 0%, #8e5324 100%)",status: '未达成',matchTime: '1-7天',cycle: '6天',price: '3000元', ticket: '100元',pricColor: '#8e5324',testCol: "#b78d64",button: { price1: 3000, price2: 100, text: "直接开通" },},],tasks: [{icon: "https://qiniu.5ug.top/alabo/dev_uploads/lan/logo.png",text: "title5",device: [{ v1: '《等级1》', examine: '8个任务', discount: '70折' },{ v1: '《等级2》', examine: '6个任务', discount: '78折' },]},{icon: "https://qiniu.5ug.top/alabo/dev_uploads/lan/logo.png",text: "title6",device: [{ v1: '《任务1》', examine: '三个四星', discount: '90折' },{ v1: '《任务2》', examine: '三个三星', discount: '92折' },]},],};},computed: {currentSliderGradient() {return this.levels[this.currentIndex].sliderGradient || "linear-gradient(135deg, #ee631c 0%, #f89e53 100%)";},currentCardSliderGradient() {return this.levels[this.currentIndex].cardSliderGradient || "";},currentLevelData() {return this.levels[this.currentIndex] || {};}},methods: {handleTouchStart(e) {this.isDragging = true;this.startX = e.touches[0].clientX;},handleTouchMove(e) {if (!this.isDragging) return;this.moveX = e.touches[0].clientX;},handleTouchEnd() {if (!this.isDragging) return;const diffX = this.moveX - this.startX;const threshold = 50; // 滑动触发阈值const cardWidthRatio = 100 - this.overlapPercent + 10;if (diffX > threshold && this.currentIndex > 0) {this.currentIndex--;} else if (diffX < -threshold && this.currentIndex < this.levels.length - 1) {this.currentIndex++;}this.isDragging = false;this.startX = 0;this.moveX = 0;},},
};
</script><style scoped>
@import './two.scss';
</style>

　　

.title {position: absolute;top: 25rpx;left: 42%;color: #fff;font-size: 32rpx;
}.member-benefits {font-family: "Microsoft Yahei", sans-serif;max-width: 600px;
}/* 滑动容器核心样式 */
.card-slider {position: relative;overflow: hidden;padding: 250rpx 20rpx 40rpx 20rpx;
}.slider-track {display: flex;/* 核心动画：位置变化时平滑过渡 */transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);will-change: transform;/* 告诉浏览器提前优化渲染 */
}/* 卡片基础样式 */
.benefit-card {flex-shrink: 0;width: 90%;margin: 0 1%;border-radius: 18px;/* padding: 20px; */box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);/* 所有属性变化均有动画 */will-change: transform, opacity, box-shadow;
}/* 当前激活卡片样式（放大+增强阴影） */
.benefit-card.active-card {transform: scale(1);opacity: 1;box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);z-index: 3;/* 层级最高，覆盖前后卡片 */
}/* 前一张卡片样式（缩小+半透明） */
.benefit-card.prev-card {transform: scale(0.9) translateX(-5%);/* 缩小并向右偏移 *//* opacity: 0.7; */z-index: 2;
}/* 后一张卡片样式（缩小+半透明） */
.benefit-card.next-card {transform: scale(0.9) translateX(-5%);/* 缩小并向左偏移 *//* opacity: 0.7; */z-index: 2;
}/* 非相邻卡片样式（进一步缩小+降低透明度） */
.benefit-card:not(.active-card):not(.prev-card):not(.next-card) {transform: scale(0.8);opacity: 0.5;z-index: 1;
}/* 卡片内部元素样式 */
.benefit-badge {width: 70px;height: 70px;margin-bottom: 12px;transition: transform 0.3s ease;
}.active-card .benefit-badge {transform: scale(1.1);/* 当前卡片徽章轻微放大 */
}.benefit-title {font-size: 22px;margin-bottom: 10px;font-weight: 600;
}.slider-stau {display: inline;color: #fff;padding: 8rpx 18rpx;font-size: 20rpx;background-color: #b8c3c2;border-radius: 18rpx 0 20rpx 0;
}.slider-con {display: flex;padding: 30rpx;
}.benefit-desc1 {font-size: 15px;color: #555;margin-bottom: 6px;
}.benefit-desc {font-size: 15px;color: #555;margin-bottom: 6px;padding: 0 30rpx 20rpx 30rpx;
}.slider-con_img {width: 200rpx;height: 120rpx;margin: auto;
}/* 其他区域样式保持不变 */
.tips {padding: 8px;border-radius: 4px;margin-top: 12px;color: #fffafd;display: flex;justify-content: space-between;align-items: center;font-size: 30rpx;
}.tips-con {display: flex;flex-direction: column;
}.tips-tips1 {font-size: 20rpx;margin-bottom: 15rpx;
}.tips-img {width: 40px;height: 24px;
}.upgrade-con {background-color: #f8f8f8;border-radius: 30rpx 30rpx 0 0;margin-top: -20rpx;padding-top: 30rpx;position: relative;
}.upgrade-tips {background-color: #f9e8df;color: #f56f29;padding: 8px;margin: 0 20rpx;border-radius: 4px;margin-bottom: 16px;
}.upgrade-section {max-height: 46vh;overflow: scroll;background-color: #fff;border-radius: 8px;padding: 32rpx 32rpx 0 32rpx;margin: 0 20rpx;/* box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); */
}.upgrade-title {font-size: 16px;margin-bottom: 8px;width: 260rpx;
}.upgrade-tasks {list-style: none;padding: 0;
}.upgrade-tasks_li {margin-bottom: 15px;
}.upgrade-tasks_li_t {display: flex;align-items: center;
}.upgrade-tasks_li_ticon {width: 40px;height: 24px;margin-right: 8px;
}.upgrade-device {margin-left: 70rpx;display: flex;/* align-items: center */color: #a6a6aa;font-size: 25rpx;
}.upgrade-device_dian {font-size: 40rpx;
}.upgrade-button {width: 83%;margin: 20rpx auto 0 auto;background-color: #722ed1;color: #fff;padding: 10px;border-radius: 4px;text-align: center;cursor: pointer;
}