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