live-telecast-ui-h5/src/layout/index.vue

<template>
  <div class="layout">
    <router-view />

    <!-- 底部导航 -->
    <van-tabbar
      v-model="active"
      safe-area-inset-bottom
      placeholder
      
      route
    >
      <van-tabbar-item
        v-for="(item, index) in bottomTabs"
        :key="index"
        :to="item.to"
      >
        <span>{{ item.title }}</span>
        <template #icon="props">
          <img :src="props.active ? item.icon.active : item.icon.inactive" />
        </template>
      </van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { Tabbar, TabbarItem } from "vant";

// import RightPanel from "@/components/RightPanel";
// import { AppMain, Navbar, Settings, Sidebar, TagsView } from "./components";
// import ResizeMixin from "./mixin/ResizeHandler";
// import { mapState } from "vuex";

export default {
  name: "Layout",
  components: {
    "van-tabbar": Tabbar,
    "van-tabbar-item": TabbarItem,
  },
  data() {
    return {
      active: 0,
      bottomTabs: [
        //底部导航配置
        {
          to: "/home/paddy",
          title: "藏金·1745",
          icon: {
            active: require("@/assets/images/home/1745-active.png"),
            inactive: require("@/assets/images/home/bottomBtn1.png"),
          },
        },
        {
          to: "/home/product",
          title: "兑换中心",
          icon: {
            active: require("@/assets/images/home/product-active.png"),
            inactive: require("@/assets/images/home/bottomBtn2.png"),
          },
        },
        {
          to: "/home/my",
          title: "个人中心",
          icon: {
            active: require("@/assets/images/home/personal-active.png"),
            inactive: require("@/assets/images/home/bottomBtn3.png"),
          },
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
@import "../assets/css/_handle.scss";

@mixin layout-dev {
  position: fixed;
  height: 100%;
  width: 100%;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  overflow: scroll;
}
.layout {
  @include layout-dev;
}

.van-tabbar-item{
  
   @include font_color("font_tb_j");
   @include background("bd_tb_j");
}
.van-hairline--top-bottom.van-tabbar.van-tabbar--fixed

  .van-tabbar-item.van-tabbar-item--active {
     @include font_color("font_tb_d");

  // background: #000;
}

// @import "~@/styles/mixin.scss";
// @import "~@/styles/variables.scss";

// .app-wrapper {
//   min-width: 1200px;
//   @include clearfix;
//   position: relative;
//   height: 100%;
//   width: 100%;

//   &.mobile.openSidebar {
//     position: fixed;
//     top: 0;
//   }
// }

// .drawer-bg {
//   background: #000;
//   opacity: 0.3;
//   width: 100%;
//   top: 0;
//   height: 100%;
//   position: absolute;
//   z-index: 999;
// }

// .fixed-header {
//   position: fixed;
//   top: 0;
//   right: 0;
//   z-index: 9;
//   width: calc(100% - #{$sideBarWidth});
//   transition: width 0.28s;
// }

// .hideSidebar .fixed-header {
//   width: calc(100% - 54px);
// }

// .mobile .fixed-header {
//   width: 100%;
// }
</style>