'修改工作动态列表及详情页样式问题'

front/src/views/newHome/components/WorkDynDetails.vue

@@ -3,9 +3,7 @@
     <home-header></home-header>
     <a-breadcrumb>
       <a-breadcrumb-item>
-        <router-link to="/home">
+        <router-link to="/home">门户首页</router-link>
-          门户首页
-        </router-link>
       </a-breadcrumb-item>
       <a-breadcrumb-item>工作动态</a-breadcrumb-item>
     </a-breadcrumb>
@@ -13,12 +11,10 @@
       <div class="name">{{ item.title }}</div>
       <div class="time">发布日期：{{ item.createDate }}</div>
       <div class="detail-main-content">
-        <div v-if="item.note1" class="summary-content">摘要：{{item.note1}}</div>
+        <div v-if="item.note1" class="summary-content">
-        <a-image
+          摘要：{{ item.note1 }}
-          alt="暂无图片"
+        </div>
-          :src="item.imageUrl"
+        <a-image alt="暂无图片" :src="item.imageUrl" :fallback="imgSrc" />
-          :fallback="imgSrc"
-        />
         <div class="text">{{ item.content }}</div>
       </div>
     </div>
@@ -45,66 +41,66 @@
 </script>
 
 <style scoped lang="less">
-.work-dyn-detail-content {
+  .work-dyn-detail-content {
-  .ant-breadcrumb{
+    .ant-breadcrumb {
       margin: 90px auto 0;
       padding: 5px 400px;
       background-color: #f5f8fc;
-  }
-  #work-dyn-list {
-    background-color: #ffffff;
-    height: 100%;
-    width: 100%;
-    // margin: 90px auto 0;
-    display: flex;
-    flex-direction: column;
-    // flex-wrap: wrap;
-    // align-items: center;
-    padding: 0 400px;
-    position: relative;
-    margin-bottom: 40px;
-    .name {
-      font-size: 24px;
-      text-align: center;
-      color: #0558e1;
-      margin-top: 54px;
     }
-    .time {
+    #work-dyn-list {
-      text-align: center;
+      background-color: #ffffff;
-      margin: 10px 0 24px;
+      height: 100%;
-    }
+      width: 100%;
-    .detail-main-content{
+      // margin: 90px auto 0;
-      border-top: 1px solid #c6c6c6;
+      display: flex;
-      padding-top: 24px;
+      flex-direction: column;
-      font-size: 16px;
+      // flex-wrap: wrap;
-      line-height: 30px;
+      // align-items: center;
-      color: #212121;
+      padding: 0 400px;
-      .summary-content{
+      position: relative;
-        word-wrap: break-word;
+      margin-bottom: 40px;
-        text-indent: 32px;
+      .name {
-      }
+        font-size: 24px;
-      :deep(.ant-image){
         text-align: center;
-        margin: 16px 0;
+        color: #0558e1;
-        position: relative;
+        margin-top: 54px;
-        left: 50%;
+      }
-        transform: translateX(-50%);
+      .time {
-        .ant-image-img{
+        text-align: center;
-          max-width: 900px;
+        margin: 10px 0 24px;
-          max-height: 590px;
+      }
+      .detail-main-content {
+        border-top: 1px solid #c6c6c6;
+        padding-top: 24px;
+        font-size: 16px;
+        line-height: 30px;
+        color: #212121;
+        .summary-content {
+          word-wrap: break-word;
+          text-indent: 32px;
+        }
+        :deep(.ant-image) {
+          text-align: center;
+          margin: 16px 0;
+          position: relative;
+          left: 50%;
+          transform: translateX(-50%);
+          .ant-image-img {
+            max-width: 900px;
+            max-height: 590px;
+          }
+        }
+        // :deep(.ant-image-img) {
+        //   width: 200px;
+        //   margin-top: 10px;
+        // }
+        .text {
+          word-wrap: break-word;
+          text-indent: 32px;
         }
       }
-      // :deep(.ant-image-img) {
-      //   width: 200px;
-      //   margin-top: 10px;
-      // }
-      .text {
-        word-wrap: break-word;
-        text-indent: 32px;
-      }
     }
   }
-}
 </style>
 <style>
   body,

front/src/views/newHome/components/WorkDynList.vue

@@ -3,9 +3,7 @@
     <home-header></home-header>
     <a-breadcrumb>
       <a-breadcrumb-item>
-        <router-link to="/home">
+        <router-link to="/home">门户首页</router-link>
-          门户首页
-        </router-link>
       </a-breadcrumb-item>
       <a-breadcrumb-item>工作动态</a-breadcrumb-item>
     </a-breadcrumb>
@@ -13,15 +11,25 @@
       <a-list item-layout="vertical" size="large" :data-source="listData">
         <template #header>
           <div class="total-num-content">
-            <div class="total-main-text">共 <span class="num-text">{{total}}</span> 条信息</div>
+            <div class="total-main-text">
-            <div class="index-page-text">当前第{{page}}页</div>
+              共
+              <span class="num-text">{{ total }}</span>
+              条信息
+            </div>
+            <div class="index-page-text">当前第{{ page }}页</div>
           </div>
         </template>
         <template #renderItem="{ item }">
           <a-list-item key="item.title">
-            <a-list-item-meta :description="item.note1? `摘要：${item.note1 || ''}`: item.content">
+            <a-list-item-meta
+              :description="
+                item.note1 ? `摘要：${item.note1 || ''}` : item.content
+              "
+            >
               <template #title>
-                <a class="title-content" @click="goToDetails(item.id)">{{ item.title }}</a>
+                <a class="title-content" @click="goToDetails(item.id)">
+                  {{ item.title }}
+                </a>
               </template>
               <template #avatar>
                 <a-image
@@ -33,7 +41,7 @@
                 />
               </template>
             </a-list-item-meta>
-            <div class="pulish-time">发布时间：{{item.createDate}}</div>
+            <div class="pulish-time">发布时间：{{ item.createDate }}</div>
             <!-- <template #extra>
               <a-image
                 width="100"
@@ -97,8 +105,8 @@
 </script>
 
 <style scoped lang="less">
-  .work-dyn-main-content{
+  .work-dyn-main-content {
-    .ant-breadcrumb{
+    .ant-breadcrumb {
       margin: 90px auto 0;
       padding: 5px 400px;
       background-color: #f5f8fc;
@@ -112,9 +120,9 @@
       // align-items: center;
       padding: 0 400px;
       flex-direction: column;
-      :deep(.ant-list-header){
+      :deep(.ant-list-header) {
-        border-bottom:none;
+        border-bottom: none;
-        .total-num-content{
+        .total-num-content {
           font-size: 14px;
           color: #212121;
           margin: 18px 0 10px;
@@ -122,23 +130,20 @@
           height: 35px;
           display: flex;
           align-items: center;
-          .total-main-text{
+          .total-main-text {
             flex: 1;
-            .num-text{
+            .num-text {
               font-size: 18px;
               color: #0058e1;
             }
           }
-          
         }
       }
-      
       :deep(.ant-list-item) {
         width: 1300px;
         padding: 16px 0;
         position: relative;
         border-bottom: #dddee1 solid 1px;
-        
         .ant-list-item-main {
           height: 140px;
           overflow: hidden;
@@ -156,16 +161,16 @@
             font-size: 20px;
           }
         }
-        .ant-list-item-meta-description{
+        .ant-list-item-meta-description {
           font-size: 14px;
-          color: rgba(33,33,33, 0.8);
+          color: rgba(33, 33, 33, 0.8);
           overflow: hidden;
           text-overflow: ellipsis;
           display: -webkit-box;
           -webkit-line-clamp: 4;
           -webkit-box-orient: vertical;
         }
-        .pulish-time{
+        .pulish-time {
           position: absolute;
           left: 196px;
           bottom: 50px;
@@ -175,13 +180,12 @@
           width: 180px;
         }
 
-
+        &:hover {
-        &:hover{
           padding-left: 20px;
           border: #0058e1 1px solid;
           box-shadow: 0px 0px 20px rgba(0, 88, 225, 0.3);
           width: 100%;
-          .pulish-time{
+          .pulish-time {
             left: 216px;
           }
         }