1061 lines
24 KiB
Vue
1061 lines
24 KiB
Vue
<template>
|
|
<div class="container">
|
|
<div class="top-box">
|
|
<headers></headers>
|
|
<!-- <div class="tab-box">-->
|
|
<!-- <!– left –>-->
|
|
<!-- <div class="d-s">-->
|
|
<!-- <div class="logo-box">-->
|
|
<!-- <img :src="baseInfo.webImg" />-->
|
|
<!-- </div>-->
|
|
<!-- <div class="logo-size">-->
|
|
<!-- {{ this.baseInfo.webName }}-->
|
|
<!-- </div>-->
|
|
<!-- </div>-->
|
|
<!-- <!– tab –>-->
|
|
<!-- <div class="d-s">-->
|
|
<!-- <div class="x-x" v-for="(item, index) in tablist " :key="index" @click="tabClick(item)" >-->
|
|
<!-- {{ 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>
|
|
<footers></footers>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import {Swiper, SwiperSlide} from "vue-awesome-swiper";
|
|
import "swiper/css/swiper.min.css";
|
|
import {getTab, getbanner, getBaseInfo} from "@/api/gw/home";
|
|
import headers from '@/views/officialWebsite/Components/header.vue'
|
|
import footers from '@/views/officialWebsite/Components/footer.vue'
|
|
export default {
|
|
components: {
|
|
Swiper,
|
|
SwiperSlide,
|
|
headers,
|
|
footers
|
|
},
|
|
name: 'HelloWorld',
|
|
props: {
|
|
msg: String
|
|
},
|
|
data() {
|
|
return {
|
|
baseInfo:"",
|
|
categoryQuery: {
|
|
categoryId: "",
|
|
pageNum: 1,
|
|
pageSize: 10
|
|
},
|
|
input4:'',
|
|
indexList:[],
|
|
newList:[[], []],
|
|
noticeList: [],
|
|
show_search: true,
|
|
nationalVirtualLass: [],
|
|
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() {
|
|
console.log(this.$route.query.id)
|
|
// 页面加载完毕调用
|
|
this.tabLsit();
|
|
this.getWebBaseInfo()
|
|
},
|
|
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: {
|
|
tabClick(item){
|
|
if(item.label=="联系我们"){
|
|
this.$router.push('/contact');
|
|
}
|
|
},
|
|
/** 顶部tab列表 */
|
|
tabLsit() {
|
|
getTab().then(response => {
|
|
if (response.code == 200) {
|
|
this.tablist = response.data;
|
|
this.categoryQuery.categoryId = this.tablist[0].id
|
|
getbanner(this.categoryQuery).then(res => {
|
|
if (res.code == 200) {
|
|
this.indexList = res.data
|
|
res.data[3].children.list.forEach(item => {
|
|
this.bannerlist.push(process.env.VUE_APP_BASE_API + item.imageUrl[0])
|
|
})
|
|
|
|
//新闻
|
|
let index = 0;
|
|
res.data[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 = res.data[1].children.list
|
|
|
|
// 比赛
|
|
this.nationalVirtualLass = res.data[2].children.list
|
|
this.nationalVirtualLass.forEach(item => {
|
|
item.contentImg = process.env.VUE_APP_BASE_API + item.contentImg
|
|
})
|
|
}
|
|
});
|
|
}
|
|
})
|
|
},
|
|
getWebBaseInfo() {
|
|
getBaseInfo().then(res => {
|
|
this.baseInfo = res.data
|
|
this.baseInfo.webImg = process.env.VUE_APP_BASE_API + this.baseInfo.webImg
|
|
})
|
|
}
|
|
}
|
|
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.top-box {
|
|
width: 100%;
|
|
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-box img{
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
.logo-size {
|
|
font-weight: 800;
|
|
font-size: 24px;
|
|
color: #FFFFFF;
|
|
margin-left: 20px;
|
|
|
|
}
|
|
|
|
.x-x {
|
|
margin-right: 10px;
|
|
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>
|