horzi_rai_wxa/pages-purchaser/components/infoCard.vue

<template>
  <view class="info-card-detail" :style="{ 'background-image': pagesType == '专栏详情' ? 'url(' + authorDetail.BgImg + ')' : '' }">
    <view class="name-author">
      <view class="author-img">
        <view class="img-box">
          <image :src="authorDetail.HeadImg"></image>
        </view>
        <view class="set-btn" v-if="pagesType == '专栏详情'"> 编辑专栏</view>
        <view class="set-btn" v-else> + 关注</view>
      </view>
      <view class="name-box">
        <text>{{ authorDetail.SpecialName }}</text>
        <text>{{ authorDetail.NickName }}</text>
      </view>
    </view>
    <view class="info-card-lable">
      <text v-for="item in dataProcessing(authorDetail.Label)" :key="item">{{ item }}</text>
    </view>
    <view class="info-card-fans">
      <text>{{ authorDetail.SpecialArticleNum }}</text>
      <text>文章</text>
      <text>{{ authorDetail.CollectNum }}</text>
      <text>被收藏</text>
      <text>{{ authorDetail.FollowNum }}</text>
      <text>粉丝</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    authorDetail: {
      type: Object,
      default: {},
    },
    pagesType: {
      type: String,
      default: "",
    },
  },
  data() {
    return {};
  },
  methods: {
    // 数据处理
    dataProcessing(item) {
      return item ? item.split(",") : [];
    },
  },
};
</script>

<style lang="scss" scope>
.info-card-detail {
  border-radius: 16rpx;
  background-size: 100% 100%;
  // 上面的那个盒子用就把上面的样式去掉
  width: 100%;
  padding: 40rpx 35rpx;
  background-repeat: no-repeat;
  color: #fff;
  .name-author {
    display: flex;

    .author-img {
      position: relative;
      display: flex;
      justify-content: center;
      width: 126rpx;
      height: 138rpx;
      text-align: center;
      .img-box {
        width: 110rpx;
        height: 110rpx;
        border-radius: 50%;
        overflow: hidden;
        image {
          width: 160rpx;
          height: 160rpx;
        }
      }
      .set-btn {
        position: absolute;
        display: flex;
        justify-content: center;
        align-items: center;
        left: 0;
        bottom: 0;
        width: 126rpx;
        height: 48rpx;
        border-radius: 150rpx;
        background-color: #376cbb;
        color: #fff;
      }
    }
    .name-box {
      margin-left: 20rpx;
      text:nth-child(1) {
        font-size: 36rpx;
        font-weight: 500;
        line-height: 50rpx;
        padding: 20rpx 0;
      }
      text:nth-child(2) {
        font-size: 28rpx;
        font-weight: 400;
        line-height: 39rpx;
      }
    }
  }
  .info-card-lable {
    display: flex;
    flex-wrap: wrap;
    text {
      height: 45rpx;
      padding: 6rpx 12rpx 6rpx 12rpx;
      border-radius: 150rpx;
      background-color: #8994a1;
      margin: 20rpx 20rpx 0rpx 0;
    }
  }
  .info-card-fans {
    margin-top: 20rpx;
    display: flex;
    align-items: center;
    text:nth-child(2n + 1) {
      color: #ffe8a8;
      font-size: 38rpx;
      font-weight: 500;
    }
    text:nth-child(2n) {
      margin: 0 40rpx 0 5rpx;
    }
  }
}
</style>