From a38281e697cde9f45926a6af0c88bec14501fec0 Mon Sep 17 00:00:00 2001
From: liuyg <liuyg@qq.com>
Date: Tue, 15 Feb 2022 11:06:34 +0800
Subject: [PATCH] 68个表格在1366*768下的适配，保安单位情况智能分析中的图表的适配以及其按钮会被遮住不能点击
---
src/views/securityAnalysis/index.vue | 646 +++++++++++++++++++++++++++++++++++-----------------------
1 files changed, 393 insertions(+), 253 deletions(-)
diff --git a/src/views/securityAnalysis/index.vue b/src/views/securityAnalysis/index.vue
index e6b3b88..1f4c38d 100644
--- a/src/views/securityAnalysis/index.vue
+++ b/src/views/securityAnalysis/index.vue
@@ -5,44 +5,117 @@
<!-- 保安员审查情况统计
<div>饼图</div> -->
<!-- </div> -->
-
+
<div class="examinesBtn" v-if="examineBtnVisiable">
- <el-radio-group v-model="tabPosition" style="margin-bottom: 30px" size="small" @change="handleClick">
+ <!-- <el-radio-group
+ v-model="tabPosition"
+ size="small"
+ @change="handleClick"
+ >
<el-radio-button label="1">保安员审查情况统计</el-radio-button>
<el-radio-button label="2">企业登录预警情况统计</el-radio-button>
- </el-radio-group>
+ </el-radio-group> -->
+ <el-dropdown class="examinesBtnChouse" @command="handleClick">
+ <span class="el-dropdown-link">
+ {{ examinesBtnChousetext }} <i class="el-icon-caret-bottom"></i>
+ </span>
+ <el-dropdown-menu slot="dropdown">
+ <el-dropdown-item command="1">保安员审查情况统计</el-dropdown-item>
+ <el-dropdown-item command="2"
+ >企业登录预警情况统计</el-dropdown-item
+ >
+ </el-dropdown-menu>
+ </el-dropdown>
+ <!-- <div class="examinesBtnChouse">
+ {{ examinesBtnChousetext }} <i class="el-icon-caret-bottom"></i>
+ </div> -->
</div>
- <div id="ech1" class="examines" ref="ech1" style="visibility:visible;z-index:666">
- </div>
- <div id="ech1s" class="examiness" ref="ech1s" style="visibility:hidden;z-index:333">
- </div>
- <!-- 保安员审查情况统计
- <div>饼图</div> -->
-
- <div class="certificate" ref="ech2">
- <!-- 保安员持证情况统计
- <div>饼图</div> -->
+ <div class="examines" v-show="showECH1">
+ <img
+ src="http://223.82.109.183:2080/img/table.png"
+ alt=""
+ class="myToolbox"
+ @click="openMyToolBox('保安员审查情况明细', 1)"
+ />
+ <div id="ech1" class="examinesin" ref="ech1">1</div>
</div>
+ <div class="examiness" v-show="!showECH1">
+ <img
+ src="http://223.82.109.183:2080/img/table.png"
+ alt=""
+ class="myToolbox"
+ @click="openMyToolBox('企业登录情况明细', 7)"
+ />
+ <div id="ech1s" class="examinessin" ref="ech1s"></div>
+ </div>
+ <!-- 保安员审查情况统计
+ <div>饼图</div> -->
+ <div class="certificate">
+ <img
+ src="http://223.82.109.183:2080/img/table.png"
+ alt=""
+ class="myToolbox"
+ @click="openMyToolBox('保安员持证情况明细', 2)"
+ />
+ <div class="certificatein" ref="ech2">
+ <!-- 保安员持证情况统计
+ <div>饼图</div> -->
+ </div>
+ </div>
+
<!-- <div class="czbut"></div> -->
</div>
<div class="securityAnalysiscenter">
- <div class="examination" ref="ech3">
- <!-- 保安员考试情况统计
+ <div class="examination">
+ <img
+ src="http://223.82.109.183:2080/img/table.png"
+ alt=""
+ class="myToolbox"
+ @click="openMyToolBox('保安员考试情况明细', 3)"
+ />
+ <div class="examinationin" ref="ech3">
+ <!-- 保安员考试情况统计
<div>堆叠面积图</div> -->
+ </div>
</div>
- <div class="dispatchUnit" ref="ech4">
- <!-- 派遣服务单位统计
+
+ <div class="dispatchUnit">
+ <img
+ src="http://223.82.109.183:2080/img/table.png"
+ alt=""
+ class="myToolbox"
+ @click="openMyToolBox('派遣服务单位明细', 4)"
+ />
+ <div class="dispatchUnitin" ref="ech4">
+ <!-- 派遣服务单位统计
<div>柱状图</div> -->
+ </div>
</div>
</div>
<div class="securityAnalysisright">
- <div class="dispatchSecurity" ref="ech5">
- <!-- 保安员年龄分布情况统计
+ <div class="dispatchSecurity">
+ <img
+ src="http://223.82.109.183:2080/img/table.png"
+ alt=""
+ class="myToolbox"
+ @click="openMyToolBox('保安员年龄分布情况明细', 5)"
+ />
+ <div class="dispatchSecurityin" ref="ech5">
+ <!-- 保安员年龄分布情况统计
<div>饼图</div> -->
+ </div>
</div>
- <div class="socialSecurity" ref="ech6">
- <!-- 社保缴纳情况统计
+ <div class="socialSecurity">
+ <img
+ src="http://223.82.109.183:2080/img/table.png"
+ alt=""
+ class="myToolbox"
+ @click="openMyToolBox('保安员学历分布情况明细', 6)"
+ />
+ <div class="socialSecurityin" ref="ech6">
+ <!-- 社保缴纳情况统计
<div>饼图</div> -->
+ </div>
</div>
</div>
<div>
@@ -62,10 +135,7 @@
<!-- 保安员审查情况统计 -->
</situation>
- <loginRecord
- :card="{ jurisdiction: jurisdiction }"
- v-if="sees == 7"
- >
+ <loginRecord :card="{ jurisdiction: jurisdiction }" v-if="sees == 7">
<!-- 保安员审查情况统计 -->
</loginRecord>
@@ -117,6 +187,7 @@
getEducationStatistics,
getLoginDataStatistics
} from "@/api/securityAnalysis/securityAnalysis";
+import { mapGetters } from "vuex";
import { mapState } from "vuex";
import { getRoleDetail } from "@/api/system/role";
import certificate from "./child/certificate.vue";
@@ -146,36 +217,40 @@
EC5: "", //保安派遣情况统计 // 饼图
EC6: "", //社保缴纳情况统计 // 饼图
deptid: "",
- oneVisiable:true,
- examineBtnVisiable:true,
+ oneVisiable: true,
+ examineBtnVisiable: true,
jurisdiction: "",
tabPosition: 1,
- examinetionTitle:"保安员审查情况统计",
+ examinetionTitle: "保安员审查情况统计",
examine1: [],
dialogVisible: false,
titles: "",
sees: "",
colors: ["#29C093", "#F34A4A"], //[正常，异常]；
+ showECH1: true, //显示保安员审查情况统计或企业登录预警情况统计
+ changeSizeTime: null,
+ examinesBtnChousetext: "保安员审查情况统计"
};
},
computed: {
...mapState({
- userInfo: (state) => state.user.userInfo,
+ userInfo: state => state.user.userInfo
}),
+ ...mapGetters(["windowWidth", "windowHeight"]),
ids1() {
let ids1 = [];
- this.selectionList1.forEach((ele) => {
+ this.selectionList1.forEach(ele => {
ids1.push(ele.id);
});
return ids1.join(",");
},
ids2() {
let ids2 = [];
- this.selectionList2.forEach((ele) => {
+ this.selectionList2.forEach(ele => {
ids2.push(ele.id);
});
return ids2.join(",");
- },
+ }
},
watch: {
dialogVisible() {
@@ -198,21 +273,58 @@
this.getEC6();
}
},
+ windowWidth() {
+ let that = this;
+ if (that.changeSizeTime) {
+ return;
+ } else {
+ that.changeSizeTime = setTimeout(() => {
+ that.changeSize();
+ clearTimeout(that.changeSizeTime);
+ that.changeSizeTime = null;
+ }, 600);
+ }
+ },
+ windowHeight() {
+ let that = this;
+ if (that.changeSizeTime) {
+ return;
+ } else {
+ that.changeSizeTime = setTimeout(() => {
+ that.changeSize();
+ clearTimeout(that.changeSizeTime);
+ that.changeSizeTime = null;
+ }, 600);
+ }
+ }
},
methods: {
+ //更新图表尺寸
+ changeSize() {
+ console.log("更新图表尺寸");
+ this.EC1.resize();
+ this.EC1s.resize();
+ this.EC2.resize();
+ this.EC3.resize();
+ this.EC4.resize();
+ this.EC5.resize();
+ this.EC6.resize();
+ },
//tab 切换
- handleClick(val){
- if(val==1){
- document.getElementById("ech1").style.visibility = "visible";
- document.getElementById("ech1s").style.visibility = "hidden";
- }else{
- document.getElementById("ech1").style.visibility = "hidden";
- document.getElementById("ech1s").style.visibility = "visible";
+ handleClick(val) {
+ // if (val == this.tabPosition) {
+ // return;
+ // }
+ if (val == 1) {
+ this.showECH1 = true;
+ } else {
+ this.showECH1 = false;
}
this.tabPosition = val;
this.getEC1(val);
},
creatOurEcharts() {
+ // return;
this.EC1 = echarts.init(this.$refs.ech1);
this.EC1s = echarts.init(this.$refs.ech1s);
this.EC2 = echarts.init(this.$refs.ech2);
@@ -234,23 +346,23 @@
d = [
{
value: yes,
- name: okmsg,
+ name: okmsg
},
{
value: not,
- name: nomsg,
- },
+ name: nomsg
+ }
];
} else {
d = [
{
value: 0,
- name: okmsg,
+ name: okmsg
},
{
value: 0,
- name: nomsg,
- },
+ name: nomsg
+ }
];
}
// console.log(d, ok, no);
@@ -271,31 +383,41 @@
? "0%"
: Math.round((num / total) * 10000) / 100.0 + "%";
},
+ openMyToolBox(titles, id) {
+ var that = this;
+ that.dialogVisible = true;
+ that.sees = id;
+ that.titles = titles;
+ },
gettoolbox(title, titles, id) {
+ //由于在1366，,768分辨率下，会被覆盖掉不能点击，所以放弃
+ return;
var that = this;
return {
- show: true,
+ show: false,
itemSize: 25,
- top: 20,
- right: 20,
+ top: 5,
+ right: 15,
feature: {
myTool1: {
show: true,
+ zlevel: 999,
+ z: 999,
title: "点击查看详情",
icon: "image://http://223.82.109.183:2080/img/table.png",
- onclick: function () {
+ onclick: function() {
that.dialogVisible = true;
that.sees = id;
that.titles = titles;
- },
- },
- },
+ }
+ }
+ }
};
},
setColor(d, color) {
for (var k in d) {
var itemStyle = {
- color: color[k],
+ color: color[k]
};
d[k]["itemStyle"] = itemStyle;
}
@@ -304,49 +426,52 @@
},
getEC1(tab) {
var that = this;
- if(tab==1){
+ if (tab == 1) {
getinformationselectExtype(this.deptid, this.jurisdiction)
- .then((res) => {
- var a = res.data.data;
- var b = that.changedata(a, "zc", "bzc", "情况正常", "情况异常");
- that.setEC1(b);
- })
- .catch((res) => {
- var b = that.changedata([], "zc", "bzc", "情况正常", "情况异常");
- that.setEC1(b);
- });
+ .then(res => {
+ var a = res.data.data;
+ var b = that.changedata(a, "zc", "bzc", "情况正常", "情况异常");
+ that.setEC1(b);
+ that.EC1.resize();
+ })
+ .catch(res => {
+ var b = that.changedata([], "zc", "bzc", "情况正常", "情况异常");
+ that.setEC1(b);
+ that.EC1.resize();
+ });
}
- if(tab==2){
- getLoginDataStatistics(this.jurisdiction).then((res)=>{
+ if (tab == 2) {
+ getLoginDataStatistics(this.jurisdiction).then(res => {
var b = res.data.data;
var data = [
{
- value:b[0],
- name:"近14天登录企业数"
+ value: b[0],
+ name: "近14天登录企业数"
},
{
- value:b[1],
- name:"近14天未登录企业数"
+ value: b[1],
+ name: "近14天未登录企业数"
}
- ]
+ ];
that.setEC1s(data);
- })
+ that.EC1s.resize();
+ });
}
},
setEC1(d) {
this.examine1 = [
{
title: "审查时间：",
- value: this.getTime(),
+ value: this.getTime()
},
{
title: "问题保安员人数：",
- value: d[1].value + "人",
+ value: d[1].value + "人"
},
{
title: "问题保安员比例：",
- value: this.GetPercent(+d[1].value, +d[0].value + +d[1].value),
- },
+ value: this.GetPercent(+d[1].value, +d[0].value + +d[1].value)
+ }
];
var option, data;
data = this.setColor(d, this.colors);
@@ -354,16 +479,16 @@
title: {
text: this.examinetionTitle,
top: 25,
- left: "center",
+ left: "center"
},
tooltip: {
- trigger: "item",
+ trigger: "item"
},
legend: {
x: "center",
- y: "90%",
+ y: "90%"
},
- toolbox: this.gettoolbox("审查情况查询", "保安员审查情况明细", 1),
+ // toolbox: this.gettoolbox("审查情况查询", "保安员审查情况明细", 1),
series: [
{
// name: "访问来源",
@@ -374,42 +499,42 @@
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
- shadowColor: "rgba(0, 0, 0, 0.5)",
- },
+ shadowColor: "rgba(0, 0, 0, 0.5)"
+ }
},
label: {
formatter: "{name|{b}}\n({d}%)",
rich: {
time: {
fontSize: 10,
- color: "#999",
- },
- },
- },
- },
- ],
+ color: "#999"
+ }
+ }
+ }
+ }
+ ]
};
this.EC1.setOption(option);
},
//登录情况统计
setEC1s(d) {
- var option,data;
+ var option, data;
data = this.setColor(d, this.colors);
option = {
title: {
text: "",
top: 25,
- left: "center",
+ left: "center"
},
tooltip: {
- trigger: "item",
+ trigger: "item"
},
legend: {
x: "center",
- y: "90%",
+ y: "90%"
},
- toolbox: this.gettoolbox("登录情况查询", "企业登录情况明细", 7),
+ // toolbox: this.gettoolbox("登录情况查询", "企业登录情况明细", 7),
series: [
{
type: "pie",
@@ -419,32 +544,32 @@
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
- shadowColor: "rgba(0, 0, 0, 0.5)",
- },
+ shadowColor: "rgba(0, 0, 0, 0.5)"
+ }
},
label: {
formatter: "{name|{b}}\n({d}%)",
rich: {
time: {
fontSize: 10,
- color: "#999",
- },
- },
- },
- },
- ],
+ color: "#999"
+ }
+ }
+ }
+ }
+ ]
};
this.EC1s.setOption(option);
},
getEC2() {
var that = this;
getinformationselectHold(this.deptid, this.jurisdiction)
- .then((res) => {
+ .then(res => {
var a = res.data.data;
var b = that.changedata(a, "cz", "wcz", "持证", "未持证");
that.setEC2(b);
})
- .catch((res) => {
+ .catch(res => {
var b = that.changedata([], "cz", "wcz", "持证", "未持证");
that.setEC2(b);
});
@@ -459,18 +584,18 @@
text: "保安员持证情况统计",
// subtext: "纯属虚构",
top: 25,
- left: "center",
+ left: "center"
},
tooltip: {
- trigger: "item",
+ trigger: "item"
},
legend: {
// orient: "vertical",
// left: "left", x: "center",
x: "center",
- y: "83%",
+ y: "83%"
},
- toolbox: this.gettoolbox("持证情况查询", "保安员持证情况明细", 2),
+ // toolbox: this.gettoolbox("持证情况查询", "保安员持证情况明细", 2),
series: [
{
// name: "访问来源",
@@ -481,26 +606,26 @@
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
- shadowColor: "rgba(0, 0, 0, 0.5)",
- },
+ shadowColor: "rgba(0, 0, 0, 0.5)"
+ }
},
label: {
formatter: "{name|{b}}\n({d}%)",
rich: {
time: {
fontSize: 10,
- color: "#999",
- },
- },
- },
- },
- ],
+ color: "#999"
+ }
+ }
+ }
+ }
+ ]
};
this.EC2.setOption(option);
},
getEC3() {
- getExamStatisInfo(this.deptid, this.jurisdiction).then((res) => {
+ getExamStatisInfo(this.deptid, this.jurisdiction).then(res => {
this.setEC3(res.data.data);
});
},
@@ -508,16 +633,16 @@
setEC3(data) {
//获取年份
const seriesdata = [];
- data.forEach((item) => {
+ data.forEach(item => {
if (item.type == 1) {
seriesdata.push({
name: item.name + "-合格人数",
type: "bar",
stack: item.name,
emphasis: {
- focus: "series",
+ focus: "series"
},
- data: item.examSocreStatis,
+ data: item.examSocreStatis
});
}
if (item.type == 2) {
@@ -526,38 +651,38 @@
type: "bar",
stack: item.name,
emphasis: {
- focus: "series",
+ focus: "series"
},
- data: item.examSocreStatis,
+ data: item.examSocreStatis
});
}
});
var datetime = [
- "1月",
- "2月",
- "3月",
- "4月",
- "5月",
- "6月",
- "7月",
- "8月",
- "9月",
- "10月",
- "11月",
- "12月",
- ]
+ "1月",
+ "2月",
+ "3月",
+ "4月",
+ "5月",
+ "6月",
+ "7月",
+ "8月",
+ "9月",
+ "10月",
+ "11月",
+ "12月"
+ ];
//echarts 图表数据
var option = {
title: {
text: "保安员考试情况统计",
left: "center",
- top: 20,
+ top: 20
},
tooltip: {
trigger: "axis",
axisPointer: {
- type: "shadow",
- },
+ type: "shadow"
+ }
},
color: ["#91CD76", "#EF6667"],
legend: {
@@ -565,27 +690,27 @@
icon: "circle",
itemWidth: 10,
itemHeight: 10,
- itemGap: 20,
+ itemGap: 20
},
- toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3),
+ // toolbox: this.gettoolbox("考试情况查询", "保安员考试情况明细", 3),
grid: {
left: "3%",
right: "4%",
bottom: "3%",
- containLabel: true,
+ containLabel: true
},
xAxis: [
{
type: "category",
data: datetime
- },
+ }
],
yAxis: [
{
- type: "value",
- },
+ type: "value"
+ }
],
- series: seriesdata,
+ series: seriesdata
};
this.EC3.setOption(option);
@@ -594,7 +719,7 @@
var date = new Date();
var nowYear = date.getFullYear();
var that = this;
- getinformationselectDis(this.deptid, this.jurisdiction).then((res) => {
+ getinformationselectDis(this.deptid, this.jurisdiction).then(res => {
var a = res.data,
d = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
@@ -639,7 +764,7 @@
"9月",
"10月",
"11月",
- "12月",
+ "12月"
];
var date = new Date();
var d = date.getFullYear();
@@ -648,52 +773,51 @@
title: {
text: "派遣服务单位统计",
top: 20,
- left: "center",
+ left: "center"
},
xAxis: {
type: "category",
- data: xxd,
+ data: xxd
// data: xd,
},
- toolbox: this.gettoolbox("派遣单位查询", "派遣服务单位明细", 4),
+ // toolbox: this.gettoolbox("派遣单位查询", "派遣服务单位明细", 4),
yAxis: {
- type: "value",
+ type: "value"
},
tooltip: {
trigger: "item",
- formatter: d + "年{b} : {c} 个",
+ formatter: d + "年{b} : {c} 个"
},
series: [
{
data: data,
- type: "bar",
- },
- ],
+ type: "bar"
+ }
+ ]
};
this.EC4.setOption(option);
},
getEC5() {
var that = this;
- getAgeStatistics(this.deptid, this.jurisdiction)
- .then((res) => {
- var data = res.data.data;
- var a = [
- {
- value:data[0],
- name:"18-30周岁"
- },
- {
- value:data[1],
- name:"30-45周岁"
- },
- {
- value:data[2],
- name:"45-60周岁"
- },
- ]
- console.log(a, "111111");
- this.setEC5(a);
- });
+ getAgeStatistics(this.deptid, this.jurisdiction).then(res => {
+ var data = res.data.data;
+ var a = [
+ {
+ value: data[0],
+ name: "18-30周岁"
+ },
+ {
+ value: data[1],
+ name: "30-45周岁"
+ },
+ {
+ value: data[2],
+ name: "45-60周岁"
+ }
+ ];
+ console.log(a, "111111");
+ this.setEC5(a);
+ });
},
setEC5(d) {
var option;
@@ -703,15 +827,19 @@
text: "保安员年龄分布情况统计",
// subtext: "纯属虚构",
top: 25,
- left: "center",
+ left: "center"
},
tooltip: {
- trigger: "item",
+ trigger: "item"
},
- toolbox: this.gettoolbox("保安员年龄分布情况查询", "保安员年龄分布情况明细", 5),
+ // toolbox: this.gettoolbox(
+ // "保安员年龄分布情况查询",
+ // "保安员年龄分布情况明细",
+ // 5
+ // ),
legend: {
x: "center",
- y: "90%",
+ y: "90%"
},
series: [
{
@@ -722,25 +850,24 @@
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
- shadowColor: "rgba(0, 0, 0, 0.5)",
- },
+ shadowColor: "rgba(0, 0, 0, 0.5)"
+ }
},
label: {
- formatter: "{b}\n({d}%)",
- },
- },
- ],
+ formatter: "{b}\n({d}%)"
+ }
+ }
+ ]
};
this.EC5.setOption(option);
},
getEC6() {
var that = this;
- getEducationStatistics(this.deptid, this.jurisdiction)
- .then((res) => {
- var a = res.data.data;
- that.setEC6(a);
- });
+ getEducationStatistics(this.deptid, this.jurisdiction).then(res => {
+ var a = res.data.data;
+ that.setEC6(a);
+ });
},
setEC6(d) {
var option;
@@ -749,17 +876,21 @@
title: {
text: "保安员学历分布情况统计",
top: 25,
- left: "center",
+ left: "center"
},
tooltip: {
- trigger: "item",
+ trigger: "item"
},
- toolbox: this.gettoolbox("保安员学历分布情况查询", "保安员学历分布情况明细", 6),
+ // toolbox: this.gettoolbox(
+ // "保安员学历分布情况查询",
+ // "保安员学历分布情况明细",
+ // 6
+ // ),
legend: {
// orient: "vertical",
// left: "left",
x: "center",
- y: "83%",
+ y: "83%"
},
series: [
{
@@ -771,8 +902,8 @@
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
- shadowColor: "rgba(0, 0, 0, 0.5)",
- },
+ shadowColor: "rgba(0, 0, 0, 0.5)"
+ }
},
label: {
// alignTo: "edge",
@@ -783,12 +914,12 @@
rich: {
time: {
fontSize: 10,
- color: "#999",
- },
- },
- },
- },
- ],
+ color: "#999"
+ }
+ }
+ }
+ }
+ ]
};
this.EC6.setOption(option);
@@ -806,21 +937,24 @@
// this.setEC4();
// this.setEC5();
// this.setEC6();
- },
+ }
},
- created(){
- if(this.userInfo.role_name == "保安公司管理员" || this.userInfo.role_name == "分公司管理员"){
+ created() {
+ if (
+ this.userInfo.role_name == "保安公司管理员" ||
+ this.userInfo.role_name == "分公司管理员"
+ ) {
this.examinetionTitle = "保安员审查情况统计";
this.examineBtnVisiable = false;
- }else {
+ } else {
this.examinetionTitle = "";
}
},
mounted() {
this.$nextTick(() => {
var roleIds = this.userInfo.role_id.split(",");
- roleIds.forEach((roleId) => {
- getRoleDetail(roleId).then((res) => {
+ roleIds.forEach(roleId => {
+ getRoleDetail(roleId).then(res => {
var roleAlias = res.data.data.roleAlias;
var roleName = res.data.data.roleName;
if (roleName != "保安公司管理员" && roleName != "分公司管理员") {
@@ -834,7 +968,7 @@
});
});
});
- },
+ }
};
</script>
@@ -842,20 +976,22 @@
$widths: 20%;
.securityAnalysis {
width: 100%;
- height: 100%;
+ height: calc(100% - 35px);
// border: 1px solid #000;
display: flex;
align-items: center;
justify-content: space-around;
box-sizing: border-box;
+
.securityAnalysisleft,
.securityAnalysiscenter,
.securityAnalysisright {
- // border: 1px solid #000;
+ // // border: 1px solid #000;
position: relative;
width: 29%;
height: 100%;
- box-sizing: border-box;
+ // border: 1px solid red;
+ // box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-around;
@@ -868,6 +1004,7 @@
.dispatchUnit,
.dispatchSecurity,
.socialSecurity {
+ position: relative;
width: 100%;
height: 49%;
// border: 1px solid #000;
@@ -875,62 +1012,65 @@
background-color: #fff;
}
- .certificate{
+ .certificate {
position: relative;
width: 100%;
height: 49%;
- top: 13.30rem;
+ // top: 13.3rem;
box-sizing: border-box;
background-color: #fff;
}
- .examinesBtn{
+ .examinesBtn {
+ top: 0;
+ left: 0;
position: absolute;
- top: 1.5rem;
- z-index: 999;
- left: 8rem;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background-color: #fff;
+ .examinesBtnChouse {
+ background-color: #409eff;
+ padding: 5px 10px;
+ border-radius: 5px;
+ color: #fff;
+ position: relative;
+ top: 20px;
+ z-index: 900;
+ text-align: center;
+ }
}
- .examines{
- position: absolute;
- top: 0.25rem;
+ .examines,
+ .examiness {
width: 100%;
height: 49%;
- box-sizing: border-box;
+ // display: flex;
+ // align-items: center;
background-color: #fff;
}
- .examiness{
- position: absolute;
- top: 0.25rem;
+
+ //myself
+ .examinesin,
+ .examinessin,
+ .certificatein,
+ .examinationin,
+ .dispatchUnitin,
+ .dispatchSecurityin,
+ .socialSecurityin {
width: 100%;
- height: 49%;
- box-sizing: border-box;
- background-color: #fff;
+ height: 100%;
}
- // .examines {
- // width: 100%;
- // height: 49%;
- // display: flex;
- // align-items: center;
- // background-color: #fff;
- // }
- // .examine {
- // width: 100%;
- // height: 100%;
- // }
- // .examine1 {
- // width: 200px;
- // div {
- // margin-bottom: 10px;
- // }
- // }
- // .securityAnalysisleft {
- // width: $widths;
- // }
- // .securityAnalysiscenter {
- // width: $widths;
- // }
- // .securityAnalysisright {
- // width: $widths;
- // }
+ .myToolbox {
+ position: absolute;
+ top: 14px;
+ right: 20px;
+ width: 25px;
+ height: 25px;
+ cursor: pointer;
+ z-index: 1000;
+ &:hover {
+ }
+ }
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3