circle-card

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

@@ -372,4 +372,398 @@
             }
         }
     }
+}
+.trends-two{
+    width: 685rpx;
+    margin-bottom: 20rpx;
+    border-bottom: grey solid 1px;
+    padding-left: 10rpx;
+    padding-right: 10rpx;
+    padding-bottom: 20rpx;
+    padding-top: 20rpx;
+    color: #333333;
+    border-radius: 15rpx;
+    background-color: white;
+    font-family: MicrosoftYaHei;
+    .namebax{
+        width: 100%;
+        height: 105rpx;
+        display: flex;
+        align-items: center;
+        image{
+            width: 105rpx;
+            height: 105rpx;
+            border-radius: 50%;
+        }
+        .name{
+            margin-left: 10rpx;
+            font-family: MicrosoftYaHei;
+            font-size: 28rpx;
+            color: #333333;
+        }
+        .guanzhu{
+            width: 85rpx;
+            height: 35rpx;
+            margin-left: auto;
+            display: flex;
+            align-items:center ;
+            justify-content: center;
+            font-family: MicrosoftYaHei;
+            font-size: 20rpx;
+            color: #3C3C3C;
+            border: solid 2rpx #3C3C3C;
+            border-radius: 40rpx;
+        }
+    }
+    .text{
+        width: 100%;
+        font-size: 26rpx;
+        margin-top: 50rpx;
+        .quanwen{
+            font-size: 26rpx;
+            color: #CDCDD2;
+            margin-top: 20rpx;
+        }
+    }
+    .picture{
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 30rpx;
+        justify-content: space-between;
+        .image{
+            width: 210rpx;
+            height: 210rpx;
+            // margin-right: 10rpx;
+            // margin-bottom: 10rpx;
+            border-radius: 15rpx;
+        }
+    }
+    .picture5 {
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 30rpx;
+        
+        .image {
+            width: 175rpx;
+            height: 175rpx;
+        }
+    
+        .image-wrapper {
+            margin-right: 10rpx;
+            position: relative;
+        }
+    
+        .image-wrapper:nth-of-type(3n) {
+            margin-right: 0; /* 每行的最后一张图片不需要右边距 */
+        }
+    
+        .more-images {
+            position: absolute;
+            bottom: 10rpx;
+            right: 0rpx;
+            background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
+            color: white;
+            font-size: 26px;
+            width: 175rpx;
+            height: 175rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+    }
+    .picture2{
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        margin-top: 30rpx;
+        .image{
+            width: 240rpx;
+            height: 240rpx;
+            margin-right: 20rpx;
+            margin-bottom: 10rpx;
+        }
+    }
+    .picture4{
+        width: 100%;
+        display: flex;
+        flex-wrap: wrap;
+        margin-top: 30rpx;
+    
+        .image{
+            width: 230rpx;
+            height: 230rpx;
+            margin-right: 10rpx;
+            margin-bottom: 10rpx;
+            object-fit: cover;
+        }
+        .image:nth-child(2n) {
+            margin-right: 0; /* 每行的最后一张图片不需要右边距 */
+        }
+    }
+    .picture3{
+        width: 100%;
+        display: flex;
+        justify-content: center;
+        flex-wrap: wrap;
+        margin-top: 30rpx;
+        .image{
+            margin-right: 10rpx;   
+            margin-bottom: 10rpx;
+        }
+        .image-portrait {
+            width: 332rpx; /* 竖屏图片的宽度 */
+            height: 425rpx;
+        }
+    
+        .image-landscape {
+            width: 442rpx; /* 横屏图片的宽度 */
+            height: 300rpx;
+
+        }
+    }
+    
+    .timebox{
+        width: 100%;
+        height: 80rpx;
+        padding-left: 90rpx;
+        margin-bottom: 20rpx;
+        display: flex;
+        align-items: center;
+        position: relative;
+        .time-box{
+            width: 85%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            .time{
+                font-size: 30rpx;
+                margin-right: 20rpx;
+            }
+        }
+        .functionbox{
+            width: 280rpx;
+            height: 80rpx;
+            background-color: black;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: absolute;
+            right: 99rpx;
+            border-radius: 10rpx;
+            .function{
+                width: 100%;
+                display: flex;
+                color: white;
+                justify-content: center;
+                .function1{
+                    width: 48%;
+                    display: flex;
+                    justify-content: center;
+                    color: white;
+                    .text2{
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        font-size: 28rpx;
+                        margin-left: 12rpx;
+                    }
+                }
+            }
+        }
+        .point{
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 70rpx;
+            height: 40rpx;
+            border-radius: 10rpx;
+            background-color: #efefef;
+            color: #506692;
+            font-size: 50rpx;
+            margin-left: auto;
+        }
+
+    }
+    .chinkinbox{
+        padding-top: 10rpx;
+        padding-bottom: 10rpx;
+        margin-left: 90rpx;
+        display: flex;
+        background-color: #efefef;
+        align-items: center;
+        padding-left: 18rpx;
+        flex-wrap: wrap;
+        .chickname{
+            font-size: 30rpx;
+            margin-left: 8rpx;
+        }
+    }
+    .sending{
+        background-color: #efefef;
+        display: flex;
+        padding-top: 20rpx;
+        padding-left: 20rpx;
+        width: 100%;
+        height: 80rpx;
+        position: relative;
+        .textarea{
+            background-color: white;
+            width: 600rpx;
+            border-radius: 15rpx;
+            padding-left: 12rpx;
+        }
+        .button{
+            position: absolute; /* 设置为绝对定位 */
+            bottom: 18rpx; /* 距离底部10rpx */
+            right: 10rpx; /* 距离右侧10rpx */
+            width: 100rpx;
+            height: 50rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28rpx;
+            background-color: #29b129;
+            margin-left: 10rpx;
+            border-radius: 15rpx;
+            color: white;
+
+        }
+        .button2{
+            position: absolute; /* 设置为绝对定位 */
+            bottom: 18rpx; /* 距离底部10rpx */
+            right: 10rpx; /* 距离右侧10rpx */
+            width: 100rpx;
+            height: 50rpx;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 28rpx;
+            background-color: white;
+            margin-left: 10rpx;
+            border-radius: 15rpx;
+            color: gray;
+            border: gray solid 1px;
+        }
+    }
+    .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;
+        padding-right: 10rpx;
+        .comment{
+            width: 100%;
+            padding-top: 10rpx;
+            padding-bottom: 10rpx;
+            flex-wrap: wrap;
+            flex: 1; /* 允许内容占用剩余空间 */
+            white-space: normal; /* 允许内容换行 */
+            overflow-wrap: break-word; /* 处理长单词的换行 */
+            position: relative;
+            .delete{
+                width: 100rpx;
+                height: 50rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: white;
+                position: absolute;
+                top: -40rpx;
+                left: 50%;
+                z-index: 99;
+            }
+        }
+        .comment2{
+            background-color: #bfbebe;
+            width: 100%;
+            padding-top: 10rpx;
+            padding-bottom: 10rpx;
+            flex-wrap: wrap;
+            flex: 1; /* 允许内容占用剩余空间 */
+            white-space: normal; /* 允许内容换行 */
+            overflow-wrap: break-word; /* 处理长单词的换行 */
+            position: relative;
+
+            .delete{
+                width: 100rpx;
+                height: 50rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: white;
+                position: absolute;
+                top: -40rpx;
+                left: 50%;
+                z-index: 99;
+            }
+        }
+    }
+    .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;
+        padding-right: 10rpx;
+        .comment{
+            width: 100%;
+            padding-top: 10rpx;
+            padding-bottom: 10rpx;
+            flex-wrap: wrap;
+            flex: 1; /* 允许内容占用剩余空间 */
+            white-space: normal; /* 允许内容换行 */
+            overflow-wrap: break-word; /* 处理长单词的换行 */
+            position: relative;
+            .delete{
+                width: 100rpx;
+                height: 50rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: white;
+                position: absolute;
+                top: -40rpx;
+                left: 50%;
+                z-index: 99;
+            }
+        }
+        .comment2{
+            background-color: #bfbebe;
+            width: 100%;
+            padding-top: 10rpx;
+            padding-bottom: 10rpx;
+            flex-wrap: wrap;
+            flex: 1; /* 允许内容占用剩余空间 */
+            white-space: normal; /* 允许内容换行 */
+            overflow-wrap: break-word; /* 处理长单词的换行 */
+            position: relative;
+            .delete{
+                width: 100rpx;
+                height: 50rpx;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                background-color: white;
+                position: absolute;
+                top: -40rpx;
+                left: 50%;
+                z-index: 99;
+            }
+        }
+    }
 }

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

