修改样式

reportPages/keyCompany/keyCompany.vue

@@ -1,5 +1,5 @@
 <template>
-  <view id="keyconmpany" class="container content-conmpany">
+  <view id="keyconmpany" class="container content-conmpany" v-if="haveData">
     <view class="title">{{ reportDetail.Title }}</view>
     <view class="author-time">
       <text>{{ reportDetail.Department }}</text>
@@ -23,8 +23,14 @@
     <view class="industry-ul">
       <view class="industry-li" v-for="(item, index) in dataListSubject" :key="index">
         <view class="industry-name">{{ item.PermissionName }}</view>
-        <view :class="['industry-subject',item.ListSubject.length<3 &&'industry-top-border']">
-          <view :class="['subject-item','text_oneLine',item.ListSubject.length<3 &&'subject-item-top-border']" class="" @click="positionSubject(key)" v-for="key in item.ListSubject" :key="key.IndustrialSubjectId">
+        <view :class="['industry-subject', item.ListSubject.length < 3 && 'industry-top-border']">
+          <view
+            :class="['subject-item', 'text_oneLine', item.ListSubject.length < 3 && 'subject-item-top-border']"
+            class=""
+            @click="positionSubject(key)"
+            v-for="key in item.ListSubject"
+            :key="key.IndustrialSubjectId"
+          >
             {{ key.SubjectName }}
             <image v-if="key.IsNew" class="icon_subject" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_subject.png"></image>
           </view>
@@ -41,8 +47,10 @@
         <view class="li-list">
           <view class="li-item" v-for="key in item.List" :key="key.IndustrialSubjectId">
             <view :id="'subject' + key.IndustrialSubjectId" class="li-subject">
-              {{ key.SubjectName }}
-              <image v-if="key.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png"></image>
+              <view class="item-name">
+                <text style="display: inline-block;vertical-align: middle;">{{ key.SubjectName }}</text>
+                <image v-if="key.IsNew" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/new_report.png"></image>
+              </view>
               <text class="itel-label" v-for="val in key.CompanyLabel" :key="val"># {{ val }}</text>
             </view>
             <mp-html :content="key.Body" />
@@ -85,6 +93,7 @@ export default {
       isShowBackTop: false,
       isShowStatement: false,
       areacodeShow: false,
+      haveData: false,
     };
   },
   components: { statement },
@@ -102,6 +111,7 @@ export default {
       });
       if (res.Ret === 200) {
         this.reportDetail = res.Data.Detail;
+        this.haveData = true;
         this.dataList = res.Data.List;
         this.dataListSubject = res.Data.ListPermissionSubject;
       }
@@ -245,7 +255,6 @@ export default {
           display: flex;
           justify-content: center;
           align-items: center;
-          // text-decoration-line: underline;
           line-height: 39rpx;
           border-bottom: 1px solid #ececec;
           border-right: 1px solid #ececec;
@@ -259,10 +268,10 @@ export default {
         }
       }
       .industry-top-border {
-          border-top: none !important;
+        border-top: none !important;
       }
       .subject-item-top-border {
-         border-top: 1px solid #ececec;
+        border-top: 1px solid #ececec;
       }
     }
   }
@@ -302,18 +311,25 @@ export default {
       .li-list {
         margin-top: 20rpx;
         .li-subject {
-          display: flex;
           padding: 20rpx;
           margin-bottom: 20rpx;
           background: #f2f2f2;
+          .item-name {
+            display: inline-block;
+            margin-right: 27rpx;
+            line-height: 60rpx;
+          }
           .itel-label {
-            margin-left: 27rpx;
+            display: inline-block;
+            margin-right: 27rpx;
             color: #3385ff;
+            line-height: 60rpx;
+            vertical-align: middle;
           }
           image {
             width: 60rpx;
             height: 30rpx;
-            margin-top: 6rpx;
+            vertical-align: middle;
             margin-left: 10rpx;
           }
         }