969 lines
27 KiB
Vue
969 lines
27 KiB
Vue
<template>
|
||
<div class="wrapper" v-if="bgData">
|
||
<header-nav :index_num="index_num"></header-nav>
|
||
<div id="box">
|
||
<!-- 内容ONE -->
|
||
<div class="container">
|
||
<!-- 轮播图 -->
|
||
<div class="swiperone">
|
||
<div class="swiper-container swiper-one">
|
||
<div class="swiper-wrapper">
|
||
<template v-for="(banner,index) in bgData.banner">
|
||
<div class="swiper-slide" :key="index">
|
||
<img :src="banner.cover" alt />
|
||
<div class="box">{{banner.title}}</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<!-- 如果需要导航按钮 -->
|
||
<div class="swiper-button-prev swiper-button-white"></div>
|
||
<div class="swiper-button-next swiper-button-white"></div>
|
||
</div>
|
||
<!-- 通知公告的box -->
|
||
<div class="right">
|
||
<!-- 通知公告 -->
|
||
<div class="top">
|
||
<div class="b">
|
||
<span>通知公告</span>
|
||
<span>更多>></span>
|
||
</div>
|
||
</div>
|
||
<!-- 列表显示 -->
|
||
<ul>
|
||
<template v-for="(notice,index) in bgData.notice">
|
||
<li :key="index" v-if="index < 8">
|
||
<a href="javascript:void(0);">
|
||
<span>{{notice.title}}</span>
|
||
<time>[{{notice.created_at}}]</time>
|
||
</a>
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
<!-- TWO -->
|
||
<div class="container-two">
|
||
<p class="title">新闻动态</p>
|
||
<div id="boxs">
|
||
<!-- 党组织信息 -->
|
||
<div class="box-child">
|
||
<div class="top-p">
|
||
<div>
|
||
<img class="o" :src="imgUrl.dh" alt />
|
||
<span>区域化党建</span>
|
||
</div>
|
||
<span @click="$jump('newsList')">更多>></span>
|
||
</div>
|
||
<ul class="ult">
|
||
<template v-for="(item,index) in mmData">
|
||
<li :key="index" v-if="index < 3" @click="$jump('newsDetails')">
|
||
<a href="javascript:void(0);">{{item.text}}</a>
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
<div class="top-p">
|
||
<div>
|
||
<img class="o" :src="imgUrl.gq" alt />
|
||
<span>党组织信息</span>
|
||
</div>
|
||
<span @click="$jump('informationQuery')">更多>></span>
|
||
</div>
|
||
<div class="p">
|
||
<div class="text">
|
||
<p>
|
||
党的建设即马克思主义建党理论同党的建设实践的统一，马克思主义党的学说的应用。
|
||
党的建设包括三个方面的含义：
|
||
<br />一是研究党的建设的理论科学；
|
||
<br />二是在马克思主义党的学说指导下所进行的党的建设的实践活动；
|
||
<br />三是作为理论原则与实际行动两者中介的约法规章。
|
||
</p>
|
||
</div>
|
||
<div class="img" @click="$jump('applyFor')">
|
||
<div class="img-box">
|
||
<img :src="imgUrl.wjx" alt />
|
||
<span>申请成为党组织</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 统一战线 -->
|
||
<div class="box-child">
|
||
<div class="top-p">
|
||
<div>
|
||
<img class="n" :src="imgUrl.ws" alt />
|
||
<span>统一战线</span>
|
||
</div>
|
||
<span @click="$jump('newsList')">更多>></span>
|
||
</div>
|
||
<ul class="ulo">
|
||
<template v-for="(battle,index) in bgData.battle">
|
||
<li :key="index" v-if="index<9" @click="$jump('newsDetails')">
|
||
<a href="javascript:void(0);">{{battle.title}}</a>
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
<!-- 组织生活 -->
|
||
<div class="box-child">
|
||
<div class="top-p">
|
||
<div>
|
||
<img class="e" :src="imgUrl.zz" alt />
|
||
<span>组织生活</span>
|
||
</div>
|
||
<span @click="$jump('newsList')">更多>></span>
|
||
</div>
|
||
<ul class="ult">
|
||
<template v-for="(organization,index) in bgData.organization">
|
||
<li :key="index" v-if="index < 9" @click="$jump('newsDetails')">
|
||
<a href="javascript:void(0);">{{organization.title}}</a>
|
||
</li>
|
||
</template>
|
||
</ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- THREE -->
|
||
<div class="container-three">
|
||
<p class="title">@书记</p>
|
||
<div class="box-list">
|
||
<template v-for="(item,index) in sData">
|
||
<div class="list" :key="index" v-if="index<3">
|
||
<img :src="item.img" alt />
|
||
<div class="wen-ben">
|
||
<h3>{{item.title}}</h3>
|
||
<p>{{item.text}}</p>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
<!-- FOUR -->
|
||
<div class="container-four">
|
||
<p class="title">党建矩阵</p>
|
||
<div class="swiper-box-list">
|
||
<div id="img-box" class="f-row">
|
||
<template v-for="(links,index) in bgData.links">
|
||
<div class="img-box" :key="index" v-if="index < 8">
|
||
<img :src="links.url" alt />
|
||
<p>{{links.name}}</p>
|
||
</div>
|
||
</template>
|
||
<img
|
||
v-if="leftPos != 0"
|
||
@click="scrollFeeds('left')"
|
||
class="mv-btn left-side"
|
||
:src="imgUrl.left"
|
||
alt
|
||
/>
|
||
<img @click="scrollFeeds('right')" class="mv-btn right-side" :src="imgUrl.right" alt />
|
||
</div>
|
||
</div>
|
||
<!-- <div class="swiper-container swiper-two">
|
||
<div class="swiper-wrapper">
|
||
<template v-for="(item,index) in list">
|
||
<div class="swiper-slide" :key="index" v-if="index < 8">
|
||
<img :src="imgUrl.img3" alt />
|
||
<span>中国政府网站{{index+1}}</span>
|
||
</div>
|
||
</template>
|
||
</div>
|
||
<div class="swiper-button-prev"></div>
|
||
<div class="swiper-button-next"></div>
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
<footer-nav class="footer"></footer-nav>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
/* eslint-disable */
|
||
import HeaderNav from '../../components/HeaderNav';
|
||
/* eslint-disable */
|
||
import FooterNav from "../../components/FooterNav";
|
||
import Swiper from "swiper";
|
||
|
||
export default {
|
||
components: {
|
||
HeaderNav,
|
||
FooterNav
|
||
},
|
||
props: {},
|
||
data() {
|
||
return {
|
||
index_num: 0,
|
||
leftPos: 0,
|
||
imgUrl: {
|
||
lb: require("../../../static/img/lb.png"),
|
||
gq: require("../../../static/img/gq.png"),
|
||
ws: require("../../../static/img/ws.png"),
|
||
dh: require("../../../static/img/dh.png"),
|
||
zz: require("../../../static/img/zz.png"),
|
||
wjx: require("../../../static/img/wjx.png"),
|
||
img3: require("../../../static/img/img3.png"),
|
||
right: require("../../../static/img/right.png"),
|
||
left: require("../../../static/img/left.png")
|
||
},
|
||
mmData: [
|
||
{ text: "贵安新区拟对部分社会组织进行注销登记", time: "2019-3-14" },
|
||
{ text: "四平市民政局以服务平台促社会组织发展", time: "2019-3-14" },
|
||
{
|
||
text:
|
||
"淮北市开展2019年度市级社会组织评淮北市开展2019年度市级社会组织评",
|
||
time: "2019-3-14"
|
||
},
|
||
{
|
||
text:
|
||
"佛山市民政局通报2018年度市级社会佛山市民政局通报2018年度市级社会",
|
||
time: "2019-3-14"
|
||
},
|
||
{
|
||
text:
|
||
"社会组织唱响《我和我的祖国》献礼新社会组织唱响《我和我的祖国》献礼新",
|
||
time: "2019-3-14"
|
||
},
|
||
{
|
||
text:
|
||
"市民政局与市体育总会召开协调会专项市民政局与市体育总会召开协调会专项",
|
||
time: "2019-3-14"
|
||
},
|
||
{
|
||
text:
|
||
'民政部立项中央财政支持"促进肝健康民政部立项中央财政支持"促进肝健康',
|
||
time: "2019-3-14"
|
||
},
|
||
{
|
||
text:
|
||
"静海区召开社会组织参与扶贫帮困活动静海区召开社会组织参与扶贫帮困活动",
|
||
time: "2019-3-14"
|
||
}
|
||
],
|
||
sData: [
|
||
{
|
||
img: require("../../../static/img/img0.png"),
|
||
title: "信访人对信访事项处理意见不服的,怎么办?",
|
||
text:
|
||
"活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可有效提升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划、..."
|
||
},
|
||
{
|
||
img: require("../../../static/img/img1.png"),
|
||
title: "信访人对信访事项处理意见不服的,怎么办?",
|
||
text:
|
||
"活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可有效提升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划、..."
|
||
},
|
||
{
|
||
img: require("../../../static/img/img2.png"),
|
||
title: "信访人对信访事项处理意见不服的,怎么办?",
|
||
text:
|
||
"活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可有效提升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划、..."
|
||
},
|
||
{
|
||
img: require("../../../static/img/img0.png"),
|
||
title: "信访人对信访事项处理意见不服的,怎么办?",
|
||
text:
|
||
"活动策划是提高市场占有率的有效行为，一份可执行、可操作、创意突出的活动策划案，可有效提升企业的知名度及品牌美誉度。活动策划案是相对于市场策划案而言，严格说它们同属市场策划的兄弟分支，活动策划、..."
|
||
}
|
||
],
|
||
bgData: []
|
||
};
|
||
},
|
||
computed: {},
|
||
watch: {},
|
||
methods: {
|
||
initSwiper() {
|
||
var mySwiper = new Swiper(".swiper-one", {
|
||
loop: true,
|
||
autoplay: {
|
||
delay: 1500
|
||
},
|
||
|
||
/** 如果需要前进后退按钮 */
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev"
|
||
}
|
||
});
|
||
},
|
||
scrollFeeds: function (btn) {
|
||
let feeds = document.querySelector(".f-row");
|
||
if (btn === "left") {
|
||
this.leftPos += 460;
|
||
let scrollAmount = 0;
|
||
var slideTimer = setInterval(function () {
|
||
feeds.scrollLeft -= 10;
|
||
scrollAmount += 10;
|
||
if (scrollAmount >= 460) {
|
||
window.clearInterval(slideTimer);
|
||
}
|
||
}, 25);
|
||
} else {
|
||
this.leftPos -= 460;
|
||
let scrollAmount = 0;
|
||
// eslint-disable-next-line no-redeclare
|
||
var slideTimer = setInterval(function () {
|
||
feeds.scrollLeft += 10;
|
||
scrollAmount += 10;
|
||
if (scrollAmount >= 460) {
|
||
window.clearInterval(slideTimer);
|
||
}
|
||
}, 25);
|
||
}
|
||
},
|
||
getData() {
|
||
let _this = this
|
||
this.$http({
|
||
method: 'get',
|
||
url: 'v1/index',
|
||
data: {}
|
||
}).then(res => {
|
||
if (res.data.code === 200) {
|
||
_this.bgData = res.data.data
|
||
} else {
|
||
_this.$Message.error('请求数据有问题！')
|
||
}
|
||
})
|
||
// eslint-disable-next-line handle-callback-err
|
||
.catch(err => {
|
||
console.log(err)
|
||
})
|
||
}
|
||
/*
|
||
initialSwiper() {
|
||
var swiper = new Swiper(".swiper-two", {
|
||
spaceBetween: 20,
|
||
slidesPerView: 18 / 4,
|
||
slidesPerGroup: 7 / 4,
|
||
loopFillGroupWithBlank: true,
|
||
|
||
// 如果需要前进后退按钮
|
||
navigation: {
|
||
nextEl: ".swiper-button-next",
|
||
prevEl: ".swiper-button-prev"
|
||
},
|
||
|
||
});
|
||
}
|
||
*/
|
||
},
|
||
created() {
|
||
this.getData()
|
||
},
|
||
mounted() {
|
||
this.initSwiper();
|
||
/*this.initialSwiper();*/
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang='scss' scoped>
|
||
.swiper-wrapper {
|
||
height: auto !important;
|
||
}
|
||
|
||
.wrapper {
|
||
min-width: 1280px;
|
||
// width: 100%;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
|
||
#box {
|
||
width: 1200px;
|
||
padding-top: 40px;
|
||
margin: 0 auto 80px;
|
||
box-sizing: border-box;
|
||
/** FOUR */
|
||
.container-four {
|
||
width: 100%;
|
||
height: 260px;
|
||
padding: 0 40px;
|
||
box-sizing: border-box;
|
||
margin-top: 59px;
|
||
|
||
.swiper-box-list {
|
||
width: 100%;
|
||
height: 250px;
|
||
box-sizing: border-box;
|
||
padding: 0 42px 0 0px;
|
||
position: relative;
|
||
|
||
.mv-btn {
|
||
cursor: pointer;
|
||
height: 60px;
|
||
width: 60px;
|
||
border-radius: 18px;
|
||
z-index: 20;
|
||
position: absolute;
|
||
&.left-side {
|
||
left: 0px;
|
||
top: 60px;
|
||
}
|
||
&.right-side {
|
||
right: 40px;
|
||
top: 60px;
|
||
}
|
||
}
|
||
|
||
#img-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
overflow-y: scroll;
|
||
|
||
&::-webkit-scrollbar {
|
||
display: none;
|
||
}
|
||
|
||
.img-box {
|
||
width: 239px;
|
||
height: 196px;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 10px 9px 1px rgba(206, 204, 204, 0.5);
|
||
border-radius: 5px;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
margin-right: 20px;
|
||
|
||
img {
|
||
width: 239px;
|
||
height: 130px;
|
||
border-radius: 5px 5px 0px 0px;
|
||
}
|
||
|
||
p {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
line-height: 60px;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
/*
|
||
.swiper-button-prev.swiper-button-disabled {
|
||
opacity: 0;
|
||
cursor: auto;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.swiper-button-next.swiper-button-disabled {
|
||
opacity: 1;
|
||
cursor: auto;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.swiper-button-prev {
|
||
outline: none;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 0%;
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-top: -22px;
|
||
z-index: 10;
|
||
cursor: pointer;
|
||
background-image: url("../../../static//img/left.png");
|
||
background-size: 60px 60px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.swiper-button-next {
|
||
outline: none;
|
||
position: absolute;
|
||
top: 50%;
|
||
right: 0%;
|
||
width: 60px;
|
||
height: 60px;
|
||
margin-top: -22px;
|
||
z-index: 10;
|
||
cursor: pointer;
|
||
background-image: url("../../../static//img/right.png");
|
||
background-size: 60px 60px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
}
|
||
|
||
.swiper-slide {
|
||
width: 239px !important;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 10px 9px 1px rgba(206, 204, 204, 0.12);
|
||
border-radius: 5px;
|
||
text-align: center;
|
||
margin-right: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
|
||
img {
|
||
width: 239px;
|
||
height: 130px;
|
||
background-color: #ffffff;
|
||
border-radius: 5px 5px 0px 0px;
|
||
}
|
||
|
||
span {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
line-height: 60px;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
*/
|
||
}
|
||
|
||
.title {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
/** THREE */
|
||
.container-three {
|
||
width: 100%;
|
||
height: 848px;
|
||
padding: 0 40px;
|
||
box-sizing: border-box;
|
||
margin-top: 59px;
|
||
|
||
.box-list {
|
||
width: 100%;
|
||
height: 794px;
|
||
background-color: #ffffff;
|
||
box-sizing: border-box;
|
||
padding: 0 60px 0 8px;
|
||
|
||
.list {
|
||
width: 1132px;
|
||
height: 240px;
|
||
box-sizing: border-box;
|
||
padding: 33px 8px 26px 12px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #f8f8f8;
|
||
border-top: 1px solid #f8f8f8;
|
||
|
||
&:nth-last-child(1) {
|
||
border-bottom: 0px solid #f8f8f8;
|
||
}
|
||
|
||
img {
|
||
width: 300px;
|
||
height: 180px;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
.wen-ben {
|
||
width: 763px;
|
||
|
||
h3 {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 22px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 1px;
|
||
color: #333333;
|
||
margin: 17px 0 36px 0;
|
||
}
|
||
|
||
p {
|
||
font-family: MicrosoftYaHei;
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 30px;
|
||
letter-spacing: 1px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
margin-bottom: 30px;
|
||
}
|
||
}
|
||
|
||
/** TWO */
|
||
.container-two {
|
||
width: 100%;
|
||
height: 482px;
|
||
padding: 0 40px;
|
||
box-sizing: border-box;
|
||
margin-top: 59px;
|
||
|
||
#boxs {
|
||
width: 100%;
|
||
height: 428px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
|
||
.box-child {
|
||
width: 365px;
|
||
height: 428px;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 10px 8px 2px rgba(173, 167, 167, 0.08);
|
||
border-radius: 10px;
|
||
box-sizing: border-box;
|
||
padding: 0 14px;
|
||
|
||
.ult {
|
||
margin-top: 29px;
|
||
/*
|
||
width: 303px;
|
||
height: 297px;
|
||
*/
|
||
|
||
li {
|
||
a {
|
||
color: #333333;
|
||
}
|
||
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 33px;
|
||
letter-spacing: 0px;
|
||
overflow: hidden;
|
||
-o-text-overflow: clip;
|
||
text-overflow: clip;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.ulo {
|
||
margin-top: 29px;
|
||
width: 321px;
|
||
height: 297px;
|
||
|
||
li {
|
||
a {
|
||
color: #333333;
|
||
}
|
||
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 33px;
|
||
letter-spacing: 0px;
|
||
overflow: hidden;
|
||
-o-text-overflow: clip;
|
||
text-overflow: clip;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
|
||
.p {
|
||
margin-top: 19px;
|
||
|
||
.img {
|
||
width: 309px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
cursor: pointer;
|
||
|
||
.img-box {
|
||
width: 131px;
|
||
height: 27px;
|
||
background-image: linear-gradient(
|
||
35deg,
|
||
#f82747 0%,
|
||
#fe5b2c 100%
|
||
);
|
||
border-radius: 25px;
|
||
text-align: center;
|
||
line-height: 27px;
|
||
position: relative;
|
||
|
||
img {
|
||
width: 15px;
|
||
height: 15px;
|
||
position: absolute;
|
||
left: -5%;
|
||
top: 24%;
|
||
}
|
||
|
||
span {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 14px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #fbfffb;
|
||
text-shadow: 2px 4px 7px 0px rgba(175, 14, 39, 0.83);
|
||
}
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: 309px;
|
||
height: 127px;
|
||
|
||
p {
|
||
width: 309px;
|
||
height: 92px;
|
||
overflow: hidden;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 33px;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
.top-p {
|
||
width: 100%;
|
||
height: 56px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
border-bottom: 1px solid #ccc;
|
||
|
||
span {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: -1px;
|
||
color: #999999;
|
||
}
|
||
|
||
div {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.o {
|
||
width: 27px;
|
||
height: 24px;
|
||
}
|
||
|
||
.n {
|
||
width: 35px;
|
||
height: 23px;
|
||
}
|
||
|
||
.e {
|
||
width: 27px;
|
||
height: 26px;
|
||
}
|
||
|
||
span {
|
||
margin-left: 16px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 16px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #666666;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.title {
|
||
margin-bottom: 30px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
/** ONE */
|
||
.container {
|
||
width: 100%;
|
||
// padding: 0 40px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
.right {
|
||
width: 491px;
|
||
height: 400px;
|
||
|
||
ul {
|
||
height: 333px;
|
||
margin-top: 28px;
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
li {
|
||
width: 491px;
|
||
|
||
a {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
time {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 17px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #999999;
|
||
}
|
||
|
||
span {
|
||
display: inline-block;
|
||
width: 329px;
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 18px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
overflow: hidden;
|
||
-o-text-overflow: ellipsis;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.top {
|
||
border-bottom: 1px solid #ccc;
|
||
padding-bottom: 20px;
|
||
box-sizing: border-box;
|
||
width: 491px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: flex-start;
|
||
|
||
.b {
|
||
width: 100%;
|
||
height: 24px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
|
||
& > span:first-child {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 24px;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0px;
|
||
color: #333333;
|
||
}
|
||
|
||
& > span:last-child {
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 14px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 10px;
|
||
letter-spacing: -1px;
|
||
color: #999999;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiperone {
|
||
position: relative;
|
||
|
||
.swiper-one {
|
||
width: 660px;
|
||
height: 400px;
|
||
box-sizing: border-box;
|
||
|
||
.swiper-slide {
|
||
width: 660px;
|
||
height: 400px;
|
||
position: relative;
|
||
|
||
.box {
|
||
width: 660px;
|
||
height: 80px;
|
||
background-color: rgba($color: #000000, $alpha: 0.7);
|
||
position: absolute;
|
||
bottom: 0%;
|
||
left: 0%;
|
||
z-index: 5;
|
||
text-align: center;
|
||
|
||
font-family: "MicrosoftYaHei";
|
||
font-size: 20px;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 80px;
|
||
letter-spacing: -1px;
|
||
color: #ffffff;
|
||
}
|
||
|
||
& > img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.swiper-button-prev {
|
||
position: absolute;
|
||
top: 93%;
|
||
left: 4%;
|
||
width: 13px;
|
||
height: 23px;
|
||
margin-top: -22px;
|
||
z-index: 10;
|
||
cursor: pointer;
|
||
background-size: 13px 23px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
outline: none;
|
||
}
|
||
|
||
.swiper-button-next {
|
||
position: absolute;
|
||
top: 93%;
|
||
right: 4%;
|
||
width: 13px;
|
||
height: 23px;
|
||
margin-top: -22px;
|
||
z-index: 10;
|
||
cursor: pointer;
|
||
background-size: 13px 23px;
|
||
background-position: center;
|
||
background-repeat: no-repeat;
|
||
outline: none;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|