FE_IASF_server/src/pages/column/page/estate/index/index.vue

<template>
  <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="480px"
          :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 banner-block">
        <div class="inner">
          <div class="title">
            <h5>
              {{ modules[1].form.title }}
              <span class="sub">{{ modules[1].form.subTitle }}</span>
            </h5>
            <span class="more">MORE</span>
            <div class="cover" @click="toSet(1)">点击更换标题与小标题</div>
          </div>
          <div class="c-wrap">
            <div class="sfel-banner">
              <img style="width: 50%;height: 410px;overflow: hidden;" width="100%" height="480"
                src="https://new.iasf.ac.cn/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="card">
              <li>
                <img class="pic" src="https://new.iasf.ac.cn/images/about/9.png" alt="">
                <div class="texts">
                  <p class="meta">2022-09-09 | Research</p>
                  <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
                </div>
              </li>
              <li>
                <img class="pic" src="https://new.iasf.ac.cn/images/about/10.png" alt="">
                <div class="texts">
                  <p class="meta">2022-09-09 | Research</p>
                  <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
                </div>
              </li>
              <li>
                <img class="pic" src="https://new.iasf.ac.cn/images/about/11.png" alt="">
                <div class="texts">
                  <p class="meta">2022-09-09 | Research</p>
                  <div class="des">IASF is driven to serve the Science and industry, and solve grand </div>
                  <img class="arrow" src="@/assets/images/arrow.png" alt="">
                </div>
              </li>
            </ul>
            <div class="cover" @click="toSet(2)">关联栏目</div>
          </div>
        </div>
      </div>

      <div class="block talent">
        <div class="inner">
          <div class="title wow fadeInUp">
            <h5>
              {{ modules[3].form.title }}
              <span class="sub">{{ modules[3].form.subTitle }}</span>
            </h5>
            <span class="more">MORE</span>
            <div class="cover" @click="toSet(3)">点击更换标题与小标题</div>
          </div>
          <div class="shows">
            <div class="left wow fadeInLeft" data-wow-delay="0.5s">
              <h6>{{ modules[4].form.title }}</h6>
              <div class="text" v-html="modules[4].form.des"></div>
              <el-button type="primary" round>这里跳转</el-button>
            </div>
            <img :src="modules[4].form.pic" alt="" class="pic">
            <div class="cover" @click="toSet(4)">点击更换标题、描述、图片与链接</div>
          </div>
        </div>
      </div>

      <div class="block conference">
        <div class="inner lg">
          <div class="title">
            <h5>
              {{ modules[5].form.title }}
              <span class="sub">{{ modules[5].form.subTitle }}</span>
            </h5>
            <span class="more">MORE</span>
            <div class="cover" @click="toSet(5)">点击更换标题与小标题</div>
          </div>
          <div class="shows c-wrap">
            <div class="left">
              <img width="100%" height="100%" src="https://new.iasf.ac.cn/images/about/9.png" alt="">
              <div class="text">关于2021年度深圳综合粒子设施研究院采购意向公开表</div>
            </div>
            <ul class="card-list">
              <li>
                <img class="pic" src="https://new.iasf.ac.cn/images/about/10.png" alt="">
                <div class="texts">
                  <h6>专业技术培训 | 自由电子激光装置中的结构</h6>
                  <p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p>
                  <p class="text">
                    <img class="icon" src="@/assets/images/mine.png" alt="">
                    邵佳航
                  </p>
                  <p class="text">
                    <img class="icon" src="@/assets/images/time.png" alt="">
                    会议时间: 2022年8月13日 14:30
                  </p>
                  <p class="text">
                    <img class="icon" src="@/assets/images/online.png" alt="">
                    总部四楼大会议室
                  </p>
                </div>
              </li>
              <li>
                <img class="pic" src="https://new.iasf.ac.cn/images/about/10.png" alt="">
                <div class="texts">
                  <h6>专业技术培训 | 自由电子激光装置中的结构</h6>
                  <p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p>
                  <p class="text">
                    <img class="icon" src="@/assets/images/mine.png" alt="">
                    邵佳航
                  </p>
                  <p class="text">
                    <img class="icon" src="@/assets/images/time.png" alt="">
                    会议时间: 2022年8月13日 14:30
                  </p>
                  <p class="text">
                    <img class="icon" src="@/assets/images/online.png" alt="">
                    总部四楼大会议室
                  </p>
                </div>
              </li>
              <li>
                <img class="pic" src="https://new.iasf.ac.cn/images/about/10.png" alt="">
                <div class="texts">
                  <h6>专业技术培训 | 自由电子激光装置中的结构</h6>
                  <p class="sum">加速器总体-直线加速器总体-高重频电子枪组…</p>
                  <p class="text">
                    <img class="icon" src="@/assets/images/mine.png" alt="">
                    邵佳航
                  </p>
                  <p class="text">
                    <img class="icon" src="@/assets/images/time.png" alt="">
                    会议时间: 2022年8月13日 14:30
                  </p>
                  <p class="text">
                    <img class="icon" src="@/assets/images/online.png" alt="">
                    总部四楼大会议室
                  </p>
                </div>
              </li>
            </ul>
            <div class="cover" @click="toSet(6)">关联栏目</div>
          </div>
        </div>
      </div>

      <div class="block program">
        <div class="inner c-wrap">
          <div class="title">
            <h5>
              {{ modules[7].form.title }}
              <span class="sub">{{ modules[7].form.subTitle }}</span>
            </h5>
            <span class="more">MORE</span>
            <div class="cover" @click="toSet(7)">点击更换标题与小标题</div>
          </div>
          <div class="c-wrap">
            <div class="slide">
              <div class="texts">
                <h6>超快自由电子激光脉冲特性诊断研究方面取得重要进展</h6>
                <div class="des">
                  X射线自由电子激光已经成为了化学、生物、物理等领域不可或缺的研究手段。对于绝大多数自由电子激研究院紧密围绕高水平建设综合性国家科学中心战略目标，面向国民经济主战场和世界科技前沿…
                </div>
                <div class="meta">发表日期：2022.01.10 &emsp;浏览量：备份</div>
              </div>
              <img class="pic" src="@/assets/images/survey3.png" alt="">
            </div>
            <ul class="list">
              <li>
                <div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
                <p class="date">2022.10.10</p>
              </li>
              <li>
                <div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
                <p class="date">2022.10.10</p>
              </li>
              <li>
                <div class="des">X射线自由电子激光是基于国际最先进的超导加速器技术研发的装置，对于未来产业发展和基础科学应用有重要作用</div>
                <p class="date">2022.10.10</p>
              </li>
            </ul>
            <div class="cover" @click="toSet(8)">关联栏目</div>
          </div>
        </div>
      </div>
    </div>

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

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

  },
  methods: {

  }
};
</script>

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

