<template>
<div class="gateway">
<!-- 顶部 -->
<div class="content-top flex flex-justcontent-spacebetween">
<div class="header-left flex">
<!-- <div class="log-box flex">
<img :src="getBusinesPatrolImageUrl('logo', 'gateway')" alt="" />
<div class="header-line"></div>
</div> -->
<div class="logo-text">智慧海绵系统</div>
</div>
<div class="header-right flex flex-align-center">
<!-- <router-link :to="firstPathStore.path"> -->
<router-link to="/system/user">
<img
:src="getBusinesPatrolImageUrl('base_icon', 'gateway')"
alt=""
style="width: 25px; height: 25px; margin-right: 15px"
/>
</router-link>
<!-- <img :src="getBusinesPatrolImageUrl('top_icon', 'gateway')" alt="" @click="change" v-if="showFlag == 1" /> -->
<!-- <img :src="getBusinesPatrolImageUrl('top_icon2', 'gateway')" alt="" @click="change" v-else /> -->
<img :src="getBusinesPatrolImageUrl('exit_btn', 'gateway')" alt="" @click="exit" style="margin-left: 15px" />
</div>
</div>
<!-- 内容区域 -->
<!-- 产品/经典案例列表 -->
<!-- 切换到产品list页面 -->
<div class="cp-list flex flex-v flex-align-center" v-if="showFlag == 2">
<!-- <div class="person-info flex flex-justcontent-spacebetween box-shadow margin-bottom">
<div class="person flex flex-align-center">
<img :src="userStore.userInfo.avatar" alt="" />
<div class="hy-box margin-left">
<div class="name">{{ userStore.userInfo.nickName }}，你好！祝你开心每一天。</div>
<div class="time">登录于:{{ parseTime(new Date()) }}</div>
</div>
</div>
<div class="line"></div>
<div class="search-box flex flex-v flex-align-center flex-justcontent-center">
<div class="inpit-box">
<input type="text" placeholder="请输入关键词搜索" class="search-input" />
<img :src="getBusinesPatrolImageUrl('search_btn', 'gateway')" alt="" class="position-absolute" />
</div>
<div class="ls-search flex">
<span class="margin-left margin-right">历史搜索</span>
<div class="ls-item" v-for="(item, index) in seachLsList" :key="index">
{{ item.name }}
</div>
</div>
</div>
</div> -->
<div class="cd-list flex flex-wrap">
<div
class="list-li box-shadow flex flex-v flex-align-center flex-justcontent-center"
v-for="(item, index) in cpList"
:key="index"
:style="{
background: item.disabled
? 'url(' + getBusinesPatrolImageUrl('card_disabled', 'gateway') + ') no-repeat'
: 'url(' + getBusinesPatrolImageUrl(item.bgImg, 'gateway') + ') no-repeat',
backgroundSize: '100% 100%',
cursor: item.disabled ? 'not-allowed' : 'pointer',
}"
@click="openUrl(item)"
>
<img :src="getBusinesPatrolImageUrl(item.icon, 'gateway')" alt="" />
<div
class="name flex flex-align-center flex-justcontent-center"
:style="{
background: item.disabled ? '#A2A2A2' : item.textBg,
}"
>
{{ item.name }}
</div>
</div>
</div>
<div class="bottom-bg" v-if="showFlag == 2"></div>
</div>
<!-- 详情 -->
<el-dialog title="新闻详情" v-model="detailOpen" width="900px" append-to-body class="dialog-detail-box scrollbar">
<newsDetail :detailOpen="detailOpen" :dialogFormDetail="dialogFormDetail"></newsDetail>
<template #footer>
<div class="dialog-footer">
<el-button @click="detailOpen = false">关 闭</el-button>
</div>
</template>
</el-dialog>
</div>
</template>
<script setup name="gateway">
import { listNews, getNews } from '@/api/system/newsManage';
import { listCase, loginPlatformJumpAddRedis } from '@/api/system/caseManagement';
import { fileList } from '@/api/system/file.js';
import { getConfigKey } from '@/api/system/config';
import { getToken } from '@/utils/auth';
import newsDetail from '@/views/system/newsManage/newsDetail.vue';
//引入轮播插件
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Autoplay, Navigation } from 'swiper';
import 'swiper/css';
import 'swiper/css/navigation';
// import 'swiper/css/autoplay'
// // 初始化轮播图
// const swiperOption = ref({
// loop: true,
// autoplay: {
// delay: 3000,
// disableOnInteraction: false,//false时用户操作后，重新轮播
// reverseDirection: false,//反向轮播
// },
// slidesPerView: 5,
// spaceBetween: 25,
// noSwiping: true,
// initialSlide: 1,
// centeredSlides: true,
// slidesPerView: 2,
// spaceBetween: '-20%',
// effect: 'coverflow',
// observer: true,
// observeParents: true,
// coverflowEffect: {
// rotate: 0,
// stretch: 0,
// depth: 100,
// modifier: 4,
// slideShadows: false
// },
// })
import { ElMessageBox } from 'element-plus';
import Cookies from 'js-cookie';
import settingFirstPathStore from '@/store/modules/settingFirstPath';
const firstPath = settingFirstPathStore();
import useUserStore from '@/store/modules/user';
const userStore = useUserStore();
const router = useRouter();
const videoSrc = ref(null);
const inputPlatformName = ref(''); //项目名称搜索
const currentCategory = ref(''); //当前项目类型
// 新闻数据
const newsList = ref([]);
const projectList = ref([
{
img: 'csly',
lableCH: '城市流域',
lableEN: 'Urban watershed',
dict: 'category_watershed',
children: [
{
name: '监测及数据服务',
icon: 'jc_icon',
bgImg: 'card_b',
nameColor: '#009AE2',
url: 'http://192.168.1.39:8132/monitor',
},
// {
// name: '河湖监督与评价',
// icon: 'hh_icon',
// bgImg: 'card_o',
// nameColor: '#F98A3B',
// },
// {
// name: '城市应急防汛',
// icon: 'csfx_icon',
// bgImg: 'card_y',
// nameColor: '#FFC11D ',
// },
{
name: '数字孪生',
icon: 'szls_icon',
bgImg: 'card_g',
nameColor: '#26D493 ',
},
{
name: '统一scada对接',
icon: 'scada_icon',
bgImg: 'card_p',
nameColor: '#682FDC ',
url: 'https://server1.wh-nf.cn:8132/scada',
},
{
name: '水生态管理分析',
icon: 'sst_icon',
bgImg: 'card_b',
nameColor: '#009AE2 ',
},
],
},
{
img: 'csqy',
lableCH: '城市区域',
lableEN: 'Urban area',
dict: 'category_areas',
children: [
{
name: '设施管理与运行分析',
icon: 'ssgl_icon',
bgImg: 'card_b',
nameColor: '#009AE2',
},
{
name: '排水管网分析',
icon: 'psgw_icon',
bgImg: 'card_o',
nameColor: '#F98A3B',
},
{
name: '运维巡查',
icon: 'ywxc_icon',
bgImg: 'card_y',
nameColor: '#FFC11D',
url: 'https://server1.wh-nf.cn:8132/patrol',
},
{
name: '排水监管与分析',
icon: 'psjg_icon',
bgImg: 'card_g',
nameColor: '#26D493 ',
url: 'https://server1.wh-nf.cn:8132/drainage',
},
{
name: '水文化管理',
icon: 'swhgl_icon',
bgImg: 'card_p',
nameColor: '#682FDC ',
},
{
name: '综合管理',
icon: 'jc_icon',
bgImg: 'card_b',
nameColor: '#009AE2',
},
{
name: '协同办公',
icon: 'xtbg_icon',
bgImg: 'card_o',
nameColor: '#F98A3B',
},
],
},
{
img: 'cssmx',
lableCH: '城市水模型',
lableEN: 'Urban water model',
dict: 'category_model',
children: [
{
name: '河道洪水预报',
icon: 'hdhs_icon',
bgImg: 'card_b',
nameColor: '#009AE2',
},
{
name: '多目标优化调度',
icon: 'dmbyh_icon',
bgImg: 'card_o',
nameColor: '#F98A3B',
},
{
name: '城市内涝预报',
icon: 'csnl_icon',
bgImg: 'card_y',
nameColor: '#FFC11D ',
},
{
name: '海绵城市绩效',
icon: 'hmjx_icon',
bgImg: 'card_g',
nameColor: '#26D493 ',
},
{
name: '污水系统水量调配',
icon: 'wsxt_icon',
bgImg: 'card_p',
nameColor: '#682FDC ',
},
],
},
{
img: 'zhhm',
lableCH: '智慧海绵',
lableEN: 'Wisdom sponge',
dict: 'category_wisdom',
children: [
{
name: '工程管理',
icon: 'gcgl_icon',
bgImg: 'card_b',
nameColor: '#009AE2',
},
{
name: '监测评价',
icon: 'jcpj_icon',
bgImg: 'card_o',
nameColor: '#F98A3B',
},
{
name: '建设指导',
icon: 'jszd_icon',
bgImg: 'card_y',
nameColor: '#FFC11D ',
},
{
name: '资料管理',
icon: 'zlgl_icon',
bgImg: 'card_g',
nameColor: '#26D493 ',
},
],
},
{
img: 'other',
lableCH: '其他',
lableEN: 'OTHER',
dict: 'category_other',
children: [
{
name: '工程管理',
icon: 'gcgl_icon',
bgImg: 'card_b',
nameColor: '#009AE2',
},
{
name: '监测评价',
icon: 'jcpj_icon',
bgImg: 'card_o',
nameColor: '#F98A3B',
},
{
name: '建设指导',
icon: 'jszd_icon',
bgImg: 'card_y',
nameColor: '#FFC11D ',
},
{
name: '资料管理',
icon: 'zlgl_icon',
bgImg: 'card_g',
nameColor: '#26D493 ',
},
],
},
]);
const productTitle = ref('经典案例');
const productTitleIcon = ref('jdal_icon');
const seachPlatformLsList = ref([
{
name: '数字化',
},
{
name: '智慧',
},
{
name: '监测',
},
]); //经典案例历史搜索
const seachLsList = ref([
{
name: '监测及数据服务',
},
{
name: '数字孪生',
},
{
name: '城市应急防汛',
},
]);
const detailOpen = ref(false);
const dialogFormDetail = ref({});
const current = ref(null);
const proList = ref([]);
const showFlag = ref(2);
const cpList = ref([
{
icon: 'jc_icon',
bgImg: 'card_b_2',
name: '监测及数据服务',
textBg: '#009AE2',
disabled: false,
url: 'http://192.168.1.39:8132/monitor',
},
// {
// icon: 'hh_icon',
// bgImg: 'card_o_2',
// name: '河湖监督与评价',
// textBg: '#F98A3B',
// disabled: false,
// },
// {
// icon: 'csfx_icon',
// bgImg: 'card_y_2',
// name: '城市应急防汛',
// textBg: '#FFC11D',
// disabled: false,
// },
// {
// icon: 'szls_icon',
// bgImg: 'card_g_2',
// name: '数字孪生',
// textBg: '#26D493',
// disabled: false,
// },
// {
// icon: 'scada_icon',
// bgImg: 'card_p_2',
// name: '统一scada对接',
// textBg: '#682FDC',
// disabled: false,
// },
// {
// icon: 'sst_icon',
// bgImg: 'card_b_2',
// name: '水生态管理分析',
// textBg: '#009AE2',
// disabled: false,
// },
// {
// icon: 'hdhs_icon',
// bgImg: 'card_o_2',
// name: '河道洪水预报',
// textBg: '#F98A3B',
// disabled: false,
// },
// {
// icon: 'ssgl_icon',
// bgImg: 'card_p_2',
// name: '设施管理分析',
// textBg: '#682FDC',
// disabled: false,
// },
// {
// icon: 'psgw_icon',
// bgImg: 'card_b_2',
// name: '排水管网分析',
// textBg: '#009AE2',
// disabled: false,
// },
// {
// icon: 'ywxc_icon',
// bgImg: 'card_g_2',
// name: '运维巡查',
// textBg: '#26D493',
// disabled: false,
// url: 'https://server1.wh-nf.cn:8132/patrol',
// },
// {
// icon: 'psjg_icon',
// bgImg: 'card_o_2',
// name: '排水监管与分析',
// textBg: '#F98A3B',
// disabled: false,
// url: 'https://server1.wh-nf.cn:8132/drainage',
// },
// {
// icon: 'wsxt_icon',
// bgImg: 'card_o_2',
// name: '污水系统水量调配',
// textBg: '#F98A3B',
// disabled: false,
// },
// {
// icon: 'csnl_icon',
// bgImg: 'card_y_2',
// name: '城市内涝预报',
// textBg: '#FFC11D',
// disabled: false,
// },
// {
// icon: 'dmbyh_icon',
// bgImg: 'card_p_2',
// name: '多目标优化调度',
// textBg: '#682FDC',
// disabled: false,
// },
{
icon: 'gcgl_icon',
bgImg: 'card_b_2',
name: '工程管理',
textBg: '#009AE2',
disabled: false,
url: 'http://192.168.1.39:8132/project',
},
// {
// icon: 'jcpj_icon',
// bgImg: 'card_g_2',
// name: '监测评价',
// textBg: '#26D493',
// disabled: false,
// },
{
icon: 'jszd_icon',
bgImg: 'card_b_2',
name: '建设指导',
textBg: '#009AE2',
disabled: false,
url: 'http://192.168.1.39:8132/sponge',
},
// {
// icon: 'zlgl_icon',
// bgImg: 'card_o_2',
// name: '资料管理',
// textBg: '#F98A3B',
// disabled: false,
// },
// {
// icon: 'xtbg_icon',
// bgImg: 'card_b_2',
// name: '协同办公',
// textBg: '#009AE2',
// disabled: false,
// },
// {
// icon: 'swhgl_icon',
// bgImg: 'card_b_2',
// name: '水文化管理',
// textBg: '#009AE2',
// disabled: false,
// },
{
icon: 'hmjx_icon',
bgImg: 'card_y_2',
name: '海绵绩效考核',
textBg: '#FFC11D',
disabled: false,
url: 'http://192.168.1.39:8132/performance/',
},
{
icon: 'dmbyh_icon',
bgImg: 'card_p_2',
name: '海绵大屏',
textBg: '#682FDC',
disabled: false,
url: 'http://192.168.1.39:8132/bigSgreen/',
},
]);
// 选择轮播类型
const choose = (item, index) => {
console.log(index);
inputPlatformName.value = '';
if (current.value == index) {
console.log(111);
current.value = null;
currentCategory.value = '';
getCaseList();
return;
}
current.value = index;
currentCategory.value = item.dict;
getCaseList(item.dict);
return;
if (current.value == index) {
console.log(111);
current.value = null;
productTitle.value = '经典案例';
productTitleIcon.value = 'jdal_icon';
return;
}
current.value = index;
productTitle.value = '产品列表';
productTitleIcon.value = 'cplb_icon';
};
// 切换
// const change = () => {
// showFlag.value = showFlag.value == 1 ? 2 : 1;
// Cookies.set('showFlag', showFlag.value);
// };
// 点击视频播放
const playVideo = () => {
getVideo();
};
// 获取视频
const getVideo = () => {
getConfigKey('nf_publicize_video').then(res => {
if (res?.code == 200) {
videoSrc.value = res.data;
}
});
};
//获取新闻列表
// const getListNews = () => {
// listNews().then(res => {
// newsList.value = res.data && res.data.filter(item => item.isShow == 1);
// console.log('newsList.value', newsList.value);
// });
// };
//打开详情弹框
const openNewsDetail = e => {
let item = JSON.parse(e.target.dataset.obj);
getNews(item.id).then(response => {
response.data.isTop = response.data.isTop.toString();
response.data.isShow = response.data.isShow.toString();
dialogFormDetail.value = response.data;
detailOpen.value = true;
getFileList(item);
});
};
//获取图片
function getFileList(row) {
fileList({ refId: row.id, refType: 'news' }).then(res => {
dialogFormDetail.value.picture = res.data;
});
}
//获取经典案例
const getCaseList = category => {
listCase({ platformName: inputPlatformName.value, category: category }).then(res => {
proList.value = res.data && res.data.filter(item => item.isShow == 1);
});
};
//经典案例跳转
const openNewWindow = item => {
let windowWidth = screen.width * 0.98;
let left = screen.width * 0.01;
let windowHeight = screen.height * 0.98;
let top = screen.height * 0.01;
loginPlatformJumpAddRedis().then(res => {
if (location.host == 'server1.wh-nf.cn:8132') {
window.open(
item.platformLinkAddress + '?userToken=' + getToken(),
'',
`height=${windowHeight},width=${windowWidth},left=${left},top=${top},toolbar =no, menubar=no, scrollbars=no, resizeable=no, location=no, status=no`
);
} else {
var newWin = window.open(
'',
'newwindow',
`height=${windowHeight},width=${windowWidth},left=${left},top=${top},toolbar =no, menubar=no, scrollbars=no, resizeable=no, location=no, status=no`
);
newWin.document.write(
`<body scroll="no" style="margin: 0px;padding: 0px;border:0px;overflow:hidden;"><iframe style="margin: 0px;padding: 0px;border: 0px;width:100%;height:100%" src="${
item.platformLinkAddress
}?userToken=${getToken()}"></iframe></body>`
);
}
});
};
//搜索经典案例
const searchCase = () => {
if (seachPlatformLsList.value.length > 3) {
seachPlatformLsList.value.splice(0, 1);
}
seachPlatformLsList.value.unshift({ name: inputPlatformName.value });
Cookies.set('seachPlatformLsList', JSON.stringify(seachPlatformLsList.value));
getSearchCase();
};
//历史搜索
const searchHisCase = item => {
inputPlatformName.value = item.name;
getSearchCase();
};
//清空搜索
const clearPlatformName = () => {
inputPlatformName.value = '';
getSearchCase();
};
const getSearchCase = () => {
current.value = null;
getCaseList('');
};
// 退出当前页面
const exit = () => {
ElMessageBox.confirm('确定注销并退出系统吗？', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
})
.then(() => {
userStore.logOut().then(() => {
location.href = '/';
});
})
.catch(() => {});
};
//路由跳转
const openUrl = item => {
if (item.url) {
window.open(item.url, '_self');
//router.push(item.url);
}
};
//新闻列表
// getListNews();
//经典案列
getCaseList();
onMounted(() => {
// if (Cookies.get('showFlag') != undefined) {
// showFlag.value = Number(Cookies.get('showFlag'));
// }
if (Cookies.get('seachPlatformLsList') != undefined) {
seachPlatformLsList.value = JSON.parse(Cookies.get('seachPlatformLsList'));
}
});
</script>
<style lang="scss" scoped>
.gateway {
height: 100vh;
background: url('/src/assets/images/businesPatrol/gateway/bg_img.png') no-repeat center;
background-size: 100% 100%;
overflow: auto;
.box-shadow {
box-shadow: 0px 2px 12px 0px rgba(28, 52, 92, 0.5);
border-radius: 10px;
}
.height280 {
height: 280px;
}
.margin-left {
margin-left: 20px;
}
.margin-right {
margin-right: 20px;
}
.margin-bottom {
margin-bottom: 20px;
}
.bg-color {
background: #edfaff;
}
.border-radius {
border-radius: 6px;
}
.position-absolute {
position: absolute;
top: 0;
left: 0;
z-index: 2;
}
.position-absolute-CircleCloseFilled {
position: absolute;
top: 50%;
right: 50px;
z-index: 2;
margin-top: -8px;
cursor: pointer;
}
.title {
height: 50px;
.title-left {
width: 150px;
height: 100%;
background: url('/src/assets/images/businesPatrol/gateway/title_small_bg.png') no-repeat center;
background-size: 100% 100%;
img {
margin: 11px 16px;
width: 18px;
height: 18px;
}
span {
margin-top: 7px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
}
}
.title-right {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #38a3fd;
}
}
.person-info {
height: 106px;
background: url('/src/assets/images/businesPatrol/gateway/person_bg.png') no-repeat center;
background-size: 100% 100%;
padding: 0 40px;
box-sizing: border-box;
.person {
img {
width: 80px;
height: 80px;
border-radius: 50%;
}
.hy-box {
.name {
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #000046;
}
.time {
margin-top: 10px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #71859f;
}
}
}
}
.line {
margin-top: 30px;
width: 1px;
height: 40px;
background: #417af7;
}
.search-box {
.inpit-box {
position: relative;
.search-input {
width: 420px;
height: 40px;
background: #beddff;
border: 1px solid #397dff;
border-radius: 20px;
padding-left: 20px;
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #71859f;
}
img {
left: 380px;
top: 10px;
cursor: pointer;
}
}
.ls-search {
line-height: 40px;
span {
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #000046;
}
.ls-item {
margin-left: 10px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 400;
color: #397dff;
cursor: pointer;
}
}
}
.content-top {
height: 74px;
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
.header-left {
width: 1150px;
height: 100%;
background: url('/src/assets/images/businesPatrol/gateway/header_bg.png') no-repeat center;
background-size: 100% 100%;
// opacity: 0.5;
.log-box {
width: 180px;
height: 100%;
img {
margin: 12px 30px;
width: 120px;
height: 35px;
}
.header-line {
margin-top: 31px;
width: 1px;
height: 20px;
background: #ffffff;
}
}
.logo-text {
margin: 20px 30px;
font-size: 24px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
}
}
.header-right {
height: 100%;
margin-right: 30px;
cursor: pointer;
}
}
.content-center {
margin: 40px 90px 0 90px;
height: calc(100% - 464px);
.center-left {
width: 500px;
.gsfc {
position: relative;
height: calc(50% - 10px);
.video {
height: calc(100% - 35px);
top: 25px;
width: calc(100% - 40px);
z-index: 1;
background: url('/src/assets/images/businesPatrol/gateway/poster.png') no-repeat;
background-size: 100% 100%;
.play-btn {
width: 80px;
height: 80px;
background-color: rgba(255, 255, 255, 0.8);
border-radius: 50%;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -40px;
cursor: pointer;
}
.video-player {
width: 100%;
height: 100%;
object-fit: fill;
}
}
}
.xwdt {
height: calc(50% - 10px);
.new-list {
height: calc(100% - 60px);
background-color: #ffffff;
overflow: hidden;
.list-item {
padding: 0 20px;
height: 49px;
border-bottom: 1px solid #edfaff;
cursor: pointer;
.is-new {
width: 32px;
height: 16px;
line-height: 14px;
text-align: center;
background: #ff3838;
border-radius: 2px;
font-size: 12px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
}
.news {
width: calc(100% - 120px);
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #000046;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.time {
width: 170px;
font-size: 14px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #999999;
}
}
}
}
}
.center-right {
width: calc(100% - 520px);
.project {
height: 455px;
height: calc(100% - 125px);
.project-item {
cursor: pointer;
width: 292px;
box-sizing: border-box;
position: relative;
&:last-child {
margin-right: 0;
}
img {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.nameCN {
position: absolute;
z-index: 13;
bottom: 150px;
font-size: 36px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
}
.nameEN {
position: absolute;
z-index: 13;
bottom: 120px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: 500;
color: #ffffff;
opacity: 0.5;
line-height: 40px;
}
}
}
}
}
.content-bottom {
height: 350px;
background: url('/src/assets/images/businesPatrol/gateway/bottom-bg.png') no-repeat;
background-size: 100% 100%;
padding: 80px 60px 20px 80px;
.title-left {
background: none;
}
.wrapper {
position: relative;
// padding: 0 30px 10px 30px;
}
.product-list {
width: 97%;
.list-item {
width: 324px;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
cursor: pointer;
.icon {
width: 81px;
height: 84px;
}
.name {
margin-top: 10px;
width: 168px;
height: 41px;
background: #009ae2;
border-radius: 21px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
}
.alImg {
width: 100%;
height: 160px;
}
.nameAl {
font-size: 16px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #000046;
line-height: 40px;
padding-left: 20px;
}
}
}
}
.cp-list {
.person-info {
margin-top: 30px;
width: 1220px;
}
.cd-list {
position: absolute;
top: 260px;
left: 20px;
width: 100%;
z-index: 2;
display: flex;
.list-li {
flex: 1;
margin-right: 10px;
margin-bottom: 10px;
margin: 0 60px;
// width: 224px;
height: 240px;
cursor: pointer;
&:nth-child(7n) {
margin-right: 0px;
margin-bottom: 0px;
}
.name {
margin-top: 10px;
width: 168px;
height: 41px;
background: #009ae2;
border-radius: 21px;
font-size: 18px;
font-family: Source Han Sans CN;
font-weight: bold;
color: #ffffff;
}
}
}
}
.bottom-bg {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 359px;
background: url('/src/assets/images/businesPatrol/gateway/bottom-bg.png') no-repeat;
background-size: 100% 100%;
}
input[type='text']:focus {
outline: none;
}
}
</style>
<style lang="scss">
.swiper-slide {
box-shadow: 0px 2px 12px 0px rgba(28, 52, 92, 0.5);
border-radius: 10px;
}
.swiper-button-prev {
left: -30px;
background: url('/src/assets/images/businesPatrol/gateway/Toggl_left_btn.png') no-repeat;
background-size: 100%;
&:after {
content: '';
}
height: 42px;
width: 23px;
}
.swiper-button-next {
right: -30px;
background: url('/src/assets/images/businesPatrol/gateway/Toggle_right_btn.png') no-repeat;
background-size: 100%;
&:after {
content: '';
}
height: 42px;
width: 23px;
}
</style>
