<template>
  <view class="themes-note">
    <view class="note-til flex flex-colum al-item-center">
      <text class="tex1">热门笔记</text>
      <view class="flex flex-colum al-item-center">
        <text class="tex2">POPULAR NOTES</text>
        <text class="tex-bg"></text>
      </view>
    </view>
    <view class="themes-note__list">
      <block v-for="(item, idx) in shopNote" :key="idx">
        <view
          class="themes-note__item"
          @click="goto"
          :data-url="'/activity/luntan/detail?id=' + item.videoId"
        >
          <image
            class="themes-note__item-img"
            :src="item.pic+'?x-oss-process=image/resize,m_fill,w_167,h_245'"
            mode="aspectFill"
          ></image>
          <view class="themes-note__item-txt">{{ item.title }}</view>
          <view class="note-c-b flex al-item-center j-between">
            <view class="note-c-b-l flex al-item-center">
              <image
                class="note-u-img border-rius-r"
                :src="item.headimg"
                mode="aspectFill"
              ></image>
              <text class="text-overflow-tx flex1">{{ item.nickname }}</text>
            </view>
            <view class="note-c-b-r flex al-item-center">
              <text class="iconfont icon-aixin"></text>
              <!-- <text class="iconfont icon-aixin_shixin" :style="{'color':t('color1')}"></text> -->
              <text class="z-tx">{{ item.zan }}</text>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    shopNote: {
      type: Array,
      default: function() {
        return [];
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.themes-note {
  margin-top: 30rpx;
  .note-til {
    padding-bottom: 30rpx;
    letter-spacing: 4rpx;
    .tex1 {
      font-size: 48rpx;
      padding-bottom: 10rpx;
    }
    .tex2 {
      z-index: 6;
      color: #efbd6f;
    }
    .tex-bg {
      height: 12rpx;
      width: 92%;
      margin-top: -12rpx;
      z-index: 2;
      background: rgba(239, 189, 111, 0.3);
    }
  }
  &__list {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: -28rpx;
  }
  &__item {
    width: 334rpx;
    height: 490rpx;
    padding-bottom: 18rpx;
    box-sizing: border-box;
    box-shadow: 0 0 4rpx 1rpx rgba(0, 0, 0, 0.1);
    border-radius: 6rpx 6rpx 6rpx 6rpx;
    margin-bottom: 28rpx;
    &-img {
      width: 100%;
      height: 320rpx;
    }
    &-txt {
      padding: 16rpx 16rpx 0rpx;
      min-height: 92rpx;
      font-size: 28rpx;
      color: #333;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      /* autoprefixer: ignore next */
      -webkit-box-orient: vertical;
      text-align: justify;
      white-space: pre-wrap;
      word-break: break-all;
    }
    .note-c-b {
      margin-top: 10rpx;
      font-size: 20rpx;
      color: #999;
      padding: 0 16rpx;
      .note-c-b-l {
        width: 60%;
        .note-u-img {
          width: 36rpx;
          height: 36rpx;
          border-radius: 50%;
          margin-right: 16rpx;
        }
      }
      .note-c-b-r {
        .icon-aixin {
          font-size: 24rpx;
        }
        .icon-aixin_shixin {
          font-size: 24rpx;
        }
        .z-tx {
          padding-left: 10rpx;
        }
      }
    }
  }
}
</style>