1115 lines
26 KiB
Vue
1115 lines
26 KiB
Vue
<template>
|
||
<div class="container">
|
||
<div class="top-box">
|
||
<div class="tab-box">
|
||
<!-- left -->
|
||
<div class="d-s">
|
||
<div class="logo-box"></div>
|
||
<div class="logo-size">
|
||
虚拟仿真实验教学中心
|
||
</div>
|
||
</div>
|
||
<!-- tab -->
|
||
<div class="d-s">
|
||
<div class="x-x" v-for="(item, index) in tablist " :key="index">
|
||
{{ item.name }}
|
||
</div>
|
||
</div>
|
||
<!-- right -->
|
||
<div class="d-s" style="font-size: 20px; color: #fff;">
|
||
<i class="el-icon-search"></i>
|
||
<div style="font-size: 18px; margin-left: 15px; ">搜索</div>
|
||
</div>
|
||
</div>
|
||
<div style="overflow: hidden;position: relative;" class="mySwiper">
|
||
<swiper ref="mySwiper" :options="swiperOptions" style="width: 100%">
|
||
<swiper-slide>
|
||
<img ref="swiperImg" style="width: 100%; height: 100%" src="../assets/gw/banner.png" />
|
||
</swiper-slide>
|
||
<swiper-slide>
|
||
<img ref="swiperImg" style="width: 100%; height: 100%" src="../assets/gw/banner.png" />
|
||
</swiper-slide>
|
||
</swiper>
|
||
</div>
|
||
<!-- 滑动 -->
|
||
<div class="bottom-h">
|
||
<div class="d-s">
|
||
<img src="../assets/gw/sb.png" style="width: 26px; height: 26px; ">
|
||
<div class="fff-size">滑动了解更多</div>
|
||
</div>
|
||
<div class="xian"></div>
|
||
<div class="d-s banner-page">
|
||
<div class="swiper-button-prev"></div>
|
||
<div class="swiper-button-next"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- new -->
|
||
<div class="new-box">
|
||
<div class="new-title">
|
||
新闻资讯
|
||
</div>
|
||
<div class="new-gang"></div>
|
||
<div class="new-container">
|
||
<div class="new-list">
|
||
<div class="list-box" v-for="(item, index) in 4" :key="index">
|
||
<div class="list-bs">
|
||
<img src="../assets/gw/tp.png" style=" ">
|
||
<div class="new-wb">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
|
||
</div>
|
||
<div class="list-bs" style="margin-top: 15px;">
|
||
<div class="icon-title">新闻动态</div>
|
||
<div class="time-">2024-07-20</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="new-banner">
|
||
<swiper ref="mySwiper" :options="swiperOptions2" style="width: 100%">
|
||
<swiper-slide class="banner-box">
|
||
<div>
|
||
<img src="../assets/gw/tp.png" style="">
|
||
<div class="list-bs">
|
||
<div class="banner-title">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
|
||
<div class="banner-size">
|
||
<div style="font-weight: 600;font-size: 40px;">20</div>
|
||
<div>2024-07</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</swiper-slide>
|
||
<swiper-slide class="banner-box">
|
||
<div>
|
||
<img src="../assets/gw/tp.png" style="">
|
||
<div class="list-bs">
|
||
<div class="banner-title">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
|
||
<div class="banner-size">
|
||
<div style="font-weight: 600;font-size: 40px;">20</div>
|
||
<div>2024-07</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</swiper-slide>
|
||
<swiper-slide class="banner-box">
|
||
<div>
|
||
<img src="../assets/gw/tp.png" style="">
|
||
<div class="list-bs">
|
||
<div class="banner-title">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
|
||
<div class="banner-size">
|
||
<div style="font-weight: 600;font-size: 40px;">20</div>
|
||
<div>2024-07</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</swiper-slide>
|
||
|
||
</swiper>
|
||
<div class="swiper-pagination"></div>
|
||
<div style=" width: 156px;height: 42px;position: absolute;bottom: 30px;">
|
||
<img src="../assets/gw/anniu.png" style=" width: 156px;height: 42px">
|
||
</div>
|
||
</div>
|
||
<div class="new-list">
|
||
<div class="list-box" v-for="(item, index) in 4" :key="index">
|
||
<div class="list-bs">
|
||
<img src="../assets/gw/tp.png" style="width: 125px; height: 70px ">
|
||
<div class="new-wb">《虚拟仿真实验教学项目建设与应用规范》 团体标准专家论证会在京召开</div>
|
||
</div>
|
||
<div class="list-bs" style="margin-top: 15px;">
|
||
<div class="icon-title">新闻动态</div>
|
||
<div class="time-">2024-07-20</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gongao">
|
||
<div class="new-title">
|
||
通知公告
|
||
</div>
|
||
<div class="new-gang"></div>
|
||
<div class="list">
|
||
<swiper ref="mySwiper" :options="swiperOptions1" style="width: 100%">
|
||
<swiper-slide class="gongao-item" v-for="item in 8">
|
||
<div class="bj">
|
||
<div class="tt">关于举办人工智能赋能实验教学研讨会的通知</div>
|
||
<div class="p">
|
||
<div class="tags">
|
||
通知公告
|
||
</div>
|
||
<div class="time">
|
||
2024-07-20
|
||
</div>
|
||
</div>
|
||
<div class="desc">
|
||
为深入贯彻落实国家关于开展“人工智能+”行动的战略部署，积极推动人工智能技术与高等教育融合发展，教务处、教师教学发展中心联合清华大学学堂在线举办人工智能赋能高等教育教学改革交流研讨会。现将有关事项通知如下：
|
||
</div>
|
||
</div>
|
||
</swiper-slide>
|
||
|
||
</swiper>
|
||
<div class="page">
|
||
|
||
<div class="swiper-button-prev"></div>
|
||
<div class="swiper-button-next"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="news11">
|
||
<div class="new-title">
|
||
新闻资讯
|
||
</div>
|
||
<div class="new-gang"></div>
|
||
<div class="news11-list">
|
||
<div class="news11-list-item" v-for="(item, index) in 8" :key="index">
|
||
<div class="img">
|
||
<img src="../assets/gw/Snipaste_2024-07-19_16-46-43.jpg" class="imgWO" alt="">
|
||
</div>
|
||
<div class="tt">
|
||
全球重大环境污染事件国际新闻报道虚拟仿真实验
|
||
</div>
|
||
<div class="tags">
|
||
<div class="p">数字新闻报道</div>
|
||
<div class="icon"> <i class="el-icon-user"></i>
|
||
3750
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div style=" width: 156px;height: 42px;margin: 50px auto;">
|
||
<img src="../assets/gw/anniu.png" style=" width: 156px;height: 42px">
|
||
</div>
|
||
</div>
|
||
<div class="index-footer">
|
||
<div class="footer">
|
||
<div class="logo">
|
||
<div class="d-s">
|
||
<div class="logo-box"></div>
|
||
<div class="logo-size">
|
||
虚拟仿真实验教学中心
|
||
</div>
|
||
</div>
|
||
<div class="footer-contact">
|
||
<div class="p">
|
||
|
||
<img src="../assets/gw/tel.png" alt="">
|
||
<div class="pp">电话：0000-00000000</div>
|
||
|
||
</div>
|
||
|
||
<div class="p">
|
||
|
||
<img src="../assets/gw/email.png" alt="">
|
||
<div class="pp">邮箱：XXXXXXXXXXX@163.com</div>
|
||
|
||
</div>
|
||
<div class="p">
|
||
|
||
<img src="../assets/gw/address.png" alt="">
|
||
<div class="pp">地址：黑龙江省哈尔滨市南岗区西大直街92号</div>
|
||
|
||
</div>
|
||
|
||
|
||
</div>
|
||
</div>
|
||
<div class="footer-nav">
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">虚仿专业频道</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">教学团队</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">中心概况</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
<div class="footer-nav-item">
|
||
<div class="tt">教学研讨活动</div>
|
||
<a href="">中心简介</a>
|
||
<a href="">中心简介</a>
|
||
<a href="">优秀项目共享</a>
|
||
</div>
|
||
</div>
|
||
<div class="web_icp">
|
||
<div class="left">
|
||
<a href="">版权所有：XXXXXX</a>
|
||
<a href="">版权所有：XXXXXX</a>
|
||
</div>
|
||
<div class="right">
|
||
<div class="">返回顶部</div>
|
||
<img src="../assets/gw/top.png" alt="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
|
||
import "swiper/css/swiper.min.css";
|
||
export default {
|
||
components: {
|
||
Swiper,
|
||
SwiperSlide,
|
||
},
|
||
name: 'HelloWorld',
|
||
props: {
|
||
msg: String
|
||
},
|
||
data() {
|
||
return {
|
||
tablist: [
|
||
{ name: '首页' },
|
||
{ name: '中心概括' },
|
||
{ name: '教学资源' },
|
||
{ name: '教学平台' },
|
||
{ name: '教学团队' },
|
||
{ name: '专业委员会' },
|
||
{ name: '教学研讨活动' },
|
||
{ name: '虚仿专业频道' },
|
||
{ name: '大赛风采' },
|
||
{ name: '实践平台' },
|
||
{ name: '合作企业' },
|
||
{ name: '联系我们' },
|
||
],
|
||
isMounted: false,
|
||
swiperOptions: {
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev",
|
||
},
|
||
// pagination: {
|
||
// el: ".swiper-pagination",
|
||
// },
|
||
spaceBetween: 2,
|
||
notNextTick: true,
|
||
loop: false,
|
||
autoplay: true,//是否自动播放
|
||
speed: 500,//播放速度
|
||
slidesPerView: 'auto',
|
||
// centeredslides: true,
|
||
paginationclickable: true,
|
||
spaceBetween: 0,//模块之间的间隔
|
||
on: {
|
||
slidechangeTransitionEnd: function () {
|
||
//处理手动操作轮播图后后不再自动轮播
|
||
this.autoplay.start();
|
||
}
|
||
}
|
||
},
|
||
swiperOptions2: {
|
||
notNextTick: false,
|
||
pagination: {
|
||
el: ".swiper-pagination",
|
||
},
|
||
spaceBetween: 2,
|
||
touchRatio: 2,//触模滑动的顺畅度
|
||
loop: false,
|
||
autoplay: true,//是否自动播放
|
||
|
||
slidesPerView: 1,
|
||
centeredslides: true,
|
||
paginationclickable: true,
|
||
spaceBetween: 0,//模块之间的间隔
|
||
on: {
|
||
slidechangeTransitionEnd: function () {
|
||
//处理手动操作轮播图后后不再自动轮播
|
||
this.autoplay.start();
|
||
}
|
||
}
|
||
},
|
||
swiperOptions1: {
|
||
navigation: {
|
||
nextEl: ".gongao .page .swiper-button-next",
|
||
prevEl: ".gongao .page .swiper-button-prev",
|
||
},
|
||
// pagination: {
|
||
// el: ".swiper-pagination",
|
||
// },
|
||
loop: false,
|
||
slidesPerView: 5,
|
||
centeredslides: true,
|
||
// paginationclickable: true,
|
||
spaceBetween: 20,//模块之间的间隔
|
||
on: {
|
||
slidechangeTransitionEnd: function () {
|
||
//处理手动操作轮播图后后不再自动轮播
|
||
this.autoplay.start();
|
||
}
|
||
}
|
||
},
|
||
slideList: [
|
||
"http://124.221.227.225:1255/assets/banner.png",
|
||
"http://124.221.227.225:1255/assets/banner.png"
|
||
],
|
||
}
|
||
},
|
||
computed: {
|
||
customswiper() {
|
||
let swiper;
|
||
// @4.1.1 版本使用 .$swiper
|
||
// @3.1.3 版本直接 .swiper 即可
|
||
if (this.isMounted) swiper = this.$refs.mySwiper.$swiper;
|
||
return swiper;
|
||
},
|
||
},
|
||
|
||
methods: {
|
||
|
||
}
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.top-box {
|
||
width: 100%;
|
||
/* height: 1000px; */
|
||
/* background: url(''); */
|
||
/* background-size: cover; */
|
||
/* 背景图片铺满盒子 */
|
||
/* background-repeat: no-repeat; */
|
||
/* 禁止背景图片重复 */
|
||
position: relative;
|
||
}
|
||
|
||
.tab-box {
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 20px 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid rgba(255, 255, 255, 0.2);
|
||
;
|
||
font-weight: bold;
|
||
font-size: 18px;
|
||
color: #FFFFFF;
|
||
position: absolute;
|
||
z-index: 3;
|
||
|
||
}
|
||
|
||
.d-s {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.logo-box {
|
||
width: 50px;
|
||
height: 50px;
|
||
background: #fff;
|
||
}
|
||
|
||
.logo-size {
|
||
font-weight: 800;
|
||
font-size: 24px;
|
||
color: #FFFFFF;
|
||
margin-left: 20px;
|
||
|
||
}
|
||
|
||
.x-x {
|
||
margin-right: 20px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.bottom-h {
|
||
width: 80%;
|
||
position: absolute;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
bottom: 75px;
|
||
z-index: 3;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.banner-page {
|
||
width: 130px;
|
||
height: 50px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
::v-deep .banner-page .swiper-button-next,
|
||
::v-deep .banner-page .swiper-button-prev {
|
||
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #005375 !important;
|
||
width: 50px !important;
|
||
height: 50px !important;
|
||
padding: 0 !important;
|
||
/* margin: 0 30px; */
|
||
border-radius: 50%;
|
||
font-size: 30px;
|
||
opacity: 1;
|
||
border-radius: 50%;
|
||
border: 1px solid #fff;
|
||
background: transparent;
|
||
position: static;
|
||
}
|
||
|
||
|
||
::v-deep .banner-page .swiper-button-next {
|
||
/* transform: rotate(180deg); */
|
||
}
|
||
|
||
::v-deep .banner-page .swiper-button-prev {
|
||
/* transform: rotate(180deg); */
|
||
}
|
||
|
||
::v-deep .banner-page .swiper-button-next.swiper-button-disabled,
|
||
::v-deep .banner-page .swiper-button-prev.swiper-button-disabled {
|
||
|
||
opacity: 0.8;
|
||
/*background-color: rgba(255, 255, 255, 0.8);*/
|
||
}
|
||
|
||
::v-deep .banner-page .swiper-button-next:after,
|
||
::v-deep .banner-page .swiper-button-prev:after {
|
||
|
||
font-size: 20px;
|
||
color: #fff;
|
||
}
|
||
|
||
.fff-size {
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #FFFFFF;
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.xian {
|
||
background: rgba(255, 255, 255, 0.7);
|
||
width: 75%;
|
||
height: 1px;
|
||
margin: 0px 20px;
|
||
}
|
||
|
||
.new-box {
|
||
width: 100%;
|
||
background: #fff;
|
||
box-sizing: border-box;
|
||
padding: 50px;
|
||
|
||
}
|
||
|
||
.new-gang {
|
||
width: 50px;
|
||
height: 5px;
|
||
background: #005375;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.new-title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 28px;
|
||
color: #333333;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.new-container {
|
||
width: 80%;
|
||
|
||
margin: 20px auto;
|
||
display: flex;
|
||
|
||
justify-content: space-between;
|
||
margin-top: 60px;
|
||
|
||
}
|
||
|
||
.list-box {
|
||
width: 100%;
|
||
border-bottom: 1px solid #EEEEEE;
|
||
box-sizing: border-box;
|
||
padding-bottom: 20px;
|
||
margin-bottom: 20px;
|
||
position: relative;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.list-box::after {
|
||
content: "";
|
||
width: 100%;
|
||
height: 1px;
|
||
background: linear-gradient(to right, #005375, #005375) no-repeat left bottom;
|
||
background-size: 0% 1px;
|
||
transition: background-size 500ms;
|
||
transition: 0.5s ease;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.list-box:hover::after {
|
||
background-size: 100% 1px;
|
||
}
|
||
|
||
.list-bs {
|
||
width: 100%;
|
||
display: flex;
|
||
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.new-list {
|
||
width: 25%;
|
||
|
||
}
|
||
|
||
.list-bs img {
|
||
width: 40%;
|
||
}
|
||
|
||
.new-wb {
|
||
width: 58%;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #333333;
|
||
-webkit-line-clamp: 3;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
overflow: hidden;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.icon-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 76px;
|
||
height: 26px;
|
||
background: #D8F4FF;
|
||
border-radius: 4px 4px 4px 4px;
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #005375;
|
||
}
|
||
|
||
.time- {
|
||
font-weight: 500;
|
||
font-size: 14px;
|
||
color: #005375;
|
||
}
|
||
|
||
.new-banner {
|
||
/* overflow: hidden; */
|
||
width: 48%;
|
||
display: flex;
|
||
justify-content: center;
|
||
position: relative;
|
||
}
|
||
|
||
|
||
.new-banner .swiper-pagination {
|
||
position: absolute;
|
||
|
||
display: flex;
|
||
justify-content: center;
|
||
width: 100%;
|
||
|
||
bottom: 90px;
|
||
}
|
||
|
||
|
||
::v-deep .new-banner .swiper-pagination-bullet {
|
||
|
||
|
||
width: 10px !important;
|
||
|
||
height: 10px !important;
|
||
|
||
opacity: 1;
|
||
margin: 0 5px !important;
|
||
|
||
border-radius: 50%;
|
||
background: #EEEEEE;
|
||
}
|
||
|
||
|
||
::v-deep .new-banner .swiper-pagination-bullet-active {
|
||
|
||
background: #005375;
|
||
|
||
}
|
||
|
||
.new-banner .banner-box {
|
||
width: 100%;
|
||
}
|
||
|
||
.new-banner .banner-box img {
|
||
width: 100%;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.banner-title {
|
||
width: 75%;
|
||
font-weight: 500;
|
||
font-size: 20px;
|
||
color: #333333;
|
||
padding-right: 5%;
|
||
border-right: 1px solid #eee;
|
||
}
|
||
|
||
.banner-size {
|
||
color: #005375;
|
||
text-align: center;
|
||
}
|
||
|
||
.gongao {
|
||
width: 100%;
|
||
padding: 50px 0;
|
||
background: #005375;
|
||
border-radius: 0px 0px 0px 0px;
|
||
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.gongao::after {
|
||
content: "";
|
||
width: 100%;
|
||
height: 100%;
|
||
background: url('../assets/gw/wx20240719161013.png');
|
||
background-size: 100% 100%;
|
||
/* 背景图片铺满盒子 */
|
||
background-repeat: no-repeat;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.gongao .new-gang {
|
||
width: 50px;
|
||
height: 5px;
|
||
background: #fff;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.gongao .new-title {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: bold;
|
||
font-size: 28px;
|
||
color: #fff;
|
||
margin: 15px auto;
|
||
}
|
||
|
||
.gongao .list {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
margin-top: 50px;
|
||
position: relative;
|
||
padding-bottom: 100px;
|
||
}
|
||
|
||
.gongao .list .gongao-item {
|
||
|
||
|
||
background: #FFFFFF;
|
||
}
|
||
|
||
.gongao .list .gongao-item .bj {
|
||
padding: 20px;
|
||
}
|
||
|
||
.gongao .list .gongao-item .tt {
|
||
font-size: 20px;
|
||
line-height: 28px;
|
||
text-align: justified;
|
||
overflow: hidden;
|
||
/** 隐藏超出的内容 **/
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
/** 多行 **/
|
||
display: -webkit-box;
|
||
/** 对象作为伸缩盒子模型显示 **/
|
||
-webkit-box-orient: vertical;
|
||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||
-webkit-line-clamp: 2;
|
||
/** 显示的行数 **/
|
||
}
|
||
|
||
.gongao .list .gongao-item .p {
|
||
display: flex;
|
||
margin: 20px 0;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.gongao .list .gongao-item .p .tags {
|
||
width: 76px;
|
||
height: 26px;
|
||
background: #D8F4FF;
|
||
border-radius: 4px 4px 4px 4px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
font-size: 14px;
|
||
color: #005375;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.gongao .list .gongao-item .p .time {
|
||
font-size: 14px;
|
||
color: #005375;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.gongao .list .gongao-item .desc {
|
||
|
||
font-family: PingFang SC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: #556578;
|
||
line-height: 24px;
|
||
text-align: justified;
|
||
overflow: hidden;
|
||
/** 隐藏超出的内容 **/
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
/** 多行 **/
|
||
display: -webkit-box;
|
||
/** 对象作为伸缩盒子模型显示 **/
|
||
-webkit-box-orient: vertical;
|
||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||
-webkit-line-clamp: 3;
|
||
/** 显示的行数 **/
|
||
}
|
||
|
||
.gongao .list::after {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
/* right: -50px; */
|
||
background: linear-gradient(-90deg, #005375 1%, rgba(0, 83, 117, 0) 100%);
|
||
width: 220px;
|
||
height: 100%;
|
||
z-index: 3;
|
||
}
|
||
|
||
.gongao .list::before {
|
||
content: "";
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
/* right: -50px; */
|
||
background: linear-gradient(90deg, #005375 0%, rgba(0, 83, 117, 0) 100%);
|
||
width: 220px;
|
||
height: 100%;
|
||
z-index: 3;
|
||
}
|
||
|
||
.gongao .list .page {
|
||
position: absolute;
|
||
bottom: 0;
|
||
width: 100%;
|
||
margin-top: 60px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
}
|
||
|
||
::v-deep .gongao .list .page .swiper-button-next,
|
||
::v-deep .gongao .list .page .swiper-button-prev {
|
||
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
color: #005375 !important;
|
||
width: 52px !important;
|
||
height: 52px !important;
|
||
padding: 0 !important;
|
||
margin: 0 30px;
|
||
border-radius: 50%;
|
||
font-size: 30px;
|
||
opacity: 1;
|
||
border-radius: 50%;
|
||
border: 1px solid #fff;
|
||
background: #fff;
|
||
position: static;
|
||
}
|
||
|
||
|
||
::v-deep .gongao .list .page .swiper-button-next {
|
||
/* transform: rotate(180deg); */
|
||
}
|
||
|
||
::v-deep .gongao .list .page .swiper-button-prev {
|
||
/* transform: rotate(180deg); */
|
||
}
|
||
|
||
::v-deep .gongao .list .page .swiper-button-next.swiper-button-disabled,
|
||
::v-deep .gongao .list .page .swiper-button-prev.swiper-button-disabled {
|
||
|
||
opacity: 0.8;
|
||
/*background-color: rgba(255, 255, 255, 0.8);*/
|
||
}
|
||
|
||
::v-deep .gongao .list .page .swiper-button-next:after,
|
||
::v-deep .gongao .list .page .swiper-button-prev:after {
|
||
|
||
font-size: 24px;
|
||
color: #005375;
|
||
}
|
||
|
||
.news11 {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
margin-top: 50px;
|
||
position: relative;
|
||
}
|
||
|
||
.news11 .news11-list {
|
||
margin-top: 50px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.news11 .news11-list .news11-list-item {
|
||
width: 24%;
|
||
height: 324px;
|
||
border: 1px solid #eee;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.news11 .news11-list .news11-list-item .img {
|
||
width: 100%;
|
||
height: 194px;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.news11 .news11-list .news11-list-item .img img {
|
||
aspect-ratio: 16/9;
|
||
}
|
||
|
||
.news11 .news11-list .news11-list-item .tt {
|
||
padding: 20px;
|
||
line-height: 28px;
|
||
font-size: 18px;
|
||
overflow: hidden;
|
||
/** 隐藏超出的内容 **/
|
||
word-break: break-all;
|
||
text-overflow: ellipsis;
|
||
/** 多行 **/
|
||
display: -webkit-box;
|
||
/** 对象作为伸缩盒子模型显示 **/
|
||
-webkit-box-orient: vertical;
|
||
/** 设置或检索伸缩盒对象的子元素的排列方式 **/
|
||
-webkit-line-clamp: 2;
|
||
/** 显示的行数 **/
|
||
}
|
||
|
||
.news11 .news11-list .news11-list-item .tags {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 20px;
|
||
}
|
||
|
||
.news11 .news11-list .news11-list-item .tags .p {
|
||
font-size: 14px;
|
||
color: #005375;
|
||
font-weight: 700;
|
||
}
|
||
|
||
.news11 .news11-list .news11-list-item .tags i {
|
||
color: #999999;
|
||
}
|
||
|
||
.news11 .news11-list .news11-list-item .tags .icon {
|
||
color: #999999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.index-footer {
|
||
background: #383838;
|
||
padding-top: 30px;
|
||
}
|
||
|
||
.index-footer .footer {
|
||
width: 80%;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.index-footer .footer .logo {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
/* align-items: center; */
|
||
}
|
||
|
||
.index-footer .footer .logo .footer-contact {}
|
||
|
||
.index-footer .footer .logo .footer-contact .p {
|
||
display: inline-block;
|
||
display: flex;
|
||
float: left;
|
||
margin-left: 50px;
|
||
align-items: center;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
font-size: 16px;
|
||
/* justify-content: flex-end; */
|
||
}
|
||
|
||
.index-footer .footer .logo .footer-contact .p img {
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.index-footer .footer .logo .footer-contact .p:nth-child(3) {
|
||
width: 100%;
|
||
clear: both;
|
||
margin-top: 20px;
|
||
}
|
||
|
||
.index-footer .footer .footer-nav {
|
||
display: flex;
|
||
margin-top: 20px;
|
||
padding-top: 30px;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.index-footer .footer .footer-nav .footer-nav-item {
|
||
width: 9%;
|
||
margin-right: 1%;
|
||
}
|
||
|
||
.index-footer .footer .footer-nav .footer-nav-item:last-child {
|
||
margin-right: 0;
|
||
}
|
||
|
||
.index-footer .footer .footer-nav .footer-nav-item .tt {
|
||
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
line-height: 18px;
|
||
position: relative;
|
||
padding-bottom: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.index-footer .footer .footer-nav .footer-nav-item .tt::after {
|
||
content: "";
|
||
width: 20px;
|
||
height: 2px;
|
||
background: #005375;
|
||
border-radius: 0px 0px 0px 0px;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
}
|
||
|
||
.index-footer .footer .footer-nav .footer-nav-item a {
|
||
text-decoration: none;
|
||
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: rgba(255, 255, 255, 0.4);
|
||
line-height: 16px;
|
||
display: block;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.index-footer .footer .footer-nav .footer-nav-item a:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.index-footer .footer .web_icp {
|
||
display: flex;
|
||
margin-top: 50px;
|
||
height: 80px;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.index-footer .footer .web_icp a {
|
||
text-decoration: none;
|
||
|
||
font-weight: 500;
|
||
font-size: 16px;
|
||
color: rgba(255, 255, 255, 0.4);
|
||
line-height: 16px;
|
||
margin-right: 30px;
|
||
}
|
||
|
||
.index-footer .footer .web_icp .right {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end
|
||
}
|
||
|
||
.index-footer .footer .web_icp .right div {
|
||
margin-right: 25px;
|
||
|
||
font-weight: 500;
|
||
font-size: 18px;
|
||
color: rgba(255, 255, 255, 0.7);
|
||
line-height: 18px;
|
||
|
||
}
|
||
</style>
|