1095 lines
24 KiB
Vue
1095 lines
24 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.label }}
|
||
</div>
|
||
</div>
|
||
<!-- right -->
|
||
<div class="d-s" style="font-size: 20px; color: #fff;cursor: pointer;width: 170px;">
|
||
<i class="el-icon-search" v-if="show_search"></i>
|
||
<div style="font-size: 18px; margin-left: 15px; " v-if="show_search" @click="show_search = !show_search">搜索
|
||
</div>
|
||
<el-input placeholder="输入关键词" v-model="input4" style="width: 150px;height: 35px" v-if="!show_search">
|
||
<i slot="prefix" class="el-input__icon el-icon-search"></i>
|
||
</el-input>
|
||
<i class="el-icon-circle-close" v-if="!show_search" style="margin-left: 10px;"
|
||
@click="show_search = true"></i>
|
||
</div>
|
||
</div>
|
||
<div style="overflow: hidden;position: relative;" class="mySwiper">
|
||
<swiper ref="mySwiper" :options="swiperOptions" style="width: 100%">
|
||
<swiper-slide v-for="(item,index) in bannerlist" :key="index">
|
||
<img ref="swiperImg" style="width: 100%; height: 1000px" :src="item" />
|
||
</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">
|
||
{{indexList[0].categoryName}}
|
||
</div>
|
||
<div class="new-gang"></div>
|
||
<div class="new-container">
|
||
<div class="new-list">
|
||
<div class="list-box" v-for="(item, index) in this.newList[0]" :key="index">
|
||
<div class="list-bs">
|
||
<img :src="item.contentImg" style=" ">
|
||
<div class="new-wb">{{item.contentTitle}}</div>
|
||
</div>
|
||
<div class="list-bs" style="margin-top: 15px;">
|
||
<div class="icon-title">{{ indexList[0].categoryName }}</div>
|
||
<div class="time-">{{ parseTime(item.createTime, "{y}-{m}-{d}") }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="new-banner">
|
||
<swiper ref="mySwiper" :options="swiperOptions2" style="width: 100%">
|
||
<swiper-slide class="banner-box" v-for="(item, index) in [...this.newList[0], ...this.newList[1]]">
|
||
<div>
|
||
<img :src="item.contentImg" style="">
|
||
<div class="list-bs">
|
||
<div class="banner-title">{{item.contentTitle}}</div>
|
||
<div class="banner-size">
|
||
<div style="font-weight: 600;font-size: 40px;">{{parseTime(item.createTime, "{d}") }}</div>
|
||
<div>{{ parseTime(item.createTime, "{y}-{m}") }}</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 this.newList[1]" :key="index">
|
||
<div class="list-bs">
|
||
<img :src="item.contentImg" style="width: 125px; height: 70px ">
|
||
<div class="new-wb">{{item.contentTitle}}</div>
|
||
</div>
|
||
<div class="list-bs" style="margin-top: 15px;">
|
||
<div class="icon-title">{{ indexList[0].categoryName }}</div>
|
||
<div class="time-">{{ parseTime(item.createTime, "{y}-{m}-{d}") }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="gongao">
|
||
<div class="new-title">
|
||
{{indexList[1].categoryName}}
|
||
</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 this.noticeList">
|
||
<div class="bj">
|
||
<div class="tt">{{item.contentTitle}}</div>
|
||
<div class="p">
|
||
<div class="tags">
|
||
{{indexList[1].categoryName}}
|
||
</div>
|
||
<div class="time">
|
||
{{ parseTime(item.createTime, "{y}-{m}-{d}") }}
|
||
</div>
|
||
</div>
|
||
<div class="desc">
|
||
{{item.summary}}
|
||
</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">
|
||
{{indexList[2].categoryName}}
|
||
</div>
|
||
<div class="new-gang"></div>
|
||
<div class="news11-list">
|
||
<div class="news11-list-item" v-for="(item, index) in this.nationalVirtualLass" :key="index">
|
||
<div class="img">
|
||
<img :src="item.contentImg" class="imgWO" alt="">
|
||
</div>
|
||
<div class="tt">
|
||
{{item.contentTitle}}
|
||
</div>
|
||
<div class="tags">
|
||
<div class="p">{{indexList[2].categoryName}}</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" v-for="item in itemsWithoutFirst">
|
||
<div class="tt">{{ item.label }}</div>
|
||
<a href="" v-for="childrenItem in item.children">{{ childrenItem.label }}</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";
|
||
import { getTab,getbanner } from "@/api/gw/home";
|
||
export default {
|
||
components: {
|
||
Swiper,
|
||
SwiperSlide,
|
||
},
|
||
name: 'HelloWorld',
|
||
props: {
|
||
msg: String
|
||
},
|
||
data() {
|
||
return {
|
||
input4:'',
|
||
indexList:[],
|
||
newList:[[], []],
|
||
noticeList: [],
|
||
nationalVirtualLass:[],
|
||
show_search: true,
|
||
tablist: [
|
||
{ name: '首页' },
|
||
{ name: '中心概括' },
|
||
{ name: '教学资源' },
|
||
{ name: '教学平台' },
|
||
{ name: '教学团队' },
|
||
{ name: '专业委员会' },
|
||
{ name: '教学研讨活动' },
|
||
{ name: '虚仿专业频道' },
|
||
{ name: '大赛风采' },
|
||
{ name: '实践平台' },
|
||
{ name: '合作企业' },
|
||
{ name: '联系我们' },
|
||
],
|
||
bannerlist:[],
|
||
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,
|
||
|
||
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,
|
||
|
||
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"
|
||
],
|
||
}
|
||
},
|
||
mounted() {
|
||
// 页面加载完毕调用
|
||
// this.tabLsit();
|
||
},
|
||
computed: {
|
||
customswiper() {
|
||
let swiper;
|
||
// @4.1.1 版本使用 .$swiper
|
||
// @3.1.3 版本直接 .swiper 即可
|
||
if (this.isMounted) swiper = this.$refs.mySwiper.$swiper;
|
||
return swiper;
|
||
},
|
||
// 通过计算"首页"栏目去掉第一个元素
|
||
itemsWithoutFirst() {
|
||
return this.tablist.length > 0 ? this.tablist.slice(1) : [];
|
||
}
|
||
},
|
||
|
||
methods: {
|
||
/** 顶部tab列表 */
|
||
tabLsit() {
|
||
getTab().then(response => {
|
||
if(response.code == 200){
|
||
this.tablist = response.data;
|
||
getbanner(response.data[0].id).then(res => {
|
||
if(res.code == 200){
|
||
let list = res.data[3].children.list
|
||
for (let i = 0; i < list.length; i++) {
|
||
this.bannerlist.push(process.env.VUE_APP_BASE_API+list[i].imageUrl)
|
||
}
|
||
}
|
||
});
|
||
}
|
||
this.categoryList()
|
||
console.log(this.tablist)
|
||
})
|
||
},
|
||
/** 获取首页下的所有子栏目 */
|
||
categoryList() {
|
||
getbanner(this.tablist[0].id).then(response => {
|
||
this.indexList = response.data
|
||
let index = 0;
|
||
// 新闻动态赋值
|
||
this.indexList[0].children.list.forEach(item => {
|
||
item.contentImg = process.env.VUE_APP_BASE_API + item.contentImg
|
||
if (index < 4){
|
||
this.newList[0].push(item)
|
||
}else if (index < 8) {
|
||
this.newList[1].push(item)
|
||
}
|
||
index += 1
|
||
})
|
||
|
||
// 通知公告赋值
|
||
this.noticeList = this.indexList[1].children.list
|
||
|
||
// 国家级虚拟仿真课赋值
|
||
this.nationalVirtualLass = this.indexList[2].children.list
|
||
this.nationalVirtualLass.forEach(item => {
|
||
item.contentImg = process.env.VUE_APP_BASE_API + item.contentImg
|
||
})
|
||
})
|
||
},
|
||
}
|
||
|
||
}
|
||
</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;
|
||
z-index: 99999999999999999;
|
||
}
|
||
|
||
.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>
|