FE_IASF_client/src/pages/lightSources/index.vue

<template>
  <!-- 全球先进光源 -->
  <div class="wrap">
    <div class="single-banner">
      <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="block gray">
      <div class="inner">
        <h2 class="b-title wow fadeInUp">{{ modules[1].form.title }}</h2>
        <p class="intro wow fadeInUp"
           data-wow-delay="0.8s">{{ modules[1].form.des }}</p>
        <img class="block-pic br wow fadeInLeft"
             data-wow-delay="0.8s"
             :class="{'cursor-pointer': isLink(modules[1].form.link.linkName)}"
             width="100%"
             height="536"
             :src="modules[1].form.pic"
             alt=""
             @click="openLink(modules[1].form)">
      </div>
    </div>

    <div class="block sources">
      <div class="inner">
        <ul class="tabs wow fadeInLeft">
          <li v-for="(item, i) in tabs"
              :class="{active: item.id == active}"
              :key="i"
              @click="tabChange(item)">{{ item.name }}</li>
        </ul>
        <table v-if="!active"
               class="table">
          <thead>
            <tr>
              <th>序号</th>
              <th>光源名称</th>
              <th>国家</th>
              <th>电子束能量（GeV）</th>
              <th>储存环周长(m)</th>
              <th>实验站数量</th>
              <th>代际</th>
              <th>建成/改造时间</th>
              <th>发射度(nm.rad)</th>
              <th>状态</th>
            </tr>
          </thead>
          <tr v-for="(item, i) in modules[2].list"
              :key="i">
            <td>{{ item.name }}</td>
            <td>{{ item.country }}</td>
            <td>{{ item.gev }}</td>
            <td>{{ item.storage }}</td>
            <td>{{ item.stations }}</td>
            <td>{{ item.intergenerational }}</td>
            <td>{{ item.time }}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.emittance }}</td>
            <td>{{ item.status }}</td>
          </tr>
        </table>
        <table v-else
               class="table">
          <thead>
            <tr>
              <th>序号</th>
              <th>光源名称</th>
              <th>国家</th>
              <th>地点</th>
              <th>加速器技术</th>
              <th>能量/GeV</th>
              <th>波长范围/nm</th>
              <th>重复频率/Hz Repetition rate</th>
              <th>设施长度/m Overall length</th>
              <th>线站数量</th>
              <th>出光时间</th>
            </tr>
          </thead>
          <template v-if="modules[3].list.length">
            <tr v-for="(item, i) in modules[3].list"
                :key="i">
              <td>{{ item.name }}</td>
              <td>{{ item.country }}</td>
              <td>{{ item.address }}</td>
              <td>{{ item.accelerator }}</td>
              <td>{{ item.gev }}</td>
              <td>{{ item.wavelength }}</td>
              <td>{{ item.repetitive }}</td>
              <td>{{ item.facility }}</td>
              <td>{{ item.stations }}</td>
              <td>{{ item.status }}</td>
              <td>{{ item.time }}</td>
            </tr>
          </template>
          <tr v-else>
            <td class="none"
                colspan="11">暂无数据</td>
          </tr>
        </table>
      </div>
    </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 {
      active: 0,
      tabs: [
        {
          id: 0,
          name: '同步辐射光源'
        },
        {
          id: 1,
          name: '自由电子激光'
        },
      ]
    }
  },
  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'])
          this.modules = json
          console.log("🚀 ~ file: index.vue ~ line 180 ~ this.$post ~ json", json)
        }
      }).catch(err => { })
    },
    // tab回调
    tabChange ({ id }) {
      this.active = id
    },
  }
};
</script>

<style lang="scss" scoped>
@import url(../../plugins/wow/animate.css);
@import '../../styles/page/page.scss';
.block {
    padding: 3.15rem 0;
    .inner {
        .b-title {
            font-size: 2.25rem;
            margin-bottom: 2.25rem;
        }
        .intro {
            margin-bottom: 2.25rem;
        }
    }
}
.block-pic {
    transition: 0.3s;
    height: auto;
    &.br {
        border-radius: 270px;
    }
    &:hover {
        transform: scale(1.05);
    }
}
.tabs {
    justify-content: flex-start;
    box-shadow: none;
}
.table {
    width: 100%;
    margin-top: 20px;
    border-collapse: collapse;
    th,
    td {
        padding: 10px 10px;
        font-size: 0.9rem;
        text-align: left;
    }
}
</style>