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 v-if="articles.length" class="news-banner">
              <img class="pic" width="100%" height="100%" :src="articles[0].titleImg" alt="">
              <div class="right">
                <h6>{{ articles[0].title }}</h6>
                <div class="des" v-html="articles[0].mainBody"></div>
                <p class="meta">{{ articles[0].releaseTime }} {{ articles[0].classificationName && ' | ' +
                  articles[0].classificationName }}</p>
              </div>
            </div>

            <ul class="news">
              <template v-for="(item, i) in articles">
                <li v-if="i" :key="i">
                  <div class="pic-wrap">
                    <img class="pic" :src="item.titleImg" alt="">
                    <div class="pic-cover"></div>
                  </div>
                  <div class="texts">
                    <h6>{{ item.title }}</h6>
                    <div class="des" v-html="item.mainBody"></div>
                    <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' +
                      item.classificationName
                      }}</p>
                  </div>
                </li>
              </template>
            </ul>
            <div class="cover" style="min-height: 100px;" @click="toSet(5)">关联栏目</div>
          </div>

          <ul class="news-carousel">
            <li v-if="articles1.length">
              <img class="pic" src="https://huorantech.com/images/iasf/8.png" alt="">
              <div class="texts">
                <h6>{{ getColumnTitle(modules[6].form) }}</h6>
                <div class="des-wrap">
                  <p class="meta">{{ articles1[0].source }}</p>
                  <div class="des">{{ articles1[0].title }}</div>
                </div>
                <p class="date">{{ articles1[0].releaseTime }}</p>
              </div>
              <div class="cover" @click="toSet(6)">关联栏目</div>
            </li>
            <li v-if="articles2.length">
              <img class="pic" src="https://huorantech.com/images/iasf/9.png" alt="">
              <div class="texts">
                <h6>{{ getColumnTitle(modules[7].form) }}</h6>
                <div class="des-wrap">
                  <p class="meta">{{ articles2[0].source }}</p>
                  <div class="des">{{ articles2[0].title }}</div>
                </div>
                <p class="date">{{ articles2[0].releaseTime }}</p>
              </div>
              <div class="cover" @click="toSet(7)">关联栏目</div>
            </li>
            <li v-if="articles3.length">
              <img class="pic" src="https://huorantech.com/images/iasf/10.png" alt="">
              <div class="texts">
                <h6>{{ getColumnTitle(modules[8].form) }}</h6>
                <div class="des-wrap">
                  <p class="meta">{{ articles3[0].source }}</p>
                  <div class="des">{{ articles3[0].title }}</div>
                </div>
                <p class="date">{{ articles3[0].releaseTime }}</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 v-for="(item, i) in articles4" :key="i" class="wow fadeInDown">
              <img class="pic" :src="item.titleImg" alt="">
              <div class="texts">
                <h6>{{ item.title }}</h6>
                <p class="job">{{ item.post }}</p>
                <p class="hobby">{{ item.hobby }}</p>
                <div class="text" v-html="item.mainBody"></div>
              </div>
            </li>
            <div class="cover" style="min-height: 100px;" @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 Util from '@/libs/util'
import mixins from '@/mixins/page'
import Modules from '@/const/modules'
export default {
  mixins: [mixins],
  data () {
    return {
      modules: Modules.iasf,
      articles: [],
      articles1: [],
      articles2: [],
      articles3: [],
      articles4: [],
    }
  },
  mounted () { },
  methods: {
    // 获取文章列表
    async getArticles () {
      const json = this.modules

      if (json[5].form.column.length) {
        const { column, articleNum } = json[5].form
        const { data } = await this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`)
        this.articles = Util.removeTag(data.slice(0, articleNum || 4))
      }

      if (json[6].form.column.length) {
        const { column, articleNum } = json[6].form
        const { data } = await this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`)
        this.articles1 = Util.removeTag(data.slice(0, articleNum || 4))
      }
      if (json[7].form.column.length) {
        const { column, articleNum } = json[7].form
        const { data } = await this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`)
        this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
      }
      if (json[8].form.column.length) {
        const { column, articleNum } = json[8].form
        const { data } = await this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`)
        this.articles3 = Util.removeTag(data.slice(0, articleNum || 4))
      }
      if (json[10].form.column.length) {
        const { column, articleNum } = json[10].form
        const { data } = await this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`)
        this.articles4 = Util.removeTag(data.slice(0, articleNum || 3))
      }
    },
  }
};
</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 {
    width: 50%;
    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: 18px;
      line-height: 32px;
    }

    .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;
    background-color: #fff;

    &: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% - 40px) / 3);
    height: 284px;
    margin-right: 20px;
    overflow: hidden;
    box-shadow: 0px 4px 16px 0px rgba(0, 0, 0, 0.06);

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

  .pic {
    width: 100%;
    height: 100%;
    transition: 0.5s;
    object-fit: cover;
  }

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

  h6 {
    font-size: 24px;
    cursor: pointer;
  }

  .des-wrap {
    height: 101px;
    margin: 11px 0 25px;
  }

  .meta {
    margin-bottom: 16px;
    font-size: 18px;
    color: rgba(255, 255, 255, 0.86);
  }

  .des {
    font-size: 20px;
    -webkit-line-clamp: 2;
    line-height: 30px;
    cursor: pointer;
  }

  .date {
    font-size: 16px;
  }
}

.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>