<template> <div> <h2 class="record-title">中奖记录</h2> <div> <div v-for="(item, index) in arr" :key="index" class="record-item"> <div class="record-item-field"> <div :class="{'active': item.isDrop}" class="record-content"> <div class="record-time"> <div class="record-time-item">2019-08-15</div> <div class="record-time-item">20:35:26</div> </div> <div class="record-prize"> <div class="record-prize-item">一等奖</div> <div class="record-prize-item">新秀丽行李箱新秀丽行李</div> </div> <button type="button" @click="obtain(item, index)" class="record-button"> {{ item.canDrop ? '领取说明' : '马上领取' }} <i v-if="item.canDrop" :class="{'active':item.isDrop}" class="triangle"></i> </button> </div> </div> <div ref="recordRemark" class="record-item-remark"> <p ref="recordRemarkChild">{{ item.content }}</p> </div> </div> </div> </div> </template> <script> export default { name: 'RecordList', data() { return { isDrop: false, arr: [{ isDrop: false, time: 0, content: '奖品已发放到您的人保会员账', canDrop: false }, { isDrop: false, time: 1, content: '奖品已发放到您的人保会员账号,请到【广东人保财险】微信公众号-我的人保-个人中信-卡券/我的卡券中查收使用。', canDrop: true }, { isDrop: false, time: 2, content: '奖品已发放到您的人保会员账', canDrop: true }] } }, methods: { obtain(item, index) { if(item.canDrop) { item.isDrop = !item.isDrop let childHeight = this.$refs.recordRemarkChild[index].offsetHeight let height = item.isDrop ? childHeight : 0 this.$refs.recordRemark[index].style.height = height + 'px' } } } } </script> <style lang="scss" scoped> .record-title { height: px2rem(88px); border-bottom: 1px solid #e4e4e4; @include font-dpr(32px); color: #333; font-weight: 600; text-align: center; @include lh-dpr(88px); } .record-item-field { padding-left: px2rem(24px); .record-content { height: px2rem(140px); padding-left: px2rem(6px); padding-right: px2rem(30px); border-bottom: 1px solid #e4e4e4; display: flex; align-items: center; justify-content: space-between; &.active { border-bottom-color: transparent; } } } .record-time { px2rem(204px); &-item { color: #aaa; font-weight: 600; @include font-dpr(22px); @include lh-dpr(22px); &:first-child { margin-bottom: px2rem(20px); } } } .record-prize-item { px2rem(326px); padding-right: px2rem(6px); color: #333; font-weight: 600; @include font-dpr(28px); @include lh-dpr(28px); @extend %ellipsis; &:first-child { margin-bottom: px2rem(20px); } } .record-button { padding: px2rem(8px) 0; px2rem(160px); background: #E90832; border-radius: 25px; border: none; color: #fff; white-space: nowrap; @include font-dpr(24px); display: flex; align-items: center; justify-content: center; .triangle { margin-left: px2rem(4px); @include triangle($direction:top, $size:4px, $borderColor:#fff); transform: rotate(180deg); transition: transform .3s; &.active { transform: rotate(0); } } } .record-item-remark { height: 0; overflow: hidden; transition: height .35s; background: #FFF4F4; p { padding: px2rem(33px) px2rem(30px); color: #666; @include font-dpr(26px); @include lh-dpr(37px); } } </style>