<template>
  <div class="manage">
    <Top></Top>
    <Row class="manage_wrap">
      <i-col class="left_nav">
        <component :is="curCom"></component>
      </i-col>
      <i-col class="left_main">
        <div style="min-height:830px">
          <router-view></router-view>
        </div>
        <p class="technical-support">
          
          <span class="addTip">此产品不能独立使用，需要对接溪谷游戏平台或者其他平台对接接口方可使用</span>
          <i class="warningIcon"></i>
          <a href=" http://oa.vlsdk.com/news_detail/56.html " target="_blank">您拥有使用本软件构建的网站全部内容所有权，并独立承担与这些内容的相关法律义务。详情请查看<span style="color:#3B82FF">《服务协议》</span></a>
        </p>
        <Spin size="large" fix v-if="loadingStatus"></Spin>
      </i-col>
      <rightHover></rightHover>
    </Row>
  </div>
</template>
<script>
import { mapState } from "vuex";
import rightHover from "@@/base/right_hover.vue";
import Top from "@@/base/Top.vue";
import leftInfo from "@@/left_menu/left_info.vue";
export default {
  name: "manage",
  components: {
    Top,
    leftInfo,
    rightHover
  },
  props: {},
  data() {
    return {};
  },
  computed: {
    ...mapState({
      saveRoute: state => state.saveRoute,
      routeType: state => state.routeType
    }),
    curCom() {
      return this.saveRoute[this.routeType].leftCom;
    }, 
    loadingStatus: {
      get() {
        return this.$store.state.loading;
      },
      set(value) {
        this.$store.commit("changeloading", value);
      }
    }
  },
  methods: { }
};
</script>
<style>
.manage .ivu-row.manage_wrap {
  display: flex;
  justify-content: space-between;
  height: calc(100% - 44px);
}
.manage .ivu-row .ivu-col {
  height: 100vh;
  padding: 21px 23px 21px 26px;
  overflow-y: auto;
}
.manage .ivu-row .ivu-col.left_nav {
  padding: 0;
  width: 193px;
  /* background-color: rgba(52, 64, 78, 1); */
  background-color: #fff;
  border-top: 1px solid rgba(222, 222, 222, .55);
  border-right: 1px solid rgba(222, 222, 222, .55);
  box-shadow: 0 5px 1px 7px rgba(222, 222, 222, 0.15);
}

.manage .ivu-row .ivu-col.left_main {
  width: calc(100% - 193px);
  /* background-color:#f8f9fb; */
  background-color:#F3F4F5;
  padding-bottom: 68px;
  height: auto;
}
.manage .ivu-row .ivu-col.left_nav::-webkit-scrollbar {
  width: 0;
}
</style>

<style scoped>
.manage {
  height: 100%;
}
.technical-support {
  width: calc(100% - 2px);
  text-align: center;
  font-size: 12px;
  cursor: pointer;
  position: relative;
  bottom: -5px;
}
.technical-support a{
  color: #999999!important;
}
.warningIcon {
  width: 14px;
  height: 14px;
  display: inline-block;
  background: url('../../static/image/icon_ts.png') no-repeat;
  vertical-align: middle;
  margin-bottom: 4px;
  margin-right: 1px;
}
.addTip {
    display: block;
    color: #999;
    margin-top: 5px;
}
</style>
