Browse Source

xxd 集团 项目首页修改

fujunwen 4 years ago
parent
commit
78350e7ae6
2 changed files with 316 additions and 179 deletions
  1. 211 99
      src/views/homepage/index.vue
  2. 105 80
      src/views/statistics/index.vue

+ 211 - 99
src/views/homepage/index.vue

@@ -1,12 +1,14 @@
 <template>
     <main class='homepage'>
         <section class='homepage-cards-content'>
- 
             <div  v-for='(arr , index) in cardsList' :key='index' class="items-container">
-                <section v-for="(item ,index) in arr" :key="index" class='cards-item' :style='itemStyle(item)' >
+                <section v-for="(item ,index) in arr" :key="index" class='cards-item'  >
                     <section class="card-item-title">
-                        <img :src="imgSrc(item.smsxt)" />
-                        <h4>{{item.smsxtname}}</h4>
+                        <div>
+                            <img :src="imgSrc(item.smsxt)" />
+                            <h4>{{item.smsxtname}}</h4>
+                        </div>
+                        <img :style='itemStyle(item)' src="../../assets/images/icons/warning.png" />
                     </section>
                     <section class='equipment-list-container'>
                          <div class="more" @click.stop.capture="expandRestItems(item, index)" v-if="item.hasArrow" :style="{transform: item.expand ? 'rotate(0)' : 'rotate(180deg)'}">
@@ -30,7 +32,7 @@
                                 </section>
                             </div>
                         </div>
-                        <div class='equipment-list' v-if='item.restAssetTypeList.length && item.expand'>
+                        <div class='equipment-list' v-if='item.restAssetTypeList.length && item.expand' style="padding-top:0;">
                             <div @click='navToInnerPage(item, equip)' class='equipment-item' v-for='(equip , index) in item.restAssetTypeList' :key="index">
                                 <div class='equip-name' >
                                     <h5>{{equip.category_name}}</h5>
@@ -49,19 +51,25 @@
                         </div>
                     </section>
                     <!-- <div v-else class="empty-content"   style="border-top:none; height:8rem;line-height:8rem;">暂无数据</div> -->
-                    <div v-if="item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length" class="alert-list" @click="navToGanttPage(item)">
-                        <div class="alert-item"  v-for="(option , index) in  item.rptGlsmsStatisticsList" :key="index" >
-                            <img v-if="option.total"  :src="srcList[option.type][option.level]" > 
-                            <div  class="content" v-if="option.total">
-                                <p class="line">
-                                    <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' :  '第三方检测' }}</span>
-                                    <span>
-                                        <em :style="{color:item.level == 1? '#646C73':'#C13830'}">{{option.due_num}}</em>/<em>{{option.unfinished}}</em>/<em >{{option.total}}</em>
-                                    </span>
-                                </p>
-                                <p class='desc'>
-                                    {{option.type ===1 ? '即将逾期/未完成/当月总任务' : '即将逾期/未完成/本年总任务'  }}
-                                </p>
+                    <div  class="alert-list-container" v-if="item.rptGlsmsStatisticsList && item.rptGlsmsStatisticsList.length" >
+                        <div class="alert-list" @click="navToGanttPage(item)">
+                            <div class="alert-item"  v-for="(option , index) in  item.rptGlsmsStatisticsList" :key="index" >
+                                <div  class="content" v-if="option.total">
+                                    <div class="number">
+                                        <div class="left">
+                                            <img   :src="srcList[option.type][option.level]" > 
+                                            <span >{{option.type === 1 ? '维保': option.type === 0 ? '专维' :  '第三方检测' }}</span>
+                                        </div>
+                                        <p class="line">
+                                            <span>
+                                                <em :style="{color:item.level == 1? '#646C73':'#C13830'}">{{option.due_num}}</em>/<em>{{option.unfinished}}</em>/<em >{{option.total}}</em>
+                                            </span>
+                                        </p>
+                                    </div>
+                                    <p class='desc'>
+                                        {{option.type ===1 ? '即将逾期/未完成/当月总任务' : '即将逾期/未完成/本年总任务'  }}
+                                    </p>
+                                </div>
                             </div>
                         </div>
                     </div>
