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 style="float: right">
+                <span>{{ item.articleTitle }}</span>
+                <span>
                   {{ item.articleTime }}
                 </span>
               </div>
@@ -1459,9 +1460,35 @@ const handleView = (row) => {
       }
     }
   }
+
   .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%;