client-base-v5/src/App.vue

<template>
  <div>
    <div
      :class="{ 'grid-container': isShowTopNavigation, 'grid-container-hide-column1': !isShowMenu }"
    >
      <div v-if="isShowMenu" class="grid-item-row12-column1">
        <div>
          <keep-alive>
            <MenuWidget />
          </keep-alive>
        </div>
      </div>

      <div v-if="isShowTopNavigation" class="grid-item-row1-column2">
        <div>
          <!-- top navigation -->
          <keep-alive>
            <TopNavigation @menu-visible-changed="clickIsShowMenu" />
          </keep-alive>
        </div>
      </div>

      <div :class="{'grid-item-row2-column2' : isShowTopNavigation}">
        <div id="grid-item-center" :class="{'grid-center-container' : isShowTopNavigation}" />
        <div :class="{'center-container-single' : !isShowTopNavigation, 'center-container' : isShowTopNavigation }">
          <router-view />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import MenuWidget from './client/MenuWidget.vue';
import TopNavigation from './client/TopNavigation.vue';

export default {

  components: {
    MenuWidget,
    TopNavigation,
  },
  data: function () {
    return {
      // 是否显示菜单
      isShowMenu: false,
      // 是否显示上导航栏
      isShowTopNavigation: false,
    };
  },

  watch: {
    '$route.path': function (value) {
      this.computerComponentVisible();
    },
  },

  mounted: function () {
    var _self = this;
    var languageSelected = localStorage.getItem('#languageSelected');
    if (languageSelected == null || languageSelected == '') {
      this.$i18n.locale = 'zh-CN';
    } else {
      this.$i18n.locale = languageSelected;
    }

    this.computerComponentVisible();
  },

  methods: {
    /**
     * 点击之后存储isShowMenu
     */
    clickIsShowMenu: function () {
      var _self = this;
      this.isShowMenu = !this.isShowMenu;
      // localStorage.setItem('#IsShowMenu', this.isShowMenu);
    },
    /**
     * 计算组件的显示隐藏
     */
    computerComponentVisible: function () {
      let path = this.$route.path;
      let count = 0;
      if (path != null) {
        for (let index = 0; index < path.length; index++) {
          if (path[index] == '/') {
            count++;
          }
        }

        if (path.indexOf('register/') >= 0) {
          count = 1;
        }

        if (path.indexOf('dictionary/') >= 0) {
          count = 1;
        }

        if (path.indexOf('propassapp/') >= 0) {
          count = 1;
        }

        if (path.indexOf('single/') >= 0) {
          count = 1;
        }

        if (path.indexOf('lowcode-page/') >= 0) {
          count = 1;
        }

        if (path.indexOf('/generate-document/') >= 0) {
          count = 1;
        }

        if (window.top !== window.self) {
          count = 1;
        }
      }
      //if (value == "/client-init" || value == "/login") {
      if (count == 1) {
        this.isShowMenu = false;
        this.isShowTopNavigation = false;
      } else {
        // var isShowMenu = localStorage.getItem('#IsShowMenu');
        // if (isShowMenu == 'true') {
        //   this.isShowMenu = true;
        // } else {
        //   this.isShowMenu = false;
        // }
        this.isShowMenu = true;
        this.isShowTopNavigation = true;
      }
    },
  },
};
</script>


<style scoped>
.grid-container {
  display: grid;
  grid-template-columns: 230px auto;
  grid-template-rows: 54px 1fr;
  gap: 0px;
  justify-items: stretch;
  align-items: stretch;
  height: calc(100vh);
  overflow: auto;
}

.grid-container-hide-column1 {
  grid-template-columns: 0px auto;
  /*grid-template-rows: 0px 1fr;*/
}

.grid-item-row12-column1 {
  grid-row-start: 1;
  grid-row-end: 3;
  grid-column-start: 1;
  grid-column-end: 2;
}

.grid-item-row1-column2 {
  grid-row-start: 1;
  grid-row-end: 2;
  grid-column-start: 2;
  grid-column-end: 3;
}

.grid-item-row2-column2 {
  grid-row-start: 2;
  grid-row-end: 3;
  grid-column-start: 2;
  grid-column-end: 3;
  overflow: auto;
}

.grid-center-container {
  padding: 10px 20px 0;
}

.center-container-single {
  /* padding: 0px 20px 0; */
  padding: 0px;
}


.center-container {
  padding: 0px 20px 0;
}
</style>

