小记者列表

src/components/Upload.vue

@@ -7,7 +7,6 @@
       class="upload-demo"
       :action="url"
       :on-preview="handlePreview"
-      multiple
       :limit="filleNumber ? filleNumber : 1"
       :before-upload="handlebeforeUpload"
       :on-exceed="handleExceed"
@@ -17,6 +16,7 @@
       :before-remove="beforeRemove"
       :on-remove="handleRemove"
       :show-file-list="showList?false:true"
+      :headers="{ 'Content-Type': 'multipart/form-data'}"
     >
       <template v-if="styleType==='upload'">
         <div class="upload-style">
@@ -110,17 +110,19 @@ export default {
   activated() {},
   // 方法集合
   methods: {
-    handleChange(file, fileList) {},
+    handleChange(file, fileList) {
+    },
     handleSuccess(response, file, fileList) {
+        console.log(response)
       if (response.status == 1) {
         response.duration = response.file_info_list[0].media_duration
           ? response.file_info_list[0].media_duration
           : 10;
         this.$message.success("用户上传成功");
         if(this.fileName){
-            this.changeFillId(fileList, this.fileName);
+            this.changeFillId(fileList, this.fileName,file);
         }else{
-            this.changeFillId(fileList);
+            this.changeFillId(fileList,file);
         }
         this.loading.close();
       } else {
@@ -135,7 +137,7 @@ export default {
           this.$message.warning('上传图片大小不能超过2M');
           return false; // 必须返回false
         }
-      } else if (this.uploadType === 'mp4') {
+      } else if (this.uploadType === 'mp4'||this.uploadType==='image/video') {
         if (file.size > 500 * 1024 * 1024) {
           this.$message.warning('上传视频大小不能超过500M');
           return false; // 必须返回false
@@ -208,7 +210,12 @@ export default {
           this.uploadName = name + "lrc";
           this.uploadTip = "只能上传lrc文件，大小不超过20MB"
           break;
-
+        case "image/video":
+          this.accept = ".jpg, .JPG, .jpeg, .JPEG .png, .PNG,video/*";
+          this.fileTypeName = "";
+          this.uploadName = "";
+          this.uploadTip = "只能上传图片和视频，大小㾗超过500M"
+          break;
         default:
           this.accept = "*";
           this.fileTypeName = "文件";

src/icons/svg/chat-line.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="chat-1-line">
+<path id="Vector" d="M6.66658 2H9.33325C12.2788 2 14.6666 4.38781 14.6666 7.33333C14.6666 10.2789 12.2788 12.6667 9.33325 12.6667V15C5.99992 13.6667 1.33325 11.6667 1.33325 7.33333C1.33325 4.38781 3.72107 2 6.66658 2ZM7.99992 11.3333H9.33325C11.5424 11.3333 13.3333 9.54247 13.3333 7.33333C13.3333 5.12419 11.5424 3.33333 9.33325 3.33333H6.66658C4.45745 3.33333 2.66659 5.12419 2.66659 7.33333C2.66659 9.74 4.30797 11.3104 7.99992 12.9865V11.3333Z" fill="currentColor"/>
+</g>
+</svg>

src/icons/svg/eye.svg

@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="interactive-button/eye">
+<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M1.43357 7.64874C3.27649 4.67588 5.45362 3 8.00019 3C10.5468 3 12.7239 4.67588 14.5668 7.64874L14.7846 8L14.5668 8.35126C12.7239 11.3241 10.5468 13 8.00019 13C5.45362 13 3.27649 11.3241 1.43357 8.35126L1.21582 8L1.43357 7.64874ZM2.79042 8C4.46167 10.5552 6.20855 11.6667 8.00019 11.6667C9.79183 11.6667 11.5387 10.5552 13.21 8C11.5387 5.44478 9.79183 4.33333 8.00019 4.33333C6.20855 4.33333 4.46167 5.44478 2.79042 8ZM8.00019 7C7.44791 7 7.00019 7.44772 7.00019 8C7.00019 8.55229 7.44791 9 8.00019 9C8.55248 9 9.00019 8.55229 9.00019 8C9.00019 7.44772 8.55248 7 8.00019 7ZM5.66686 8C5.66686 6.71134 6.71153 5.66667 8.00019 5.66667C9.28886 5.66667 10.3335 6.71134 10.3335 8C10.3335 9.28866 9.28886 10.3333 8.00019 10.3333C6.71153 10.3333 5.66686 9.28866 5.66686 8Z" fill="currentColor"/>
+</g>
+</svg>

src/views/bookShelf/courseDetail.vue

@@ -13,14 +13,14 @@
             <p>{{info.name}}</p>
         </div>
         <div class="navBar-right">
-            <a @click="handleShare">
+            <!-- <a @click="handleShare">
                 <svg-icon icon-class="share-personal" className="icon-share"></svg-icon>
                 <span>分享</span>
             </a>
             <a @click="handlelike">
                 <svg-icon icon-class="like-line" className="icon-like"></svg-icon>
                 <span>收藏</span>
-            </a>
+            </a> -->
         </div>
     </div>
     <div class="main">

src/views/reporter/components/PublishReport.vue

@@ -0,0 +1,274 @@
+<template>
+  <div class="publish-report">
+    <el-input
+        placeholder="输入标题"
+        v-model="title" maxlength="100" @blur="handleTrim('title')">
+    </el-input>
+    <el-divider></el-divider>
+    <el-input type="textarea" v-model="content" placeholder="输入正文" maxlength="500" :rows="6" show-word-limit @blur="handleTrim('content')"></el-input>
+    <el-divider></el-divider>
+    <p class="title">标签</p>
+    <el-select
+        v-model="tabsList"
+        multiple
+        filterable
+        allow-create
+        default-first-option
+        placeholder="输入标签">
+        <el-option
+            v-for="item in labelExamples"
+            :key="item"
+            :label="item"
+            :value="item">
+        </el-option>
+    </el-select>
+    <p class="title">标签</p>
+    <div class="file-list">
+        <upload :datafileList="fileList" :changeFillId="handleAvatarSuccess" :showList="true" uploadType="image/video" :filleNumber="6" :styleType="'upload'" :tips="' '" class="file-upload"/>
+        <div class="file-item" :class="[itemf.type==='mp4'?'file-item-mp4':'']" v-for="(itemf,indexf) in fileList" :key="indexf" @mouseover="itemf.coverFlag = true" @mouseout="itemf.coverFlag = false">
+            <template v-if="itemf.type==='img'">
+                <el-image class="image"
+                :src="itemf.url"
+                :fit="'contain'" style="width:80px;height:80px;"></el-image>
+            </template>
+            <template v-else>
+                <svg-icon icon-class="mp4"></svg-icon>
+            </template>
+            <p v-show="itemf.coverFlag"><svg-icon icon-class="eye" @click="handlePreview(indexf)"></svg-icon><i class="el-icon-delete" @click="handleDeleteFile('cover',indexf)"></i></p>
+        </div>
+    </div>
+    <el-divider></el-divider>
+    <div class="btn-box">
+        <el-button @click="onCancel" size="small">取消</el-button>
+        <el-button type="primary" @click="onSubmitEmail" size="small" :loading="passwordLoading">发布</el-button>
+    </div>
+    <el-dialog
+        :visible.sync="resourceFlag"
+        :show-close="true"
+        :close-on-click-modal="false"
+        :modal-append-to-body="false"
+        width="1000px"
+        class="login-dialog"
+        v-if="resourceFlag">
+        <iframe
+          :src="resourceUrl"
+          width="100%"
+          height="600px"
+        ></iframe>
+    </el-dialog>
+
+  </div>
+</template>
+
+<script>
+import { getLogin } from "@/api/ajax";
+import Upload from "@/components/Upload.vue"
+import { mapState } from 'vuex';
+const Base64 = require("js-base64").Base64;
+export default {
+  components: {Upload},
+  name: "publishReport",
+  props: [],
+  data() {
+    return {
+      title: '',
+      content:'',
+      tabsList:[],
+      fileIdList:[],
+      fileList:[],
+      labelExamples:['中英双语','少儿必读','3-6 岁'],
+      resourceUrl: '', // 课节资源预览地址
+      resourceFlag: false,
+      passwordLoading: false
+    };
+  },
+  watch: {},
+  computed: {
+    ...mapState(['file_preview_url']),
+  },
+  methods: {
+    // 去掉前后空格
+    handleTrim(fild){
+        this[fild] = this[fild].trim()
+    },
+    handleAvatarSuccess(fileList,file) {
+        // console.log(file)
+        // fileList.forEach(item => {
+            if(file.response&&file.response.file_info_list&&file.response.file_info_list[0]){
+                let index = file.name.lastIndexOf('.');
+                let type = file.name.substring(index + 1).toLowerCase()
+                let obj = {
+                    url: file.response.file_info_list[0].file_url,
+                    type: this.handleJudgeType(type),
+                    coverFlag: false
+                }
+                this.fileIdList.push(file.response.file_info_list[0].file_id)
+                this.fileList.push(obj)
+            }
+            console.log(this.fileList)
+        // });
+        
+    },
+    // 判断文件类型
+    handleJudgeType(type){
+        let finalType = ''
+        if(type==='avi'||type==='wmv'||type==='mpeg'||type==='mov'||type==='mp4'){
+            finalType = 'mp4'
+        }else{
+            finalType = 'img'
+        }
+        return finalType
+    },
+    handleDeleteFile(item,i) {
+        this.$confirm("确定删除吗?", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+        }).then(() => {
+            this.fileIdList.splice(i, 1);
+            this.fileList.splice(i, 1);
+        });
+    },
+    // 预览文件
+    handlePreview(index){
+        let MethodName = '/FileServer/GetFileInfo'
+        let data = {
+            file_id: this.fileIdList[index]
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            if(res.status===1){
+                let path =
+                `${this.file_preview_url}/onlinePreview?url=` +
+                Base64.encode(res.file_url);
+                this.resourceUrl = path;
+                this.resourceFlag = true
+            }
+        })
+    },
+    onCancel(){
+        this.$emit('closeDialog')
+    },
+    onSubmitEmail(){
+        this.passwordLoading = true
+        let MethodName = '/PaperServer/Client/Xjz/XjzArticleAdd'
+        let data = {
+            res_file_ids: this.fileIdList,
+            art_title: this.title,
+            art_tags: this.tabsList,
+            art_content: this.content
+        }
+        getLogin(MethodName, data)
+        .then((res) => {
+            this.passwordLoading = false
+            if(res.status===1){
+                this.$message.success('发布成功')
+                this.$emit('closeDialog')
+            }
+        }).catch(()=>{
+            this.passwordLoading = false
+        })
+    }
+  },
+  created() {
+  },
+  mounted() {
+  },
+  beforeDestroy() {
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.el-divider{
+    margin: 8px 0;
+}
+.title{
+    color: #000;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 20px;
+    margin: 0 0 8px 0;
+}
+.el-select{
+    width: 100%;
+    min-height: 28px;
+}
+.file-list{
+    display: flex;
+    flex-flow: wrap;
+    .file-upload{
+        width: 80px;
+        height: 80px;
+        overflow: hidden;
+    }
+    .file-item{
+        width: 80px;
+        height: 80px;
+        margin-left: 8px;
+        text-align: center;
+        line-height: 80px;
+        position: relative;
+        &-mp4{
+            border: 1px dashed #E5E6EB;
+        }
+        p{
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            height: 80px;
+            line-height: 80px;
+            font-size: 16px;
+            text-align: center;
+            cursor: pointer;
+            background: rgba(29, 33, 41, 0.60);
+            color: #fff;
+            margin: 0;
+            .svg-icon{
+                margin-right: 16px;
+                width: 16px;
+                height: 16px;
+            }
+        }
+    }
+}
+.btn-box{
+    text-align: right;
+    .el-button{
+        width: 108px;
+        text-align: center;
+        border-radius: 40px;
+    }
+}
+</style>
+<style lang="scss">
+.publish-report{
+    .el-textarea__inner{
+        border: none;
+        padding: 0 2px;
+        font-size: 14px;
+        color: #000;
+    }
+    .el-input__inner{
+        padding: 0 2px;
+        line-height: 24px;
+        height: 24px;
+        font-size: 16px;
+        color: #000;
+    }
+    .el-select__tags{
+        max-width: 90% !important;
+        height: 28px;
+    }
+    .el-select__input{
+        margin: 0;
+    }
+    .upload-style{
+        width: 80px;
+        height: 80px;
+        line-height: 30px;
+    }
+}
+
+</style>

src/views/reporter/index.vue

@@ -6,10 +6,25 @@
       :userBg="'rgba(0, 0, 0, 0.24)'"
       :LoginNavIndex="4"
     />
-    <ul class="option">
+    <!-- <ul class="option">
         <li class="option-item" :class="[typeValue===indexo?'active':'']" v-for="(itemo,indexo) in optionList" :key="indexo" @click="handleClick(indexo)">
             <span>{{itemo.label}}</span>
         </li>
+    </ul> -->
+    <div class="content-top">
+        <img src="../../assets/reporter-logo.png" />
+        <el-input
+            placeholder="搜索"
+            v-model="searchInput" maxlength="100">
+            <i slot="suffix" class="el-input__icon el-icon-search" @click="getData(1)" style="cursor: pointer;"></i>
+        </el-input>
+        <!-- <span></span> -->
+        <el-button type="primary" @click="changePublist" size="small">发布</el-button>
+    </div>
+    <ul>
+        <li class="label-item" :class="[labelActiveIndex===indexL?'active':'']" v-for="(itemL,indexL) in labelList" :key="indexL" @click="changeLabelIndex(indexL)">
+            # {{itemL}}
+        </li>
     </ul>
     <div class="waterfall">
       <vue-waterfall-easy
@@ -17,9 +32,45 @@
         :imgsArr="imgsArr"
         @scrollReachBottom="getData"
       >
-        <div class="info" slot-scope="props">第{{ props.index + 1 }}张图片</div>
+        <div class="info" slot-scope="props">
+            <el-image class="image"
+                :src="props.value.cover_img_url"
+                :fit="'cover'"
+                :style="'width:246px;height:180px;border-radius: 8px;'">
+                <div slot="placeholder" class="image-slot" :style="'line-height:130px'">
+                    加载中<span class="dot">...</span>
+                </div>
+            </el-image>
+            <h3>{{props.value.art_title}}</h3>
+            <!-- <p>{{props.value.art_content}}</p> -->
+            <p>鼓浪屿实行最大承载量控制，每天最高5万人次，其中，游客3.5万人次，市民1.5万人次。鼓浪屿派出所出动无人机开展高空巡查，对重点区域动态监测客流，靠前化解风险隐患，守护群众安全。</p>
+            <div class="creator-info">
+                <el-image
+                    :src="props.value.creator_img_url?props.value.creator_img_url:require('../../assets/avatar.png')"
+                    fit="cover" style="width:24px;height:24px;margin-right: 12px;">
+                </el-image>
+                <span class="name">{{props.value.creator_name}}</span>
+                <div class="ding-box">
+                    <svg-icon icon-class="like-line" className="chat"></svg-icon>
+                    <span>{{props.value.ding_count}}</span>
+                    <svg-icon icon-class="chat-line" className="chat"></svg-icon>
+                    <span>{{props.value.comment_count}}</span>
+                </div>
+            </div>
+        </div>
+        <div slot="waterfall-over"></div>
       </vue-waterfall-easy>
     </div>
+    <el-dialog
+        :visible.sync="publishFlag"
+        :show-close="false"
+        :close-on-click-modal="false"
+        width="800px"
+        :modal="false"
+        class="login-dialog publish-report-box"
+        v-if="publishFlag">
+        <publish-report @closeDialog="closeDialog"></publish-report>
+    </el-dialog>
   </div>
 </template>
 
@@ -29,9 +80,10 @@
 import Header from "../../components/Header.vue";
 import vueWaterfallEasy from "vue-waterfall-easy";
 import { getLogin } from "@/api/ajax";
+import PublishReport from "./components/PublishReport.vue"
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { Header, vueWaterfallEasy },
+  components: { Header, vueWaterfallEasy, PublishReport },
   props: {},
   data() {
     //这里存放数据
@@ -64,7 +116,11 @@ export default {
       imgsArr: [],
       page: 0,
       pageSize: 50,
-      pageNumber: 1
+      pageNumber: 1,
+      publishFlag: false, // 发布弹窗
+      searchInput: '',
+      labelList:['中英双语','少儿必读','3-6 岁'],
+      labelActiveIndex: null
     }
   },
   //计算属性 类似于data概念
@@ -79,7 +135,7 @@ export default {
         this.typeValue = value
         
     },
-    getData() {
+    getData(page) {
     //   var list = [
     //     {
     //       src:
@@ -160,22 +216,46 @@ export default {
     //   } else {
     //     this.imgsArr = this.imgsArr.concat(list);
     //   }
+        if(page){
+            this.pageNumber = page
+            this.imgsArr = []
+        }
         let MethodName = "/PaperServer/Client/Xjz/XjzArticleList";
         let data = {
             page_capacity:this.pageSize,
-            cur_page:this.pageNumber
+            cur_page:this.pageNumber,
+            art_tag: this.labelActiveIndex!==null?this.labelList[this.labelActiveIndex]:''
         }
         getLogin(MethodName, data)
         .then((res) => {
             if(res.status===1){
+                this.labelList = res.tags
+                this.imgsArr = this.imgsArr.concat(res.data.list);
                 if (this.pageNumber === res.data.total_page ) {
                     this.$refs.waterfall.waterfallOver();
                 } else {
-                    this.imgsArr = this.imgsArr.concat(res.data.list);
+                    this.pageNumber ++
                 }
             }
         })
     },
+    // 点击发布按钮
+    changePublist(){
+        this.publishFlag = true
+    },
+    // 点击label
+    changeLabelIndex(index){
+        if(this.labelActiveIndex === index){
+            this.labelActiveIndex = null
+        }else{
+            this.labelActiveIndex = index
+        }
+        this.getData(1)
+    },
+    closeDialog(){
+        this.publishFlag = false
+        this.getData(1)
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
@@ -183,6 +263,15 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     this.getData();
+    let _this = this
+    let input = document.querySelector('input');
+    input.addEventListener('keyup', function(event) {
+        // 判断是否按下回车键
+        if (event.keyCode === 13) {
+            // 回车键被按下，执行你想要的操作
+            _this.getData(1)
+        }
+    });
   },
   //生命周期-创建之前
   beforeCreated() { },
@@ -203,161 +292,289 @@ export default {
 <style lang="scss" scoped>
 /* @import url(); 引入css类 */
 .reporter {
-  background: #F7F8FA;
-  height: calc(100vh - 64px);
-  .option{
-    list-style: none;
-    display: flex;
-    justify-content: center;
-    margin: 0;
-    padding: 0;
-    background: #17171A;
-    li{
+    background: #F7F8FA;
+    height: calc(100vh - 64px);
+    .option{
+        list-style: none;
         display: flex;
-        align-items: center;
-        border-radius: 30px;
-        height: 36px;
-        padding: 7px 20px;
-        margin: 8px 4px;
-        cursor: pointer;
-        &:hover{
-            background: rgba(255, 255, 255, 0.08);
-        }
-        &.active{
-            background: rgba(255, 255, 255, 0.08);
-            .icon-img,span,b{
-                color: rgba(255, 255, 255, 0.9);
+        justify-content: center;
+        margin: 0;
+        padding: 0;
+        background: #17171A;
+        li{
+            display: flex;
+            align-items: center;
+            border-radius: 30px;
+            height: 36px;
+            padding: 7px 20px;
+            margin: 8px 4px;
+            cursor: pointer;
+            &:hover{
+                background: rgba(255, 255, 255, 0.08);
+            }
+            &.active{
+                background: rgba(255, 255, 255, 0.08);
+                .icon-img,span,b{
+                    color: rgba(255, 255, 255, 0.9);
+                }
+            }
+            .icon-img{
+                width: 14px;
+                height: 14px;
+                margin: 1px 8px 0 0;
+                color: rgba(255, 255, 255, 0.5);
+            }
+            span{
+                color: rgba(255, 255, 255, 0.5);
+                font-size: 14px;
+                line-height: 22px;
+            }
+            b{
+                font-weight: 400;
+                font-size: 14px;
+                line-height: 22px;
+                color: rgba(255, 255, 255, 0.5);
+                margin-left: 5px;
             }
-        }
-        .icon-img{
-            width: 14px;
-            height: 14px;
-            margin: 1px 8px 0 0;
-            color: rgba(255, 255, 255, 0.5);
-        }
-        span{
-            color: rgba(255, 255, 255, 0.5);
-            font-size: 14px;
-            line-height: 22px;
-        }
-        b{
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 22px;
-            color: rgba(255, 255, 255, 0.5);
-            margin-left: 5px;
         }
     }
-  }
-  .main {
-    width: 1200px;
-    margin: 0 auto;
-    padding: 24px 0 0 0;
-    .searchChangebox{
-        display: flex;
-        justify-content: space-between;
-        .searchChange-box{
+    .main {
+        width: 1200px;
+        margin: 0 auto;
+        padding: 24px 0 0 0;
+        .searchChangebox{
             display: flex;
-        }
-        .searchChange {
-            display: flex;
-            align-items: center;
             justify-content: space-between;
-            padding: 4px 12px;
-            height: 32px;
-            margin-right: 16px;
-            border: 1px solid #E5E6EB;
-            border-radius: 20px;
-            &.active{
-                background: #175DFF;
+            .searchChange-box{
+                display: flex;
+            }
+            .searchChange {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                padding: 4px 12px;
+                height: 32px;
+                margin-right: 16px;
+                border: 1px solid #E5E6EB;
+                border-radius: 20px;
+                &.active{
+                    background: #175DFF;
+                    > span{
+                        color: #FFFFFF;
+                    }
+                    .sort {
+                        > div {
+                            svg{
+                                color: #5E89EF;
+                                &.active{
+                                    color: #FFFFFF;
+                                }
+                            }
+                        }
+                    }
+                }
                 > span{
-                    color: #FFFFFF;
+                    font-weight: 400;
+                    font-size: 16px;
+                    line-height: 22px;
+                    color: #000;
+                    margin-right: 4px;
                 }
                 .sort {
+                    cursor: pointer;
+                    height: 20px;
                     > div {
-                        svg{
-                            color: #5E89EF;
-                            &.active{
-                                color: #FFFFFF;
+                        font-size: 0;
+                        svg {
+                            width: 11px;
+                            height: 11px;
+                            color: #C2C2C2;
+                            padding: 3px 2px 2px 2px;
+                            &.icon-down{
+                                height: 9px;
+                                padding: 0 2px 2px 2px;
                             }
                         }
                     }
                 }
             }
-            > span{
+            .input-search{
+                width: 220px;
+            }
+        }
+        .show-title{
+            color: #1F2C5C;
+            margin: 24px 0 0 0;
+            font-weight: 500;
+            font-size: 24px;
+            line-height: 32px;
+            b{
+                margin-left: 16px;
+                color: #ED5F00;
+            }
+        }
+        .list {
+            margin-top: 28px;
+            display: flex;
+            flex-wrap: wrap;
+            height: calc(100vh - 256px);
+            overflow-y: scroll;
+            &::-webkit-scrollbar {
+                display: none;
+            }
+            > div {
+                width: 200px;
+                border-radius: 8px;
+                overflow: hidden;
+                background: #ffffff;
+                margin-bottom: 24px;
+            }
+            .tips{
+                width: 100%;
+                text-align: center;
+                font-size: 12px;
+                color: #929CA8;
+            }
+        }
+    }
+    .waterfall {
+        position: absolute;
+        top: 216px;
+        bottom: 0;
+        left: 0;
+        width: 100%;
+    }
+    .info {
+        text-align: center;
+        font-size: 0;
+        h3{
+            margin: 8px 0;
+            overflow: hidden;
+            color: #000;
+            font-size: 14px;
+            font-weight: 500;
+            line-height: 22px;
+            word-break: break-word;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            text-align: left;
+            padding: 0 8px;
+        }
+        >p{
+            color: rgba(0, 0, 0, 0.65);
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            word-break: break-word;
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            text-align: left;
+            padding: 0 8px;
+            margin: 0 0 8px 0;
+        }
+        .creator-info{
+            text-align: left;
+            padding: 0 8px;
+            display: flex;
+            align-items: center;
+            >span{
+                color: #2F3742;
+                font-size: 14px;
                 font-weight: 400;
-                font-size: 16px;
                 line-height: 22px;
-                color: #000;
-                margin-right: 4px;
+                flex: 1;
+                overflow: hidden;
             }
-            .sort {
-                cursor: pointer;
-                height: 20px;
-                > div {
-                    font-size: 0;
-                    svg {
-                        width: 11px;
-                        height: 11px;
-                        color: #C2C2C2;
-                        padding: 3px 2px 2px 2px;
-                        &.icon-down{
-                            height: 9px;
-                            padding: 0 2px 2px 2px;
-                        }
+            .ding-box{
+                color: rgba(0, 0, 0, 0.30);
+                font-size: 12px;
+                font-weight: 400;
+                line-height: 20px;
+                display: flex;
+                align-items: center;
+                .svg-icon{
+                    width: 16px;
+                    height: 16px;
+                    &.chat{
+                        color: rgba(0, 0, 0, 0.65);
                     }
                 }
+                span{
+                    margin: 0 8px 0 3px;
+                }
             }
         }
-        .input-search{
-            width: 220px;
-        }
-    }
-    .show-title{
-        color: #1F2C5C;
-        margin: 24px 0 0 0;
-        font-weight: 500;
-        font-size: 24px;
-        line-height: 32px;
-        b{
-            margin-left: 16px;
-            color: #ED5F00;
-        }
     }
-    .list {
-        margin-top: 28px;
+    .content-top{
         display: flex;
-        flex-wrap: wrap;
-        height: calc(100vh - 256px);
-        overflow-y: scroll;
-        &::-webkit-scrollbar {
-            display: none;
+        justify-content: space-between;
+        padding: 32px 0;
+        max-width: 1440px;
+        margin: 0 auto;
+        >img{
+            height: 32px;
         }
-        > div {
-            width: 200px;
-            border-radius: 8px;
-            overflow: hidden;
-            background: #ffffff;
-            margin-bottom: 24px;
+        .el-input{
+            width: 480px;
+            border-radius: 40px;
+            background: #FFF;
         }
-        .tips{
-            width: 100%;
+        .el-button{
+            width: 108px;
             text-align: center;
+            border-radius: 40px;
+            font-size: 14px;
+        }
+    }
+    ul{
+        padding: 0;
+        max-width: 1440px;
+        margin: 0 auto;
+        display: flex;
+        li.label-item{
+            padding: 4px 12px;
+            border-radius: 20px;
+            margin-right: 8px;
+            cursor: pointer;
+            color: #787878;
             font-size: 12px;
-            color: #929CA8;
+            font-weight: 400;
+            line-height: 20px;
+            &.active{
+                background: #ECECEC;
+                color: #000000;
+            }
         }
     }
-  }
-  .waterfall {
-    position: absolute;
-  top: 116px;
-  bottom: 0;
-  left: 0;
-  width: 100%;
+}
+</style>
+<style lang="scss">
+.reporter {
+    .el-input__inner{
+        border-radius: 40px;
+        border: none;
     }
-
-    .info {
-    text-align: center;
+}
+.publish-report-box{
+    .el-dialog__body{
+        padding: 24px;
+    }
+}
+.vue-waterfall-easy{
+    width: 1440px !important;
+    margin-left: -720px !important;
+    .img-inner-box{
+        box-shadow: none !important;
+    }
+    .img-box{
+        padding: 12px !important;
+        width: 270px !important;
     }
 }
 </style>