@@ -1,17 +1,114 @@
 <!--nova-werun/components/circle-card/index.wxml-->
-<view class="trends-one" bindtouchstart="onTouchStart" wx:if="{{objectId}}">
+<view class="trends-one" bindtouchstart="onTouchStart" wx:if="{{objectId&&type=='detail'}}">
     <!-- 详细-->
     <view wx:if="{{type=='detail'}}" class="namebax">
         <image src="{{cicleList[0].profile.user.avatar}}"></image>
         <view class="name">{{cicleList[0].profile.user.nickname}}</view>
     </view>
     <view class="text" wx:if="{{type=='detail'}}">{{cicleList[0].content}}</view>
+    <!-- 图片 -->
+    <!-- 4张图片 -->
+    <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张图片 -->
+
+    <block wx:if="{{ type=='detail'}}">
+        <view class="picture" wx:if="{{images.length>4   || images.length==3 }}">
+            <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+        </view>
+    </block>
+
+    <!-- 2张图片 -->
+    <view class="picture2" wx:if="{{images.length==2}}">
+        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
+    </view>
+    <!-- 1张图片 -->
+    <view class="picture3" wx:if="{{images.length==1}}">
+        <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="{{imageclass}}" wx:for="{{images}}" src="{{item}}" bindload="onImageLoad"> </image>
+    </view>
     <!--  -->
