cc-wap/src/views/index/cc-index.vue

<script>
import homeIndex from "@/views/home/home-index.vue";
import myIndex from "@/views/my/my-index.vue";
import convertIndex from "@/views/convert/convert-index.vue";
export default {
  components: { homeIndex, myIndex, convertIndex },
  data() {
    return {
      tab_index: 1
    };
  },
  mounted() {},
  methods: {
    tabClick(num) {
      if(num) {
        this.tab_index = num
      }
    }
  },
}
</script>

<template>
<div class="flex-common-css">
  <div class="top-b bgc-f plr-20 box-sizing-border align-items-center flex-justify-space">
    <el-image
        class="img-box"
        :src="require('@/assets/img/logo/logo.png')"
        fit=""></el-image>
    <div class="fs-15">
      sdfsdfsfsd222
    </div>
  </div>
  <div class="content-b p-20 box-sizing-border">
    <div class="scroll-view-css">
      <homeIndex v-if="tab_index === 1"></homeIndex>
      <convertIndex v-if="tab_index === 2"></convertIndex>
      <myIndex v-else></myIndex>
    </div>
    <div class="tab-b align-items-center flex-justify-space b-rad-10 bgc-f">
      <div @click="tabClick(1)" class="flex-1 flex-direction-column align-items-center flex-justify-center">
        <el-image
            class="tab-img mb-4"
            v-if="tab_index === 1"
            :src="require('@/assets/img/tab/index.svg')"
            fit=""></el-image>
        <el-image
            class="tab-img mb-4"
            v-else
            :src="require('@/assets/img/tab/index-two.svg')"
            fit=""></el-image>
        <div class="fs-14" :class="tab_index === 1?'fc-f78820':''">首页</div>
      </div>
      <div @click="tabClick(2)" class="flex-1 flex-direction-column align-items-center flex-justify-center">
        <el-image
            class="tab-img mb-4"
            :src="require('@/assets/img/tab/jh.svg')"
            fit=""></el-image>
        <div class="fs-14" :class="tab_index === 2?'fc-f78820':''">兑换</div>
      </div>
      <div @click="tabClick(3)" class="flex-1 flex-direction-column align-items-center flex-justify-center">
        <el-image
            v-if="tab_index === 3"
            class="tab-img mb-4"
            :src="require('@/assets/img/tab/my-two.svg')"
            fit=""></el-image>
        <el-image
            v-else
            class="tab-img mb-4"
            :src="require('@/assets/img/tab/my.svg')"
            fit=""></el-image>
        <div class="fs-14" :class="tab_index === 3?'fc-f78820':''">我的</div>
      </div>
    </div>
  </div>
</div>
</template>

<style scoped lang="scss">
.content-b{
  width: 100%;
  height: calc(100vh - 49px);
  display: flex;
  flex-direction: column;
}
.top-b{
  width: 100%;
  height: 49px;
  line-height: 49px;
}
.img-box{
  width: 39px;
  height: 30px;
}
.tab-img{
  width: 25px;
  height: 25px;
}
.tab-b{
  width: 100%;
  height: 69px;
  padding: 10px 0;
  box-sizing: border-box;
}
.w-500{
  width: 100%;
  height: 300px;
}
</style>