jiangyinzhi
788 lines
22 KiB
Vue
788 lines
22 KiB
Vue
<template>
|
|
<div class="energyindex">
|
|
<!-- <Header :title="title" @onClickLeft="onClickLeft" /> -->
|
|
<img v-if="warningShow" src="@/assets/warning.jpg" alt="" />
|
|
|
|
<!-- 原本的回退存放地 -->
|
|
<van-nav-bar class="energyindex-header" />
|
|
<div class="all">
|
|
<!-- 顶部统计 -->
|
|
<div class="total-box">
|
|
<div class="total-item" v-for="(item, index) in total" :key="index">
|
|
<div class="total-item-num" :style="{ color: item.color }">
|
|
{{ item.num }}
|
|
</div>
|
|
<div class="total-item-text">{{ item.name }}</div>
|
|
<div class="total-item-img"></div>
|
|
</div>
|
|
</div>
|
|
<!-- 任务管理 -->
|
|
<div class="manage-btn" @click="taskManage">
|
|
<div class="manage-btn-img">
|
|
<img src="@/assets/gl_wh_icon@2x.png" alt="" />
|
|
任务管理
|
|
</div>
|
|
<img class="manage-btn-img-go" src="@/assets/go.png" alt="" />
|
|
</div>
|
|
|
|
<!-- 卡片列表 -->
|
|
<div class="card-list">
|
|
<!-- tab栏 -->
|
|
<div class="tab">
|
|
<div
|
|
v-show="activeIndex === '1'"
|
|
class="tab-img tab-active"
|
|
@click="handleSelect('1')"
|
|
>
|
|
<img src="@/assets/active1.png" alt="" /> 公共建筑
|
|
</div>
|
|
<div
|
|
v-show="activeIndex === '2'"
|
|
class="tab-img"
|
|
@click="handleSelect('1')"
|
|
>
|
|
<img src="@/assets/deactived1.png" alt="" /> 公共建筑
|
|
</div>
|
|
<div
|
|
v-show="activeIndex === '1'"
|
|
class="tab-img"
|
|
@click="handleSelect('2')"
|
|
>
|
|
<img src="@/assets/deactive2.png" alt="" />工业企业
|
|
</div>
|
|
<div
|
|
v-show="activeIndex === '2'"
|
|
class="tab-img tab-active"
|
|
@click="handleSelect('2')"
|
|
>
|
|
<img src="@/assets/active2.png" alt="" />工业企业
|
|
</div>
|
|
</div>
|
|
<!-- 搜索框 -->
|
|
<div class="search">
|
|
<img src="@/assets/search.png" alt="" />
|
|
<input
|
|
type="text"
|
|
placeholder="请输入搜索文字"
|
|
@keydown.enter="searchEveryItem"
|
|
v-model="searchValue"
|
|
/>
|
|
</div>
|
|
<van-list
|
|
v-model="loading"
|
|
:finished="finished"
|
|
finished-text="没有更多了"
|
|
:immediate-check="immediateCheck"
|
|
ref="immediateList"
|
|
@load="onLoad"
|
|
>
|
|
<!-- 工业企业 -->
|
|
<div v-if="activeIndex == '2'">
|
|
<div
|
|
v-if="searchFaly"
|
|
class="everyItem"
|
|
@click="goDataAcquisition(searchRespon )"
|
|
>
|
|
<div class="everyItem-header">
|
|
<div class="everyItem-header-div1">
|
|
{{ searchRespon.customerName }}
|
|
</div>
|
|
<!-- <div class="everyItem-header-div2">
|
|
公共建筑/企业用户
|
|
</div> -->
|
|
<div class="everyItem-header-div2">
|
|
<div
|
|
:class="
|
|
'right-type ' + 'type' + '-' + searchRespon.customerType
|
|
"
|
|
>
|
|
{{ searchRespon.customerTypeName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="everyItem-mian">{{ searchRespon.orgName }}</div>
|
|
<div class="everyItem-footer">
|
|
<img src="@/assets/item-bot-left.png" alt="" />{{
|
|
searchRespon.detailAddress
|
|
}}
|
|
</div>
|
|
</div>
|
|
<!-- 每一项 -->
|
|
<div
|
|
v-else
|
|
class="everyItem"
|
|
v-for="(item, index) in fomtList"
|
|
:key="index+'-'+item.equipId"
|
|
@click="goDataAcquisition(item)"
|
|
>
|
|
<div class="everyItem-header">
|
|
<div class="everyItem-header-div1">{{ item.customerName }}</div>
|
|
<!-- <div class="everyItem-header-div2">
|
|
公共建筑/企业用户
|
|
</div> -->
|
|
<div class="everyItem-header-div2">
|
|
<div
|
|
:class="'right-type ' + 'type' + '-' + item.customerType"
|
|
>
|
|
{{ item.customerTypeName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="everyItem-mian">{{ item.orgName }}</div>
|
|
<div class="everyItem-footer">
|
|
<img src="@/assets/item-bot-left.png" alt="" />{{
|
|
item.detailAddress
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!--公共建筑 -->
|
|
<div v-if="activeIndex == '1'">
|
|
<div
|
|
v-if="searchFaly"
|
|
class="everyItem"
|
|
@click="customerIformation(searchRespon)"
|
|
>
|
|
<div class="everyItem-header">
|
|
<div class="everyItem-header-div1">
|
|
{{ searchRespon.customerName }}
|
|
</div>
|
|
<!-- <div class="everyItem-header-div2">
|
|
公共建筑/企业用户
|
|
</div> -->
|
|
<div class="everyItem-header-div2">
|
|
<div
|
|
:class="
|
|
'right-type ' + 'type' + '-' + searchRespon.customerType
|
|
"
|
|
>
|
|
{{ searchRespon.customerTypeName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="everyItem-mian">{{ searchRespon.orgName }}</div>
|
|
<div class="everyItem-footer">
|
|
<img src="@/assets/item-bot-left.png" alt="" />{{
|
|
searchRespon.detailAddress
|
|
}}
|
|
</div>
|
|
</div>
|
|
<!-- 每一项 -->
|
|
<div
|
|
v-else
|
|
class="everyItem"
|
|
v-for="(item, index) in fomtList"
|
|
:key="index+'-'+item.equipId"
|
|
@click="customerIformation(item)"
|
|
>
|
|
<div class="everyItem-header">
|
|
<div class="everyItem-header-div1">{{ item.customerName }}</div>
|
|
<!-- <div class="everyItem-header-div2">
|
|
公共建筑/企业用户
|
|
</div> -->
|
|
<div class="everyItem-header-div2">
|
|
<div
|
|
:class="'right-type ' + 'type' + '-' + item.customerType"
|
|
>
|
|
{{ item.customerTypeName }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="everyItem-mian">{{ item.orgName }}</div>
|
|
<div class="everyItem-footer">
|
|
<img src="@/assets/item-bot-left.png" alt="" />{{
|
|
item.detailAddress
|
|
}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</van-list>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script>
|
|
// import Header from "@/components/headerNew";
|
|
import { getUserInfo, getStatisticAPI } from '@/api/api.js'
|
|
import { getCode, getAi } from '@/api/common.js'
|
|
import { Dialog } from 'vant';
|
|
export default {
|
|
components: {
|
|
[Dialog.Component.name]: Dialog.Component,
|
|
},
|
|
// components: {
|
|
// Header,
|
|
// },
|
|
data() {
|
|
return {
|
|
ai: '',
|
|
title: '能效管理',
|
|
total0: [
|
|
{ name: '已完成用户数', num: '', color: '#00ad9f' },
|
|
{ name: '已完成公共机构', num: '', color: '#ffae00' },
|
|
{ name: '已完成工业企业', num: '', color: '#0078ff' },
|
|
{ name: '用户总数', num: '', color: '#00ad9f' },
|
|
{ name: '公共机构', num: '', color: '#ffae00' },
|
|
{ name: '工业企业', num: '', color: '#0078ff' }
|
|
],
|
|
total1: [
|
|
{ name: '已完成客户数', num: '', color: '#00ad9f' },
|
|
{ name: '已完成公共机构', num: '', color: '#ffae00' },
|
|
{ name: '已完成工业企业', num: '', color: '#0078ff' },
|
|
{ name: '客户总数', num: '', color: '#00ad9f' },
|
|
{ name: '公共机构', num: '', color: '#ffae00' },
|
|
{ name: '工业企业', num: '', color: '#0078ff' }
|
|
],
|
|
list: [],
|
|
typeList: [],
|
|
activeIndex: '1', //tab栏高亮
|
|
loading: false, //加载
|
|
finished: false, //完成
|
|
// pageNum: 1, //当前页数
|
|
// pageSize: 5, //每页多少条
|
|
allPage: 0, //总共多少条
|
|
immediateCheck: false,
|
|
page: {
|
|
pageNum: 1, //当前页数
|
|
pageSize: 5, //每页多少条
|
|
type: '01'
|
|
},
|
|
|
|
searchValue: '', //搜索的内容
|
|
searchRespon: {}, //搜索结果
|
|
searchFaly: false, //展示搜索结果
|
|
type: '', //01公共建筑02工业企业
|
|
warningShow: false,
|
|
}
|
|
},
|
|
computed: {
|
|
total(){
|
|
return this.$store.getters.validate? this.total0: this.total1
|
|
},
|
|
fomtList() {
|
|
this.list.forEach(v => {
|
|
this.typeList.forEach(ev => {
|
|
ev.child.forEach(ele => {
|
|
if (v.customerType == ele.code) {
|
|
v.customerTypeName = ev.name + '/' + ele.name
|
|
// v.customerTypeName = ele.name;
|
|
}
|
|
})
|
|
})
|
|
})
|
|
return this.list
|
|
},
|
|
isload() {
|
|
return this.list.length == this.allPage
|
|
}
|
|
},
|
|
watch: {
|
|
searchValue(curVal) {
|
|
if (curVal == '') {
|
|
this.searchEveryItem()
|
|
}
|
|
}
|
|
},
|
|
created() {
|
|
this.getStatistic()
|
|
this.getCustomerType()
|
|
// this.init()
|
|
this.warningShow= process.env.VUE_APP_CITY_TYPE=='xj'
|
|
},
|
|
mounted() {
|
|
// this.getAi()
|
|
if(this.$route.query.type == 2) {
|
|
this.handleSelect('2')
|
|
} else {
|
|
this.handleSelect('1')
|
|
}
|
|
},
|
|
methods: {
|
|
// //获取到ai
|
|
// async getAi() {
|
|
// const params = sessionStorage.getItem('saikey')
|
|
// const res = await getAi({ai: params})
|
|
// if(res.code == 0 && !res.data) {
|
|
// return
|
|
// }
|
|
// this.ai = res.data
|
|
// // Dialog.confirm({
|
|
// // title: '标题',
|
|
// // message: `${res.data}`,
|
|
// //}).then(() => {
|
|
// // var cInput = document.createElement("input");
|
|
// // cInput.value = res.data;
|
|
// // document.body.appendChild(cInput);
|
|
// // cInput.select(); // 选取文本框内容
|
|
// // // 执行浏览器复制命令
|
|
// // // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签）
|
|
// // // Input要在正常的编辑状态下原生复制方法才会生效
|
|
// // document.execCommand("copy");
|
|
// // document.body.removeChild(cInput);
|
|
// // // on confirm
|
|
// //})
|
|
// },
|
|
// 搜索
|
|
async searchEveryItem() {
|
|
if (!this.searchValue) {
|
|
this.searchFaly = false
|
|
}
|
|
this.page.pageNum = 1
|
|
this.page.pageSize = 5
|
|
this.init()
|
|
},
|
|
//查询统计信息
|
|
async getStatistic() {
|
|
const params = { id: 123 }
|
|
const res = await getStatisticAPI(params)
|
|
if (res.code === 0) {
|
|
this.total[0].num = res.data.finishTotal
|
|
this.total[1].num = res.data.finishPublicTotal
|
|
this.total[2].num = res.data.finishEnterpriseTotal
|
|
this.total[3].num = res.data.total
|
|
this.total[4].num = res.data.publicTotal
|
|
this.total[5].num = res.data.enterpriseTotal
|
|
}
|
|
},
|
|
// 返回
|
|
onClickLeft() {
|
|
this.$router.go(-1)
|
|
},
|
|
|
|
// 任务管理
|
|
taskManage() {
|
|
this.$router.push('/taskmanage')
|
|
},
|
|
// 客户信息详情
|
|
customerIformation(item) {
|
|
const data = {
|
|
customerId: item.customerId,
|
|
}
|
|
const detail = {
|
|
equipId: item.equipId,
|
|
item
|
|
}
|
|
sessionStorage.setItem('tidCid', JSON.stringify(data))
|
|
sessionStorage.setItem('detail', JSON.stringify(detail) )
|
|
sessionStorage.setItem('customerType', 1)
|
|
this.$router.push(`/customeriformation`)
|
|
},
|
|
// 跳转到工业企业--客户能效管理
|
|
goDataAcquisition(item) {
|
|
const data = {
|
|
customerId: item.customerId,
|
|
}
|
|
const detail = {
|
|
equipId: item.equipId,
|
|
item
|
|
}
|
|
sessionStorage.setItem('tidCid', JSON.stringify(data))
|
|
sessionStorage.setItem('detail', JSON.stringify(detail) )
|
|
sessionStorage.setItem('customerType', 2)
|
|
this.$router.push(`/customer`)
|
|
},
|
|
//获取列表数据
|
|
async init() {
|
|
const data = {
|
|
pageNum: this.page.pageNum,
|
|
pageSize: this.page.pageSize,
|
|
type: '0' + this.activeIndex,
|
|
customerName: this.searchValue
|
|
}
|
|
const res = await getUserInfo(data) // 修改
|
|
if (res.code == 0) {
|
|
this.list = res.data.list
|
|
this.allPage = res.data.total
|
|
if(this.isload) {
|
|
this.immediateCheck = true
|
|
this.finished = true
|
|
} else {
|
|
this.immediateCheck = false
|
|
this.finished = false
|
|
}
|
|
}
|
|
},
|
|
//查询客户类型
|
|
async getCustomerType() {
|
|
const data = {
|
|
codeSortId: '80000001004',
|
|
codeType: 'khlx'
|
|
}
|
|
const res = await getCode(data)
|
|
if (res.code === 0) {
|
|
this.typeList = res.data
|
|
}
|
|
},
|
|
//tab栏切换效果
|
|
async handleSelect(val) {
|
|
this.activeIndex = val
|
|
this.immediateCheck = false
|
|
this.allPage = 0
|
|
this.page.pageNum = 1
|
|
this.page.pageSize = 5
|
|
this.page.type = '0' + this.activeIndex
|
|
this.searchValue = ''
|
|
// this.list = []
|
|
this.init()
|
|
},
|
|
// 滚动加载
|
|
onLoad() {
|
|
// 异步更新数据
|
|
setTimeout(async () => {
|
|
this.page.pageNum++
|
|
this.allPage = 0
|
|
const data = {
|
|
customerName: this.searchValue,
|
|
pageNum: this.page.pageNum,
|
|
pageSize: this.page.pageSize,
|
|
type: '0' + this.activeIndex
|
|
}
|
|
const res = await getUserInfo(data)
|
|
if (res.code == 0) {
|
|
this.list.push(...res.data.list)
|
|
this.allPage = res.data.total
|
|
}
|
|
// 加载状态结束
|
|
this.loading = false
|
|
// 数据全部加载完成
|
|
if (this.isload) {
|
|
this.immediateCheck = false
|
|
this.finished = true
|
|
return
|
|
}
|
|
|
|
}, 1000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.energyindex {
|
|
.energyindex-header {
|
|
height: 120px;
|
|
width: 100%;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-image: url('~@/assets/energyindex-header.png');
|
|
::v-deep.van-nav-bar__title {
|
|
font-size: 15px;
|
|
color: #fff;
|
|
opacity: 0.9;
|
|
}
|
|
::v-deep.van-icon-arrow-left {
|
|
font-size: 15px;
|
|
color: #fff;
|
|
opacity: 0.9;
|
|
}
|
|
}
|
|
.all {
|
|
width: 100%;
|
|
padding: 13px;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
|
|
.total-box {
|
|
position: absolute;
|
|
top: -70px;
|
|
z-index: 999;
|
|
background-color: #fff;
|
|
border-radius: 5px;
|
|
width: 93%;
|
|
height: 140px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
.total-item-img {
|
|
width: 2px;
|
|
height: 50px;
|
|
position: absolute;
|
|
top: -10px;
|
|
left: -12px;
|
|
background-image: url('~@/assets/lin_pic@2x.png');
|
|
}
|
|
.total-item {
|
|
position: relative;
|
|
margin: 10px -3px;
|
|
width: 33%;
|
|
border-radius: 5px;
|
|
text-align: center;
|
|
box-sizing: border-box;
|
|
// border-right: 1px solid #666666;
|
|
// box-shadow: 1px 0px 0px 0px rgb(225, 225, 225, 0);
|
|
.total-item-text {
|
|
color: #808080;
|
|
font-size: 13px;
|
|
}
|
|
.total-item-num {
|
|
background-image: url('~@/assets/total-item-num.png');
|
|
font-size: 17px;
|
|
width: 55px;
|
|
height: 30px;
|
|
font-weight: 700;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
.manage-btn {
|
|
margin-top: 70px;
|
|
background-image: url('~@/assets/manage-btn.png');
|
|
height: 50px;
|
|
width: 100%;
|
|
border-radius: 8px;
|
|
padding: auto 20px;
|
|
color: #fff;
|
|
opacity: 0.9;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
line-height: 50px;
|
|
box-sizing: border-box;
|
|
.manage-btn-img-go {
|
|
width: 35px;
|
|
height: 35px;
|
|
margin: auto 20px;
|
|
}
|
|
.manage-btn-img {
|
|
display: flex;
|
|
img {
|
|
width: 16px;
|
|
height: 16px;
|
|
margin: auto 17px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-list {
|
|
margin-top: 10px;
|
|
background-color: white;
|
|
border-radius: 5px;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
.search {
|
|
display: flex;
|
|
border: 1px solid #f2f2f2;
|
|
opacity: 0.5;
|
|
border-radius: 6px;
|
|
margin-top: 10px;
|
|
padding: 5px 10px;
|
|
box-sizing: border-box;
|
|
img {
|
|
width: 15px;
|
|
height: 15px;
|
|
margin-right: 10px;
|
|
}
|
|
}
|
|
.everyItem:last-child {
|
|
border: 0;
|
|
}
|
|
.everyItem {
|
|
margin-top: 10px;
|
|
padding: 5px 0 5px 5px;
|
|
border-bottom: 1px dashed #e9e9e9;
|
|
box-sizing: border-box;
|
|
.everyItem-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 5px;
|
|
.everyItem-header-div1 {
|
|
border-left: 3px solid #10968b;
|
|
padding-left: 10px;
|
|
box-sizing: border-box;
|
|
font-weight: 700;
|
|
color: #10968b;
|
|
font-size: 16px;
|
|
white-space: nowrap; //规定段落中的文本不进行换行
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
}
|
|
.everyItem-header-div2 {
|
|
text-align: center;
|
|
width: 37%;
|
|
color: #fff;
|
|
}
|
|
}
|
|
.everyItem-mian {
|
|
display: inline;
|
|
margin-left: 5px;
|
|
opacity: 0.8;
|
|
font-size: 13px;
|
|
margin-bottom: 5px;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
border-bottom: 1px solid #efefef;
|
|
white-space: nowrap; //规定段落中的文本不进行换行
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.everyItem-footer {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
flex: 1;
|
|
margin-top: 10px;
|
|
font-size: 16px;
|
|
display: flex;
|
|
img {
|
|
width: 18px;
|
|
height: 18px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
}
|
|
.tab {
|
|
display: flex;
|
|
color: #999999;
|
|
border-bottom: 1px dashed #d9d9d9;
|
|
font-size: 15px;
|
|
box-sizing: border-box;
|
|
.tab-img {
|
|
display: flex;
|
|
font-weight: 700;
|
|
padding: 10px;
|
|
box-sizing: border-box;
|
|
img {
|
|
width: 17px;
|
|
height: 17px;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
.tab-active {
|
|
color: #2c938b;
|
|
margin-bottom: -1px;
|
|
border-bottom: 2px solid #2c938b;
|
|
}
|
|
}
|
|
.card-item:last-child {
|
|
border-bottom: 0px dashed #999999;
|
|
}
|
|
.card-item {
|
|
border-bottom: 1px dashed #999999;
|
|
border-radius: 5px;
|
|
overflow: hidden;
|
|
margin-top: 10px;
|
|
.item-top {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.item-top-left {
|
|
padding: 15px;
|
|
.item-customerName {
|
|
color: #10968b;
|
|
font-size: 19px;
|
|
font-weight: bold;
|
|
border-left: 3px solid #10968b;
|
|
padding-left: 10px;
|
|
}
|
|
p {
|
|
color: #a1a1a1;
|
|
margin: 3px;
|
|
// overflow: hidden;
|
|
// white-space: nowrap;
|
|
// text-overflow: ellipsis;
|
|
border-bottom: 1px solid #999999;
|
|
}
|
|
}
|
|
.item-top-right {
|
|
padding: 5px;
|
|
height: 18px;
|
|
margin-top: 10px;
|
|
.item-customerName {
|
|
font-weight: 700;
|
|
}
|
|
p {
|
|
font-size: 15px;
|
|
line-height: 18px;
|
|
color: white;
|
|
border-radius: 0 0 0 10px;
|
|
}
|
|
}
|
|
}
|
|
.item-bot {
|
|
padding: 0 15px 15px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.item-bot-left {
|
|
display: flex;
|
|
div {
|
|
width: 14px;
|
|
height: 14px;
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: 100% 100%;
|
|
}
|
|
}
|
|
p {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.right-type {
|
|
width: 100%;
|
|
font-size: 13px;
|
|
padding: 5px;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
color: #fff;
|
|
border-radius: 0 0 0 10px;
|
|
white-space: nowrap; //规定段落中的文本不进行换行
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
.type-101 {
|
|
background: #ff8208;
|
|
}
|
|
.type-102 {
|
|
background: #ffae00;
|
|
}
|
|
.type-103 {
|
|
background: #ffef08;
|
|
}
|
|
.type-104 {
|
|
background: #ffc508;
|
|
}
|
|
.type-105 {
|
|
background: #f7ff08bb;
|
|
}
|
|
.type-106 {
|
|
background: #d3d848bb;
|
|
}
|
|
.type-107 {
|
|
background: #787a33bb;
|
|
}
|
|
|
|
.type-201 {
|
|
background: #0078ff;
|
|
}
|
|
.type-202 {
|
|
background: #1477e2;
|
|
}
|
|
.type-203 {
|
|
background: #1776e2d5;
|
|
}
|
|
.type-204 {
|
|
background: #14a8e2d8;
|
|
}
|
|
.type-205 {
|
|
background: #2d89cf;
|
|
}
|
|
.type-206 {
|
|
background: #5aa2da;
|
|
}
|
|
.type-207 {
|
|
background: #7faed3;
|
|
}
|
|
.type-208 {
|
|
background: #5f71b0;
|
|
}
|
|
.type-209 {
|
|
background: #84a4bd;
|
|
}
|
|
.type-210 {
|
|
background: #9bb3c5;
|
|
}
|
|
}
|
|
</style>
|