|
|
@ -1,61 +1,163 @@ |
|
|
<template> |
|
|
<template> |
|
|
<div class="main-content"> |
|
|
<div class="main-content"> |
|
|
<div class="block1"> |
|
|
<div class="block1"> |
|
|
<div class="block1-carousel"> |
|
|
<div class="block-content"> |
|
|
<el-carousel height="450px"> |
|
|
<div class="block1-carousel"> |
|
|
<el-carousel-item v-for="item in carouselPicList" :key="item"> |
|
|
<el-carousel height="450px"> |
|
|
<img style="height:450px;width:100%;" :src="item" /> |
|
|
<el-carousel-item v-for="item in carouselPicList" :key="item"> |
|
|
</el-carousel-item> |
|
|
<img style="height:450px;width:100%;" :src="item" /> |
|
|
</el-carousel> |
|
|
<div class="carousel-bg"> |
|
|
</div> |
|
|
<span class="font-size-16">联盟介绍</span> |
|
|
<div class="block1-about"> |
|
|
<p class="content">在工业和信息化部的大力支持和指导下，由中国信息通信研究院联合制造业、通信业、互联网等企业于2016年2月1日共同发起成立..</p> |
|
|
<div class="about-box"> |
|
|
<br><br><br> |
|
|
<span class="title-1">联盟介绍 <span class="font-size-16">about ></span></span> |
|
|
<a class="color-white mybutton-1">查看更多 >></a> |
|
|
<p class="content">在工业和信息化部的大力支持和指导下，由中国信息通信研究院联合制造业、通信业、互联网等企业于2016年2月1日共同发起成立..</p> |
|
|
</div> |
|
|
<a class="content float-right">查看更多 >></a> |
|
|
</el-carousel-item> |
|
|
</div> |
|
|
</el-carousel> |
|
|
<div class="other-box flex-box"> |
|
|
|
|
|
<div class="button flex-1"><i class="el-icon-document"></i>章程</div> |
|
|
|
|
|
<div class="button flex-1"><i class="el-icon-user-solid"></i>成员</div> |
|
|
|
|
|
<div class="button flex-1"><i class="el-icon-s-management"></i>组织构架</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="other-box flex-box"> |
|
|
<div class="block1-about"> |
|
|
<div class="button flex-1"><i class="el-icon-user"></i>加入联盟</div> |
|
|
<div class="about-box"> |
|
|
|
|
|
<span class="title-1"> |
|
|
|
|
|
联盟介绍 |
|
|
|
|
|
<span class="font-size-16">about ></span> |
|
|
|
|
|
</span> |
|
|
|
|
|
<p class="content">在工业和信息化部的大力支持和指导下，由中国信息通信研究院联合制造业、通信业、互联网等企业于2016年2月1日共同发起成立..</p> |
|
|
|
|
|
<br><br><br> |
|
|
|
|
|
<a style="color:#01496E;" class="mybutton-1">查看更多 >></a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="other-box flex-box"> |
|
|
|
|
|
<div class="button flex-1" style="background:#004471;"><i class="el-icon-user"></i>加入联盟</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="other-box flex-box"> |
|
|
|
|
|
<div class="button flex-1"><i class="el-icon-document"></i>章程</div> |
|
|
|
|
|
<div class="button flex-1"><i class="el-icon-user-solid"></i>成员</div> |
|
|
|
|
|
<div class="button flex-1"><i class="el-icon-s-management"></i>组织构架</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
</div> |
|
|
</div> |
|
|
<div class="block2"> |
|
|
<div class="block2"> |
|
|
<el-row> |
|
|
<el-row class="block-content"> |
|
|
<el-col :span="9"> |
|
|
<div class="left-box"> |
|
|
<div> |
|
|
<div class="title-box is-active"> |
|
|
<span class="title-2">联盟动态 <span class="font-size-16">News ></span></span> |
|
|
<span class="color-white title-2">联盟动态 <br><span class="font-size-21" style="opacity: 0.4;">NEWS</span></span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="notice-list" v-for="(item,index) in noticeList.slice(0,3)" :key="index"> |
|
|
<div class="title-box"> |
|
|
<div class="date-block"> |
|
|
<span class="color-white title-2">行业资讯 <br><span class="font-size-21" style="opacity: 0.4;">INFORMATION</span></span> |
|
|
<p class="text-Date">{{item.sendtime.split('-')[0]}}</p> |
|
|
</div> |
|
|
<p class="text-content text-center">{{item.sendtime.split('-')[1]}}/{{item.sendtime.split('-')[2]}}</p> |
|
|
</div> |
|
|
</div> |
|
|
<div class="center-box"> |
|
|
<div class="content-block"> |
|
|
<div class="notice-list" v-for="(item,index) in noticeList.slice(0,6)" :key="index"> |
|
|
|
|
|
<div class="content-block-first" v-if="index == 0"> |
|
|
<p class="text-title">{{item.title}}</p> |
|
|
<p class="text-title">{{item.title}}</p> |
|
|
<p class="text-content">{{item.content.replace(/<[^>]+>/g,"")}}</p> |
|
|
<p class="text-content">{{item.content.replace(/<[^>]+>/g,"")}}</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div v-else class="content-block"> |
|
|
|
|
|
<p class="text-title" style="font-size:14px;">{{item.title}}</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
<span class="text-date">{{item.sendtime}}</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="right-box"> |
|
|
|
|
|
<div class="meeting meeting-bg"> |
|
|
|
|
|
<span class="title-1" style="z-index:10;">2020年互联网大会</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="meeting forum-bg"> |
|
|
|
|
|
<span class="title-1" style="z-index:10;">2020年转型升级论坛</span> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="block3"> |
|
|
|
|
|
<div class="block-content"> |
|
|
|
|
|
<h1 class="title-0">成果发布 |
|
|
|
|
|
<span class="bottom-line" style="color:#01496E;"></span> |
|
|
|
|
|
</h1> |
|
|
|
|
|
<el-divider></el-divider> |
|
|
|
|
|
<p class="font-size-18" style="opacity: 0.4;text-align: center;">RESULTS</p> |
|
|
|
|
|
<br><br><br> |
|
|
|
|
|
<div> |
|
|
|
|
|
<div class="tab-box fruit01-bg"> |
|
|
|
|
|
<p class="title-1" style="z-index:10;">白皮书</p> |
|
|
|
|
|
<br><br> |
|
|
|
|
|
<a class="content" style="z-index:10;">查看更多 >></a> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="tab-box fruit02-bg"> |
|
|
|
|
|
<p class="title-1" style="z-index:10;">技术标准</p> |
|
|
|
|
|
<br><br> |
|
|
|
|
|
<a class="content" style="z-index:10;">查看更多 >></a> |
|
|
</div> |
|
|
</div> |
|
|
</el-col> |
|
|
<div class="tab-box fruit03-bg"> |
|
|
<el-col :span="9"> |
|
|
<p class="title-1" style="z-index:10;">电子会刊</p> |
|
|
<span class="title-2">行业资讯 <span class="font-size-16">Information ></span></span> |
|
|
<br><br> |
|
|
<div class="notice-list" v-for="(item,index) in noticeList.slice(0,3)" :key="index"> |
|
|
<a class="content" style="z-index:10;">查看更多 >></a> |
|
|
<div class="date-block"> |
|
|
</div> |
|
|
<p class="text-Date">{{item.sendtime.split('-')[0]}}</p> |
|
|
<div class="tab-box fruit04-bg"> |
|
|
<p class="text-content text-center">{{item.sendtime.split('-')[1]}}/{{item.sendtime.split('-')[2]}}</p> |
|
|
<p class="title-1" style="z-index:10;">应用案例</p> |
|
|
|
|
|
<br><br> |
|
|
|
|
|
<a class="content" style="z-index:10;">查看更多 >></a> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<br><br> |
|
|
|
|
|
<el-row> |
|
|
|
|
|
<el-col :span="12"> |
|
|
|
|
|
<div class="notice-list" v-for="(item,index) in noticeList.slice(0,4)" :key="index"> |
|
|
|
|
|
<div class="content-block"> |
|
|
|
|
|
<p class="text-title" style="font-size:14px;"><span style="color:#01496E;">【白皮书】</span>{{item.title}}</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
<span class="text-date">{{item.sendtime}}</span> |
|
|
</div> |
|
|
</div> |
|
|
<div class="content-block"> |
|
|
</el-col> |
|
|
<p class="text-title">{{item.title}}</p> |
|
|
<el-col :span="12"> |
|
|
<p class="text-content">{{item.content.replace(/<[^>]+>/g,"")}}</p> |
|
|
<div class="notice-list" v-for="(item,index) in noticeList.slice(4,8)" :key="index"> |
|
|
|
|
|
<div class="content-block"> |
|
|
|
|
|
<p class="text-title" style="font-size:14px;"><span style="color:#01496E;">【白皮书】</span>{{item.title}}</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
<span class="text-date">{{item.sendtime}}</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
</el-col> |
|
|
|
|
|
</el-row> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="block4"> |
|
|
|
|
|
<div class="block-content"> |
|
|
|
|
|
<h1 class="title-0">公众服务 |
|
|
|
|
|
<span class="bottom-line" style="color:#01496E;"></span> |
|
|
|
|
|
</h1> |
|
|
|
|
|
<el-divider></el-divider> |
|
|
|
|
|
<p class="font-size-18" style="opacity: 0.4;text-align: center;">PUBLIC SERVICE</p> |
|
|
|
|
|
<br><br><br> |
|
|
|
|
|
<div> |
|
|
|
|
|
<div class="tab-box"> |
|
|
|
|
|
<img class="box-pic" src="../../assets/home/gongyehulianwangzhuanqu.png"> |
|
|
|
|
|
<p>“5G+工业互联网”<br>项目库</p> |
|
|
</div> |
|
|
</div> |
|
|
</el-col> |
|
|
<div class="tab-box"> |
|
|
<el-col :span="6"></el-col> |
|
|
<img class="box-pic" src="../../assets/home/ziyuanchi.png"> |
|
|
</el-row> |
|
|
<p>工业互联网<br>资源池</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="tab-box"> |
|
|
|
|
|
<img class="box-pic" src="../../assets/home/fuwupingtai.png"> |
|
|
|
|
|
<p>工业互联网信息模型<br>综合服务平台</p> |
|
|
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="tab-box"> |
|
|
|
|
|
<img class="box-pic" src="../../assets/home/pinggu.png"> |
|
|
|
|
|
<p>可信服务评估评测</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="tab-box"> |
|
|
|
|
|
<img class="box-pic" src="../../assets/home/data-platform-s.png"> |
|
|
|
|
|
<p>工业大数据<br>产业创新平台</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
<div class="tab-box"> |
|
|
|
|
|
<div class="box-pic"> |
|
|
|
|
|
<img style="margin-top:15px;" src="../../assets/home/gengduo.png"> |
|
|
|
|
|
</div> |
|
|
|
|
|
<p>更多</p> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
|
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</template> |
|
|
</template> |
|
|
@ -71,7 +173,7 @@ export default { |
|
|
], |
|
|
], |
|
|
noticeList:[ //通知列表 |
|
|
noticeList:[ //通知列表 |
|
|
{sendtime:'2020-05-10',title:'工业和信息化部办公厅关于推动工业互联网加快发展',content:'各省、自治区、直辖市及计划单列市、新疆生产建设兵团工业和信息化主 管部门，各省、自治区、直辖市通信管理局，中国电信集团有限公司。'}, |
|
|
{sendtime:'2020-05-10',title:'工业和信息化部办公厅关于推动工业互联网加快发展',content:'各省、自治区、直辖市及计划单列市、新疆生产建设兵团工业和信息化主 管部门，各省、自治区、直辖市通信管理局，中国电信集团有限公司。'}, |
|
|
{sendtime:'2020-05-09',title:'工业和信息化部办公厅关于公布2019年工业互联网试',content:'各省、自治区、直辖市及计划单列市工业和信息化主管部门，各省、自治区 、直辖市通信管理局，各有关单位。'}, |
|
|
{sendtime:'2020-05-09',title:'工业和信息化部办公厅关于公布2019年工业互联网试2019年工业互联网试',content:'各省、自治区、直辖市及计划单列市工业和信息化主管部门，各省、自治区 、直辖市通信管理局，各有关单位。'}, |
|
|
{sendtime:'2020-05-08',title:'北京市经济和信息化局关于开展2020年工信部工业互',content:'各有关单位：根据工信部及我局工作安排，现将2020年工信部工业互联网 创新发展工程项目（以下简称“项目”）有关工作通知如下。'}, |
|
|
{sendtime:'2020-05-08',title:'北京市经济和信息化局关于开展2020年工信部工业互',content:'各有关单位：根据工信部及我局工作安排，现将2020年工信部工业互联网 创新发展工程项目（以下简称“项目”）有关工作通知如下。'}, |
|
|
{sendtime:'2020-05-07',title:'江门市工业和信息化局转发关于组织推进 “5G+工业”',content:'各市（含定州、辛集市）工业和信息化局、通信发展管理办公室，中国联通 河北分公司、中国电信河北分公司、中国移动河北分公司、河北广电网络。'}, |
|
|
{sendtime:'2020-05-07',title:'江门市工业和信息化局转发关于组织推进 “5G+工业”',content:'各市（含定州、辛集市）工业和信息化局、通信发展管理办公室，中国联通 河北分公司、中国电信河北分公司、中国移动河北分公司、河北广电网络。'}, |
|
|
{sendtime:'2020-05-08',title:'关于进一步加快工业互联网发展的通知',content:'各省、自治区、直辖市及计划单列市工业和信息化主管部门，各省、自治区 、直辖市通信管理局，各有关单位。'}, |
|
|
{sendtime:'2020-05-08',title:'关于进一步加快工业互联网发展的通知',content:'各省、自治区、直辖市及计划单列市工业和信息化主管部门，各省、自治区 、直辖市通信管理局，各有关单位。'}, |
|
|
@ -83,28 +185,46 @@ export default { |
|
|
} |
|
|
} |
|
|
</script> |
|
|
</script> |
|
|
<style lang="scss" scoped> |
|
|
<style lang="scss" scoped> |
|
|
|
|
|
.block-content { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
width: 1200px; |
|
|
|
|
|
margin: 0 auto; |
|
|
|
|
|
padding: 50px 0; |
|
|
|
|
|
} |
|
|
.block1 { |
|
|
.block1 { |
|
|
position: relative; |
|
|
position: relative; |
|
|
width:100%; |
|
|
width:100%; |
|
|
margin: 50px 0; |
|
|
background: linear-gradient(180deg, #01496E, #1B5C7D); |
|
|
.block1-carousel { |
|
|
.block1-carousel { |
|
|
position: relative; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
vertical-align: top; |
|
|
vertical-align: top; |
|
|
width: 66.6%; |
|
|
width: 66.6%; |
|
|
height: 450px; |
|
|
height: 450px; |
|
|
|
|
|
.carousel-bg { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
padding: 230px 80px 20px; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
background: rgba(0,0,0,.5); |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
.block1-about { |
|
|
.block1-about { |
|
|
position: relative; |
|
|
position: relative; |
|
|
display: inline-block; |
|
|
display: inline-block; |
|
|
width: 33.3%; |
|
|
width: 33.3%; |
|
|
height: 450px; |
|
|
height: 450px; |
|
|
|
|
|
color: #323232; |
|
|
.about-box { |
|
|
.about-box { |
|
|
position: relative; |
|
|
position: relative; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
|
|
|
padding: 20px; |
|
|
height: 340px; |
|
|
height: 340px; |
|
|
background: url('../../assets/home/about_bg.png'); |
|
|
color: #646464; |
|
|
// background-size: 100% 100%; |
|
|
background: #fff; |
|
|
} |
|
|
} |
|
|
.other-box { |
|
|
.other-box { |
|
|
position: relative; |
|
|
position: relative; |
|
|
@ -118,8 +238,15 @@ export default { |
|
|
line-height: 55px; |
|
|
line-height: 55px; |
|
|
text-align: center; |
|
|
text-align: center; |
|
|
font-size: 20px; |
|
|
font-size: 20px; |
|
|
background: #3b8bb2; |
|
|
&:nth-child(1) { |
|
|
border: 1px solid rgba(255,255,255,0.6); |
|
|
background:#065889; |
|
|
|
|
|
} |
|
|
|
|
|
&:nth-child(2) { |
|
|
|
|
|
background:#0273AC; |
|
|
|
|
|
} |
|
|
|
|
|
&:nth-child(3) { |
|
|
|
|
|
background:#029CE8; |
|
|
|
|
|
} |
|
|
&:hover { |
|
|
&:hover { |
|
|
background: #3b8bb27a; |
|
|
background: #3b8bb27a; |
|
|
} |
|
|
} |
|
|
@ -130,7 +257,197 @@ export default { |
|
|
.block2 { |
|
|
.block2 { |
|
|
position: relative; |
|
|
position: relative; |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
margin: 50xp 0; |
|
|
background: #F3F3F3; |
|
|
|
|
|
.left-box { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
vertical-align: top; |
|
|
|
|
|
width: 200px; |
|
|
|
|
|
height: 400px; |
|
|
|
|
|
z-index: 10; |
|
|
|
|
|
} |
|
|
|
|
|
.center-box { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
vertical-align: top; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: 550px; |
|
|
|
|
|
height: 400px; |
|
|
|
|
|
background: #fff; |
|
|
|
|
|
z-index: 5; |
|
|
|
|
|
} |
|
|
|
|
|
.right-box { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
float: right; |
|
|
|
|
|
vertical-align: top; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: 430px; |
|
|
|
|
|
height: 400px; |
|
|
|
|
|
} |
|
|
|
|
|
.title-box { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
padding: 15px; |
|
|
|
|
|
width: 200px; |
|
|
|
|
|
height: 200px; |
|
|
|
|
|
color: #FFFFFF; |
|
|
|
|
|
background: #8D8D8D; |
|
|
|
|
|
&::after { |
|
|
|
|
|
content: " "; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 15px; |
|
|
|
|
|
height: 15px; |
|
|
|
|
|
right: -8px; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
background: #8D8D8D; |
|
|
|
|
|
transform: translateY(-50%) rotate(45deg); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.is-active { |
|
|
|
|
|
background: #01496E !important; |
|
|
|
|
|
&::after { |
|
|
|
|
|
content: " "; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
width: 15px; |
|
|
|
|
|
height: 15px; |
|
|
|
|
|
right: -8px; |
|
|
|
|
|
top: 50%; |
|
|
|
|
|
transform: translateY(-50%) rotate(45deg); |
|
|
|
|
|
background: #01496E !important; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.meeting { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 190px; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
padding: 0 15px; |
|
|
|
|
|
&:first-child { |
|
|
|
|
|
margin-bottom: 20px; |
|
|
|
|
|
} |
|
|
|
|
|
&:after { |
|
|
|
|
|
content: " "; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
background: rgba(0,0,0,0.5); |
|
|
|
|
|
} |
|
|
|
|
|
&:hover { |
|
|
|
|
|
&:after { |
|
|
|
|
|
background: rgba(0,0,0,0.2); |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.meeting-bg { |
|
|
|
|
|
background: url('../../assets/home/meeting-bg.jpg') no-repeat; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
.forum-bg { |
|
|
|
|
|
background: url('../../assets/home/forum-bg.jpg') no-repeat; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.block3 { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
.tab-box { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: calc(25% - 15px); |
|
|
|
|
|
height: 175px; |
|
|
|
|
|
margin-right: 20px; |
|
|
|
|
|
padding: 15px 40px; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
&:last-child { |
|
|
|
|
|
margin-right: 0; |
|
|
|
|
|
} |
|
|
|
|
|
&:after { |
|
|
|
|
|
content: " "; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
left: 0; |
|
|
|
|
|
top: 0; |
|
|
|
|
|
width: 0; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
background: rgba(0,0,0,0.5); |
|
|
|
|
|
transition:none; |
|
|
|
|
|
// z-index: 5; |
|
|
|
|
|
} |
|
|
|
|
|
&:hover { |
|
|
|
|
|
&:after { |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
transition: All 0.3s ease-in-out; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.pic-bg { |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
height: 100%; |
|
|
|
|
|
} |
|
|
|
|
|
.fruit01-bg { |
|
|
|
|
|
background: url('../../assets/home/fruit01.jpg') no-repeat; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
.fruit02-bg { |
|
|
|
|
|
background: url('../../assets/home/fruit02.jpg') no-repeat; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
.fruit03-bg { |
|
|
|
|
|
background: url('../../assets/home/fruit03.jpg') no-repeat; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
.fruit04-bg { |
|
|
|
|
|
background: url('../../assets/home/fruit04.jpg') no-repeat; |
|
|
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.block4 { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
width: 100%; |
|
|
|
|
|
.tab-box { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
vertical-align: top; |
|
|
|
|
|
width:200px; |
|
|
|
|
|
height: 200px; |
|
|
|
|
|
padding:40px 20px; |
|
|
|
|
|
color: #fff; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
&:nth-child(1) { |
|
|
|
|
|
background: #004471; |
|
|
|
|
|
} |
|
|
|
|
|
&:nth-child(2) { |
|
|
|
|
|
background: #065889; |
|
|
|
|
|
} |
|
|
|
|
|
&:nth-child(3) { |
|
|
|
|
|
background: #0D6EA4; |
|
|
|
|
|
} |
|
|
|
|
|
&:nth-child(4) { |
|
|
|
|
|
background: #1381BB; |
|
|
|
|
|
} |
|
|
|
|
|
&:nth-child(5) { |
|
|
|
|
|
background: #1996D5; |
|
|
|
|
|
} |
|
|
|
|
|
&:nth-child(6) { |
|
|
|
|
|
background: #27A9EA; |
|
|
|
|
|
} |
|
|
|
|
|
.box-pic { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
height: 40px; |
|
|
|
|
|
margin: 15px 0; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
|
|
|
.title-0 { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
text-align: center; |
|
|
|
|
|
font-size: 34px; |
|
|
|
|
|
font-family: Microsoft YaHei; |
|
|
|
|
|
font-weight: bold; |
|
|
|
|
|
line-height: 51px; |
|
|
} |
|
|
} |
|
|
.title-1 { |
|
|
.title-1 { |
|
|
position: relative; |
|
|
position: relative; |
|
|
@ -138,17 +455,17 @@ export default { |
|
|
cursor: pointer; |
|
|
cursor: pointer; |
|
|
height: 60px; |
|
|
height: 60px; |
|
|
line-height: 60px; |
|
|
line-height: 60px; |
|
|
margin: 15px; |
|
|
margin: 15px 0; |
|
|
font-size: 26px; |
|
|
font-size: 28px; |
|
|
color: #fff; |
|
|
// color: #fff; |
|
|
&::before { |
|
|
&::before { |
|
|
content: " "; |
|
|
content: " "; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
left: 0; |
|
|
left: 0; |
|
|
bottom: 0px; |
|
|
bottom: 0px; |
|
|
width: 50px; |
|
|
width: 50px; |
|
|
height: 2px; |
|
|
height: 4px; |
|
|
background: #fff; |
|
|
background: #d1d1d1; |
|
|
transition: All 0.3s ease-in-out; |
|
|
transition: All 0.3s ease-in-out; |
|
|
} |
|
|
} |
|
|
&:hover { |
|
|
&:hover { |
|
|
@ -160,9 +477,15 @@ export default { |
|
|
.content { |
|
|
.content { |
|
|
position: relative; |
|
|
position: relative; |
|
|
line-height: 30px; |
|
|
line-height: 30px; |
|
|
margin: 15px; |
|
|
|
|
|
font-size: 14px; |
|
|
font-size: 14px; |
|
|
color: rgba(255,255,255,0.8); |
|
|
// color: rgba(255,255,255,0.8); |
|
|
|
|
|
} |
|
|
|
|
|
.mybutton-1 { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
border: 1px solid; |
|
|
|
|
|
padding: 6px 10px; |
|
|
|
|
|
font-size: 12px; |
|
|
|
|
|
border-radius: 3px; |
|
|
} |
|
|
} |
|
|
.title-2 { |
|
|
.title-2 { |
|
|
position: relative; |
|
|
position: relative; |
|
|
@ -172,70 +495,84 @@ export default { |
|
|
line-height: 60px; |
|
|
line-height: 60px; |
|
|
margin: 15px; |
|
|
margin: 15px; |
|
|
font-size: 26px; |
|
|
font-size: 26px; |
|
|
color: #000; |
|
|
} |
|
|
&::before { |
|
|
.bottom-line { |
|
|
content: " "; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
bottom: -26px; |
|
|
left: 0; |
|
|
left: 50%; |
|
|
bottom: 0px; |
|
|
transform: translateX(-50%); |
|
|
width: 50px; |
|
|
width: 50px; |
|
|
height: 2px; |
|
|
height: 4px; |
|
|
background: rgb(58, 75, 228); |
|
|
border: 2px solid; |
|
|
transition: All 0.3s ease-in-out; |
|
|
z-index: 10; |
|
|
|
|
|
} |
|
|
|
|
|
.notice-list { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
background-color: rgba(255,255,255,0); |
|
|
|
|
|
cursor: pointer; |
|
|
|
|
|
color: #999999; |
|
|
|
|
|
font-family:PingFang SC; |
|
|
|
|
|
border-bottom: 1px dotted #dcdcdc; |
|
|
|
|
|
margin: 10px 30px; |
|
|
|
|
|
.date-block { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
vertical-align: top; |
|
|
|
|
|
width: 67px; |
|
|
|
|
|
height: 67px; |
|
|
|
|
|
margin: 10px 10px 10px 0; |
|
|
|
|
|
padding: 13px 0; |
|
|
|
|
|
background-color: #E4E4E4; |
|
|
} |
|
|
} |
|
|
&:hover { |
|
|
.content-block { |
|
|
|
|
|
position: relative; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: calc(100% - 90px); |
|
|
|
|
|
height: 48px; |
|
|
|
|
|
padding: 0 15px; |
|
|
&::before { |
|
|
&::before { |
|
|
width: 100%; |
|
|
content: " "; |
|
|
|
|
|
position: absolute; |
|
|
|
|
|
top: 28%; |
|
|
|
|
|
left: -10px; |
|
|
|
|
|
width: 6px; |
|
|
|
|
|
height: 6px; |
|
|
|
|
|
background: #8D8D8D; |
|
|
|
|
|
border-radius: 50%; |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
.content-block-first { |
|
|
.notice-list { |
|
|
position: relative; |
|
|
|
|
|
display: inline-block; |
|
|
|
|
|
width: calc(100% - 90px); |
|
|
height: 94px; |
|
|
height: 94px; |
|
|
background-color: rgba(255,255,255,0); |
|
|
padding: 0 15px; |
|
|
color: #999999; |
|
|
} |
|
|
font-family:PingFang SC; |
|
|
.text-date { |
|
|
border-bottom: 1px dotted #dcdcdc; |
|
|
text-align: center; |
|
|
margin: 10px 20px; |
|
|
font-size: 14px; |
|
|
.date-block { |
|
|
vertical-align: super; |
|
|
position: relative; |
|
|
} |
|
|
display: inline-block; |
|
|
.text-title { |
|
|
vertical-align: top; |
|
|
font-size: 18px; |
|
|
width: 67px; |
|
|
margin: 6px 0; |
|
|
height: 67px; |
|
|
font-weight:500; |
|
|
margin: 10px 10px 10px 0; |
|
|
color: #666666; |
|
|
padding: 13px 0; |
|
|
white-space: nowrap; |
|
|
background-color: #E4E4E4; |
|
|
overflow: hidden; |
|
|
} |
|
|
text-overflow: ellipsis; |
|
|
.content-block { |
|
|
} |
|
|
position: relative; |
|
|
.text-content { |
|
|
display: inline-block; |
|
|
font-size: 14px; |
|
|
width: calc(100% - 90px); |
|
|
overflow: hidden; |
|
|
padding: 0 15px; |
|
|
display: -webkit-box; |
|
|
} |
|
|
-webkit-line-clamp:2; |
|
|
.text-Date { |
|
|
-webkit-box-orient: vertical; |
|
|
text-align: center; |
|
|
} |
|
|
font-size: 16px; |
|
|
&:hover { |
|
|
} |
|
|
|
|
|
.text-title { |
|
|
.text-title { |
|
|
font-size: 18px; |
|
|
color: #3893c7; |
|
|
margin: 6px 0; |
|
|
|
|
|
font-weight:500; |
|
|
|
|
|
color: #666666; |
|
|
|
|
|
white-space: nowrap; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
text-overflow: ellipsis; |
|
|
|
|
|
} |
|
|
|
|
|
.text-content { |
|
|
|
|
|
font-size: 14px; |
|
|
|
|
|
overflow: hidden; |
|
|
|
|
|
display: -webkit-box; |
|
|
|
|
|
-webkit-line-clamp:2; |
|
|
|
|
|
-webkit-box-orient: vertical; |
|
|
|
|
|
} |
|
|
|
|
|
&:hover { |
|
|
|
|
|
.text-title { |
|
|
|
|
|
color: #3893c7; |
|
|
|
|
|
} |
|
|
|
|
|
} |
|
|
} |
|
|
} |
|
|
} |
|
|
|
|
|
} |
|
|
</style> |
|
|
</style> |
DESKTOP-00SUCB6\Administrator
5 years ago
