This commit is contained in:
duanxiaohai 2024-11-12 17:11:17 +08:00
parent b258fe7517
commit a00e2784e1
6 changed files with 1464 additions and 21 deletions

View File

@ -11,7 +11,12 @@
<div
class="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="" />
<p>返回</p>
@ -109,7 +114,7 @@ const to = (url) => {
});
if (url == "/home/index/map") {
let menu = tools.data.get("menu");
if(menu && menu.indexOf('ggfw:ystp') != -1){
if (menu && menu.indexOf("ggfw:ystp") != -1) {
data.nowTab = url;
data.menushow = false;
}
@ -209,7 +214,7 @@ onMounted(() => {
onBeforeUnmount(() => {
if (timeT.value) {
clearInterval(timeT.value);
console.log('定时器已清除');
console.log("定时器已清除");
}
});
</script>

View File

@ -121,6 +121,16 @@ const router = createRouter({
path: "/home/index/table/jtDetails",
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: "人物图",
path: "/home/index/person",

View File

@ -2,7 +2,7 @@ import axios from "axios";
import { ElMessage } from "element-plus";
import tools from "@/utils/tools";
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;
// HTTP request 拦截器

700
src/view/hd_details.vue Normal file
View File

@ -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>

719
src/view/js_details.vue Normal file
View File

@ -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>

View File

@ -217,6 +217,16 @@ const goto = (val) => {
path: "/home/index/table/jtDetails",
query: { name: val.name },
});
} else if (val.name == "全民健身服务") {
router.push({
path: "/home/index/table/fitnessServices",
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",
@ -224,7 +234,6 @@ const goto = (val) => {
});
}
// ElMessage.warning({
// message: `${val.name}!`,
// offset: 100, //