<style>
/** 修复Bootstrap样式的BUG，input-group form-control 控件 会显示在 日期控件的前面 */
.input-group .form-control {
  /* z-index: 0; */
  /*checked by DengXin，修复input-group form-control 控件 会显示在 日期控件的前面的BUG*/
  position: static;
}
</style>



<!-- 已确定的CSS样式 -->
<style>
.site_title {
  text-overflow: ellipsis;
  overflow: hidden;
  font-weight: 400;
  font-size: 22px;
  width: 100%;
  color: #ecf0f1 !important;
  margin-left: 0 !important;
  line-height: 59px;
  display: block;
  height: 55px;
  margin: 0;
  padding-left: 10px;
}

.site_title:hover,
.site_title:focus {
  text-decoration: none;
}

.clearfix {
  clear: both;
}
</style>

<!-- 已确定的CSS 样式 -->
<style>
.container {
  width: 100% !important;
  padding: 0 !important;
}

.left_col {
  background: #2a3f54;
}

.menu_section {
  margin-bottom: 35px;
}

.menu_section h3 {
  padding-left: 23px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: bold;
  font-size: 11px;
  margin-bottom: 0;
  margin-top: 0;
  text-shadow: 1px 1px #000;
}

.menu_section > ul {
  margin-top: 10px;
}
</style>


<style>
.nav-md .container.body .col-md-3.left_col {
  width: 230px;
  padding: 0;
  position: absolute;
  display: -ms-flexbox;
  display: flex;
}

.nav-md .container.body .col-md-3.left_col.menu_fixed {
  height: 100%;
  position: fixed;
}

.nav-md .container.body .right_col {
  padding: 10px 20px 0;
}

/*@media (max-width: 991px) {
    .nav-md .container.body .right_col {
      width: 100%;
      margin: 0; 
    }

    .nav-md .container.body .col-md-3.left_col {
      display: none; 
    }

    .nav-md .container.body .right_col {
      width: 100%;
      padding-right: 0; 
    }

    .right_col {
      padding: 10px !important; 
    } 
  }*/
</style>

<style>
.profile_pic {
  width: 35%;
  float: left;
}

.img-circle.profile_img {
  width: 70%;
  background: #fff;
  margin-left: 15%;
  z-index: 1000;
  position: inherit;
  border: 1px solid rgba(52, 73, 94, 0.44);
  padding: 0px;
}

.profile_info {
  margin-top: 5px;
  width: 65%;
  float: left;
}

.profile_info span {
  font-size: 13px;
  line-height: 30px;
  color: #bab8b8;
}

.profile_info h2 {
  font-size: 14px;
  color: #ecf0f1;
  margin: 0;
  font-weight: 300;
}

.profile.img_2 {
  text-align: center;
}

.profile.img_2 .profile_pic {
  width: 100%;
}

.profile.img_2 .profile_pic .img-circle.profile_img {
  width: 50%;
  margin: 10px 0 0;
}

.profile.img_2 .profile_info {
  padding: 15px 10px 0;
  width: 100%;
  margin-bottom: 10px;
  float: left;
}

.main_menu span.fa {
  float: right;
  text-align: center;
  margin-top: 5px;
  font-size: 10px;
  min-width: inherit;
  color: #c4cfda;
}

.active a span.fa {
  text-align: right !important;
  margin-right: 4px;
}

/* .navbar-nav > li > a {
  color: #fff !important;
} */

body .container.body .right_col {
  background: #f7f7f7;
}

.nav_title {
  width: 230px;
  float: left;
  background: #2a3f54;
  border-radius: 0;
  height: 57px;
}

@media (max-width: 1200px) {
  .x_title h2 {
    width: 62%;
    font-size: 17px;
  }

  .tile,
  .graph {
    zoom: 85%;
    height: inherit;
  }
}

@media (max-width: 1270px) and (min-width: 192px) {
  .x_title h2 small {
    display: none;
  }
}

.left_col .mCSB_scrollTools {
  width: 6px;
}

.left_col .mCSB_dragger {
  max-height: 400px !important;
}
</style>

<style>
/** 修复分页的样式 By YangZhiJie 2021-07-06 11:23 */
nav ul.pagination {
  margin: 0 !important;
}

/** 修复CURD界面输入框右上角和右下角的圆弧倒角覆盖的BUG By YangZhiJie 2021-12-09 20:14 */
.input-group .form-control:first-child {
  border-radius: 4px;
}
</style>