Browse Source

集团首页修改样式

fujunwen 4 years ago
parent
commit
dccc8ff71d
3 changed files with 27 additions and 49 deletions
  1. 11 20
      src/assets/css/dark.less
  2. 12 22
      src/assets/css/light.less
  3. 4 7
      src/views/statistics/index.vue

+ 11 - 20
src/assets/css/dark.less

@@ -39,6 +39,7 @@
     }
     .p-tabs-card-item-active{
       color: white;
+      background: #275489;
     }
   }
   /deep/.el-dialog__body{
@@ -47,7 +48,7 @@
   /deep/.p-select-search{
     .p-select-search-box{
       background-color: rgba(22,73,206,0.36)!important;
-      border:1px solid #69CFEA!important;
+      border:1px solid #2e5772!important;
       .p-select-choice-name{
         color: white!important;
       }
@@ -98,7 +99,6 @@
         line-height: 56px;
         border-bottom: 1px solid rgba(0, 0, 0, 0.06);
         font-size: 16px;
-        font-weight: bold;
         color: white;
       }
       .table-tabs {
@@ -129,7 +129,7 @@
           tr {
             height: 48px;
             line-height: 48px;
-            border-bottom: 1px solid #e4e6e7;
+            border-bottom: 1px solid #0f215f;
             td {
               padding: 0 24px;
               line-height: 22px;
@@ -145,8 +145,10 @@
       text-align: center;
     }
   }
-
   .menu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     height: 48px;
     min-width: 1366px;
     color: #1f2429;
@@ -161,14 +163,12 @@
       color: #ffffff;
       float: left;
       margin-right: 83px;
-      // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
       background: linear-gradient(
         180deg,
         rgba(16, 57, 121, 1) 0%,
         rgba(22, 38, 63, 1) 100%
       );
       background: linear-gradient(-65deg,transparent 20px,rgba(16, 57, 121, 1) 0);
-      // border:2px solid #68CEE8;
       position: relative;
       .downright {
         position: absolute;
@@ -208,8 +208,6 @@
       & > div {
         line-height: 48px;
         text-align: center;
-        //background: url('../assets/images/topbar1.png') no-repeat;
-        float: left;
         width: 80px;
         height: 48px;
         cursor: pointer;
@@ -227,9 +225,9 @@
       }
     }
     .home-right {
-      position: relative;
-      float: right;
-      margin-right: 20px;
+      display: flex;
+      align-items: center;
+      width: 260px;
       line-height: 48px;
       color: #646c73;
       font-size: 1.4rem;
@@ -237,23 +235,16 @@
       display: flex;
       align-content: center;
       .tip{
-        position: absolute;
-        z-index: 8000;
-        top: 34px;
-        right: 0;
-        padding: 4px 8px;
-        background: rgba(31, 36, 41, 0.8);
+        width: 90px;
         color:white;
         font-size: 14px;
-        line-height: 14px;
         cursor: pointer;
       }
       img {
         height: 24px;
         width: 24px;
         filter: saturate(50);
-        margin-top: -2px;
-        margin-left: 12px;
+        margin-left: 20px;
       }
       .span-out {
         position: relative;

+ 12 - 22
src/assets/css/light.less

@@ -77,29 +77,28 @@
       text-align: center;
     }
   }
-
   .menu {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
     height: 48px;
     min-width: 1366px;
     color: #1f2429;
     font-size: 1.6rem;
-    background: rgba(255, 255, 255, 1);
     box-shadow: 0px 2px 10px 0px rgba(31, 35, 41, 0.1);
     .home {
       width: 280px;
       height: 48px;
-      // line-height: 48px;
       text-align: center;
       cursor: pointer;
       color: #ffffff;
-      float: left;
       margin-right: 83px;
-      // background: linear-gradient(180deg, rgba(54, 156, 247, 1) 0%, rgba(2, 91, 170, 1) 100%);
       background: linear-gradient(
         180deg,
-        rgba(54, 156, 247, 1) 0%,
-        rgba(2, 91, 170, 1) 100%
+        rgba(16, 57, 121, 1) 0%,
+        rgba(22, 38, 63, 1) 100%
       );
+      background: linear-gradient(-65deg,transparent 20px,rgba(16, 57, 121, 1) 0);
       position: relative;
       .downright {
         position: absolute;
@@ -139,8 +138,6 @@
       & > div {
         line-height: 48px;
         text-align: center;
-        //background: url('../assets/images/topbar1.png') no-repeat;
-        float: left;
         width: 80px;
         height: 48px;
         cursor: pointer;
@@ -158,33 +155,26 @@
       }
     }
     .home-right {
-      position: relative;
-      float: right;
-      margin-right: 20px;
+      display: flex;
+      align-items: center;
+      width: 260px;
       line-height: 48px;
       color: #646c73;
       font-size: 1.4rem;
       cursor: pointer;
       display: flex;
       align-content: center;
-       .tip{
-        position: absolute;
-        z-index: 8000;
-        top: 34px;
-        right: 0;
-        padding: 4px 8px;
-        background: rgba(31, 36, 41, 0.8);
+      .tip{
+        width: 90px;
         color:white;
         font-size: 14px;
-        line-height: 14px;
         cursor: pointer;
       }
       img {
         height: 24px;
         width: 24px;
         filter: saturate(0);
-        margin-top: -2px;
-        margin-left: 12px;
+        margin-left: 20px;
       }
       .span-out {
         position: relative;

+ 4 - 7
src/views/statistics/index.vue

@@ -11,14 +11,12 @@
         </div>
       </div>
       <div class="home-right">
-        <span style="color: #8d9399">
-          <span class="span3">{{ times }}</span>
+          <span class="span3" :style="{color:  skinMode === 'light' ? '#8e9298' : 'white'}">{{ times }}</span>
           <img @click="changeSkin" @mouseleave="delayToHideTip" src="../../assets/images/icons/switch.png">
-          <div class="tip"   @mouseenter="cancelHideTip"   >
+          <div class="tip"   @mouseenter="cancelHideTip"  :style="{color:  skinMode === 'light' ? '#8e9298' : '#69c4df'}" >
             {{skinMode === 'light' ? '切换驾驶舱':'切换集团首页'}}
           </div>
-        </span>
-      </div>
+        </div>
     </div>
     <!-- 面包屑 -->
     <nav class="navigation">
@@ -355,12 +353,11 @@
           </table>
              <!-- v-show="pageCount > 9" -->
           <Pagination
-         
             :pageCount="pageCount"
             style="float: right; margin-top: 20px"
             :page="currentPage"
             :pageSize="pageSize"
-            :pageCountShow="true"
+            :pageCountShow="false"
             @change="currentChangeHandle"
           />
         </section>