zhangsiye/mini/pages/trace/index.vue

<template>
  <view class="trace-container">
    <!--我的收藏-->
    <view class="collect-container">
      <view class="header main-between cross-center" @click="$u.route('/pages/trace/collect')">
        <text>我的收藏</text>
        <view class="more main-left cross-center">查看全部
          <u-icon name="arrow-right" />
        </view>
      </view>
      <!--剧集-->
      <view class="content main-left cross-center">
        <episode
          v-for="(episode,index) in collect"
          :key="index"
          :episode="episode"
          :custom-style="{
            marginRight: ((index+1) % 4 !== 0 ? '10rpx' :''),
            width: ((710 - 60) / 4 )+'rpx' // 60为间隔 710为 collect-container宽度
          }"
          :image-style="{
            height: '200rpx'
          }"
        />
      </view>
    </view>
    <!--其他剧集-->
    <view class="title">其他剧集</view>
    <view
      v-for="(item,index) in category"
      :key="index"
      class="category main-left"
    >
      <view class="name">动作</view>
      <view class="episode-box main-left">
        <episode
          v-for="(episode,episodeIndex) in collect"
          :key="episodeIndex"
          :episode="episode"
          :custom-style="{
            marginRight: ((index+1) % 3 !== 0 ? '10rpx' :''),
            width: ((700 - 80) / 3 )+'rpx'
          }"
          :image-style="{
            height: '280rpx'
          }"
        />
      </view>
    </view>
    <!--tab bar-->
    <tab-bar />
  </view>
</template>

<script>
import Episode from '../../components/Episode/index'
import TabBar from '../../components/TabBar/index'
export default {
  name: 'Trace',
  components: { TabBar, Episode },
  data() {
    return {
      collect: [
        { name: '毒液', status: '已完结', total: 40 },
        { name: '毒液', status: '已完结', total: 40 },
        { name: '毒液', status: '已完结', total: 40 }
      ],
      category: [1, 2, 3]
    }
  },
  computed: {},
  methods: {}
}
</script>

<style lang="scss" scoped>
    .trace-container {
      padding: 20rpx 0;
      font-size: 30rpx;
      color: $default-color;
      .status-box{
        margin-top: 10rpx;
        color: $info-color;
        font-size: 28rpx;
        .status{
          color: $primary-color;
          margin-right: 14rpx;
        }
      }
      .collect-container{
        background: #1B203C;
        border-radius: 30rpx;
        padding: 20rpx;
        width: 710rpx;
        margin: 0 auto;
        .header{
          text{
            color: $primary-color;
            font-size: 38rpx;
            font-weight: 800;
          }
          .more{
            color: $info-color;
          }
        }
        .content{
          margin-top: 20rpx;
          .collect-item{
            .cover-image{
              image{
                width: 200rpx;
                height: 280rpx;
              }
            }
            .name{
              margin-top: 10rpx;
            }
          }
        }
      }
      .title{
        color: $primary-color;
        font-size: 38rpx;
        font-weight: 800;
        padding: 0 20rpx;
        margin: 40rpx 0 30rpx;
      }
      .category{
        margin-bottom: 30rpx;
        .name{
          background: #284150;
          writing-mode: vertical-lr;
          padding: 0 20rpx;
          border-top-right-radius: 30rpx;
          border-bottom-right-radius: 30rpx;
          text-align: center;
        }
        .episode-box{
          margin-left: 20rpx;
        }
      }
    }
</style>