xiangshan
/
ggfwjsc
22
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' of git.zdool.com:xs/ggfwjsc

This commit is contained in:
姚宇浩 2024-07-30 09:39:00 +08:00
parent 6c5ef155e1 86e7eafdf5
commit 81ec3971b4
11 changed files with 154 additions and 115 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
dist.zip
View File

Binary file not shown.

BIN
src/assets/sy-table/sy-table20.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 752 B

BIN
src/assets/sy-table/sy-table21.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 720 B

34
src/components/header.vue
View File

@ -1,8 +1,11 @@
<template> <template>
<teleport to="body"> <teleport to="body">
<div class="header_content" style="position: absolute;z-index: 999;width: 1920px;"> <div
class="header_content"
style="position: absolute; z-index: 999; width: 1920px"
>
<div class="header"> <div class="header">
<div class="headerGo" @click="to('/guide')"></div>
<!-- <img class="title" src="../assets/img_07.png" alt="" /> --> <!-- <img class="title" src="../assets/img_07.png" alt="" /> -->
<!-- <div class="time"> <!-- <div class="time">
<div id="date-display"></div> <div id="date-display"></div>
@ -11,14 +14,20 @@
<div class="header-menu"> <div class="header-menu">
<div class="header-menu-item header-menu-left"> <div class="header-menu-item header-menu-left">
<div :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'" v-for="item in data.urlLeft.slice(0, 4)" <div
:key="item.name"> :class="data.nowTab == item.url ? 'leftItemC' : 'leftItem'"
v-for="item in data.urlLeft.slice(0, 4)"
:key="item.name"
>
<div class="itemText" @click="to(item.url)">{{ item.name }}</div> <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
</div> </div>
</div> </div>
<div class="header-menu-item header-menu-right"> <div class="header-menu-item header-menu-right">
<div :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'" v-for="item in data.urlLeft.slice(4, 8)" <div
:key="item.name"> :class="data.nowTab == item.url ? 'rightItemC' : 'rightItem'"
v-for="item in data.urlLeft.slice(4, 8)"
:key="item.name"
>
<div class="itemText" @click="to(item.url)">{{ item.name }}</div> <div class="itemText" @click="to(item.url)">{{ item.name }}</div>
</div> </div>
</div> </div>
@ -27,7 +36,6 @@
<img src="../assets/RightLine.gif" class="leftLineClass" /> <img src="../assets/RightLine.gif" class="leftLineClass" />
</div> </div>
</div> </div>
</teleport> </teleport>
</template> </template>
@ -114,7 +122,17 @@ onMounted(() => {
}); });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.headerGo {
cursor: pointer;
position: absolute;
top: 0;
right: 50%;
width: 700px;
height: 80px;
transform: translate(50%, 8%);
}
.header { .header {
position: relative;
background-image: url(../assets/headerBg.png); background-image: url(../assets/headerBg.png);
background-size: 100% 100%; background-size: 100% 100%;
display: flex; display: flex;
@ -251,7 +269,7 @@ onMounted(() => {
} }
} }
.header_content{ .header_content {
background: url("../assets/bgImg.png") no-repeat 0/100% 100%; background: url("../assets/bgImg.png") no-repeat 0/100% 100%;
} }
</style> </style>

4
src/view/echarts_sy/zwfw1.vue
View File

@ -11,11 +11,11 @@ const chart = ref(); // 创建DOM引用
const dataList = [ const dataList = [
{ {
name: "2.0收件数", name: "2.0收件数",
value: 33044, value: 42277,
}, },
{ {
name: "总收件数", name: "总收件数",
value: 33295, value: 42632,
}, },
]; ];
//内圈数据 //内圈数据

4
src/view/echarts_sy/zwfw2.vue
View File

