|
|
|
@ -4,11 +4,9 @@ |
|
|
|
<div class="actions"> |
|
|
|
<div class="actions"> |
|
|
|
<p class="page-name">页面设置/IASF中文首页</p> |
|
|
|
<p class="page-name">页面设置/IASF中文首页</p> |
|
|
|
<div> |
|
|
|
<div> |
|
|
|
<el-button type="primary" |
|
|
|
<el-button type="primary" @click="preview">预览</el-button> |
|
|
|
@click="preview">预览</el-button> |
|
|
|
|
|
|
|
<el-button @click="save(0)">保存为草稿</el-button> |
|
|
|
<el-button @click="save(0)">保存为草稿</el-button> |
|
|
|
<el-button type="primary" |
|
|
|
<el-button type="primary" @click="save(1)">发布</el-button> |
|
|
|
@click="save(1)">发布</el-button> |
|
|
|
|
|
|
|
<el-button @click="back">放弃编辑</el-button> |
|
|
|
<el-button @click="back">放弃编辑</el-button> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -18,54 +16,39 @@ |
|
|
|
<el-carousel height="500px" |
|
|
|
<el-carousel height="500px" |
|
|
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
|
|
|
:indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'"> |
|
|
|
<template v-for="(item, i) in modules[0].list"> |
|
|
|
<template v-for="(item, i) in modules[0].list"> |
|
|
|
<el-carousel-item v-if="item.pic && item.isEnable" |
|
|
|
<el-carousel-item v-if="item.pic && item.isEnable" :key="i"> |
|
|
|
:key="i"> |
|
|
|
<img width="100%" height="100%" :src="item.pic" alt=""> |
|
|
|
<img width="100%" |
|
|
|
|
|
|
|
height="100%" |
|
|
|
|
|
|
|
:src="item.pic" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
</el-carousel-item> |
|
|
|
</el-carousel-item> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
</el-carousel> |
|
|
|
</el-carousel> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(0)">点击更换banner与链接</div> |
|
|
|
@click="toSet(0)">点击更换banner与链接</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="block"> |
|
|
|
<div class="block"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="c-wrap"> |
|
|
|
<div class="c-wrap"> |
|
|
|
<h2 class="b-title news-title">{{ modules[1].form.title }}</h2> |
|
|
|
<h2 class="b-title news-title">{{ modules[1].form.title }}</h2> |
|
|
|
<p class="intro wow fadeInUp" |
|
|
|
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.des }}</p> |
|
|
|
data-wow-delay="0.5s">{{ modules[1].form.des }}</p> |
|
|
|
<div class="cover" @click="toSet(1)">点击更换标题与描述</div> |
|
|
|
<div class="cover" |
|
|
|
|
|
|
|
@click="toSet(1)">点击更换标题与描述</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ul class="card"> |
|
|
|
<ul class="card"> |
|
|
|
<li class="wow fadeInDown" |
|
|
|
<li class="wow fadeInDown" data-wow-delay="0.2s"> |
|
|
|
data-wow-delay="0.2s"> |
|
|
|
<img class="pic" :src="modules[2].form.pic" alt=""> |
|
|
|
<img class="pic" |
|
|
|
|
|
|
|
:src="modules[2].form.pic" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<div class="name">SILF</div> |
|
|
|
<div class="name">SILF</div> |
|
|
|
<h6>{{ modules[2].form.title }}</h6> |
|
|
|
<h6>{{ modules[2].form.title }}</h6> |
|
|
|
<p class="des">{{ modules[2].form.des }}</p> |
|
|
|
<p class="des">{{ modules[2].form.des }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(2)">点击更换图片、标题、概述与链接</div> |
|
|
|
@click="toSet(2)">点击更换图片、标题、概述与链接</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li class="wow fadeInDown" |
|
|
|
<li class="wow fadeInDown" data-wow-delay="0.6s"> |
|
|
|
data-wow-delay="0.6s"> |
|
|
|
<img class="pic" :src="modules[3].form.pic" alt=""> |
|
|
|
<img class="pic" |
|
|
|
|
|
|
|
:src="modules[3].form.pic" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<div class="name">S³FEL</div> |
|
|
|
<div class="name">S³FEL</div> |
|
|
|
<h6>{{ modules[3].form.title }}</h6> |
|
|
|
<h6>{{ modules[3].form.title }}</h6> |
|
|
|
<p class="des">{{ modules[3].form.des }}</p> |
|
|
|
<p class="des">{{ modules[3].form.des }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(3)">点击更换图片、标题、概述与链接</div> |
|
|
|
@click="toSet(3)">点击更换图片、标题、概述与链接</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -75,106 +58,83 @@ |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="c-wrap"> |
|
|
|
<div class="c-wrap"> |
|
|
|
<h2 class="b-title news-title">{{ modules[4].form.title }}</h2> |
|
|
|
<h2 class="b-title news-title">{{ modules[4].form.title }}</h2> |
|
|
|
<p class="intro wow fadeInUp" |
|
|
|
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p> |
|
|
|
data-wow-delay="0.5s">{{ modules[4].form.des }}</p> |
|
|
|
<div class="cover" @click="toSet(4)">点击更换标题与描述</div> |
|
|
|
<div class="cover" |
|
|
|
|
|
|
|
@click="toSet(4)">点击更换标题与描述</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="c-wrap"> |
|
|
|
<div class="c-wrap"> |
|
|
|
<div class="news-banner"> |
|
|
|
<div class="news-banner"> |
|
|
|
<img style="width: 50%;height: 410px;overflow: hidden;" |
|
|
|
<img style="width: 50%;height: 410px;overflow: hidden;" width="100%" height="480" |
|
|
|
width="100%" |
|
|
|
src="https://huorantech.com/images/about/5.png" alt=""> |
|
|
|
height="480" |
|
|
|
|
|
|
|
src="https://huorantech.com/images/about/5.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="right"> |
|
|
|
<div class="right"> |
|
|
|
<h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and innovation. We are open and creative</h6> |
|
|
|
<h6>IASF is driven to serve the Science and industry, and solve grand challenges through research and |
|
|
|
<div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay area, the New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao Greater Bay </div> |
|
|
|
innovation. We are open and creative</h6> |
|
|
|
|
|
|
|
<div class="des">Innovation centers are distributed in the bay areas, such as the San Francisco Bay |
|
|
|
|
|
|
|
area, the |
|
|
|
|
|
|
|
New York Bay area, and the Tokyo Bay area in Japan. And the Guangdong-Hong Kong-Macao Greater Bay |
|
|
|
|
|
|
|
</div> |
|
|
|
<p class="meta">2022-07-24 | Research</p> |
|
|
|
<p class="meta">2022-07-24 | Research</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<ul class="news"> |
|
|
|
<ul class="news"> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" src="https://huorantech.com/images/about/5.png" alt=""> |
|
|
|
src="https://huorantech.com/images/about/5.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<p class="meta">2022-07-24 | 综合新闻</p> |
|
|
|
<p class="meta">2022-07-24 | 综合新闻</p> |
|
|
|
<div class="des">X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</div> |
|
|
|
<div class="des">X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</div> |
|
|
|
<img class="arrow" |
|
|
|
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
|
|
|
src="@/assets/images/arrow.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" src="https://huorantech.com/images/about/5.png" alt=""> |
|
|
|
src="https://huorantech.com/images/about/5.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<p class="meta">2022-07-24 | 建设进展</p> |
|
|
|
<p class="meta">2022-07-24 | 建设进展</p> |
|
|
|
<div class="des">自由电子激光装置调试及运行过程中提供稳定可靠的单发辐射脉冲纵向信息</div> |
|
|
|
<div class="des">自由电子激光装置调试及运行过程中提供稳定可靠的单发辐射脉冲纵向信息</div> |
|
|
|
<img class="arrow" |
|
|
|
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
|
|
|
src="@/assets/images/arrow.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" src="https://huorantech.com/images/about/5.png" alt=""> |
|
|
|
src="https://huorantech.com/images/about/5.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<p class="meta">2022-07-24 | 学术动态</p> |
|
|
|
<p class="meta">2022-07-24 | 学术动态</p> |
|
|
|
<div class="des">基于上海软X射线自由电子激光试验装置，科研人员对这一方法进行了实验验证</div> |
|
|
|
<div class="des">基于上海软X射线自由电子激光试验装置，科研人员对这一方法进行了实验验证</div> |
|
|
|
<img class="arrow" |
|
|
|
<img class="arrow" src="@/assets/images/arrow.png" alt=""> |
|
|
|
src="@/assets/images/arrow.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(5)">关联栏目</div> |
|
|
|
@click="toSet(5)">关联栏目</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<ul class="news-carousel"> |
|
|
|
<ul class="news-carousel"> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" src="https://huorantech.com/images/about/5.png" alt=""> |
|
|
|
src="https://huorantech.com/images/about/5.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<h6>媒体关注</h6> |
|
|
|
<h6>媒体关注</h6> |
|
|
|
<p class="meta">来源人民日报</p> |
|
|
|
<p class="meta">来源人民日报</p> |
|
|
|
<div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div> |
|
|
|
<div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div> |
|
|
|
<p class="date">2022-07-24</p> |
|
|
|
<p class="date">2022-07-24</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(6)">关联栏目</div> |
|
|
|
@click="toSet(6)">关联栏目</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" src="https://huorantech.com/images/about/5.png" alt=""> |
|
|
|
src="https://huorantech.com/images/about/5.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<h6>媒体关注</h6> |
|
|
|
<h6>媒体关注</h6> |
|
|
|
<p class="meta">来源人民日报</p> |
|
|
|
<p class="meta">来源人民日报</p> |
|
|
|
<div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div> |
|
|
|
<div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div> |
|
|
|
<p class="date">2022-07-24</p> |
|
|
|
<p class="date">2022-07-24</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(7)">关联栏目</div> |
|
|
|
@click="toSet(7)">关联栏目</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" src="https://huorantech.com/images/about/5.png" alt=""> |
|
|
|
src="https://huorantech.com/images/about/5.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<h6>媒体关注</h6> |
|
|
|
<h6>媒体关注</h6> |
|
|
|
<p class="meta">来源人民日报</p> |
|
|
|
<p class="meta">来源人民日报</p> |
|
|
|
<div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div> |
|
|
|
<div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div> |
|
|
|
<p class="date">2022-07-24</p> |
|
|
|
<p class="date">2022-07-24</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(8)">关联栏目</div> |
|
|
|
@click="toSet(8)">关联栏目</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -184,16 +144,12 @@ |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="c-wrap"> |
|
|
|
<div class="c-wrap"> |
|
|
|
<h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2> |
|
|
|
<h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2> |
|
|
|
<p class="intro wow fadeInUp" |
|
|
|
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[9].form.des }}</p> |
|
|
|
data-wow-delay="0.5s">{{ modules[9].form.des }}</p> |
|
|
|
<div class="cover" @click="toSet(9)">点击更换标题与描述</div> |
|
|
|
<div class="cover" |
|
|
|
|
|
|
|
@click="toSet(9)">点击更换标题与描述</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<ul class="people"> |
|
|
|
<ul class="people"> |
|
|
|
<li class="wow fadeInDown"> |
|
|
|
<li class="wow fadeInDown"> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" src="https://huorantech.com/images/careers/6.png" alt=""> |
|
|
|
src="https://huorantech.com/images/careers/6.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<h6>王晓凡</h6> |
|
|
|
<h6>王晓凡</h6> |
|
|
|
<p class="job">岗位：物理组工程师</p> |
|
|
|
<p class="job">岗位：物理组工程师</p> |
|
|
|
@ -202,9 +158,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li class="wow fadeInDown"> |
|
|
|
<li class="wow fadeInDown"> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" src="https://huorantech.com/images/careers/7.png" alt=""> |
|
|
|
src="https://huorantech.com/images/careers/7.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<h6>王晓凡</h6> |
|
|
|
<h6>王晓凡</h6> |
|
|
|
<p class="job">岗位：物理组工程师</p> |
|
|
|
<p class="job">岗位：物理组工程师</p> |
|
|
|
@ -213,9 +167,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li class="wow fadeInDown"> |
|
|
|
<li class="wow fadeInDown"> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" src="https://huorantech.com/images/careers/8.png" alt=""> |
|
|
|
src="https://huorantech.com/images/careers/8.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="texts"> |
|
|
|
<div class="texts"> |
|
|
|
<h6>王晓凡</h6> |
|
|
|
<h6>王晓凡</h6> |
|
|
|
<p class="job">岗位：物理组工程师</p> |
|
|
|
<p class="job">岗位：物理组工程师</p> |
|
|
|
@ -223,8 +175,7 @@ |
|
|
|
<div class="text">“我们做物理设计，就好像盖房子画设计图，决不能眼界太窄，不能指望房子过程中或者装修时再去提高，一定要保持国际先进的视野和高度，具备一定的超前性和前瞻性。”</div> |
|
|
|
<div class="text">“我们做物理设计，就好像盖房子画设计图，决不能眼界太窄，不能指望房子过程中或者装修时再去提高，一定要保持国际先进的视野和高度，具备一定的超前性和前瞻性。”</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(10)">关联栏目</div> |
|
|
|
@click="toSet(10)">关联栏目</div> |
|
|
|
|
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -233,24 +184,17 @@ |
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<div class="c-wrap"> |
|
|
|
<div class="c-wrap"> |
|
|
|
<h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2> |
|
|
|
<h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2> |
|
|
|
<p class="intro wow fadeInUp" |
|
|
|
<p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[11].form.des }}</p> |
|
|
|
data-wow-delay="0.5s">{{ modules[11].form.des }}</p> |
|
|
|
<div class="cover" @click="toSet(11)">点击更换标题与描述</div> |
|
|
|
<div class="cover" |
|
|
|
|
|
|
|
@click="toSet(11)">点击更换标题与描述</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="talent"> |
|
|
|
<div class="talent"> |
|
|
|
<div class="left wow fadeInLeft" |
|
|
|
<div class="left wow fadeInLeft" data-wow-delay="0.5s"> |
|
|
|
data-wow-delay="0.5s"> |
|
|
|
|
|
|
|
<h6>{{ modules[12].form.title }}</h6> |
|
|
|
<h6>{{ modules[12].form.title }}</h6> |
|
|
|
<p class="meta">{{ modules[12].form.subTitle }}</p> |
|
|
|
<p class="meta">{{ modules[12].form.subTitle }}</p> |
|
|
|
<div class="text" |
|
|
|
<div class="text" v-html="modules[12].form.des"></div> |
|
|
|
v-html="modules[12].form.des"></div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<img :src="modules[11].form.pic" |
|
|
|
<img :src="modules[11].form.pic" alt="" class="pic"> |
|
|
|
alt="" |
|
|
|
<div class="cover" @click="toSet(12)">点击更换标题、描述、链接与图片</div> |
|
|
|
class="pic"> |
|
|
|
|
|
|
|
<div class="cover" |
|
|
|
|
|
|
|
@click="toSet(12)">点击更换标题、描述、链接与图片</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -259,83 +203,55 @@ |
|
|
|
<div class="inner c-wrap"> |
|
|
|
<div class="inner c-wrap"> |
|
|
|
<div class="left"> |
|
|
|
<div class="left"> |
|
|
|
<h6>{{ modules[13].form.title }}</h6> |
|
|
|
<h6>{{ modules[13].form.title }}</h6> |
|
|
|
<div class="text" |
|
|
|
<div class="text" v-html="modules[13].form.des"></div> |
|
|
|
v-html="modules[13].form.des"></div> |
|
|
|
<img src="@/assets/images/arrow-white.png" alt=""> |
|
|
|
<img src="@/assets/images/arrow-white.png" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<img class="pic" |
|
|
|
<img class="pic" :src="modules[13].form.pic" alt=""> |
|
|
|
:src="modules[13].form.pic" |
|
|
|
<div class="cover" @click="toSet(13)">点击更换标题、描述、链接与图片</div> |
|
|
|
alt=""> |
|
|
|
|
|
|
|
<div class="cover" |
|
|
|
|
|
|
|
@click="toSet(13)">点击更换标题、描述、链接与图片</div> |
|
|
|
|
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<div class="block" |
|
|
|
<div class="block" style="margin-top: 100px"> |
|
|
|
style="margin-top: 100px"> |
|
|
|
|
|
|
|
<div class="inner"> |
|
|
|
<div class="inner"> |
|
|
|
<ul class="entry"> |
|
|
|
<ul class="entry"> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="icon" |
|
|
|
<img class="icon" :src="modules[14].form.pic" alt=""> |
|
|
|
:src="modules[14].form.pic" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<p class="text">{{ modules[14].form.title }}</p> |
|
|
|
<p class="text">{{ modules[14].form.title }}</p> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(14)">点击更换</div> |
|
|
|
@click="toSet(14)">点击更换</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="icon" |
|
|
|
<img class="icon" :src="modules[15].form.pic" alt=""> |
|
|
|
:src="modules[15].form.pic" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<p class="text">{{ modules[15].form.title }}</p> |
|
|
|
<p class="text">{{ modules[15].form.title }}</p> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(15)">点击更换</div> |
|
|
|
@click="toSet(15)">点击更换</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="icon" |
|
|
|
<img class="icon" :src="modules[16].form.pic" alt=""> |
|
|
|
:src="modules[16].form.pic" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<p class="text">{{ modules[16].form.title }}</p> |
|
|
|
<p class="text">{{ modules[16].form.title }}</p> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(16)">点击更换</div> |
|
|
|
@click="toSet(16)">点击更换</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="icon" |
|
|
|
<img class="icon" :src="modules[17].form.pic" alt=""> |
|
|
|
:src="modules[17].form.pic" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<p class="text">{{ modules[17].form.title }}</p> |
|
|
|
<p class="text">{{ modules[17].form.title }}</p> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(17)">点击更换</div> |
|
|
|
@click="toSet(17)">点击更换</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<li> |
|
|
|
<li> |
|
|
|
<img class="icon" |
|
|
|
<img class="icon" :src="modules[18].form.pic" alt=""> |
|
|
|
:src="modules[18].form.pic" |
|
|
|
|
|
|
|
alt=""> |
|
|
|
|
|
|
|
<p class="text">{{ modules[18].form.title }}</p> |
|
|
|
<p class="text">{{ modules[18].form.title }}</p> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(18)">点击更换</div> |
|
|
|
@click="toSet(18)">点击更换</div> |
|
|
|
|
|
|
|
</li> |
|
|
|
</li> |
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
|
|
|
|
|
|
|
|
<Module ref="module" |
|
|
|
<Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" /> |
|
|
|
:data.sync="curData" |
|
|
|
|
|
|
|
:visible.sync="diaVisible" |
|
|
|
|
|
|
|
@moduleSubmit="moduleSubmit" /> |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<ul class="tools"> |
|
|
|
<ul class="tools"> |
|
|
|
<li v-for="(item, i) in modules[19].list" |
|
|
|
<li v-for="(item, i) in modules[19].list" :key="i"> |
|
|
|
:key="i"> |
|
|
|
<img :src="'https://huorantech.com/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'" alt="" class="icon"> |
|
|
|
<img :src="'https://huorantech.com/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'" |
|
|
|
|
|
|
|
alt="" |
|
|
|
|
|
|
|
class="icon"> |
|
|
|
|
|
|
|
{{ item.title }} |
|
|
|
{{ item.title }} |
|
|
|
</li> |
|
|
|
</li> |
|
|
|
<div class="cover" |
|
|
|
<div class="cover" @click="toSet(19)">点击更换导航</div> |
|
|
|
@click="toSet(19)">点击更换导航</div> |
|
|
|
|
|
|
|
</ul> |
|
|
|
</ul> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
</template> |
|
|
|
@ -377,65 +293,80 @@ export default { |
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped> |
|
|
|
<style lang="scss" scoped> |
|
|
|
@import '../../../styles/page/page.scss'; |
|
|
|
@import '../../../styles/page/page.scss'; |
|
|
|
|
|
|
|
|
|
|
|
.iasf-banner { |
|
|
|
.iasf-banner { |
|
|
|
height: 600px; |
|
|
|
height: 600px; |
|
|
|
|
|
|
|
|
|
|
|
img { |
|
|
|
img { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
.texts { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
top: 50%; |
|
|
|
top: 50%; |
|
|
|
left: 120px; |
|
|
|
left: 120px; |
|
|
|
|
|
|
|
|
|
|
|
h6, |
|
|
|
h6, |
|
|
|
.text { |
|
|
|
.text { |
|
|
|
padding: 20px 15px; |
|
|
|
padding: 20px 15px; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
background-color: rgba(0, 0, 0, 0.29); |
|
|
|
background-color: rgba(0, 0, 0, 0.29); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
margin-bottom: 30px; |
|
|
|
margin-bottom: 30px; |
|
|
|
font-size: 3rem; |
|
|
|
font-size: 3rem; |
|
|
|
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; |
|
|
|
font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
.text { |
|
|
|
font-size: 1.1rem; |
|
|
|
font-size: 1.1rem; |
|
|
|
font-family: AppleSystemUIFont; |
|
|
|
font-family: AppleSystemUIFont; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.block { |
|
|
|
.block { |
|
|
|
padding-top: 3.15rem; |
|
|
|
padding-top: 3.15rem; |
|
|
|
|
|
|
|
|
|
|
|
.b-title { |
|
|
|
.b-title { |
|
|
|
font-size: 2.25rem; |
|
|
|
font-size: 2.25rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.intro { |
|
|
|
.intro { |
|
|
|
font-size: 1.35rem; |
|
|
|
font-size: 1.35rem; |
|
|
|
margin-bottom: 3.6rem; |
|
|
|
margin-bottom: 3.6rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.card { |
|
|
|
.card { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
li { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
width: 47%; |
|
|
|
width: 47%; |
|
|
|
height: 366px; |
|
|
|
height: 366px; |
|
|
|
transition: 0.3s; |
|
|
|
transition: 0.3s; |
|
|
|
overflow: hidden; |
|
|
|
overflow: hidden; |
|
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
.project { |
|
|
|
.project { |
|
|
|
top: -100%; |
|
|
|
top: -100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
.texts { |
|
|
|
top: 0; |
|
|
|
top: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
.pic { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: auto; |
|
|
|
height: auto; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
.texts { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
top: 0; |
|
|
|
@ -451,10 +382,12 @@ export default { |
|
|
|
background-color: rgba(0, 0, 0, 0.3); |
|
|
|
background-color: rgba(0, 0, 0, 0.3); |
|
|
|
transition: 0.3s; |
|
|
|
transition: 0.3s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.name { |
|
|
|
.name { |
|
|
|
font-size: 2rem; |
|
|
|
font-size: 2rem; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
margin: 1rem 0; |
|
|
|
margin: 1rem 0; |
|
|
|
line-height: 2rem; |
|
|
|
line-height: 2rem; |
|
|
|
@ -462,40 +395,51 @@ export default { |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
@include mul-ellipsis(2); |
|
|
|
@include mul-ellipsis(2); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.des { |
|
|
|
.des { |
|
|
|
font-size: 1.2rem; |
|
|
|
font-size: 1.2rem; |
|
|
|
line-height: 30px; |
|
|
|
line-height: 30px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.news-title:after { |
|
|
|
.news-title:after { |
|
|
|
display: none; |
|
|
|
display: none; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.news-banner { |
|
|
|
.news-banner { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
.pic { |
|
|
|
transition: 0.5s; |
|
|
|
transition: 0.5s; |
|
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
transform: scale(1.3); |
|
|
|
transform: scale(1.3); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.right { |
|
|
|
.right { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
width: 50%; |
|
|
|
width: 50%; |
|
|
|
padding: 50px 50px 30px; |
|
|
|
padding: 50px 50px 30px; |
|
|
|
background: #1583ff; |
|
|
|
background: #1583ff; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
font-size: 1.34rem; |
|
|
|
font-size: 1.34rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.des { |
|
|
|
.des { |
|
|
|
font-size: 1.02rem; |
|
|
|
font-size: 1.02rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
.meta { |
|
|
|
font-size: 1.04rem; |
|
|
|
font-size: 1.04rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
&:hover { |
|
|
|
&:hover { |
|
|
|
background: #465f85; |
|
|
|
background: #465f85; |
|
|
|
|
|
|
|
|
|
|
|
h6, |
|
|
|
h6, |
|
|
|
.des, |
|
|
|
.des, |
|
|
|
.meta { |
|
|
|
.meta { |
|
|
|
@ -504,44 +448,54 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
font-size: 1.3rem; |
|
|
|
font-size: 1.3rem; |
|
|
|
transition: 0.3s; |
|
|
|
transition: 0.3s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.des { |
|
|
|
.des { |
|
|
|
margin: 30px 0; |
|
|
|
margin: 30px 0; |
|
|
|
font-size: 0.9rem; |
|
|
|
font-size: 0.9rem; |
|
|
|
line-height: 24px; |
|
|
|
line-height: 24px; |
|
|
|
transition: 0.3s; |
|
|
|
transition: 0.3s; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
.meta { |
|
|
|
font-size: 0.8rem; |
|
|
|
font-size: 0.8rem; |
|
|
|
transition: 0.3s; |
|
|
|
transition: 0.3s; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.news { |
|
|
|
.news { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
flex-wrap: wrap; |
|
|
|
margin: 10px 0; |
|
|
|
margin: 10px 0; |
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
li { |
|
|
|
width: calc((100% - 18px) / 3); |
|
|
|
width: calc((100% - 18px) / 3); |
|
|
|
margin-right: 9px; |
|
|
|
margin-right: 9px; |
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(3n) { |
|
|
|
&:nth-child(3n) { |
|
|
|
margin-right: 0; |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
.pic { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 220px; |
|
|
|
height: 220px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
.texts { |
|
|
|
padding: 20px 24px; |
|
|
|
padding: 20px 24px; |
|
|
|
background-color: #fff; |
|
|
|
background-color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
.meta { |
|
|
|
font-size: 0.9rem; |
|
|
|
font-size: 0.9rem; |
|
|
|
color: #666; |
|
|
|
color: #666; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
margin-top: 5px; |
|
|
|
margin-top: 5px; |
|
|
|
font-size: 1.1rem; |
|
|
|
font-size: 1.1rem; |
|
|
|
@ -550,21 +504,26 @@ export default { |
|
|
|
@include mul-ellipsis(2); |
|
|
|
@include mul-ellipsis(2); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.news-carousel { |
|
|
|
.news-carousel { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
li { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
width: calc((100% - 18px) / 3); |
|
|
|
width: calc((100% - 18px) / 3); |
|
|
|
height: 320px; |
|
|
|
height: 320px; |
|
|
|
margin-right: 9px; |
|
|
|
margin-right: 9px; |
|
|
|
|
|
|
|
|
|
|
|
&:nth-child(3n) { |
|
|
|
&:nth-child(3n) { |
|
|
|
margin-right: 0; |
|
|
|
margin-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
.pic { |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
height: 100%; |
|
|
|
height: 100%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.texts { |
|
|
|
.texts { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
top: 0; |
|
|
|
@ -573,112 +532,136 @@ export default { |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
background-color: rgba(0, 0, 0, 0.3); |
|
|
|
background-color: rgba(0, 0, 0, 0.3); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
font-size: 1.2rem; |
|
|
|
font-size: 1.2rem; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
.meta { |
|
|
|
margin: 8px 0; |
|
|
|
margin: 8px 0; |
|
|
|
font-size: 0.9rem; |
|
|
|
font-size: 0.9rem; |
|
|
|
color: rgba(255, 255, 255, 0.86); |
|
|
|
color: rgba(255, 255, 255, 0.86); |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.des { |
|
|
|
.des { |
|
|
|
margin-bottom: 8px; |
|
|
|
margin-bottom: 8px; |
|
|
|
font-size: 1rem; |
|
|
|
font-size: 1rem; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.date { |
|
|
|
.date { |
|
|
|
font-size: 0.8rem; |
|
|
|
font-size: 0.8rem; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.people { |
|
|
|
.people { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
li { |
|
|
|
width: 33.33%; |
|
|
|
width: 33.33%; |
|
|
|
padding: 30px; |
|
|
|
padding: 30px; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
border-right: 1px solid #ddd; |
|
|
|
border-right: 1px solid #ddd; |
|
|
|
|
|
|
|
|
|
|
|
&:last-child { |
|
|
|
&:last-child { |
|
|
|
border-right: 0; |
|
|
|
border-right: 0; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
.pic { |
|
|
|
width: 260px; |
|
|
|
width: 260px; |
|
|
|
height: 260px; |
|
|
|
height: 260px; |
|
|
|
margin-bottom: 10px; |
|
|
|
margin-bottom: 10px; |
|
|
|
border-radius: 50%; |
|
|
|
border-radius: 50%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
font-size: 1.1rem; |
|
|
|
font-size: 1.1rem; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.job { |
|
|
|
.job { |
|
|
|
margin: 10px 0; |
|
|
|
margin: 10px 0; |
|
|
|
font-size: 1rem; |
|
|
|
font-size: 1rem; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
font-family: PingFangSC-Medium, PingFang SC; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.hobby { |
|
|
|
.hobby { |
|
|
|
margin-bottom: 15px; |
|
|
|
margin-bottom: 15px; |
|
|
|
font-size: 1rem; |
|
|
|
font-size: 1rem; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
.text { |
|
|
|
font-size: 1rem; |
|
|
|
font-size: 1rem; |
|
|
|
line-height: 1.6; |
|
|
|
line-height: 1.6; |
|
|
|
color: #333; |
|
|
|
color: #333; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.talent { |
|
|
|
.talent { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
background: #111c43; |
|
|
|
background: #111c43; |
|
|
|
border-radius: 0px 100px 0px 100px; |
|
|
|
border-radius: 0px 100px 0px 100px; |
|
|
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
.left { |
|
|
|
width: 50%; |
|
|
|
width: 50%; |
|
|
|
padding: 120px 0 0 5%; |
|
|
|
padding: 120px 0 0 5%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
font-size: 1.6rem; |
|
|
|
font-size: 1.6rem; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.meta { |
|
|
|
.meta { |
|
|
|
margin-top: 8px; |
|
|
|
margin-top: 8px; |
|
|
|
font-size: 0.9rem; |
|
|
|
font-size: 0.9rem; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
.text { |
|
|
|
margin: 20px 0; |
|
|
|
margin: 20px 0; |
|
|
|
font-size: 1rem; |
|
|
|
font-size: 1rem; |
|
|
|
line-height: 2; |
|
|
|
line-height: 2; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
.pic { |
|
|
|
width: 50%; |
|
|
|
width: 50%; |
|
|
|
min-height: 465px; |
|
|
|
min-height: 465px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.about { |
|
|
|
.about { |
|
|
|
background: #0a7fec; |
|
|
|
background: #0a7fec; |
|
|
|
|
|
|
|
|
|
|
|
.inner { |
|
|
|
.inner { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
height: 350px; |
|
|
|
height: 350px; |
|
|
|
padding: 50px; |
|
|
|
padding: 50px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.left { |
|
|
|
.left { |
|
|
|
width: 48%; |
|
|
|
width: 48%; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
h6 { |
|
|
|
h6 { |
|
|
|
font-size: 1.8rem; |
|
|
|
font-size: 1.8rem; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
font-family: PingFangSC-Semibold, PingFang SC; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
.text { |
|
|
|
margin: 20px 0; |
|
|
|
margin: 20px 0; |
|
|
|
font-size: 1rem; |
|
|
|
font-size: 1rem; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.pic { |
|
|
|
.pic { |
|
|
|
position: absolute; |
|
|
|
position: absolute; |
|
|
|
top: -60px; |
|
|
|
top: -60px; |
|
|
|
@ -687,12 +670,14 @@ export default { |
|
|
|
height: 460px; |
|
|
|
height: 460px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.entry { |
|
|
|
.entry { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 50px 10%; |
|
|
|
padding: 50px 10%; |
|
|
|
background-color: #091733; |
|
|
|
background-color: #091733; |
|
|
|
margin-bottom: 100px; |
|
|
|
margin-bottom: 100px; |
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
li { |
|
|
|
position: relative; |
|
|
|
position: relative; |
|
|
|
display: inline-flex; |
|
|
|
display: inline-flex; |
|
|
|
@ -701,9 +686,11 @@ export default { |
|
|
|
align-items: center; |
|
|
|
align-items: center; |
|
|
|
text-align: center; |
|
|
|
text-align: center; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
img { |
|
|
|
img { |
|
|
|
max-width: 100px; |
|
|
|
max-width: 100px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.text { |
|
|
|
.text { |
|
|
|
margin-top: 15px; |
|
|
|
margin-top: 15px; |
|
|
|
font-size: 1rem; |
|
|
|
font-size: 1rem; |
|
|
|
@ -711,14 +698,18 @@ export default { |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
@media (max-width: 1200px) { |
|
|
|
@media (max-width: 1200px) { |
|
|
|
.block { |
|
|
|
.block { |
|
|
|
padding: 3.125rem 0; |
|
|
|
padding: 3.125rem 0; |
|
|
|
|
|
|
|
|
|
|
|
.inner { |
|
|
|
.inner { |
|
|
|
width: 95%; |
|
|
|
width: 95%; |
|
|
|
margin: 0 auto; |
|
|
|
margin: 0 auto; |
|
|
|
|
|
|
|
|
|
|
|
.card { |
|
|
|
.card { |
|
|
|
flex-direction: column; |
|
|
|
flex-direction: column; |
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
li { |
|
|
|
margin-top: 1.25rem; |
|
|
|
margin-top: 1.25rem; |
|
|
|
width: 100%; |
|
|
|
width: 100%; |
|
|
|
@ -727,11 +718,13 @@ export default { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tools { |
|
|
|
.tools { |
|
|
|
z-index: 100; |
|
|
|
z-index: 100; |
|
|
|
position: fixed; |
|
|
|
position: fixed; |
|
|
|
top: 430px; |
|
|
|
top: 430px; |
|
|
|
right: 0; |
|
|
|
right: 0; |
|
|
|
|
|
|
|
|
|
|
|
li { |
|
|
|
li { |
|
|
|
display: flex; |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
justify-content: center; |
|
|
|
@ -743,12 +736,14 @@ export default { |
|
|
|
line-height: 56px; |
|
|
|
line-height: 56px; |
|
|
|
background-color: rgba(19, 18, 19, 0.94); |
|
|
|
background-color: rgba(19, 18, 19, 0.94); |
|
|
|
cursor: pointer; |
|
|
|
cursor: pointer; |
|
|
|
|
|
|
|
|
|
|
|
&.active { |
|
|
|
&.active { |
|
|
|
width: 192px; |
|
|
|
width: 192px; |
|
|
|
color: #fff; |
|
|
|
color: #fff; |
|
|
|
background-color: rgba(1, 129, 247, 0.94); |
|
|
|
background-color: rgba(1, 129, 247, 0.94); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.icon { |
|
|
|
.icon { |
|
|
|
margin-right: 10px; |
|
|
|
margin-right: 10px; |
|
|
|
} |
|
|
|
} |
|
|
|
|
