xitons.vue 3.0 KB
<template>
  <div>
    <div class="transport-box">
      <div class="fahuo">
        <ul class="ul-list">
          <li
            v-for="(item, index) in addlist"
            :key="index"
            :class="active == index ? 'liks' : 'lik'"
            @click="li(index)"
          >
            <img
              :src="item.activeUrl"
              class="fa-img"
              alt=""
              v-if="active == index"
            />
            <img :src="item.url" class="fa-img" alt="" v-else />

            {{ item.text }}
          </li>
        </ul>
      </div>
    </div>
    <Tabbar :actives="4"></Tabbar>
    <Yon v-if="fai"></Yon>
    <Pei v-if="peii"></Pei>
    <Pai v-if="paii"></Pai>
    <Zhuan v-if="zhuan"></Zhuan>
  </div>
</template>

<script>
import Tabbar from "../tabbar.vue";
import Yon from "../xiton/yonhu.vue";
import Pei from "../xiton/gon.vue";
import Pai from "../xiton/xi.vue";
import Zhuan from "../xiton/duan.vue";
export default {
  components: {
    Tabbar,
    Yon,
    Pei,
    Pai,
    Zhuan
  },
  data() {
    return {
      addlist: [
        {
          url: require("../../assets/21.png"),
          activeUrl: require("../../assets/9.png"),
          text: "用户管理",
        },
        {
          url: require("../../assets/14.png"),
          activeUrl: require("../../assets/4.png"),
          text: "功能权限管理",
        },
        {
          url: require("../../assets/20.png"),
          activeUrl: require("../../assets/8.png"),
          text: "系统消息设置",
        },
        {
          url: require("../../assets/17.png"),
          activeUrl: require("../../assets/3.png"),
          text: "手机短信设置",
        }
      ],
      active: "0",
      fai: true,
      peii: false,
      paii: false,
      zhuan:false,
      fayun:false,
      zaitu:false,
      sonda:false,
      jies:false
    };
  },
  methods: {
    //tab切换
    li(index) {
      this.active = index;
      if (this.active == 0) {
        this.fai = true;
        this.peii = false;
        this.paii = false;
        this.zhuan = false
        this.fayun = false
        this.zaitu = false
        this.sonda = false
        this.jies = false
      } else if (this.active == 1) {
        this.peii = true;
        this.fai = false;
        this.paii = false;
        this.zhuan = false
        this.fayun = false
        this.zaitu = false
        this.sonda = false
        this.jies = false
      } else if (this.active == 2) {
        this.fai = false;
        this.peii = false;
        this.paii = true;
        this.zhuan = false
        this.fayun = false
        this.zaitu = false
        this.sonda = false
        this.jies = false
      }else if(this.active == 3){
        this.fai = false;
        this.peii = false;
        this.paii = false;
        this.zhuan = true
        this.fayun = false
        this.zaitu = false
        this.sonda = false
        this.jies = false
      }
      console.log(index);
    },
  },
};
</script>

<style scoped>
@import "../../css/transport.css";
</style>