能效诊断
This commit is contained in:
jiangyinzhi
@@ -0,0 +1,772 @@
|
||||
<template>
|
||||
<div class="energyindex">
|
||||
<!-- <Header :title="title" @onClickLeft="onClickLeft" /> -->
|
||||
<!-- 原本的回退存放地 -->
|
||||
<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: '能效管理',
|
||||
total: [
|
||||
{ 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工业企业
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
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()
|
||||
},
|
||||
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>
|
||||
Reference in New Issue
Block a user