You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1164 lines
34 KiB
Vue
1164 lines
34 KiB
Vue
<template>
|
|
<div style="width: 100%;height: 100%;background-color: #000d4a;">
|
|
<div class="loading">
|
|
<div class="loadbox"><img src="../../../public/images/loading.gif"> 页面加载中...</div>
|
|
</div>
|
|
<div class="head">
|
|
<h1>
|
|
<img src="../../../static/img/bsd-logo.png" class="title-logo"/>
|
|
</h1>
|
|
</div>
|
|
<div class="mainbox">
|
|
<ul class="clearfix">
|
|
<li>
|
|
<div class="boxall" style="min-height: 100px;padding-bottom: 20px;">
|
|
<div class="div-title">零售公司店均拓客TOP10</div>
|
|
<div style="height: 1px;width: 200px;background-color: #00B1F7;"></div>
|
|
<div id="companyTopList" style="margin-top: 10px;min-height: 100px;">
|
|
<Row v-for="(item,index) in companyTopList" v-bind:key="item.id"
|
|
:style="{'padding-top': '10px','padding-bottom': '10px','border-top': index !== 0 ? '1px #00B1F7 solid' : ''}">
|
|
<i-col span="2">
|
|
<span style="width: 20px;height: 20px;background-color: #FFCC33;border-radius: 50%;display: block;text-align: center;color: #ffffff;">{{item.id}}</span>
|
|
</i-col>
|
|
<i-col span="14">
|
|
<span style="color: #00B1F7;font-size: 14px;">{{item.companyName}}</span>
|
|
</i-col>
|
|
<i-col span="8" style="text-align: right;">
|
|
<span style="color: #00B1F7;font-size: 16px;">{{item.avgAddCustomerNum}}</span>
|
|
</i-col>
|
|
</Row>
|
|
</div>
|
|
<div class="boxfoot"></div>
|
|
</div>
|
|
<div class="boxall" style="height: 400px">
|
|
<div class="alltitle">模块标题样式</div>
|
|
<div class="allnav">
|
|
<ve-bar :after-set-option="companyDataOption" style="height: 380px"></ve-bar>
|
|
</div>
|
|
<div class="boxfoot"></div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="bar">
|
|
<div class="barbox">
|
|
<ul class="clearfix">
|
|
<li class="pulll_left counter-num-text">累计好友总数</li>
|
|
<li class="pulll_left counter-num-text">新增好友总数</li>
|
|
</ul>
|
|
<ul class="clearfix">
|
|
<li class="pulll_left counter">
|
|
<countTo :startVal='startVal' :endVal='endVal' :duration='3000' class="counter-num"></countTo>
|
|
|
|
</li>
|
|
<li class="pulll_left counter">
|
|
<countTo :startVal='startVal2' :endVal='endVal2' :duration='3000' class="counter-num"></countTo>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<!-- <div class="barbox2">-->
|
|
<!-- <ul class="clearfix">-->
|
|
<!-- <li class="pulll_left">累计好友总数</li>-->
|
|
<!-- <li class="pulll_left">新增好友总数</li>-->
|
|
<!-- </ul>-->
|
|
<!-- </div>-->
|
|
</div>
|
|
<div class="map">
|
|
<div class="map1"><img src="../../../public/images/lbx.png"></div>
|
|
<div class="map2"><img src="../../../public/images/jt.png"></div>
|
|
<div class="map3"><img src="../../../public/images/map.png"></div>
|
|
<!-- <div class="map4" id="map_1"></div>-->
|
|
|
|
<div class="map">
|
|
<AreaMap></AreaMap>
|
|
</div>
|
|
</div>
|
|
</li>
|
|
<li>
|
|
<div class="boxall" style="min-height: 100px;">
|
|
<div style="text-align: right;">
|
|
<div class="div-title">门店店均拓客TOP10</div>
|
|
<div style="height: 1px;width: 200px;background-color: #00B1F7;float: right;"></div>
|
|
</div>
|
|
|
|
<div id="storeTopList" style="margin-top: 10px;min-height: 100px;">
|
|
<Row v-for="(item,index) in storeTopList" v-bind:key="item.id"
|
|
:style="{'padding-top': '10px','padding-bottom': '10px','border-top': index !== 0 ? '1px #00B1F7 solid' : ''}">
|
|
<i-col span="2">
|
|
<span style="width: 20px;height: 20px;background-color: #FFCC33;border-radius: 50%;display: block;text-align: center;color: #ffffff;">{{item.id}}</span>
|
|
</i-col>
|
|
<i-col span="14">
|
|
<span style="color: #00B1F7;font-size: 14px;">{{item.storeName}}</span>
|
|
</i-col>
|
|
<i-col span="8" style="text-align: right;">
|
|
<span style="color: #00B1F7;font-size: 16px;">{{item.addCustomerNum}}</span>
|
|
</i-col>
|
|
</Row>
|
|
</div>
|
|
<div class="boxfoot"></div>
|
|
</div>
|
|
|
|
<div class="boxall" style="min-height: 100px;">
|
|
<div class="div-title" style="text-align: center;">实时添加记录</div>
|
|
<div id="customerAddList" style="margin-top: 10px;min-height: 100px;">
|
|
<Row v-for="(item,index) in companyTopList" v-bind:key="item.id"
|
|
style="padding-top: 10px;padding-bottom: 10px;font-size: 14px;color: #ffffff;">
|
|
<Avatar src="https://i.loli.net/2017/08/21/599a521472424.jpg"/>
|
|
<span style="padding-left: 20px;color: #ffffff;">一起种田的约定，加入武汉光谷店</span>
|
|
</Row>
|
|
</div>
|
|
<div class="boxfoot"></div>
|
|
</div>
|
|
<!-- <div class="boxall" style="height: 3rem">-->
|
|
<!-- <div class="alltitle">模块标题样式</div>-->
|
|
<!-- <div class="allnav" id="echart6"></div>-->
|
|
<!-- <div class="boxfoot"></div>-->
|
|
<!-- </div>-->
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
<div class="back"></div>
|
|
</div>
|
|
|
|
</template>
|
|
<script>
|
|
import $ from 'jquery';
|
|
import AreaMap from '../../components/AreaMap';
|
|
import countTo from 'vue-count-to';
|
|
import http from '../../services/customer/CustomerViewHomeService'
|
|
export default {
|
|
components: {
|
|
AreaMap,
|
|
countTo
|
|
},
|
|
data() {
|
|
return {
|
|
startVal: 0,
|
|
endVal: 100000,
|
|
lastVal: null,
|
|
lastVal2: null,
|
|
startVal2: 1,
|
|
endVal2: 10000,
|
|
userId: JSON.parse(sessionStorage.getItem("loginInfo")).userId,
|
|
dateBtnValue: "今日",
|
|
viewDate: this.$moment(new Date()).format("YYYY-MM-DD"),
|
|
//近七天日期
|
|
recentName: "近七天",
|
|
//选中时间
|
|
selectStartTime: "",
|
|
selectEndTime: "",
|
|
//柱状图时间
|
|
startTime: "",
|
|
endTime: "",
|
|
currentDate: this.$moment().format("yyyy/MM/dd"),
|
|
companyTopList: [{
|
|
id: 1,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}, {
|
|
id: 2,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}, {
|
|
id: 3,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}, {
|
|
id: 4,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}, {
|
|
id: 5,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}, {
|
|
id: 6,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}, {
|
|
id: 7,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}, {
|
|
id: 8,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}, {
|
|
id: 9,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}, {
|
|
id: 10,
|
|
name: '杭州分公司',
|
|
num: 999
|
|
}],
|
|
storeTopList: [],
|
|
chartMapData: {
|
|
columns: ['位置', '税收', '人口', '面积'],
|
|
rows: [
|
|
{'位置': '吉林', '税收': 123, '人口': 123, '面积': 92134},
|
|
{'位置': '北京', '税收': 1223, '人口': 2123, '面积': 29234},
|
|
{'位置': '上海', '税收': 2123, '人口': 1243, '面积': 94234},
|
|
{'位置': '浙江', '税收': 4123, '人口': 5123, '面积': 29234}
|
|
]
|
|
},
|
|
chartMapSettings: {},
|
|
chinaDatas: null,
|
|
convertData: null,
|
|
chartMapOption: null,
|
|
namedata: null,
|
|
geoCoordMap: null
|
|
}
|
|
},
|
|
created() {
|
|
this.selectStartTime = this.$moment().format("YYYY-MM-DD 00:00:00");
|
|
this.selectEndTime = this.$moment().format("YYYY-MM-DD HH:mm:ss");
|
|
|
|
this.getLsAnalysisInfo();
|
|
this.getCompanyTopData();
|
|
this.getStoreTopData();
|
|
this.getLsAnalysisDateAdd();
|
|
|
|
},
|
|
mounted: function () {
|
|
$(".loading").fadeOut();
|
|
this.dateBtnClick('今日');
|
|
// this.timingRefresh();
|
|
|
|
let whei = $(window).width();
|
|
$("html").css({fontSize: whei / 20});
|
|
$(window).resize(function () {
|
|
let whei = $(window).width();
|
|
$("html").css({fontSize: whei / 20});
|
|
});
|
|
|
|
},
|
|
methods: {
|
|
//0转null
|
|
checkZero: function (value) {
|
|
if (value === 0) {
|
|
return null;
|
|
}
|
|
return value;
|
|
},
|
|
//日期按钮
|
|
dateBtnClick: function (value) {
|
|
switch (value) {
|
|
case '今日':
|
|
this.dateBtnValue = "今日";
|
|
this.recentName = "近七天";
|
|
// this.dateSelectChange('今日');
|
|
|
|
break;
|
|
case '本周':
|
|
this.dateBtnValue = "本周";
|
|
this.recentName = "本周";
|
|
// this.dateSelectChange('本周');
|
|
|
|
break;
|
|
case '本月':
|
|
this.dateBtnValue = "本月";
|
|
this.recentName = "本月";
|
|
// this.dateSelectChange('本月');
|
|
|
|
break;
|
|
case '自定义':
|
|
this.dateBtnValue = "自定义";
|
|
this.recentName = "自定义";
|
|
// this.diyDateChange();
|
|
break;
|
|
}
|
|
},
|
|
//日期改变
|
|
dateSelectChange: function (value) {
|
|
//概览日期text
|
|
let nowDate = this.$moment(new Date());
|
|
switch (value) {
|
|
case '今日':
|
|
this.viewDate = nowDate.format("YYYY-MM-DD");
|
|
this.selectStartTime = this.$moment(new Date()).format("YYYY-MM-DD 00:00:00");
|
|
this.selectEndTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
|
this.startTime = this.$moment(new Date()).add(-6, "days").format("YYYY-MM-DD 00:00:00");
|
|
this.endTime = this.$moment(new Date()).format("YYYY-MM-DD HH:mm:ss");
|
|
break;
|
|
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;
|
|
case '自定义':
|
|
this.selectStartTime = this.$moment(this.selectStartTime).format("YYYY-MM-DD 00:00:00");
|
|
this.selectEndTime = this.$moment(this.selectEndTime).format("YYYY-MM-DD 23:59:59");
|
|
this.startTime = this.selectStartTime;
|
|
this.endTime = this.selectEndTime;
|
|
break;
|
|
}
|
|
|
|
// this.getMainList();
|
|
},
|
|
// 累计拓客数和新增拓客数
|
|
getLsAnalysisInfo: function(){
|
|
let that = this;
|
|
let request = {
|
|
userId: this.userId,
|
|
startDate: this.selectStartTime,
|
|
endDate: this.selectEndTime
|
|
};
|
|
|
|
that.lastVal = that.startVal;
|
|
that.lastVal2 = that.startVal2;
|
|
http.getLsAnalysisInfo(request, function (res) {
|
|
let data = res.data;
|
|
if(data.results){
|
|
let num = data.results.addCustomerNum;
|
|
let addNum = data.results.newAddCustomerNum;
|
|
// that.startVal = that.lastVal;
|
|
that.endVal = addNum;
|
|
// that.startVal2 = that.lastVal2;
|
|
that.endVal2 = num;
|
|
}
|
|
}, function (err) {
|
|
|
|
});
|
|
},
|
|
// 零售公司拓客TOP10
|
|
getCompanyTopData: function(){
|
|
let that = this;
|
|
let request = {
|
|
userId: this.userId,
|
|
startDate: this.selectStartTime,
|
|
endDate: this.selectEndTime
|
|
};
|
|
http.getLsAnalysisCompanyAvgAdd(request, function (res) {
|
|
let data = res.data;
|
|
if(data.results){
|
|
that.companyTopList = data.results;
|
|
}else{
|
|
that.companyTopList = [];
|
|
}
|
|
}, function (err) {
|
|
|
|
});
|
|
},
|
|
// 门店拓客数
|
|
getStoreTopData: function(){
|
|
let that = this;
|
|
let reuqest = {
|
|
userId: this.userId,
|
|
startDate: this.selectStartTime,
|
|
endDate: this.selectEndTime
|
|
};
|
|
http.getLsAnalysisStoreAdd(reuqest, function (res) {
|
|
let data = res.data;
|
|
if(data.results){
|
|
that.storeTopList = data.results;
|
|
}else{
|
|
that.storeTopList = [];
|
|
}
|
|
}, function (err) {
|
|
|
|
});
|
|
},
|
|
getLsAnalysisDateAdd: function(){
|
|
let that = this;
|
|
let reuqest = {
|
|
userId: this.userId,
|
|
startDate: this.selectStartTime,
|
|
endDate: this.selectEndTime
|
|
};
|
|
http.getLsAnalysisDateAdd(reuqest, function (res) {
|
|
let data = res.data;
|
|
if(data.results){
|
|
that.barChartData = data.results;
|
|
}else{
|
|
that.barChartData = [];
|
|
}
|
|
}, function (err) {
|
|
|
|
});
|
|
},
|
|
companyDataOption: function (myChart) {
|
|
let option = {
|
|
// backgroundColor: '#00265f',
|
|
tooltip: {
|
|
trigger: 'axis',
|
|
axisPointer: {type: 'shadow'}
|
|
},
|
|
grid: {
|
|
left: '0%',
|
|
top: '10px',
|
|
right: '0%',
|
|
bottom: '4%',
|
|
containLabel: true
|
|
},
|
|
xAxis: [{
|
|
type: 'category',
|
|
data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,.1)",
|
|
width: 1,
|
|
type: "solid"
|
|
},
|
|
},
|
|
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLabel: {
|
|
interval: 0,
|
|
// rotate:50,
|
|
show: true,
|
|
splitNumber: 15,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,.6)",
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
}],
|
|
yAxis: [{
|
|
type: 'value',
|
|
axisLabel: {
|
|
//formatter: '{value} %'
|
|
show: true,
|
|
textStyle: {
|
|
color: "rgba(255,255,255,.6)",
|
|
fontSize: '12',
|
|
},
|
|
},
|
|
axisTick: {
|
|
show: false,
|
|
},
|
|
axisLine: {
|
|
show: true,
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,.1 )",
|
|
width: 1,
|
|
type: "solid"
|
|
},
|
|
},
|
|
splitLine: {
|
|
lineStyle: {
|
|
color: "rgba(255,255,255,.1)",
|
|
}
|
|
}
|
|
}],
|
|
series: [
|
|
{
|
|
|
|
type: 'bar',
|
|
data: [1500, 1200, 600, 200, 300, 300, 900],
|
|
barWidth: '35%', //柱子宽度
|
|
// barGap: 1, //柱子之间间距
|
|
itemStyle: {
|
|
normal: {
|
|
color: '#27d08a',
|
|
opacity: 1,
|
|
barBorderRadius: 5,
|
|
}
|
|
}
|
|
}
|
|
|
|
]
|
|
};
|
|
|
|
// 使用刚指定的配置项和数据显示图表。
|
|
myChart.setOption(option);
|
|
window.addEventListener("resize", function () {
|
|
myChart.resize();
|
|
});
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</script>
|
|
<style scoped>
|
|
/*日期按钮*/
|
|
.date-btn {
|
|
display: inline-block;
|
|
width: 80px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
border: 1px #00B1F7 solid;
|
|
color: #00B1F7;
|
|
}
|
|
|
|
.date-btn-active {
|
|
display: inline-block;
|
|
width: 80px;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
text-align: center;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
border: 1px #060321 solid;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
|
|
.div-title {
|
|
color: #FFCC33;
|
|
font-size: 20px;
|
|
line-height: 44px;
|
|
margin-bottom: 20px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
|
|
.title-logo {
|
|
text-align: center;
|
|
align-items: center;
|
|
align-content: center;
|
|
}
|
|
|
|
|
|
/** big data screen style */
|
|
* {
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box
|
|
}
|
|
|
|
*, body {
|
|
padding: 0px;
|
|
margin: 0px;
|
|
color: #222;
|
|
font-family: "微软雅黑";
|
|
}
|
|
|
|
@font-face {
|
|
font-family: electronicFont;
|
|
src: url('../../../public/font/DS-DIGIT.TTF')
|
|
}
|
|
|
|
body {
|
|
background: #000d4a url('../../../public/images/bg.jpg') center top;
|
|
background-size: cover;
|
|
color: #666;
|
|
font-size: .1rem;
|
|
}
|
|
|
|
li {
|
|
list-style-type: none;
|
|
}
|
|
|
|
table {
|
|
}
|
|
|
|
i {
|
|
margin: 0px;
|
|
padding: 0px;
|
|
text-indent: 0px;
|
|
}
|
|
|
|
img {
|
|
border: none;
|
|
max-width: 100%;
|
|
}
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #399bff;
|
|
}
|
|
|
|
a.active, a:focus {
|
|
outline: none !important;
|
|
text-decoration: none;
|
|
}
|
|
|
|
ol, ul, p, h1, h2, h3, h4, h5, h6 {
|
|
padding: 0;
|
|
margin: 0
|
|
}
|
|
|
|
a:hover {
|
|
color: #06c;
|
|
text-decoration: none !important
|
|
}
|
|
|
|
|
|
.clearfix:after, .clearfix:before {
|
|
display: table;
|
|
content: " "
|
|
}
|
|
|
|
.clearfix:after {
|
|
clear: both
|
|
}
|
|
|
|
.pulll_left {
|
|
float: left;
|
|
}
|
|
|
|
.pulll_right {
|
|
float: right;
|
|
}
|
|
|
|
/*谷哥滚动条样式*/
|
|
|
|
::-webkit-scrollbar {
|
|
width: 5px;
|
|
height: 5px;
|
|
position: absolute
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #5bc0de
|
|
}
|
|
|
|
::-webkit-scrollbar-track {
|
|
background-color: #ddd
|
|
}
|
|
|
|
/***/
|
|
.canvas {
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
top: 0;
|
|
height: 99%;
|
|
z-index: 1;
|
|
}
|
|
|
|
.allnav {
|
|
height: calc(100% - 30px);
|
|
}
|
|
|
|
.loading {
|
|
position: fixed;
|
|
left: 0;
|
|
top: 0;
|
|
font-size: 18px;
|
|
z-index: 100000000;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: #1a1a1c;
|
|
text-align: center;
|
|
}
|
|
|
|
.loadbox {
|
|
position: absolute;
|
|
width: 160px;
|
|
height: 150px;
|
|
color: #aaa;
|
|
left: 50%;
|
|
top: 50%;
|
|
margin-top: -100px;
|
|
margin-left: -75px;
|
|
}
|
|
|
|
.loadbox img {
|
|
margin: 10px auto;
|
|
display: block;
|
|
width: 40px;
|
|
}
|
|
|
|
.copyright {
|
|
background: rgba(19, 31, 64, .32);
|
|
border: 1px solid rgba(255, 255, 255, .05);
|
|
line-height: .5rem;
|
|
text-align: center;
|
|
padding-right: 15px;
|
|
bottom: 0;
|
|
color: rgba(255, 255, 255, .7);
|
|
font-size: .16rem;
|
|
}
|
|
|
|
.head {
|
|
height: 180px;
|
|
background: url(../../../public/images/head_bg.png) no-repeat center center;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.head h1 {
|
|
color: #fff;
|
|
text-align: center;
|
|
font-size: .4rem;
|
|
line-height: .8rem;
|
|
}
|
|
|
|
.head h1 img {
|
|
width: 1.5rem;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
margin-right: .2rem
|
|
}
|
|
|
|
.weather {
|
|
position: absolute;
|
|
right: .3rem;
|
|
top: 0;
|
|
line-height: .75rem;
|
|
}
|
|
|
|
.weather img {
|
|
width: .37rem;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.weather span {
|
|
color: rgba(255, 255, 255, .7);
|
|
font-size: .18rem;
|
|
padding-right: .1rem;
|
|
}
|
|
|
|
.mainbox {
|
|
padding: .1rem .1rem 0rem .1rem;
|
|
}
|
|
|
|
.mainbox > ul {
|
|
}
|
|
|
|
.mainbox > ul > li {
|
|
float: left;
|
|
padding: 0 .1rem
|
|
}
|
|
|
|
.mainbox > ul > li {
|
|
width: 20%
|
|
}
|
|
|
|
.mainbox > ul > li:nth-child(2) {
|
|
width: 60%;
|
|
padding: 0
|
|
}
|
|
|
|
.boxall {
|
|
border: 1px solid rgba(25, 186, 139, .17);
|
|
padding: 0 .2rem .4rem .15rem;
|
|
background: rgba(255, 255, 255, .04) url(../../../public/images/line.png);
|
|
background-size: 100% auto;
|
|
position: relative;
|
|
margin-bottom: .15rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
.boxall:before,
|
|
.boxall:after {
|
|
position: absolute;
|
|
width: .1rem;
|
|
height: .1rem;
|
|
content: "";
|
|
border-top: 2px solid #02a6b5;
|
|
top: 0;
|
|
}
|
|
|
|
.boxall:before, .boxfoot:before {
|
|
border-left: 2px solid #02a6b5;
|
|
left: 0;
|
|
}
|
|
|
|
.boxall:after, .boxfoot:after {
|
|
border-right: 2px solid #02a6b5;
|
|
right: 0;
|
|
}
|
|
|
|
.alltitle {
|
|
font-size: .2rem;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: .5rem;
|
|
}
|
|
|
|
.boxfoot {
|
|
position: absolute;
|
|
bottom: 0;
|
|
width: 100%;
|
|
left: 0;
|
|
}
|
|
|
|
.boxfoot:before,
|
|
.boxfoot:after {
|
|
position: absolute;
|
|
width: .1rem;
|
|
height: .1rem;
|
|
content: "";
|
|
border-bottom: 2px solid #02a6b5;
|
|
bottom: 0;
|
|
}
|
|
|
|
.bar {
|
|
background: rgba(101, 132, 226, .1);
|
|
padding: .15rem;
|
|
}
|
|
|
|
.barbox li, .barbox2 li {
|
|
width: 50%;
|
|
text-align: center;
|
|
position: relative;
|
|
z-index: 100;
|
|
}
|
|
|
|
.barbox:before,
|
|
.barbox:after {
|
|
position: absolute;
|
|
width: .3rem;
|
|
height: .1rem;
|
|
content: "";
|
|
}
|
|
|
|
.barbox:before {
|
|
border-left: 2px solid #02a6b5;
|
|
left: 0;
|
|
border-top: 2px solid #02a6b5;
|
|
}
|
|
|
|
.barbox:after {
|
|
border-right: 2px solid #02a6b5;
|
|
right: 0;
|
|
bottom: 0;
|
|
border-bottom: 2px solid #02a6b5;
|
|
}
|
|
|
|
.barbox li:first-child:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 50%;
|
|
width: 1px;
|
|
background: rgba(255, 255, 255, .2);
|
|
right: 0;
|
|
top: 25%;
|
|
}
|
|
|
|
.barbox {
|
|
border: 1px solid rgba(25, 186, 139, .17);
|
|
position: relative;
|
|
}
|
|
|
|
/*.barbox li {*/
|
|
/* font-size: .7rem;*/
|
|
/* color: #ffeb7b;*/
|
|
/* padding: .05rem 0;*/
|
|
/* font-family: electronicFont;*/
|
|
/* font-weight: bold;*/
|
|
/*}*/
|
|
|
|
.counter-num {
|
|
font-size: .7rem;
|
|
color: #ffeb7b;
|
|
padding: .05rem 0;
|
|
font-family: electronicFont;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/*.barbox2 li {*/
|
|
/* font-size: .19rem;*/
|
|
/* color: rgba(255, 255, 255, .7);*/
|
|
/* padding-top: .1rem;*/
|
|
/*}*/
|
|
.counter-num-text {
|
|
font-size: .19rem;
|
|
color: rgba(255, 255, 255, .7);
|
|
padding-top: .1rem;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.map {
|
|
position: relative;
|
|
height: 7.2rem;
|
|
z-index: 9;
|
|
}
|
|
|
|
.map4 {
|
|
width: 200%;
|
|
height: 7rem;
|
|
position: relative;
|
|
left: -50%;
|
|
top: 4%;
|
|
margin-top: .2rem;
|
|
z-index: 5;
|
|
}
|
|
|
|
.map1, .map2, .map3 {
|
|
position: absolute;
|
|
opacity: .5
|
|
}
|
|
|
|
.map1 {
|
|
width: 6.43rem;
|
|
z-index: 2;
|
|
top: .45rem;
|
|
left: .7rem;
|
|
animation: myfirst2 15s infinite linear;
|
|
}
|
|
|
|
.map2 {
|
|
width: 5.66rem;
|
|
top: .85rem;
|
|
left: 1.2rem;
|
|
z-index: 3;
|
|
opacity: 0.2;
|
|
animation: myfirst 10s infinite linear;
|
|
}
|
|
|
|
.map3 {
|
|
width: 5.18rem;
|
|
top: 1.07rem;
|
|
left: 1.4rem;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
.tabs {
|
|
text-align: center;
|
|
padding: .1rem 0 0 0;
|
|
}
|
|
|
|
.tabs a {
|
|
position: relative;
|
|
display: inline-block;
|
|
margin-left: 1px;
|
|
padding: .05rem .2rem;
|
|
color: #898989;
|
|
transition: all .3s ease-out 0s;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.tabs li {
|
|
display: inline-block;
|
|
}
|
|
|
|
.tabs a:after {
|
|
position: absolute;
|
|
width: 1px;
|
|
height: 10px;
|
|
background-color: rgba(255, 255, 255, .1);
|
|
content: '';
|
|
margin-left: 0;
|
|
right: -1px;
|
|
margin-top: 7px;
|
|
|
|
|
|
}
|
|
|
|
.tabs li a.active {
|
|
border: 1px solid rgba(25, 186, 139, .17);
|
|
background: rgba(255, 255, 255, .05);
|
|
color: #fff;
|
|
}
|
|
|
|
.tit02 {
|
|
text-align: center;
|
|
margin: .1rem 0;
|
|
position: relative
|
|
}
|
|
|
|
.tit02 span {
|
|
border: 1px solid rgba(25, 186, 139, .17);
|
|
letter-spacing: 2px;
|
|
padding: .01rem .2rem;
|
|
background: rgba(255, 255, 255, .05);
|
|
font-size: .18rem;
|
|
color: #49bcf7;
|
|
}
|
|
|
|
.tit02:before, .tit02:after {
|
|
position: absolute;
|
|
width: 26%;
|
|
height: 1px;
|
|
background: rgba(25, 186, 139, .2);
|
|
content: "";
|
|
top: .12rem;
|
|
}
|
|
|
|
.tit02:after {
|
|
right: 0;
|
|
}
|
|
|
|
.tit02:before {
|
|
left: 0;
|
|
}
|
|
|
|
.wrap {
|
|
height: 2.54rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.wrap li {
|
|
line-height: .42rem;
|
|
height: .42rem;
|
|
font-size: .18rem;
|
|
text-indent: .24rem;
|
|
margin-bottom: .1rem;
|
|
}
|
|
|
|
.wrap li p {
|
|
border: 1px solid rgba(25, 186, 139, .17);
|
|
color: rgba(255, 255, 255, .6);
|
|
}
|
|
|
|
.sy {
|
|
float: left;
|
|
width: 33%;
|
|
height: 95%;
|
|
margin-top: .25rem;
|
|
}
|
|
|
|
|
|
.adduser {
|
|
height: 1.5rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.adduser li {
|
|
height: .5rem;
|
|
}
|
|
|
|
.adduser img {
|
|
width: .40rem;
|
|
border-radius: .5rem;
|
|
margin-right: .1rem;
|
|
display: inline-block;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.adduser span {
|
|
line-height: .5rem;
|
|
font-size: .18rem;
|
|
color: rgba(255, 255, 255, .6);
|
|
}
|
|
|
|
.sycm ul {
|
|
margin-left: -.5rem;
|
|
margin-right: -.5rem;
|
|
padding: .16rem 0;
|
|
}
|
|
|
|
.sycm li {
|
|
float: left;
|
|
width: 33.33%;
|
|
text-align: center;
|
|
position: relative
|
|
}
|
|
|
|
.sycm li:before {
|
|
position: absolute;
|
|
content: "";
|
|
height: 30%;
|
|
width: 1px;
|
|
background: rgba(255, 255, 255, .1);
|
|
right: 0;
|
|
top: 15%;
|
|
}
|
|
|
|
.sycm li:last-child:before {
|
|
width: 0;
|
|
}
|
|
|
|
.sycm li h2 {
|
|
font-size: .3rem;
|
|
color: #c5ccff;
|
|
}
|
|
|
|
.sycm li span {
|
|
font-size: .18rem;
|
|
color: #fff;
|
|
opacity: .5;
|
|
}
|
|
|
|
@keyframes myfirst2 {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(359deg);
|
|
}
|
|
}
|
|
|
|
@keyframes myfirst {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(-359deg);
|
|
}
|
|
}
|
|
|
|
|
|
/*Plugin CSS*/
|
|
.str_wrap {
|
|
overflow: hidden;
|
|
width: 100%;
|
|
position: relative;
|
|
-moz-user-select: none;
|
|
-khtml-user-select: none;
|
|
user-select: none;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
|
|
.str_move {
|
|
white-space: nowrap;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
cursor: move;
|
|
}
|
|
|
|
.str_move_clone {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
position: absolute;
|
|
left: 100%;
|
|
top: 0;
|
|
}
|
|
|
|
.str_vertical .str_move_clone {
|
|
left: 0;
|
|
top: 100%;
|
|
}
|
|
|
|
.str_down .str_move_clone {
|
|
left: 0;
|
|
bottom: 100%;
|
|
}
|
|
|
|
.str_vertical .str_move,
|
|
.str_down .str_move {
|
|
white-space: normal;
|
|
width: 100%;
|
|
}
|
|
|
|
.str_static .str_move,
|
|
.no_drag .str_move,
|
|
.noStop .str_move {
|
|
cursor: inherit;
|
|
}
|
|
|
|
.str_wrap img {
|
|
max-width: none !important;
|
|
}
|
|
|
|
|
|
/** 背景 */
|
|
|
|
html {
|
|
height: 100%;
|
|
background-image: -webkit-radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
|
|
background-image: radial-gradient(ellipse farthest-corner at center center, #1b44e4 0%, #020f3a 100%);
|
|
cursor: move;
|
|
}
|
|
|
|
body {
|
|
width: 100%;
|
|
margin: 0;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|