<template>
  <div id="index">
    <admin-frame :useTop="false" :usePage="false" :useNav="false">
      <template v-slot:info>
        <van-col span="24" class="one">
          <van-image :src="bj"></van-image>
          <p>吉林国家应用数学中心</p>
        </van-col>
        <van-col span="24" class="two">
          <van-tabs v-model="active" color="#409eff">
            <van-tab name="0" title="中心简介">
              <van-col span="24" class="tabs_1" :style="{ height: client.height - 195 + 'px' }" style="overflow-y: auto">
                <p>{{ info.content1.p1 }}</p>
                <p>{{ info.content1.p2 }}</p>
                <p>{{ info.content1.p3 }}</p>
                <p>{{ info.content1.p4 }}</p>
              </van-col>
            </van-tab>
            <van-tab name="1" title="中心主任">
              <van-col span="24" class="tabs_2" :style="{ height: client.height - 195 + 'px' }" style="overflow-y: auto">
                <van-col span="24" class="tabs_2txt">
                  {{ info.content2.p1 }}
                </van-col>
                <van-col span="24" class="tabs_2info">
                  <p>{{ info.content2.p2 }}</p>
                  <p>{{ info.content2.p3 }}</p>
                  <p>{{ info.content2.p4 }}</p>
                </van-col>
              </van-col>
            </van-tab>
            <van-tab name="2" title="学术委员会">
              <van-col span="24" class="tabs_3" :style="{ height: client.height - 195 + 'px' }" style="overflow-y: auto">
                <van-col span="24" class="tabs_3txt">
                  <p>{{ info.content3.p1 }}</p>
                  <p>{{ info.content3.p2 }}</p>
                </van-col>
                <van-col span="24" class="tabs_3info">
                  <p>{{ info.content3.p3 }}</p>
                  <p v-for="(i, index) in info.content3.p4" :key="index">
                    <span>{{ i.name }}</span>
                  </p>
                  <p>{{ info.content3.p5 }}</p>
                  <p v-for="(i, index) in info.content3.p6" :key="index">
                    <span>{{ i.name }}</span>
                    <span>：</span>
                    <span>{{ i.school }}</span>
                  </p>
                </van-col>
              </van-col>
            </van-tab>
          </van-tabs>
        </van-col>
      </template>
    </admin-frame>
  </div>
</template>

<script>
import { mathematics } from '@common/src/layout/deploy/dict';
import { mapState, createNamespacedHelpers } from 'vuex';
import adminFrame from '@common/src/components/mobile-frame/mobile-main.vue';
export default {
  name: 'index',
  props: {},
  components: {
    adminFrame,
  },
  data: function () {
    return {
      // 浏览器高度，宽度
      client: {},
      bj: require('@a/bj.jpg'),
      active: '0',
      // 详细信息
      info: mathematics,
    };
  },
  async created() {},
  methods: {},
  computed: {
    ...mapState(['user']),
  },
  mounted() {
    this.client = {
      height: document.documentElement.clientHeight || document.body.clientHeight,
      width: document.documentElement.clientWidth || document.body.clientWidth,
    };
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.one {
  height: 150px;
  overflow: hidden;
  position: relative;
  .van-image {
    height: 150px;
    overflow: hidden;
  }
  p {
    position: absolute;
    top: 44%;
    width: 100%;
    text-align: center;
    font-size: 32px;
    color: #fff;
    font-weight: bold;
    font-family: cursive;
    text-shadow: 0 -3px #000;
  }
}
.two {
  background-color: #fff;
  .tabs_1 {
    padding: 10px;
    p {
      font-size: 16px;
      margin: 0 0 8px 0;
      text-indent: 2em;
      line-height: 25px;
    }
  }
  .tabs_2 {
    color: #0070c0;
    padding: 10px;
    .tabs_2txt {
      text-align: center;
      margin: 0 0 10px 0;
      font-size: 25px;
      font-family: cursive;
    }
    .tabs_2info {
      p {
        text-indent: 2em;
        font-family: cursive;
        margin: 0 0 10px 0;
        line-height: 25px;
      }
    }
  }
  .tabs_3 {
    padding: 10px;
    .tabs_3txt {
      p {
        text-align: center;
        margin: 0 0 8px 0;
      }
    }
    .tabs_3info {
      p {
        font-size: 14px;
        margin: 0 0 8px 0px;
        line-height: 25px;
      }
    }
  }
}
</style>
