'工作动态列表及详情页'

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

@@ -1,67 +1,110 @@
 <template>
-  <div>
+  <div class="work-dyn-detail-content">
     <home-header></home-header>
-    <div id="work-dyn-list">
+    <a-breadcrumb>
+      <a-breadcrumb-item>
+        <router-link to="/home">
+          门户首页
+        </router-link>
+      </a-breadcrumb-item>
+      <a-breadcrumb-item>工作动态</a-breadcrumb-item>
+    </a-breadcrumb>
+    <div id="work-dyn-list" v-loading="loading">
       <div class="name">{{ item.title }}</div>
       <div class="time">发布日期：{{ item.createDate }}</div>
-      <a-image
+      <div class="detail-main-content">
-        width="100"
+        <div v-if="item.note1" class="summary-content">摘要：{{item.note1}}</div>
-        height="100"
+        <a-image
-        alt="暂无图片"
+          alt="暂无图片"
-        :src="item.imageUrl"
+          :src="item.imageUrl"
-        :fallback="imgSrc"
+          :fallback="imgSrc"
-      />
+        />
-      <div class="text">{{ item.content }}</div>
+        <div class="text">{{ item.content }}</div>
+      </div>
     </div>
+    <home-footer></home-footer>
   </div>
 </template>
 
 <script setup>
   import HomeHeader from '@/views/home/components/header'
+  import HomeFooter from '@/views/newHome/components/Footer'
   import { ref } from 'vue'
   import { useRouter } from 'vue-router'
   import { workdynamicsDetails } from '@/api/home'
   const router = useRouter()
   const item = ref({})
+  const loading = ref(true)
   const imgSrc = ref(require('@/assets/newHome/zw.png'))
   const id = router.currentRoute.value.query.id
   workdynamicsDetails(id).then((res) => {
     console.log('详情=================>', res.data.data)
     item.value = res.data.data
+    loading.value = false
   })
 </script>
 
 <style scoped lang="less">
+.work-dyn-detail-content {
+  .ant-breadcrumb{
+      margin: 90px auto 0;
+      padding: 5px 400px;
+      background-color: #f5f8fc;
+  }
   #work-dyn-list {
-    background-color: #f5f8fc;
+    background-color: #ffffff;
     height: 100%;
     width: 100%;
-    margin: 90px auto 0;
+    // margin: 90px auto 0;
     display: flex;
     flex-direction: column;
-    flex-wrap: wrap;
+    // flex-wrap: wrap;
-    align-items: center;
+    // align-items: center;
     padding: 0 400px;
     position: relative;
+    margin-bottom: 40px;
     .name {
-      font-size: 32px;
+      font-size: 24px;
-      font-weight: 600;
       text-align: center;
-    }
+      color: #0558e1;
-    :deep(.ant-image-img) {
+      margin-top: 54px;
-      width: 200px;
-      margin-top: 10px;
-    }
-    .text {
-      width: 1000px;
-      margin-top: 20px;
-      word-wrap: break-word;
-      text-indent: 32px;
     }
     .time {
-      margin-left: 70%;
+      text-align: center;
+      margin: 10px 0 24px;
+    }
+    .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;
+      }
     }
   }
+}
 </style>
 <style>
   body,

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

@@ -1,11 +1,40 @@
 <template>
-  <div>
+  <div class="work-dyn-main-content">
     <home-header></home-header>
+    <a-breadcrumb>
+      <a-breadcrumb-item>
+        <router-link to="/home">
+          门户首页
+        </router-link>
+      </a-breadcrumb-item>
+      <a-breadcrumb-item>工作动态</a-breadcrumb-item>
+    </a-breadcrumb>
     <div id="work-dyn-list">
       <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="index-page-text">当前第{{page}}页</div>
+          </div>
+        </template>
         <template #renderItem="{ item }">
           <a-list-item key="item.title">
-            <template #extra>
+            <a-list-item-meta :description="item.note1? `摘要：${item.note1 || ''}`: item.content">
+              <template #title>
+                <a class="title-content" @click="goToDetails(item.id)">{{ item.title }}</a>
+              </template>
+              <template #avatar>
+                <a-image
+                  width="100"
+                  height="100"
+                  alt="暂无图片"
+                  :src="item.imageUrl"
+                  :fallback="imgSrc"
+                />
+              </template>
+            </a-list-item-meta>
+            <div class="pulish-time">发布时间：{{item.createDate}}</div>
+            <!-- <template #extra>
               <a-image
                 width="100"
                 height="100"
@@ -19,22 +48,25 @@
                 <a @click="goToDetails(item.id)">{{ item.title }}</a>
               </template>
             </a-list-item-meta>
-            {{ item.content }}
+            {{ item.content }} -->
           </a-list-item>
         </template>
       </a-list>
       <a-pagination
         v-model:current="page"
         :total="total"
+        show-quick-jumper
         show-less-items
         @change="getList"
       />
     </div>
+    <home-footer></home-footer>
   </div>
 </template>
 
 <script setup>
   import HomeHeader from '@/views/home/components/header'
+  import HomeFooter from '@/views/newHome/components/Footer'
   import { ref } from 'vue'
   import { gongZuoZhuangTai } from '@/api/home'
   import { useRouter } from 'vue-router'
@@ -65,36 +97,99 @@
 </script>
 
 <style scoped lang="less">
-  #work-dyn-list {
+  .work-dyn-main-content{
-    background-color: #f5f8fc;
+    .ant-breadcrumb{
-    height: 100%;
+      margin: 90px auto 0;
-    width: 100%;
+      padding: 5px 400px;
-    margin: 90px auto 0;
+      background-color: #f5f8fc;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    padding: 0 400px;
-    :deep(.ant-list-item) {
-      width: 1000px;
-      .ant-list-item-main {
-        height: 140px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 4;
-      }
-      .ant-list-item-meta-title {
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-      }
-      .ant-image-img {
-        width: 150px;
-      }
     }
-    .ant-pagination {
+    #work-dyn-list {
+      background-color: #ffffff;
+      height: 100%;
       width: 100%;
+      display: flex;
+      flex-wrap: wrap;
+      // align-items: center;
+      padding: 0 400px;
+      flex-direction: column;
+      :deep(.ant-list-header){
+        border-bottom:none;
+        .total-num-content{
+          font-size: 14px;
+          color: #212121;
+          margin: 18px 0 10px;
+          border-bottom: 1px solid #dddee1;
+          height: 35px;
+          display: flex;
+          align-items: center;
+          .total-main-text{
+            flex: 1;
+            .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;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 4;
+        }
+        .ant-list-item-meta-title {
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          margin-bottom: 16px;
+          .title-content {
+            font-size: 20px;
+          }
+        }
+        .ant-list-item-meta-description{
+          font-size: 14px;
+          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{
+          position: absolute;
+          left: 196px;
+          bottom: 50px;
+          color: #212121;
+        }
+        .ant-image-img {
+          width: 180px;
+        }
+
+
+        &:hover{
+          padding-left: 20px;
+          border: #0058e1 1px solid;
+          box-shadow: 0px 0px 20px rgba(0, 88, 225, 0.3);
+          width: 100%;
+          .pulish-time{
+            left: 216px;
+          }
+        }
+      }
+      .ant-pagination {
+        width: 100%;
+        margin: 20px 0;
+      }
     }
   }
 </style>