txw/txw-mhzc-web/src/pages/index/app.vue

<template>
  <div>
    <div>
      <keep-alive>
        <router-view v-if="$route.meta.keepAlive"></router-view>
      </keep-alive>
      <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
  </div>
</template>

<script>
// import { GLayout } from '@gtff/tdesign-gt-vue';
import { getClientHeight } from '@gtff/tdesign-gt-vue';

export default {
  data() {
    return {
      publicPath: window.STATIC_ENV_CONFIG.RESOURCE_PREFIX,
      containerHeight: 0,
      business: '',
      businessId: '',
      iframeUrl: '',
      containerStyle: {
        width: '1895px',
        height: '953px',
        transform: 'scale(1)',
        transformOrigin: '0 0',
      },
      khfwStyle: '',
    };
  },
  watch: {
    $route: 'changeRoute',
    appName(newVal) {
      window.document.title = newVal;
    },
  },
  computed: {
    appName() {
      return this.$store.state.settings.APP_NAME;
    },
    type() {
      if (this.$route?.meta?.isShowSideBar) {
        return 'widthScreen';
      }
      return '';
    },
  },
  mounted() {
    this.setTopbarActive();
    this.updateScreenCompatibility();
    window.addEventListener('resize', () => {
      this.updateScreenCompatibility();
    });
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.updateScreenCompatibility);
  },
  created() {
    this.getHeight();
    this.$EventBus.$on('changeBread', (data) => {
      if (data) {
        this.$refs.gtbread.meta = data;
      }
    });
    this.breadInit();
  },
  methods: {
    updateScreenCompatibility() {
      const targetWidth = 1895;
      const targetHeight = 953; // 1080;
      const viewportWidth = window.innerWidth;
      const viewportHeight = window.innerHeight;

      const scale = Math.min(viewportWidth / targetWidth, viewportHeight / targetHeight);
      this.containerStyle = {
        width: `${targetWidth}px`,
        height: `${targetHeight}px`,
        transform: `scale(${scale})`,
        transformOrigin: '50% 0',
      };

      this.khfwStyle = {
        transform: `scale(${scale})`,
        transformOrigin: '50% 0',
        position: 'fixed',
        top: `40%`,
        right: `0.8%`,
      };
    },
    breadInit() {
      let mhMeta = window.localStorage.getItem('mhMeta');
      if (mhMeta) {
        mhMeta = JSON.parse(mhMeta);
        this.meta = {
          isBack: false,
          breadCrumbs: [...mhMeta],
        };
      }
      if (this.meta) {
        const breandCrumbs = this.meta.breadCrumbs;
        if (breandCrumbs && breandCrumbs.length > 1) {
          let breadcrumb = breandCrumbs[breandCrumbs.length - 1].path;
          breadcrumb = breadcrumb.substring(breadcrumb.lastIndexOf('/'));
          breandCrumbs[breandCrumbs.length - 1].path = breadcrumb;
        }
      }
      if (this.meta) {
        // 通过eventBus 派发emitEvent事件
        this.$refs.gtbread.meta = this.meta;
      }
    },
    getHeight() {
      this.containerHeight = getClientHeight() - 164;
    },
    changeRoute(route) {
      const isShowSideBar = typeof route.meta.isShowSideBar === 'undefined' ? true : route.meta.isShowSideBar;
      this.$store.commit(`global/${this.$storeGlobalTypes.SET_SIDEBAR_STATUS}`, isShowSideBar);
      this.setTopbarActive();
    },
    setTopbarActive() {
      this.$store.commit(
        `global/${this.$storeGlobalTypes.SET_TOPBAR_ACTIVE_KEY}`,
        this.$route.meta.topbarKey || this.$route.path,
      );
    },
  },
};
</script>

<style>
@import './assets/css/tailwindcss.css';

html {
  font-size: 20px; /* 将基准值从12px改为20px */
  scroll-behavior: smooth;
}
a {
  font-size: 20px;
  color: #9ca3af;
  text-decoration: none;
}

/* .cxssb-content {
  width: 100%;
  height: 100vh;
} */

/* 增强版隐藏滚动条方案 */
.cxssb-content {
    width: 100%;
  height: 100vh;
  overflow-x: hidden !important;
  overflow-y: auto !important; /* 使用 !important 提高优先级 */
  flex-shrink: 0;
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE 10+ */
}

/* Chrome, Safari, Edge, Opera */
.cxssb-content::-webkit-scrollbar {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
}

.cxssb-content::-webkit-scrollbar-track {
  background: transparent !important;
}

.cxssb-content::-webkit-scrollbar-thumb {
  background: transparent !important;
  border: none !important;
}

/* 针对 IE 和 Edge 的额外处理 */
@supports (-ms-ime-align: auto) {
  .cxssb-content {
    -ms-overflow-style: none;
    overflow: -moz-scrollbars-none;
  }
}

/* 针对老版本 Safari */
@supports (-webkit-overflow-scrolling: touch) {
  .cxssb-content {
    -webkit-overflow-scrolling: touch;
  }
}
</style>