+    <view class="timebox">
+        <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' />
+            <van-dialog id="van-dialog" showCancelButton message='你确认要删除吗' show="{{ showconfirm }}" bind:cancel='cancleconfirm' bind:confirm='clickconfirm' />
+        </view>
+        <!-- 点赞评论 -->
+        <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" />
+                    <view class="text2">赞</view>
+                </view>
+                <view class="function1" wx:if="{{isclick}}" bindtap="isclick">
+                    <van-icon name="like" color='red' />
+                    <view class="text2">取消</view>
+                </view>
+                |
+                <view class="function1" bindtap="showPopup">
+                    <van-icon name="chat-o" />
+                    <view class="text2">评论</view>
+                </view>
+            </view>
+        </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;">
+                <textarea placeholder="{{commenttext}}" class="textarea" style="height: {{textareaHeight}}rpx;" bindinput="onInput" value="{{inputValue}}"></textarea>
+                <view class="button2" wx:if="{{!inputValue}}">发送</view>
+                <view class="button" wx:if="{{inputValue}}" bindtap="sendComment">发送</view>
+            </view>
+
+        </van-popup>
+    </view>
+    <!-- 点赞人 -->
+    <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 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>{{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: #072d79;">{{item.comment.user.nickname}}</span>
+                :
+                <span>{{item.content}}</span>
+                <view wx:if="{{item.showdeletid}}" class="delete" bindtap="deletecomment" data-id="{{item.objectId}}">删除</view>
+            </view>
+        </block>
+
+    </view>
+</view>
+
+<view class="trends-two" bindtouchstart="onTouchStart" wx:if="{{objectId&&type=='surface'}}">
+    <!--主页  -->
     <view class="namebax" wx:if="{{type=='surface'}}" bindtap="gourl" data-url="../../pages/circle/circle-detail/index" data-id="{{cicleList[0].objectId}}">
         <image src="{{cicleList[0].profile.user.avatar}}"></image>
         <view class="name">{{cicleList[0].profile.user.nickname}}</view>
+        <view class="guanzhu">
+            <van-icon name="plus" size='24rpx' />
+            关注
+        </view>
+    </view>
+    <view wx:if="{{type=='surface'}}" class="text" bindtap="gourl" data-url="../../pages/circle/circle-detail/index" data-id="{{cicleList[0].objectId}}">{{cicleList[0].content}}
+        <view class="quanwen">查看全文</view>
     </view>
-    <view wx:if="{{type=='surface'}}" class="text" bindtap="gourl" data-url="../../pages/circle/circle-detail/index" data-id="{{cicleList[0].objectId}}">{{cicleList[0].content}}</view>
+
     <!-- 图片 -->
     <!-- 4张图片 -->
     <view class="picture4" wx:if="{{images.length==4}}">
@@ -24,12 +121,6 @@
         </view>
     </block>
 
-    <block wx:if="{{ type=='detail'}}">
-        <view class="picture" wx:if="{{images.length>4   || images.length==3 }}">
-            <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="image" wx:for="{{images}}" src="{{item}}"> </image>
-        </view>
-    </block>
-
     <!-- 9张以上图片 -->
     <view class="picture5" wx:if="{{images.length > 9 && type=='surface'}}">
         <view wx:for="{{images}}" wx:if="{{index < 9}}">
@@ -48,15 +139,16 @@
     <view class="picture3" wx:if="{{images.length==1}}">
         <image mode="scaleToFill" bindtap="previewImage" data-index="{{index}}" class="{{imageclass}}" wx:for="{{images}}" src="{{item}}" bindload="onImageLoad"> </image>
     </view>
-    <!--  -->
+
     <view class="timebox">
+        <!-- 展示时间 -->
         <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='20' />
             <van-dialog id="van-dialog" showCancelButton message='你确认要删除吗' show="{{ showconfirm }}" bind:cancel='cancleconfirm' bind:confirm='clickconfirm' />
         </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" />
@@ -72,9 +164,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;">
@@ -86,14 +179,14 @@
         </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}}">
