<template>
  <view class="benefits">
    <view class="list fl-flex" v-for="(item, index) in 10" :key="index">
      <view class="img">
        <image src="/static/logo.png" mode="scaleToFill" />
      </view>
      <view class="content">
        <view class="f-s-28">车旅程</view>
        <view class="title">恭喜您获得8元优惠券</view>
        <view class="fl-flex main">
          <view class="image">
            <image src="/static/logo.png" mode="scaleToFill" />
          </view>
          <view class="text apostrophe">
            @双鱼女孩儿ni,您的账户于8：50已入账50个美 团币奖励，即刻进入美团币完成领取，避免失效
          </view>
        </view>
        <view class="fl-flex-item time">
          <view class="fl-flex">
            <view class="dot"></view>
            <view class="f-s-20 text-gray">2024/02/05</view>
          </view>
          <u-icon name="more-dot-fill" color="#cbcbcb" size="20" />
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { getCouponInform } from '@/api/client/message.js';
export default {
  data() {
    return {
      queryParams:{
        paging:'1,10',
        counting:true
      }
    };
  },
  mounted(){
    this.handlerInitList()
  },
  methods: {
    handlerInitList(){
      getCouponInform(this.queryParams).then(res=>{
        console.log("@@@@res",res)
      })
    }
  },
};
</script>

<style lang="scss" scoped>
.benefits {
  min-height: 100vh;
  padding: 20rpx;
  .list {
    height: 280rpx;
    background-color: #fff;
    border-radius: 20rpx;
    padding: 20rpx;
    margin-bottom: 20rpx;
    .img {
      height: 40rpx;
      width: 40rpx;
      margin-right: 20rpx;
      image {
        height: 40rpx;
        width: 40rpx;
        display: block;
      }
    }
    .content {
      .main {
        height: 140rpx;
        background-color: #f8f8f8;
        border-radius: 20rpx;
        .image {
          height: 140rpx;
          width: 140rpx;
          margin-right: 20rpx;
          image {
            height: 140rpx;
            width: 140rpx;
            display: block;
            border-radius: 20rpx;
          }
        }
        .text {
          color: #949494;
          font-size: 28rpx;
          height: 80rpx;
          margin: 30rpx 40rpx 20rpx 0;
        }
      }

      .title {
        font-weight: 600;
        font-size: 30rpx;
        color: #555;
        margin: 10rpx 0 20rpx 0;
      }
      .time {
        margin-top: 10rpx;
        .dot {
          width: 16rpx;
          height: 16rpx;
          background-color: red;
          border-radius: 8rpx;
          margin-right: 10rpx;
          margin-top: 5rpx;
        }
      }
    }
  }
}

.apostrophe {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
</style>
