This commit is contained in:
duanxiaohai
parent
b258fe7517
commit
a00e2784e1
|
|
@ -11,7 +11,12 @@
|
||||||
<div
|
<div
|
||||||
class="back"
|
class="back"
|
||||||
@click="back()"
|
@click="back()"
|
||||||
v-if="routers.path == '/home/index/table/details' || routers.path == '/home/index/table/jtDetails'"
|
v-if="
|
||||||
|
routers.path == '/home/index/table/details' ||
|
||||||
|
routers.path == '/home/index/table/jtDetails' ||
|
||||||
|
routers.path == '/home/index/table/fitnessServices' ||
|
||||||
|
routers.path == '/home/index/table/afterschoolActivities'
|
||||||
|
"
|
||||||
>
|
>
|
||||||
<img src="@/assets/person/back.png" alt="" />
|
<img src="@/assets/person/back.png" alt="" />
|
||||||
<p>返回</p>
|
<p>返回</p>
|
||||||
|
|
@ -109,15 +114,15 @@ const to = (url) => {
|
||||||
});
|
});
|
||||||
if (url == "/home/index/map") {
|
if (url == "/home/index/map") {
|
||||||
let menu = tools.data.get("menu");
|
let menu = tools.data.get("menu");
|
||||||
if(menu && menu.indexOf('ggfw:ystp') != -1){
|
if (menu && menu.indexOf("ggfw:ystp") != -1) {
|
||||||
data.nowTab = url;
|
data.nowTab = url;
|
||||||
data.menushow = false;
|
data.menushow = false;
|
||||||
}
|
}
|
||||||
}else{
|
} else {
|
||||||
data.nowTab = url;
|
data.nowTab = url;
|
||||||
data.menushow = false;
|
data.menushow = false;
|
||||||
}
|
}
|
||||||
|
|
||||||
// data.nowTab = url;
|
// data.nowTab = url;
|
||||||
// data.menushow = false;
|
// data.menushow = false;
|
||||||
};
|
};
|
||||||
|
|
@ -198,19 +203,19 @@ const data = reactive({
|
||||||
],
|
],
|
||||||
nowTab: "/home/index",
|
nowTab: "/home/index",
|
||||||
});
|
});
|
||||||
const timeT=ref(null);
|
const timeT = ref(null);
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// 初始调用 updateClock 以立即显示时间
|
// 初始调用 updateClock 以立即显示时间
|
||||||
updateClock();
|
updateClock();
|
||||||
data.nowTab = router.currentRoute.value.fullPath;
|
data.nowTab = router.currentRoute.value.fullPath;
|
||||||
// 每隔一秒钟调用一次 updateClock 以更新时钟显示
|
// 每隔一秒钟调用一次 updateClock 以更新时钟显示
|
||||||
timeT.value=setInterval(updateClock, 1000);
|
timeT.value = setInterval(updateClock, 1000);
|
||||||
});
|
});
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
if (timeT.value) {
|
if (timeT.value) {
|
||||||
clearInterval(timeT.value);
|
clearInterval(timeT.value);
|
||||||
console.log('定时器已清除');
|
console.log("定时器已清除");
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
||||||
|
|
@ -121,6 +121,16 @@ const router = createRouter({
|
||||||
path: "/home/index/table/jtDetails",
|
path: "/home/index/table/jtDetails",
|
||||||
component: () => import("../view/jt_details.vue"),
|
component: () => import("../view/jt_details.vue"),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
name: "首页表格全民健身服务详情",
|
||||||
|
path: "/home/index/table/fitnessServices",
|
||||||
|
component: () => import("../view/js_details.vue"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "首页表格校外活动服务详情",
|
||||||
|
path: "/home/index/table/afterschoolActivities",
|
||||||
|
component: () => import("../view/hd_details.vue"),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
name: "人物图",
|
name: "人物图",
|
||||||
path: "/home/index/person",
|
path: "/home/index/person",
|
||||||
|
|
|
||||||
|
|
@ -2,7 +2,7 @@ import axios from "axios";
|
||||||
import { ElMessage } from "element-plus";
|
import { ElMessage } from "element-plus";
|
||||||
import tools from "@/utils/tools";
|
import tools from "@/utils/tools";
|
||||||
import router from "../router";
|
import router from "../router";
|
||||||
axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
|
// axios.defaults.baseURL = 'https://jzzf.longyou.gov.cn:998/'
|
||||||
axios.defaults.timeout = 120000;
|
axios.defaults.timeout = 120000;
|
||||||
|
|
||||||
// HTTP request 拦截器
|
// HTTP request 拦截器
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,700 @@
|
||||||
|
<template>
|
||||||
|
<div class="module">
|
||||||
|
<div class="displayFlex">
|
||||||
|
<div class="bt_title">
|
||||||
|
<div class="yd_title">
|
||||||
|
<span>校外活动服务</span>
|
||||||
|
<div class="semi-circle-shadow"></div>
|
||||||
|
<div class="animate-border">
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="select">
|
||||||
|
<div class="select_item">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="search1.timeDate"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="开始时间"
|
||||||
|
end-placeholder="结束时间"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
@change="searchT('date')"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="select_item">
|
||||||
|
<el-input
|
||||||
|
v-model="search1.keyword"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="地点查询"
|
||||||
|
clearable
|
||||||
|
class="input-with-select"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<!-- <el-button style="" :icon="Search" @click="searchT('name')"
|
||||||
|
>搜索</el-button
|
||||||
|
> -->
|
||||||
|
<el-button
|
||||||
|
type="primary"
|
||||||
|
:icon="Search"
|
||||||
|
@click="searchT('name')"
|
||||||
|
>搜索</el-button
|
||||||
|
>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="width: 100%; position: relative">
|
||||||
|
<div class="backgroundVirtual"></div>
|
||||||
|
<el-table
|
||||||
|
border
|
||||||
|
:data="data.tableData"
|
||||||
|
style="width: 100%; height: 810px; margin-bottom: 20px"
|
||||||
|
max-height="850px"
|
||||||
|
class="table_border"
|
||||||
|
:row-style="rowState"
|
||||||
|
:header-cell-style="tableHeaderColor"
|
||||||
|
@row-click="handleRowClick"
|
||||||
|
>
|
||||||
|
<template v-for="item in data.columns">
|
||||||
|
<el-table-column
|
||||||
|
v-if="item.type == 'slot'"
|
||||||
|
:label="item.label"
|
||||||
|
:prop="item.property"
|
||||||
|
:show-overflow-tooltip="item.tooltip"
|
||||||
|
:width="item.width || ''"
|
||||||
|
:align="item.align || 'left'"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<!-- 补助类型 -->
|
||||||
|
<div v-if="item.property == 'bzlx'">
|
||||||
|
<div v-if="scope.row.bzlx == '1'">高龄津贴</div>
|
||||||
|
<div v-else>老年人综合能力评估</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-else
|
||||||
|
:label="item.label"
|
||||||
|
:width="item.width || ''"
|
||||||
|
:prop="item.property"
|
||||||
|
:align="item.align || 'left'"
|
||||||
|
:show-overflow-tooltip="item.tooltip"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
layout="prev, pager, next, total"
|
||||||
|
:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
prev-text="上一页"
|
||||||
|
next-text="下一页"
|
||||||
|
v-model:current-page="pagination.currentPage"
|
||||||
|
@current-change="handlePagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, computed } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
import http from "@/utils/request.js";
|
||||||
|
import { Search } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const routers = useRoute();
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
url: `/api/ggfwyth/pg/fwjgqdxq`,
|
||||||
|
name: "",
|
||||||
|
data: [],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
label: "序号",
|
||||||
|
property: "xh",
|
||||||
|
width: "150",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "服务",
|
||||||
|
property: "fw",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: "时间",
|
||||||
|
property: "sj",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "地点",
|
||||||
|
property: "dd",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "主题",
|
||||||
|
property: "zt",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "人数",
|
||||||
|
property: "rs",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 表格分页
|
||||||
|
const pagination = reactive({
|
||||||
|
id: "1",
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1,
|
||||||
|
});
|
||||||
|
//表格分页切换
|
||||||
|
const handlePagination = (current) => {
|
||||||
|
pagination.currentPage = current;
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
//表格样式
|
||||||
|
const tableHeaderColor = (arg) => {
|
||||||
|
return {
|
||||||
|
// paddingLeft: "10px",
|
||||||
|
letterSpacing: "1px",
|
||||||
|
fontSize: "20px",
|
||||||
|
height: "79px",
|
||||||
|
backgroundColor: "rgba(23, 62, 115)",
|
||||||
|
color: "#fff",
|
||||||
|
border: "none",
|
||||||
|
textAlign: "center",
|
||||||
|
fontFamily: "PingFangSC, PingFang SC",
|
||||||
|
// boxShadow: " inset 0px 0px 56px 0px rgba(173,221,255,0.5)",
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rowState = (row) => {
|
||||||
|
if (row.rowIndex % 2 == 0) {
|
||||||
|
return {
|
||||||
|
letterSpacing: "1px",
|
||||||
|
fontSize: "19px",
|
||||||
|
height: "36px",
|
||||||
|
backgroundColor: "rgba(31, 63, 113, 1)",
|
||||||
|
color: "#fff",
|
||||||
|
};
|
||||||
|
} else if (row.rowIndex % 2 !== 0) {
|
||||||
|
return {
|
||||||
|
letterSpacing: "1px",
|
||||||
|
fontSize: "19px",
|
||||||
|
height: "36px",
|
||||||
|
backgroundColor: "rgba(43, 74, 121, 1)",
|
||||||
|
color: "#fff",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 查询
|
||||||
|
const search1 = reactive({
|
||||||
|
timeDate: "",
|
||||||
|
startTime: "",
|
||||||
|
endTime: "",
|
||||||
|
keyword: "",
|
||||||
|
});
|
||||||
|
const searchT = (val) => {
|
||||||
|
if (val == "name") {
|
||||||
|
getData();
|
||||||
|
} else {
|
||||||
|
[search1.startTime = "", search1.endTime = ""] = search1.timeDate || [];
|
||||||
|
throttle(getData, 50);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
//节流
|
||||||
|
var timer;
|
||||||
|
const throttle = (func, limit) => {
|
||||||
|
if (!timer) {
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
func();
|
||||||
|
timer = null;
|
||||||
|
}, limit);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//获取数据
|
||||||
|
const getData = () => {
|
||||||
|
http
|
||||||
|
.get(
|
||||||
|
`/api/ggfwyth/pg/getXwhdfw?keyword=${search1.keyword}&startTime=${search1.startTime}&endTime=${search1.endTime}&page=${pagination.currentPage}&size=${pagination.pageSize}`
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
data.tableData = res.data;
|
||||||
|
pagination.total = res.count;
|
||||||
|
} else {
|
||||||
|
ElMessage.warning({ message: res.message });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("请求失败", error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.module {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 126px;
|
||||||
|
.select {
|
||||||
|
// margin-top: 16px;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.select_item {
|
||||||
|
width: 41%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.displayFlex {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 6px 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.bt_title {
|
||||||
|
// width: 585px;
|
||||||
|
width: 100%;
|
||||||
|
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;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.backgroundVirtual {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 79px;
|
||||||
|
font-size: 20px;
|
||||||
|
box-shadow: inset 0px 0px 55px 0px rgba(173, 221, 255, 1);
|
||||||
|
z-index: 99;
|
||||||
|
// background: linear-gradient(
|
||||||
|
// 270deg,
|
||||||
|
// rgba(0, 52, 131, 0.20) 0%,
|
||||||
|
// rgba(0, 32, 83, 0.30) 50%,
|
||||||
|
// rgba(0, 60, 131, 0.40) 100%
|
||||||
|
// );
|
||||||
|
// backdrop-filter: blur(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.yd_title {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 585px;
|
||||||
|
height: 31px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
span {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: titleNore;
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 500px;
|
||||||
|
overflow: hidden; /* 超出一行文字自动隐藏 */
|
||||||
|
text-overflow: ellipsis; /*文字隐藏后添加省略号*/
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
/* 利用伪元素和两个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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mxbRecord {
|
||||||
|
display: flex;
|
||||||
|
.text_0 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: titleNore;
|
||||||
|
// margin-right: 20px;
|
||||||
|
padding: 0 10px;
|
||||||
|
width: 90px;
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
rgba(37, 127, 173, 1) 0%,
|
||||||
|
rgba(37, 127, 173, 0) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.text_2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4787a8;
|
||||||
|
font-family: titleNore;
|
||||||
|
// margin-right: 20px;
|
||||||
|
padding: 0 10px;
|
||||||
|
width: 90px;
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: SourceHanSansCN;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 1px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.text_1 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4787a8;
|
||||||
|
font-family: titleNore;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.gTitle {
|
||||||
|
position: absolute;
|
||||||
|
color: #acd1f1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
left: 156px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c {
|
||||||
|
width: 130px;
|
||||||
|
height: 33px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lampState {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0;
|
||||||
|
z-index: 6;
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
// &:nth-child(3n) {
|
||||||
|
// margin-right: 20px;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
// .selected {
|
||||||
|
// border-radius: 50%;
|
||||||
|
// background-color: rgba(255, 255, 255, 0.3);
|
||||||
|
// box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.yd_title::before {
|
||||||
|
content: "";
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: rgba(0, 229, 255, 1);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 3px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.yd_title::after {
|
||||||
|
content: "";
|
||||||
|
width: 90%;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(to right, #257fad, rgba(37, 127, 173, 0));
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.semi-circle-shadow {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -5px;
|
||||||
|
left: -24px;
|
||||||
|
width: 30%;
|
||||||
|
height: 20px;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
rgba(37, 127, 173, 1) 0%,
|
||||||
|
rgba(37, 127, 173, 0) 70%
|
||||||
|
);
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 表格
|
||||||
|
:deep(.el-table) {
|
||||||
|
background: rgba(32, 64, 115, 1);
|
||||||
|
|
||||||
|
--el-table-border-color: none;
|
||||||
|
border: 1px solid #7aceff;
|
||||||
|
}
|
||||||
|
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
// 分页
|
||||||
|
:deep(.el-pagination > .is-last) {
|
||||||
|
color: #fff !important ;
|
||||||
|
}
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
// 分页
|
||||||
|
.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.is-background .btn-prev) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
:deep(.el-pagination.is-background .btn-next) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
:deep(.el-pagination) {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
// 日期选择
|
||||||
|
:deep(.el-range-editor.el-input__wrapper) {
|
||||||
|
background: rgba(150, 194, 255, 0.14);
|
||||||
|
}
|
||||||
|
:deep(.el-date-editor .el-range-separator) {
|
||||||
|
color: rgba(255, 255, 255, 0.555);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input-group--append > .el-input__wrapper) {
|
||||||
|
background: rgba(150, 194, 255, 0.14);
|
||||||
|
}
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input-group__append) {
|
||||||
|
background: rgba(28, 171, 193, 1);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,719 @@
|
||||||
|
<template>
|
||||||
|
<div class="module">
|
||||||
|
<div class="displayFlex">
|
||||||
|
<div class="bt_title">
|
||||||
|
<div class="yd_title">
|
||||||
|
<span>场馆预约记录</span>
|
||||||
|
<div class="semi-circle-shadow"></div>
|
||||||
|
<div class="animate-border">
|
||||||
|
<i></i>
|
||||||
|
<i></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="select">
|
||||||
|
<div class="select_item">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="search1.timeDate"
|
||||||
|
type="daterange"
|
||||||
|
start-placeholder="预约开始时间"
|
||||||
|
end-placeholder="预约结束时间"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
@change="searchT('date')"
|
||||||
|
/>
|
||||||
|
<!-- <el-date-picker
|
||||||
|
style="width: 45%"
|
||||||
|
v-model="search1.startTime"
|
||||||
|
type="date"
|
||||||
|
placeholder="预约开始时间"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
@change="searchT('date')"
|
||||||
|
/>
|
||||||
|
<span class="demonstration"> - </span>
|
||||||
|
<el-date-picker
|
||||||
|
style="width: 45%"
|
||||||
|
v-model="search1.endTime"
|
||||||
|
type="date"
|
||||||
|
placeholder="预约结束时间"
|
||||||
|
format="YYYY-MM-DD"
|
||||||
|
value-format="YYYY-MM-DD"
|
||||||
|
@change="searchT('date')"
|
||||||
|
/> -->
|
||||||
|
</div>
|
||||||
|
<div class="select_item">
|
||||||
|
<el-input
|
||||||
|
v-model="search1.keyword"
|
||||||
|
style="width: 100%"
|
||||||
|
placeholder="预约学校查询"
|
||||||
|
clearable
|
||||||
|
class="input-with-select"
|
||||||
|
>
|
||||||
|
<template #append>
|
||||||
|
<!-- <el-button style="" :icon="Search" @click="searchT('name')"
|
||||||
|
>搜索</el-button
|
||||||
|
> -->
|
||||||
|
<el-button type="primary" :icon="Search" @click="searchT('name')">搜索</el-button>
|
||||||
|
</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="width: 100%; position: relative">
|
||||||
|
<div class="backgroundVirtual"></div>
|
||||||
|
<el-table
|
||||||
|
border
|
||||||
|
:data="data.tableData"
|
||||||
|
style="width: 100%; height: 810px; margin-bottom: 20px"
|
||||||
|
max-height="850px"
|
||||||
|
class="table_border"
|
||||||
|
:row-style="rowState"
|
||||||
|
:header-cell-style="tableHeaderColor"
|
||||||
|
@row-click="handleRowClick"
|
||||||
|
>
|
||||||
|
<template v-for="item in data.columns">
|
||||||
|
<el-table-column
|
||||||
|
v-if="item.type == 'slot'"
|
||||||
|
:label="item.label"
|
||||||
|
:prop="item.property"
|
||||||
|
:show-overflow-tooltip="item.tooltip"
|
||||||
|
:width="item.width || ''"
|
||||||
|
:align="item.align || 'left'"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<!-- 补助类型 -->
|
||||||
|
<div v-if="item.property == 'bzlx'">
|
||||||
|
<div v-if="scope.row.bzlx == '1'">高龄津贴</div>
|
||||||
|
<div v-else>老年人综合能力评估</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-else
|
||||||
|
:label="item.label"
|
||||||
|
:width="item.width || ''"
|
||||||
|
:prop="item.property"
|
||||||
|
:align="item.align || 'left'"
|
||||||
|
:show-overflow-tooltip="item.tooltip"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
<el-pagination
|
||||||
|
background
|
||||||
|
layout="prev, pager, next, total"
|
||||||
|
:page-size="pagination.pageSize"
|
||||||
|
:total="pagination.total"
|
||||||
|
prev-text="上一页"
|
||||||
|
next-text="下一页"
|
||||||
|
v-model:current-page="pagination.currentPage"
|
||||||
|
@current-change="handlePagination"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import { ref, reactive, onMounted, computed } from "vue";
|
||||||
|
import { ElMessage } from "element-plus";
|
||||||
|
import { useRouter, useRoute } from "vue-router";
|
||||||
|
import http from "@/utils/request.js";
|
||||||
|
import { Search } from "@element-plus/icons-vue";
|
||||||
|
|
||||||
|
const router = useRouter();
|
||||||
|
const routers = useRoute();
|
||||||
|
|
||||||
|
const data = reactive({
|
||||||
|
url: `/api/ggfwyth/pg/fwjgqdxq`,
|
||||||
|
name: "",
|
||||||
|
data: [],
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
label: "序号",
|
||||||
|
property: "xh",
|
||||||
|
width: "150",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "姓名",
|
||||||
|
property: "xm",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: "预约学校",
|
||||||
|
property: "yyxx",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "预约校区",
|
||||||
|
property: "yyxq",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "预约场馆",
|
||||||
|
property: "yycg",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
label: "预约日期",
|
||||||
|
property: "yyrq",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
label: "预约时段",
|
||||||
|
property: "yysd",
|
||||||
|
align: "center",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
tableData: [],
|
||||||
|
});
|
||||||
|
|
||||||
|
// 表格分页
|
||||||
|
const pagination = reactive({
|
||||||
|
id: "1",
|
||||||
|
total: 0,
|
||||||
|
pageSize: 20,
|
||||||
|
currentPage: 1,
|
||||||
|
});
|
||||||
|
//表格分页切换
|
||||||
|
const handlePagination = (current) => {
|
||||||
|
pagination.currentPage = current;
|
||||||
|
getData();
|
||||||
|
};
|
||||||
|
//表格样式
|
||||||
|
const tableHeaderColor = (arg) => {
|
||||||
|
return {
|
||||||
|
// paddingLeft: "10px",
|
||||||
|
letterSpacing: "1px",
|
||||||
|
fontSize: "20px",
|
||||||
|
height: "79px",
|
||||||
|
backgroundColor: "rgba(23, 62, 115)",
|
||||||
|
color: "#fff",
|
||||||
|
border: "none",
|
||||||
|
textAlign: "center",
|
||||||
|
fontFamily: "PingFangSC, PingFang SC",
|
||||||
|
// boxShadow: " inset 0px 0px 56px 0px rgba(173,221,255,0.5)",
|
||||||
|
};
|
||||||
|
};
|
||||||
|
const rowState = (row) => {
|
||||||
|
if (row.rowIndex % 2 == 0) {
|
||||||
|
return {
|
||||||
|
letterSpacing: "1px",
|
||||||
|
fontSize: "19px",
|
||||||
|
height: "36px",
|
||||||
|
backgroundColor: "rgba(31, 63, 113, 1)",
|
||||||
|
color: "#fff",
|
||||||
|
};
|
||||||
|
} else if (row.rowIndex % 2 !== 0) {
|
||||||
|
return {
|
||||||
|
letterSpacing: "1px",
|
||||||
|
fontSize: "19px",
|
||||||
|
height: "36px",
|
||||||
|
backgroundColor: "rgba(43, 74, 121, 1)",
|
||||||
|
color: "#fff",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
// 查询
|
||||||
|
const search1 = reactive({
|
||||||
|
timeDate: "",
|
||||||
|
startTime: "",
|
||||||
|
endTime: "",
|
||||||
|
keyword: "",
|
||||||
|
});
|
||||||
|
const searchT = (val) => {
|
||||||
|
if (val == "name") {
|
||||||
|
getData();
|
||||||
|
} else {
|
||||||
|
[search1.startTime = "", search1.endTime = ""] = search1.timeDate || [];
|
||||||
|
throttle(getData, 50);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
//节流
|
||||||
|
var timer;
|
||||||
|
const throttle = (func, limit) => {
|
||||||
|
if (!timer) {
|
||||||
|
timer = setTimeout(() => {
|
||||||
|
func();
|
||||||
|
timer = null;
|
||||||
|
}, limit);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
//获取数据
|
||||||
|
const getData = () => {
|
||||||
|
http
|
||||||
|
.get(
|
||||||
|
`/api/ggfwyth/pg/getQmjsfw?keyword=${search1.keyword}&startTime=${search1.startTime}&endTime=${search1.endTime}&page=${pagination.currentPage}&size=${pagination.pageSize}`
|
||||||
|
)
|
||||||
|
.then((res) => {
|
||||||
|
if (res.code == 200) {
|
||||||
|
data.tableData = res.data;
|
||||||
|
pagination.total = res.count;
|
||||||
|
} else {
|
||||||
|
ElMessage.warning({ message: res.message });
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
console.error("请求失败", error);
|
||||||
|
});
|
||||||
|
};
|
||||||
|
onMounted(() => {
|
||||||
|
getData();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.module {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin-top: 126px;
|
||||||
|
.select {
|
||||||
|
// margin-top: 16px;
|
||||||
|
// margin-bottom: 20px;
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.select_item {
|
||||||
|
width: 41%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.displayFlex {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 6px 40px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
box-sizing: border-box;
|
||||||
|
.bt_title {
|
||||||
|
// width: 585px;
|
||||||
|
width: 100%;
|
||||||
|
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;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.backgroundVirtual {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 79px;
|
||||||
|
font-size: 20px;
|
||||||
|
box-shadow: inset 0px 0px 55px 0px rgba(173, 221, 255, 1);
|
||||||
|
z-index: 99;
|
||||||
|
// background: linear-gradient(
|
||||||
|
// 270deg,
|
||||||
|
// rgba(0, 52, 131, 0.20) 0%,
|
||||||
|
// rgba(0, 32, 83, 0.30) 50%,
|
||||||
|
// rgba(0, 60, 131, 0.40) 100%
|
||||||
|
// );
|
||||||
|
// backdrop-filter: blur(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.yd_title {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 585px;
|
||||||
|
height: 31px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
span {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: titleNore;
|
||||||
|
margin-left: 20px;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
width: 500px;
|
||||||
|
overflow: hidden; /* 超出一行文字自动隐藏 */
|
||||||
|
text-overflow: ellipsis; /*文字隐藏后添加省略号*/
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
/* 利用伪元素和两个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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.mxbRecord {
|
||||||
|
display: flex;
|
||||||
|
.text_0 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #ffffff;
|
||||||
|
font-family: titleNore;
|
||||||
|
// margin-right: 20px;
|
||||||
|
padding: 0 10px;
|
||||||
|
width: 90px;
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
rgba(37, 127, 173, 1) 0%,
|
||||||
|
rgba(37, 127, 173, 0) 100%
|
||||||
|
);
|
||||||
|
}
|
||||||
|
.text_2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4787a8;
|
||||||
|
font-family: titleNore;
|
||||||
|
// margin-right: 20px;
|
||||||
|
padding: 0 10px;
|
||||||
|
width: 90px;
|
||||||
|
z-index: 2;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
display: flex;
|
||||||
|
position: absolute;
|
||||||
|
font-size: 16px;
|
||||||
|
font-family: SourceHanSansCN;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #ffffff;
|
||||||
|
position: absolute;
|
||||||
|
right: 5px;
|
||||||
|
top: 1px;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.text_1 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #4787a8;
|
||||||
|
font-family: titleNore;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.gTitle {
|
||||||
|
position: absolute;
|
||||||
|
color: #acd1f1;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
left: 156px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c {
|
||||||
|
width: 130px;
|
||||||
|
height: 33px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.lampState {
|
||||||
|
position: absolute;
|
||||||
|
top: 0px;
|
||||||
|
right: 0;
|
||||||
|
z-index: 6;
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
// &:nth-child(3n) {
|
||||||
|
// margin-right: 20px;
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
// .selected {
|
||||||
|
// border-radius: 50%;
|
||||||
|
// background-color: rgba(255, 255, 255, 0.3);
|
||||||
|
// box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
.yd_title::before {
|
||||||
|
content: "";
|
||||||
|
width: 4px;
|
||||||
|
height: 4px;
|
||||||
|
background-color: rgba(0, 229, 255, 1);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
margin-left: 3px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
.yd_title::after {
|
||||||
|
content: "";
|
||||||
|
width: 90%;
|
||||||
|
height: 1px;
|
||||||
|
background: linear-gradient(to right, #257fad, rgba(37, 127, 173, 0));
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
.semi-circle-shadow {
|
||||||
|
position: absolute;
|
||||||
|
bottom: -5px;
|
||||||
|
left: -24px;
|
||||||
|
width: 30%;
|
||||||
|
height: 20px;
|
||||||
|
background: radial-gradient(
|
||||||
|
circle,
|
||||||
|
rgba(37, 127, 173, 1) 0%,
|
||||||
|
rgba(37, 127, 173, 0) 70%
|
||||||
|
);
|
||||||
|
border-radius: 50%;
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 表格
|
||||||
|
:deep(.el-table) {
|
||||||
|
background: rgba(32, 64, 115, 1);
|
||||||
|
|
||||||
|
--el-table-border-color: none;
|
||||||
|
border: 1px solid #7aceff;
|
||||||
|
}
|
||||||
|
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
// 分页
|
||||||
|
:deep(.el-pagination > .is-last) {
|
||||||
|
color: #fff !important ;
|
||||||
|
}
|
||||||
|
: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;
|
||||||
|
}
|
||||||
|
// 分页
|
||||||
|
.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.is-background .btn-prev) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
:deep(.el-pagination.is-background .btn-next) {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
:deep(.el-pagination) {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
// 日期选择
|
||||||
|
:deep(.el-range-editor.el-input__wrapper) {
|
||||||
|
background: rgba(150, 194, 255, 0.14);
|
||||||
|
}
|
||||||
|
:deep(.el-date-editor .el-range-separator) {
|
||||||
|
color: rgba(255, 255, 255, 0.555);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.el-input-group--append > .el-input__wrapper) {
|
||||||
|
background: rgba(150, 194, 255, 0.14);
|
||||||
|
}
|
||||||
|
:deep(.el-input__inner) {
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
:deep(.el-input-group__append) {
|
||||||
|
background: rgba(28, 171, 193, 1);
|
||||||
|
color: #ffffff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -214,21 +214,30 @@ const goto = (val) => {
|
||||||
// } else {
|
// } else {
|
||||||
if (val.name == "公共交通") {
|
if (val.name == "公共交通") {
|
||||||
router.push({
|
router.push({
|
||||||
path: "/home/index/table/jtDetails",
|
path: "/home/index/table/jtDetails",
|
||||||
query: { name: val.name},
|
query: { name: val.name },
|
||||||
});
|
});
|
||||||
}else{
|
} else if (val.name == "全民健身服务") {
|
||||||
router.push({
|
router.push({
|
||||||
path: "/home/index/table/details",
|
path: "/home/index/table/fitnessServices",
|
||||||
query: { name: val.name, id: val.id, xh: val.xh },
|
query: { name: val.name },
|
||||||
});
|
});
|
||||||
|
} else if (val.name == "校外活动服务") {
|
||||||
|
router.push({
|
||||||
|
path: "/home/index/table/afterschoolActivities",
|
||||||
|
query: { name: val.name },
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
router.push({
|
||||||
|
path: "/home/index/table/details",
|
||||||
|
query: { name: val.name, id: val.id, xh: val.xh },
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
// ElMessage.warning({
|
// ElMessage.warning({
|
||||||
// message: `${val.name}暂无数据!`,
|
// message: `${val.name}暂无数据!`,
|
||||||
// offset: 100, // 距离窗口顶部的偏移量
|
// offset: 100, // 距离窗口顶部的偏移量
|
||||||
// });
|
// });
|
||||||
// }
|
// }
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue