FE_huoran_server/src/pages/column/page/iasf.vue

<template>
  <!-- iasf中文首页 -->
  <div class="wrap">
    <div class="actions">
      <p class="page-name">页面设置/{{ columnName }}</p>
      <div>
        <el-button type="primary" @click="preview">预览</el-button>
        <el-button @click="save(0)">保存为草稿</el-button>
        <el-button type="primary" @click="save(1)">发布</el-button>
        <el-button @click="back">放弃编辑</el-button>
      </div>
    </div>

    <div class="modules">
      <div class="relative">
        <el-carousel height="500px"
          :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
          <template v-for="(item, i) in modules[0].list">
            <el-carousel-item v-if="item.pic && item.isEnable" :key="i">
              <img width="100%" height="100%" :src="item.pic" alt="">
            </el-carousel-item>
          </template>
        </el-carousel>
        <div class="cover" @click="toSet(0)">点击更换banner与链接</div>
      </div>

      <div class="block">
        <div class="inner">
          <div class="c-wrap">
            <h2 class="b-title news-title">{{ modules[1].form.title }}</h2>
            <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[1].form.des }}</p>
            <div class="cover" @click="toSet(1)">点击更换标题与描述</div>
          </div>
          <ul class="card">
            <li class="wow fadeInDown" data-wow-delay="0.2s">
              <img class="pic" :src="modules[2].form.pic" alt="">
              <div class="texts">
                <div class="name">SILF</div>
                <h6>{{ modules[2].form.title }}</h6>
                <p class="des">{{ modules[2].form.des }}</p>
              </div>
              <div class="cover" @click="toSet(2)">点击更换图片、标题、概述与链接</div>
            </li>
            <li class="wow fadeInDown" data-wow-delay="0.6s">
              <img class="pic" :src="modules[3].form.pic" alt="">
              <div class="texts">
                <div class="name">S³FEL</div>
                <h6>{{ modules[3].form.title }}</h6>
                <p class="des">{{ modules[3].form.des }}</p>
              </div>
              <div class="cover" @click="toSet(3)">点击更换图片、标题、概述与链接</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="block">
        <div class="inner">
          <div class="c-wrap">
            <h2 class="b-title news-title">{{ modules[4].form.title }}</h2>
            <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[4].form.des }}</p>
            <div class="cover" @click="toSet(4)">点击更换标题与描述</div>
          </div>
          <div class="c-wrap">
            <div class="news-banner">
              <img style="width: 50%;height: 410px;overflow: hidden;" width="100%" height="480"
                src="https://huorantech.com/images/about/5.png" alt="">
              <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>
                <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>
              </div>
            </div>

            <ul class="news">
              <li>
                <img class="pic" src="https://huorantech.com/images/about/5.png" alt="">
                <div class="texts">
                  <p class="meta">2022-07-24 | 综合新闻</p>
                  <div class="des">X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段</div>
                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
                </div>
              </li>
              <li>
                <img class="pic" src="https://huorantech.com/images/about/5.png" alt="">
                <div class="texts">
                  <p class="meta">2022-07-24 | 建设进展</p>
                  <div class="des">自由电子激光装置调试及运行过程中提供稳定可靠的单发辐射脉冲纵向信息</div>
                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
                </div>
              </li>
              <li>
                <img class="pic" src="https://huorantech.com/images/about/5.png" alt="">
                <div class="texts">
                  <p class="meta">2022-07-24 | 学术动态</p>
                  <div class="des">基于上海软X射线自由电子激光试验装置，科研人员对这一方法进行了实验验证</div>
                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
                </div>
              </li>
            </ul>
            <div class="cover" @click="toSet(5)">关联栏目</div>
          </div>

          <ul class="news-carousel">
            <li>
              <img class="pic" src="https://huorantech.com/images/about/5.png" alt="">
              <div class="texts">
                <h6>媒体关注</h6>
                <p class="meta">来源人民日报</p>
                <div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div>
                <p class="date">2022-07-24</p>
              </div>
              <div class="cover" @click="toSet(6)">关联栏目</div>
            </li>
            <li>
              <img class="pic" src="https://huorantech.com/images/about/5.png" alt="">
              <div class="texts">
                <h6>媒体关注</h6>
                <p class="meta">来源人民日报</p>
                <div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div>
                <p class="date">2022-07-24</p>
              </div>
              <div class="cover" @click="toSet(7)">关联栏目</div>
            </li>
            <li>
              <img class="pic" src="https://huorantech.com/images/about/5.png" alt="">
              <div class="texts">
                <h6>媒体关注</h6>
                <p class="meta">来源人民日报</p>
                <div class="des">进深圳规划中的深圳中能高重复频率X射线自由电子激光项目和大连极紫外自由电子</div>
                <p class="date">2022-07-24</p>
              </div>
              <div class="cover" @click="toSet(8)">关联栏目</div>
            </li>
          </ul>
        </div>
      </div>

      <div class="block">
        <div class="inner">
          <div class="c-wrap">
            <h2 class="b-title wow fadeInUp">{{ modules[9].form.title }}</h2>
            <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[9].form.des }}</p>
            <div class="cover" @click="toSet(9)">点击更换标题与描述</div>
          </div>
          <ul class="people">
            <li class="wow fadeInDown">
              <img class="pic" src="https://huorantech.com/images/careers/6.png" alt="">
              <div class="texts">
                <h6>王晓凡</h6>
                <p class="job">岗位：物理组工程师</p>
                <p class="hobby">爱好：慢跑，旅游</p>
                <div class="text">“我们做物理设计，就好像盖房子画设计图，决不能眼界太窄，不能指望房子过程中或者装修时再去提高，一定要保持国际先进的视野和高度，具备一定的超前性和前瞻性。”</div>
              </div>
            </li>
            <li class="wow fadeInDown">
              <img class="pic" src="https://huorantech.com/images/careers/7.png" alt="">
              <div class="texts">
                <h6>王晓凡</h6>
                <p class="job">岗位：物理组工程师</p>
                <p class="hobby">爱好：慢跑，旅游</p>
                <div class="text">“我们做物理设计，就好像盖房子画设计图，决不能眼界太窄，不能指望房子过程中或者装修时再去提高，一定要保持国际先进的视野和高度，具备一定的超前性和前瞻性。”</div>
              </div>
            </li>
            <li class="wow fadeInDown">
              <img class="pic" src="https://huorantech.com/images/careers/8.png" alt="">
              <div class="texts">
                <h6>王晓凡</h6>
                <p class="job">岗位：物理组工程师</p>
                <p class="hobby">爱好：慢跑，旅游</p>
                <div class="text">“我们做物理设计，就好像盖房子画设计图，决不能眼界太窄，不能指望房子过程中或者装修时再去提高，一定要保持国际先进的视野和高度，具备一定的超前性和前瞻性。”</div>
              </div>
            </li>
            <div class="cover" @click="toSet(10)">关联栏目</div>
          </ul>
        </div>
      </div>

      <div class="block">
        <div class="inner">
          <div class="c-wrap">
            <h2 class="b-title wow fadeInUp">{{ modules[11].form.title }}</h2>
            <p class="intro wow fadeInUp" data-wow-delay="0.5s">{{ modules[11].form.des }}</p>
            <div class="cover" @click="toSet(11)">点击更换标题与描述</div>
          </div>
          <div class="talent">
            <div class="left wow fadeInLeft" data-wow-delay="0.5s">
              <h6>{{ modules[12].form.title }}</h6>
              <p class="meta">{{ modules[12].form.subTitle }}</p>
              <div class="text" v-html="modules[12].form.des"></div>
            </div>
            <img :src="modules[11].form.pic" alt="" class="pic">
            <div class="cover" @click="toSet(12)">点击更换标题、描述、链接与图片</div>
          </div>
        </div>
      </div>

      <div class="about">
        <div class="inner c-wrap">
          <div class="left">
            <h6>{{ modules[13].form.title }}</h6>
            <div class="text" v-html="modules[13].form.des"></div>
            <img src="@/assets/images/arrow-white.png" alt="">
          </div>
          <img class="pic" :src="modules[13].form.pic" alt="">
          <div class="cover" @click="toSet(13)">点击更换标题、描述、链接与图片</div>
        </div>
      </div>

      <div class="block" style="margin-top: 100px">
        <div class="inner">
          <ul class="entry">
            <li>
              <img class="icon" :src="modules[14].form.pic" alt="">
              <p class="text">{{ modules[14].form.title }}</p>
              <div class="cover" @click="toSet(14)">点击更换</div>
            </li>
            <li>
              <img class="icon" :src="modules[15].form.pic" alt="">
              <p class="text">{{ modules[15].form.title }}</p>
              <div class="cover" @click="toSet(15)">点击更换</div>
            </li>
            <li>
              <img class="icon" :src="modules[16].form.pic" alt="">
              <p class="text">{{ modules[16].form.title }}</p>
              <div class="cover" @click="toSet(16)">点击更换</div>
            </li>
            <li>
              <img class="icon" :src="modules[17].form.pic" alt="">
              <p class="text">{{ modules[17].form.title }}</p>
              <div class="cover" @click="toSet(17)">点击更换</div>
            </li>
            <li>
              <img class="icon" :src="modules[18].form.pic" alt="">
              <p class="text">{{ modules[18].form.title }}</p>
              <div class="cover" @click="toSet(18)">点击更换</div>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <Module ref="module" :data.sync="curData" :visible.sync="diaVisible" @moduleSubmit="moduleSubmit" />

    <ul class="tools">
      <li v-for="(item, i) in modules[19].list" :key="i">
        <img :src="'https://huorantech.com/images/iasf/icon' + (i < 4 ? i + 1 : 1) + '.png'" alt="" class="icon">
        {{ item.title }}
      </li>
      <div class="cover" @click="toSet(19)">点击更换导航</div>
    </ul>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import Modules from '@/const/modules'
export default {
  mixins: [mixins],
  data () {
    return {
      modules: Modules.iasf
    }
  },
  mounted () { },
  methods: {

  }
};
</script>

<style lang="scss" scoped>
@import '../../../styles/page/page.scss';

.iasf-banner {
  height: 600px;

  img {
    width: 100%;
    height: 100%;
  }

  .texts {
    position: absolute;
    top: 50%;
    left: 120px;

    h6,
    .text {
      padding: 20px 15px;
      color: #fff;
      background-color: rgba(0, 0, 0, 0.29);
    }

    h6 {
      margin-bottom: 30px;
      font-size: 3rem;
      font-family: AlimamaShuHeiTi-Bold, AlimamaShuHeiTi;
    }

    .text {
      font-size: 1.1rem;
      font-family: AppleSystemUIFont;
    }
  }
}

.block {
  padding-top: 3.15rem;

  .b-title {
    font-size: 2.25rem;
  }

  .intro {
    font-size: 1.35rem;
    margin-bottom: 3.6rem;
  }
}

.card {
  display: flex;
  justify-content: space-between;

  li {
    position: relative;
    width: 47%;
    height: 366px;
    transition: 0.3s;
    overflow: hidden;

    &:hover {
      .project {
        top: -100%;
      }

      .texts {
        top: 0;
      }
    }
  }

  .pic {
    width: 100%;
    height: auto;
  }

  .texts {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 0 1rem;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
    transition: 0.3s;
  }

  .name {
    font-size: 2rem;
    font-family: PingFangSC-Medium, PingFang SC;
  }

  h6 {
    margin: 1rem 0;
    line-height: 2rem;
    font-size: 1.6rem;
    font-family: PingFangSC-Medium, PingFang SC;
    @include mul-ellipsis(2);
  }

  .des {
    font-size: 1.2rem;
    line-height: 30px;
  }
}

.news-title:after {
  display: none;
}

.news-banner {
  display: flex;
  cursor: pointer;

  .pic {
    transition: 0.5s;

    &:hover {
      transform: scale(1.3);
    }
  }

  .right {
    position: relative;
    width: 50%;
    padding: 50px 50px 30px;
    background: #1583ff;
    color: #fff;

    h6 {
      font-size: 1.34rem;
    }

    .des {
      font-size: 1.02rem;
    }

    .meta {
      font-size: 1.04rem;
    }

    &:hover {
      background: #465f85;

      h6,
      .des,
      .meta {
        color: #fff;
        transform: translateY(15px);
      }
    }
  }

  h6 {
    font-size: 1.3rem;
    transition: 0.3s;
  }

  .des {
    margin: 30px 0;
    font-size: 0.9rem;
    line-height: 24px;
    transition: 0.3s;
  }

  .meta {
    font-size: 0.8rem;
    transition: 0.3s;
  }
}

.news {
  display: flex;
  flex-wrap: wrap;
  margin: 10px 0;

  li {
    width: calc((100% - 18px) / 3);
    margin-right: 9px;

    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .pic {
    width: 100%;
    height: 220px;
  }

  .texts {
    padding: 20px 24px;
    background-color: #fff;
  }

  .meta {
    font-size: 0.9rem;
    color: #666;
  }

  h6 {
    margin-top: 5px;
    font-size: 1.1rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #333;
    @include mul-ellipsis(2);
  }
}

.news-carousel {
  display: flex;

  li {
    position: relative;
    width: calc((100% - 18px) / 3);
    height: 320px;
    margin-right: 9px;

    &:nth-child(3n) {
      margin-right: 0;
    }
  }

  .pic {
    width: 100%;
    height: 100%;
  }

  .texts {
    position: absolute;
    top: 0;
    left: 0;
    padding: 50px 30px;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.3);
  }

  h6 {
    font-size: 1.2rem;
    font-family: PingFangSC-Medium, PingFang SC;
  }

  .meta {
    margin: 8px 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.86);
  }

  .des {
    margin-bottom: 8px;
    font-size: 1rem;
    font-family: PingFangSC-Medium, PingFang SC;
  }

  .date {
    font-size: 0.8rem;
  }
}

