bug

src/apps/AppServicePublic/Detail.vue

@@ -2,21 +2,27 @@
   <div class="Detail">
     <div class="header-top">
       <div class="titles">{{data.title}}</div>
+      <div class="flex">
+        <span class="left">
+          <span class="type" v-if="data.categoryName">{{data.categoryName}}</span>
+          <span class="times">{{ data.createTime }}</span>
+        </span>
 
-      <div class="titles-bottom">
-        <span v-if="selectList.length">类型：</span>
-        <span v-if="selectList.length">{{data.categoryName}}</span>
-        <span class="to-left">浏览量：</span>
-        <span>{{data.viewCount}}</span>
+        <span class="right">
+          <img src="./img/view-icon.png" alt="">
+          <span>{{data.viewCount}}</span>
+        </span>
       </div>
     </div>
 
     <div class="header-middle">
       <span class="contsnts">{{data.content}}</span>
-      <div class="img-list" v-if="data.files && data.files.length">
-        <img :src="item.accessUrl" alt="" v-for="(item, index) in data.files" :key="index" />
-      </div>
       
+      
+    </div>
+    <div class="img-list" v-if="data.files && data.files.length">
+      <div class="title">图片</div>
+      <img :src="item.accessUrl" alt="" v-for="(item, index) in data.files" :key="index" />
     </div>
   </div>
 </template>
@@ -54,7 +60,7 @@ export default {
     getType() {
       this.$http.post(`/app/appcontentmoduleinfo/listByName?names=${this.listName}`).then((res) => {
         if (res.code == 0) {
-          if(res.data && res.data[0].categoryList.length) {
+          if(res.data && res.data.length) {
             this.selectList = res.data[0].categoryList
           }
           this.getDetail()
@@ -78,6 +84,14 @@ uni-page-body {
     .titles {
       font-size: 48px;
       font-weight: 600;
+      width: 100%;
+      font-size: 48px;
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #333;
+      line-height: 66px;
+      word-break: break-all;
+      margin-bottom: 16px;
     }
 
     .titles-bottom {
@@ -91,7 +105,7 @@ uni-page-body {
   }
 
   .header-middle {
-    padding: 32px 0;
+    padding: 64px 0 48px 0;
     .contsnts {
       font-size: 36px;
       line-height: 1.5;
@@ -110,6 +124,61 @@ uni-page-body {
       height: 204px;
       margin: 0 8px 8px 0;
     }
+    .title{
+      width: 100%;
+      line-height: 112px;
+      background: #FFF;
+      font-size: 32px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      color: #999;
+    }
+  }
+
+  .flex {
+    display: flex;
+    justify-content: space-between;
+
+    .left {
+      .garydiv {
+        font-size: 28px;
+        color: #999999;
+        background: #eeeeee;
+        border-radius: 24px;
+        padding: 4px 16px;
+      }
+
+      .times {
+        font-size: 28px;
+        color: #999999;
+      }
+
+      .type{
+        display: inline-block;
+        padding: 0 16px;
+        line-height: 48px;
+        background: #EEE;
+        border-radius: 24px;
+        font-size: 24px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #999;
+        margin-right: 16px;
+      }
+    }
+
+    .right {
+      font-size: 28px;
+      color: #999;
+      img{
+        width: 32px;
+        height: 32px;
+        vertical-align: middle;
+        margin-right: 8px;
+      }
+      .font {
+        color: #4181ff;
+      }
+    }
   }
 }
 </style>