FE_IASF_client/src/pages/sfel/index.vue

<template>
  <div class="wrap">
    <el-carousel class="topImg"
                 :interval="6000"
                 :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
                 :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 :class="[{'cursor-pointer': isLink(item.link.linkName)}]"
               width="100%"
               :src="item.pic"
               alt=""
               @click="openLink(item)">
        </el-carousel-item>
      </template>
    </el-carousel>

    <div class="block banner-block"
         id="part1">
      <div class="inner">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[1].form.title }}
            <span class="sub">{{ modules[1].form.subTitle }}</span>
          </h5>
          <span class="more"
                @click="toAll(modules[2].form)">MORE</span>
        </div>
        <template v-if="articles.length">
          <div class="sfel-banner wow fadeInDown"
               data-wow-delay="0.5s"
               @click="toArtice(curArticle, modules[2].form)">
            <div style="width: 50%;height: 20.5rem;overflow: hidden;"
                 class="newBox">
              <img class="pic"
                   width="100%"
                   height="100%"
                   :src="curArticle.titleImg"
                   alt="">
            </div>
            <div class="right">
              <h6>{{ curArticle.title }}</h6>
              <div class="des"
                   v-html="curArticle.mainBody"></div>
              <p class="meta">{{ curArticle.releaseTime }} {{ curArticle.classificationName && ' | ' + curArticle.classificationName }}</p>
              <ul class="inds">
                <li v-for="i in articles.length > 3 ? 4 : articles.length"
                    :key="i"
                    :class="{active: curInd == i - 1}"
                    @click.stop="switchCarousel(i - 1)"></li>
              </ul>
            </div>
          </div>

          <ul class="card">
            <template v-for="(item, i) in articles">
              <li v-if="i > 3 && i < 7"
                  :key="i"
                  class="wow fadeInDown"
                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'">
                <img class="pic"
                     :src="item.titleImg"
                     alt="">
                <div class="texts">
                  <p class="meta">{{ item.releaseTime }} {{ item.classificationName && ' | ' + item.classificationName }}</p>
                  <div class="des">{{ item.title }}</div>
                  <img class="arrow"
                       src="@/assets/images/arrow.png"
                       alt=""
                       @click="toArtice(item, modules[2].form)">
                </div>
              </li>
            </template>
          </ul>
        </template>
      </div>
    </div>

    <div class="block notice"
         id="part2">
      <div class="inner lg">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[3].form.title }}
            <span class="sub">{{ modules[3].form.subTitle }}</span>
          </h5>
          <span class="more"
                @click="toAll(modules[4].form)">MORE</span>
        </div>
        <div class="shop-shows"
             v-if="articles1.length">
          <div class="left wow fadeInLeft"
               data-wow-delay="0.5s">
            <el-carousel>
              <template v-for="(item, i) in articles1">
                <el-carousel-item v-if="i < 4"
                                  :key="i">
                  <div class="item"
                       @click="toArtice(item, modules[4].form)">
                    <img class="pic"
                         :src="item.titleImg"
                         alt="">
                    <p class="text">{{ item.title }}</p>
                  </div>
                </el-carousel-item>
              </template>
            </el-carousel>
            <div v-if="articles1.length > 4"
                 class="cards"
                 style="margin-top: 18px;"
                 @click="toArtice(articles1[4], modules[4].form)">
              <h6 class="a-line">{{ articles1[4].title }}</h6>
              <div class="sum">{{ articles1[4].mainBody }}</div>
              <p class="date">{{ articles1[4].releaseTime }}</p>
            </div>
            <div class="card-wrap">
              <div v-if="articles1.length > 5"
                   class="cards"
                   style="margin-right: 18px"
                   @click="toArtice(articles1[5], modules[4].form)">
                <h6>{{ articles1[5].title }}</h6>
                <p class="date">{{ articles1[5].releaseTime }}</p>
              </div>
              <div v-if="articles1.length > 6"
                   class="cards"
                   @click="toArtice(articles1[6], modules[4].form)">
                <h6>{{ articles1[6].title }}</h6>
                <p class="date">{{ articles1[6].releaseTime }}</p>
              </div>
            </div>
          </div>
          <div v-if="articles1.length > 7"
               class="right wow fadeInRight"
               data-wow-delay="0.5s">
            <ul class="card-list">
              <template v-for="(item, i) in articles1">
                <li v-if="i > 6 && i < 10"
                    :key="i"
                    @click="toArtice(item, modules[4].form)">
                  <div class="releaseTime">
                    <p class="d">{{ item.date }}</p>
                    <p class="m">{{ item.month }}</p>
                  </div>
                  <div class="texts">
                    <h6>{{ item.title }}</h6>
                    <div class="des"
                         v-html="item.mainBody"></div>
                  </div>
                </li>
              </template>
            </ul>
            <div v-if="articles1.length > 10"
                 class="slide"
                 @click="toArtice(articles1[10], modules[4].form)">
              <img class="pic"
                   :src="articles1[10].titleImg"
                   alt="">
              <p class="text">{{ articles1[10].title }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="block conference"
         id="part3">
      <div class="inner lg">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[5].form.title }}
            <span class="sub">{{ modules[5].form.subTitle }}</span>
          </h5>
          <span class="more"
                @click="toAll(modules[6].form)">MORE</span>
        </div>
        <div class="shows"
             v-if="articles2.length">
          <div class="left wow fadeInLeft"
               data-wow-delay="0.5s"
               @click="toArtice(articles2[0], modules[6].form)">
            <img class="pic"
                 width="100%"
                 height="100%"
                 :src="articles2[0].titleImg"
                 alt="">
            <div class="text">{{ articles2[0].title }}</div>
          </div>
          <ul class="card-list wow fadeInRight"
              data-wow-delay="0.5s">
            <template v-for="(item, i) in articles2">
              <li v-if="i && i < 4"
                  :key="i"
                  @click="toArtice(item, modules[6].form)">
                <img class="pic"
                     :src="item.titleImg"
                     alt="">
                <div class="texts">
                  <h6>{{ item.title }}</h6>
                  <p class="sum">{{ item.mainBody }}</p>
                  <p v-if="item.keynoteSpeaker"
                     class="text">
                    <img class="icon"
                         src="@/assets/images/mine.png"
                         alt="">
                    {{ item.keynoteSpeaker }}
                  </p>
                  <p v-if="item.activityStartTime"
                     class="text">
                    <img class="icon"
                         src="@/assets/images/time.png"
                         alt="">
                    会议时间: {{ item.activityStartTime + ' ~ ' + item.activityEndTime }}
                  </p>
                  <p v-if="item.onlineLocation"
                     class="text">
                    <img class="icon"
                         src="@/assets/images/online.png"
                         alt="">
                    {{ item.onlineLocation }}
                  </p>
                  <p v-if="item.offlineLocation"
                     class="text">
                    <img class="icon"
                         src="@/assets/images/location.png"
                         alt="">
                    {{ item.offlineLocation }}
                  </p>
                </div>
              </li>
            </template>
          </ul>
        </div>
      </div>
    </div>

    <div class="block media"
         id="part4">
      <div class="inner">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[7].form.title }}
            <span class="sub">{{ modules[7].form.subTitle }}</span>
          </h5>
          <span class="more"
                @click="toAll(modules[8].form)">MORE</span>
        </div>
        <div v-if="articles3.length"
             class="media-wrap">
          <div class="left">
            <div class="slides">
              <div class="item wow fadeInLeft"
                   data-wow-delay="0.5s"
                   style="margin-right: 20px"
                   @click="toArtice(articles3[0], modules[9].form)">
                <img width="100%"
                     height="100%"
                     :src="articles3[0].titleImg"
                     alt="">
                <div class="text">{{ articles3[0].title }}</div>
              </div>
              <div v-if="articles3.length > 1"
                   class="item wow fadeInLeft"
                   data-wow-delay="0.5s"
                   @click="toArtice(articles3[1], modules[9].form)">
                <img width="100%"
                     height="100%"
                     :src="articles3[1].titleImg"
                     alt="">
                <div class="text">{{ articles3[1].title }}</div>
              </div>
            </div>
            <ul class="list">
              <template v-for="(item, i) in articles3">
                <li v-if="i > 1 && i < 5"
                    :key="i"
                    class="wow fadeInDown"
                    :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
                    @click="toArtice(item, modules[9].form)">
                  <h6>{{ item.title }}</h6>
                  <div class="des">{{ item.mainBody }}</div>
                </li>
              </template>
            </ul>
          </div>
          <div v-if="articles3.length > 5"
               class="right wow bounceInRight"
               data-wow-delay="0.8s"
               @click="toArtice(articles3[5], modules[9].form)">
            <div class="img-wrap">
              <img :src="articles3[5].titleImg"
                   alt="">
            </div>
            <div class="texts">
              <h6>{{ articles3[5].title }}</h6>
              <div class="des">{{ articles3[5].mainBody }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="block news"
         id="part5">
      <div class="inner">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[9].form.title }}
            <span class="sub">{{ modules[9].form.subTitle }}</span>
          </h5>
        </div>
        <ul class="news">
          <li v-for="(item, i) in modules[10].list"
              :key="i"
              class="wow fadeInDown"
              :data-wow-delay="(0.2 * i).toFixed(1) + 's'"
              :class="{'cursor-pointer': item.link.linkName !== '无'}"
              @click="openLink(item)">
            <img :src="item.pic"
                 alt="">
            <div class="texts">
              <h6>{{ item.title }}</h6>
              <div class="des">{{ item.des }}</div>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <div class="block program"
         id="part6">
      <div class="inner">
        <div class="title wow fadeInUp">
          <h5>
            {{ modules[11].form.title }}
            <span class="sub">{{ modules[11].form.subTitle }}</span>
          </h5>
          <span class="more"
                @click="toAll(modules[12].form)">MORE</span>
        </div>
        <template v-if="articles4.length">
          <div class="slide"
               @click="toArtice(articles4[0], modules[12].form)">
            <div class="texts">
              <h6>{{ articles4[0].title }}</h6>
              <div class="des">{{ articles4[0].mainBody }}</div>
              <div class="meta">发表日期：{{ articles4[0].releaseTime }} &emsp;浏览量：{{ articles4[0].totalBrowsing }}</div>
            </div>
            <div class="img-wrap">
              <img class="pic"
                   :src="articles4[0].titleImg"
                   alt="">
            </div>
          </div>
          <ul class="list">
            <template v-for="(item, i) in articles3">
              <li v-if="i && i < 4"
                  :key="i"
                  class="wow fadeInDown"
                  :data-wow-delay="(0.1 * i).toFixed(1) + 's'"
                  @click="toArtice(item, modules[12].form)">
                <div class="des">{{ item.title }}</div>
                <p class="date">{{ item.releaseTime }}</p>
              </li>
            </template>
          </ul>
        </template>
      </div>
    </div>

    <div class="tools">
      <div class="logo">
        <img src="@/assets/images/logo.png"
             alt="">
      </div>
      <ul class="nav">
        <li v-for="(item, i) in navs"
            :key="i"
            class="column"
            @click="toAnchor(item)">{{ item.name }}</li>
      </ul>
    </div>
  </div>
