Browse Source

修改首页样式

fujunwen 4 years ago
parent
commit
91cb6669f9
2 changed files with 37 additions and 23 deletions
  1. 35 21
      src/views/homepage/index.vue
  2. 2 2
      src/views/statistics/index.vue

+ 35 - 21
src/views/homepage/index.vue

@@ -93,7 +93,7 @@
                         <div class='row' v-for='(item , index) in changeList' :key='index'>
                             <article>{{item.changedate}}</article>
                             <article>{{item.type}}</article>
-                            <el-tooltip effect="dark" :content="item.content" placement="top">
+                            <el-tooltip effect="dark" :content="item.content" placement="top" :popper-class="'my-tooltip'">
                                 <article>{{item.content || '--'}}</article>
                             </el-tooltip>
                         </div>
@@ -120,15 +120,15 @@ export default {
             plazaId:'',
             srcList: {
                 0: {
-                    1: require('../../assets/images/icons/edit_blue_b.png'), //1.正常(蓝色) 2.警告(黄色) 3.严重(红色)
-                    2: require('../../assets/images/icons/edit_yellow_b.png'),
-                    3: require('../../assets/images/icons/edit_red_b.png')
-                },
-                1: {
                     1: require('../../assets/images/icons/fix_blue_b.png'),
                     2: require('../../assets/images/icons/fix_yellow_b.png'),
                     3: require('../../assets/images/icons/fix_red_b.png')
                 },
+                1: {
+                    1: require('../../assets/images/icons/edit_blue_b.png'), //1.正常(蓝色) 2.警告(黄色) 3.严重(红色)
+                    2: require('../../assets/images/icons/edit_yellow_b.png'),
+                    3: require('../../assets/images/icons/edit_red_b.png')
+                },
                 2: {
                     1: require('../../assets/images/icons/search_blue_b.png'),
                     2: require('../../assets/images/icons/search_yellow_b.png'),
@@ -248,7 +248,11 @@ export default {
                         this.cardsList.forEach(item=>{
                             item.forEach(eq=>{
                                 if (eq.rptGlsmsStatisticsList) {
+                                    eq.assetTypeList.forEach(item => {
+                                        item.is_exception_num = 10
+                                    })   
                                     eq.rptGlsmsStatisticsList.forEach(each => {
+                                        
                                         if (each.type === 1) {
                                             each.sort = 0
                                         } else if (each.type === 2) {
@@ -257,7 +261,7 @@ export default {
                                             each.sort = 2
                                         }
                                     })
-                                    console.log(eq.rptGlsmsStatisticsList)
+                                  
                                     eq.rptGlsmsStatisticsList = sortBy(eq.rptGlsmsStatisticsList, (item) => {return item.sort})
                                 }
                             })
@@ -330,8 +334,13 @@ export default {
     }
 }
 </script>
+<style>
+.my-tooltip{
+    max-width: 400px!important;
+}
+</style>
+<style lang='less' scoped>
 
-<style lang='less'>
 .homepage {
     display: flex;
     justify-content: space-between;
@@ -339,6 +348,7 @@ export default {
     padding: 15px;
     background: rgba(242, 245, 247, 1);
     overflow: auto;
+   
     .homepage-cards-content {
         display: flex;
         width: 70%;
@@ -355,7 +365,7 @@ export default {
                 border-radius: 4px;
                 box-shadow: 0 2px 10px 0 rgba(31, 36, 41, 0.06);
                 .card-item-title{
-                    height: 42px;
+                    height: 36px;
                     display: flex;
                     align-items: center;
                     justify-content: space-between;
@@ -367,13 +377,13 @@ export default {
                     h4 {
                         color: white;
                         padding: 1rem;
-                        font-size: 1.6rem;
+                        font-size: 20px;
                         line-height: 1;
                         font-weight: bold;
                     }
                     img.title-img{
-                        width: 2.4rem;
-                        height: 2.4rem; 
+                        width: 24px;
+                        height: 24px; 
                     }
                     img.warning-img{
                         width: 1.8rem;
@@ -407,7 +417,6 @@ export default {
                                     position: relative;
                                     color: #1f2429;
                                     font-size: 1.4rem;
-                                    font-weight: bold;
                                     em {
                                         margin-left: 1rem;
                                         color: #e19e51;
@@ -416,9 +425,10 @@ export default {
                                 }
                                 .exception-number {
                                     position: absolute;
-                                    right: -20%;
+                                    right: -30%;
                                     top: -5px;
                                     height: 1.6rem;
+                                    border: 1px solid white;
                                     border-radius: 8rem;
                                     padding: 0.2rem 0.4rem;
                                     line-height: 1.2rem;
@@ -434,7 +444,8 @@ export default {
                                 align-items: center;
                                 .equip-statis {
                                     .equip-number {
-                                        font-size: 1.8rem;
+                                        font-size: 20px;
+                                        font-family: 'persagy';
                                         font-weight: bold;
                                         color: rgba(31, 36, 41, 1);
                                     }
@@ -446,7 +457,7 @@ export default {
                             }
                         }
                         .equipment-item:hover {
-                            background: #f5f6f7;
+                            background: #E4E6E7;
                         }
                     }
                     .more{
@@ -462,7 +473,7 @@ export default {
                         cursor: pointer;
                         transform: rotate(0);
                         transform-origin: center;
-                        z-index: 10000;
+                        z-index: 100;
                         img{
                             width:14px;
                             height: 14px;
@@ -503,7 +514,6 @@ export default {
                                             margin-right: 1rem;
                                             font-size: 1.2rem;
                                             color: #1f2429;
-                                            font-weight: bold;
                                             white-space: nowrap;
                                         }
                                     }
@@ -516,7 +526,8 @@ export default {
                                             font-weight: normal;
                                         }
                                         em:first-child {
-                                            font-size: 1.6rem;
+                                            font-size: 20px;
+                                            font-family: 'persagy';
                                             font-weight: bold;
                                         }
                                     }
@@ -612,12 +623,16 @@ export default {
     }
     .homepage-nav-list {
         width: calc(30% - 10px);
-        height: 97%;
+        height: 100%;
         background: white;
         .main-title {
             display: flex;
             justify-content: space-between;
+            align-items: center;
             padding: 6px 12px;
+            height: 32px;
+            border-top-right-radius: 4px;
+            border-top-left-radius: 4px;
             margin-bottom: 12px;
             background:#8D9399;
             span:first-child {
@@ -668,7 +683,6 @@ export default {
                     padding: 6px;
                     line-height: 3.2rem;
                     color: #646a73;
-                    font-weight: 600;
                     border-bottom: none;
                     background: #f8f9fa;
                 }

+ 2 - 2
src/views/statistics/index.vue

@@ -133,7 +133,7 @@
                             <div class="tip-triangle" :style="{left: item.title === '第三方检测' ? '12.5rem': '7.8rem'}"> </div>
                         </div>
                     </transition>
-                    <div class='list'>
+                    <div class='list' :style="{overflow:item.expand == 1 ?'auto' : 'hidden'}">
                         <ul>
                             <li v-for='(option , index) in item.data' :key='index'>
                                 <div class='ratio'>
@@ -1577,7 +1577,7 @@ export default {
                 }
                 .list {
                     margin-top: 1.4rem;
-                    overflow: auto;
+                    overflow: hidden;
                     height: calc(100% - 4.5rem);
                     ul {
                         li {