admin_home/src/views/chat/businessDistrictDetail.vue

<template>
    <div class="mainBox">
 
      <!--搜索功能 end------------------------------------------------------------>
      <!--表格内容 start------------------------------------------------------------>
      <div class="layerBox">
        <tableTitle :name="tableDivTitle" />
        <el-row>
          <template>
            <!-- 在此位置下面写 -->
            <div class="article-detail">
              <div class="article-card">
                <div class="article-title">
                  高都市周山镇开展渔业安全生产应急演练活动
                  <el-tag type="info" class="article-tag">科普</el-tag>
                </div>
                <div class="article-meta">
                  <span class="article-meta-item1">发布自</span>
                  <span class="article-meta-item2">发布自发布自发布自发布自发布自发布自发布自发布自发布自发布自发布自</span>
                  <el-button  class="top-button" type="primary">查看群聊</el-button>
                </div>
                <el-divider></el-divider>
                <div class="background-color">
                  <div class="article-content">
                  总有一些小故事被藏在社会安全的背后。会稍随意，这种不牢靠的能被流动，导致被拉打了。<br/>
                    ...（此处省略正文，按实际内1111111容填充）...
                  </div>
                  <div class="article-author">
 


                    <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>
                
              </div>

              <div class="comment-section">
                <div class="box_1 clearfix">
                <div class="box_in">评论:</div>
                
              </div>
               
                <div class="comment-list">

                  <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_li_name">林夏：</div> 
                       <div class="comment_li_text">
                            辣椒青菜辣椒青菜辣椒青菜辣椒青菜辣椒青菜辣椒青菜辣椒青菜辣椒青菜
                        </div> 
                       <div class="comment_li_time">2019-09-09</div> 
                  </div>  




                </div>

      <div class="alignBox">
        <el-row>
          <el-col :span="24">
            <el-pagination :current-page="getApiData.page" @size-change="handleSizeChange"
              @current-change="handleCurrentChange" :page-size="10" layout="total, prev, pager, next, jumper"
              :total="allCount"></el-pagination>
          </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>
  
  <script>
  //表格标题
  import tableTitle from './components/tableTitle';
  //引入公用样式
  import '@/styles/global.less';
  import InputTag from '@/components/InputTag'
  export default {
    components: {
      tableTitle,//表格标题
      InputTag
    },
    data() {
     
      let self = this;
      //0.全局操�� end ------------------------------------------------------------>
      return {
        isExpanded: false, // btn添加展开状态


        //1.列表和分页相关 start ------------------------------------------------------------>
        tableDivTitle: "商圈详情",
        getApiData: {
          keyword: "",//网站名称查询
          website_column_id: [],//使用网系id查询
          city_id: [],//使用城市id查询
          page: 1,//当前是第几页
          pageSize: 10,//一共多少条
        },
        allCount: 0,//总条数

        //弹出框设置 start ------------------------------------------------------------>
  
        //3.弹出框中的表单设置 start ------------------------------------------------------------>
        //3.1 表单收集的数据
        form: {
         
        },
        //3.2 表单验证规则
        formRules: {
        
        },
      
      }
    },
    methods: {
        handleSizeChange(){

        },


        handleCurrentChange(){

        },

        toggleExpand() { // 添加切换方法
            
           this.isExpanded = !this.isExpanded
        }
    },
    mounted() {
     
    }
  }
  </script>
  
  <style scoped lang="less">
   .article-detail {
    // padding: 24px;
    // background: #f5f7fa;
    min-height: 100vh;

  .article-card {
    margin-bottom: 24px;
    padding: 24px 0px;
    background: #fff;
    // border-radius: 8px;
    // box-shadow: 0 2px 8px rgba(0,0,0,0.04);

    .article-title {
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: bold;
      font-size: 28px;
      color: #333333;
      display: flex;
      align-items: center;
      .article-tag {
        background: rgba(85,112,241,0.16) !important;
        border-radius: 3px 3px 3px 3px !important;
        margin-left: 12px;
        font-size: 14px;
        height: 22px;
        line-height: 22px;
        padding: 0 10px;
        border-radius: 4px;
        font-weight: 400;
        font-size: 14px;
        color: #5570F1;
      }
    }
    .article-meta {
      margin-top: 31px;
      color: #888;
      font-size: 16px;
      display: flex;
      align-items: center;
      .article-link {
        margin-left: 12px;
      }
    }
    .article-content {
      // margin: 18px 0 12px 0;
      color: #444;
      font-size: 15px;
      line-height: 1.8;
      word-break: break-all;
    }
    .article-author {
      margin-top: 12px;
      color: #999;
      font-size: 18px;
      span {
        margin-right: 16px;
        display:block;
        line-height:30px;
      }
    }
  }

  .comment-section {
    // padding: 24px 32px;
    background: #fff;
    border-radius: 8px;
    .comment-title {
      font-weight: bold;
      font-size: 22px;
      color: #5570F1;
      // font-size: 16px;
      // font-weight: bold;
      // color: #333;
      margin-bottom: 8px;
      text-align: left;
    }
    // 蓝色短分割线，宽度10%，居中
    .el-divider {
      margin: 8px auto 16px auto;
      border: none;
      height: 0;
      width: 10%;
      min-width: 40px;
      max-width: 100px;
      border-top: 2px solid #5570F1;
      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;
        align-items: center;
        padding: 12px 0;
        border-bottom: 1px solid #f0f0f0;
        &:last-child {
          border-bottom: none;
        }
        .comment-avatar {
          width: 36px;
          height: 36px;
          margin-right: 12px;
        }
        .comment-content {
          .comment-user {
            font-size: 15px;
            color: #555;
            font-weight: 500;
          }
          .comment-time {
            font-size: 12px;
            color: #aaa;
            margin-top: 2px;
          }
        }
      }
    }
    .comment-actions {
      display: flex;
      justify-content: center;
      gap: 16px;
      margin-top: 12px;
    }
  }

  .article-meta-item1 {
    position: relative;
    padding-left: 27px;
    &::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url('http://img.bjzxtw.org.cn/master/www/admin/renwu.png') no-repeat center center;
      background-size: contain;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      margin-right: 4px;
    }
  }
  .article-meta-item2 {
    position: relative;
    padding-left: 27px;
    margin-left:40px;
    &::before {
      content: '';
      display: inline-block;
      width: 20px;
      height: 20px;
      background: url('http://img.bjzxtw.org.cn/master/www/admin/wechat.png') no-repeat center center;
      background-size: contain;
      position: absolute;
      left: 0;
      top: 50%;
      transform: translateY(-50%);
      margin-right: 4px;
    }
  }
  .top-button{
    margin-left: 30px;
  }
  .background-color{
    background: #f0f2f5;
    padding: 30px 20px;
  }
  .clearfix::after{
    content:'';
    display: block;height: 0;
    visibility: hidden;
    clear: both;
  }
  .box_1{
    border-bottom:solid 1px #E9EDF7;
    box-sizing:border-box;
  }
  .box_in{
    font-weight: bold;
    float:left;
    font-size:22px;
    color:#5570F1;
    height:33px;
    line-height:33px;
    border-bottom:solid 2px #5570F1;
    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>