@@ -114,4 +207,5 @@
         </block>
 
     </view>
+
 </view>

nova-werun/components/circle/index.js

@@ -20,7 +20,7 @@ Component({
         bottomNavHeight: 0, // 底部导航栏高度
         contentHeight: 0, // 可用内容高度
         contentpadding: 0, //顶部padding高度
-
+        navheight:0,//nav栏高度
         //朋友圈
         cardList: [],
 
@@ -45,12 +45,14 @@ Component({
             const customHeight = custom.height + 10 + 2 || 0;
             const bottomNavHeight = systemInfo.screenHeight - systemInfo.safeArea.bottom || 0;
             const contentHeight = (screenHeight - 50 - bottomNavHeight - statusBarHeight - customHeight) * 750 / systemInfo.windowWidth;
+            const navheight = (statusBarHeight+customHeight) * 750 / systemInfo.windowWidth;
             this.setData({
                 statusBarHeight,
-                screenHeight,
+                screenHeight:(screenHeight-50-bottomNavHeight) * 750 / systemInfo.windowWidth,
                 customHeight,
                 bottomNavHeight,
-                contentHeight
+                contentHeight,
+                navheight
             });
             // console.log('123', contentHeight);
             this.iddepe()

nova-werun/components/circle/index.less

@@ -3,10 +3,137 @@
 .all{
         width: 100vw;
         position: relative;
+        background: linear-gradient(to bottom, #4F9AF7, #FFFFFF); /* 竖直渐变 */
+        .navbox{
+            width: 100vw;
+            display: flex;
+            align-items: flex-end;
+            .nav{
+                width: 100%;
+                display: flex;
+                justify-content: center;
+                position: relative;
+                margin-bottom: 20rpx;
+                height: 40rpx;
+                image{
+                    position: absolute;
+                    left: 38rpx;
+                    top: 8rpx;
+                    width: 44rpx;
+                    height: 35rpx;
+                }
+                .nav-title{
+                    height: 36rpx;
+                    font-family: MicrosoftYaHei;
+                    font-size: 36rpx;
+                    color: #333333;
+                    line-height: 40rpx;
+                    text-align: center;
+                }
+            }
+        }
+
         .trends{
             width: 100%;
             border-top: grey solid 1px;
             padding-top: 20rpx;
+            padding-left: 32rpx;
+            padding-right: 32rpx;
+            .activebox{
+                width: 685rpx;
+                height: 488rpx;
+                padding: 15rpx;
+                background-color: white;
+                border-radius: 20rpx;
+                box-shadow: 0 8rpx 4rpx #DEE1E6;
+                margin-bottom: 20rpx;
+                .titlebox{
+                    width: 100%;
+                    height: 36rpx;
+                    display: flex;
+                    align-items: center;
+                    border-left: #58A5FE 8rpx solid;
+
+                    .title{
+                        font-family: MicrosoftYaHei;
+                        font-size: 30rpx;
+                        color: #333333;
+                        margin-left: 10rpx;
+                    }
+                    .alltitlebox{
+                        height: 20rpx;
+                        display: flex;
+                        align-items: center;
+                        margin-left: auto;
+                        .all-text{
+                            font-family: MicrosoftYaHei;
+                            font-size: 20rpx;
+                            color: #333333;
+                        }
+
+                        image{
+                            width: 14rpx;
+                            height: 20rpx;
+                            margin-left: 10rpx;
+                        }
+                    }
+                }
+                .acbox{
+                    width: 100%;
+                    height: 177rpx;
+                    margin-top: 20rpx;
+                    display: flex;
+                    .ac-picbox{
+                        width: 310rpx;
+                        height: 177rpx;
+                        position: relative;
+                        image{
+                            width: 310rpx;
+                            height: 177rpx;
+                            border-radius: 20rpx;
+                        }
+                        .picbox{
+                            width: 100rpx;
+                            height: 44rpx;
+                            display: flex;
+                            justify-content: center;
+                            align-items: center;
+                            background-image: url(https://file-cloud.fmode.cn/qpFbRRSZrO/20241224/u1uhl1104441535.png);
+                            background-position: center; /* 背景图片居中 */
+                            background-size: cover; /* 背景图片覆盖整个元素 */
+                            background-repeat: no-repeat; /* 不重复背景图片 */
+                            position: absolute;
+                            bottom: 0rpx;
+                            right: 0rpx;
+                            .pic-tex{
+                                font-family: MicrosoftYaHei;
+                                font-size: 18rpx;
+                                color: #FFFEFE;
+                            }
+                        }
+                    }
+                }
+                .paihangbox{
+                    width: 662rpx;
+                    height: 185rpx;
+                    display: flex;              /* 使用 Flexbox 布局 */
+                    // justify-content: space-between; /* 均匀分布 */
+                    justify-content: center;
+                    align-items: center;
+                    border-radius: 20rpx;
+                    margin-top: 26rpx;
+                    background-color: #5CD0F9;
+                    .image1{
+                        width: 242rpx;
+                        height: 147rpx;
+                        margin-right: 53rpx;
+                    }
+                    .image2{
+                        width: 270rpx;
+                        height: 138rpx;
+                    }
+                }
+            }
             .no-more{
                 width: 100%;
                 display: flex;

nova-werun/components/circle/index.wxml

@@ -1,13 +1,48 @@
 <!--nova-werun/components/circle/index.wxml-->
-<nav type="title" background-color="{{'#87ceeb'}}" front-color="{{'#ffffff'}}"></nav>
-<view class="all" style="height: {{contentHeight}}rpx;">
+<!-- <circle-nav type="back" bind:iconClick='gourl' title='步小圈' background-color="{{'#72AEF9'}}" front-color="{{'#333333'}}"></circle-nav> -->
+<view class="all" style="height: {{screenHeight}}rpx;">
+    <view class="navbox" style="height: {{navheight}}rpx;">
+        <view class="nav">
+            <image bindtap="gourl" data-url="../../pages/circle/send-circle/index" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241223/83a1pf052319260.png?imageView2/1/w/200/h/200"></image>
+            <view class="nav-title">步小圈</view>
+        </view>
+    </view>
     <scroll-view class="trends" scroll-y="true" bindscrolltolower="loadMoreData" style="height: {{contentHeight}}rpx;">
+        <view class="activebox">
+            <view class="titlebox">
+                <view class="title">热门活动</view>
+                <view class="alltitlebox">
+                    <view class="all-text">全部活动</view>
+                    <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241224/1llau7102344568.png?imageView2/1/w/200/h/200"></image>
+                </view>
+            </view>
+            <view class="acbox">
+                <view class="ac-picbox">
+                    <image src="https://x0.ifengimg.com/ucms/2023_15/A8CBFF6F127F5A78C0AC395C85ECCCD45E626751_size2951_w5659_h3577.jpg"></image>
+                    <view class="picbox">
+                        <view class="pic-tex">立即报名</view>
+                    </view>
+                </view>
+                <view class="ac-picbox" style="margin-left: auto;">
+                    <image src="https://x0.ifengimg.com/ucms/2023_15/A8CBFF6F127F5A78C0AC395C85ECCCD45E626751_size2951_w5659_h3577.jpg"></image>
+                    <view class="picbox">
+                        <view class="pic-tex">立即报名</view>
+                    </view>
+                </view>
+
+            </view>
+            <view class="paihangbox">
+                <image class="image1" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241224/381pe6105828873.png"></image>
+                <image class="image2" src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241224/4cg1l0105931021.png"></image>
+            </view>
+        </view>
+
         <block wx:for="{{cardList}}" wx:key="{{item.objectId}}">
             <circle-card objectId='{{item.objectId}}' type='surface'></circle-card>
         </block>
         <view wx:if="{{noMoreItems}}" class="no-more">没有更多动态了</view>
     </scroll-view>
-    <view class="publishbox" bindtap="gourl" data-url="../../pages/circle/send-circle/index">
+    <!-- <view class="publishbox" bindtap="gourl" data-url="../../pages/circle/send-circle/index">
         <image src="https://file-cloud.fmode.cn/qpFbRRSZrO/20241105/8qes51030838243.png?imageView2/1/w/200/h/200"></image>
-    </view>
+    </view> -->
 </view>