horzi_rai_wxa/pages-purchaser/columnDetail/columnDetail.vue

<template>
  <view class="container column-detail">
    <view :class="[scrollTopNumber == 0 ? 'top-content' : 'scroll-top-content']">
      <view :class="['position-regular', scrollTopNumber != 0 && 'position-content-bg']">
        <view class="nav-bar-wrap" :style="{ height: navBarStyle.height, paddingTop: navBarStyle.paddingTop, paddingBottom: navBarStyle.paddingBottom }">
          <view class="content-box" :style="{ color: scrollTopNumber == 0 ? '#fff' : '#333' }">
            <text v-if="scrollTopNumber != 0">专栏详情</text>
            <view class="arrow-left-icon">
              <van-icon name="arrow-left" size="20px" @click="goHandler" />
            </view>
          </view>
        </view>
        <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>
      <view class="info-lable-card">
        <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>
    </view>
    <view class="column-list-content">
      <column-list-content />
    </view>
  </view>
</template>

<script>
import ColumnListContent from "../components/columnListContent.vue";
import infoCard from "../components/infoCard.vue";
export default {
  components: { infoCard, ColumnListContent },
  data() {
    return {
      navBarStyle: {
        height: 60 + "px",
        paddingTop: 40 + "px",
        paddingBottom: "4px",
      },
      scrollTopNumber: 0,
    };
  },
  methods: {
    initNavBar() {
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect();
      this.navBarStyle = {
        height: menuButtonInfo.height + menuButtonInfo.top + 8 + "px",
        paddingTop: menuButtonInfo.top - 4 + "px",
        paddingBottom: "4px",
      };
    },
  },
  onLoad() {
    this.initNavBar();
  },
  onPageScroll(e) {
    console.log(e);
    this.scrollTopNumber = e.scrollTop;
  },
};
</script>

<style lang="scss" scope>
.column-detail {
  position: relative;
  background-color: #f3f5f9;
  .scroll-top-content,
  .position-content-bg {
    background-color: #fff;
  }
  .top-content {
    width: 100%;
    height: 625rpx;
    background-image: url(https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/Maskgroupbg.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .position-regular {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99;
    .name-author {
      z-index: 99;
      display: flex;
      height: 178rpx;
      padding: 20rpx 40rpx;
      .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: 110rpx;
            height: 110rpx;
          }
        }
        .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;
        }
      }
    }
  }
  .nav-bar-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    z-index: 99;
    .content-box {
      position: relative;
      display: flex;
      align-items: center;
      width: 100%;
      justify-content: center;
      color: #fff;
      font-size: 34rpx;
      .arrow-left-icon {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40rpx;
        height: 40rpx;
        left: 39rpx;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99;
      }
    }
  }
  .column-list-content {
    position: absolute;
    width: 682rpx;
    border-radius: 12rpx 12rpx 0 0;
    top: 580rpx;
    right: 50%;
    transform: translateX(50%);
    z-index: 9;
    overflow: hidden;
  }
  .info-lable-card {
    position: absolute;
    top: 165px;
    left: 0;
    padding: 30rpx 35rpx;
    .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;
        color: #fff;
      }
    }
  }
}
</style>