zhangsiye/mini/pages/my/history.vue

<template>
  <view class="history">
    <view
      v-for="(item,index) in history"
      :key="index"
      class="item main-left"
    >
      <view class="cover-image">
        <image src="/static/image/default-movie.png" />
      </view>
      <view class="right-box">
        <view class="op-group main-right cross-center">
          <view class="delete">删除</view>
          <view class="play">播放</view>
        </view>
        <view class="name">毒液</view>
        <view class="status-box">
          <text class="status">已完结</text>
          <text>共18集</text>
        </view>
        <view class="record">
          上次看至 <text>第二集</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      history: [1, 2, 3, 4, 5]
    }
  },
  computed: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
    .history{
      padding: 20rpx;
      color: $default-color ;
      font-size: 30rpx;
      .item{
        padding: 30rpx;
        border: 1rpx solid $primary-color;
        border-radius: 30rpx;
        margin-top: 30rpx;
        .cover-image{
          image{
            width: 200rpx;
            height: 280rpx;
          }
        }
        .right-box{
          flex: 1;
          margin-left: 20rpx;
          .op-group{
            .delete{
              border: 1rpx solid #FB3651;
              color: #FB3651;
              border-radius: 30rpx;
              width: 140rpx;
              padding: 10rpx;
              text-align: center;
              margin-right: 30rpx;
            }
            .play{
              background: linear-gradient(90deg, #FF74B9,#6EEBE8);
              color: $default-color;
              border-radius: 30rpx;
              width: 140rpx;
              padding: 10rpx;
              text-align: center;
            }
          }
          .name{
            font-size: 38rpx;
            font-weight: 600;
            margin-bottom: 10rpx;
            margin-top: 50rpx;
          }
          .status-box{
            font-size: 28rpx;
            margin-bottom: 10rpx;
            color: $info-color;
            .status{
              color: $primary-color;
              margin-right: 14rpx;
            }
          }
          .record{
            text{
              color: #FB3651;
            }
          }
        }
      }
    }
</style>