@ -11,11 +11,11 @@ const chart = ref(); // 创建DOM引用
const dataList = [ const dataList = [
{ {
name: "超期受理数", name: "超期受理数",
value: 9, value: 3,
}, },
{ {
name: "应受理数", name: "应受理数",
value: 32561, value: 41341,
}, },
]; ];
var data = [ var data = [

4
src/view/echarts_sy/zwfw3.vue
View File

@ -11,11 +11,11 @@ const chart = ref(); // 创建DOM引用
const dataList = [ const dataList = [
{ {
name: "超期办理数", name: "超期办理数",
value: 7, value: 0,
}, },
{ {
name: "应办理数", name: "应办理数",
value: 31615, value: 39196,
}, },
]; ];
var data = [ var data = [

4
src/view/sy.vue
View File

@ -396,7 +396,7 @@
<div class="right"> <div class="right">
<div class="name">平均受理时长</div> <div class="name">平均受理时长</div>
<img class="line" src="@/assets/images/sy/zwfw_line.png" /> <img class="line" src="@/assets/images/sy/zwfw_line.png" />
<div class="time"><span>0.22</span>小时</div> <div class="time"><span>0.28</span>小时</div>
</div> </div>
</div> </div>
<div class="fgx"></div> <div class="fgx"></div>
@ -405,7 +405,7 @@
<div class="right"> <div class="right">
<div class="name">平均办理时长</div> <div class="name">平均办理时长</div>
<img class="line" src="@/assets/images/sy/zwfw_line.png" /> <img class="line" src="@/assets/images/sy/zwfw_line.png" />
<div class="time"><span>0.54</span>小时</div> <div class="time"><span>0.78</span>小时</div>
</div> </div>
</div> </div>
</div> </div>

12
src/view/sy_details.vue
View File

@ -20,9 +20,9 @@
:row-style="rowState" :row-style="rowState"
:header-cell-style="tableHeaderColor" :header-cell-style="tableHeaderColor"
> >
<el-table-column prop="xm" label="姓名" width="60" /> <el-table-column prop="xm" label="姓名" width="90" />
<el-table-column prop="dz" label="地址" /> <el-table-column prop="dz" label="地址" />
<el-table-column prop="nl" label="年龄" /> <el-table-column prop="nl" label="年龄" width="60" />
<!-- <el-table-column prop="sfzhm" label="身份证号" /> --> <!-- <el-table-column prop="sfzhm" label="身份证号" /> -->
<el-table-column prop="bq" label="人口标签" /> <el-table-column prop="bq" label="人口标签" />
</el-table> </el-table>
@ -113,9 +113,9 @@
:row-style="rowState" :row-style="rowState"
:header-cell-style="tableHeaderColor" :header-cell-style="tableHeaderColor"
> >
<el-table-column prop="fullName" label="姓名" width="60" /> <el-table-column prop="fullName" label="姓名" width="90" />
<el-table-column prop="address" label="地址" /> <el-table-column prop="address" label="地址" />
<el-table-column prop="age" label="年龄" /> <el-table-column prop="age" label="年龄" width="60"/>
<!-- <el-table-column prop="IDNumber" label="身份证号" /> --> <!-- <el-table-column prop="IDNumber" label="身份证号" /> -->
<el-table-column prop="PopulationLabel" label="人口标签" /> <el-table-column prop="PopulationLabel" label="人口标签" />
</el-table> </el-table>
@ -513,7 +513,7 @@ const data = reactive({
// 表格分页 // 表格分页
const pagination = reactive({ const pagination = reactive({
total: 10, total: 10,
pageSize: 10, pageSize: 20,
currentPage: 1, currentPage: 1,
}); });
const pagination1 = reactive({ const pagination1 = reactive({
@ -523,7 +523,7 @@ const pagination1 = reactive({
}); });
const pagination2 = reactive({ const pagination2 = reactive({
total: 10, total: 10,
pageSize: 10, pageSize: 20,
currentPage: 1, currentPage: 1,
}); });
//表格分页 //表格分页

154
src/view/sy_map.vue
View File

@ -12,13 +12,8 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="content"> <div class="content">
<div <div class="content_item" v-for="(item, index) in personTotal" :class="{ choose: item.id == choose.person }"
class="content_item" @click="buten(item)" :key="index">
v-for="(item, index) in personTotal"
:class="{ choose: item.id == choose.person }"
@click="buten(item)"
:key="index"
>
<div class="content_item_name">{{ ageLess0(item.ages) }}</div> <div class="content_item_name">{{ ageLess0(item.ages) }}</div>
<div class="content_item_value">{{ item.rksl }}</div> <div class="content_item_value">{{ item.rksl }}</div>
</div> </div>
@ -30,13 +25,8 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="content"> <div class="content">
<div <div class="content_item" v-for="(item, index) in tsbqTotal" :class="{ choose: item.id == choose.person }"
class="content_item" @click="buten2(item)" :key="index">
v-for="(item, index) in tsbqTotal"
:class="{ choose: item.id == choose.person }"
@click="buten2(item)"
:key="index"
>
<div class="content_item_name">{{ item.name }}</div> <div class="content_item_name">{{ item.name }}</div>
<div class="content_item_value">{{ item.rksl }}</div> <div class="content_item_value">{{ item.rksl }}</div>
</div> </div>
@ -50,18 +40,11 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="jbggfwq_content"> <div class="jbggfwq_content">
<div <div class="jbggfwq_content_item" v-for="(item, index) in jbfwqTotal" :key="index">
class="jbggfwq_content_item"
v-for="(item, index) in jbfwqTotal"
:key="index"
>
<div class="jbggfwq_content_item_left">{{ item.name }}</div> <div class="jbggfwq_content_item_left">{{ item.name }}</div>
<div class="jbggfwq_content_item_right"> <div class="jbggfwq_content_item_right">
<div <div class="jbggfwq_content_item_right_item" v-for="itemm in item.child"
class="jbggfwq_content_item_right_item" :class="{ choose: itemm.id == choose.fwq }" @click="
v-for="itemm in item.child"
:class="{ choose: itemm.id == choose.fwq }"
@click="
changeFwq( changeFwq(
itemm.id, itemm.id,
itemm.fwqList, itemm.fwqList,
@ -69,8 +52,7 @@
item.name, item.name,
itemm.name itemm.name
) )
" ">
>
{{ itemm.name }} {{ itemm.name }}
</div> </div>
</div> </div>
@ -83,13 +65,8 @@
<div class="title_line"></div> <div class="title_line"></div>
</div> </div>
<div class="zyys_content"> <div class="zyys_content">
<div <div class="zyys_content_item" v-for="(item, index) in yaosuTotal"
class="zyys_content_item" :class="{ choose: item.id == choose.yaosu, wz: item.wz == true }" @click="changeys(item.id)" :key="index">
v-for="(item, index) in yaosuTotal"
:class="{ choose: item.id == choose.yaosu, wz: item.wz == true }"
@click="changeys(item.id)"
:key="index"
>
<img :src="item.img" class="zyys_content_item_left" /> <img :src="item.img" class="zyys_content_item_left" />
<div class="zyys_content_item_right">{{ item.name }}</div> <div class="zyys_content_item_right">{{ item.name }}</div>
</div> </div>
@ -142,6 +119,13 @@ import b6 from "@/assets/images/map/b6.png";
import xcbg from "@/assets/images/map/xcbg.png"; import xcbg from "@/assets/images/map/xcbg.png";
import AED from "@/assets/images/map/AED.png"; import AED from "@/assets/images/map/AED.png";
const data = reactive({
serviceCircleList: [],
fwqCoordinates: "", //服务圈中心坐标
fwqCoordinates1: [], //服务圈中心坐标
fwqCoordinates2: [], //服务圈中心坐标
});
//删除(存放渲染的地块及图标) //删除(存放渲染的地块及图标)
const jdm_arr = ref([]); const jdm_arr = ref([]);
const jdm_number_arr = ref([]); const jdm_number_arr = ref([]);
@ -456,9 +440,11 @@ const BMAP = () => {
// 添加服务圈 // 添加服务圈
var circle; var circle;
const drawACircle = (v) => { const drawACircle = (v) => {
console.log(data.fwqCoordinates);
// forEach;
if (!circle) { if (!circle) {
var point = new BMapGL.Point(119.184803, 28.853725); var point = new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2);
circle = new BMapGL.Circle(point, 900, { circle = new BMapGL.Circle(point, 1000, {
strokeColor: "yellow", strokeColor: "yellow",
strokeWeight: 2, strokeWeight: 2,
@ -477,7 +463,7 @@ const drawACircle = (v) => {
circle.show(); circle.show();
map.addOverlay(circle); map.addOverlay(circle);
map.setViewport({ map.setViewport({
center: new BMapGL.Point(119.184803, 28.853725), center: new BMapGL.Point(data.fwqCoordinates1, data.fwqCoordinates2),
zoom: 14, zoom: 14,
}); });
} }
@ -558,7 +544,7 @@ const addPolygonCounty = () => {
choose.value.person == "tyjr" || choose.value.person == "tyjr" ||
choose.value.person == "kjer" choose.value.person == "kjer"
) { ) {
console.log(5555555555555555); // console.log(5555555555555555);
getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false); getDataBqs2(cfJd.value, cfCs.value, choose.value.person, false);
} else if (choose.value.person != "") { } else if (choose.value.person != "") {
getDatas("溪口镇", choose.value.person); getDatas("溪口镇", choose.value.person);
@ -957,7 +943,7 @@ const createCustomOverlayJd2 = (polygon, indexx) => {
} }
let num = ""; let num = "";
if (choose.value.person == "6666") { if (choose.value.person == "6666") {
console.log(1); // console.log(1);
num = "swrs"; num = "swrs";
} else if ( } else if (
choose.value.person == "cjr" || choose.value.person == "cjr" ||
@ -1014,7 +1000,7 @@ const createCs2 = (polygon, indexx) => {
div.style.justifyContent = "space-between"; div.style.justifyContent = "space-between";
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.cursor = "pointer"; div.style.cursor = "pointer";
div.style.padding = "5px"; div.style.padding = "5px 10px";
div.style.minWidth = "90px"; div.style.minWidth = "90px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)"; div.style.transform = "translateY(50px)";
@ -1092,7 +1078,7 @@ const createCs = (polygon, indexx) => {
div.style.justifyContent = "center"; div.style.justifyContent = "center";
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.cursor = "pointer"; div.style.cursor = "pointer";
div.style.padding = "5px"; div.style.padding = "5px 10px";
div.style.minWidth = "60px"; div.style.minWidth = "60px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)"; div.style.transform = "translateY(50px)";
@ -1145,7 +1131,7 @@ const DGcreateCs = (polygon, indexx) => {
div.style.justifyContent = "center"; div.style.justifyContent = "center";
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.cursor = "pointer"; div.style.cursor = "pointer";
div.style.padding = "5px"; div.style.padding = "5px 10px";
div.style.minWidth = "60px"; div.style.minWidth = "60px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)"; div.style.transform = "translateY(50px)";
@ -1201,7 +1187,7 @@ const DGcreateCs2 = (polygon, indexx) => {
div.style.justifyContent = "space-between"; div.style.justifyContent = "space-between";
div.style.alignItems = "center"; div.style.alignItems = "center";
div.style.cursor = "pointer"; div.style.cursor = "pointer";
div.style.padding = "5px"; div.style.padding = "5px 10px";
div.style.minWidth = "90px"; div.style.minWidth = "90px";
div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`; div.style.background = `url(${xcbg}) no-repeat 0/100% 100%`;
div.style.transform = "translateY(50px)"; div.style.transform = "translateY(50px)";
@ -1263,14 +1249,29 @@ const DGcreateCs2 = (polygon, indexx) => {
//创建公共服务圈 //创建公共服务圈
const addggfwq = () => { const addggfwq = () => {
if (fwqList.value) { if (fwqList.value) {
data.fwqCoordinates1 = [];
data.fwqCoordinates1 = [];
// console.log(fwqList.value,444);
fwqList.value.map((item, index) => { fwqList.value.map((item, index) => {
data.fwqCoordinates1.push(item.point[0]);
data.fwqCoordinates2.push(item.point[1]);
createCustomOverlay(item, index); createCustomOverlay(item, index);
}); });
function calculateAverage(coordinates) {
const numericCoordinates = coordinates.map(Number); // 将字符串转换为数字
const sum = numericCoordinates.reduce((acc, val) => acc + val, 0); // 计算总和
return sum / numericCoordinates.length; // 计算平均值
}
data.fwqCoordinates1 = calculateAverage(data.fwqCoordinates1);
data.fwqCoordinates2 = calculateAverage(data.fwqCoordinates2);
// console.log(average1,average2, 555);
drawACircle();
} }
}; };
// 添加公共服务圈的图标 // 添加公共服务圈的图标
const createCustomOverlay = (polygon, indexx) => { const createCustomOverlay = (polygon, indexx) => {
drawACircle(); data.fwqCoordinates = polygon.point;
function createLabelDOM() { function createLabelDOM() {
var content = document.createElement("div"); var content = document.createElement("div");
content.style.display = "flex"; content.style.display = "flex";
@ -1449,7 +1450,6 @@ const changeFwq = async (id, list, center, name, names) => {
fwq_list_arr.value.forEach((item, index) => { fwq_list_arr.value.forEach((item, index) => {
map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标 map.removeOverlay(fwq_list_arr.value[index]); // 清空服务圈 图标
}); });
drawACircle("hide"); //隐藏服务圈 圆 drawACircle("hide"); //隐藏服务圈 圆
} else { } else {
await getServiceCircle(names, name); await getServiceCircle(names, name);
@ -1458,7 +1458,7 @@ const changeFwq = async (id, list, center, name, names) => {
choose.value.person = ""; choose.value.person = "";
addggfwq(); //创建公共服务圈 addggfwq(); //创建公共服务圈
setTimeout(() => { setTimeout(() => {
goMapCenter(center, 16); //中心点缩放 goMapCenter([data.fwqCoordinates1,data.fwqCoordinates2], 16); //中心点缩放
}, 500); }, 500);
} }
}; };
@ -2605,14 +2605,16 @@ const getDataBqJD = async (bq) => {
await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => { await http.get(`/api/ggfwyth/ysyzt/getTsbqByXzjdOrCsq`, data).then((res) => {
if (res.code == 200) { if (res.code == 200) {
mapTownCount.map((item) => { if (res?.data) {
item.numbers = 0; mapTownCount.map((item) => {
res.data.map((items) => { item.numbers = 0;
if (items.xzjd == item.name) { res.data.map((items) => {
item.numbers = items.rs; if (items.xzjd == item.name) {
} item.numbers = items.rs;
}
});
}); });
}); }
} }
}); });
}; };
@ -2686,17 +2688,13 @@ onMounted(() => {
bottom: 0; bottom: 0;
width: 520px; width: 520px;
height: 960px; height: 960px;
background: linear-gradient( background: linear-gradient(270deg,
270deg,
rgba(0, 52, 131, 0.69) 0%, rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%, rgba(0, 32, 83, 0.77) 50%,
rgba(0, 60, 131, 0.74) 100% rgba(0, 60, 131, 0.74) 100%),
), radial-gradient(128% 99% at 100% 46%,
radial-gradient(
128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%, rgba(0, 48, 125, 0.29) 0%,
rgba(0, 61, 134, 0.42) 100% rgba(0, 61, 134, 0.42) 100%);
);
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
padding: 30px 26px; padding: 30px 26px;
@ -2868,17 +2866,13 @@ onMounted(() => {
bottom: 0; bottom: 0;
width: 520px; width: 520px;
height: 960px; height: 960px;
background: linear-gradient( background: linear-gradient(270deg,
270deg,
rgba(0, 52, 131, 0.69) 0%, rgba(0, 52, 131, 0.69) 0%,
rgba(0, 32, 83, 0.77) 50%, rgba(0, 32, 83, 0.77) 50%,
rgba(0, 60, 131, 0.74) 100% rgba(0, 60, 131, 0.74) 100%),
), radial-gradient(128% 99% at 100% 46%,
radial-gradient(
128% 99% at 100% 46%,
rgba(0, 48, 125, 0.29) 0%, rgba(0, 48, 125, 0.29) 0%,
rgba(0, 61, 134, 0.42) 100% rgba(0, 61, 134, 0.42) 100%);
);
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5); box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
padding: 30px 26px; padding: 30px 26px;
@ -2889,11 +2883,12 @@ onMounted(() => {
.jbggfwq { .jbggfwq {
.jbggfwq_content { .jbggfwq_content {
height: 550px; height: 500px;
overflow: auto; overflow: auto;
margin-top: 15px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin-top: 15px;
margin-bottom: 34px;
.jbggfwq_content_item { .jbggfwq_content_item {
margin-bottom: 5px; margin-bottom: 5px;
@ -2912,8 +2907,8 @@ onMounted(() => {
width: 370px; width: 370px;
display: flex; display: flex;
flex-flow: row wrap; flex-flow: row wrap;
border-radius: 6px;
overflow: hidden; overflow: hidden;
// border-radius: 6px;
.jbggfwq_content_item_right_item { .jbggfwq_content_item_right_item {
cursor: pointer; cursor: pointer;
@ -2968,7 +2963,6 @@ onMounted(() => {
} }
.zyys { .zyys {
margin-top: 25px;
.zyys_content { .zyys_content {
margin-top: 20px; margin-top: 20px;
box-sizing: border-box; box-sizing: border-box;
@ -2977,14 +2971,14 @@ onMounted(() => {
flex-flow: row wrap; flex-flow: row wrap;
.zyys_content_item { .zyys_content_item {
width: 110px;
height: 54px;
cursor: pointer; cursor: pointer;
margin-bottom: 15px; margin-bottom: 20px;
color: #ffffff; color: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 110px;
height: 42px;
background: rgba(124, 151, 180, 0.8); background: rgba(124, 151, 180, 0.8);
.zyys_content_item_left { .zyys_content_item_left {
@ -3037,12 +3031,10 @@ onMounted(() => {
// line-height: 44px; // line-height: 44px;
letter-spacing: 4px; letter-spacing: 4px;
margin-bottom: 15px; margin-bottom: 15px;
background: linear-gradient( background: linear-gradient(180deg,
180deg, #ffffff 0%,
#ffffff 0%, #ffffff 40%,
#ffffff 40%, #00ffff 100%);
#00ffff 100%
);
/* 使文字没有背景颜色的背景 */ /* 使文字没有背景颜色的背景 */
background-clip: text; background-clip: text;
/* 为了兼容性，添加渐变背景到IE */ /* 为了兼容性，添加渐变背景到IE */

49
src/view/sy_table.vue
View File

@ -6,9 +6,15 @@
<div class="menuBar"> <div class="menuBar">
<div class="tabPosition" v-for="(item, index) in data.tabPosition"> <div class="tabPosition" v-for="(item, index) in data.tabPosition">
<div class="tabPositionBox" @click="toggleVisibility(item)"> <div class="tabPositionBox" @click="toggleVisibility(item)">
<div class="img"><img :src="item.img" alt="" /></div> <div style="display: flex;text-align: center;" >
<div class="tabsItem"> <div class="img"><img :src="item.img" alt="" /></div>
{{ item.name }} <div class="tabsItem">
{{ item.name }}
</div>
</div>
<div class="img1">
<img src="@/assets/sy-table/sy-table21.png" v-if="item.visible" />
<img src="@/assets/sy-table/sy-table20.png" v-else />
</div> </div>
</div> </div>
<transition name="fade-scale"> <transition name="fade-scale">
@ -506,21 +512,25 @@ const rowState = (row) => {
color: #ffffff; color: #ffffff;
text-align: left; text-align: left;
font-style: normal; font-style: normal;
font-family: YouSheBiaoTiHei; // font-family: YouSheBiaoTiHei;
font-family: titleNore;
text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5); text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
padding: 19px 0 0 17px;
} }
.lineEnd { .lineEnd {
height: 3px; height: 3px;
border-top: 1px solid #fff; border-top: 1px solid #fff;
border-bottom: 1px dashed #fff; border-bottom: 1px dashed #fff;
width: 180px;
margin: 17px 0; margin: 17px 0;
margin-left: 16px;
} }
.menuBar::-webkit-scrollbar { .menuBar::-webkit-scrollbar {
display: none; /* Chrome Safari */ display: none; /* Chrome Safari */
} }
.menuBar { .menuBar {
height: 100vh; height: 100%;
overflow-y: auto; overflow-y: auto;
} }
.tabPosition { .tabPosition {
@ -537,9 +547,18 @@ const rowState = (row) => {
margin-right: 10px; margin-right: 10px;
vertical-align: middle; vertical-align: middle;
} }
.tabPosition .img1 {
img {
width: 20px;
height: 10px;
margin-right: 24px;
vertical-align: middle;
}
}
.tabPositionBox { .tabPositionBox {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between;
margin: 12px 0 12px 19px; margin: 12px 0 12px 19px;
cursor: pointer; cursor: pointer;
} }
@ -547,10 +566,20 @@ const rowState = (row) => {
font-size: 18px; font-size: 18px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; // justify-content: center;
width: 200px; padding-left: 30px;
height: 50px; height: 50px;
border-radius: 4px; background-color: #032862;
white-space: nowrap;
}
.tabPositionminBox::before {
content: "";
display: block;
width: 4px;
height: 4px;
border-radius: 50%;
background-color: #ffffff;
margin-right: 6px;
} }
.tabPositionminBoxBgc { .tabPositionminBoxBgc {
background: rgba(73, 121, 191); background: rgba(73, 121, 191);
@ -570,14 +599,13 @@ const rowState = (row) => {
width: 270px; width: 270px;
height: 943px; height: 943px;
box-sizing: border-box; box-sizing: border-box;
padding: 19px 17px; // padding: 19px 17px;
// margin-right: 28px; // margin-right: 28px;
background: linear-gradient( background: linear-gradient(
270deg, 270deg,
rgba(3, 56, 127, 0.77) 0%, rgba(3, 56, 127, 0.77) 0%,
rgba(3, 56, 127, 0.74) 100% rgba(3, 56, 127, 0.74) 100%
); );
box-shadow: inset 0px 0px 56px 0px rgba(173, 221, 255, 0.5);
border-radius: 0px 24px 24px 0px; border-radius: 0px 24px 24px 0px;
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
} }
@ -665,6 +693,7 @@ const rowState = (row) => {
font-size: 26px; font-size: 26px;
color: #ffffff; color: #ffffff;
letter-spacing: 2px; letter-spacing: 2px;
font-family: titleNore;
} }
.tableBoxCenter1 { .tableBoxCenter1 {
width: 70px; width: 70px;