|
|
@@ -0,0 +1,1253 @@
|
|
|
+<template>
|
|
|
+ <div
|
|
|
+ class="main-data terminal-dialog-area"
|
|
|
+ @click.stop="preventDefault"
|
|
|
+ @mouseleave="leaveFun"
|
|
|
+
|
|
|
+ >
|
|
|
+ <div class="dialog-title">
|
|
|
+ <img src="@/assets/images/main/cont_title_bg.png" />
|
|
|
+ <div class="title">生产辅助基建项目情况</div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-cont">
|
|
|
+ <div class="dialog-left">
|
|
|
+ <div class="content-title long">
|
|
|
+ <span class="title">在建项目数量</span>
|
|
|
+ </div>
|
|
|
+ <div class="content-maper">
|
|
|
+ <div class="content-one">
|
|
|
+ <div class="">
|
|
|
+ <div class="photo">
|
|
|
+ <img src="@/assets/images/main/choose_bg11.png" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="rate-area">
|
|
|
+ <img src="@/assets/images/main/choose_bg13.png" class="img-cry" />
|
|
|
+ <div class="rate">
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-left">
|
|
|
+ <div class="content-title long">
|
|
|
+ <span class="title">前期审批数量</span>
|
|
|
+ </div>
|
|
|
+ <div class="box-big">
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">可研评审</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">初设评审</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">政府立项备案</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">土地手续</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">用地规划</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-big">
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">工程规划</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">设计招标</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">施工招标</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">监理招标</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-small">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">施工许可</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="dialog-left">
|
|
|
+ <div class="content-title long">
|
|
|
+ <span class="title">施工阶段数量</span>
|
|
|
+ </div>
|
|
|
+ <div class="box-big">
|
|
|
+ <div class="box-smalls">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">基础施工</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-smalls">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">主体工程</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-smalls">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">室内外装修</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="box-smalls">
|
|
|
+ <div class="box-above">
|
|
|
+ <img src="@/assets/images/main/choose_bg12.png" />
|
|
|
+ <div class="name-white">室外工程</div>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="names">56<span class="nums">个</span></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import LineChart from "@/components/Echarts/LineChart";
|
|
|
+import PieChart from "@/components/Echarts/PieChart";
|
|
|
+import BarChart from "@/components/Echarts/BarChart.vue";
|
|
|
+import echarts from "echarts";
|
|
|
+
|
|
|
+export default {
|
|
|
+ name: "BuildingSaveDialog",
|
|
|
+ components: {
|
|
|
+ BarChart,
|
|
|
+ PieChart,
|
|
|
+ LineChart,
|
|
|
+ },
|
|
|
+ props: {},
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ //在线数
|
|
|
+ pieData: [],
|
|
|
+ catePieData: [
|
|
|
+ { value: 40, name: "新能源汽车" },
|
|
|
+ { value: 20, name: "燃油汽车" },
|
|
|
+ ],
|
|
|
+ totalPieData: [
|
|
|
+ { value: 110, name: "商务车" },
|
|
|
+ { value: 120, name: "越野车" },
|
|
|
+ { value: 130, name: "小型客车" },
|
|
|
+ { value: 140, name: "大型客车" },
|
|
|
+ { value: 150, name: "小轿车" },
|
|
|
+ ],
|
|
|
+ catePieLegend: {
|
|
|
+ orient: "vertical",
|
|
|
+ top: 60,
|
|
|
+ right: 23,
|
|
|
+ itemWidth: 8, // 设置图例标记的宽度
|
|
|
+ itemHeight: 8, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ totalPieLegend: {
|
|
|
+ top: 20,
|
|
|
+ right: 10,
|
|
|
+ itemWidth: 8,
|
|
|
+ itemHeight: 8,
|
|
|
+ orient: "vertical",
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ pieLegend: {
|
|
|
+ orient: "vertical",
|
|
|
+ top: 50,
|
|
|
+ right: 30,
|
|
|
+ itemWidth: 8, // 设置图例标记的宽度
|
|
|
+ itemHeight: 8, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ pieCenter: ["27%", "50%"],
|
|
|
+ totalCenter: ["30%", "50%"],
|
|
|
+ catePieCenter: ["27%", "50%"],
|
|
|
+ pieRadius: ["35%", "50%"],
|
|
|
+
|
|
|
+ //各单位终端在线
|
|
|
+ barData: [],
|
|
|
+ barAxis: {},
|
|
|
+ barYAxis: {},
|
|
|
+ barLegend: {},
|
|
|
+
|
|
|
+ personInOutBarData: [
|
|
|
+ {
|
|
|
+ name: "员工",
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#43DCDB",
|
|
|
+ //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: [110, 120, 130, 140, 150, 160, 155, 145, 135, 125, 115, 15],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "访客",
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#FFD296",
|
|
|
+ //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: [10, 20, 30, 40, 50, 60, 55, 45, 35, 25, 15, 5],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ personInOutBarAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "01月",
|
|
|
+ "02月",
|
|
|
+ "03月",
|
|
|
+ "04月",
|
|
|
+ "05月",
|
|
|
+ "06月",
|
|
|
+ "07月",
|
|
|
+ "08月",
|
|
|
+ "09月",
|
|
|
+ "10月",
|
|
|
+ "11月",
|
|
|
+ "12月",
|
|
|
+ ],
|
|
|
+ axisLabel: {
|
|
|
+ color: "white", // 设置横坐标轴字体颜色为红色
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#08595B",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitArea: false,
|
|
|
+ },
|
|
|
+ personInOutBarYaxis: {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ name: "人",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "white", // 设置横坐标轴字体颜色为红色
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitArea: false,
|
|
|
+ },
|
|
|
+ personInOutBarLegend: {
|
|
|
+ top: 0,
|
|
|
+ orient: "horizontal",
|
|
|
+ right: 0,
|
|
|
+ itemWidth: 17, // 设置图例标记的宽度
|
|
|
+ itemHeight: 10, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ barGrid: {
|
|
|
+ top: 30,
|
|
|
+ left: "2%",
|
|
|
+ right: "5%",
|
|
|
+ containLabel: true,
|
|
|
+ bottom: 0,
|
|
|
+ },
|
|
|
+ departmentPersonInOutBarData: [
|
|
|
+ {
|
|
|
+ name: "员工",
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#43DCDB",
|
|
|
+ //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: [110, 150, 160, 135, 115, 15],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "访客",
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#FFD296",
|
|
|
+ //barBorderRadius: [10, 10, 0, 0], // 统一设置四个角的圆角大小
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: [10, 20, 30, 40, 50, 60, 55, 45, 35, 25, 15, 5],
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ departmentPersonInOutBarAxis: {
|
|
|
+ type: "category",
|
|
|
+ data: ["财务资产部", "离退休工作部", "后勤保障部", "物资管理部", "数字化工作部", "纪委办公室"],
|
|
|
+ axisLabel: {
|
|
|
+ color: "white", // 设置横坐标轴字体颜色为红色
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: true,
|
|
|
+ lineStyle: {
|
|
|
+ color: "#08595B",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitArea: false,
|
|
|
+ },
|
|
|
+ departmentPersonInOutBarYaxis: {
|
|
|
+ type: "value",
|
|
|
+ boundaryGap: [0, 0.01],
|
|
|
+ name: "人",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ color: "white", // 设置横坐标轴字体颜色为红色
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitArea: false,
|
|
|
+ },
|
|
|
+ departmentPersonInOutBarLegend: {
|
|
|
+ top: 0,
|
|
|
+ orient: "horizontal",
|
|
|
+ right: 0,
|
|
|
+ itemWidth: 17, // 设置图例标记的宽度
|
|
|
+ itemHeight: 10, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ visitorDataList: [
|
|
|
+ {
|
|
|
+ name: "于俊",
|
|
|
+ time: "2024 / 11 / 15 15:01",
|
|
|
+ department: "财务资产部",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "于俊",
|
|
|
+ time: "2024 / 11 / 15 14:58",
|
|
|
+ department: "财务资产部",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "于俊",
|
|
|
+ time: "2024 / 11 / 15 14:55",
|
|
|
+ department: "财务资产部",
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "于俊",
|
|
|
+ time: "2024 / 11 / 15 14:01",
|
|
|
+ department: "财务资产部",
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ warningList: [
|
|
|
+ {
|
|
|
+ name: "国网太原供电公司",
|
|
|
+ data1: 356,
|
|
|
+ data2: 100,
|
|
|
+ data3: 56,
|
|
|
+ data4: 67,
|
|
|
+ data5: 133,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "国网临汾供电公司",
|
|
|
+ data1: 324,
|
|
|
+ data2: 80,
|
|
|
+ data3: 95,
|
|
|
+ data4: 63,
|
|
|
+ data5: 86,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "国网晋城供电公司",
|
|
|
+ data1: 286,
|
|
|
+ data2: 80,
|
|
|
+ data3: 65,
|
|
|
+ data4: 46,
|
|
|
+ data5: 95,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "国网长治供电公司",
|
|
|
+ data1: 275,
|
|
|
+ data2: 84,
|
|
|
+ data3: 72,
|
|
|
+ data4: 63,
|
|
|
+ data5: 56,
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "国网运城供电公司",
|
|
|
+ data1: 268,
|
|
|
+ data2: 70,
|
|
|
+ data3: 65,
|
|
|
+ data4: 73,
|
|
|
+ data5: 60,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.handlePie();
|
|
|
+ this.handleBar();
|
|
|
+ },
|
|
|
+ destroyed() {},
|
|
|
+ beforeDestroy() {},
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ choose(){
|
|
|
+ this.$emit('choose')
|
|
|
+ },
|
|
|
+ chooseHealth(){
|
|
|
+ this.$emit('chooseH')
|
|
|
+ },
|
|
|
+
|
|
|
+ //实例化饼图
|
|
|
+ handlePie() {
|
|
|
+ this.pieData = [
|
|
|
+ { value: 100, name: "离线数" },
|
|
|
+ { value: 200, name: "在线数" },
|
|
|
+ ];
|
|
|
+ },
|
|
|
+
|
|
|
+ //实例化柱状图
|
|
|
+ handleBar() {
|
|
|
+ this.barData = [
|
|
|
+ {
|
|
|
+ name: "总数",
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#43DCDB",
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: [320, 332, 201, 334, 390, 100],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "离线数",
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#EAA553",
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: [220, 232, 301, 334, 190, 200],
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "在线数",
|
|
|
+ type: "bar",
|
|
|
+ itemStyle: {
|
|
|
+ color: "#1B5CBB",
|
|
|
+ },
|
|
|
+ barWidth: 10,
|
|
|
+ data: [120, 332, 101, 134, 290, 300],
|
|
|
+ },
|
|
|
+ ];
|
|
|
+
|
|
|
+ this.barGrid = {
|
|
|
+ top: 30,
|
|
|
+ bottom: 0,
|
|
|
+ left: "2%",
|
|
|
+ right: "5%",
|
|
|
+ containLabel: true,
|
|
|
+ };
|
|
|
+
|
|
|
+ this.barLegend = {
|
|
|
+ right: 20,
|
|
|
+ top: 0,
|
|
|
+ itemWidth: 17, // 设置图例标记的宽度
|
|
|
+ itemHeight: 10, // 设置图例标记的高度
|
|
|
+ textStyle: {
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ };
|
|
|
+
|
|
|
+ this.barAxis = {
|
|
|
+ type: "category",
|
|
|
+ data: [
|
|
|
+ "国网太原供电公司",
|
|
|
+ "国网运城供电公司",
|
|
|
+ "国网临汾供电公司",
|
|
|
+ "国网晋城供电公司",
|
|
|
+ "国网吕梁供电公司",
|
|
|
+ ],
|
|
|
+ axisLabel: {
|
|
|
+ color: "white", // 设置横坐标轴字体颜色为红色
|
|
|
+ rotate:-50
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ lineStyle: {
|
|
|
+ color: "#08595B",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitArea: false,
|
|
|
+ };
|
|
|
+
|
|
|
+ this.barYAxis = {
|
|
|
+ name: "数量(个)",
|
|
|
+ nameTextStyle: {
|
|
|
+ color: "#fff",
|
|
|
+ padding: [0, 0, 0, 5],
|
|
|
+ fontSize: 14,
|
|
|
+ },
|
|
|
+ axisLabel: {
|
|
|
+ formatter: "{value}",
|
|
|
+ color: "#FFF",
|
|
|
+ },
|
|
|
+ axisLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ axisTick: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitLine: {
|
|
|
+ show: false,
|
|
|
+ },
|
|
|
+ splitArea: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+
|
|
|
+ //鼠标移出
|
|
|
+ leaveFun() {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$emit("closeDialog");
|
|
|
+ }, 200);
|
|
|
+ },
|
|
|
+
|
|
|
+ preventDefault() {
|
|
|
+ console.log(11);
|
|
|
+ },
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="scss" >
|
|
|
+.terminal-dialog-area {
|
|
|
+ overflow: hidden;
|
|
|
+ width: 580px;
|
|
|
+ height: 550px;
|
|
|
+ background-size: cover;
|
|
|
+ padding: 19px 15px 11px 15px;
|
|
|
+
|
|
|
+ .dialog-title {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ img {
|
|
|
+ width: 331px;
|
|
|
+ height: 32px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 900;
|
|
|
+ font-family: "PingFangSC";
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ top: -5px;
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-cont {
|
|
|
+ width: 550px;
|
|
|
+ height: 466px;
|
|
|
+ padding: 15px;
|
|
|
+ overflow-y: scroll;
|
|
|
+ background: url("../../../assets/images/main/components_nolong_bg.png")
|
|
|
+ no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+
|
|
|
+ .dialog-left {
|
|
|
+ width: 520px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .dialog-right {
|
|
|
+ width: 520px;
|
|
|
+ float: right;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-list {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between !important;
|
|
|
+ margin-bottom: 0px;
|
|
|
+
|
|
|
+ .dialog-item {
|
|
|
+ width: calc(50% - 20px);
|
|
|
+ }
|
|
|
+
|
|
|
+ .dialog-item-cont {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-top: 40px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .wid100 {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ width: 100%;
|
|
|
+ background: url("../../../assets/images/main/title_pro_long.png")
|
|
|
+ no-repeat;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-title {
|
|
|
+ width: 230px;
|
|
|
+ height: 26px;
|
|
|
+ background: url("../../../assets/images/main/title_pro.png") no-repeat !important;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ font-family: "PingFangSC";
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #00ffff;
|
|
|
+ padding-left: 20px !important;
|
|
|
+ .title {
|
|
|
+ display: block;
|
|
|
+ position: relative;
|
|
|
+ top: -5px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-title.long {
|
|
|
+ width: 100%;
|
|
|
+ background: url("../../../assets/images/main/title_pro_long.png") no-repeat !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+ .title-format {
|
|
|
+ width: 150px;
|
|
|
+ height: 80px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ .title-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ .title-en {
|
|
|
+ font-size: 8px;
|
|
|
+ color: #ffffff;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-area {
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 126.43px;
|
|
|
+ height: 62px;
|
|
|
+ }
|
|
|
+ .rate {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 150px;
|
|
|
+ height: 60px;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ color: #fff;
|
|
|
+ .rate-data {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ color: #ffba44;
|
|
|
+ .data {
|
|
|
+ font-family: "electronicFont";
|
|
|
+ font-size: 30px;
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ font-size: 12px;
|
|
|
+ width: 60px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content {
|
|
|
+ .title-format {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ img {
|
|
|
+ width: 6px;
|
|
|
+ height: 24px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .title-info {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ .title-en {
|
|
|
+ font-size: 8px;
|
|
|
+ color: #ffffff;
|
|
|
+ opacity: 0.4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .total-data {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ color: #19fcde;
|
|
|
+ margin-top: 4px;
|
|
|
+ .total {
|
|
|
+ font-size: 35px;
|
|
|
+ font-family: "electronicFont";
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .rate-area {
|
|
|
+ width: 150px;
|
|
|
+ height: 70px;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ img {
|
|
|
+ width: 150px;
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+ .rate {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ width: 100%;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+
|
|
|
+ color: #fff;
|
|
|
+ .rate-data {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ color: #ffba44;
|
|
|
+ .data {
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: "electronicFont";
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .desc {
|
|
|
+ font-size: 12px;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .chart-area {
|
|
|
+ margin-top: 50px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .other-cont {
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ display: block;
|
|
|
+ width: 70px;
|
|
|
+ height: auto;
|
|
|
+ }
|
|
|
+ .other-info {
|
|
|
+ padding-left: 2px;
|
|
|
+
|
|
|
+ .desc {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .num-info {
|
|
|
+ width: 100%;
|
|
|
+ padding-top: 2px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 30px;
|
|
|
+ color: #19fcde;
|
|
|
+ font-weight: bold;
|
|
|
+ font-family: "electronicFont";
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00ffff;
|
|
|
+ font-weight: 500;
|
|
|
+ position: relative;
|
|
|
+ top: 4px;
|
|
|
+ }
|
|
|
+ .mar {
|
|
|
+ margin-left: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mar {
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+ .data-left {
|
|
|
+ width: auto;
|
|
|
+
|
|
|
+ .data-item {
|
|
|
+ width: auto;
|
|
|
+ margin-bottom: 23px;
|
|
|
+
|
|
|
+ .data-fir {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .icon {
|
|
|
+ width: 15px;
|
|
|
+ height: 15px;
|
|
|
+ margin-right: 6px;
|
|
|
+ }
|
|
|
+ .name {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-snd {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding-top: 2px;
|
|
|
+
|
|
|
+ .num {
|
|
|
+ font-size: 32px;
|
|
|
+ color: #00ffff;
|
|
|
+ font-family: "electronicFont";
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00ffff;
|
|
|
+ font-weight: 500;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ left: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .data-right {
|
|
|
+ padding-top: 3px;
|
|
|
+
|
|
|
+ .circle {
|
|
|
+ width: 100px;
|
|
|
+ height: 100px;
|
|
|
+ background: url("../../../assets/images/service_new/circle.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: flex-start;
|
|
|
+
|
|
|
+ .value {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 32px;
|
|
|
+ color: #00ffff;
|
|
|
+ font-family: "electronicFont";
|
|
|
+ position: relative;
|
|
|
+ top: 15px;
|
|
|
+ }
|
|
|
+ .unit {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00ffff;
|
|
|
+ font-weight: 500;
|
|
|
+ position: relative;
|
|
|
+ top: 5px;
|
|
|
+ left: 2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .choose-area {
|
|
|
+ margin: 20px 0;
|
|
|
+ .choose-item {
|
|
|
+ width: 104px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ background: url("../../../assets/images/main/choose_bg.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-right: 16px;
|
|
|
+ padding-left: 12px;
|
|
|
+ color: #00ffff;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .table-cont {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .table-top {
|
|
|
+ width: 100%;
|
|
|
+ height: 26px;
|
|
|
+ background: url("../../../assets/images/building_guarantee/img_11.png")
|
|
|
+ no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ padding: 0 25px 0 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #00ffff;
|
|
|
+ }
|
|
|
+ .table-bot {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ .table-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 38px;
|
|
|
+ padding: 0 25px 0 10px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-area {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding: 0px 15px 0;
|
|
|
+ .list-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: center;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #ffffff;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ flex: 1;
|
|
|
+ .item-1 {
|
|
|
+ width: 8%;
|
|
|
+ }
|
|
|
+ .item-2 {
|
|
|
+ width: 23%;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ overflow: hidden;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .item-3 {
|
|
|
+ width: 14%;
|
|
|
+ }
|
|
|
+ .item-4,
|
|
|
+ .item-5 {
|
|
|
+ width: 13%;
|
|
|
+ }
|
|
|
+ .item-6 {
|
|
|
+ width: 19%;
|
|
|
+ }
|
|
|
+ .item-7 {
|
|
|
+ width: 17%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-title {
|
|
|
+ color: #00ffff !important;
|
|
|
+ padding: 4px 0;
|
|
|
+ background: url("../../../assets/images/main/title_line.png") no-repeat;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ margin-bottom: 10px !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .data-chart {
|
|
|
+ margin-top: 12px !important;
|
|
|
+ margin-bottom: 10px !important;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar {
|
|
|
+ display: none;
|
|
|
+ width: 3px;
|
|
|
+ height: 3px;
|
|
|
+ }
|
|
|
+ .content-left{
|
|
|
+ width: 520px;
|
|
|
+ height:320px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+ .content-our{
|
|
|
+ width: 50%;
|
|
|
+ height: 130px;
|
|
|
+ display: flex;
|
|
|
+ padding-top: 40px;
|
|
|
+ padding-left: 10px;
|
|
|
+ //align-items: center;
|
|
|
+ .img-car{
|
|
|
+ width: 105px;
|
|
|
+ height: 60px;
|
|
|
+ }
|
|
|
+ .content-two{
|
|
|
+ width: 181.5px;
|
|
|
+ height: 81px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .names{
|
|
|
+ font-size: 32px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-family: 'electronicFont';
|
|
|
+ .nums{
|
|
|
+ font-size:10px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-weight: 500;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ left:2px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .saddddf{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ }
|
|
|
+ .naw{
|
|
|
+ color: white;
|
|
|
+ }
|
|
|
+ .content-area {
|
|
|
+ display: flex;
|
|
|
+ height: 220px;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 15px 20px 0 15px;
|
|
|
+
|
|
|
+ }
|
|
|
+ .contentr-left{
|
|
|
+ width: 520px;
|
|
|
+ height:240px;
|
|
|
+ float: left;
|
|
|
+ .content-one{
|
|
|
+ display: flex;
|
|
|
+ padding-top: 5px;
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ height: 100%; /* 确保父容器有高度 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-right{
|
|
|
+ width: 520px;
|
|
|
+ height:240px;
|
|
|
+ float: left;
|
|
|
+ }
|
|
|
+
|
|
|
+ .names{
|
|
|
+ font-size: 32px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-family: 'electronicFont';
|
|
|
+ .nums{
|
|
|
+ font-size:10px;
|
|
|
+ color:#00FFFF;
|
|
|
+ font-weight: 500;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ left:2px;
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ .content-maper{
|
|
|
+
|
|
|
+
|
|
|
+ .content-one{
|
|
|
+ display: flex;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ height: 100%; /* 确保父容器有高度 */
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .rate-data{
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ align-items: baseline;
|
|
|
+ }
|
|
|
+ .breaker{
|
|
|
+ color:#FEC72F ;
|
|
|
+ display: flex; /* 使用 Flexbox */
|
|
|
+ justify-content: center; /* 水平居中 */
|
|
|
+ align-items: center; /* 垂直居中 */
|
|
|
+ }
|
|
|
+ .said{
|
|
|
+ width: 1px;
|
|
|
+ height: 13px;
|
|
|
+ background-color: #00FFFF;
|
|
|
+ }
|
|
|
+ .content-ear{
|
|
|
+ margin-top: 10px;
|
|
|
+ height: 115px;
|
|
|
+ }
|
|
|
+ .table-roll{
|
|
|
+ height: 50px;
|
|
|
+ overflow:auto;
|
|
|
+ }
|
|
|
+ .witeh{
|
|
|
+ color: #018989;
|
|
|
+ }
|
|
|
+ .namer{
|
|
|
+ color: white;
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ .photo{
|
|
|
+ padding-right: 30px;
|
|
|
+ img{
|
|
|
+ width: 52.68px;
|
|
|
+ height: 59.67px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-big{
|
|
|
+ width: 100%;
|
|
|
+ height: 80px;
|
|
|
+ padding-top: 10px;
|
|
|
+ padding-bottom: 20px;
|
|
|
+ display: flex;
|
|
|
+ padding-left: 10px;
|
|
|
+ .name-white{
|
|
|
+ color: white;
|
|
|
+ font-family: PingFangSC-Regular;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 19.6px;
|
|
|
+ }
|
|
|
+ .box-small{
|
|
|
+ width: 20%;
|
|
|
+
|
|
|
+ height: 50px;
|
|
|
+ .box-above{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .box-smalls{
|
|
|
+ width: 25%;
|
|
|
+ height: 50px;
|
|
|
+ .box-above{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ ::-webkit-scrollbar-thumb {
|
|
|
+ //滑块部分
|
|
|
+ // border-radius: 5px;
|
|
|
+ background-color: #58cbbb;
|
|
|
+ }
|
|
|
+
|
|
|
+ ::-webkit-scrollbar-track {
|
|
|
+ //轨道部分
|
|
|
+ // box-shadow: inset 0 0 5px #ddd;
|
|
|
+ background: #ddd;
|
|
|
+ // border-radius: 5px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
psguo
