修改公告样式

src/views/Home/comps/notice.vue

@@ -9,19 +9,20 @@
       />
       <div class="container">
         <div class="row">
-          <div class="col-lg-5 notice-tp d-lg-block">
+          <div class="col-lg-5 notice-tp d-lg-block" v-if="false">
             <img src="../../../assets/image/home/notice-tp.png" alt="" />
           </div>
-          <div class="col-lg-7 notice-nr">
+          <div class="col-lg-12 notice-nr">
+            <div class="notice-cate">
+              <span></span>
+              <span>公告</span>
+              <span></span>
+            </div>
             <div class="notice-nr-kj">
-              <div class="notice-cate">
-                <span></span>
-                <span>公告</span>
-                <span></span>
-              </div>
               <p class="notice-note">
                 为应对疫情，切实减轻企业负担，协助企业复工复产、渡过难关，编码中心决定自2020年3月1日至2021年9月30日，采取阶段性降费措施。<span
-                  @click="handelJump">点击查看收费公示表</span
+                  @click="handelJump"
+                  >点击查看收费公示表</span
                 >
               </p>
               <div class="notice-cont">
@@ -29,24 +30,44 @@
                   <span></span>
                   <span>一次性加入费用：</span>
                 </div>
-                <ul class="cont-ul">
-                  <li>
-                    <span>十三位数字标准码- - - - - -</span><span>720元</span>
-                  </li>
-                  <li>
-                    <span>十三位数字标准码和八位数字缩短码- - - - - -</span
-                    ><span>1120元</span>
-                  </li>
-                </ul>
+                <table align="center" border="1">
+                  <tbody>
+                    <tr>
+                      <td>十三位数字标准码一次性加入费</td>
+                      <td>收费标准<br />720元</td>
+                    </tr>
+                    <tr>
+                      <td>十三位数字标准码和八位数字缩短码一次性加入费</td>
+                      <td>收费标准<br />1120元</td>
+                    </tr>
+                  </tbody>
+                </table>
               </div>
               <div class="notice-cont">
                 <div class="cont-cate">
                   <span></span>
                   <span>系统维护费用：</span>
                 </div>
-                <ul class="cont-ul">
-                  <li><span>单个企业- - - - - -</span><span>580元/年</span></li>
-                </ul>
+                <table align="center" border="1">
+                  <tbody>
+                    <tr>
+                      <td>系统成员类别</td>
+                      <td>收费标准</td>
+                    </tr>
+                    <tr>
+                      <td>单个企业</td>
+                      <td>580元/年</td>
+                    </tr>
+                    <tr>
+                      <td>集团公司</td>
+                      <td>1080元/年</td>
+                    </tr>
+                    <tr>
+                      <td>进出口公司</td>
+                      <td>1080元/年</td>
+                    </tr>
+                  </tbody>
+                </table>
               </div>
             </div>
           </div>
@@ -67,7 +88,7 @@ export default {
       this.show = false;
     },
     handelJump() {
-      window.open('/Business/Corppaynew', '_blank');
+      window.open("/Business/Corppaynew", "_blank");
     },
   },
 };
@@ -89,8 +110,8 @@ export default {
   width: 100vw;
   height: 100vh;
   z-index: 999;
- 
-  &.mask{
+
+  &.mask {
     background: rgba(0, 0, 0, 0.7);
   }
   .notice-kj {
@@ -98,7 +119,7 @@ export default {
     left: 50%;
     top: 50%;
     transform: translate(-50%, -50%);
-    width: 36%;
+    width: 30%;
     background: #fff;
     border-radius: 8px;
     .notice-close {
@@ -114,56 +135,60 @@ export default {
         > * {
           padding: 0;
         }
-        .notice-tp {
-          display: none;
-          overflow: hidden;
-          img {
-            height: 100%;
-            // max-width: 100%;
-          }
+        // .notice-tp {
+        //   display: none;
+        //   overflow: hidden;
+        //   img {
+        //     height: 100%;
+        //     // max-width: 100%;
+        //   }
+        // }
+      }
+    }
+    .notice-cate {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-top: 35px;
+      span {
+        display: inline-block;
+        &:nth-child(1) {
+          width: 20%;
+          height: 2px;
+          background: linear-gradient(to right, #fff, #f26335);
+        }
+        &:nth-child(2) {
+          color: #f26335;
+          font-size: 26px;
+          margin: 0 20px;
+        }
+        &:nth-child(3) {
+          width: 20%;
+          height: 2px;
+          background: linear-gradient(to left, #fff, #f26335);
         }
       }
     }
     .notice-nr-kj {
       width: 90%;
-      margin: 0 auto;
-      .notice-cate {
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-top: 35px;
-        span {
-          display: inline-block;
-          &:nth-child(1) {
-            width: 20%;
-            height: 2px;
-            background: linear-gradient(to right, #fff, #f26335);
-          }
-          &:nth-child(2) {
-            color: #f26335;
-            font-size: 26px;
-            margin: 0 20px;
-          }
-          &:nth-child(3) {
-            width: 20%;
-            height: 2px;
-            background: linear-gradient(to left, #fff, #f26335);
-          }
-        }
-      }
+      margin: 20px auto;
+      height: 300px;
+      overflow: hidden;
+      overflow-y: auto;
       .notice-note {
         font-size: 14px;
-        margin-top: 20px;
+
         span {
           color: rgba(242, 99, 53, 1);
           cursor: pointer;
         }
       }
       .notice-cont {
-        margin-top: 20px;
+        // margin-top: 20px;
         .cont-cate {
           display: flex;
           align-items: center;
+          margin: 10px 0;
           span {
             &:nth-child(1) {
               display: inline-block;
@@ -173,17 +198,35 @@ export default {
               transform: rotate(45deg);
               margin-right: 15px;
             }
+            &:nth-child(2) {
+              color: #454545;
+              font-size: 14px;
+            }
           }
         }
-        .cont-ul {
-          padding: 0;
-          font-size: 14px;
-          li {
-            padding: 10px 0;
-            span {
-              &:nth-child(2) {
-                color: rgba(242, 99, 53, 1);
-              }
+      }
+      table {
+        display: table;
+        border-collapse: separate;
+        box-sizing: border-box;
+        text-indent: initial;
+        border-spacing: 2px;
+        border-color: grey;
+        table-layout: fixed;
+        text-align: center;
+        width: 80%;
+        tbody {
+          display: table-row-group;
+          vertical-align: middle;
+          border-color: inherit;
+          tr {
+            display: table-row;
+            vertical-align: inherit;
+            border-color: inherit;
+            td {
+              display: table-cell;
+              vertical-align: inherit;
+              border-width: 1px;
             }
           }
         }