</template>

<script>
import mixins from '@/mixins/page'
import Setting from '@/setting'
import Util from '@/libs/util'
import WOW from 'wow.js'
export default {
  mixins: [mixins],
  data () {
    return {
      navs: [],
      articles: [],
      articles1: [],
      articles2: [],
      articles3: [],
      articles4: [],
      curInd: 0,
      curArticle: {},
    }
  },
  mounted () {
    new WOW().init()
  },
  methods: {
    // 获取文章详情
    getInfo () {
      // 预览/详情
      this.$post(`${this.api[this.preview ? 'getRedisCache' : 'findPage']}?columnId=${this.id}`).then(({ data }) => {
        if (data.length) {
          // state：已发布（1）则取theEditedJson，草稿（0）则取jsonBeforeEditing
          const json = JSON.parse(this.preview ?
            data :
            data[data.length - 1][data[data.length - 1].state ? 'theEditedJson' : 'jsonBeforeEditing'])
          console.log("🚀 ~ file: index.vue ~ line 138 ~ this.$post ~ this.modules", json)

          // 获取文章列表
          if (json[2].form.column.length) {
            const { column, articleNum } = json[2].form
            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
              this.articles = Util.removeTag(data.slice(0, articleNum || 7))
              this.curArticle = this.articles[0]
            }).catch(err => { })
          }
          if (json[4].form.column.length) {
            const { column, articleNum } = json[4].form
            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
              const articles = Util.removeTag(data.slice(0, articleNum || 11))
              articles.forEach(e => {
                // 把发布日期分割成年月和日，页面上要展示
                if (e.releaseTime) {
                  const date = e.releaseTime.split('-')
                  e.date = date[2]
                  e.month = date[0] + '/' + date[1]
                }
              })
              this.articles1 = articles
            }).catch(err => { })
          }
          if (json[6].form.column.length) {
            const { column, articleNum } = json[6].form
            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
              this.articles2 = Util.removeTag(data.slice(0, articleNum || 4))
            }).catch(err => { })
          }
          if (json[8].form.column.length) {
            const { column, articleNum } = json[8].form
            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
              this.articles3 = Util.removeTag(data.slice(0, articleNum || 6))
            }).catch(err => { })
          }
          if (json[12].form.column.length) {
            const { column, articleNum } = json[12].form
            this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
              this.articles4 = Util.removeTag(data.slice(0, articleNum || 4))
            }).catch(err => { })
          }

          // 获取页面的所有标题，展示到左侧导航
          const navs = []
          let id = 0
          json.forEach((e, i) => {
            if (i % 2 && e.form.title) navs.push({
              id: ++id,
              name: e.form.title
            })
          })
          this.navs = navs

          this.modules = json
          this.carouselInterval()
        }
      }).catch(err => { })
    },
    // 自动轮播
    carouselInterval () {
      clearInterval(this.timer)
      this.timer = setInterval(() => {
        this.curInd++
        if (this.curInd > 3) this.curInd = 0
        this.curArticle = this.articles[this.curInd] || {}
      }, 5000)
    },
    // 手动轮播切换
    switchCarousel (i) {
      if (this.curInd !== i) {
        this.curInd = i
        this.curArticle = this.articles[this.curInd] || {}
      }
    },
    // 左侧导航点击回调
    toAnchor (e) {
      const el = document.querySelector(`#part${e.id}`)
      el && el.scrollIntoView()
    }
  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';

