<template>
|
<div class="index" ref="index">
|
<div class="head">
|
<div class="titleView fl-sb">
|
<div class="title">{{ name }}-数据统计看板</div>
|
<div class="time">数据统计截至:{{ timeWeek }}</div>
|
</div>
|
|
<!-- -->
|
<div class="fl-sb">
|
<div class="communitView">
|
<div
|
:class="[
|
'communitViewItem',
|
communityId == item.communityId ? 'communitViewItemSel' : ''
|
]"
|
v-for="(item, index) in communityList"
|
:key="index"
|
@click="changeCommunity(item)"
|
>
|
{{ item.name }}
|
</div>
|
</div>
|
|
<el-button>导出报表</el-button>
|
</div>
|
|
<!-- -->
|
<div class="fl-start">
|
<div class="mr-r-20">
|
<el-radio-group
|
v-model="dateType"
|
size="mini"
|
@change="changeDateType"
|
>
|
<el-radio-button label="按年"></el-radio-button>
|
<el-radio-button label="按月"></el-radio-button>
|
<el-radio-button label="按天"></el-radio-button>
|
<el-radio-button label="按日期范围"></el-radio-button>
|
</el-radio-group>
|
</div>
|
|
<div class="dateView">
|
<el-date-picker
|
v-show="dateType === '按年'"
|
v-model="selectTime"
|
type="year"
|
placeholder="请选择年份"
|
size="mini"
|
@change="onChange"
|
>
|
</el-date-picker>
|
<el-date-picker
|
v-show="dateType === '按月'"
|
v-model="selectTime"
|
type="month"
|
placeholder="请选择月份"
|
size="mini"
|
@change="onChange"
|
>
|
</el-date-picker>
|
<el-date-picker
|
v-show="dateType === '按天'"
|
v-model="selectTime"
|
type="date"
|
placeholder="请选择日期"
|
size="mini"
|
@change="onChange"
|
>
|
</el-date-picker>
|
<el-date-picker
|
v-show="dateType === '按日期范围'"
|
v-model="selectTime"
|
type="datetimerange"
|
range-separator="至"
|
start-placeholder="开始日期"
|
end-placeholder="结束日期"
|
size="mini"
|
@change="onChange"
|
>
|
</el-date-picker>
|
</div>
|
</div>
|
</div>
|
|
<v-box title="核心指标">
|
<div class="show">
|
<section v-for="i in menu" :key="i.id">
|
<div class="icon">
|
<el-image
|
:src="$js.static + 'static/image/ico/' + i.ico + '.png'"
|
></el-image>
|
</div>
|
<div class="text">
|
<h5>
|
<b>{{ i.name }}</b>
|
<!-- <span class="time">{{ time }}</span> -->
|
</h5>
|
<p class="num">{{ i.val }}</p>
|
</div>
|
</section>
|
</div>
|
</v-box>
|
|
<!-- <v-box title="待办事项">
|
<ul class="item">
|
<li v-for="(i, j) in item" :key="j + '-item'">
|
<div class="avatar" @click="onPath(i)">
|
<span class="circle" v-if="i.c > 0">{{ i.c }}</span>
|
<img :src="i.i" alt />
|
</div>
|
<span class="text" @click="onPath(i)">{{ i.t }}</span>
|
</li>
|
</ul>
|
</v-box> -->
|
<div class="flex" id="line-index-box">
|
<v-box title="双报到双服务" mini :style="r1">
|
<!-- 饼图 -->
|
<div class="pieCharts fl-sbtop">
|
<div class="leftView">
|
<div>
|
<div class="num">{{ needNum }}</div>
|
<div class="titleview fl-start">
|
<div style="background-color: #2bb7ff;" class="colorview"></div>
|
<div>报到需求</div>
|
</div>
|
</div>
|
|
<div class="mr-t-30">
|
<div class="num">{{ problemNum }}</div>
|
<div class="titleview fl-start">
|
<div style="background-color: #1adcc3;" class="colorview"></div>
|
<div>报到问题</div>
|
</div>
|
</div>
|
</div>
|
<div class="chart" id="index-chart-3"></div>
|
</div>
|
<!-- 党员报到 单位报到 党建动态 -->
|
|
<div class="memberView">
|
<div
|
class="memberViewItem fl-sb"
|
v-for="(item, index) in memberList"
|
:key="index"
|
>
|
<div class="memberItem-title">{{ item.name }}</div>
|
<div class="memberItem-line">
|
<div
|
class="memberItem-sub-line"
|
:style="{ width: item.showVal + 'px' }"
|
></div>
|
</div>
|
<div class="memberItem-value">{{ item.val }}</div>
|
</div>
|
</div>
|
|
<!-- 报到服务次数 时长 -->
|
<div class="fl-sb">
|
<div
|
class="threeHeadIm fl-sb"
|
v-for="(item, index) in timesTime"
|
:key="index"
|
>
|
<img :src="item.icon" alt="" />
|
<div class="threeHeadImR">
|
<div class="num">
|
{{ item.val
|
}}<span style="font-size: 15px;">{{ item.unit }}</span>
|
</div>
|
<div class="text fz-8">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
</v-box>
|
<v-box title="三务三资" large :style="r2">
|
<div class="fl-sb pd-lr-30">
|
<div
|
class="threeHeadIm fl-sb"
|
v-for="(item, index) in threeHead"
|
:key="index"
|
>
|
<img :src="item.icon" alt="" />
|
<div class="threeHeadImR">
|
<div class="num">{{ item.val }}</div>
|
<div class="text">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
<!-- 党务、服务、财务等公开 -->
|
<div class="fl-start mr-t-10">
|
<div
|
class="threeItem fl-coc"
|
v-for="(item, index) in threeMenu"
|
:key="index"
|
>
|
<div class="num">{{ item.val }}</div>
|
<div class="text">{{ item.name }}</div>
|
</div>
|
</div>
|
</v-box>
|
</div>
|
|
<!-- <div class="flex" id="line-index-box"> -->
|
<v-box title="随手拍、微心愿发布趋势">
|
<!-- 党务、服务、财务等公开 -->
|
<div class="microPhoto fl-cen mr-t-10">
|
<div class="fl-sb">
|
<div
|
class="microPhotoItem fl-coc"
|
v-for="(item, index) in microPhotoList"
|
:key="index"
|
>
|
<div class="num">{{ item.val }}</div>
|
<div class="text">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="chart1" id="index-chart-1"></div>
|
</v-box>
|
<v-box title="社区活动、议事投票、问卷调查、社区动态发布趋势">
|
<!-- 社区活动、议事投票、问卷调查、社区动态发布趋势 -->
|
<div class="microPhoto fl-cen mr-t-10">
|
<div class="fl-sb">
|
<div
|
class="microPhotoItem fl-coc"
|
v-for="(item, index) in numList"
|
:key="index"
|
>
|
<div class="num">{{ item.val }}</div>
|
<div class="text">{{ item.name }}</div>
|
</div>
|
</div>
|
</div>
|
<div class="chart1" id="index-chart-2"></div>
|
</v-box>
|
<!-- </div> -->
|
</div>
|
</template>
|
|
<script>
|
import vBox from "./_box";
|
import i1 from "static/image/ico/i1.png";
|
import i2 from "static/image/ico/i2.png";
|
import i3 from "static/image/ico/i3.png";
|
import i4 from "static/image/ico/i4.png";
|
import total from "static/image/ico/total.png";
|
import time from "static/image/ico/time.png";
|
import times from "static/image/ico/times.png";
|
import $chart from "./chart";
|
import { timeWeek } from "../../utils/common";
|
export default {
|
props: {},
|
components: { vBox },
|
data() {
|
return {
|
dateType: "按年",
|
selectTime: "",
|
detail: {},
|
time: "",
|
numList: [
|
{
|
val: "999",
|
name: "社区活动总量"
|
},
|
{
|
val: "999",
|
name: "议事投票总量"
|
},
|
{
|
val: "999",
|
name: "问卷调查总量"
|
},
|
{
|
val: "999",
|
name: "社区动态总量"
|
}
|
],
|
microPhotoList: [
|
{
|
val: "999",
|
name: "随手拍总量"
|
},
|
{
|
val: "999",
|
name: "微心愿总量"
|
}
|
],
|
memberList: [
|
{
|
name: "党员报到",
|
val: 666,
|
showVal: 0
|
},
|
{
|
name: "单位报到",
|
val: 333,
|
showVal: 0
|
},
|
{
|
name: "党建动态",
|
val: 444,
|
showVal: 0
|
}
|
],
|
timesTime: [
|
{
|
icon: times,
|
val: "999",
|
name: "报到服务次数",
|
unit: "次"
|
},
|
{
|
icon: time,
|
val: "999",
|
name: "报到服务时长",
|
unit: "小时"
|
}
|
],
|
threeHead: [
|
{
|
icon: total,
|
val: "999",
|
name: "三务公开总数"
|
},
|
{
|
icon: total,
|
val: "999",
|
name: "三资公开总数"
|
}
|
],
|
threeMenu: [
|
{
|
val: "999",
|
name: "党务公开"
|
},
|
{
|
val: "999",
|
name: "服务公开"
|
},
|
{
|
val: "999",
|
name: "财务公开"
|
},
|
{
|
val: "999",
|
name: "资金公开"
|
},
|
{
|
val: "999",
|
name: "资产公开"
|
},
|
{
|
val: "999",
|
name: "资源公开"
|
},
|
{
|
val: "999",
|
name: "村集体经济组织项目"
|
}
|
],
|
menu: [
|
{ id: 1, name: "小程序用户量", val: "0", ico: "u1", p: "" },
|
{ id: 2, name: "实有人口数", val: "0", ico: "u3", p: "" },
|
{ id: 3, name: "小区数", val: "0", ico: "u4", p: "" },
|
{
|
id: 4,
|
name: "志愿者数",
|
val: "0",
|
ico: "u2",
|
p: ""
|
}
|
],
|
communityList: [],
|
communityId: "",
|
selectAllComunity: true,
|
item: [
|
{ t: "随手拍", c: 0, i: i1, p: "/act_clap" },
|
{ t: "微心愿", c: 0, i: i2, p: "/act_wish" },
|
{ t: "邻里圈", c: 0, i: i3, p: "/man_neighbor" },
|
{ t: "志愿者审核", c: 0, i: i4, p: "/man_vol_exam" }
|
],
|
list: [],
|
scale: 0,
|
c1: null,
|
c2: null,
|
c3: null,
|
timeWeek: "",
|
streetId: "",
|
name: "",
|
needNum: 0,
|
problemNum: 0
|
};
|
},
|
watch: {},
|
computed: {
|
r1() {
|
if (this.scale > 1) {
|
let w = (500 / 1050) * this.scale;
|
return { width: w + "px", height: w + "px" };
|
}
|
},
|
r2() {
|
if (this.scale > 1) {
|
let w = (650 / 1050) * this.scale;
|
let h = (430 / 1050) * this.scale;
|
return { width: w + "px", height: h + "px" };
|
}
|
},
|
dateSelectType() {
|
let type = 1;
|
switch (this.dateType) {
|
case "按年":
|
type = 1;
|
break;
|
case "按月":
|
type = 2;
|
break;
|
case "按天":
|
type = 3;
|
break;
|
case "按日期范围":
|
type = 4;
|
break;
|
|
default:
|
type = null;
|
break;
|
}
|
return type;
|
}
|
},
|
methods: {
|
onChange() {
|
console.log(this.selectTime);
|
if (!this.selectTime) {
|
this.startTime = null;
|
this.endTime = null;
|
this.init();
|
return;
|
}
|
|
if (this.dateType == "按日期范围") {
|
let time1 = this.selectTime[0];
|
let time2 = this.selectTime[1];
|
this.startTime = this.$$moment(time1).format("YYYY-MM-DD");
|
this.endTime = this.$$moment(time2).format("YYYY-MM-DD");
|
} else {
|
if (this.dateType == "按年") {
|
this.startTime = this.$$moment(this.selectTime).format("YYYY");
|
} else if (this.dateType == "按月") {
|
this.startTime = this.$$moment(this.selectTime).format("YYYY-MM");
|
} else if (this.dateType == "按天") {
|
this.startTime = this.$$moment(this.selectTime).format("YYYY-MM-DD");
|
}
|
this.endTime = null;
|
}
|
this.init();
|
},
|
changeDateType() {
|
// this.init();
|
this.selectTime = null;
|
},
|
changeCommunity(item) {
|
console.log(item);
|
|
this.selectAllComunity = item.name === "全部社区";
|
this.communityId = item.communityId;
|
this.init();
|
},
|
getCommunityId() {
|
this.$api.get(
|
"StreetBig/getCommunityId",
|
{ streetId: this.streetId },
|
e => {
|
this.communityList = [
|
{
|
name: "全部社区",
|
communityId: this.streetId
|
},
|
...e
|
];
|
}
|
);
|
},
|
// 获取核心指标数据
|
getCoreData() {
|
let params = this.getParams();
|
|
this.$api.get("StreetBig/getCoreData", params, e => {
|
let { actualPopNum, userNum, villageNum, volunteerNum } = e;
|
this.menu[0].val = userNum;
|
this.menu[1].val = actualPopNum;
|
this.menu[2].val = villageNum;
|
this.menu[3].val = volunteerNum;
|
});
|
},
|
// StreetBig/getDoubleRegistration 双报到双服务
|
getDoubleRegistration() {
|
let params = this.getParams();
|
|
this.$api.get("StreetBig/getDoubleRegistration", params, e => {
|
let {
|
problemNum, //问题数量
|
allNum, //报到服务次数
|
memberNum, //党员报到数量
|
needNum, //需求数量
|
partyBuildingNum, //党建动态数量
|
times, //报到服务时间
|
unitNum //单位报到数量
|
} = e;
|
this.memberList[0].val = memberNum;
|
this.memberList[1].val = unitNum;
|
this.memberList[2].val = partyBuildingNum;
|
this.reValueMember();
|
this.timesTime[0].val = allNum;
|
this.timesTime[1].val = times;
|
this.needNum = needNum;
|
this.problemNum = problemNum;
|
this.c1 = $chart.pie("index-chart-3", {
|
x: ["报到问题发布数", "报到需求发布数"],
|
y: [problemNum, needNum]
|
});
|
});
|
},
|
// StreetBig/getThreeNum 三务三资
|
getThreeNum() {
|
let params = this.getParams();
|
|
this.$api.get("StreetBig/getThreeNum", params, e => {
|
let {
|
financeNum, //财务公开
|
fundNum, //资金公开
|
naturalResourcesNum, //资源公开
|
partyAffairsNum, //党务公开
|
propertyNum, //资产公开
|
serviceNum, //服务公开
|
threeFundNum, //三资总数量
|
threeServiceNum, //三务总数量
|
villageEconomyNum //村集体经济组织项目
|
} = e;
|
this.threeHead[0].val = threeServiceNum;
|
this.threeHead[1].val = threeFundNum;
|
|
this.threeMenu[0].val = partyAffairsNum;
|
this.threeMenu[1].val = serviceNum;
|
this.threeMenu[2].val = financeNum;
|
this.threeMenu[3].val = fundNum;
|
this.threeMenu[4].val = propertyNum;
|
this.threeMenu[5].val = naturalResourcesNum;
|
this.threeMenu[6].val = villageEconomyNum;
|
});
|
},
|
// StreetBig/getPhotoMicroWish 随手拍微心愿趋势
|
getPhotoMicroWish() {
|
let params = this.getParams();
|
|
this.$api.get("StreetBig/getPhotoMicroWish", params, e => {
|
this.c2 = $chart.line("index-chart-1", e);
|
this.microPhotoList[0].val = e.photoNum;
|
this.microPhotoList[1].val = e.microWishNum;
|
});
|
},
|
// StreetBig/getAllData
|
getAllData() {
|
let params = this.getParams();
|
|
this.$api.get("StreetBig/getAllData", params, e => {
|
let opt = {
|
nommunityActNumList: {
|
name: "社区活动",
|
list: e.nommunityActNumList
|
},
|
discussList: {
|
name: "议事投票",
|
list: e.discussList
|
},
|
questnaireNumList: {
|
name: "问卷调查",
|
list: e.questnaireNumList
|
},
|
nommunityDynNumList: {
|
name: "社区动态",
|
list: e.nommunityDynNumList
|
}
|
};
|
|
this.c2 = $chart.bar("index-chart-2", opt);
|
this.numList[0].val = e.nommunityActNum;
|
this.numList[1].val = e.discussNum;
|
this.numList[2].val = e.questnaireNum;
|
this.numList[3].val = e.nommunityDynNum;
|
});
|
},
|
getParams() {
|
let params = {
|
starTime: this.startTime,
|
endTime: this.endTime,
|
type: this.startTime || this.endTime ? this.dateSelectType : null
|
};
|
|
if (this.selectAllComunity) {
|
params.streetId = this.communityId;
|
} else {
|
params.communityId = this.communityId;
|
}
|
return params;
|
},
|
reValueMember() {
|
let max = 0;
|
this.memberList.map(item => {
|
if (item.val > max) max = item.val;
|
});
|
|
console.log(max);
|
|
this.memberList.map(item => {
|
item.showVal = Number.parseInt((230 / max) * item.val);
|
});
|
|
console.log(this.memberList);
|
},
|
init() {
|
this.getCoreData();
|
this.getDoubleRegistration();
|
this.getThreeNum();
|
this.getPhotoMicroWish();
|
this.getAllData();
|
},
|
indexData() {
|
this.$api.get("index/data", {}, e => {
|
if (e.todoEventsVOList && e.todoEventsVOList.length) {
|
this.item[0].c = e.todoEventsVOList[0].num;
|
this.item[1].c = e.todoEventsVOList[1].num;
|
this.item[3].c = e.todoEventsVOList[2].num;
|
}
|
this.c1 = $chart.pie(
|
"index-chart-3",
|
e.communityGovernanceTrendsVO || {}
|
);
|
|
let arr = [
|
{
|
eashPhoto: 20,
|
microWish: 10,
|
actActivity: 0,
|
pbActivity: 0,
|
discuss: 0,
|
date: "2024-08-29"
|
},
|
{
|
eashPhoto: 22,
|
microWish: 12,
|
actActivity: 0,
|
pbActivity: 0,
|
discuss: 0,
|
date: "2024-08-30"
|
},
|
{
|
eashPhoto: 70,
|
microWish: 90,
|
actActivity: 0,
|
pbActivity: 0,
|
discuss: 0,
|
date: "2024-08-31"
|
},
|
{
|
eashPhoto: 30,
|
microWish: 20,
|
actActivity: 0,
|
pbActivity: 0,
|
discuss: 0,
|
date: "2024-09-01"
|
},
|
{
|
eashPhoto: 20,
|
microWish: 30,
|
actActivity: 0,
|
pbActivity: 0,
|
discuss: 0,
|
date: "2024-09-02"
|
},
|
{
|
eashPhoto: 10,
|
microWish: 50,
|
actActivity: 0,
|
pbActivity: 0,
|
discuss: 0,
|
date: "2024-09-03"
|
},
|
{
|
eashPhoto: 40,
|
microWish: 40,
|
actActivity: 0,
|
pbActivity: 0,
|
discuss: 0,
|
date: "2024-09-04"
|
}
|
];
|
|
this.c3 = $chart.bar("index-chart-2", arr);
|
this.resize();
|
});
|
},
|
onPath(i) {
|
if (i.p) {
|
this.$router.push(this.$nav.url(i.p));
|
}
|
},
|
resize() {
|
let v = this.$refs.index;
|
if (v.clientWidth <= 1050) {
|
this.scale = v.clientWidth;
|
} else {
|
this.scale = 1;
|
}
|
this.$nextTick(() => {
|
if (this.c1) {
|
this.c1.resize();
|
}
|
if (this.c2) {
|
this.c2.resize();
|
}
|
if (this.c3) {
|
this.c3.resize();
|
}
|
});
|
}
|
},
|
mounted() {
|
let user = demo.$session.get("user") || {};
|
console.log(user);
|
|
if (user) {
|
this.streetId = user.streetId;
|
this.communityId = user.streetId;
|
this.name = user.name;
|
}
|
|
this.time = demo.timeout("", "y/m/d");
|
this.timeWeek = timeWeek();
|
this.getCommunityId();
|
this.init();
|
let ts = this;
|
demo.resize("body", () => {
|
ts.resize();
|
});
|
|
// this.indexData();
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.index {
|
color: #333;
|
font-size: 14px;
|
overflow-y: auto;
|
|
.head {
|
background-color: #fff;
|
box-sizing: border-box;
|
padding: 20px;
|
box-shadow: 0 0 10px #f2f2f2;
|
margin-bottom: 20px;
|
|
.titleView {
|
// height: 50px;
|
}
|
.title {
|
font-size: 24px;
|
}
|
.time {
|
font-size: 20px;
|
}
|
|
.communitView {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
width: 80%;
|
overflow: auto;
|
height: 70px;
|
|
&:hover {
|
cursor: pointer;
|
}
|
.communitViewItem {
|
background-color: #f2f2f2;
|
font-size: 15px;
|
height: 30px;
|
line-height: 30px;
|
padding: 0 12px;
|
color: #222;
|
margin-right: 20px;
|
border-radius: 5px;
|
text-wrap: nowrap;
|
}
|
.communitViewItemSel {
|
color: white;
|
background-color: #2ea9fe;
|
}
|
}
|
|
.dateView {
|
height: 30px;
|
}
|
}
|
|
.pd-lr-30 {
|
padding: 0 30px;
|
}
|
|
.threeHeadIm {
|
width: 160px;
|
height: 55px;
|
|
img {
|
width: 40px;
|
height: 40px;
|
}
|
|
.num {
|
font-size: 22px;
|
font-weight: 700;
|
}
|
|
.text {
|
font-size: 18px;
|
font-weight: 500;
|
}
|
}
|
|
.threeItem {
|
width: 33%;
|
height: 80px;
|
border-top: 1px solid #ccc;
|
border-right: 1px solid #ccc;
|
box-sizing: border-box;
|
|
.num {
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.text {
|
margin-top: 5px;
|
font-size: 15px;
|
font-weight: 500;
|
}
|
}
|
|
.threeItem:nth-child(3) {
|
border-right: none;
|
}
|
.threeItem:nth-child(6) {
|
border-right: none;
|
border-bottom: 1px solid #ccc;
|
}
|
.threeItem:nth-child(5) {
|
border-bottom: 1px solid #ccc;
|
}
|
|
.flex {
|
display: flex;
|
}
|
|
.pieCharts {
|
width: 100%;
|
height: 180px;
|
margin-top: -20px;
|
|
.leftView {
|
width: 40%;
|
height: 100%;
|
.num {
|
font-size: 20px;
|
font-weight: 700;
|
color: #222;
|
}
|
.titleview {
|
font-size: 16px;
|
font-weight: 700;
|
color: #222;
|
.colorview {
|
width: 20px;
|
height: 20px;
|
margin-right: 10px;
|
}
|
}
|
}
|
}
|
|
.memberView {
|
margin: -20px 0 20px;
|
|
.memberViewItem {
|
height: 36px;
|
.memberItem-title {
|
width: 80px;
|
font-size: 15px;
|
}
|
|
.memberItem-line {
|
width: 230px;
|
.memberItem-sub-line {
|
background-color: #2ea9fe;
|
height: 10px;
|
}
|
}
|
|
.memberItem-value {
|
font-size: 15px;
|
font-weight: 700;
|
width: 100px;
|
}
|
}
|
}
|
|
.item {
|
display: flex;
|
li {
|
width: 25%;
|
.avatar {
|
width: 80px;
|
height: 80px;
|
position: relative;
|
box-shadow: 0 0 15px rgba(43, 184, 255, 0.4);
|
border-radius: 5px;
|
margin: 0 auto;
|
cursor: pointer;
|
img {
|
display: block;
|
width: 100%;
|
height: 100%;
|
border-radius: 5px;
|
overflow: hidden;
|
}
|
.circle {
|
position: absolute;
|
z-index: 50;
|
right: -10px;
|
top: -10px;
|
width: 20px;
|
height: 20px;
|
font-size: 14px;
|
background-color: tomato;
|
color: #fff;
|
text-align: center;
|
line-height: 20px;
|
border-radius: 50%;
|
}
|
}
|
.text {
|
cursor: pointer;
|
margin: 0 auto;
|
width: 80px;
|
display: block;
|
text-align: center;
|
padding: 20px 0;
|
font-size: 12px;
|
color: #666;
|
}
|
}
|
}
|
.show {
|
padding: 0 0;
|
box-sizing: border-box;
|
display: flex;
|
flex-wrap: wrap;
|
justify-content: space-between;
|
> section {
|
background-color: #fff;
|
border-radius: 10px;
|
margin-right: 10px;
|
margin-bottom: 15px;
|
width: calc(~"25% - 10px");
|
box-sizing: border-box;
|
padding: 5px;
|
transition: all 0.3s;
|
overflow: hidden;
|
display: flex;
|
max-width: 300px;
|
// &:hover {
|
// cursor: pointer;
|
// }
|
&:nth-child(4n) {
|
margin-right: 5px;
|
}
|
&:nth-child(4n-3) {
|
margin-left: 5px;
|
}
|
.icon {
|
height: 80px;
|
width: 80px;
|
}
|
.text {
|
width: calc(~"100% - 80px");
|
box-sizing: border-box;
|
padding-left: 35px;
|
h5 {
|
margin-bottom: 25px;
|
line-height: 20px;
|
b {
|
font-size: 15px;
|
color: #666;
|
}
|
span {
|
float: right;
|
font-size: 12px;
|
color: #999;
|
padding-left: 8px;
|
}
|
}
|
.num {
|
font-size: 30px;
|
font-weight: 700;
|
color: #222;
|
}
|
}
|
}
|
}
|
.chart {
|
height: 100%;
|
width: 60%;
|
}
|
|
.microPhoto {
|
.microPhotoItem {
|
width: 190px;
|
}
|
.num {
|
font-size: 18px;
|
font-weight: 700;
|
}
|
|
.text {
|
margin-top: 5px;
|
font-size: 15px;
|
font-weight: 500;
|
}
|
}
|
.chart1 {
|
height: 208px;
|
width: 100%;
|
}
|
.stay {
|
li {
|
padding: 0 5px;
|
font-size: 13px;
|
height: 40px;
|
line-height: 38px;
|
box-sizing: border-box;
|
color: #2ea9fe;
|
border: 1px solid #f0f0f0;
|
border-top: 0;
|
padding-left: 20px;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
white-space: nowrap;
|
&:first-child {
|
border-top: 1px solid #f0f0f0;
|
}
|
b {
|
cursor: pointer;
|
&:hover {
|
color: tomato;
|
text-decoration: underline;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
