893 lines
21 KiB
Vue
893 lines
21 KiB
Vue
<template>
|
||
<div class="site-bgc">
|
||
<div class="box-top">
|
||
<div class="back-tunnel" @click="handleGoHome">
|
||
<div class="back-icon"></div>
|
||
<span>返回</span>
|
||
</div>
|
||
<tunnel-title/>
|
||
<div class="all-del-btn">
|
||
<div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon" @click="handleAdd">
|
||
添加
|
||
</div>
|
||
<div class="all-btn" @click="handleChooseAll">
|
||
全选
|
||
</div>
|
||
<div class="all-btn del-btn" @click="handleMoreDelete">
|
||
删除
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="box-content">
|
||
<div class="site-box" v-for="item in siteList" :key="item.siteId">
|
||
<div class="top">
|
||
<span>站点名称：{{ item.siteName }}</span>
|
||
<el-checkbox v-if="!item.isDefault" v-model="item.checked" size="large" @change="handleClickSite(item)"/>
|
||
<span v-else>默认</span>
|
||
</div>
|
||
<div class="box-center">
|
||
<div class="left-img"></div>
|
||
<div class="right-tunnel">
|
||
<div>隧道数量：{{ item.totalTunnel }}条
|
||
</div>
|
||
<div>
|
||
<div class="tunnel" v-if="item.info.tunnelName" @click="goToAddTunnel(item.siteId)">
|
||
<div>{{ item.info.tunnelName }}</div>
|
||
<div class="tunnel-icon"></div>
|
||
<div>施工长度{{ item.info.constructionLength }}米</div>
|
||
<div>实现长度{{ item.info.totalLength }}米
|
||
</div>
|
||
</div>
|
||
<div class="tunnel-add" @click="goToAddTunnel(item.siteId)">
|
||
<div class="add-icon"></div>
|
||
</div>
|
||
</div>
|
||
<div class="more" @click="goToAddTunnel(item.siteId)" v-if="item.info.tunnelName">
|
||
更多
|
||
<div class="icon"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="edit-btn">
|
||
<div @click="handleEdit(item)">
|
||
<div class="edit-icon"></div>
|
||
<div>站点编辑</div>
|
||
</div>
|
||
<!-- <div v-if="item.totalTunnel!==0" @click="handleUpload(item.siteId)">-->
|
||
<!-- <el-icon style="margin-left: 20px">-->
|
||
<!-- <UploadFilled/>-->
|
||
<!-- </el-icon>-->
|
||
<!-- <div>上传图纸</div>-->
|
||
<!-- </div>-->
|
||
</div>
|
||
</div>
|
||
<div class="site-box add-box" v-if="showAddIcon" @click="handleAdd">
|
||
<div class="add-icon"></div>
|
||
<div style="cursor: pointer">添加站点</div>
|
||
</div>
|
||
</div>
|
||
<el-dialog :close-on-click-modal="false" v-model="isVisited" width="1958px">
|
||
<div class="siteId">
|
||
<span>{{ title }}</span>
|
||
</div>
|
||
<el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="190px">
|
||
<el-form-item label="站点名称" prop="siteName">
|
||
<el-input v-model="form.siteName" placeholder="请输入站点名称"/>
|
||
</el-form-item>
|
||
<el-form-item label="是否默认">
|
||
<el-radio-group v-model="form.isDefault">
|
||
<el-radio :label="true">是</el-radio>
|
||
<el-radio :label="false">否</el-radio>
|
||
</el-radio-group>
|
||
</el-form-item>
|
||
<el-form-item label="站点地址">
|
||
<el-input v-model="form.address" placeholder="请输入站点地址"/>
|
||
</el-form-item>
|
||
<el-form-item label="站点描述">
|
||
<el-input v-model="form.describe" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }"
|
||
placeholder="请输入站点信息"/>
|
||
</el-form-item>
|
||
</el-form>
|
||
<template #footer>
|
||
<div class="btns">
|
||
<div class="cancel-btn" @click="isVisited=false;">
|
||
取消
|
||
</div>
|
||
<div class="sure-btn" @click="handleSubmit(formInstance)">
|
||
确定
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</el-dialog>
|
||
|
||
<el-dialog :close-on-click-modal="false" v-model="isUploadVisited" width="1558px">
|
||
<div @click="isUploadVisited=false" style="position: absolute;right: 20px;top:10px;cursor: pointer">
|
||
<el-icon size="80" color="#fff">
|
||
<Close/>
|
||
</el-icon>
|
||
</div>
|
||
<el-upload
|
||
style="margin-top:40px"
|
||
drag
|
||
limit="1"
|
||
:action="uploadFileUrl"
|
||
:auto-upload="true"
|
||
:headers="headers"
|
||
:data="uploadData"
|
||
:on-success="handleUploadSuccess"
|
||
:before-upload="beforeUpload"
|
||
>
|
||
<el-icon>
|
||
<upload-filled/>
|
||
</el-icon>
|
||
<div class="el-upload__text">
|
||
拖拽一张图纸到这里 或者 <em>点击上传</em>
|
||
</div>
|
||
<template #tip>
|
||
<div class="el-upload__tip">
|
||
文件限制大小为 16MB
|
||
</div>
|
||
</template>
|
||
</el-upload>
|
||
</el-dialog>
|
||
<div class="pagination">
|
||
<span @click="firstPage" v-if="showFirst">首页</span>
|
||
<el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
|
||
:total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
|
||
@current-change="handleCurrentChange" :hide-on-single-page="true"/>
|
||
<span @click="lastPage" v-if="showFirst">尾页</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
|
||
import {ElMessage, ElMessageBox} from "element-plus";
|
||
import TunnelTitle from "@/components/tunnelTitle/index.vue";
|
||
import {getToken} from '@/utils/auth'
|
||
import {ElLoading} from 'element-plus'
|
||
import { debounce } from 'lodash'
|
||
const router = useRouter()
|
||
const userId = reactive(router.currentRoute.value.params.userId)
|
||
const siteId = reactive(router.currentRoute.value.params.siteId)
|
||
const siteList = ref([])
|
||
const siteIds = ref([])
|
||
const siteNameList = ref([])
|
||
const clickSiteId = ref('')
|
||
const uploadData = ref()
|
||
const baseURL = import.meta.env.VITE_BASE_URL
|
||
const uploadFileUrl = ref(baseURL + '/tunnel/site/upload');
|
||
const headers = reactive({
|
||
authorization: getToken()
|
||
})
|
||
const info = ref({
|
||
tunnelName: '',
|
||
constructionLength: 0,
|
||
totalLength: 0
|
||
})
|
||
const title = ref('新增站点')
|
||
const isVisited = ref(false);
|
||
let isUploadVisited = ref(false);
|
||
const showFirst = ref(false)
|
||
const total = ref(0);
|
||
const showAddIcon = ref(true)
|
||
const pageInfo = reactive({
|
||
pageNum: 1,
|
||
pageSize: 6
|
||
});
|
||
const form = ref({
|
||
address: '',
|
||
siteName: '',
|
||
describe: '',
|
||
isDefault: false
|
||
});
|
||
const formRules = ref({
|
||
siteName: [{required: true, message: '请输入站点名称', trigger: ['blur', 'change']}]
|
||
})
|
||
const formInstance = ref()
|
||
const beforeUpload = () => {
|
||
uploadData.value = {
|
||
siteId: clickSiteId.value
|
||
}
|
||
}
|
||
const handleUploadSuccess = (res) => {
|
||
if (res.code !== 1000) {
|
||
ElMessage.error("上传失败");
|
||
} else {
|
||
ElMessage.success("上传成功");
|
||
}
|
||
};
|
||
|
||
const handleGoHome = () => {
|
||
router.push('/' + 'siteToHome/' + siteId)
|
||
}
|
||
const getList = () => {
|
||
const loading = ElLoading.service({
|
||
lock: true,
|
||
text: '正在加载系统资源...',
|
||
background: 'rgba(0, 0, 0, 0.7)',
|
||
customClass: 'allLoading'
|
||
})
|
||
getSiteList({
|
||
userId: userId,
|
||
...pageInfo
|
||
}).then((res) => {
|
||
if (res.code === 1000) {
|
||
total.value = res.data.total;
|
||
if (total.value == 0) {
|
||
|
||
} else {
|
||
showAddIcon.value = total.value % 6 !== 0;
|
||
}
|
||
showFirst.value = total.value / pageInfo.pageSize > 1;
|
||
res.data.rows.map(item => {
|
||
if (item.tunnelList === null || item.tunnelList.length === 0) {
|
||
item.info = info.value
|
||
} else {
|
||
item.info = item.tunnelList[0]
|
||
}
|
||
item.checked = false
|
||
})
|
||
siteList.value = res.data.rows;
|
||
}
|
||
loading.close()
|
||
});
|
||
}
|
||
getList()
|
||
const handleClickSite = (type) => {
|
||
if (type.checked) {
|
||
siteIds.value.push(type.siteId)
|
||
siteNameList.value.push(type.siteName)
|
||
} else {
|
||
siteIds.value.map((item, index) => {
|
||
if (item === type.siteId) {
|
||
siteIds.value.splice(index, 1)
|
||
}
|
||
})
|
||
siteNameList.value.map((item, index) => {
|
||
if (item === type.siteName) {
|
||
siteNameList.value.splice(index, 1)
|
||
}
|
||
})
|
||
}
|
||
}
|
||
|
||
const goToAddTunnel = (siteId) => {
|
||
router.push('/tunnel/' + siteId + '/bySite' + '/' + userId)
|
||
}
|
||
|
||
//重置from表单
|
||
const restFrom = () => {
|
||
form.value = {
|
||
address: '',
|
||
siteName: '',
|
||
describe: '',
|
||
isDefault: false
|
||
}
|
||
}
|
||
const handleEdit = (item) => {
|
||
title.value = '编辑站点'
|
||
restFrom()
|
||
const loading = ElLoading.service({
|
||
lock: true,
|
||
text: '正在加载系统资源...',
|
||
background: 'rgba(0, 0, 0, 0.7)',
|
||
customClass: 'allLoading'
|
||
})
|
||
getSiteDetail(item.siteId).then((res) => {
|
||
form.value = res.data;
|
||
form.value = item;
|
||
isVisited.value = true
|
||
loading.close()
|
||
});
|
||
}
|
||
const handleUpload = (siteId) => {
|
||
isUploadVisited.value = true
|
||
clickSiteId.value = siteId
|
||
}
|
||
const handleAdd = () => {
|
||
restFrom()
|
||
title.value = '新增站点'
|
||
isVisited.value = true
|
||
nextTick(() => {
|
||
// 清空校验
|
||
formInstance.value.clearValidate()
|
||
})
|
||
}
|
||
const handleSubmit =debounce((instance) => {
|
||
if (!instance) return
|
||
instance.validate(valid => {
|
||
if (!valid) return
|
||
if (title.value === '编辑站点') {
|
||
editSite(form.value).then((res) => {
|
||
if (res.code === 1000) {
|
||
isVisited.value = false
|
||
getList()
|
||
ElMessage.success(res.msg)
|
||
} else {
|
||
ElMessage.warning(res.msg)
|
||
}
|
||
});
|
||
} else {
|
||
addSite(form.value).then((res) => {
|
||
if (res.code === 1000) {
|
||
isVisited.value = false
|
||
getList()
|
||
ElMessage.success(res.msg)
|
||
} else {
|
||
ElMessage.warning(res.msg)
|
||
}
|
||
});
|
||
}
|
||
})
|
||
},100)
|
||
const handleChooseAll = debounce(() => {
|
||
siteList.value.map(item => {
|
||
item.checked = !item.checked
|
||
if (item.checked && !item.isDefault) {
|
||
siteIds.value.push(item.siteId)
|
||
} else if (!item.checked && !item.isDefault) {
|
||
siteIds.value.map((newItem, index) => {
|
||
if (newItem === item.siteId) {
|
||
siteIds.value.splice(index, 1)
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},100)
|
||
const handleMoreDelete =debounce(() => {
|
||
if (siteIds.value.length === 0) {
|
||
ElMessage.warning('请先选择站点进行删除')
|
||
} else {
|
||
let flag = false
|
||
siteList.value.map(item => {
|
||
siteIds.value.map(siteItem => {
|
||
if (item.siteId === siteItem) {
|
||
if (item.tunnelList.length !== 0) {
|
||
ElMessage.error('该站点下存在隧道，不能删除!')
|
||
flag = false
|
||
} else {
|
||
flag = true
|
||
}
|
||
}
|
||
})
|
||
})
|
||
if (flag) {
|
||
ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
customClass: 'delBox'
|
||
}).then(() => {
|
||
deleteSite(siteIds.value).then(res => {
|
||
if (res.code === 1000) {
|
||
ElMessage.success(res.msg)
|
||
getList()
|
||
siteIds.value = []
|
||
siteNameList.value = []
|
||
} else {
|
||
ElMessage.error(res.msg)
|
||
}
|
||
})
|
||
})
|
||
}
|
||
}
|
||
},100)
|
||
const firstPage = () => {
|
||
pageInfo.pageNum = 1
|
||
getList()
|
||
}
|
||
const lastPage = () => {
|
||
pageInfo.pageNum = total.value / pageInfo.pageSize
|
||
getList()
|
||
}
|
||
//点击页码进行分页功能
|
||
const handleCurrentChange = (val) => {
|
||
pageInfo.pageNum = val
|
||
getList()
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
:deep(.el-upload__tip) {
|
||
font-size: 40px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
:deep(.el-upload-dragger) {
|
||
background-color: transparent;
|
||
box-shadow: none;
|
||
border: 1px solid #05FEFF;
|
||
|
||
&:hover {
|
||
border: 1px solid #05FEFF;
|
||
}
|
||
|
||
.el-icon {
|
||
font-size: 250px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.el-upload__text {
|
||
font-size: 50px;
|
||
color: #FFFFFF;
|
||
|
||
em {
|
||
color: #05FEFF;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-upload-list) {
|
||
.el-upload-list__item {
|
||
&:hover {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.el-icon {
|
||
font-size: 61px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
.el-icon--close-tip {
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
.el-upload-list__item-name {
|
||
font-size: 61px !important;
|
||
color: #FFFFFF;
|
||
|
||
}
|
||
}
|
||
|
||
:deep(.el-form-item__error) {
|
||
font-size: 35px;
|
||
}
|
||
|
||
:deep(.el-radio-group) {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
:deep(.el-radio__label) {
|
||
color: #FFFFFF;
|
||
font-size: 38px;
|
||
}
|
||
|
||
:deep(.el-radio__inner) {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 25px;
|
||
border: 4px solid #05FEFF;
|
||
background-color: transparent;
|
||
}
|
||
|
||
:deep(.el-radio__input.is-checked+.el-radio__label) {
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
:deep(.el-radio__input.is-checked .el-radio__inner ) {
|
||
background: #064B66;
|
||
border-color: #05FEFF !important;
|
||
}
|
||
|
||
:deep(.el-radio__inner::after) {
|
||
width: 18px;
|
||
height: 18px;
|
||
background: #05FEFF;
|
||
}
|
||
|
||
.clickColor {
|
||
position: absolute;
|
||
top: 7px;
|
||
left: 6.5px;
|
||
width: 25px;
|
||
height: 25px;
|
||
background-color: #05FEFF;
|
||
border-radius: 25px;
|
||
}
|
||
|
||
.siteId {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 0 0 60px 0;
|
||
font-size: 50px;
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
:deep(.el-dialog) {
|
||
border: 2px solid #05FEFF;
|
||
background: #0D6578;
|
||
border-radius: 20px;
|
||
padding: 30px 40px;
|
||
box-sizing: border-box;
|
||
margin: 458px auto 0 auto;
|
||
|
||
.el-dialog__header {
|
||
padding: 0;
|
||
display: none;
|
||
}
|
||
}
|
||
|
||
:deep(.el-form-item) {
|
||
margin-top: 40px;
|
||
}
|
||
|
||
:deep(.el-form-item__label) {
|
||
font-size: 38px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #FFFFFF;
|
||
margin-right: 12px;
|
||
line-height: 50px;
|
||
}
|
||
|
||
:deep(.el-input) {
|
||
height: 75px;
|
||
|
||
.el-input__wrapper {
|
||
background-color: transparent;
|
||
border: 1px solid #08B7B8;
|
||
|
||
.el-input__inner {
|
||
height: auto;
|
||
color: #fff;
|
||
font-size: 38px;
|
||
}
|
||
}
|
||
}
|
||
|
||
:deep(.el-textarea__inner) {
|
||
background-color: transparent;
|
||
border: 1px solid #08B7B8;
|
||
color: #fff;
|
||
font-size: 38px;
|
||
}
|
||
|
||
|
||
.site-bgc {
|
||
background-color: #072348;
|
||
padding: 85px 0 0 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background-image: url('@/assets/images/site/zdgl_dbj.png');
|
||
|
||
.box-top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
.back-tunnel {
|
||
cursor: pointer;
|
||
margin: 0 0 0 70px;
|
||
display: flex;
|
||
align-items: center;
|
||
width: 178px;
|
||
height: 70px;
|
||
line-height: 70px;
|
||
border-radius: 11px;
|
||
border: 2px solid #08B7B8;
|
||
font-size: 38px;
|
||
color: #FFFFFF;
|
||
|
||
.back-icon {
|
||
margin-right: 20px;
|
||
margin-left: 23px;
|
||
width: 33px;
|
||
height: 33px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||
}
|
||
}
|
||
|
||
.all-del-btn {
|
||
display: flex;
|
||
|
||
.del-btn {
|
||
width: 168px;
|
||
height: 60px;
|
||
background: #08B7B8;
|
||
border-radius: 11px;
|
||
}
|
||
|
||
.all-btn {
|
||
cursor: pointer;
|
||
padding-left: 53px;
|
||
width: 178px;
|
||
height: 70px;
|
||
line-height: 70px;
|
||
border-radius: 11px;
|
||
border: 2px solid #08B7B8;
|
||
color: #FFFFFF;
|
||
font-size: 38px;
|
||
|
||
&:last-child {
|
||
margin-left: 40px;
|
||
margin-right: 70px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.box-content {
|
||
height: 1850px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding-left: 100px;
|
||
padding-right: 100px;
|
||
//justify-content: space-between;
|
||
box-sizing: border-box;
|
||
overflow: hidden;
|
||
|
||
.add-box {
|
||
cursor: pointer;
|
||
font-weight: bold;
|
||
color: #60DDDE;
|
||
font-size: 38px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
|
||
.add-icon {
|
||
margin-top: 160px;
|
||
margin-bottom: 107px;
|
||
width: 320px;
|
||
height: 320px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
|
||
}
|
||
}
|
||
|
||
.site-box {
|
||
margin-top: 122px;
|
||
margin-right: 32px;
|
||
padding: 40px 50px;
|
||
width: 1250px;
|
||
height: 750px;
|
||
background-image: url('@/assets/images/site/zdgl_bj.png');
|
||
//box-sizing: border-box;
|
||
position: relative;
|
||
|
||
&:nth-child(3n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.top {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
font-size: 45px;
|
||
font-weight: bold;
|
||
color: #FFFFFF;
|
||
line-height: 42px;
|
||
|
||
|
||
> span:last-child {
|
||
padding: 1px 8px;
|
||
font-size: 32px;
|
||
border: 2px solid #05FEFF;
|
||
border-radius: 10px;
|
||
position: relative;
|
||
}
|
||
}
|
||
|
||
.box-center {
|
||
display: flex;
|
||
|
||
.left-img {
|
||
margin-top: 50px;
|
||
margin-right: 36px;
|
||
width: 500px;
|
||
height: 370px;
|
||
background-image: url('@/assets/images/site/zdgl_zd.png');
|
||
}
|
||
|
||
.right-tunnel {
|
||
position: relative;
|
||
|
||
> div:first-child {
|
||
font-size: 38px;
|
||
font-family: MicrosoftYaHei;
|
||
color: #FFFFFF;
|
||
line-height: 42px;
|
||
}
|
||
|
||
> div:nth-child(2) {
|
||
display: flex;
|
||
margin-top: 29px;
|
||
|
||
.tunnel {
|
||
cursor: pointer;
|
||
margin-right: 20px;
|
||
width: 320px;
|
||
height: 350px;
|
||
background: #3FBED1;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
color: #FFFFFF;
|
||
text-align: center;
|
||
|
||
> div:first-child {
|
||
width: 240px;
|
||
//height: 37px;
|
||
font-size: 32px;
|
||
margin-top: 20px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
> div:nth-child(3) {
|
||
width: 310px;
|
||
margin-bottom: 18px;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
}
|
||
|
||
> div:nth-child(3), > div:nth-child(4) {
|
||
font-size: 32px;
|
||
}
|
||
|
||
.tunnel-icon {
|
||
width: 82px;
|
||
height: 84px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_sd.png');
|
||
margin: 30px 0 30px 0;
|
||
}
|
||
}
|
||
|
||
.tunnel-add {
|
||
cursor: pointer;
|
||
width: 280px;
|
||
height: 350px;
|
||
background: #1891A3;
|
||
border-radius: 16px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.add-icon {
|
||
cursor: pointer;
|
||
width: 122px;
|
||
height: 122px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_tjz.png');
|
||
}
|
||
}
|
||
}
|
||
|
||
.more {
|
||
margin-top: 20px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
position: absolute;
|
||
right: 0;
|
||
font-weight: bold;
|
||
color: #35C5CC;
|
||
font-size: 38px;
|
||
|
||
.icon {
|
||
margin-left: 19px;
|
||
transform: rotate(180deg);
|
||
width: 33px;
|
||
height: 33px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_fh.png');
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.edit-btn {
|
||
margin-top: 117px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 40px;
|
||
color: #60DDDE;
|
||
margin-left: 492px;
|
||
|
||
> div:first-child {
|
||
display: flex;
|
||
align-items: center;
|
||
cursor: pointer;
|
||
|
||
.edit-icon {
|
||
width: 42px;
|
||
height: 44px;
|
||
background-image: url('@/assets/images/site/zdgl_icon_bj.png');
|
||
margin-right: 16px;
|
||
}
|
||
}
|
||
|
||
> div:last-child {
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pagination {
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
bottom: 80px;
|
||
display: flex;
|
||
align-items: center;
|
||
color: #60DDDE;
|
||
font-size: 38px;
|
||
font-weight: bold;
|
||
|
||
:deep(.el-pagination.is-background ) {
|
||
.btn-next, .btn-prev {
|
||
background-color: transparent;
|
||
}
|
||
|
||
.el-pager {
|
||
li {
|
||
margin: 0 0 0 40px;
|
||
}
|
||
|
||
li.is-active {
|
||
background-color: #60DDDE;
|
||
}
|
||
}
|
||
}
|
||
|
||
> span:first-child {
|
||
cursor: pointer;
|
||
margin-right: 60px;
|
||
}
|
||
|
||
> span:last-child {
|
||
cursor: pointer;
|
||
margin-left: 71px;
|
||
}
|
||
|
||
:deep(.btn-prev) {
|
||
background-color: transparent;
|
||
font-size: 38px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #60DDDE;
|
||
margin-right: 20px;
|
||
}
|
||
|
||
:deep(.btn-next) {
|
||
background-color: transparent;
|
||
font-size: 38px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #60DDDE;
|
||
margin-left: 30px;
|
||
}
|
||
|
||
:deep(.el-pager li.is-active ) {
|
||
width: 70px;
|
||
height: 70px;
|
||
background: #60DDDE;
|
||
border-radius: 50%;
|
||
color: #071F40;
|
||
font-size: 38px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
}
|
||
|
||
:deep(.el-pager li) {
|
||
margin-left: 40px;
|
||
}
|
||
|
||
:deep(.el-pager li:not(.is-active) ) {
|
||
width: 70px;
|
||
height: 70px;
|
||
border: 1px solid #60DDDE;
|
||
border-radius: 50%;
|
||
background-color: transparent;
|
||
font-size: 38px;
|
||
font-family: MicrosoftYaHei, MicrosoftYaHei;
|
||
font-weight: bold;
|
||
color: #60DDDE;
|
||
}
|
||
}
|
||
}
|
||
|
||
</style>
|