【修改】修改详情布局

src/views/Report/ReportDetail.vue

@@ -12,30 +12,41 @@
           <label>上传人</label>
           <div>{{ row.uploaderName }}</div>
         </el-col>
+      </el-row>
+      <el-row>
         <el-col :span="24" class="desc-item">
           <label>关键词</label>
           <div>{{ getKeyContent(row.keyContent) }}</div>
         </el-col>
+      </el-row>
+      <el-row>
         <el-col :span="24" class="desc-item">
           <label>内容摘要</label>
           <p>{{ row.mainContent || '-' }}</p>
         </el-col>
-                <el-col :span="12" class="desc-item">
+      </el-row>
+      <el-row>
+        <el-col :span="10" class="desc-item">
           <label>所属部门</label>
           <div>{{ row.departmentName || '-' }}</div>
         </el-col>
-              <el-col :span="12" class="desc-item">
+
+        <el-col :span="10" :offset="2" class="desc-item">
           <label>报告年份</label>
           <div>{{ row.year || '-' }}</div>
         </el-col>
-                <el-col :span="12" class="desc-item">
+      </el-row>
+      <el-row>
+        <el-col :span="10" class="desc-item">
           <label>报告涉密等级</label>
           <div>{{ row.confidentialLevel || '-' }}</div>
         </el-col>
-              <el-col :span="12" class="desc-item">
+        <el-col :span="10" :offset="2" class="desc-item">
           <label>报告隐私等级</label>
           <div>{{ row.privacyLevel || '-' }}</div>
         </el-col>
+      </el-row>
+      <el-row>
         <el-col :span="24" class="desc-item">
           <label>标签</label>
           <div>{{ row.labels && row.labels.join(',') || '-' }}</div>
@@ -51,11 +62,14 @@
     </div>
     <div class="report-jug">
       <div class="report-jug-left">
-          报告满意度:<el-rate allow-half :max="5" v-model="userRating" @click.native="saveScore"></el-rate>
+        报告满意度:
+        <el-rate allow-half :max="5" v-model="userRating" @click.native="saveScore"></el-rate>
       </div>
       <div class="pointclick">
-          <svg-icon v-if="!isShow"   icon-class="pointe" @click="pointZan('y')" style="font-size: 25px"   class-name="icon" ></svg-icon>
+        <svg-icon v-if="!isShow" icon-class="pointe" @click="pointZan('y')" style="font-size: 25px"
-          <svg-icon v-else  icon-class="pointe_fill" @click="pointZan('n')" style="font-size: 25px"  class-name="icon" ></svg-icon>
+                  class-name="icon"></svg-icon>
+        <svg-icon v-else icon-class="pointe_fill" @click="pointZan('n')" style="font-size: 25px"
+                  class-name="icon"></svg-icon>
         {{ pointNum }}
       </div>
     </div>
@@ -85,11 +99,13 @@
           <div class="bottom">
             <div class="time">{{ item.createTime && formatDate2(item.createTime) }}</div>
             <el-button class="delbtn" size="medium" plain type="primary" v-if="item.userId==userId || isAdmin"
-                         @click="delJugg(item.id)">删除</el-button>
+                       @click="delJugg(item.id)">删除
+            </el-button>
           </div>
         </div>
       </div>
-        <el-pagination v-if="commonList.length>0" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="q.pageNo"
+      <el-pagination v-if="commonList.length>0" @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                     :current-page="q.pageNo"
                      :page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
                      :total="total"/>
     </div>
@@ -286,6 +302,7 @@ export default {
       color: #262626;
     }
   }
+
   .desc {
     padding: 11px 26px 6px 48px;
 
@@ -294,6 +311,7 @@ export default {
       justify-content: flex-start;
       align-items: flex-start;
       margin-bottom: 12px;
+
       label {
         display: inline-block;
         height: 19px;
@@ -302,15 +320,17 @@ export default {
         font-weight: 400;
         color: #595959;
         width: 85px;
-                    border-right: 1px solid #BFBFBF;
         margin-right: 9px;
       }
+
       div, p {
         flex: 1;
         font-size: 14px;
         font-weight: 400;
         color: #434343;
+        word-break: break-all;
       }
+
       p {
         line-height: 20px;
         text-align: justify;
@@ -334,6 +354,7 @@ export default {
       color: #262626;
     }
   }
+
   .preview-box {
     // 定位使水印不溢出元素
     position: relative;
@@ -346,37 +367,45 @@ export default {
       max-height: 500px;
       padding-bottom: 11px;
       overflow: auto;
+
       img {
         max-width: 100% !important;
       }
+
       table {
         margin: 0 auto;
       }
 
     }
   }
+
   .report-jug {
     display: flex;
     justify-content: space-between;
     padding: 10px;
+
     .report-jug-left {
       display: flex;
 
     }
   }
+
   .juggle_box {
     padding: 10px;
+
     .all_juggle {
       margin-top: 20px;
       display: flex;
       width: 100%;
       border: 1px solid #e6f6fe;
       min-height: 150px;
+
       .juggle_left {
         width: 15%;
         text-align: center;
         border-right: 1px solid #e6f6fe;
         color: #434343;
+
         .nameCir {
           background-color: pink;
           width: 60px;
@@ -389,14 +418,17 @@ export default {
           margin: 20px calc(50% - 30px);
         }
       }
+
       .juggle_right {
         position: relative;
         width: 85%;
         padding: 10px 10px 40px;
+
         .content {
           width: 100%;
           color: #434343;
         }
+
         .bottom {
           position: absolute;
           display: flex;
@@ -406,25 +438,30 @@ export default {
           left: 20px;
           height: 30px;
           color: #434343;
+
           .time {
             line-height: 30px;
             color: #ccc;
           }
+
           .delbtn {
             vertical-align: center;
           }
         }
       }
     }
+
     .fabiaoBtn {
       margin-left: 20px;
       height: 100%;
     }
   }
+
   .isBackground {
     background-color: pink;
   }
 }
+
 .pointclick {
   cursor: pointer;
 }