@@ -70,11 +78,11 @@
             </div>
         </section>
         <section class='homepage-nav-list'>
+            <div class='main-title'>
+                <span>说明书更新记录</span>
+                <a class="more-records" @click='navToIntroduce'>更多</a>
+            </div>
             <nav>
-                <div class='main-title'>
-                    <span>说明书更新记录</span>
-                    <a @click='navToIntroduce'>更多</a>
-                </div>
                 <div class='table'>
                     <div class='row table-header'>
                         <article>日期 </article>
@@ -96,6 +104,7 @@
 
 <script>
 import { getCardList, getQueryList, getChangeList } from '@/api/homePage'
+import {sortBy} from 'lodash'
 import moment from 'moment'
 export default {
     data() {
@@ -123,7 +132,8 @@ export default {
                     2: require('../../assets/images/icons/search_yellow_b.png'),
                     3: require('../../assets/images/icons/search_red_b.png')
                 }
-            }
+            },
+            
         }
     },
     created () {
@@ -139,6 +149,8 @@ export default {
     },
 
     methods: {
+         
+
         imgSrc(code) {
             return require('../../assets/images/icons/' + code + '.png')
         },
@@ -183,7 +195,7 @@ export default {
             }
             if (num > 0) {
                 return {
-                    borderLeft:"3px solid #EF6B66"
+                    display:"block"
                 }
             }
         },
@@ -229,7 +241,15 @@ export default {
                                 this.cardsList[1].push(item)
                             }
                         })
-                        console.log(this.cardsList)
+                        this.cardsList.forEach(item=>{
+                            item.forEach(eq=>{
+                         
+                                if (eq.rptGlsmsStatisticsList && eq.rptGlsmsStatisticsList.length === 3) {
+                                    eq.rptGlsmsStatisticsList.push(eq.rptGlsmsStatisticsList.shift())
+                                    console.log(eq.rptGlsmsStatisticsList)
+                                }
+                            })
+                        })
                     }
                 }
             })