.wrap {
    /deep/ .el-carousel__container {
        height: 100vh;
    }
    /deep/ .el-carousel__container {
        height: 100vh;
    }
    .topImg {
        height: 100vh;
        img {
            height: 100vh;
        }
    }
}
.block {
    padding: 3rem 0;
}

.title {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding-bottom: 1.25rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid #ddd;
    align-items: center;
    h5 {
        padding-left: 0.8rem;
        font-size: 1.62rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #333333;
        line-height: 1;
        border-left: 6px solid #2b96ef;
    }
    .sub {
        font-size: 0.88rem;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #afb7bf;
    }
    .more {
        font-size: 0.64rem;
        color: #666;
        cursor: pointer;
    }
}
.lg {
    // width: 1505px;
}
/deep/.articles {
    width: 50%;
    .el-carousel__indicators--horizontal {
        bottom: 20px;
        left: 804px;
    }
}
.banner-block {
    background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
}
.sfel-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;
            @include mul-ellipsis(2);
        }
        .des {
            font-size: 1.02rem;
        }
        .meta {
            font-size: 1.04rem;
        }
        &:hover {
            background: #465f85;
            h6,
            .des,
            .meta {
                color: #fff;
                transform: translateY(-15px);
            }
        }
    }
    .inds {
        position: absolute;
        bottom: 40px;
        left: 60px;
        display: flex;
        li {
            width: 10px;
            height: 10px;
            margin-right: 12px;
            background: #ffffff;
            border-radius: 50%;
            transition: 0.2s;
            &.active {
                width: 30px;
                background: rgba(255, 255, 255, 0.3);
                border-radius: 5px;
            }
        }
    }
    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;
    }
}
.card {
    li {
        .texts {
            .des {
                min-height: 3rem;
            }
        }
    }
}
.card {
    display: flex;
    flex-wrap: wrap;
    margin-top: 2rem;
    li {
        width: calc((100% - 56px) / 3);
        margin-right: 28px;
        box-shadow: 0px 0px 20px 0px rgba(176, 176, 176, 0.21);
        border-radius: 6px;
        transition: 0.3s;
        background-color: #fff;
        &:hover {
            transform: scale(1.05);
        }
        &:last-child {
            margin-right: 0;
        }
    }
    .pic {
        width: 100%;
        height: auto;
    }
    .texts {
        padding: 2rem 1.5rem;
    }
    .meta {
        font-size: 0.92rem;
        color: #666;
    }
    .des {
        margin: 0.5rem 0;
        font-size: 0.88rem;
        font-family: SFProDisplay;
        font-weight: 500;
        color: #333;
        line-height: 1.4rem;
        -webkit-line-clamp: 2;
    }
    .arrow {
        width: 1.8rem;
    }
}

