crm/resources/wechat/src/index.vue

<template>
  <div class="page">
    <header-list @handleClick="switchTab"></header-list>
    <div class="content">
      <!-- 装修案例 -->
      <template v-if="activeIndex === '1'">
        <case-filter style="width: 100%; height: 100%;"></case-filter>
      </template>
      <!-- 装修指南 -->
      <template v-else-if="activeIndex === '2'">
        <guidebook style="width: 100%; height: 100%;"></guidebook>
      </template>
      <!-- 视频讲装修 -->
      <template v-else-if="activeIndex === '3'">
        <video-module style="width: 100%; height: 100%;"></video-module>
      </template>
      <!-- 业主口碑 -->
      <template v-else>
        <evaluate style="width: 100%; height: 100%;"></evaluate>
      </template>
    </div>
  </div>
</template>

<script>
import headerList from "@/components/header-list.vue";
import caseFilter from "@/components/case-filter.vue";
import guidebook from "@/components/guidebook.vue";
import videoModule from "@/components/video-module.vue";
import evaluate from "@/components/evaluate.vue";
export default {
  components: {
    headerList,
    caseFilter,
    guidebook,
    videoModule,
    evaluate,
  },
  data() {
    return {
      activeIndex: "1",
    };
  },
  mounted() {
    let active = sessionStorage.getItem("main-active");
    this.activeIndex = active ? active : "1";
  },
  methods: {
    switchTab(command) {
      this.activeIndex = command;
      sessionStorage.setItem("main-active", command);
    },
  },
};
</script>

<style scoped>
* {
  font-family: PingFangSC-Regular, PingFang SC;
}
.page {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
  overflow-y: scroll;
}
</style>