.people {
  position: relative;
  display: flex;

  li {
    width: 33.33%;
    padding: 30px;
    text-align: center;
    border-right: 1px solid #ddd;

    &:last-child {
      border-right: 0;
    }
  }

  .pic {
    width: 260px;
    height: 260px;
    margin-bottom: 10px;
    border-radius: 50%;
  }

  h6 {
    font-size: 1.1rem;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333;
  }

  .job {
    margin: 10px 0;
    font-size: 1rem;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #333;
  }

  .hobby {
    margin-bottom: 15px;
    font-size: 1rem;
    color: #333;
  }

  .text {
    font-size: 1rem;
    line-height: 1.6;
    color: #333;
  }
}

.talent {
  position: relative;
  display: flex;
  color: #fff;
  background: #111c43;
  border-radius: 0px 100px 0px 100px;

  .left {
    width: 50%;
    padding: 120px 0 0 5%;
  }

  h6 {
    font-size: 1.6rem;
  }

  .meta {
    margin-top: 8px;
    font-size: 0.9rem;
    color: #fff;
  }

  .text {
    margin: 20px 0;
    font-size: 1rem;
    line-height: 2;
  }

  .pic {
    width: 50%;
    min-height: 465px;
  }
}

.about {
  background: #0a7fec;

  .inner {
    position: relative;
    height: 350px;
    padding: 50px;
  }

  .left {
    width: 48%;
  }

  h6 {
    font-size: 1.8rem;
    font-family: PingFangSC-Semibold, PingFang SC;
    color: #fff;
  }

  .text {
    margin: 20px 0;
    font-size: 1rem;
    color: #fff;
  }

  .pic {
    position: absolute;
    top: -60px;
    right: 0;
    max-width: 48%;
    height: 460px;
  }
}

.entry {
  display: flex;
  justify-content: space-between;
  padding: 50px 10%;
  background-color: #091733;
  margin-bottom: 100px;

  li {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
  }

  img {
    max-width: 100px;
  }

  .text {
    margin-top: 15px;
    font-size: 1rem;
    font-family: PingFangSC-Medium, PingFang SC;
    color: #fff;
  }
}

@media (max-width: 1200px) {
  .block {
    padding: 3.125rem 0;

    .inner {
      width: 95%;
      margin: 0 auto;

      .card {
        flex-direction: column;

        li {
          margin-top: 1.25rem;
          width: 100%;
        }
      }
    }
  }
}

.tools {
  z-index: 100;
  position: fixed;
  top: 430px;
  right: 0;

  li {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 160px;
    margin-bottom: 1px;
    font-size: 1rem;
    color: #0084ff;
    line-height: 56px;
    background-color: rgba(19, 18, 19, 0.94);
    cursor: pointer;

    &.active {
      width: 192px;
      color: #fff;
      background-color: rgba(1, 129, 247, 0.94);
    }
  }

  .icon {
    margin-right: 10px;
  }
}
</style>