lcoco/pages/circle/circle.vue

<template>
  <view class="circle-box">
    <view class="circle-title"  :style="[{ 'margin-top': statusBarH + 'px'}]">
      <view class="title-left">
        <image class="title-left-back" @click.stop="back" src="/static/img/common/back.png"></image>
        <view class="title-user">
          <image class="user-head" src="/static/img/temporary/1.png" mode="aspectFill"></image>
          <view class="user-data">
            <view class="user-name sys-color-black sys-weight-600 sys-height-44">WWWWW</view>
            <view class="user-add sys-color-gray-9 sys-height-34">2021-04-18 15:53</view>
          </view>
        </view>
      </view>
      <view class="title-right">
        <call></call>
        <image class="title-right-img" @click.stop="back" src="/static/img/circle/Frame-100070@2x.png" mode="heightFix"></image>
      </view>
    </view>
    <scroll-view :scroll-y="true" :style="{'height':'calc(100vh - '+navHeight+'rpx - env(safe-area-inset-bottom))'}">
      <view class="circle-data">
        <view class="circle-img-list">
          <swiper class="swiper" circular :indicator-dots="true" indicator-color="rgba(255,255,255,0.4)" indicator-active-color="#FFFFFF">
            <swiper-item>
              <image class="circle-img" @click.stop="back" src="/static/img/temporary/1.png" mode="aspectFill"></image>
            </swiper-item>
            <swiper-item>
              <image class="circle-img" @click.stop="back" src="/static/img/temporary/2.png" mode="aspectFill"></image>
            </swiper-item>
            <swiper-item>
              <image class="circle-img" @click.stop="back" src="/static/img/temporary/3.png" mode="aspectFill"></image>
            </swiper-item>
          </swiper>

        </view>
        <view class="circle-text sys-color-black">
          我是阳光大男孩
        </view>
        <view class="tag-list">
          <dynamic-tag :list="tagList" tag-bg="#F2F2F2" tag-color="#999999"></dynamic-tag>
        </view>
      </view>
      <view class="evaluate-data">
        <view class="tag-list">
          <view class="tag-item" @click="setTitleTag(0)">
            <text class="tag-text sys-weight-600 sys-height-44 sys-color-gray-9" :class="{'tag-text-default':tagNum===0}">评论</text>
            <text class="tag-num sys-color-gray-9">(3)</text>
          </view>
          <view class="tag-item" @click="setTitleTag(1)">
            <text class="tag-text sys-weight-600 sys-height-44 sys-color-gray-9" :class="{'tag-text-default':tagNum===1}">相关推荐</text>
          </view>
        </view>
        <view class="evaluate-list">
          <view class="evaluate-item"></view>
        </view>
      </view>
    </scroll-view>


  </view>
</template>

<script>
import tools from "@/service/tools";
import Call from "@/pages/common/call/call";
import DynamicTag from "@/pages/common/tag/dynamic-tag";

export default {
  components: {DynamicTag, Call},
  data() {
    return {
      statusBarH:0,
      navHeight:44,
      tagList:[{'text':'南亭新都会商场','icon':'1'},{'text':'你好认识一哈','icon':'2'}],
      tagNum:0
    }
  },
  methods: {
    back(){
      tools.leftClick()
    },
    setTitleTag(num){
      if(num!==this.tagNum){
        this.tagNum=num
      }
    }
  },
  created() {
    uni.getSystemInfo({
      success: (e) =>{
        this.statusBarH = e.statusBarHeight
        this.navHeight=(50+this.statusBarH)*2+98
      }
    })

  }
}
</script>

<style scoped lang="scss">
.circle-box{
  .circle-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12rpx 24rpx;
    .title-left{
      display: flex;
      justify-content: flex-start;
      .title-left-back{
        width: 40rpx;
        height: 40rpx;
      }
      .title-user{
        margin-left: 30rpx;
        display: flex;
        justify-content: flex-start;
        .user-head{
          width: 64rpx;
          height: 64rpx;
          border-radius: 50%;
          margin-right: 20rpx;
        }
        .user-data{
          .user-name{
            font-size: 32rpx;
          }
          .user-add{
            font-size: 24rpx;
          }
        }

      }
    }
    .title-right{
      display: flex;
      justify-content: flex-end;
      .title-right-img{
        margin-left: 40rpx;
        height: 36rpx;
      }
    }
  }
  .circle-data{
    margin-top: 4rpx;
    border-bottom: 1rpx solid #F2F2F2;
    .circle-img-list{
      width: 100vw;
      height: 920rpx;
      .swiper{
        height: 920rpx;
        .circle-img{
          width: 100vw;
          height: 920rpx;
        }
      }
    }
    .circle-text{
      padding:36rpx 32rpx 0 32rpx;
      flex: 32rpx;
      line-height: 40rpx;
    }
    .tag-list{
      padding: 0 32rpx 42rpx 32rpx;
    }

  }
  .evaluate-data{
    padding: 40rpx 32rpx;
    .tag-list{
      display: flex;
      justify-content: flex-start;
      padding-bottom: 2rpx;
      .tag-item{
        margin-right: 60rpx;
        line-height: 44rpx;
        .tag-text{
          font-size: 32rpx;
          margin-right: 4rpx;
        }
        .tag-num{
          font-size: 24rpx;
        }
        .tag-text-default{
          color: #141414;
        }
      }
    }
  }
}

</style>