home ui

src/views/Home/cells/NoticeAnnouncement.vue

@@ -6,19 +6,19 @@
     </template>
 
     <div class="notice-container">
-      <el-scrollbar style="height: 100%;padding-right: 10px;">
-        <div class="notice-item" v-for="(item, idx) in  testData" :key="idx">
-          <div class="notice-title" :class="{ active: idx === 0 }">
-            <a :href="item.url" target="_blank" rel="noopener noreferrer">
-              <!-- <router-link :to="'/Display/'+item.tid"> -->
-              
-
-              {{ item.title }}
-              <!-- </router-link> -->
-            </a>
-          </div>
-          <div class="notice-date">
-            {{ item.date }}
+      <el-scrollbar style="height: 100%">
+        <div style="padding-right: 10px">
+          <div class="notice-item" v-for="(item, idx) in testData" :key="idx">
+            <div class="notice-title" :class="{ active: idx === 0 }">
+              <a :href="item.url" target="_blank" rel="noopener noreferrer">
+                <!-- <router-link :to="'/Display/'+item.tid"> -->
+                {{ item.title }}
+                <!-- </router-link> -->
+              </a>
+            </div>
+            <div class="notice-date">
+              {{ item.date }}
+            </div>
           </div>
         </div>
       </el-scrollbar>
@@ -31,7 +31,7 @@ import CellWrapper from "../common/CellWrapper.vue";
 
 export default {
   name: "NoticeAnnouncement",
-  props: ['cellContentHeight'],
+  props: ["cellContentHeight"],
   components: { CellWrapper },
   data() {
     return {
@@ -130,10 +130,9 @@ export default {
       // 查询加载数据
       this.noticeList = this.testData;
     },
-    opening(){
-         window.location.href="#/business/notice" 
-
-    }
+    opening() {
+      window.location.href = "#/business/notice";
+    },
   },
 };
 </script>
@@ -155,7 +154,7 @@ export default {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  max-width: 75%;
+  flex: 1;
 }
 .notice-item .notice-title a {
   color: #4e4e4e;

src/views/Home/common/CellHeader.vue

@@ -27,12 +27,17 @@ export default {
 }
 .cell-header_title::before {
   content: "";
-  border-left: 5px solid #647092;
+  border-left: 5px solid var(--themecolor);
   margin-right: 10px;
+  border-radius: 2.5px;
 }
 .cell-header [class^="el-icon-"] {
   font-weight: bold;
   cursor: pointer;
+  color: var(--themecolor);
+  /* color: #95979b; */
+}
+.cell-header .el-icon-more {
   color: #95979b;
 }
 .cell-header [class^="el-icon-"]:hover {

src/views/Home/common/quick.vue

 <template>
   <el-scrollbar style="height: 100%">
-    <router-link
-      v-for="(item, index) in quickVisitItem"
-      :key="index"
-      :to="item.path"
-    >
-      <div
-        class="content-wrapper"
-        :style="{ height: Math.floor(cellContentHeight * 0.33) + 'px' }"
+    <div style="padding: 15px;">
+      <router-link
+        v-for="(item, index) in quickVisitItem"
+        :key="index"
+        :to="item.path"
       >
-        <div class="visit-item-wrapper">
-          <div class="visit-item">
-            <img :src="item.icon" alt="" />
-            <span>{{ item.name }}</span>
+        <div
+          class="content-wrapper"
+          :style="{ height: Math.floor((cellContentHeight - 30) * 0.33) + 'px' }"
+        >
+          <div class="visit-item-wrapper">
+            <div class="visit-item">
+              <img :src="item.icon" alt="" />
+              <span>{{ item.name }}</span>
+            </div>
           </div>
         </div>
-      </div>
-    </router-link>
-
+      </router-link>
+    </div>
     <el-dialog
       :visible="visible"
       title="设置"
@@ -177,7 +178,7 @@ export default {
 }
 .visit-item span {
   color: #303133;
-  font-size: 14px;
+  font-size: 12px;
   margin-top: 10px;
 }
 .visit-item:hover span {

src/views/Layout/Header.vue

 <template>
   <div class="self-header">
-    <div style="display: inline-block; margin: 5px 15px 5px 0; height: 50px">
+    <div style="display: inline-block; height: 40px">
       <img src="../../assets/logo.png" alt="" style="height: 100%" />
     </div>
     <div class="self_header_label">
-      <h2 style="font-size: 30px">国际结算系统</h2>
+      <h2>国际结算系统</h2>
+      <h2 style="margin-left: 15px;">International Settlement System</h2>
     </div>
     <div class="header-tool">
       <div class="header-subInstName">  
@@ -390,50 +391,46 @@ export default {
 </script>
 
 <style>
-.self-header {
-  height: 100%;
-  /* background-color: #eeeeee; */
-  /* margin-bottom: 5px; */
-  background-image: url("../../assets/head_bg.png");
-}
-.self-header h2 {
-  margin: 0;
-  padding: 0;
-}
 .header-subInstName {
   display: inline-block;
   margin-right: 12px;
   text-align: right;
-  color: #fff;
   font-size: 12px;
   padding: 0px 15px 0px 0px;
-  border-right: 1px solid antiquewhite;
+  border-right: 1px solid #707070;
 }
 .self-header {
   height: 100%;
   /* background-color: #eeeeee; */
   /* margin-bottom: 5px; */
-  background-image: url("../../assets/head_bg.png");
-  position: relative;
-  padding: 0px 0px 0px 12px;
-  background-size: cover;
+  /* background-image: url("../../assets/head_bg.png"); */
+  /* position: relative; */
+  padding: 0px 0px 0px 30px;
+  /* background-size: cover; */
+  background-image: linear-gradient(#ededed, #dbebfc);
+  border-bottom: solid 5px #2346dd;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
 }
 
 .self-header h2 {
   margin: 0;
   padding: 0;
-  font-size: 22px;
   display: inline;
+  font-weight: unset;
+  font-size: 22px;
 }
 
 .self_header_label {
   /* color: antiquewhite; */
-  color: #fff;
+  color: #1b54b8;
   /* margin-top: 10px !important; */
-  position: relative;
-  top: 12.778px;
+  /* position: relative; */
+  /* top: 12.778px; */
   /* left: 10px; */
   padding: 0px 15px;
+  margin-left: 15px;
   display: inline-table;
   vertical-align: top;
   font-family: "黑体";
@@ -441,6 +438,7 @@ export default {
   border-left: 1px solid #fff;
   /* ui美化 */
   font-size: 30px;
+  border-image: radial-gradient(#2244d4,transparent) 1 20;
 }
 .self_header_label p {
   font-family: "Times New Roman", Times, serif;
@@ -452,12 +450,14 @@ export default {
   display: inline;
 }
 .header-tool {
-  position: absolute;
+  /* position: absolute; */
   text-align: right;
-  right: 35px;
-  top: 22px;
-  color: #fff;
+  /* right: 35px; */
+  /* top: 22px; */
+  color: #707070;
   font-size: 14px;
+  margin-right: 35px;
+  flex: 1;
 }
 .header-tool-item {
   display: inline-block;