businessDistrictDetail-2025-7-17

src/views/chat/businessDistrictDetail.vue

@@ -23,12 +23,36 @@
                 <div class="background-color">
                   <div class="article-content">
                   总有一些小故事被藏在社会安全的背后。会稍随意，这种不牢靠的能被流动，导致被拉打了。<br/>
-                    ...（此处省略正文，按实际内容填充）...
+                    ...（此处省略正文，按实际内1111111容填充）...
                   </div>
                   <div class="article-author">
-                    <span>作者：watzy</span>
-                    <span>链接：<el-link type="primary" :underline="false">https://zhuanlan.zhihu.com/p/189302368685709700</el-link></span>
-                    <span>来源：知乎</span>
+ 
+
+
+                    <div class="article_box">
+
+                        <div class="article_panel" :class="{'dot1': !isExpanded}">
+                            总有一些小坏蛋教唆着让大家全网找图、全网搬运，这种不负责任的低端玩法，早就过
+                            时了。 我们是通过AI工具+商用图软件，生成独一无二的商用图片/矢量图/视频，2025
+                            年，千万不要低估AI工具的力量，它让一个人干10个人的活，不是不可能。 按照我们
+                            的方法，普通人一天可生成上百张各类的商用图片/矢量图/视频，而且100%符合海外图
+                            库平台像素、尺寸、分辨率要求。 更让我们踏实的是：我们做的每一个作品上传成功
+                            到海外图库平台都能申请到自己的的独立版权。只要我们电子版权在手，平台不倒，
+                            我们的作品一直会被下载 
+                            著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处  
+                        </div>
+
+                        <span class="article_panel_btn" @click="toggleExpand">
+                          阅读全文
+                            <i class="el-icon-arrow-down" v-if="!isExpanded"></i>
+                            <i class="el-icon-arrow-up" v-else></i>
+                        </span>
+ 
+
+                    </div>
+
+
+
                   </div>
                 </div>
                 
@@ -36,31 +60,31 @@
 
               <div class="comment-section">
                 <div class="box_1 clearfix">
-                <div class="box_in">评论：</div>
+                <div class="box_in">评论:</div>
                 
               </div>
                
                 <div class="comment-list">
-                  <div class="comment-item" v-for="i in 4" :key="i">
-                    <el-avatar
-                      class="comment-avatar"
+
+                  <div class="comment_li" v-for="(per_obj,per_index) in 4" :key="per_obj">
+                          <el-avatar
+                      class="comment_li_img"
                       src="https://img.zcool.cn/community/01b8c95d5b2e5fa801216518a8b7c6.jpg"
                     />
-                    <div class="comment-content">
-                      <div class="comment-user">辣椒、青菜</div>
-                      <div class="comment-time">2024-09-01 13:21:23</div>
-                    </div>
-                  </div>
-                </div>
-                <div class="comment-actions">
-                  <el-button>返回</el-button>
-                  <el-button type="primary">查看群聊</el-button>
+
+                        
+                       <div class="comment_li_name">林夏：</div> 
+                       <div class="comment_li_text">
+                            辣椒青菜辣椒青菜辣椒青菜辣椒青菜辣椒青菜辣椒青菜辣椒青菜辣椒青菜
+                        </div> 
+                       <div class="comment_li_time">2019-09-09</div> 
+                  </div>  
+
+
+
+
                 </div>
-              </div>
-            </div>
-          </template>
-        </el-row>
-      </div>
+
       <div class="alignBox">
         <el-row>
           <el-col :span="24">
@@ -70,6 +94,17 @@
           </el-col>
         </el-row>
       </div>
+      
+                <div class="comment-actions">
+                  <el-button>返回</el-button>
+                  <el-button type="primary">查看群聊</el-button>
+                </div>
+              </div>
+            </div>
+          </template>
+        </el-row>
+      </div>
+
     </div>
   </template>
   
@@ -89,6 +124,9 @@
       let self = this;
       //0.全局操�� end ------------------------------------------------------------>
       return {
+        isExpanded: false, // btn添加展开状态
+
+
         //1.列表和分页相关 start ------------------------------------------------------------>
         tableDivTitle: "商圈详情",
         getApiData: {
@@ -115,7 +153,19 @@
       }
     },
     methods: {
-     
+        handleSizeChange(){
+
+        },
+
+
+        handleCurrentChange(){
+
+        },
+
+        toggleExpand() { // 添加切换方法
+            
+           this.isExpanded = !this.isExpanded
+        }
     },
     mounted() {
      
@@ -177,9 +227,11 @@
     .article-author {
       margin-top: 12px;
       color: #999;
-      font-size: 13px;
+      font-size: 18px;
       span {
         margin-right: 16px;
+        display:block;
+        line-height:30px;
       }
     }
   }
@@ -210,7 +262,22 @@
       border-radius: 2px;
       background: transparent;
     }
+
+ 
+
     .comment-list {
+        margin-top:40px;
+
+        .comment_li{background:#FAFAFA;border:solid 1px #E1E1E1;overflow:hidden;margin-bottom:20px;}
+        .comment_li_img{float:left;width:52px;height:52px;border-radius:50%;margin:30px 0px 30px 30px;}
+        .comment_li_name{float:left;margin:44px 0px 44px 20px;color:#333;font-size:16px;line-height:24px;}
+        .comment_li_text{float:left;margin:45px 0px 11px 20px;color:#333;font-size:16px;line-height:24px;
+                            font-weight:bold;width:1000px; }
+        .comment_li_time{float:right;margin:44px 30px 44px 0px;color:#999;font-size:16px;line-height:24px; }
+
+
+
+
       margin-bottom: 16px;
       .comment-item {
         display: flex;
@@ -241,7 +308,7 @@
     }
     .comment-actions {
       display: flex;
-      justify-content: flex-end;
+      justify-content: center;
       gap: 16px;
       margin-top: 12px;
     }
@@ -310,5 +377,21 @@
     margin-bottom:-1px;
   }
 }
+
+.article_box{margin-top:11;overflow:hidden;}
+.article_panel{float:left;width:800px;font-size:18px;line-height:30px;}
+.article_panel_btn{float:left;color: #6A82F3;cursor:pointer;}
+ 
+.dot1{word-break: keep-all; white-space: nowrap;overflow:hidden;text-overflow:ellipsis;
+ 
+
+}
+
+
+
+
+
+
+
 </style>