no message

pages.json

@@ -340,8 +340,14 @@
         "navigationBarTextStyle": "black",
         "enablePullDownRefresh": false
       }
+    },
+    {
+      "path": "pages/circle/circle",
+      "style": {
+        "navigationBarTitleText": "",
+        "enablePullDownRefresh": false
+      }
     }
-
   ],
   "globalStyle": {
     "navigationBarTextStyle": "black",

pages/circle/circle.vue

@@ -0,0 +1,191 @@
+<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>

pages/circle/index.vue

@@ -16,6 +16,7 @@
       </view>
 
     </view>
+
     <view class="circle-content" >
       <scroll-view :scroll-y="true" :style="{'height':'calc(100vh - '+navHeight+'rpx - var(--window-bottom))'}">
         <my-praise></my-praise>
@@ -49,15 +50,12 @@ export default {
   created() {
     uni.getSystemInfo({
       success: (e) =>{
-        console.log(e.safeArea.bottom)
         this.statusBarH = e.statusBarHeight
         this.navHeight=(50+this.statusBarH)*2
         //e.safeArea.bottom  底部安全距离
       }
     })
-    //#ifdef MP-WEIXIN
-    this.isXcx=true
-    //#endif
+
   }
 }
 </script>

pages/common/call/call.vue

@@ -0,0 +1,45 @@
+<template>
+  <view class="call-box">
+    <view class="call-icon">
+      <image class="call-img" src="/static/img/circle/Group-100243@2x.png" mode="aspectFill"></image>
+    </view>
+    <view class="call-text sys-weight-600 sys-color-black">打招呼</view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: "call",
+  components: {},
+  props: {},
+  data() {
+    return {}
+  },
+  watch: {},
+  mounted() {
+
+  },
+  methods: {}
+}
+</script>
+
+<style scoped lang="scss">
+.call-box{
+  height: 40rpx;
+  border-radius: 200rpx;
+  border: 2rpx solid #141414;
+  padding: 4rpx 16rpx;
+  display: flex;
+  justify-content: space-between;
+  .call-img{
+    width: 40rpx;
+    height: 40rpx;
+    margin-right: 8rpx;
+  }
+  .call-text{
+    font-size: 28rpx;
+    line-height: 40rpx;
+  }
+}
+
+</style>

pages/my/model/my-praise.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="my-praise-box">
-    <view class="praise-item" v-for="(item,itemIndex) in list">
+    <view class="praise-item" @click="goToDetails" v-for="(item,itemIndex) in list">
       <view class="praise-left">
         <image class="praise-head" src="/static/img/temporary/3.png" mode="aspectFill"></image>
       </view>
@@ -17,10 +17,7 @@
             <view class="left-title-time sys-color-gray-9">2021-04-18 15:53发布.<100m</view>
           </view>
           <view class="praise-top-right">
-            <view class="praise-top-right-icon">
-              <image class="praise-top-right-img" src="/static/img/circle/Group-100243@2x.png" mode="aspectFill"></image>
-            </view>
-            <view class="praise-top-right-text sys-weight-600 sys-color-black">打招呼</view>
+           <call></call>
           </view>
         </view>
 
@@ -75,9 +72,10 @@ import ImgOne from "@/pages/common/img/img-one";
 import ImgTwo from "@/pages/common/img/img-two";
 import ImgThree from "@/pages/common/img/img-three";
 import DynamicTag from "@/pages/common/tag/dynamic-tag";
+import Call from "@/pages/common/call/call";
 export default {
   name: "my-praise",
-  components: {DynamicTag, ImgThree, ImgTwo, ImgOne},
+  components: {Call, DynamicTag, ImgThree, ImgTwo, ImgOne},
   props: {},
   data() {
     return {
@@ -110,6 +108,11 @@ export default {
       }else {
         --this.list[index].likeNum
       }
+    },
+    goToDetails(){
+      uni.navigateTo({
+        'url':'/pages/circle/circle'
+      })
     }
   }
 }
@@ -155,23 +158,7 @@ export default {
             font-size: 24rpx;
           }
         }
-        .praise-top-right{
-          height: 40rpx;
-          border-radius: 200rpx;
-          border: 2rpx solid #141414;
-          padding: 8rpx 16rpx;
-          display: flex;
-          justify-content: space-between;
-          .praise-top-right-img{
-            width: 40rpx;
-            height: 40rpx;
-            margin-right: 8rpx;
-          }
-          .praise-top-right-text{
-            font-size: 28rpx;
-            line-height: 40rpx;
-          }
-        }
+
       }
       .right-text{
         margin-top: 24rpx;

static/css/sys.css

@@ -87,3 +87,9 @@ overflow: hidden;
   line-height: 44rpx;
 }
 
+.sys-height-34{
+  height: 34rpx;
+  line-height: 34rpx;
+}
+
+