.notice {
    background: url(../../assets/images/sfel/3.png) 0 0 / cover no-repeat;
}
.shop-shows {
    display: flex;
    .left {
        width: 50%;
        margin-right: 1rem;
        /deep/ .el-carousel__container {
            height: 20.65rem;
        }
        .item {
            position: relative;
            height: 100%;
            cursor: pointer;
            .pic {
                width: 100%;
                height: 100%;
                transition: 0.5s;
            }
            .text {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 0 20px;
                font-size: 0.96rem;
                color: #fff;
                line-height: 3rem;
                @include ellipsis;
                background-color: rgba(0, 0, 0, 0.57);
            }
            &:hover {
                .pic {
                    transform: scale(1.3);
                }
            }
        }
        .card-wrap {
            display: flex;
            margin-top: 0.9rem;
            .cards {
                flex: 1;
            }
            h6 {
                @include mul-ellipsis(2);
            }
        }
        .cards {
            padding: 2.85rem 1rem;
            background-color: #fff;
            transition: 0.5s;
            cursor: pointer;
            &:hover {
                transform: translateX(10px);
            }
            h6 {
                margin-bottom: 1.2rem;
                font-size: 1.08rem;
                color: #48525e;
            }
            .a-line {
                @include ellipsis;
            }
            .sum {
                font-size: 0.9rem;
                color: #6d7c8e;
                @include ellipsis;
            }
            .date {
                margin-top: 1.2rem;
                font-size: 0.72rem;
                color: #c4ccd7;
            }
        }
        h6 {
            font-size: 24px;
            color: #272727;
        }
        .des {
            margin-top: 10px;
            font-size: 16px;
            color: #666;
            line-height: 30px;
        }
    }
    .right {
        width: 50%;
    }
    .card-list {
        li {
            display: flex;
            align-items: center;
            padding: 0.95rem;
            margin-bottom: 0.9rem;
            background-color: #fff;
            transition: 0.3s;
            cursor: pointer;
            &:hover {
                transform: scale(1.05);
            }
        }
        .releaseTime {
            width: 4.4rem;
            height: 4.4rem;
            padding: 0.5rem 0 0.8rem;
            margin-right: 1.2rem;
            text-align: center;
        }
        .d {
            font-size: 1.9rem;
            font-family: DINCondensed-Bold, DINCondensed;
            font-weight: bold;
            color: #333333;
            line-height: 2.15rem;
        }
        .m {
            font-size: 1.02rem;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #666666;
            line-height: 1rem;
        }
        .texts {
            width: calc(100% - 110px);
        }
        h6 {
            margin-bottom: 0.5rem;
            font-size: 1.08rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #1583ff;
            @include ellipsis;
        }
        .des {
            font-size: 0.9rem;
            color: #666;
            line-height: 1.2rem;
            -webkit-line-clamp: 2;
        }
    }
    .slide {
        position: relative;
        height: 24.4rem;
        overflow: hidden;
        cursor: pointer;
        .pic {
            width: 100%;
            height: 100%;
            transition: 0.5s;
        }
        .text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0 0.6rem;
            line-height: 3rem;
            font-size: 0.8rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.57);
        }
        &:hover {
            .pic {
                transform: scale(1.3);
            }
        }
    }
}
.conference {
    background: url(../../assets/images/sfel/4.png) 0 0 / cover no-repeat;
    .shows {
        display: flex;
    }
    .left {
        position: relative;
        width: 34.375rem;
        height: auto;
        margin-right: 20px;
        cursor: pointer;
        overflow: hidden;
        .text {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 0 0.6rem;
            line-height: 3rem;
            font-size: 0.8rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            background-color: rgba(0, 0, 0, 0.57);
        }
        .pic {
            transition: 0.5s;
        }
        &:hover {
            .pic {
                transform: scale(1.3);
            }
        }
    }
    .card-list {
        width: 600px;
        li {
            display: flex;
            align-items: center;
            padding: 6px;
            margin-bottom: 7px;
            background-color: #fff;
            cursor: pointer;
            transition: 0.3s;
            &:last-child {
                margin-bottom: 0;
            }
            &:hover {
                transform: translateX(20px);
            }
        }
        .pic {
            width: 10.4375rem;
            height: 10.4375rem;
            margin-right: 1.8rem;
        }
        .texts {
            width: calc(100% - 12.5rem);
        }
        h6 {
            margin-bottom: 10px;
            font-size: 0.96rem;
            color: #333;
            @include ellipsis;
        }
        .sum {
            margin-bottom: 6px;
            font-size: 0.8rem;
            color: #666;
            @include ellipsis;
        }
        .text {
            display: flex;
            align-items: center;
            margin: 0.5rem 0;
            font-size: 0.72rem;
            @include ellipsis;
        }
        .icon {
            margin-right: 5px;
        }
    }
}

