circle-card

nova-werun/components/circle-card/index.js

@@ -45,7 +45,7 @@ Component({
         //
         showconfirm: false,
         //
-        maxLength: 100, // 设置最大长度
+        maxLength: 110, // 设置最大长度
         showFull: false, // 控制是否显示完整内容
     },
     lifetimes: {

nova-werun/components/circle-card/index.less

@@ -1,46 +1,48 @@
 /* nova-werun/components/circle-card/index.wxss */
 .trends-one{
-    width: 100%;
+    width: 685rpx;
     margin-bottom: 20rpx;
-    border-bottom: grey solid 1px;
-    padding-left: 30rpx;
-    padding-right: 20rpx;
+    padding-left: 15rpx;
+    padding-right: 15rpx;
     padding-bottom: 20rpx;
+    padding-top: 20rpx;
+    color: #333333;
+    border-radius: 15rpx;
+    background-color: white;
+    font-family: MicrosoftYaHei;
     .namebax{
         width: 100%;
-        height: 100rpx;
+        height: 105rpx;
         display: flex;
         align-items: center;
         image{
-            width: 80rpx;
-            height: 80rpx;
+            width: 105rpx;
+            height: 105rpx;
             border-radius: 50%;
         }
         .name{
             margin-left: 10rpx;
-            font-size: 34rpx;
-            font-weight: 600;
+            font-family: MicrosoftYaHei;
+            font-size: 28rpx;
+            color: #333333;
         }
     }
     .text{
-        width: 92%;
-        padding-left: 90rpx;
-        font-size: 34rpx;
+        width: 100%;
+        font-size: 26rpx;
+        margin-top: 30rpx;
     }
     .picture{
-        width: 92%;
-        padding-left: 90rpx;
+        width: 100%;
         display: flex;
         flex-wrap: wrap;
         margin-top: 30rpx;
         .image{
-            width: 175rpx;
-            height: 175rpx;
-            margin-right: 10rpx;
-            margin-bottom: 10rpx;
-        }
-        .image:nth-child(3n) {
-            margin-right: 0; /* 每行的最后一张图片不需要右边距 */
+            width: 210rpx;
+            height: 210rpx;
+            border-radius: 15rpx;
+            margin-left: 8rpx;
+            margin-bottom: 8rpx;
         }
     }
     .picture5 {
@@ -79,40 +81,41 @@
         }
     }
     .picture2{
-        width: 92%;
-        padding-left: 90rpx;
+        width: 100%;
         display: flex;
         flex-wrap: wrap;
+        justify-content: center;
         margin-top: 30rpx;
         .image{
             width: 240rpx;
             height: 240rpx;
-            margin-right: 10rpx;
+            margin-right: 20rpx;
             margin-bottom: 10rpx;
+            border-radius: 15rpx;
         }
     }
     .picture4{
-        width: 92%;
-        padding-left: 90rpx;
+        width: 100%;
         display: flex;
         flex-wrap: wrap;
         margin-top: 30rpx;
-    
+        justify-content: center;
         .image{
             width: 230rpx;
             height: 230rpx;
-            margin-right: 10rpx;
-            margin-bottom: 10rpx;
+            margin-right: 20rpx;
+            margin-bottom: 20rpx;
             object-fit: cover;
+            border-radius: 15rpx;
         }
         .image:nth-child(2n) {
             margin-right: 0; /* 每行的最后一张图片不需要右边距 */
         }
     }
     .picture3{
-        width: 92%;
-        padding-left: 90rpx;
+        width: 100%;
         display: flex;
+        justify-content: center;
         flex-wrap: wrap;
         margin-top: 30rpx;
         .image{
@@ -122,25 +125,47 @@
         .image-portrait {
             width: 332rpx; /* 竖屏图片的宽度 */
             height: 425rpx;
+            border-radius: 15rpx;
         }
     
         .image-landscape {
             width: 442rpx; /* 横屏图片的宽度 */
             height: 300rpx;
-
+            border-radius: 15rpx;
+        }
+    }
+    
+    // 地址
+    .addbox{
+        width: 100%;
+        height: 30rpx;
+        display: flex;
+        align-items: center;
+        margin-top: 25rpx;
+        .add-tex{
+            font-size: 20rpx;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
     }
     
     .timebox{
         width: 100%;
-        height: 80rpx;
-        padding-left: 90rpx;
-        margin-bottom: 20rpx;
+        // padding-left: 90rpx;
         display: flex;
         align-items: center;
         position: relative;
+        margin-top: 10rpx;
+        .dianzan{
+            width: 80rpx;
+            height: 50rpx;
+            font-size: 24rpx;
+            display: flex;
+            align-items: center;
+        }
         .time-box{
-            width: 85%;
+            width: 100%;
             height: 100%;
             display: flex;
             align-items: center;
@@ -148,6 +173,13 @@
                 font-size: 30rpx;
                 margin-right: 20rpx;
             }
+            .pinlunbox{
+                height: 100%;
+                display: flex;
+                align-items: center;
+                margin-left: auto;
+                font-size: 24rpx;
+            }
         }
         .functionbox{
             width: 280rpx;
@@ -255,22 +287,14 @@
         }
     }
     .commentbox{
-        padding-top: 10rpx;
-        padding-bottom: 10rpx;
-        margin-left: 90rpx;
         display: flex;
         flex-direction: column;
-        background-color: #efefef;
         align-items: center;
-        padding-left: 18rpx;
         flex-wrap: wrap;
-        border-top: gray solid 0.1px;
-        font-size: 30rpx;
+        font-size: 26rpx;
         padding-right: 10rpx;
         .comment{
             width: 100%;
-            padding-top: 10rpx;
-            padding-bottom: 10rpx;
             flex-wrap: wrap;
             flex: 1; /* 允许内容占用剩余空间 */
             white-space: normal; /* 允许内容换行 */
@@ -315,21 +339,14 @@
         }
     }
     .commentbox2{
-        padding-top: 10rpx;
-        padding-bottom: 10rpx;
-        margin-left: 90rpx;
         display: flex;
         flex-direction: column;
-        background-color: #efefef;
         align-items: center;
-        padding-left: 18rpx;
         flex-wrap: wrap;
-        font-size: 30rpx;
+        font-size: 26rpx;
         padding-right: 10rpx;
         .comment{
             width: 100%;
-            padding-top: 10rpx;
-            padding-bottom: 10rpx;
             flex-wrap: wrap;
             flex: 1; /* 允许内容占用剩余空间 */
             white-space: normal; /* 允许内容换行 */
@@ -447,12 +464,11 @@
         display: flex;
         flex-wrap: wrap;
         margin-top: 30rpx;
-        justify-content: space-between;
         .image{
             width: 210rpx;
             height: 210rpx;
-            // margin-right: 10rpx;
-            // margin-bottom: 10rpx;
+            margin-right: 8rpx;
+            margin-bottom: 8rpx;
             border-radius: 15rpx;
         }
     }

nova-werun/components/circle-card/index.wxml

@@ -28,14 +28,41 @@
         <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="{{imageclass}}" wx:for="{{images}}" src="{{item}}" bindload="onImageLoad"> </image>
     </view>
     <!--  -->
+    <view class="addbox">
+        <van-icon name="location-o" size='28rpx' />
+        <view class="add-tex">南昌市</view>
+    </view>
     <view class="timebox">
+        <!-- 点赞 -->
+        <view class="dianzan" wx:if="{{!isclick}}" bindtap="isclick" data-id="{{cicleList[0].objectId}}">
+            <van-icon name="good-job-o" size='32rpx' />
+            {{chickList.length}}
+        </view>
+
+        <view class="dianzan" wx:if="{{isclick}}" bindtap="isclick">
+            <van-icon name="good-job-o" size='32rpx' color='#FF6C00' />
+            {{chickList.length}}
+        </view>
+
         <view class="time-box">
-            <view class="time">{{time}}</view>
-            <van-icon wx:if="{{ permission=='delete'}}" color='#1a1abd' bind:click='showconfirm' name="delete-o" size='20' />
+            <!-- <view class="time">{{time}}</view> -->
+            <!-- 删除 -->
+            <van-icon wx:if="{{ permission=='delete'}}" color='#1a1abd' bind:click='showconfirm' name="delete-o" size='32rpx' />
             <van-dialog id="van-dialog" showCancelButton message='你确认要删除吗' show="{{ showconfirm }}" bind:cancel='cancleconfirm' bind:confirm='clickconfirm' />
+            <!-- 评论 -->
+            <!-- 没有回复的评论的数量 -->
+            <view class="pinlunbox" bindtap="showPopup">
+                <van-icon name="chat-o" size='32rpx' />
+                {{noCommentCount}}
+            </view>
+            <!-- 转发 -->
+            <view class="pinlunbox" style="margin-left: 10rpx;">
+                <van-icon name="share-o" size='32rpx' />
+                0
+            </view>
         </view>
         <!-- 点赞评论 -->
-        <view class="functionbox" wx:if="{{isgood}}">
+        <!-- <view class="functionbox" wx:if="{{isgood}}">
             <view class="function">
                 <view class="function1" wx:if="{{!isclick}}" bindtap="isclick" data-id="{{cicleList[0].objectId}}">
                     <van-icon name="like-o" />
@@ -51,9 +78,10 @@
                     <view class="text2">评论</view>
                 </view>
             </view>
-        </view>
+        </view> -->
+
         <!-- 输入框 -->
-        <view class="point" bindtap="showgood"> ·· </view>
+        <!-- <view class="point" bindtap="showgood"> ·· </view> -->
         <van-popup show="{{ show }}" position="bottom" custom-style="height: {{bottomNavHeight+textareaHeight+70}}rpx;" bind:close="onClose" overlay-style='background-color: rgba(255, 255, 255, 0); ' custom-style='background-color: #efefef;'>
 
             <view class='sending' style="height: {{textareaHeight+40}}rpx;">
@@ -65,28 +93,27 @@
         </van-popup>
     </view>
     <!-- 点赞人 -->
-    <view class="chinkinbox" wx:if="{{chickList.length!=0}}">
+    <!-- <view class="chinkinbox" wx:if="{{chickList.length!=0}}">
         <van-icon name="like-o" size='18' />
         <block wx:for="{{chickList}}">
             <view class="chickname" wx:if="{{index!=chickList.length-1}}">{{item.user.nickname}} ,</view>
             <view class="chickname" wx:if="{{index==chickList.length-1}}">{{item.user.nickname}}</view>
         </block>
 
-    </view>
+    </view> -->
     <!-- 评论 -->
     <view class="{{chickList.length !=0? 'commentbox' :'commentbox2' }}" wx:if="{{commentList.length!=0}}">
         <block wx:for="{{commentList}}">
             <view class="{{item.showdeletid?'comment2':'comment'}}" wx:if="{{!item.comment}}" bindtap="showpop" data-id="{{item.objectId}}">
-                <span style="color: #072d79;">{{item.user.nickname}}</span>
-                :
+                <span style="color: #4896FB;margin-right:10rpx">{{item.user.nickname}}:</span>
                 <span>{{item.content}}</span>
                 <view wx:if="{{item.showdeletid}}" class="delete" bindtap="deletecomment" data-id="{{item.objectId}}">删除</view>
             </view>
             <view class="{{item.showdeletid?'comment2':'comment'}}" wx:if="{{item.comment&&!item.comment.isDeleted}}" bindtap="showpop" data-id="{{item.objectId}}">
-                <span style="color: #072d79;">{{item.user.nickname}}</span>
+                <span style="color: #4896FB;">{{item.user.nickname}}</span>
                 回复
-                <span style="color: #072d79;">{{item.comment.user.nickname}}</span>
-                :
+                <span style="color: #4896FB;margin-right:10rpx">{{item.comment.user.nickname}}:</span>
+
                 <span>{{item.content}}</span>
                 <view wx:if="{{item.showdeletid}}" class="delete" bindtap="deletecomment" data-id="{{item.objectId}}">删除</view>
             </view>
@@ -111,7 +138,7 @@
             <text bindtap="showFullContent" class="quanwen">查看全文</text>
         </view>
         <view wx:if="{{cicleList[0].content.length <= maxLength}}">
-            <view class="contentbox">{{cicleList[0].content}}</view>
+            <view bindtap="gourl" style="max-height: 134rpx;" data-url="../../pages/circle/circle-detail/index" data-id="{{cicleList[0].objectId}}" class="contentbox">{{cicleList[0].content}}</view>
         </view>
     </view>
 
@@ -128,7 +155,7 @@
     <view class="picture4" wx:if="{{images.length==4}}">
         <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
     </view>
-    <!-- 3张和4-9张图片 -->
+    <!-- 3张和5-9张图片 -->
     <block wx:if="{{ type=='surface'}}">
         <view class="picture" wx:if="{{images.length>4  && images.length<=9 || images.length==3 }}">
             <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>

nova-werun/pages/circle/circle-detail/index.less

@@ -4,5 +4,8 @@
     .trends{
         width: 100%;
         padding-top: 20rpx;
+        display: flex;
+        justify-content: center;
+        
     }
 }

nova-werun/pages/circle/circle-detail/index.wxss

@@ -1 +1 @@
-.all{width:100vw}.all .trends{width:100%;padding-top:20rpx}
+.all{width:100vw}.all .trends{width:100%;padding-top:20rpx;display:flex;justify-content:center}

nova-werun/pages/circle/my-circle/index.less

@@ -5,8 +5,9 @@
     position: relative;
     .trends{
         width: 100%;
-        border-top: grey solid 1px;
         padding-top: 20rpx;
+        padding-left: 32rpx;
+        padding-right: 32rpx;
         .no-more{
             width: 100%;
             display: flex;

nova-werun/pages/circle/my-circle/index.wxss

@@ -1 +1 @@
-.all{width:100vw;position:relative}.all .trends{width:100%;border-top:grey solid 1px;padding-top:20rpx}.all .trends .no-more{width:100%;display:flex;justify-content:center;font-size:28rpx;margin-bottom:35rpx}.all .trends::-webkit-scrollbar{display:none}
+.all{width:100vw;position:relative}.all .trends{width:100%;padding-top:20rpx;padding-left:32rpx;padding-right:32rpx}.all .trends .no-more{width:100%;display:flex;justify-content:center;font-size:28rpx;margin-bottom:35rpx}.all .trends::-webkit-scrollbar{display:none}