基本公共服务
-
-
- ![]()
-
- {{ item.name }}
+
@@ -156,43 +166,126 @@ const goto = (url) => {
};
const data = reactive({
+ taps1: "6",
taps: "0",
- taps1: "0",
tabPosition: [
{
id: "0",
name: "幼有所育",
img: icon1,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "优孕优生服务",
+ },
+ {
+ id: "1",
+ name: "儿童健康服务",
+ },
+ {
+ id: "2",
+ name: "儿童关爱服务",
+ },
+ ],
},
{
id: "1",
name: "学有所教",
img: icon2,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "学前教育助学服务",
+ },
+ {
+ id: "1",
+ name: "义务教育服务",
+ },
+ {
+ id: "2",
+ name: "普通高中助学服务",
+ },
+ {
+ id: "3",
+ name: "中等职业教育助学服务",
+ },
+ ],
},
{
id: "2",
- name: "老有所得",
+ name: "劳有所得",
img: icon3,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "就业创业服务",
+ },
+ {
+ id: "1",
+ name: "工伤失业保险服务",
+ },
+ ],
},
{
id: "3",
name: "病有所医",
img: icon4,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "公共卫生服务",
+ },
+ {
+ id: "1",
+ name: "医疗保险服务",
+ },
+ {
+ id: "2",
+ name: "计划生育扶助服务",
+ },
+ ],
},
{
id: "4",
name: "老有所养",
img: icon5,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "养老助老服务",
+ },
+ {
+ id: "1",
+ name: "养老保险服务",
+ },
+ ],
},
{
id: "5",
name: "住有所居",
img: icon6,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "公租房服务",
+ },
+ {
+ id: "1",
+ name: "住房改造服务",
+ },
+ ],
},
{
id: "6",
name: "弱有所扶",
img: icon7,
+ visible: true,
son: [
{
id: "0",
@@ -200,37 +293,73 @@ const data = reactive({
},
{
id: "1",
- name: "公共法律服务",
+ name: "法律援助服务",
},
{
id: "2",
name: "扶残助残服务",
},
- {
- id: "3",
- name: "儿童健康服务",
- },
],
},
{
id: "7",
- name: "军有所扶",
+ name: "军有所抚",
img: icon8,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "优军优抚服务",
+ },
+ ],
},
{
id: "8",
name: "文有所化",
img: icon9,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "公共文化服务",
+ },
+ ],
},
{
id: "9",
name: "体有所育",
img: icon10,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "公共体育服务",
+ },
+ ],
},
{
id: "10",
name: "事有所便",
img: icon11,
+ visible: false,
+ son: [
+ {
+ id: "0",
+ name: "生活便利服务",
+ },
+ {
+ id: "1",
+ name: "生活安全服务",
+ },
+ {
+ id: "2",
+ name: "生活环境服务",
+ },
+ {
+ id: "3",
+ name: "殡葬公共服务",
+ },
+ ],
},
],
tableData: [
@@ -314,10 +443,18 @@ const data = reactive({
],
});
-const tapshow = (val) => {
- // console.log(val);
- data.taps = val;
+const tapshow = (parentId, childId) => {
+ // data.taps1 = parentId;
+ // data.taps = childId;
};
+const toggleVisibility = (val) => {
+ data.tabPosition.forEach((parent) => {
+ if (parent.id === val.id) {
+ parent.visible = !parent.visible;
+ }
+ });
+};
+
// 服务表格样式
const tableHeaderColor = (arg) => {
return {
@@ -378,6 +515,14 @@ const rowState = (row) => {
border-bottom: 1px dashed #fff;
margin: 17px 0;
}
+
+ .menuBar::-webkit-scrollbar {
+ display: none; /* Chrome Safari */
+ }
+ .menuBar {
+ height: 100vh;
+ overflow-y: auto;
+ }
.tabPosition {
display: flex;
flex-direction: column;
@@ -385,39 +530,44 @@ const rowState = (row) => {
font-size: 22px;
font-weight: 500;
letter-spacing: 1px;
+ }
+ .tabPosition img {
+ width: 18px;
+ height: 18px;
+ margin-right: 10px;
+ vertical-align: middle;
+ }
+ .tabPositionBox {
+ display: flex;
+ align-items: center;
+ margin: 12px 0 12px 19px;
+ cursor: pointer;
+ }
+ .tabPositionminBox {
+ font-size: 18px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 200px;
+ height: 50px;
+ border-radius: 4px;
+ }
+ .tabPositionminBoxBgc {
+ background: rgba(73, 121, 191);
+ }
- img {
- width: 18px;
- height: 18px;
- margin-right: 10px;
- vertical-align: middle;
- }
-
- .tabPositionBox {
- display: flex;
- align-items: center;
- margin: 12px 0 12px 19px;
- cursor: pointer;
- }
- .tabPositionminBox {
- display: flex;
- align-items: center;
- justify-content: center;
- width: 200px;
- height: 50px;
-
- border-radius: 4px;
- cursor: pointer;
- // opacity: 0.45;
- }
- .tabPositionminBoxBgc {
- background: rgba(73, 121, 191);
- }
+ .fade-scale-enter-active,
+ .fade-scale-leave-active {
+ transition: opacity 0.5s ease;
+ }
+ .fade-scale-enter,
+ .fade-scale-leave-to {
+ opacity: 0;
}
}
.left_bg {
// width: 642px;
- width: 230px;
+ width: 270px;
height: 943px;
box-sizing: border-box;
padding: 19px 17px;
@@ -593,14 +743,11 @@ const rowState = (row) => {
border: none !important;
padding-left: 10px !important;
}
-
-
}
:deep(.el-table td.el-table__cell) {
padding: 12px 0px;
}
-
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
background-color: #2f4b74;
}
+
+
-
+ ![]()
+
-
+ {{ item.name }}
+
- {{ item1.name }}
+
+
+
+
+ {{ item1.name }}
+
+