|
|
|
|
@ -13,18 +13,44 @@ |
|
|
|
|
</template> |
|
|
|
|
</ul> |
|
|
|
|
|
|
|
|
|
<div class="tab-content"> |
|
|
|
|
<div class="org"> |
|
|
|
|
<div class="left"> |
|
|
|
|
<h6>组织架构</h6> |
|
|
|
|
<p class="text">根据《深圳综合粒子设施理事会章程》有关规定，研究院实行理事会领导下的院长负责制，理事长由市长担任，副理事长由分管发改、科创副市长，以及中山大学、南方科技大学校长担任，理事成员包括市政府秘书长、相关副秘书长及政府部门、高等院校、科研机构、龙头企业相关负责同志。</p> |
|
|
|
|
<div class="block history"> |
|
|
|
|
<div class="inner"> |
|
|
|
|
<h2 class="wow fadeInLeft">发展历程</h2> |
|
|
|
|
<p class="en">DEVELOPMENT HISTORY</p> |
|
|
|
|
|
|
|
|
|
<div class="event"> |
|
|
|
|
<ul class="time"> |
|
|
|
|
<li class="active">2022</li> |
|
|
|
|
<li>2021</li> |
|
|
|
|
<li>2020</li> |
|
|
|
|
</ul> |
|
|
|
|
<div class="right"> |
|
|
|
|
<h6 class="year">2022</h6> |
|
|
|
|
<ul class="list"> |
|
|
|
|
<li> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<p class="date">10月11日</p> |
|
|
|
|
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
|
|
|
|
</div> |
|
|
|
|
<img src="@/assets/images/channel1.png" alt="" class="pic"> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<p class="date">10月11日</p> |
|
|
|
|
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
|
|
|
|
</div> |
|
|
|
|
<img src="@/assets/images/channel1.png" alt="" class="pic"> |
|
|
|
|
</li> |
|
|
|
|
<li> |
|
|
|
|
<div class="texts"> |
|
|
|
|
<p class="date">10月11日</p> |
|
|
|
|
<p class="text">深圳综合粒子设施研究院加入国际超导加速器联盟</p> |
|
|
|
|
</div> |
|
|
|
|
</li> |
|
|
|
|
</ul> |
|
|
|
|
</div> |
|
|
|
|
<img class="pic" src="@/assets/images/about.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
<div class="lg-bg"> |
|
|
|
|
<img width="100%" src="@/assets/images/about-bg.png" alt=""> |
|
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
</div> |
|
|
|
|
</div> |
|
|
|
|
</template> |
|
|
|
|
@ -70,6 +96,10 @@ export default { |
|
|
|
|
<style lang="scss" scoped> |
|
|
|
|
@import url(../../plugins/wow/animate.css); |
|
|
|
|
@import "../../styles/page/page.scss"; |
|
|
|
|
.wrap { |
|
|
|
|
background: url(http://10.10.11.7/images/overviewDevHistory/1.png) (right 505px)/auto no-repeat, |
|
|
|
|
url(http://10.10.11.7/images/overviewDevHistory/2.png) (left bottom)/auto no-repeat; |
|
|
|
|
} |
|
|
|
|
.tabs { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: center; |
|
|
|
|
@ -88,40 +118,101 @@ export default { |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.tab-content { |
|
|
|
|
padding: 77px 0; |
|
|
|
|
.history { |
|
|
|
|
h2 { |
|
|
|
|
position: relative; |
|
|
|
|
font-size: 2.2rem; |
|
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #1C1C1C; |
|
|
|
|
} |
|
|
|
|
.en { |
|
|
|
|
margin: -15px 0 40px; |
|
|
|
|
font-size: 2.2rem; |
|
|
|
|
font-family: PingFangSC-Light, PingFang SC; |
|
|
|
|
font-weight: 300; |
|
|
|
|
color: #E3E3E3; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.org { |
|
|
|
|
.event { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
justify-content: center; |
|
|
|
|
.time { |
|
|
|
|
padding-right: 10px; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
border-right: 1px solid #ddd; |
|
|
|
|
li { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: flex-end; |
|
|
|
|
align-items: center; |
|
|
|
|
width: 1294px; |
|
|
|
|
padding: 9px 86px 29px 116px; |
|
|
|
|
margin: 0 auto 50px; |
|
|
|
|
background: #FCFCFC; |
|
|
|
|
border-radius: 160px; |
|
|
|
|
.left { |
|
|
|
|
width: 705px; |
|
|
|
|
} |
|
|
|
|
h6 { |
|
|
|
|
width: 190px; |
|
|
|
|
padding-right: 45px; |
|
|
|
|
line-height: 60px; |
|
|
|
|
font-size: 1.4rem; |
|
|
|
|
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-weight: 600; |
|
|
|
|
font-family: SFProDisplay-Semibold, SFProDisplay; |
|
|
|
|
color: #666; |
|
|
|
|
box-shadow: inset 0px -1px 0px 0px #DDDDDD; |
|
|
|
|
cursor: pointer; |
|
|
|
|
&.active { |
|
|
|
|
font-weight: 800; |
|
|
|
|
color: #1A81F4; |
|
|
|
|
background: linear-gradient(90deg, #FFFFFF 0%, #F3F8FF 100%); |
|
|
|
|
&:before { |
|
|
|
|
content: ''; |
|
|
|
|
width: 18px; |
|
|
|
|
height: 18px; |
|
|
|
|
background: url(http://10.10.11.7/images/overviewDevHistory/3.png) no-repeat; |
|
|
|
|
margin-right: 20px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.year { |
|
|
|
|
margin: 0 0 20px 20px; |
|
|
|
|
font-size: 3.8rem; |
|
|
|
|
font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN; |
|
|
|
|
font-weight: 800; |
|
|
|
|
color: #1A81F4; |
|
|
|
|
} |
|
|
|
|
.list { |
|
|
|
|
border-top: 1px solid #ddd; |
|
|
|
|
li { |
|
|
|
|
display: flex; |
|
|
|
|
justify-content: space-between; |
|
|
|
|
align-items: center; |
|
|
|
|
padding: 30px; |
|
|
|
|
border-bottom: 1px solid #ddd; |
|
|
|
|
} |
|
|
|
|
.texts { |
|
|
|
|
width: 500px; |
|
|
|
|
margin-right: 100px; |
|
|
|
|
} |
|
|
|
|
.date { |
|
|
|
|
margin-bottom: 15px; |
|
|
|
|
font-size: 1.2rem; |
|
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
|
font-weight: 600; |
|
|
|
|
color: #333; |
|
|
|
|
} |
|
|
|
|
.text { |
|
|
|
|
margin-top: 10px; |
|
|
|
|
font-size: 1rem; |
|
|
|
|
color: #020202; |
|
|
|
|
line-height: 2rem; |
|
|
|
|
font-size: 1.1rem; |
|
|
|
|
color: #333; |
|
|
|
|
@include mul-ellipsis(3); |
|
|
|
|
&:before { |
|
|
|
|
content: ''; |
|
|
|
|
display: inline-block; |
|
|
|
|
width: 7px; |
|
|
|
|
height: 7px; |
|
|
|
|
margin: 0 10px; |
|
|
|
|
background-color: #666; |
|
|
|
|
transform: rotate(45deg); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.pic { |
|
|
|
|
width: 320px; |
|
|
|
|
height: 282px; |
|
|
|
|
width: 350px; |
|
|
|
|
height: 195px; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
.lg-bg { |
|
|
|
|
width: 85%; |
|
|
|
|
margin: 0 auto; |
|
|
|
|
} |
|
|
|
|
</style> |
