big_data_ott/src/views/Activity/Activity.vue

<template>
  <div class="activity">
    <el-loading></el-loading>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>新媒体</el-breadcrumb-item>
      <el-breadcrumb-item>重大活动传播数据</el-breadcrumb-item>
    </el-breadcrumb>
    <br />
    <el-tabs
      tab-position="top"
      style="max-height: 100%;"
      @tab-click="selectTab"
    >
      <el-tab-pane :label="item.name" v-for="(item, i) in activitys" :key="i">
        <el-scrollbar
          height="100%"
          always
          wrap-class="scorll"
          :name="i"
          v-if="item.component === select || selectA[item.component]"
        >
          <component :is="item.component" :item="item"></component>
        </el-scrollbar>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
// @ is an alias to /src
import { defaultAjax } from "@/api/index";
import derunsanqin from "./views/derunsanqin.vue";
import huashanyunhai from "./views/huashanyunhai.vue";
import mianmianjiedao from "./views/mianmianjiedao.vue";
import zhongqiuzhiye from "./views/zhongqiuzhiye.vue";
import shanxijiaoao1 from "./views/shanxijiaoao1.vue";
import shanxijiaoao2 from "./views/shanxijiaoao2.vue";
export default {
  name: "Activity",
  data() {
    return {
      activitys: [],
      select: "",
      selectA: {},
    };
  },
  mounted() {
    defaultAjax({
      url: "https://djweb.smcic.net/dj/static/chinaMap.json?t=" + Date.now(),
    }).then(map => {
      localStorage.setItem("chinaMap", JSON.stringify(map.json));
      this.activitys = [
        {
          name: "德润三秦",
          url: ["https://djweb.smcic.net/dj/static/t.json?" + Date.now()],
          component: "derunsanqin",
        },
        {
          name: "华山云海音乐会",
          component: "huashanyunhai",
        },
        {
          name: "面面皆道",
          component: "mianmianjiedao",
        },
        {
          name: "中秋之夜",
          component: "zhongqiuzhiye",
        },
        {
          name: "陕西骄傲-第二季",
          component: "shanxijiaoao2",
        },
        {
          name: "陕西骄傲-第一季",
          component: "shanxijiaoao1",
        },
      ];
      this.select = (this.activitys[0] || {}).component;
      this.selectA[this.select] = true;
    });
  },
  computed: {},
  methods: {
    selectTab(tab) {
      try {
        this.select = this.activitys[tab.index].component;
        this.selectA[this.select] = true;
      } catch (err) {
        console.log(err);
      }
    },
  },
  beforeUnmount: function() {},
  components: {
    derunsanqin,
    huashanyunhai,
    mianmianjiedao,
    zhongqiuzhiye,
    shanxijiaoao1,
    shanxijiaoao2,
  },
};
</script>

<style>
.activity {
  padding: 10px 15px;
  box-sizing: border-box;
}

.activity .num {
  font-size: 42px;
  color: #91afc8;
}
.titleNum {
  text-align: center;
}
.chart {
  padding: 5px 3px;
}

.subtitle {
  font-size: 16px;
  font-weight: 600;
}

.wumen {
  height: 1.5em;
  overflow: hidden;
  border-radius: 3px;
  background-color: #fc8452;
  text-align: right;
}
.men {
  width: 50%;
  background-color: #566ec6;
  height: 100%;
}
</style>