横幅样式修改

src/views/enforceHome.vue

@@ -631,13 +631,6 @@
     .notice-bar-container:last-child {
       margin-bottom: 0;
     }
-    /* .notification{
-       height: 100%;
-       font-size: 0.27rem;
-       z-index: 9999;
-       width: 100%;
-       color: black;
-     }*/
 
     @media screen and (max-width: 380px) {
       .home .warp_body {
@@ -652,22 +645,49 @@
         background-size: 100% auto;
       }
     }
-.noticeContent {
-    margin-top: 10px;
-    display: block;
+
+  .noticeContent {
+    position: absolute;
+    top: calc(2% + 10vh);
+    right: 3%;
+    z-index: 999;
+    padding: 0 0.25rem 0 1rem;
+    width: 94%;
+    min-height: 1rem;
+    background-color: rgba(249, 238, 219, 0.9);
+    border-radius: 0.5rem;
+    color: #df6104;
+    box-sizing: border-box;
+    overflow: hidden;
+  }
+
+  .noticeContent ul {
+    width: 100%;
+  }
+  .noticeContent li {
     position: relative;
+    margin: 0.27rem 0 0 0;
+    padding: 0 0.25rem 0 1rem;
     width: 100%;
-    height: 25px; // 控制高度以达到控制显示条数的目的
+    text-align: left;
+    line-height: 1.25;
+    height: 0.5rem;
+    font-size: 0.38rem;
+    white-space: nowrap;
     overflow: hidden;
-    border-top:1px solid #ece6ed;
-    border-bottom:1px solid #ece6ed;
+    text-overflow: ellipsis;
+    box-sizing: border-box;
   }
-  .noticeContent li{
-    text-align: left;
-    line-height: 25px;
-    height: 35px;
-    font-size: 12px;
-    color:red;
+  .noticeContent li::before {
+    display: inline-block;
+    position: absolute;
+    top: 0;
+    left: 0.3rem;
+    content: "";
+    width: 0.5rem;
+    height: 0.5rem;
+    background: url("../assets/images/icon_notice.png") no-repeat;
+    background-size: auto 85%;
   }
   .notice_list {
     display: block;