horzi_rai_wxa/pages-purchaser/components/infoCard.vue

<template>
  <view class="info-card-detail">
    <view class="name-author">
      <view class="author-img">
        <view class="img-box">
          <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/T2ddwIIaULVdkGM6gVMuNxBSft8Y.png"></image>
        </view>
        <view class="set-btn"> + 关注</view>
      </view>
      <view class="name-box">
        <text>专栏名称专栏名称专栏名称</text>
        <text>作者昵称作者昵称</text>
      </view>
    </view>
    <view class="info-card-lable">
      <text>专栏名称专1</text>
      <text>专栏名称专2</text>
      <text>专栏名称专3</text>
      <text>专栏名称专3</text>
      <text>专栏名称专3</text>
      <text>专栏名称专3</text>
    </view>
    <view class="info-card-fans">
      <text>12</text>
      <text>文章</text>
      <text>24</text>
      <text>被收藏</text>
      <text>36</text>
      <text>粉丝</text>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {},
};
</script>

<style lang="scss" scope>
.info-card-detail {
  border-radius: 16rpx;
  background-image: url(https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png);
  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>