You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1377 lines
52 KiB
1377 lines
52 KiB
<template>
|
|
<!-- 政务服务 -->
|
|
<div class="eb-container" ref="appRef">
|
|
<!-- 背景框 -->
|
|
<div class="bg">
|
|
<MainTitle class="mainTitle" :title="title"></MainTitle>
|
|
<div class="left-one">
|
|
<div
|
|
class="title-box-medium"
|
|
style="justify-content: space-between; align-items: center"
|
|
>
|
|
<span>基本概况</span>
|
|
<DatePicker
|
|
v-model="date"
|
|
class="menu"
|
|
type="month"
|
|
placeholder="请选择日期"
|
|
style="width: 100px;margin-right: 20px;"
|
|
>
|
|
</DatePicker>
|
|
</div>
|
|
<div class="databox">
|
|
<div
|
|
class="base-item"
|
|
v-for="(item, index) in baseList"
|
|
:key="index"
|
|
>
|
|
<img :src="item.img" />
|
|
<div class="content">
|
|
<span class="name">{{ item.name }}</span>
|
|
<div class="num">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="item.num"
|
|
:duration="2000"
|
|
/>
|
|
<span v-if="item.name == '满意率'">%</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-two">
|
|
<div class="title-box-medium">
|
|
<span>评价分析</span>
|
|
</div>
|
|
<div class="databox">
|
|
<div
|
|
class="data-item"
|
|
v-for="(item, index) in assessList"
|
|
:key="index"
|
|
>
|
|
<img :src="item.img" />
|
|
<div class="content">
|
|
<span class="name">{{ item.name }}</span>
|
|
<div style="display: flex; align-items: end">
|
|
<span class="num">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="item.num"
|
|
:duration="2000"
|
|
/>
|
|
</span>
|
|
<span class="text">条评价</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left-three">
|
|
<div
|
|
class="title-box-medium"
|
|
style="justify-content: space-between; align-items: center"
|
|
>
|
|
<span>办件结果公开</span>
|
|
<span
|
|
@click="resultMore"
|
|
style="cursor: pointer; font-size: 16px; margin-right: 20px;"
|
|
>查看更多</span
|
|
>
|
|
</div>
|
|
<div class="databox">
|
|
<div class="title">
|
|
<div class="title-name">办理部门</div>
|
|
<div class="title-name">申请人</div>
|
|
<div class="title-name">申请事项</div>
|
|
<div class="title-name">申请时间</div>
|
|
<div class="title-name">办理状态</div>
|
|
</div>
|
|
<vueSeamlessScroll
|
|
:data="resultList"
|
|
:class-option="defaultOption"
|
|
style="width: 726px; height: 180px; overflow: hidden"
|
|
>
|
|
<div class="list">
|
|
<div
|
|
class="list-item"
|
|
v-for="(item, index) in resultList"
|
|
:key="index"
|
|
>
|
|
<div>
|
|
<span>{{ item.yJDeptName }}</span>
|
|
</div>
|
|
<div>
|
|
<span>{{ item.applicantName }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="color">{{
|
|
item.eventName
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span>{{
|
|
formatDate(item.createTimestamp)
|
|
}}</span>
|
|
</div>
|
|
<div>
|
|
<span>{{ item.handleStatusName }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vueSeamlessScroll>
|
|
</div>
|
|
</div>
|
|
<div class="right-one">
|
|
<div class="title-box-large">
|
|
<span>办事分析</span>
|
|
</div>
|
|
<div class="databox">
|
|
<div class="left">
|
|
<div class="title-box">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/title-icon.png')
|
|
"
|
|
/>
|
|
<span class="title">区(县)级单位</span>
|
|
</div>
|
|
<vueSeamlessScroll
|
|
:data="bsList"
|
|
:class-option="defaultOption"
|
|
style="width: 100%; height: 450px; overflow: hidden"
|
|
>
|
|
<div class="list">
|
|
<div
|
|
class="list-item"
|
|
v-for="(item, index) in bsList"
|
|
:key="index"
|
|
>
|
|
<div class="rank">{{ index + 1 }}</div>
|
|
<span class="name">{{
|
|
item.dept_name
|
|
}}</span>
|
|
<div class="content">
|
|
<div class="content-item">
|
|
<span class="text">办件量:</span>
|
|
<span class="num">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="
|
|
Number(item.affairNum)
|
|
"
|
|
:duration="2000"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div class="content-item">
|
|
<span class="text">差评数:</span>
|
|
<span class="num">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="
|
|
Number(
|
|
item.eval_bad_amount
|
|
)
|
|
"
|
|
:duration="2000"
|
|
/></span>
|
|
</div>
|
|
<div class="content-item">
|
|
<span class="text"
|
|
>按期整改数:</span
|
|
>
|
|
<span class="num">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="
|
|
Number(item.replyRate)
|
|
"
|
|
:duration="2000"
|
|
/></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vueSeamlessScroll>
|
|
</div>
|
|
<div class="right">
|
|
<div class="title-box">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/title-icon.png')
|
|
"
|
|
/>
|
|
<span class="title">镇(乡)、街道</span>
|
|
</div>
|
|
<vueSeamlessScroll
|
|
:data="townBsList"
|
|
:class-option="defaultOption"
|
|
style="width: 100%; height: 450px; overflow: hidden"
|
|
>
|
|
<div class="list">
|
|
<div
|
|
class="list-item"
|
|
v-for="(item, index) in townBsList"
|
|
:key="index"
|
|
>
|
|
<div class="rank">{{ index + 1 }}</div>
|
|
<span class="name">{{
|
|
item.AREA_NAME
|
|
}}</span>
|
|
<div class="content">
|
|
<div class="content-item">
|
|
<span class="text">办件量:</span>
|
|
<span class="num">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="
|
|
Number(item.affairNum)
|
|
"
|
|
:duration="2000"
|
|
/>
|
|
</span>
|
|
</div>
|
|
<div class="content-item">
|
|
<span class="text">差评数:</span>
|
|
<span class="num">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="
|
|
Number(
|
|
item.eval_bad_amount
|
|
)
|
|
"
|
|
:duration="2000"
|
|
/></span>
|
|
</div>
|
|
<div class="content-item">
|
|
<span class="text"
|
|
>按期整改数:</span
|
|
>
|
|
<span class="num">
|
|
<CountTo
|
|
:startVal="0"
|
|
:endVal="
|
|
Number(item.replyRate)
|
|
"
|
|
:duration="2000"
|
|
/></span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vueSeamlessScroll>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="right-bottom-one">
|
|
<div
|
|
class="title-box-680"
|
|
style="justify-content: space-between; align-items: center"
|
|
>
|
|
<span>评价公开</span>
|
|
<span
|
|
style="cursor: pointer; font-size: 16px;margin-right: 20px;"
|
|
@click="showMore"
|
|
>查看更多</span
|
|
>
|
|
</div>
|
|
<div class="databox">
|
|
<vueSeamlessScroll
|
|
:data="pjList"
|
|
:class-option="defaultOption"
|
|
style="width: 628px; height: 240px; overflow: hidden"
|
|
>
|
|
<div class="list">
|
|
<div
|
|
class="list-item"
|
|
v-for="(item, index) in pjList"
|
|
:key="index"
|
|
>
|
|
<div class="base">
|
|
<div class="left">
|
|
<img
|
|
:src="
|
|
require('@/assets/screenView/dphoto.png')
|
|
"
|
|
/>
|
|
<span class="name">{{
|
|
item.peopleNameShow
|
|
}}</span>
|
|
</div>
|
|
<div class="right">
|
|
<span>{{ item.evalChannelShow }}</span>
|
|
<span style="margin-left: 10px">{{
|
|
formatTime(item.createTime)
|
|
}}</span>
|
|
</div>
|
|
</div>
|
|
<div class="rate">
|
|
<Rate
|
|
allow-half
|
|
v-model="item.score"
|
|
></Rate>
|
|
<span class="text"
|
|
>整体服务:{{ item.scoreShow }}</span
|
|
>
|
|
</div>
|
|
|
|
<div
|
|
class="tag"
|
|
v-show="item.childrens.length > 0"
|
|
>
|
|
<div
|
|
class="tag-item11"
|
|
v-for="(item1, index) in item.childrens"
|
|
:key="index"
|
|
>
|
|
{{ item1.childrenName }}
|
|
</div>
|
|
</div>
|
|
|
|
<div class="between">
|
|
<span>评价范围:{{ item.eventName }}({{item.acceptDeptName}})</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vueSeamlessScroll>
|
|
</div>
|
|
</div>
|
|
<div class="right-bottom-two">
|
|
<div class="title-box-308">
|
|
<span>天府通办</span>
|
|
</div>
|
|
<div class="databox">
|
|
<img
|
|
style="width: 216px; height: 216px; border-radius: 10px"
|
|
:src="require('@/assets/largeScreen/tftb.png')"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<commonModal title="评价公开" v-model="showModal" width="800">
|
|
<div class="pj-container">
|
|
<pjList
|
|
v-if="showModal"
|
|
:date="getCurrentDate(this.date)"
|
|
></pjList>
|
|
</div>
|
|
</commonModal>
|
|
<commonModal
|
|
title="办件结果公开"
|
|
v-model="showResultModal"
|
|
width="1000"
|
|
>
|
|
<div class="pj-container">
|
|
<result v-if="showResultModal"></result>
|
|
</div>
|
|
</commonModal>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { useIndex } from "../../utils/dynamic";
|
|
import MainTitle from "./components/MainTitle.vue";
|
|
import vueSeamlessScroll from "vue-seamless-scroll";
|
|
import commonModal from "@/views/common-components/common-modal.vue";
|
|
import pjList from "./components/gov-service/pjList.vue";
|
|
import result from "./components/gov-service/result.vue";
|
|
import { CountTo } from "vue-count-to";
|
|
import { duration } from "moment";
|
|
|
|
export default {
|
|
name: "govService",
|
|
components: { MainTitle, vueSeamlessScroll, commonModal, pjList, result },
|
|
data() {
|
|
return {
|
|
title: "智慧广电政务服务数据中心",
|
|
curentName: "下拉",
|
|
menuList: [
|
|
{
|
|
name: "全县",
|
|
},
|
|
{
|
|
name: "社会保障局",
|
|
},
|
|
],
|
|
date: this.getCurrentDate(new Date()),
|
|
baseList: [
|
|
{
|
|
name: "办件数(件)",
|
|
img: require("@/assets/screenView/base-1.png"),
|
|
num: "",
|
|
},
|
|
{
|
|
name: "收到差评数(次)",
|
|
img: require("@/assets/screenView/base-2.png"),
|
|
num: "",
|
|
},
|
|
{
|
|
name: "满意率",
|
|
img: require("@/assets/screenView/base-3.png"),
|
|
num: "",
|
|
},
|
|
],
|
|
assessList: [
|
|
{
|
|
name: "政务服务网",
|
|
img: require("@/assets/screenView/icon-1.png"),
|
|
num: "",
|
|
},
|
|
{
|
|
name: "天府通办",
|
|
img: require("@/assets/screenView/icon-1.png"),
|
|
num: "",
|
|
},
|
|
{
|
|
name: "办事大厅",
|
|
img: require("@/assets/screenView/icon-1.png"),
|
|
num: "",
|
|
},
|
|
{
|
|
name: "短信",
|
|
img: require("@/assets/screenView/icon-1.png"),
|
|
num: "",
|
|
},
|
|
{
|
|
name: "服务热线",
|
|
img: require("@/assets/screenView/icon-1.png"),
|
|
num: "",
|
|
},
|
|
{
|
|
name: "二维码评价",
|
|
img: require("@/assets/screenView/icon-1.png"),
|
|
num: "",
|
|
},
|
|
],
|
|
resultList: [],
|
|
bsList: [],
|
|
townBsList: [],
|
|
pjList: [],
|
|
defaultOption: {
|
|
step: 0.2, // 数值越大速度滚动越快
|
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 1, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
|
|
},
|
|
showModal: false,
|
|
showResultModal: false,
|
|
};
|
|
},
|
|
watch: {
|
|
date(n, o) {
|
|
this.queryBase();
|
|
this.querypjfx();
|
|
this.queryResult();
|
|
this.queryCounty();
|
|
this.queryTown();
|
|
},
|
|
},
|
|
created() {},
|
|
computed: {},
|
|
beforeDestroy() {},
|
|
mounted() {
|
|
const { calcRate, windowDraw } = useIndex(this.$refs.appRef);
|
|
calcRate();
|
|
windowDraw();
|
|
this.queryAssess();
|
|
},
|
|
methods: {
|
|
menuClick(name) {
|
|
this.curentName = name;
|
|
},
|
|
formatTime(time) {
|
|
let date = new Date(Number(time));
|
|
let year = date.getFullYear(); //获取完整的年份(4位)
|
|
let month =
|
|
date.getMonth() + 1 > 9
|
|
? date.getMonth() + 1
|
|
: "0" + (date.getMonth() + 1); //获取当前月份(0-11,0代表1月)
|
|
let strDate =
|
|
date.getDate() > 9 ? date.getDate() : "0" + date.getDate(); // 获取当前日(1-31)
|
|
let hour =
|
|
date.getHours() > 9 ? date.getHours() : "0" + date.getHours(); //获取当前小时(0 ~ 23)
|
|
let minute =
|
|
date.getMinutes() > 9
|
|
? date.getMinutes()
|
|
: "0" + date.getMinutes(); //获取当前分钟(0 ~ 59)
|
|
let second =
|
|
date.getSeconds() > 9
|
|
? date.getSeconds()
|
|
: "0" + date.getSeconds(); //获取当前秒数(0 ~ 59)
|
|
date =
|
|
year +
|
|
"-" +
|
|
month +
|
|
"-" +
|
|
strDate +
|
|
" " +
|
|
hour +
|
|
":" +
|
|
minute +
|
|
":" +
|
|
second;
|
|
return date;
|
|
},
|
|
formatDate(time) {
|
|
let date = new Date(time);
|
|
let year = date.getFullYear(); //获取完整的年份(4位)
|
|
let month =
|
|
date.getMonth() + 1 > 9
|
|
? date.getMonth() + 1
|
|
: "0" + (date.getMonth() + 1); //获取当前月份(0-11,0代表1月)
|
|
let strDate =
|
|
date.getDate() > 9 ? date.getDate() : "0" + date.getDate(); // 获取当前日(1-31)
|
|
date = year + "-" + month + "-" + strDate;
|
|
return date;
|
|
},
|
|
getCurrentDate(time) {
|
|
let date = new Date(time);
|
|
date =
|
|
date.getFullYear() +
|
|
"-" +
|
|
(date.getMonth() + 1 > 9
|
|
? date.getMonth() + 1
|
|
: "0" + (date.getMonth() + 1));
|
|
return date;
|
|
},
|
|
// 基本概况
|
|
queryBase() {
|
|
let params = {
|
|
areaCode: "511502000000",
|
|
shardkey: "5115",
|
|
date: this.getCurrentDate(this.date),
|
|
};
|
|
console.log(params);
|
|
this.$http
|
|
.post("/queryEvaluateReview", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
let data = res.data.data.data;
|
|
this.baseList[0].num = Number(data.bjCount);
|
|
this.baseList[1].num = Number(data.badCount);
|
|
if (Number(data.zgRate) < 1) {
|
|
this.baseList[2].num =
|
|
Number(data.zgRate).toFixed(2) * 100;
|
|
} else {
|
|
this.baseList[2].num = Number(data.zgRate) * 100;
|
|
}
|
|
} else {
|
|
this.$Message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$Message.error("查询失败");
|
|
});
|
|
},
|
|
// 评价分析
|
|
querypjfx() {
|
|
let params = {
|
|
areaCode: "511502000000",
|
|
shardKey: "5115",
|
|
dataTime: this.getCurrentDate(this.date),
|
|
};
|
|
console.log(params);
|
|
this.$http
|
|
.post("/getChannel", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
let data = JSON.parse(res.data.data.ifResultInfo);
|
|
this.assessList[0].num = Number(data.zwNum);
|
|
this.assessList[1].num = Number(data.tbNum);
|
|
this.assessList[2].num = Number(data.bsNum);
|
|
this.assessList[3].num = Number(data.dxNum);
|
|
this.assessList[4].num = Number(data.rxNum);
|
|
this.assessList[5].num = Number(data.appNum);
|
|
} else {
|
|
this.$Message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$Message.error("查询失败");
|
|
});
|
|
},
|
|
// 办件结果公开
|
|
queryAssess() {
|
|
let params = {
|
|
areaCode: "511502000000",
|
|
page: 1,
|
|
pageSize: 10,
|
|
fields: "",
|
|
};
|
|
console.log(params);
|
|
this.$http
|
|
.post("/affairPublicity", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.resultList = res.data.data.rows;
|
|
} else {
|
|
this.$Message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$Message.error("查询失败");
|
|
});
|
|
},
|
|
// 评价
|
|
queryResult() {
|
|
let params = {
|
|
fields: "",
|
|
pageSize: 5,
|
|
page: 1,
|
|
areaCode: "511502000000",
|
|
objCode: "",
|
|
sidx: "create_time",
|
|
sord: "desc",
|
|
shardKey: "5115",
|
|
dataTime: this.getCurrentDate(this.date),
|
|
score: "",
|
|
};
|
|
this.$http
|
|
.post("/getPublishList", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
this.pjList = res.data.data.rows;
|
|
} else {
|
|
this.$Message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$Message.error("查询失败");
|
|
});
|
|
},
|
|
// 办事分析 区县级
|
|
queryCounty() {
|
|
let params = {
|
|
areaCode: "511502000000",
|
|
sort: "0",
|
|
shardkey: "5115",
|
|
date: this.getCurrentDate(this.date),
|
|
};
|
|
console.log(params);
|
|
this.$http
|
|
.post("/getDeptAnalysis", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
let data = res.data.data.data;
|
|
this.bsList = data;
|
|
} else {
|
|
this.$Message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$Message.error("查询失败");
|
|
});
|
|
},
|
|
// 办事分析 区县级
|
|
queryTown() {
|
|
let params = {
|
|
areaCode: "511502000000",
|
|
sort: "0",
|
|
shardkey: "5115",
|
|
date: this.getCurrentDate(this.date),
|
|
};
|
|
console.log(params);
|
|
this.$http
|
|
.post("/getcuntryAnalysis", this.common.request(params))
|
|
.then((res) => {
|
|
if (res.data.code == 200) {
|
|
let data = res.data.data.data;
|
|
this.townBsList = data;
|
|
} else {
|
|
this.$Message.error(res.data.msg);
|
|
}
|
|
})
|
|
.catch((err) => {
|
|
this.$Message.error("查询失败");
|
|
});
|
|
},
|
|
|
|
showMore() {
|
|
this.showModal = true;
|
|
},
|
|
resultMore() {
|
|
this.showResultModal = true;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
@import "../../styles/pbStyle.less";
|
|
|
|
/deep/ .ivu-date-picker {
|
|
height: 40px !important;
|
|
}
|
|
/deep/ .ivu-input {
|
|
height: 30px !important;
|
|
margin-top: 5px;
|
|
background: url("../../assets/screenView/menuBg.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
border: unset;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/deep/ .ivu-rate-star {
|
|
margin-right: 4px;
|
|
}
|
|
|
|
/deep/ .menu .ivu-picker-panel-body {
|
|
float: right !important;
|
|
background: url("../../assets/screenView/box.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/deep/ .menu .ivu-select-dropdown {
|
|
top: 30px !important;
|
|
right: 0 !important;
|
|
background: unset !important;
|
|
}
|
|
|
|
.eb-container {
|
|
width: 1920px;
|
|
height: 1080px;
|
|
transform: scale(var(--scale)) translate(-50%, -50%);
|
|
transform-origin: 0 0;
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background-image: url("../../assets/largeScreen/page-bg.png");
|
|
background-size: 100%;
|
|
|
|
.bg {
|
|
width: 1920px;
|
|
height: 1056px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: rgba(0, 0, 0, 0.16);
|
|
.mainTitle {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.left-one {
|
|
position: fixed;
|
|
width: 778px;
|
|
height: 227px;
|
|
top: 112px;
|
|
left: 57px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
z-index: 99;
|
|
|
|
.databox {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
padding: 20px;
|
|
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.base-item {
|
|
width: 240px;
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
img {
|
|
width: 72px;
|
|
height: 72px;
|
|
}
|
|
|
|
.content {
|
|
width: 160px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.name {
|
|
font-family: "PingFang SC";
|
|
font-size: 20px;
|
|
text-align: left;
|
|
color: #f2f6fa;
|
|
}
|
|
|
|
.num {
|
|
font-family: "Furore";
|
|
font-size: 28px;
|
|
text-align: left;
|
|
background: linear-gradient(
|
|
to top,
|
|
#c1ebff,
|
|
#ffffff
|
|
);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-two {
|
|
position: fixed;
|
|
width: 778px;
|
|
height: 355px;
|
|
top: 344px;
|
|
left: 57px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.databox {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
padding: 20px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
flex-wrap: wrap;
|
|
align-items: space-between;
|
|
|
|
.data-item {
|
|
width: 232px;
|
|
height: 114px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 15px;
|
|
background: url("../../assets/screenView/item-bg.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
img {
|
|
width: 58px;
|
|
height: 52px;
|
|
}
|
|
|
|
.content {
|
|
width: 130px;
|
|
height: 70px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
|
|
.name {
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 24px;
|
|
background: linear-gradient(
|
|
to top,
|
|
#c1ebff,
|
|
#ffffff
|
|
);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.num {
|
|
font-family: "Furore";
|
|
font-size: 30px;
|
|
background: linear-gradient(
|
|
to top,
|
|
#c1ebff,
|
|
#ffffff
|
|
);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
|
|
.text {
|
|
margin: 0 0 5px 5px;
|
|
font-family: "PingFang SC";
|
|
font-size: 12px;
|
|
text-align: left;
|
|
background: linear-gradient(
|
|
to top,
|
|
#c1ebff,
|
|
#ffffff
|
|
);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.left-three {
|
|
position: fixed;
|
|
width: 778px;
|
|
height: 320px;
|
|
top: 706px;
|
|
left: 57px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.databox {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 10px 0;
|
|
|
|
.title {
|
|
width: 726px;
|
|
height: 48px;
|
|
background: url("../../assets/screenView/w-title-bg.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
display: grid;
|
|
grid-template-columns: 18% 18% 28% 18% 18%;
|
|
grid-template-rows: 100%;
|
|
|
|
.title-name {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: "PingFang SC";
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
color: #f2f6fa;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 726px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.list-item {
|
|
width: 100%;
|
|
height: 64px;
|
|
display: grid;
|
|
grid-template-columns: 18% 18% 28% 18% 18%;
|
|
grid-template-rows: 100%;
|
|
|
|
div {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
span {
|
|
text-align: center;
|
|
font-size: 16px;
|
|
color: #ffffff;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.color {
|
|
color: #46d3ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-one {
|
|
position: fixed;
|
|
width: 1008px;
|
|
height: 584px;
|
|
top: 112px;
|
|
left: 855px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
|
|
.databox {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
padding: 20px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
width: 467px;
|
|
height: 488px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.title-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.title {
|
|
margin-left: 10px;
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 20px;
|
|
text-align: left;
|
|
background: linear-gradient(
|
|
180deg,
|
|
#ecf4fe 37.5%,
|
|
#5982b5 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.list-item {
|
|
width: 100%;
|
|
height: 82px;
|
|
background: url("../../assets/screenView/bs-bg.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 10px 0 10px 50px;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
|
|
.rank {
|
|
position: absolute;
|
|
left: 17px;
|
|
top: 10px;
|
|
width: 20px;
|
|
height: 24px;
|
|
background: url("../../assets/screenView/rank-bg.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: "Furore";
|
|
font-size: 12px;
|
|
color: #dee9ff;
|
|
}
|
|
|
|
.name {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.content {
|
|
width: 415px;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.content-item {
|
|
width: 130px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.text {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.num {
|
|
margin-left: 2px;
|
|
font-family: "ShiShangZhongHeiJianTi";
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
color: #a9e0ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right {
|
|
width: 467px;
|
|
height: 488px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
.title-box {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 14px;
|
|
height: 14px;
|
|
}
|
|
|
|
.title {
|
|
margin-left: 10px;
|
|
font-family: "YouSheBiaoTiHei";
|
|
font-size: 20px;
|
|
text-align: left;
|
|
background: linear-gradient(
|
|
180deg,
|
|
#ecf4fe 37.5%,
|
|
#5982b5 100%
|
|
);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
.list {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.list-item {
|
|
width: 100%;
|
|
height: 82px;
|
|
background: url("../../assets/screenView/bs-bg.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
padding: 10px 0 10px 50px;
|
|
margin-bottom: 10px;
|
|
position: relative;
|
|
|
|
.rank {
|
|
position: absolute;
|
|
left: 17px;
|
|
top: 10px;
|
|
width: 20px;
|
|
height: 24px;
|
|
background: url("../../assets/screenView/rank-bg.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
font-family: "Furore";
|
|
font-size: 12px;
|
|
color: #dee9ff;
|
|
}
|
|
|
|
.name {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.content {
|
|
width: 415px;
|
|
height: 25px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.content-item {
|
|
width: 130px;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.text {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.num {
|
|
margin-left: 2px;
|
|
font-family: "ShiShangZhongHeiJianTi";
|
|
font-size: 18px;
|
|
font-weight: 400;
|
|
line-height: 24px;
|
|
letter-spacing: 0em;
|
|
text-align: left;
|
|
color: #a9e0ff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-bottom-one {
|
|
position: fixed;
|
|
width: 680px;
|
|
height: 320px;
|
|
top: 706px;
|
|
left: 855px;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
.databox {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.list {
|
|
width: 628px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.list-item {
|
|
width: 100%;
|
|
height: 114px;
|
|
background: url("../../assets/screenView/pj-bg.png")
|
|
no-repeat;
|
|
background-size: 100% 100%;
|
|
padding: 10px 0;
|
|
margin-bottom: 10px;
|
|
|
|
.base {
|
|
width: 100%;
|
|
height: 24px;
|
|
padding: 0 15px;
|
|
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
.left {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
img {
|
|
width: 24px;
|
|
height: 24px;
|
|
}
|
|
|
|
.name {
|
|
font-family: "PingFang SC";
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
color: #f2f6fa;
|
|
margin-left: 15px;
|
|
}
|
|
}
|
|
|
|
.right {
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: "PingFang SC";
|
|
font-size: 14px;
|
|
color: #f2f6fa;
|
|
}
|
|
}
|
|
|
|
.rate {
|
|
width: 100%;
|
|
height: 20px;
|
|
padding-left: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
|
|
.text {
|
|
font-family: "PingFang SC";
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #f2f6fa;
|
|
margin-left: 10px;
|
|
}
|
|
}
|
|
|
|
.tag {
|
|
width: 100%;
|
|
height: 26px;
|
|
padding-left: 54px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 5px;
|
|
|
|
.tag-item11 {
|
|
width: 144px;
|
|
height: 100%;
|
|
background: url("../../assets/screenView/tag-bg.png")
|
|
no-repeat;
|
|
font-family: "PingFang SC";
|
|
font-size: 10px;
|
|
color: #46f4ff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 5px;
|
|
}
|
|
}
|
|
|
|
.between {
|
|
width: 100%;
|
|
padding-left: 54px;
|
|
font-family: "PingFang SC";
|
|
font-size: 12px;
|
|
color: #f2f6fa;
|
|
|
|
span {
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
word-break: break-all;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-bottom-two {
|
|
position: fixed;
|
|
width: 308px;
|
|
height: 320px;
|
|
top: 706px;
|
|
left: 1555px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
.databox {
|
|
.content-pub-style(100%, calc(100% - 44px));
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.pj-container {
|
|
width: 100%;
|
|
}
|
|
</style>
|
|
|