@@ -309,14 +329,13 @@ export default {
     overflow: auto;
     .homepage-cards-content {
         display: flex;
-        width: 100%;
+        width: 70%;
         overflow: auto;
         .items-container{
             width: 50%;
             .cards-item {
                 width: calc(100% - 5px);
                 height: auto;
-                padding: 0.4rem;
                 padding-bottom: 0;
                 margin-bottom: 1rem;
                 transition: 0.5s;
@@ -324,19 +343,29 @@ export default {
                 border-radius: 4px;
                 box-shadow: 0 2px 10px 0 rgba(31, 36, 41, 0.06);
                 .card-item-title{
+                    height: 42px;
                     display: flex;
                     align-items: center;
+                    justify-content: space-between;
                     padding-left: 12px;
+                    padding-right: 12px;
+                    border-radius: 4px;
+                    border-bottom-left-radius: 0;
+                    border-bottom-right-radius: 0;
                     h4 {
-                        color: rgba(31, 36, 41, 1);
+                        color: white;
                         padding: 1rem;
                         font-size: 1.6rem;
+                        line-height: 1;
                         font-weight: bold;
                     }
                     img{
                         width: 24px;
-                        height: 24px;
-                        filter: saturate(0);
+                        height: 24px; 
+                    }
+                    >div{
+                        display: flex;
+                        align-items: center;
                     }
                 }
                 .equipment-list-container{
@@ -344,12 +373,16 @@ export default {
                     .equipment-list {
                         display: flex;
                         flex-wrap: wrap;
-                        padding:0 1rem 1.2rem;
+                        justify-content: flex-start;
+                        padding: 1rem ;
+                        padding-bottom: 0.4rem;
                         .equipment-item {
-                            width: 33.33%;
-                            padding: 0.6rem;
+                            width: 25%;
                             box-sizing: border-box;
-                            border-radius: 4px;
+                            border-radius: 2px;
+                            padding: 1rem;
+                            margin-right: 0.4rem;
+                            background: #EFF0F1;
                             cursor: pointer;
                             .equip-name {
                                 position: relative;
@@ -358,6 +391,7 @@ export default {
                                     position: relative;
                                     color: #1f2429;
                                     font-size: 1.4rem;
+                                    font-weight: bold;
                                     em {
                                         margin-left: 1rem;
                                         color: #e19e51;
@@ -419,55 +453,65 @@ export default {
                         }
                     }
                 }
-                .alert-list {
-                    display: flex;
-                    align-items: center;
-                    justify-content: flex-start;
-                    border-top: 1px solid #f5f6f7;
-                    padding: 2rem 0;
-                    height: auto;
-                    border-radius: 4px;
-                    cursor: pointer;
-                    &:hover {
-                        background: #f5f6f7;
-                    }
-                    .alert-item {
+                .alert-list-container{
+                    padding:0 1rem 1rem 1rem;
+                    .alert-list {
                         display: flex;
-                        width: 33.33%;
                         align-items: center;
-                        img {
-                            width: 4rem;
-                            height: 4rem;
-                            margin:0 1rem;
+                        justify-content: flex-start;
+                        height: auto;
+                        padding: 1rem 0;
+                        padding-left: 1rem;
+                        border-radius: 4px;
+                        background: #F5F6F7;
+                        cursor: pointer;
+                        &:hover {
+                            background: #f5f6f7;
                         }
-                        .content {
-                            padding-right: 2rem;
-                            .line {
-                                display: flex;
-                                justify-content: space-between;
-                                align-items: center;
-                                line-height: 1;
-                                span:first-child {
-                                    margin-right: 1rem;
+                        .alert-item {
+                            display: flex;
+                            width: 33.33%;
+                            align-items: center;
+                            img {
+                                width: 2.4rem;
+                                height: 2.4rem;
+                                margin-right: 0.6rem;
+                            }
+                            .content {
+                                .number {
+                                    display: flex;
+                                    justify-content: space-between;
+                                    align-items: center;
+                                    .left{
+                                        span {
+                                            margin-right: 1rem;
+                                            font-size: 1.2rem;
+                                            color: #1f2429;
+                                            font-weight: bold;
+                                            white-space: nowrap;
+                                        }
+                                    }
+                                    .line {
+                                        display: flex;
+                                        justify-content: space-between;
+                                        align-items: center;
+                                        line-height: 1;
+                                        em {
+                                            font-weight: normal;
+                                        }
+                                        em:first-child {
+                                            font-size: 1.6rem;
+                                            font-weight: bold;
+                                        }
+                                    }
+                                }
+                                .desc {
+                                    padding-top: 0.6rem;
+                                    color: #8d9399;
                                     font-size: 1.2rem;
-                                    color: #1f2429;
-                                    font-weight: bold;
+                                    text-align: right;
                                     white-space: nowrap;
                                 }
-                                em {
-                                    font-weight: normal;
-                                }
-                                em:first-child {
-                                    font-size: 1.6rem;
-                                    font-weight: bold;
-                                }
-                            }
-                            .desc {
-                                padding-top: 0.6rem;
-                                color: #8d9399;
-                                font-size: 1.2rem;
-                                text-align: right;
-                                white-space: nowrap;
                             }
                         }
                     }
@@ -481,31 +525,99 @@ export default {
                 }
             }
         }
+        div:first-child.items-container{
+            section:nth-of-type(1).cards-item{
+                section.card-item-title{
+                    background: linear-gradient(to left, #3E64CB, #6C8BE3);
+                }
+                .equip-number{
+                    color: #3E64CB!important;
+                }
+            }
+            section:nth-of-type(2).cards-item{
+                section.card-item-title{
+                    background: linear-gradient(to left, #2BAD88, #54D6B2);
+                }
+                .equip-number{
+                    color: #2BAD88!important;;
+                }
+            }
+            section:nth-of-type(3).cards-item{
+                section.card-item-title{
+                    background: linear-gradient(to left, #3998DB, #70BBF0);
+                }
+                .equip-number{
+                    color: #3998DB!important;;
+                }
+            }
+            section:nth-of-type(4).cards-item{
+                section.card-item-title{
+                    background: linear-gradient(to left, #3E64CB, #6C8BE3);
+                }
+                .equip-number{
+                    color: #3E64CB!important;;
+                }
+            }
+        }
+        div:last-child.items-container{
+            section:nth-of-type(1).cards-item{
+                section.card-item-title{
+                    background: linear-gradient(to left, #3998DB, #70BBF0);
+                }
+                .equip-number{
+                    color: #3998DB!important;;
+                }
+            }
+            section:nth-of-type(2).cards-item{
+                section.card-item-title{
+                    background: linear-gradient(to left, #3E64CB, #6C8BE3);
+                }
+                .equip-number{
+                    color: #3E64CB!important;;
+                }
+            }
+            section:nth-of-type(3).cards-item{
+                section.card-item-title{
+                    background: linear-gradient(to left, #3998DB, #70BBF0);
+                }
+                .equip-number{
+                    color: #3998DB!important;;
+                }
+            }
+            section:nth-of-type(4).cards-item{
+                section.card-item-title{
+                    background: linear-gradient(to left, #2BAD88, #54D6B2);
+                }
+                .equip-number{
+                    color: #2BAD88!important;;
+                }
+            }
+        }
     }
     .homepage-nav-list {
-        width: calc(25% - 10px);
-        nav:first-child {
-            height: 320px;
-        }
-        nav:last-child {
-            height: 320px;
+        width: calc(30% - 10px);
+        height: 97%;
+        background: white;
+        .main-title {
+            display: flex;
+            justify-content: space-between;
+            padding: 6px 12px;
+            margin-bottom: 12px;
+            background:#8D9399;
+            span:first-child {
+                color: #ffffff;
+                font-weight: bold;
+                font-size: 1.6rem;
+            }
+            a{
+                color: white;
+                line-height: 1;
+            }
         }
         nav {
+            height: 94%;
             padding: 14px 16px;
-            margin-bottom: 10px;
-            background: white;
-            overflow: hidden;
-            box-shadow: 0 2px 10px 0 rgba(31, 36, 41, 0.06);
-            .main-title {
-                display: flex;
-                justify-content: space-between;
-                margin-bottom: 12px;
-                span:first-child {
-                    color: #1f2429;
-                    font-weight: bold;
-                    font-size: 1.4rem;
-                }
-            }
+            overflow: auto;
             .table {
                 .row {
                     display: flex;
@@ -520,14 +632,14 @@ export default {
                         width: 20%;
                     }
                     article:nth-of-type(2) {
-                        width: 30%;
+                        width: 20%;
                         padding-left: 1.2rem;
                         white-space: nowrap;
                         overflow: hidden;
                         text-overflow: ellipsis;
                     }
                     article:nth-of-type(3) {
-                        width: calc(50% - 30px);
+                        width: calc(60% - 30px);
                         overflow: hidden;
                         text-overflow: ellipsis;
                         display: -webkit-box;

+ 105 - 80
src/views/statistics/index.vue

@@ -55,30 +55,30 @@
                             :key='index'
                         >
                             <div class='system-name'>
-                                <div :class='["img", item.selected ? "selected":""]'><img :src='imgSrc(item.smsxt)' /></div>
-                                <span>{{item.smsxtname}}</span>
+                                <img :src='imgSrc(item.smsxt)' /> 
+                                <span>{{item.smsxtname.replace('系统','')}}</span>
                             </div>
                             <section v-if='item.assetTypeList.length' class="system-equipments-container">
                                 <div class="more" @click.stop.capture="expandRestItems(item, index)" v-if="item.hasArrow" :style="{transform: item.expand ? 'rotate(0)' : 'rotate(180deg)'}">
                                     <img v-if="item.showColor" src="../../assets/images/icons/arrow.png">
                                     <img v-else src="../../assets/images/icons/grey.png">
                                 </div>
-                                <div class='system-equipments'  style="padding-top:2rem; margin-bottom:2rem;">
+                                <div class='system-equipments'   >
                                     <div class='number' v-for='(equip , index) in item.assetTypeList' :key='index'>
                                         <div class="title">
                                             <P :style="{width: equip.category_name.length>6 ? '10rem' : 'auto'}"  :title="equip.category_name">{{equip.category_name}}</p>
-                                            <span :style="{right: equip.is_exception_num > 99 ? '-2rem' :  equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
+                                            <span :style="{right: equip.category_name.length > 6 ? '0' :'-1rem'}"  v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
                                         </div>
-                                        <p> <span>{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
+                                        <p> <span class="amount">{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
                                     </div>
                                 </div>
-                                <section class="system-equipments" v-show="item.expand && item.restAssetTypeList.length" style="padding-bottom:2rem;">
+                                <section class="system-equipments" v-show="item.expand && item.restAssetTypeList.length" style="margin-top:0.4rem;">
                                     <div class='number' v-for='(equip , index) in item.restAssetTypeList' :key='index'>
                                         <div class="title">
                                             <P :title="equip.category_name">{{equip.category_name}}</p>
-                                            <span :style="{right: equip.is_exception_num > 99 ? '-2rem' :  equip.is_exception_num > 9 ? '-1.5rem' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
+                                            <span :style="{right: equip.category_name.length > 6 ? '0' :'-1rem'}" v-if='equip.is_exception_num'>{{equip.is_exception_num}}</span>
                                         </div>
-                                        <p> <span>{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
+                                        <p> <span  class="amount">{{equip.asset_num}}</span><span>{{equip.category_name === '屋面logo' ? '个' : equip.category_name === '玻璃护栏' ? '段' : '台'}}</span></p>
                                     </div>
                                 </section>
                             </section>
@@ -90,20 +90,22 @@
             <section class='map-box'>
                 <section class='cards-list'>
                     <div class='card' @click='navToManageNumber'>
-                        <div class='img'>
-                            <img src='../../assets/images/icons/ratio.png' />
+                        <div class="card-title">
+                            <img src='../../assets/images/icons/curve.png' />
+                            <p>上线管理说明书广场数量</p>
+                        </div>
+                        <div class="describe">
+                            <span style="margin-right:20px;">上线数量 <strong>{{plazaInfoCount.upwcCount}}</strong></span>
                         </div>
-                        <p>上线管理说明书广场数量</p>
-                        <strong>{{plazaInfoCount.upwcCount}}</strong>
                     </div>
                     <div class='card' @click='navToIntroduceUpdate'>
-                        <div class='img'>
-                            <img src='../../assets/images/icons/audit.png' />
+                        <div class="card-title">
+                            <img src='../../assets/images/icons/amount.png' />
+                            <p>当月说明书更新数量</p>
                         </div>
-                        <p>当月说明书更新数量</p>
                         <div class="describe">
-                            <span style="margin-right:20px;">更新广场数量 <strong>{{plazaInfoCount.rptChangeCount}}</strong></span>
-                            <span>更新事项数量<strong>{{plazaInfoCount.zhsxChangeCount}}</strong></span>
+                            <div style="margin-right:20px;">更新广场数量 <strong>{{plazaInfoCount.rptChangeCount}}</strong></div>
+                            <div>更新事项数量<strong>{{plazaInfoCount.zhsxChangeCount}}</strong></div>
                         </div>
                     </div>
                 </section>
@@ -323,20 +325,26 @@ export default {
          * @Param data 当前点击的项
          */
         createNavpathByData(data) {
-            let pathArr = data.path.split('/')
-            let newArr = []
-            pathArr.forEach(item => {
-                newArr.push(item.split('&'))
-            })
-            this.crumbsHtml = newArr
-            if (data.level === 1) {
-                this.currentZoneData = data
+            if (data.path) {
+                let pathArr = data.path.split('/')
+                let newArr = []
+                pathArr.forEach(item => {
+                    newArr.push(item.split('&'))
+                })
+                this.crumbsHtml = newArr
+                if (data.level === 1) {
+                    this.currentZoneData = data
+                    this.crumbsHtml = []
+                } else if (data.level === 0) {
+                    this.crumbsHtml.pop()
+                    this.currentZoneData = this.getDataByCityCcode(data.cparentcode)
+                } else {
+                    this.currentZoneData = data
+                }
+            } 
+            else {
                 this.crumbsHtml = []
-            } else if (data.level === 0) {
-                this.crumbsHtml.pop()
-                this.currentZoneData = this.getDataByCityCcode(data.cparentcode)
-            } else {
-                this.currentZoneData = data
+                this.currentZoneData = this.regulateDistrictData[0]
             }
         },
         /**
@@ -375,10 +383,6 @@ export default {
          * @Param data 返回选中项的数据
          */
         selectProjectItem(ids) {
-            if (!ids && this.currentZoneData) {
-                this.pantGroupMap(this.regulateDistrictData[0], this.systemList[0].smsxt)
-                this.createNavpathByData(this.regulateDistrictData[0])
-            }
             let data = this.getDataByCityCcode(ids)
             if (data.level !== 0) {  //  level=0时 plazaId必填
                 this.currentLevel = data.level
@@ -388,6 +392,7 @@ export default {
             } else {
                 let parentNode = this.getDataByCityCcode(data.cparentcode)
                 this.currentLevel = parentNode.level
+                this.selectedZone = parentNode.ccode
                 this.queryPlazaInfoCount(parentNode.ccode, parentNode.level)
                 this.getEventStatusData(parentNode.level, parentNode.ccode)
                 this.getSystemList(parentNode.ccode, parentNode.level) 
@@ -729,12 +734,13 @@ export default {
                 center: new L.LatLng(38, 103),
                 zoom: 4,
                 crs: L.CRS.EPSG3857,
-                // minZoom:
                 zoomControl: false,
                 boxZoom: false,
                 attributionControl: false,
                 contextmenu: true,
                 contextmenuWidth: 140,
+                minZoom: 4,
+                maxZoom: 10,
                 closePopupOnClick:true,
                 doubleClickZoom:false,
                 wheelPxPerZoomLevel:20
@@ -996,7 +1002,6 @@ export default {
             })
             Promise.all(promiseAll).then(result => {
                 this.loadingInstance.close()
-                console.log(layerArr, this.currentLevel)
                 if (this.currentLevel === 3) {
                     layerArr.forEach(item => {
              
@@ -1313,51 +1318,46 @@ export default {
                 overflow-y:auto;
                 ul {
                     li.system-item {
+                        position: relative;
                         display: flex;
                         justify-content: flex-start;
-                        align-items: center;
+                        align-items: stretch;
                         width: calc(100% - 3.2rem);
-                        margin-left: 1.6rem;
+                        margin-left: 0.8rem;
+                        margin-bottom: 0.4rem;
                         box-sizing: border-box;
-                        border: 1px solid white;
+                        border: 1px solid #eff0f1;
                         border-radius: 4px;
-                        border-bottom: 1px solid #eff0f1;
                         transition: 0.5s;
                         cursor: pointer;
                         .system-name {
+                            position: absolute;
+                            top:0;
+                            bottom: 0;
                             display: flex;
+                            flex-direction: column;
                             align-items: center;
-                            width: 25%;
-                            padding: 1.2rem 0 1.2rem 1rem ;  
-                            border-right: 1px solid #EFF0F1;
-                            .img {
-                                height: 2.8rem;
-                                width: 2.8rem;
-                                display: flex;
-                                align-items: center;
-                                justify-content: center;
-                                border-radius: 50%;
-                                background: #dce7f0;
-                                filter: saturate(0%);
-                                img {
-                                    width: 3.2rem;
-                                    height: 3.2rem;
-                                }
-                            }
-                            .selected {
-                                filter: saturate(100%);
+                            justify-content: center;
+                            flex-shrink:1;
+                            flex-grow:1;
+                            width: 18%;
+                            height: auto;
+                            img {
+                                width: 3.2rem;
+                                height: 3.2rem;
+                                margin-bottom: 0.6rem;
                             }
                             span {
-                                display: inline-block;
-                                margin-left: 0.8rem;
-                                color: #1f2429;
+                                color: white;
                                 font-size: 1.4rem;
                                 font-weight: bolder;
                             }
                         }
                         .system-equipments-container{
                             position: relative;
-                            width:75%;
+                            width:88%;
+                            padding: 0.6rem;
+                            margin-left: 18%;
                             .more{
                                 position: absolute;
                                 display: flex;
@@ -1381,12 +1381,16 @@ export default {
                             .system-equipments {
                                 display: flex;
                                 align-items: center;
-                                padding-left: 1.4rem;
                                 .number {
-                                    width: 33.3%;
+                                    width: 30%;
+                                    margin-right: 1%;
+                                    background: #EFF0F1;
+                                    border-radius: 2px;
+                                    padding: 1.4rem 0 1rem 0.4rem;
                                     .title{
                                         display: inline-block;
                                         position: relative;
+                                        line-height: 1;
                                         p{
                                             display: inline-block;
                                             position: relative;
@@ -1399,7 +1403,7 @@ export default {
                                         }
                                         span {
                                             position: absolute;
-                                            top: -1.6rem;
+                                            top: -1rem;
                                             right: -2rem;
                                             padding: 2px 4px;
                                             border-radius: 0.9rem;
@@ -1408,12 +1412,15 @@ export default {
                                             background: #fde3e2;
                                         }
                                     }
-                                    p:nth-of-type(2) {
+                                    p {
                                         span:first-child {
                                             color: #1f2429;
                                             font-size: 1.8rem;
                                             font-weight: bold;
                                         }
+                                        .amount{
+                                            font-size: bold;
+                                        }
                                     }
                                 }
                                 
@@ -1424,13 +1431,25 @@ export default {
                         border-color: rgba(0, 118, 197, 0.6);
                         box-shadow: 0 2px 10px 0px rgba(0, 118, 197, 0.4);
                     }
-                    li:last-child {
-                        border-bottom: none;
-                    }
                     li:hover {
                         border-color: #E4E5E7;
                         box-shadow: 0 2px 10px 0px rgba(195, 199, 203, 0.4);
                     }
+                    li:nth-of-type(1), li:nth-of-type(4), li:nth-of-type(7) {
+                        .system-name{
+                            background: linear-gradient(to left, #4064CC, #6C8BE2);
+                        }
+                    }
+                    li:nth-of-type(2), li:nth-of-type(5), li:nth-of-type(6) {
+                        .system-name{
+                            background: linear-gradient(to left, #3998DB, #70BBEF);
+                        }
+                    }
+                    li:nth-of-type(3), li:nth-of-type(8) {
+                        .system-name{
+                            background: linear-gradient(to left, #30AE88, #53D5B1);
+                        }
+                    }
                 }
             }
         }
@@ -1443,21 +1462,29 @@ export default {
                 .card {
                     width: 50%;
                     box-sizing: border-box;
-                    padding: 12px 16px;
                     border-radius: 4px;
                     background: white;
-                    .img {
+                    .card-title{
+                        position: relative;
+                        height: 5rem;
                         display: flex;
-                        justify-content: center;
                         align-items: center;
-                        width: 4.4rem;
-                        height: 4.4rem;
-                        border-radius: 50%;
+                        padding: 10px 12px;
+                        color:white;
+                        font-size: 16px;
+                        border-radius: 4px;
+                        background-image: url("../../assets/images/icons/title_bg.png");
+                        background-position: center center;
+                        background-size: 100%;
                         img {
                             width: 2rem;
                             height: 2rem;
+                            margin-right: 1.2rem;
                         }
                     }
+                    .describe{
+                        padding: 2rem 4rem;
+                    }
                 }
                 div:first-child.card{
                     margin-right: 12px;
@@ -1469,13 +1496,11 @@ export default {
                 div:nth-of-type(2) .img {
                     background: rgba(0, 214, 185, 0.14);
                 }
-                p {
-                    color: #646c73;
-                    margin: 12px 0 8px 0;
-                }
+                
                 strong {
                     color: #1f2429;
                     font-size: 2.4rem;
+                    margin-left: 3rem;
                 }
             }
             .map-container {