2024-07-23 13:03:06 +08:00
|
|
|
<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"
|
2024-07-24 10:32:29 +08:00
|
|
|
style="width: 100%; height: 712px; margin-bottom: 20px"
|
|
|
|
max-height="820"
|
2024-07-23 13:03:06 +08:00
|
|
|
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">
|
2024-07-24 09:39:53 +08:00
|
|
|
<div class="yd_title left_2">
|
2024-07-23 13:03:06 +08:00
|
|
|
<div class="animate-border">
|
|
|
|
<i></i>
|
|
|
|
<i></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="width: 97.5%">
|
|
|
|
<el-table
|
|
|
|
border
|
|
|
|
:data="data.tableData1"
|
2024-07-24 10:32:29 +08:00
|
|
|
style="width: 100%; height: 712px; margin-bottom: 20px"
|
|
|
|
max-height="820"
|
2024-07-23 13:03:06 +08:00
|
|
|
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">
|
2024-07-24 09:39:53 +08:00
|
|
|
<div class="yd_title left_3">
|
2024-07-23 13:03:06 +08:00
|
|
|
<div class="animate-border">
|
|
|
|
<i></i>
|
|
|
|
<i></i>
|
|
|
|
</div>
|
2024-07-24 10:32:29 +08:00
|
|
|
<span class="text">
|
|
|
|
<img
|
|
|
|
v-if="data.first"
|
|
|
|
src="@/assets/sy-table/sy_details4.png"
|
|
|
|
class="c"
|
|
|
|
style="width: 350px"
|
|
|
|
@click="change"
|
|
|
|
/>
|
|
|
|
<img
|
|
|
|
v-else
|
|
|
|
src="@/assets/sy-table/sy_details5.png"
|
|
|
|
class="c"
|
|
|
|
style="width: 350px"
|
|
|
|
@click="change"
|
|
|
|
/>
|
|
|
|
</span>
|
2024-07-23 13:03:06 +08:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div style="width: 97.5%">
|
|
|
|
<el-table
|
|
|
|
border
|
|
|
|
:data="data.tableData2"
|
2024-07-24 10:32:29 +08:00
|
|
|
style="width: 100%; height: 712px; margin-bottom: 20px"
|
2024-07-23 13:03:06 +08:00
|
|
|
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({
|
2024-07-24 10:32:29 +08:00
|
|
|
first: true,
|
2024-07-23 13:03:06 +08:00
|
|
|
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",
|
|
|
|
};
|
|
|
|
}
|
|
|
|
};
|
2024-07-24 10:32:29 +08:00
|
|
|
|
|
|
|
const change = (name, index) => {
|
|
|
|
data.first = !data.first;
|
|
|
|
};
|
2024-07-23 13:03:06 +08:00
|
|
|
</script>
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
.module {
|
|
|
|
width: 100%;
|
|
|
|
height: 943px;
|
2024-07-24 16:00:36 +08:00
|
|
|
margin-top: 112px;
|
2024-07-23 13:03:06 +08:00
|
|
|
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;
|
|
|
|
}
|
2024-07-24 09:39:53 +08:00
|
|
|
.left_1 {
|
|
|
|
background-image: url(@/assets/sy-table/sy_details1.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
// margin-bottom: 30px;
|
|
|
|
// cursor: pointer;
|
|
|
|
}
|
|
|
|
.left_2 {
|
|
|
|
background-image: url(@/assets/sy-table/sy_details2.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
// cursor: pointer;
|
|
|
|
// margin-bottom: 30px;
|
|
|
|
// margin-top: 40px;
|
|
|
|
}
|
|
|
|
.left_3 {
|
|
|
|
background-image: url(@/assets/sy-table/sy_details3.png);
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-size: 100% 100%;
|
|
|
|
}
|
2024-07-23 13:03:06 +08:00
|
|
|
.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;
|
2024-07-24 09:39:53 +08:00
|
|
|
|
2024-07-23 13:03:06 +08:00
|
|
|
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;
|
2024-07-24 10:32:29 +08:00
|
|
|
align-items: center;
|
2024-07-23 13:03:06 +08:00
|
|
|
}
|
|
|
|
.gTitle {
|
|
|
|
position: absolute;
|
|
|
|
color: #acd1f1;
|
|
|
|
height: 100%;
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
left: 156px;
|
|
|
|
}
|
|
|
|
|
|
|
|
.c {
|
|
|
|
width: 130px;
|
2024-07-24 10:32:29 +08:00
|
|
|
height: 33px;
|
2024-07-23 13:03:06 +08:00
|
|
|
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>
|