.title {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding-bottom: 25px;
  margin-bottom: 30px;
  border-bottom: 1px solid #ddd;

  h5 {
    padding-left: 16px;
    font-size: 36px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
    line-height: 1;
    border-left: 6px solid #2b96ef;
  }

  .sub {
    font-size: 22px;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #afb7bf;
  }

  .more {
    font-size: 14px;
    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;

    &: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 {
  display: flex;
  flex-wrap: wrap;
  margin-top: 40px;

  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;

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

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

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

  .texts {
    padding: 40px 30px;
  }

  .meta {
    font-size: 16px;
    color: #666;
  }

  .des {
    margin: 10px 0;
    font-size: 20px;
    font-family: SFProDisplay;
    font-weight: 500;
    color: #333;
    line-height: 28px;
  }

  .arrow {
    width: 36px;
  }
}

.talent {
  .shows {
    position: relative;
    display: flex;
    color: #fff;
    background: #1a2844;
    border-radius: 0px 100px 0px 100px;

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

    h6 {
      font-size: 1.6rem;
    }

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

    .pic {
      width: 50%;
      height: 500px;
    }
  }
}

.conference {
  background: url(../../../../../assets/images/sfel/4.png) 0 0 / cover no-repeat;

  .shows {
    display: flex;
  }

  .left {
    position: relative;
    width: 688px;
    height: 688px;
    margin-right: 20px;
    cursor: pointer;

    .text {
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      padding: 0 12px;
      line-height: 59px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      background-color: rgba(0, 0, 0, 0.57);
    }
  }

  .card-list {
    width: 784px;

    li {
      display: flex;
      align-items: center;
      padding: 14px;
      margin-bottom: 21px;
      background-color: #fff;
      cursor: pointer;
      transition: 0.3s;

      &:last-child {
        margin-bottom: 0;
      }

      &:hover {
        transform: translateX(20px);
      }
    }

    .pic {
      width: 188px;
      height: 188px;
      margin-right: 36px;
    }

    h6 {
      margin-bottom: 10px;
      font-size: 20px;
      color: #333;
    }

    .sum {
      font-size: 16px;
      color: #666;
    }

    .text {
      display: flex;
      align-items: center;
      margin: 10px 0;
    }

    .icon {
      margin-right: 5px;
    }
  }
}

.program {
  background: #fff;

  .slide {
    display: flex;
    margin-bottom: 14px;
  }

  .texts {
    width: 51%;
    padding: 56px;
    background: #fbfbfb;

    h6 {
      font-size: 24px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #333333;
    }

    .des {
      margin: 35px 0 25px;
      font-size: 16px;
      color: #666;
      line-height: 32px;
    }

    .meta {
      font-size: 14px;
      color: #666;
    }
  }

  .pic {
    width: 49%;
    height: 430px;
  }

  .list {
    display: flex;

    li {
      width: calc((100% - 44px) / 3);
      padding: 36px 22px;
      margin-right: 14px;
      background: url(../../../../../assets/images/sfel/7.png) 0 0 / cover no-repeat;

      &: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);
      }
    }

    .des {
      margin-bottom: 30px;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #ffffff;
      line-height: 30px;
    }

    .date {
      font-size: 16px;
      font-family: LaoSangamMN;
      color: #ffffff;
    }
  }
}

.tools {
  position: absolute;
  top: 600px;
  left: 0;
  width: 226px;
  text-align: center;

  .logo {
    padding: 44px 0;
    background: #0c60be;
    box-shadow: 0px 0px 20px 0px rgba(184, 191, 200, 0.3);
  }

  .nav {
    li {
      padding: 0 10px;
      font-size: 24px;
      line-height: 83px;
      color: #fff;
      background-color: #1d1d1d;
      cursor: pointer;
      @include ellipsis;

      &.active {
        background-color: #1583ff;
      }
    }
  }
}

@media (max-width: 1520px) {
  .lg {
    width: 98%;
  }
}
</style>