This commit is contained in:
duanxiaohai
parent
f9f58f3674
commit
2f55dfc192
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 876 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 634 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 936 B |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 521 B |
Binary file not shown.
|
After Width: | Height: | Size: 384 B |
Binary file not shown.
|
After Width: | Height: | Size: 441 B |
Binary file not shown.
|
After Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 336 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 332 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 334 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 335 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 751 B |
|
|
@ -60,6 +60,11 @@ const router = createRouter({
|
|||
path: '/home/index/table',
|
||||
component: () => import('../view/sy_table.vue'),
|
||||
},
|
||||
{
|
||||
name: '首页表格详情',
|
||||
path: '/home/index/table/details',
|
||||
component: () => import('../view/sy_details.vue'),
|
||||
}
|
||||
]
|
||||
},
|
||||
]
|
||||
|
|
|
|||
|
|
@ -0,0 +1,786 @@
|
|||
<template>
|
||||
<div class="module">
|
||||
<div class="displayFlex left_bg">
|
||||
<div class="bt_title">
|
||||
<div class="yd_title left_1">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
服务对象（低保）
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 97.5%">
|
||||
<el-table
|
||||
border
|
||||
:data="data.tableData"
|
||||
style="width: 100%; height: 700px; margin-bottom: 20px"
|
||||
max-height="800"
|
||||
class="table_border"
|
||||
:row-style="rowState"
|
||||
:header-cell-style="tableHeaderColor"
|
||||
>
|
||||
<el-table-column prop="fullName" label="姓名" width="60" />
|
||||
<el-table-column prop="address" label="地址" />
|
||||
<el-table-column prop="age" label="年龄" />
|
||||
<el-table-column prop="IDNumber" label="身份证号" />
|
||||
<el-table-column prop="PopulationLabel" label="人口标签" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="pagination.pageSize"
|
||||
:total="pagination.total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="handle"
|
||||
v-model:current-page="pagination.currentPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex center_bg">
|
||||
<div class="bt_title">
|
||||
<div class="yd_title left_1">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
服务内容清单（共32项）
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 97.5%">
|
||||
<el-table
|
||||
border
|
||||
:data="data.tableData1"
|
||||
style="width: 100%; height: 700px; margin-bottom: 20px"
|
||||
max-height="800"
|
||||
class="table_border"
|
||||
:row-style="rowState"
|
||||
:header-cell-style="tableHeaderColor"
|
||||
>
|
||||
<el-table-column prop="SerialNumber" label="序号" width="50" />
|
||||
<el-table-column prop="SubsidyType" label="补助类型" />
|
||||
<el-table-column prop="SubsidRecipients" label="补助对象或条件" />
|
||||
<el-table-column prop="SubsidyStandards" label="补助标准或内容" />
|
||||
<el-table-column prop="ProcessingMethod" label="办理方式或时间" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="pagination1.pageSize"
|
||||
:total="pagination1.total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="handle"
|
||||
v-model:current-page="pagination1.currentPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
<div class="bt_title">
|
||||
<div class="yd_title left_1">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
服务结果清单
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 97.5%">
|
||||
<el-table
|
||||
border
|
||||
:data="data.tableData2"
|
||||
style="width: 100%; height: 700px; margin-bottom: 20px"
|
||||
max-height="800"
|
||||
class="table_border"
|
||||
:row-style="rowState"
|
||||
:header-cell-style="tableHeaderColor"
|
||||
>
|
||||
<el-table-column prop="fullName" label="姓名" width="60" />
|
||||
<el-table-column prop="address" label="地址" />
|
||||
<el-table-column prop="age" label="年龄" />
|
||||
<el-table-column prop="IDNumber" label="身份证号" />
|
||||
<el-table-column prop="PopulationLabel" label="人口标签" />
|
||||
</el-table>
|
||||
<el-pagination
|
||||
background
|
||||
layout="prev, pager, next"
|
||||
:page-size="pagination2.pageSize"
|
||||
:total="pagination2.total"
|
||||
prev-text="上一页"
|
||||
next-text="下一页"
|
||||
@current-change="handle"
|
||||
v-model:current-page="pagination2.currentPage"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
|
||||
const data = reactive({
|
||||
tableData: [
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
],
|
||||
tableData1: [
|
||||
{
|
||||
SerialNumber: "01",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
{
|
||||
SerialNumber: "02",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
{
|
||||
SerialNumber: "03",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
{
|
||||
SerialNumber: "04",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
{
|
||||
SerialNumber: "05",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
{
|
||||
SerialNumber: "06",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
{
|
||||
SerialNumber: "07",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
{
|
||||
SerialNumber: "08",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
{
|
||||
SerialNumber: "09",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
{
|
||||
SerialNumber: "10",
|
||||
SubsidyType: "城乡最低生活 保障补助",
|
||||
SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
|
||||
SubsidyStandards: "330-110元/月 （补差发放）",
|
||||
ProcessingMethod: "自主申报",
|
||||
},
|
||||
],
|
||||
tableData2: [
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
{
|
||||
fullName: "王*",
|
||||
address: "龙游县东华街道",
|
||||
age: "13",
|
||||
IDNumber: "330825****92022011",
|
||||
PopulationLabel: "低保、 困难儿童",
|
||||
},
|
||||
],
|
||||
});
|
||||
// 表格分页
|
||||
const pagination = reactive({
|
||||
total: 100,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
});
|
||||
const pagination1 = reactive({
|
||||
total: 100,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
});
|
||||
const pagination2 = reactive({
|
||||
total: 100,
|
||||
pageSize: 10,
|
||||
currentPage: 1,
|
||||
});
|
||||
//表格分页
|
||||
const handlePagination = (current) => {
|
||||
pagination.currentPage = current;
|
||||
// getTable(tableType.url, pagination.currentPage);
|
||||
};
|
||||
//Tab切换分页
|
||||
const handlePaginationTab = (current) => {
|
||||
pagination.currentPage = current;
|
||||
getTableTab(dataTab.url, pagination.currentPage);
|
||||
};
|
||||
|
||||
// 服务表格样式
|
||||
const tableHeaderColor = (arg) => {
|
||||
return {
|
||||
// paddingLeft: "10px",
|
||||
letterSpacing: "1px",
|
||||
fontSize: "15px",
|
||||
height: "79px",
|
||||
backgroundColor: "#455F8A",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
// boxShadow: " inset 0px 0px 56px 0px rgba(173,221,255,0.5)",
|
||||
};
|
||||
};
|
||||
const rowState = (row) => {
|
||||
if (row.rowIndex % 2 == 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(31, 63, 113, 1)",
|
||||
color: "#fff",
|
||||
};
|
||||
} else if (row.rowIndex % 2 !== 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(43, 74, 121, 1)",
|
||||
color: "#fff",
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.module {
|
||||
width: 100%;
|
||||
height: 943px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 45px;
|
||||
box-sizing: border-box;
|
||||
.displayFlex {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
.bt_title {
|
||||
font-size: 24px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2px;
|
||||
text-shadow: inset 0px -2px 2px rgba(255, 255, 255, 0.65);
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.title {
|
||||
font-size: 28px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
|
||||
}
|
||||
.lineEnd {
|
||||
height: 3px;
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px dashed #fff;
|
||||
margin: 17px 0;
|
||||
}
|
||||
.tabPosition {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
|
||||
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: #92bdff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left_bg {
|
||||
width: 33.333%;
|
||||
box-sizing: border-box;
|
||||
// background-color: pink;
|
||||
}
|
||||
.center_bg {
|
||||
width: 33.333%;
|
||||
box-sizing: border-box;
|
||||
margin: 0 20px;
|
||||
// background-color: pink;
|
||||
// background-image: url(@/assets/images/center_bg.png);
|
||||
// background-repeat: no-repeat;
|
||||
// background-size: 100% 100%;
|
||||
}
|
||||
.right_bg {
|
||||
width: 33.333%;
|
||||
// background-color: pink;
|
||||
.formText {
|
||||
// .formText_top {
|
||||
// }
|
||||
.formText_bootom {
|
||||
.a {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.a1 {
|
||||
width: 510px;
|
||||
height: 210px;
|
||||
// background-image: url(@/assets/sy-table/sy-table3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background-color: pink;
|
||||
padding: 15px 28px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
.b1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.c1 {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.b2 {
|
||||
width: 470px;
|
||||
height: 90px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.a2 {
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.a3 {
|
||||
width: 70px;
|
||||
height: 29px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 15px;
|
||||
border: 0px solid #ffffff;
|
||||
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
// 表格
|
||||
:deep(.el-table) {
|
||||
background: rgba(32, 64, 115, 1) !important ;
|
||||
color: #ffffff;
|
||||
--el-table-tr-bg-color: none;
|
||||
--el-table-header-bg-color: none;
|
||||
--el-table-header-text-color: none;
|
||||
border: 1px solid #7aceff;
|
||||
}
|
||||
.table {
|
||||
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
|
||||
border: none !important;
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
:deep(.el-table td.el-table__cell) {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
|
||||
background-color: #2f4b74;
|
||||
}
|
||||
|
||||
:deep(.el-table__empty-block) {
|
||||
background-color: #122560;
|
||||
}
|
||||
|
||||
:deep(.el-table .el-table__row) {
|
||||
border-bottom: none;
|
||||
}
|
||||
// 分页
|
||||
.pagePart {
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
:deep(.el-pagination) {
|
||||
--el-pagination-button-disabled-bg-color: none;
|
||||
--el-pagination-bg-color: none;
|
||||
--el-pagination-button-bg-color: none;
|
||||
--el-pagination-button-color: #fff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
// :deep(.el-pagination button:disabled) {
|
||||
// background-color: rgba(0, 116, 255, 0) !important;
|
||||
// }
|
||||
// :deep(.el-pagination > .is-last) {
|
||||
// color: #ffffff;
|
||||
// }
|
||||
}
|
||||
|
||||
.yd_title {
|
||||
box-sizing: border-box;
|
||||
width: 98%;
|
||||
height: 31px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* 利用伪元素和两个i元素产生4条线 */
|
||||
.animate-border {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
}
|
||||
&::before {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
#03e9f4,
|
||||
transparent
|
||||
);
|
||||
|
||||
animation: one 4s linear infinite;
|
||||
}
|
||||
i:nth-child(1) {
|
||||
top: -100%;
|
||||
right: 0;
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
#03e9f4,
|
||||
transparent
|
||||
);
|
||||
/* 动画名称 动画持续时间 动画渲染函数 动画延迟时间 动画执行次数 */
|
||||
animation: two 4s linear 1s infinite;
|
||||
}
|
||||
&::after {
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
transparent,
|
||||
#03e9f4,
|
||||
transparent
|
||||
);
|
||||
animation: three 4s linear 2s infinite;
|
||||
}
|
||||
i:nth-child(2) {
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
background-image: linear-gradient(
|
||||
360deg,
|
||||
transparent,
|
||||
#03e9f4,
|
||||
transparent
|
||||
);
|
||||
animation: four 4s linear 3s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
font-family: SourceHanSansCN;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 1px;
|
||||
}
|
||||
.gTitle {
|
||||
position: absolute;
|
||||
color: #acd1f1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 156px;
|
||||
}
|
||||
|
||||
.c {
|
||||
width: 130px;
|
||||
height: 42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@keyframes one {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes two {
|
||||
0% {
|
||||
top: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes three {
|
||||
0% {
|
||||
right: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes four {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-pagination.is-background .el-pager li) {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: 1px solid #6bade1;
|
||||
margin: 0;
|
||||
}
|
||||
:deep(.el-pagination.is-background .el-pager li.is-active) {
|
||||
background: rgba(0, 144, 255, 0.49);
|
||||
border: 1px solid #6bade1;
|
||||
}
|
||||
:deep(.el-pagination.is-background .btn-prev:disabled) {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: 1px solid #6bade1;
|
||||
}
|
||||
:deep(.el-pagination.is-background .btn-next:disabled) {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: 1px solid #6bade1;
|
||||
}
|
||||
:deep(.el-pagination.is-background .btn-prev) {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: 1px solid #6bade1;
|
||||
}
|
||||
:deep(.el-pagination.is-background .btn-next) {
|
||||
color: #fff;
|
||||
background: rgba(255, 255, 255, 0.14);
|
||||
border: 1px solid #6bade1;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,10 +1,649 @@
|
|||
<template>
|
||||
<div>table</div>
|
||||
<div class="module">
|
||||
<div class="displayFlex left_bg">
|
||||
<div class="title">基本公共服务</div>
|
||||
<div class="lineEnd"></div>
|
||||
<div class="tabPosition" v-for="(item, index) in data.tabPosition">
|
||||
<div class="tabPositionBox">
|
||||
<div class="img"><img :src="item.img" alt="" /></div>
|
||||
<div class="tabsItem">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="tabPositionminBox"
|
||||
v-for="(item1, index1) in item.son"
|
||||
:class="data.taps == item1.id ? 'tabPositionminBoxBgc' : ''"
|
||||
@click="tapshow(index1)"
|
||||
>
|
||||
{{ item1.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="displayFlex right_bg">
|
||||
<div class="formText">
|
||||
<div class="formText_top">
|
||||
<div class="yd_title left_1">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 97.5%">
|
||||
<el-table
|
||||
border
|
||||
:data="data.tableData"
|
||||
style="width: 100%; height: 280x"
|
||||
class="table_border"
|
||||
:row-style="rowState"
|
||||
:header-cell-style="tableHeaderColor"
|
||||
>
|
||||
<el-table-column
|
||||
prop="highFrequencyApp"
|
||||
label="指标"
|
||||
width="200"
|
||||
/>
|
||||
|
||||
<el-table-column prop="targetValue" label="2024年目标值(市)" />
|
||||
<el-table-column prop="targetValue1" label="2024年目标值(县)" />
|
||||
<el-table-column prop="targetValue2" label="半年度预计 完成值" />
|
||||
<el-table-column
|
||||
prop="targetValue3"
|
||||
label="半年度预计 全市排名"
|
||||
/>
|
||||
<el-table-column prop="targetValue4" label="是否已达年度 目标" />
|
||||
<el-table-column prop="targetValue5" label="牵头单位" />
|
||||
<el-table-column prop="targetValue6" label="责任单位" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="formText_bootom">
|
||||
<div class="yd_title left_2">
|
||||
<div class="animate-border">
|
||||
<i></i>
|
||||
<i></i>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableBox">
|
||||
<div
|
||||
class="tableBoxTop"
|
||||
:style="{ backgroundImage: 'url(' + item.Bj + ')' }"
|
||||
v-for="(item, index) in data.tabPublicService"
|
||||
>
|
||||
<div class="tableBoxTops">
|
||||
<div class="tableBoxCenter">
|
||||
<img src="@/assets/sy-table/sy-table3.png" />
|
||||
<div class="tableli">{{ item.name }}</div>
|
||||
</div>
|
||||
<div class="tableBoxCenter1" @click="goto('/home/index/table/details')">
|
||||
详情
|
||||
</div>
|
||||
</div>
|
||||
<div class="tableBoxTopa">{{ item.text }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, reactive } from "vue";
|
||||
import icon1 from "@/assets/sy-table/sy-table9.png";
|
||||
import icon2 from "@/assets/sy-table/sy-table10.png";
|
||||
import icon3 from "@/assets/sy-table/sy-table11.png";
|
||||
import icon4 from "@/assets/sy-table/sy-table12.png";
|
||||
import icon5 from "@/assets/sy-table/sy-table13.png";
|
||||
import icon6 from "@/assets/sy-table/sy-table14.png";
|
||||
import icon7 from "@/assets/sy-table/sy-table15.png";
|
||||
import icon8 from "@/assets/sy-table/sy-table16.png";
|
||||
import icon9 from "@/assets/sy-table/sy-table17.png";
|
||||
import icon10 from "@/assets/sy-table/sy-table18.png";
|
||||
import icon11 from "@/assets/sy-table/sy-table19.png";
|
||||
import Bj from "@/assets/sy-table/sy-table8.png";
|
||||
import Bj1 from "@/assets/sy-table/sy-table7.png";
|
||||
import Bj2 from "@/assets/sy-table/sy-table4.png";
|
||||
import Bj3 from "@/assets/sy-table/sy-table5.png";
|
||||
import Bj4 from "@/assets/sy-table/sy-table6.png";
|
||||
|
||||
import { useRouter, useRoute } from "vue-router";
|
||||
const router = useRouter();
|
||||
const routers = useRoute();
|
||||
// 路由跳转
|
||||
const goto = (url) => {
|
||||
router.push({
|
||||
path: `${url}`,
|
||||
});
|
||||
};
|
||||
|
||||
const data = reactive({
|
||||
taps: "0",
|
||||
taps1: "0",
|
||||
tabPosition: [
|
||||
{
|
||||
id: "0",
|
||||
name: "幼有所育",
|
||||
img: icon1,
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
name: "学有所教",
|
||||
img: icon2,
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "老有所得",
|
||||
img: icon3,
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "病有所医",
|
||||
img: icon4,
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "老有所养",
|
||||
img: icon5,
|
||||
},
|
||||
{
|
||||
id: "5",
|
||||
name: "住有所居",
|
||||
img: icon6,
|
||||
},
|
||||
{
|
||||
id: "6",
|
||||
name: "弱有所扶",
|
||||
img: icon7,
|
||||
son: [
|
||||
{
|
||||
id: "0",
|
||||
name: "社会救助服务",
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
name: "公共法律服务",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "扶残助残服务",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "儿童健康服务",
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: "7",
|
||||
name: "军有所扶",
|
||||
img: icon8,
|
||||
},
|
||||
{
|
||||
id: "8",
|
||||
name: "文有所化",
|
||||
img: icon9,
|
||||
},
|
||||
{
|
||||
id: "9",
|
||||
name: "体有所育",
|
||||
img: icon10,
|
||||
},
|
||||
{
|
||||
id: "10",
|
||||
name: "事有所便",
|
||||
img: icon11,
|
||||
},
|
||||
],
|
||||
tableData: [
|
||||
{
|
||||
highFrequencyApp: "最低生活保障标准金额(元)",
|
||||
targetValue: ">13200",
|
||||
targetValue1: ">13200",
|
||||
targetValue2: "13200",
|
||||
targetValue3: "暂未排名",
|
||||
targetValue4: "",
|
||||
targetValue5: "县民政局",
|
||||
targetValue6: "县民政局",
|
||||
},
|
||||
{
|
||||
highFrequencyApp: "社会救助服务联合体规范运行指数",
|
||||
targetValue: "80",
|
||||
targetValue1: "80",
|
||||
targetValue2: "100",
|
||||
targetValue3: "暂未排名",
|
||||
targetValue4: "✓",
|
||||
targetValue5: "县民政局",
|
||||
targetValue6: "县医保局",
|
||||
},
|
||||
{
|
||||
highFrequencyApp: "困难群众医疗费用综合保障率(%%)",
|
||||
targetValue: ">83",
|
||||
targetValue1: ">83",
|
||||
targetValue2: "86.59(1-5月)",
|
||||
targetValue3: "第2(1-5月)",
|
||||
targetValue4: "✓",
|
||||
targetValue5: "县民政局",
|
||||
targetValue6: "县医保局",
|
||||
},
|
||||
{
|
||||
highFrequencyApp: "“群帮惠”因难群体帮扶数(万人次)",
|
||||
targetValue: "0.5960",
|
||||
targetValue1: "0.05",
|
||||
targetValue2: "0.0359",
|
||||
targetValue3: "中等",
|
||||
targetValue4: " ",
|
||||
targetValue5: "县民政局",
|
||||
targetValue6: "县总工会",
|
||||
},
|
||||
],
|
||||
tabPublicService: [
|
||||
{
|
||||
id: "0",
|
||||
name: "最低生活保障",
|
||||
Bj: Bj,
|
||||
text: "我县在册低保对象7374户9463人，为",
|
||||
},
|
||||
{
|
||||
id: "1",
|
||||
name: "重特困人员救助供养",
|
||||
Bj: Bj1,
|
||||
text: "我县特困供养对象329户331人，2023",
|
||||
},
|
||||
{
|
||||
id: "2",
|
||||
name: "医疗救助",
|
||||
Bj: Bj2,
|
||||
text: "我县医疗救助的对象为民政部门认定的特困供",
|
||||
},
|
||||
{
|
||||
id: "3",
|
||||
name: "临时救助",
|
||||
Bj: Bj3,
|
||||
text: "为数助对象发放临时救助金，2023年共救",
|
||||
},
|
||||
{
|
||||
id: "4",
|
||||
name: "受灾人员救助",
|
||||
Bj: Bj4,
|
||||
text: "机构改革以来(2019年)，我县自然灾害",
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const tapshow = (val) => {
|
||||
console.log(val);
|
||||
data.taps = val;
|
||||
};
|
||||
// 服务表格样式
|
||||
const tableHeaderColor = (arg) => {
|
||||
return {
|
||||
// paddingLeft: "10px",
|
||||
letterSpacing: "1px",
|
||||
fontSize: "15px",
|
||||
height: "79px",
|
||||
backgroundColor: "#455F8A",
|
||||
color: "#fff",
|
||||
border: "none",
|
||||
// boxShadow: " inset 0px 0px 56px 0px rgba(173,221,255,0.5)",
|
||||
};
|
||||
};
|
||||
const rowState = (row) => {
|
||||
if (row.rowIndex % 2 == 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(31, 63, 113, 1)",
|
||||
color: "#fff",
|
||||
};
|
||||
} else if (row.rowIndex % 2 !== 0) {
|
||||
return {
|
||||
letterSpacing: "1px",
|
||||
fontSize: "14px",
|
||||
height: "36px",
|
||||
backgroundColor: "rgba(43, 74, 121, 1)",
|
||||
color: "#fff",
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.module {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
.displayFlex {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
.title {
|
||||
font-size: 28px;
|
||||
color: #ffffff;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
font-family: YouSheBiaoTiHei;
|
||||
text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
|
||||
}
|
||||
.lineEnd {
|
||||
height: 3px;
|
||||
border-top: 1px solid #fff;
|
||||
border-bottom: 1px dashed #fff;
|
||||
margin: 17px 0;
|
||||
}
|
||||
.tabPosition {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
color: #ffffff;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
letter-spacing: 1px;
|
||||
|
||||
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: #92bdff;
|
||||
}
|
||||
}
|
||||
}
|
||||
.left_bg {
|
||||
// width: 642px;
|
||||
width: 230px;
|
||||
height: 943px;
|
||||
box-sizing: border-box;
|
||||
padding: 19px 17px;
|
||||
// margin-right: 28px;
|
||||
background: linear-gradient(
|
||||
270deg,
|
||||
rgba(3, 56, 127, 0.77) 0%,
|
||||
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;
|
||||
backdrop-filter: blur(3px);
|
||||
}
|
||||
.right_bg {
|
||||
width: 100%;
|
||||
height: 943px;
|
||||
margin: 0 30px 30px 30px;
|
||||
// background-color: pink;
|
||||
.formText {
|
||||
// .formText_top {
|
||||
// }
|
||||
.formText_bootom {
|
||||
.tableBox {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.tableBoxTop {
|
||||
width: 510px;
|
||||
height: 210px;
|
||||
// background-image: url(@/assets/sy-table/sy-table3.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// background-color: pink;
|
||||
padding: 15px 28px;
|
||||
box-sizing: border-box;
|
||||
margin-left: 20px;
|
||||
margin-bottom: 20px;
|
||||
.tableBoxTops {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.tableBoxCenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
.tableBoxTopa {
|
||||
width: 470px;
|
||||
height: 90px;
|
||||
font-family: PingFangSC, PingFang SC;
|
||||
font-weight: 400;
|
||||
font-size: 22px;
|
||||
color: #ffffff;
|
||||
line-height: 30px;
|
||||
text-align: left;
|
||||
font-style: normal;
|
||||
margin-top: 10px;
|
||||
}
|
||||
}
|
||||
img {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
.tableli {
|
||||
font-size: 26px;
|
||||
color: #ffffff;
|
||||
letter-spacing: 2px;
|
||||
}
|
||||
.tableBoxCenter1 {
|
||||
width: 70px;
|
||||
height: 29px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 15px;
|
||||
border: 0px solid #ffffff;
|
||||
|
||||
color: #ffffff;
|
||||
font-weight: 400;
|
||||
font-size: 20px;
|
||||
letter-spacing: 1px;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.left_1 {
|
||||
background-image: url(@/assets/sy-table/sy-table1.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 30px;
|
||||
// cursor: pointer;
|
||||
}
|
||||
.left_2 {
|
||||
background-image: url(@/assets/sy-table/sy-table2.png);
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
// cursor: pointer;
|
||||
margin-bottom: 30px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
</style>
|
||||
<style lang="scss" scoped>
|
||||
:deep(.el-table) {
|
||||
background: rgba(32, 64, 115, 1) !important ;
|
||||
color: #ffffff;
|
||||
--el-table-tr-bg-color: none;
|
||||
--el-table-header-bg-color: none;
|
||||
--el-table-header-text-color: none;
|
||||
border: 1px solid #7aceff;
|
||||
}
|
||||
.table {
|
||||
:deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
|
||||
border: none !important;
|
||||
padding-left: 10px !important;
|
||||
}
|
||||
|
||||
:deep(.el-table td.el-table__cell) {
|
||||
padding-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
|
||||
background-color: #2f4b74;
|
||||
}
|
||||
|
||||
:deep(.el-table__empty-block) {
|
||||
background-color: #122560;
|
||||
}
|
||||
|
||||
:deep(.el-table .el-table__row) {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.yd_title {
|
||||
box-sizing: border-box;
|
||||
width: 96%;
|
||||
height: 31px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
/* 利用伪元素和两个i元素产生4条线 */
|
||||
.animate-border {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 2px;
|
||||
}
|
||||
i {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
height: 100%;
|
||||
width: 2px;
|
||||
}
|
||||
&::before {
|
||||
top: 0;
|
||||
left: -100%;
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
transparent,
|
||||
#03e9f4,
|
||||
transparent
|
||||
);
|
||||
|
||||
animation: one 4s linear infinite;
|
||||
}
|
||||
i:nth-child(1) {
|
||||
top: -100%;
|
||||
right: 0;
|
||||
background-image: linear-gradient(
|
||||
180deg,
|
||||
transparent,
|
||||
#03e9f4,
|
||||
transparent
|
||||
);
|
||||
/* 动画名称 动画持续时间 动画渲染函数 动画延迟时间 动画执行次数 */
|
||||
animation: two 4s linear 1s infinite;
|
||||
}
|
||||
&::after {
|
||||
bottom: 0;
|
||||
right: -100%;
|
||||
background-image: linear-gradient(
|
||||
-90deg,
|
||||
transparent,
|
||||
#03e9f4,
|
||||
transparent
|
||||
);
|
||||
animation: three 4s linear 2s infinite;
|
||||
}
|
||||
i:nth-child(2) {
|
||||
bottom: -100%;
|
||||
left: 0;
|
||||
background-image: linear-gradient(
|
||||
360deg,
|
||||
transparent,
|
||||
#03e9f4,
|
||||
transparent
|
||||
);
|
||||
animation: four 4s linear 3s infinite;
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
font-size: 16px;
|
||||
font-family: SourceHanSansCN;
|
||||
font-weight: bold;
|
||||
color: #ffffff;
|
||||
position: absolute;
|
||||
right: 5px;
|
||||
top: 1px;
|
||||
}
|
||||
.gTitle {
|
||||
position: absolute;
|
||||
color: #acd1f1;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
left: 156px;
|
||||
}
|
||||
|
||||
.c {
|
||||
width: 130px;
|
||||
height: 42px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
@keyframes one {
|
||||
0% {
|
||||
left: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes two {
|
||||
0% {
|
||||
top: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
top: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes three {
|
||||
0% {
|
||||
right: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
right: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes four {
|
||||
0% {
|
||||
bottom: -100%;
|
||||
}
|
||||
50%,
|
||||
100% {
|
||||
bottom: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue