zhenghuang
/
bsdgy-front
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

客户概览，UI修改

Browse Source
master
wyj2080 6 years ago
parent 5a4103bbda
commit 8bc0a81872
1 changed files with 240 additions and 195 deletions
Show Stats Download Patch File Download Diff File

407
src/pages/CustomerView.vue
Unescape Escape View File

@ -4,107 +4,114 @@
<i-col span="32"> <i-col span="32">
<row> <row>
<!--筛选--> <!--筛选-->
<row style="height: 90px;background: #f7f8fa;border: 1px solid #E8ECF2;line-height: 90px"> <row style="margin-top: -2px">
<span style="margin-left: 48px">选择日期</span> <i-col span="4">
<DatePicker v-model="dateRange" class="left-15" type="daterange" placement="bottom-start" split-panels placeholder="请选择日期区间" style="width: 200px" size="small"></DatePicker> <row style="width: 248px;border: 1px solid #E8ECF2;border-radius: 8px;padding: 3px">
<span class="left-15">零售公司选择</span> <span class="date-btn" :style="dateBtnValue === '今日' ? 'background: #2D8CF0;color: #fff' : ''" @click="dateBtnClick('今日')">今日</span>
<Select filterable placeholder="请选择零售公司" v-model="organizationId" class="left-15" style="width:190px" size="small" @on-change="downRegionChange"> <span class="date-btn" :style="dateBtnValue === '本周' ? 'background: #2D8CF0;color: #fff' : ''" @click="dateBtnClick('本周')">本周</span>
<Option v-for="item in organizationList" :value="item.id" :key="item.id">{{ item.name }}</Option> <span class="date-btn" :style="dateBtnValue === '本月' ? 'background: #2D8CF0;color: #fff' : ''" @click="dateBtnClick('本月')">本月</span>
</Select>
<span class="left-15">店铺选择</span>
<Select filterable placeholder="请选择店铺" v-model="shopId" class="left-15" style="width:190px" size="small">
<Option v-for="item in shopList" :value="item.id" :key="item.id">{{ item.name }}</Option>
</Select>
<Button type="primary" style="width: 70px;margin-left: 20px" @click="searchCustomerDataBtnClick" size="small">查询</Button>
</row> </row>
<!--5块客户数-->
<row class="top-10">
<Row type="flex" justify="space-between" class="code-row-bg">
<i-col span="4" class="big-blank" style="border: 1px solid #2EA4E4;border-left: 6px solid #2EA4E4;">
<row class="top-20"><span class="left-10">全部客户（累计）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.allCustomer}}</span></row>
</i-col> </i-col>
<i-col span="4" class="big-blank" style="border: 1px solid #63C16D;border-left: 6px solid #63C16D;"> <i-col span="4" style="height: 38px;line-height: 38px;">
<row class="top-20"><span class="left-10">有效客户（累计）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.validCustomer}}</span></row> <span class="view-text">{{dateBtnValue}}概览</span><span class="view-date">{{viewDate}}</span>
</i-col> </i-col>
</row>
<!--5块客户数-->
<row class="top-20">
<Row type="flex" justify="space-between" class="code-row-bg">
<i-col span="4" class="big-blank" style="border: 1px solid #FFCC00;border-left: 6px solid #FFCC00;"> <i-col span="4" class="big-blank" style="border: 1px solid #FFCC00;border-left: 6px solid #FFCC00;">
<row class="top-20"><span class="left-10">新增客户</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newCustomer}}</span></row> <row class="top-20"><span class="left-10">新增好友</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newCustomer}}</span></row>
</i-col> </i-col>
<i-col span="4" class="big-blank" style="border: 1px solid #EC6A2F;border-left: 6px solid #EC6A2F;"> <i-col span="4" class="big-blank" style="border: 1px solid #EC6A2F;border-left: 6px solid #EC6A2F;">
<row class="top-20"><span class="left-10">新增有效客户</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newValidCustomer}}</span></row> <row class="top-20"><span class="left-10">新增好友（去重）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.newValidCustomer}}</span></row>
</i-col>
<i-col span="4" class="big-blank" style="border: 1px solid #2EA4E4;border-left: 6px solid #2EA4E4;">
<row class="top-20"><span class="left-10">好友总数</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.allCustomer}}</span></row>
</i-col>
<i-col span="4" class="big-blank" style="border: 1px solid #63C16D;border-left: 6px solid #63C16D;">
<row class="top-20"><span class="left-10">好友总数（去重）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.allValidCustomer}}</span></row>
</i-col> </i-col>
<i-col span="4" class="big-blank" style="border: 1px solid #2DC6EA;border-left: 6px solid #2DC6EA;"> <i-col span="4" class="big-blank" style="border: 1px solid #2DC6EA;border-left: 6px solid #2DC6EA;">
<row class="top-20"><span class="left-10">删除拉黑数（累计）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.deleteCustomer}}</span></row> <row class="top-20"><span class="left-10">删除拉黑数（累计去重）</span></row><row><span class="left-25 big-blank-font">{{customerViewVO.validDeleteCustomer}}</span></row>
</i-col> </i-col>
</Row> </Row>
</row> </row>
<!--柱状图--> <!--柱状图-->
<row class="top-10 outline"> <row class="top-10">
<i-col span="16" class="outline">
<span class="blue-logo"></span> <span class="blue-logo"></span>
<span style="display: inline-block;margin-left: 5px">{{sevenDayStartDate}}至{{sevenDayEndDate}}（近七天）趋势图</span> <span style="display: inline-block;margin-left: 5px">{{this.$moment(startTime).format("YYYY-MM-DD")}}至{{this.$moment(endTime).format("YYYY-MM-DD")}}（{{recentName}}）趋势图</span>
<ve-histogram :data="chartData" :extend="chartExtend" :colors="chartColor"></ve-histogram> <ve-histogram :data="chartData" :extend="chartExtend" :colors="chartColor"></ve-histogram>
</row> </i-col>
<!--条形图--> <i-col span="8" class="padding-left-10">
<row class="top-10 outline"> <row class="outline">
<row>
<i-col span="4">
<span class="blue-logo"></span> <span class="blue-logo"></span>
<span style="display: inline-block;margin-left: 5px">客户&会员关联情况</span> <span style="display: inline-block;margin-left: 5px">好友&会员情况</span>
<row style="height: 399px;padding: 99px 15px;">
<i-col span="6" style="border-right: 1px solid #D3D3D3;">
<row style="height: 50px"></row>
<row class="percent-text"><span>好友总数(去重)</span></row>
<row style="height: 25px"></row>
<row class="percent-text"><span>会员总数</span></row>
<row style="height: 50px"></row>
</i-col>
<i-col span="18">
<row style="height: 50px"></row>
<row><span class="percent-span" style="background: #EC6A2F;" :style="percent1"></span><span>{{customerViewVO.allValidCustomer}}</span></row>
<row style="height: 25px"></row>
<row><span class="percent-span" style="background: #FFCC00;" :style="percent2"></span><span>{{customerViewVO.allVipCount}}</span></row>
<row style="height: 50px"></row>
</i-col> </i-col>
<i-col span="16" style="height: 200px;">
<row style="margin-top: 32px;margin-bottom: 23px;text-align: right">
<span :style="allVipPercent" class="inline-center-nowrap">全部会员：{{customerViewVO.common + customerViewVO.vip}}人</span>
</row> </row>
<!--上大括号-->
<row>
<div class="ivu-poptip-popper" :style="allVipPercent" style="position: absolute; will-change: top, left; top: -23px; right: 0px;z-index: 1;min-width: 0px" x-placement="bottom">
<div class="ivu-poptip-content">
<div class="ivu-poptip-arrow" style="border-bottom-color:rgba(0,0,0,.5)"></div>
<div class="ivu-poptip-inner" style="box-shadow: 0px -1px 0px rgba(0,0,0,.4)">
<div class="ivu-poptip-body">
<div class="ivu-poptip-body-content">
<div class="ivu-poptip-body-content-inner"></div>
</div>
</div>
</div>
</div>
</div>
</row> </row>
</i-col>
<row style="height: 28px;margin-top: 3px;background: #ccc;border-radius:14px;overflow: hidden">
<span v-if="customerViewVO.customer > 0 || (customerViewVO.customer === 0 && customerViewVO.common === 0 && customerViewVO.vip === 0)" :style="percent1" style="background: #FFCC00;" class="percent-span">
<Tooltip :content="'未关联的客户：' + customerViewVO.customer" placement="top" transfer><span>未关联的客户</span><span class="left-10">{{customerViewVO.customer}}</span></Tooltip>
</span>
<span v-if="customerViewVO.common > 0 || (customerViewVO.customer === 0 && customerViewVO.common === 0 && customerViewVO.vip === 0)" :style="percent2" style="background: #33CC00;" class="percent-span">
<Tooltip :content="'已关联：' + customerViewVO.common" placement="top" transfer><span>已关联</span><span class="left-10">{{customerViewVO.common}}</span></Tooltip>
</span>
<span v-if="customerViewVO.vip > 0 || (customerViewVO.customer === 0 && customerViewVO.common === 0 && customerViewVO.vip === 0)" :style="percent3" style="background: #EC6A2F;" class="percent-span">
<Tooltip :content="'未关联的会员：' + customerViewVO.vip" placement="top" transfer><span>未关联的会员</span><span class="left-10">{{customerViewVO.vip}}</span></Tooltip>
</span>
</row> </row>
<!--下大括号--> <!--前十名-->
<row> <row class="top-10">
<div class="ivu-poptip-popper" :style="allCustomerPercent" style="position: absolute; will-change: top, left; top: -7px; left: 0px;display: inline-block;z-index: 1;min-width: 0px" x-placement="top"> <i-col span="8">
<div class="ivu-poptip-content"> <row class="outline" style="min-height: 300px">
<div class="ivu-poptip-arrow" style="border-top-color:rgba(0,0,0,.5)"></div> <!----> <span class="blue-logo"></span>
<div class="ivu-poptip-inner" style="box-shadow: 0px 1px 0px rgba(0,0,0,.4)"><!----> <span style="display: inline-block;margin-left: 5px;">零售公司新增好友top10</span>
<div class="ivu-poptip-body"> <row v-if="customerViewVO.orgNewCustomerList.length === 0" style="text-align: center">暂无数据</row>
<div class="ivu-poptip-body-content ivu-poptip-body-content-word-wrap"> <row v-if="customerViewVO.orgNewCustomerList.length > 0" class="pading-12">
<div class="ivu-poptip-body-content-inner"></div> <row><i-col span="2">排行</i-col><i-col span="18">零售公司</i-col><i-col span="4">新增好友</i-col></row>
</div> <row v-for="(item,index) in customerViewVO.orgNewCustomerList" :key="item.orgId">
</div> <i-col span="2">{{index + 1}}</i-col><i-col span="18">{{item.orgName}}</i-col><i-col span="4">{{item.newCustomerCount}}</i-col>
</div> </row>
</div>
</div>
</row> </row>
<row style="margin-top: 23px;text-align: left">
<span :style="allCustomerPercent" class="inline-center-nowrap">全部客户：{{customerViewVO.customer + customerViewVO.common}}人</span>
</row> </row>
</i-col> </i-col>
<i-col span="4">
<i-col span="8" class="padding-left-10">
<row class="outline" style="min-height: 300px">
<span class="blue-logo"></span>
<span style="display: inline-block;margin-left: 5px">店铺新增好友top10</span>
<row v-if="customerViewVO.shopNewCustomerList.length === 0" style="text-align: center">暂无数据</row>
<row v-if="customerViewVO.shopNewCustomerList.length > 0" class="pading-12">
<row><i-col span="2">排行</i-col><i-col span="18">店铺</i-col><i-col span="4">新增好友</i-col></row>
<row v-for="(item,index) in customerViewVO.shopNewCustomerList" :key="item.shopId">
<i-col span="2">{{index + 1}}</i-col><i-col span="18">{{item.shopName}}</i-col><i-col span="4">{{item.newCustomerCount}}</i-col>
</row>
</row>
</row>
</i-col> </i-col>
<i-col span="8" class="padding-left-10">
<row class="outline" style="min-height: 300px">
<span class="blue-logo"></span>
<span style="display: inline-block;margin-left: 5px">推广为0的店铺数</span>
<row v-if="customerViewVO.zeroExtendList.length === 0" style="text-align: center">暂无数据</row>
<row v-if="customerViewVO.zeroExtendList.length > 0" class="pading-12">
<row><i-col span="13">零售公司</i-col><i-col span="6">店铺总数</i-col><i-col span="5">推广为0店铺数</i-col></row>
<row v-for="item in customerViewVO.zeroExtendList" :key="item.orgId">
<i-col span="13">{{item.orgName}}</i-col><i-col span="6">{{item.allShopCount}}</i-col><i-col span="5">{{item.zeroShopCount}}</i-col>
</row>
</row> </row>
</row>
</i-col>
</row><!--条形图结束--> </row><!--条形图结束-->
<Spin style="top: 100px" size="large" fix v-if="spinShow"></Spin> <Spin style="top: 50px" size="large" fix v-if="spinShow"></Spin>
</row> </row>
</i-col> </i-col>
</Row> </Row>
@ -113,61 +120,60 @@
<script> <script>
import customerView from "../services/datacenter/customerView"; import customerView from "../services/datacenter/customerView";
import customerDetail from "../services/datacenter/DataCenter";
export default { export default {
data() { data() {
return { return {
userId: 13, userId: 13,
//加载遮罩 //加载遮罩
spinShow: false, spinShow: false,
dateRange: [], dateBtnValue: "今日",
organizationId: 0, viewDate: this.$moment(new Date()).format("YYYY-MM-DD"),
organizationList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
shopId: 0,
shopList: [{"id":1,"name":"一区"},{"id":2,"name":"二大区"}],
//近七天日期 //近七天日期
sevenDayStartDate: this.$moment(new Date()).add(-6,"days").format("YYYY-MM-DD"), recentName : "近七天",
sevenDayEndDate: this.$moment(new Date()).format("YYYY-MM-DD"), //选中时间
selectStartTime: "",
selectEndTime: "",
//柱状图时间
startTime: "",
endTime: "",
//人数占比 //人数占比
allVipPercent: "width:66.66%", percent1: "width:0%",
percent1: "width:33.33%", percent2: "width:0%",
percent2: "width:33.33%",
percent3: "width:33.33%",
allCustomerPercent: "width:66.66%",
customerViewVO: { customerViewVO: {
allCustomer: 0,
validCustomer: 0,
newCustomer: 0, newCustomer: 0,
newValidCustomer: 0, newValidCustomer: 0,
deleteCustomer: 0, allCustomer: 0,
customer:0, allValidCustomer: 0,
common:0, validDeleteCustomer: 0,
vip:0, allVipCount: 0,
sevenDayCustomerList: [], //柱状图
sevenDayVipList: [], customerList: [],
validCustomerList: [],
//下面3大块
orgNewCustomerList: [],
shopNewCustomerList: [],
zeroExtendList: [],
}, },
chartExtend: { chartExtend: {
barWidth: 28 barWidth: 28
}, },
chartColor:["#ffcc00","#ec6a2f"], chartColor:["#ffcc00","#ec6a2f"],
chartData: { chartData: {
columns: ['date', '新增客户', '新增会员' ], columns: ['date', '新增好友', '新增好友(去重)' ],
rows: [ rows: [
{ 'date': '1/1', '新增客户': 0, '新增会员': 0 }, { 'date': '1/1', '新增好友': 14, '新增好友(去重)': 14 },
{ 'date': '1/2', '新增客户': 0, '新增会员': 0 }, { 'date': '1/1', '新增好友': 20, '新增好友(去重)': 10 },
{ 'date': '1/3', '新增客户': 0, '新增会员': 0 }, { 'date': '1/1', '新增好友': 30, '新增好友(去重)': 25 },
{ 'date': '1/4', '新增客户': 0, '新增会员': 0 }, { 'date': '1/1', '新增好友': 11, '新增好友(去重)': 11 },
{ 'date': '1/5', '新增客户': 0, '新增会员': 0 }, { 'date': '1/1', '新增好友': 14, '新增好友(去重)': 14 },
{ 'date': '1/6', '新增客户': 0, '新增会员': 0 }, { 'date': '1/1', '新增好友': 20, '新增好友(去重)': 10 },
{ 'date': '1/7', '新增客户': 0, '新增会员': 0 } { 'date': '1/1', '新增好友': 30, '新增好友(去重)': 25 },
] ]
}, },
} }
}, },
mounted: function () { mounted: function () {
this.downShopData(); this.dateBtnClick('今日');
this.downRegionData();
this.getMainList();
}, },
methods: { methods: {
//页面重绘 //页面重绘
@ -178,26 +184,28 @@
}, },
//占比重绘 //占比重绘
percentResize: function(){ percentResize: function(){
let customer = this.customerViewVO.customer; let allValidCustomer = this.customerViewVO.allValidCustomer;
let common = this.customerViewVO.common; let allVipCount = this.customerViewVO.allVipCount;
let vip = this.customerViewVO.vip; let sum = allValidCustomer + allVipCount;
let sum = customer + common + vip;
if(sum === 0){ if(sum === 0){
this.allVipPercent = "width:66.66%"; this.percent1 = "width:0%";
this.percent1 = "width:33.33%"; this.percent2 = "width:0%";
this.percent2 = "width:33.33%";
this.percent3 = "width:33.33%";
this.allCustomerPercent = "width:66.66%";
return; return;
} }
let p1 = Math.floor(customer/sum * 100 *100)/100; if(allValidCustomer > allVipCount){
let p2 = Math.floor(common/sum * 100 *100)/100; let p2 = Math.floor(allVipCount/allValidCustomer * 100 *100)/100 * 0.8;
let p3 = Math.floor(vip/sum * 100 *100)/100; this.percent1 = "width:80%";
this.allVipPercent = "width:" + (p2 + p3) + "%";
this.percent1 = "width:" + p1 + "%";
this.percent2 = "width:" + p2 + "%"; this.percent2 = "width:" + p2 + "%";
this.percent3 = "width:" + p3 + "%"; }
this.allCustomerPercent = "width:" + (p1 + p2) + "%"; if(allValidCustomer < allVipCount){
let p1 = Math.floor(allValidCustomer/allVipCount * 100 *100)/100 * 0.8;
this.percent1 = "width:" + p1 + "%";
this.percent2 = "width:80%";
}
if(allValidCustomer === allVipCount){
this.percent1 = "width:80%";
this.percent2 = "width:80%";
}
}, },
//0转null //0转null
@ -205,58 +213,51 @@
if(value === 0){return null;} if(value === 0){return null;}
return value; return value;
}, },
//店铺list //日期按钮
downShopData: function () { dateBtnClick: function(value){
let that = this; switch (value) {
that.shopList = [{"id":0,"name":"全部"}]; case '今日': this.dateBtnValue = "今日";this.recentName = "近七天";this.dateSelectChange('今日');this.chartExtend.barWidth = 28;break;
let request = case '本周': this.dateBtnValue = "本周";this.recentName = "本周";this.dateSelectChange('本周');this.chartExtend.barWidth = 28;break;
{userId: this.userId,regionId: null}; case '本月': this.dateBtnValue = "本月";this.recentName = "本月";this.dateSelectChange('本月');this.chartExtend.barWidth = 8;break;
customerDetail.downShopData(request, function (data) {
data = data.data.results;
if(data){
for(let i=0;i<data.length;i++){
let entity = data[i];
if(entity){
that.shopList.push(entity);
}
}
} }
}) this.getMainList();
}, },
//区域list //日期改变
downRegionData: function () { dateSelectChange: function(value){
let that = this; //概览日期text
that.organizationList = [{"id":0,"name":"全部"}]; let nowDate = this.$moment(new Date());
let request = switch (value) {
{userId: this.userId}; case '今日':
customerDetail.downRegionData(request, function (data) { this.viewDate = nowDate.format("YYYY-MM-DD");
data = data.data.results; this.selectStartTime = this.$moment(new Date()).format("YYYY-MM-DD 00:00:00");
if(data){ this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
for(let i=0;i<data.length;i++){ this.startTime = this.$moment(new Date()).add(-6, "days").format("YYYY-MM-DD 00:00:00");
let entity = data[i]; this.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
if(entity){ break;
that.organizationList.push(entity); case '本周':
this.viewDate = nowDate.startOf('week').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
this.selectStartTime = this.$moment(new Date()).startOf("week").format("YYYY-MM-DD 00:00:00");
this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
this.startTime = this.selectStartTime;
this.endTime = this.$moment(new Date()).endOf("week").format("YYYY-MM-DD HH:mm:ss");
break;
case '本月':
this.viewDate = nowDate.startOf('month').format("YYYY-MM-DD") + ' 至 ' + this.$moment(new Date()).format("YYYY-MM-DD");
this.selectStartTime = this.$moment(new Date()).startOf("month").format("YYYY-MM-DD 00:00:00");
this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
this.startTime = this.selectStartTime;
this.endTime = this.$moment(new Date()).endOf("month").format("YYYY-MM-DD HH:mm:ss");
break;
} }
}
}
})
},
//区域选择
downRegionChange: function () {
this.downShopData();
},
//搜索
searchCustomerDataBtnClick: function () {
this.getMainList();
}, },
/**mainList*/ /**mainList*/
getMainList: function(){ getMainList: function(){
let request = { let request = {
userId: this.userId, userId: this.userId,
sevenDayStartTime: this.$moment(new Date()).add(-6,"days").format("YYYY-MM-DD 00:00:00"), selectStartTime: this.selectStartTime == null ? null : this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00"),
sevenDayEndTime: this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss"), selectEndTime: this.selectEndTime == null ? null : this.$moment(this.selectEndTime).format("YYYY-MM-DD HH:mm:ss"),
organizationId: this.checkZero(this.organizationId), startTime: this.startTime,
shopId: this.checkZero(this.shopId), endTime: this.endTime
}; };
let that = this; let that = this;
//加载遮罩 //加载遮罩
@ -269,14 +270,18 @@
data = data.data.results; data = data.data.results;
that.customerViewVO = data; that.customerViewVO = data;
that.chartData.rows = []; that.chartData.rows = [];
for(let i=-6;i<=0;i++){ if(that.startTime && that.endTime){
let date = that.$moment(new Date()).add(i, "days").format("M-DD"); let tmpStartTime = that.startTime;
while(that.$moment(tmpStartTime).format("YYYY-MM-DD") <= that.$moment(that.endTime).format("YYYY-MM-DD")){
let date = that.$moment(tmpStartTime).format("M-DD");
let obj = { let obj = {
date:date, date:date,
"新增客户": that.customerViewVO.sevenDayCustomerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD")).length, "新增好友": that.customerViewVO.customerList.filter(customer => date === that.$moment(customer.registerTime).format("M-DD")).length,
"新增会员": that.customerViewVO.sevenDayVipList.filter(vip => date === that.$moment(vip.registerTime).format("M-DD")).length, "新增好友(去重)": that.customerViewVO.validCustomerList.filter(vip => date === that.$moment(vip.registerTime).format("M-DD")).length,
}; };
that.chartData.rows.push(obj); that.chartData.rows.push(obj);
tmpStartTime = that.$moment(tmpStartTime).add(1,"days").format("YYYY-MM-DD HH:mm:ss");
}
} }
//占比重绘 //占比重绘
that.percentResize(); that.percentResize();
@ -289,6 +294,28 @@
} }
</script> </script>
<style scoped> <style scoped>
/*日期按钮*/
.date-btn{
display: inline-block;
width: 80px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 8px;
cursor: pointer;
}
/*概览字体*/
.view-text{
font-size: 18px;
font-weight: 600;
font-family: "Microsoft YaHei";
}
/*概览日期*/
.view-date{
font-size: 16px;
color: #97A4B3;
margin-left: 10px;
}
/*5大块客户数*/ /*5大块客户数*/
.big-blank{ .big-blank{
height: 100px; height: 100px;
@ -308,20 +335,11 @@
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
} }
/*占比样式*/
.percent-span{
display: inline-block;
vertical-align: middle;
height: 28px;
line-height: 28px;
background: #FFCC00;
color: #fff;
text-align: center;
}
/*外面的边框*/ /*外面的边框*/
.outline{ .outline{
border: #e8ecf2 2px solid; border: #e8ecf2 2px solid;
padding: 10px; padding: 10px;
border-radius: 4px;
} }
.left-10{ .left-10{
margin-left: 10px; margin-left: 10px;
@ -335,9 +353,36 @@
.top-10{ .top-10{
margin-top: 10px; margin-top: 10px;
} }
.top-15{
margin-top: 15px;
}
.top-20{ .top-20{
margin-top: 20px; margin-top: 20px;
} }
.top-30{
margin-top: 30px;
}
.pading-12{
padding: 12px;
}
.padding-left-10{
padding-left: 10px;
}
/*占比样式*/
.percent-text{
height: 38px;
line-height: 38px;
text-align: right;
padding-right: 8px;
}
.percent-span{
display: inline-block;
vertical-align: middle;
height: 38px;
line-height: 38px;
margin-right: 5px;
}
/*全部客户样式*/ /*全部客户样式*/
.inline-center-nowrap{ .inline-center-nowrap{

Write Preview
Loading…
Cancel
Save