fix: 优化首页通知公告样式

src/views/home/index.vue

@@ -4,7 +4,8 @@
       <el-col :xs="24" :sm="24" :md="24" :lg="17" :xl="17">
         <div class="top-left" id="topLeft">
           <el-card shadow="never">
-            <div class="notice-title">{{getTimePeriod()}}，提醒您<span>有<span>{{ taskTabList[0].num }}</span>个项目待立项</span></div>
+            <div class="notice-title">{{ getTimePeriod() }}，提醒您<span>有<span>{{ taskTabList[0].num }}</span>个项目待立项</span>
+            </div>
             <el-row class="statistics">
               <el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6" v-for="(item,index) in taskTabList" :key="index">
                 <div class="block" :style="{'background-image':'url('+getImgUrl(item.icon)+')'}"
@@ -138,8 +139,8 @@
               </div>
               <div v-for="(item,index) in noticeList" class="notice" @click="handleGoToArticleDetail(item)">
                 <span>{{ index > 8 ? '' : 0 }}{{ index + 1 }}</span>
-                {{ item.articleTitle }}
+                <span>{{ item.articleTitle }}</span>
-                <span style="float: right">
+                <span>
                   {{ item.articleTime }}
                 </span>
               </div>
@@ -524,7 +525,7 @@ onMounted(async () => {
   helpDocList.value = await getArticleList(2)
   problemList.value = await getArticleList(3)
 })
-const getTimePeriod=()=>{
+const getTimePeriod = () => {
   // 获取当前日期和时间
   const now = new Date();
   // 获取当前小时数
@@ -539,11 +540,11 @@ const getTimePeriod=()=>{
     return "中午好";
   } else if (hour >= 14 && hour < 18) {
     return "下午好";
-  }  else if (hour >= 18 && hour <= 22) {
+  } else if (hour >= 18 && hour <= 22) {
     return "晚上好";
   } else if (hour >= 23 || hour <= 1) {
     return "午夜好";
-  } else if (hour > 1&& hour <= 5) {
+  } else if (hour > 1 && hour <= 5) {
     return "夜深了";
   }
 }
@@ -552,7 +553,7 @@ const handleTodoList = (type) => {
     router.push({
       path: '/todolist',
     })
-  } else if (type == 2){
+  } else if (type == 2) {
     router.push({
       path: '/donelist',
     })
@@ -566,23 +567,23 @@ const handleGoToArticleDetail = (row) => {
     }
   })
 }
-const goToArticleList = (type,otherHelpType) => {
+const goToArticleList = (type, otherHelpType) => {
-  let queryType=''
+  let queryType = ''
-  if(type){
+  if (type) {
-    queryType=type
+    queryType = type
-  }else{
+  } else {
     console.info("🚀 ~method:'otherHelpType' -----", otherHelpType)
-    if(otherHelpType=='first'){
+    if (otherHelpType == 'first') {
-      queryType= '1'
+      queryType = '1'
-    }else if(otherHelpType=='second'){
+    } else if (otherHelpType == 'second') {
-      queryType= '2'
+      queryType = '2'
-    }else if(otherHelpType=='third'){
+    } else if (otherHelpType == 'third') {
-      queryType= '3'
+      queryType = '3'
     }
   }
   router.push({
     name: 'Manage',
-    query:{
+    query: {
       type: queryType
     }
   })
@@ -787,17 +788,17 @@ const handleView = (row) => {
       }
     })
   }
-  // else if (row.targetState == '10' && row.targetId) {
+      // else if (row.targetState == '10' && row.targetId) {
-  //   router.push({
+      //   router.push({
-  //     name: 'Summary/detail',
+      //     name: 'Summary/detail',
-  //     query: {
+      //     query: {
-  //       projectId: row.targetId,
+      //       projectId: row.targetId,
-  //       state: row.state,
+      //       state: row.state,
-  //       source: 'home'
+      //       source: 'home'
-  //     }
+      //     }
-  //   })
+      //   })
   // }
-  else if (row.targetState == '10'||row.targetState == '20' || row.targetState == '40' || row.targetState == '50') {
+  else if (row.targetState == '10' || row.targetState == '20' || row.targetState == '40' || row.targetState == '50') {
     router.push({
       name: 'Implementation/detail',
       query: {
@@ -1459,9 +1460,35 @@ const handleView = (row) => {
       }
     }
   }
-.notice-box{
 
-}
+  .notice-box {
+
+    .notice {
+      display: flex;
+      justify-content: space-between;
+
+      > span:first-child {
+        margin-right: 10px;
+        margin-left: 10px;
+        color: #1476E3;
+        font-weight: bold;
+        font-size: 16px;
+      }
+
+      > span:nth-child(2) {
+        display: block;
+        width: 65%;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      &:hover {
+        color: #1476E3;
+        background: #F6FBFE;
+      }
+    }
+  }
+
   .notice-block {
     height: 452px;
     //height: 100%;