live-telecast-ui-h5/src/App.vue

<template>
  <div id="app" v-cloak>
    <!-- <div class="bg-box"></div> -->
    <button @click="theme('light')" class="aaa">按他变色</button>
    <button @click="theme('dark')" class="bbb">按他变色2</button>
    <router-view />
  </div>
</template>
<script>
export default {
  data() {
    return {
      
    }
  },
  mounted() {
  },
  methods: {
    theme(type) {

      // this.$store.commit('upDate', {themeType: type});

      window.document.documentElement.setAttribute( "data-theme", type );

      }
  },
};
</script>
<style lang="scss">
@import "./assets/css/index.css";
.aaa,.bbb{
  position: fixed;
  top: 0;
  padding: 20px;
  background: red;
  z-index: 999;
}
.bbb{
  right: 0;
}
@mixin layout-dev {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html {
  @include layout-dev;
  body {
    @include layout-dev;

    #app {
      @include layout-dev;
      font-size: 12px;
      background: #fafafa;
      // .bg-box {
      //   position: absolute;
      //   z-index: 1;
      //   width: 100%;
      //   height: 84px;
      //   margin: 0 0;
      //   padding:0;
      //   box-sizing: border-box;
      //   background: linear-gradient(0deg,  #fafafa 0%  ,#f3d028 100% );
      // }
      .layout,
      .address,
      .addressView,
      .order,
      .oDetail,
      .aboutUs,
      .product,
      .live,
      .paddy,
      .liveD,
      .orderRes,
      .login,.reset {
        @include layout-dev;
        background: transparent;
        position: absolute;
        height: 100%;
        height: 100%;
        z-index: 2;
        .page-main {
          box-sizing: border-box;
          overflow-y: scroll;
          width: 100%;
          height: auto;
        }
        .van-nav-bar-my-fixed {
          .van-nav-bar__content {
            // background: linear-gradient(0deg, #fafafa 0%, #f3d028 100%);
            background-color: #111;
          }
        }
        .van-tabbar--fixed {
          z-index: 999999;
          background-color: #111111;
        }
      }
    }
    .van-dialog {
      padding:20px 20px 20px;
      .van-dialog__footer{
        display: block;
        .van-dialog__cancel{
          float: left;
          width: calc(50% - 5px);
          // border:1px 
          background: #e6e6dc;
          border-radius: 8px;
        }
        .van-dialog__confirm{
          float: right;
          width: calc(50% - 5px);
          border-radius: 8px;
        }
      }
    }
  }
}
</style>