.media {
    background: #fff;
    .media-wrap {
        display: flex;
    }
    .left {
        width: 55%;
        margin-right: 1%;
        .slides {
            display: flex;
            margin-bottom: 20px;
        }
        .item {
            position: relative;
            flex: 1;
            height: 10rem;
            overflow: hidden;
            cursor: pointer;
            img {
                width: 100%;
                height: 100%;
                transition: 0.5s;
            }
            .text {
                position: absolute;
                bottom: 0;
                left: 0;
                width: 100%;
                padding: 0 1.35rem;
                line-height: 2.5rem;
                font-size: 0.8rem;
                color: #ffffff;
                @include ellipsis;
                background-color: rgba(0, 0, 0, 0.49);
            }
            &:hover {
                img {
                    transform: scale(1.3);
                }
            }
        }
        .list {
            padding: 1.7rem 1.8rem;
            background: #fff;
            box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
            li {
                margin-bottom: 2rem;
                transition: 0.5s;
                cursor: pointer;
                &:last-child {
                    margin-bottom: 0;
                }
                &:hover {
                    transform: scale(1.05);
                }
            }
            h6 {
                margin-bottom: 0.85rem;
                font-size: 0.88rem;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #272727;
                line-height: 1rem;
                text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
                @include ellipsis;
            }
            .des {
                font-size: 0.9rem;
                color: #666;
                -webkit-line-clamp: 2;
            }
        }
    }
    .right {
        width: 44%;
        box-shadow: 0px 0px 30px 0px rgba(48, 48, 48, 0.08);
        transition: 0.5s;
        cursor: pointer;
        .img-wrap {
            width: 100%;
            height: 21.1rem;
            overflow: hidden;
        }
        img {
            width: 100%;
            height: 100%;
            transition: 0.5s;
        }
        .texts {
            padding: 2rem 1.4rem;
        }
        h6 {
            font-size: 0.96rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #272727;
            line-height: 1.95rem;
            text-shadow: 0px 0px 30px rgba(48, 48, 48, 0.08);
            @include ellipsis;
        }
        .des {
            margin-top: 1rem;
            font-size: 0.8rem;
            color: #666;
            -webkit-line-clamp: 2;
        }
        &:hover {
            background: #005388;
            h6,
            .des {
                color: #fff;
            }
            img {
                transform: scale(1.3);
            }
        }
    }
}
.news {
    background: url(../../assets/images/sfel/5.png) (0 504px) / auto no-repeat,
        url(../../assets/images/sfel/6.png) (bottom right) / auto no-repeat;
}
.news {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    li {
        position: relative;
        // width: calc((100% - 56px) / 3);
        flex: 1;
        padding: 0.55rem;
        margin-right: 1.4rem;
        color: #333;
        background-color: #fff;
        box-shadow: 0px 5px 20px 0px rgba(98, 117, 163, 0.08);
        border-radius: 10px;
        transition: 0.3s;
        &:hover {
            transform: translateY(20px);
        }
        &:nth-child(3n) {
            margin-right: 0;
        }
        &:hover {
            color: #fff;
            background-color: #0252d9;
        }
    }
    img {
        width: 100%;
        height: 24.05rem;
    }
    .texts {
        padding: 0 0.9rem 2.5rem;
    }
    h6 {
        margin: 1.75rem 0 0.6rem;
        font-size: 1.05rem;
        line-height: 1.65rem;
    }
    .des {
        font-size: 0.8rem;
        line-height: 1.3rem;
    }
}
.program {
    background: #fff;
    .slide {
        display: flex;
        margin-bottom: 0.7rem;
        cursor: pointer;
    }
    .texts {
        width: 51%;
        padding: 2.8rem;
        background: #fbfbfb;
        h6 {
            font-size: 1.04rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
        }
        .des {
            margin: 1.75rem 0 1.25rem;
            font-size: 1rem;
            color: #666;
            line-height: 1.6rem;
        }
        .meta {
            font-size: 0.72rem;
            color: #666;
        }
    }
    .img-wrap {
        width: 49%;
        height: auto;
        overflow: hidden;
    }
    .pic {
        width: 100%;
        height: 100%;
        transition: 0.5s;
    }
    &:hover {
        .pic {
            transform: scale(1.3);
        }
    }
    .list {
        display: flex;
        li {
            // width: calc((100% - 28px) / 3);
            flex: 1;
            padding: 1.8rem 1.1rem;
            margin-right: 0.7rem;
            background: url(../../assets/images/sfel/7.png) no-repeat center;
            background-size: 100% 100%;
            transition: 0.5s;
            cursor: pointer;
            &:nth-child(2) {
                background-image: url(../../assets/images/sfel/8.png);
            }
            &:nth-child(3) {
                margin-right: 0;
                background-image: url(../../assets/images/sfel/9.png);
            }
            &:hover {
                transform: translateY(20px);
            }
        }
        .des {
            margin-bottom: 1.5rem;
            font-size: 1rem;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #ffffff;
            line-height: 30px;
            word-break: break-all;
        }
        .date {
            font-size: 0.72rem;
            font-family: LaoSangamMN;
            color: #ffffff;
        }
    }
}
.tools {
    z-index: 9;
    position: fixed;
    top: 12.5rem;
    left: 0;
    width: 9.4rem;
    text-align: center;
    .logo {
        padding: 15px 0;
        background: #0c60be;
        box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
    }
    .nav {
        li {
            padding: 0 10px;
            font-size: 0.88rem;
            line-height: 2.5rem;
            color: #fff;
            background-color: #1d1d1d;
            cursor: pointer;
            @include ellipsis;
            &.active {
                background-color: #1583ff;
            }
            &:hover {
                background-color: #1583ff;
            }
        }
    }
}
</style>