FE_IASF_server/src/pages/column/page/overviewDevHistory.vue

<template>
  <div class="wrap">
    <div class="actions">
      <p class="page-name">页面设置/SFEL-概况-发展历程</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">
        <div class="single-banner single-banner-overview">
          <img class="banner-img"
               :src="modules[0].form.pic"
               alt="">
          <div class="texts">
            <h6 class="banner-title">{{ modules[0].form.title }}</h6>
          </div>
        </div>
        <div class="cover"
             @click="toSet(0)">点击更换banner与链接</div>
      </div>

      <ul class="tabs wow fadeInLeft">
        <template v-for="(item, i) in tabs">
          <li :class="{active: i == active}"
              :key="i"
              @click="tabChange(i)">{{ item }}</li>
        </template>
      </ul>

      <div class="block history">
        <div class="inner">
          <div class="c-wrap">
            <h2 class="wow fadeInLeft"
                v-html="modules[1].form.title"></h2>
            <p class="en">{{ modules[1].form.des }}</p>
            <div class="cover"
                 @click="toSet(1)">点击更换标题与描述</div>
          </div>

          <div class="c-wrap">
            <div v-if="modules[2].list.length"
                 class="event">
              <ul class="time">
                <template v-for="(item, i) in modules[2].list">
                  <li v-if="item.isEnable"
                      :key="i"
                      :class="{active: curYear == i}">{{ item.title }}</li>
                </template>
              </ul>
              <div class="right">
                <h6 class="year">{{ modules[2].list[curYear].title }}</h6>
                <ul class="list">
                  <template v-for="(e, j) in modules[2].list[curYear].list">
                    <li v-if="e.isEnable"
                        :key="j">
                      <div class="texts">
                        <p class="date">{{ e.title }}</p>
                        <p class="text">{{ e.des }}</p>
                      </div>
                      <img v-if="e.pic"
                           :src="e.pic"
                           alt=""
                           class="pic">
                    </li>
                  </template>
                </ul>
              </div>
            </div>
            <div class="cover"
                 style="min-height: 300px;"
                 @click="toSet(2)">点击配置历程</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.overviewDevHistory,
      active: 0,
      tabs: ['发展历程'],
      curYear: 0
    }
  },
  mounted () {
    this.$store.commit('user/setCrumbs', [
      {
        name: '站点管理',
        route: '/site'
      },
      {
        name: '内容管理',
        route: '/column'
      },
      {
        name: '栏目管理',
        route: '/column'
      },
      {
        name: '概况-发展历程'
      }
    ])
  },
  methods: {
    // tab回调
    tabChange (i) {
      this.active = i
    },
  }
};
</script>

<style lang="scss" scoped>
@import '../../../styles/page/page.scss';
.wrap {
    background: url(https://new.iasf.ac.cn/images/overviewDevHistory/1.png) (right 505px) / auto no-repeat,
        url(https://new.iasf.ac.cn/images/overviewDevHistory/2.png) (left bottom) / auto no-repeat;
    background-color: #fff;
}
.tabs {
    display: flex;
    justify-content: center;
    box-shadow: 0px 2px 10px 0px rgba(223, 223, 223, 0.28);
    li {
        padding: 25px 19px;
        margin: 0 10px;
        font-size: 1.1rem;
        color: #333;
        border-bottom: 4px solid transparent;
        text-shadow: 0px 2px 14px rgba(167, 167, 167, 0.26);
        cursor: pointer;
        &.active {
            color: #1583ff;
            border-bottom-color: #1583ff;
        }
    }
}
.history {
    h2 {
        position: relative;
        font-size: 2.2rem;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #1c1c1c;
    }
    .en {
        margin: -15px 0 40px;
        font-size: 2.2rem;
        font-family: PingFangSC-Light, PingFang SC;
        font-weight: 300;
        color: #e3e3e3;
    }
}
.event {
    display: flex;
    justify-content: center;
    .time {
        width: 200px;
        padding-right: 10px;
        margin-right: 20px;
        border-right: 1px solid #ddd;
        li {
            display: flex;
            justify-content: flex-end;
            align-items: center;
            width: 190px;
            padding-right: 45px;
            line-height: 60px;
            font-size: 1.4rem;
            font-weight: 600;
            font-family: SFProDisplay-Semibold, SFProDisplay;
            color: #666;
            box-shadow: inset 0px -1px 0px 0px #dddddd;
            cursor: pointer;
            &.active {
                font-weight: 800;
                color: #1a81f4;
                background: linear-gradient(90deg, #ffffff 0%, #f3f8ff 100%);
                &:before {
                    content: '';
                    width: 18px;
                    height: 18px;
                    background: url(https://new.iasf.ac.cn/images/overviewDevHistory/3.png) no-repeat;
                    margin-right: 20px;
                }
            }
        }
    }
    .right {
        width: 900px;
    }
    .year {
        margin: 0 0 20px 20px;
        font-size: 3.8rem;
        font-family: ToppanBunkyuMidashiGothicStdN-ExtraBold, ToppanBunkyuMidashiGothicStdN;
        font-weight: 800;
        color: #1a81f4;
    }
    .list {
        border-top: 1px solid #ddd;
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 30px;
            border-bottom: 1px solid #ddd;
        }
        .texts {
            width: 500px;
        }
        .date {
            margin-bottom: 15px;
            font-size: 1.2rem;
            font-family: PingFangSC-Semibold, PingFang SC;
            font-weight: 600;
            color: #333;
        }
        .text {
            font-size: 1.1rem;
            color: #333;
            @include mul-ellipsis(3);
            &:before {
                content: '';
                display: inline-block;
                width: 7px;
                height: 7px;
                margin: 0 10px;
                background-color: #666;
                transform: rotate(45deg);
            }
        }
        .pic {
            width: 350px;
            height: 195px;
        }
    }
}
</style>