m2pool_web_frontend/mining-pool/public/src/App.vue

<template>
  <div id="app">
    <router-view class="page" />
    <ChatWidget v-if="!$route.path.includes('/customerService') && !$isMobile && jurisdiction.roleKey !== 'back_admin'" />
  </div>
</template>
<script  >
import ChatWidget from "../src/components/ChatWidget.vue";
import { Debounce, throttle } from "@/utils/publicMethods";
import Vue from "vue";
export default {
  name: "App",

  components: {
    ChatWidget,
  },

  data() {
    return {
      flag: false,
      isMobile: false,
      jurisdiction: {
        roleKey: "",
      },
    };
  },

  created() {
    window.addEventListener("resize", Debounce(this.updateWindowWidth, 10));
    let jurisdiction = localStorage.getItem("jurisdiction");
    try {
      jurisdiction = jurisdiction ? JSON.parse(jurisdiction) : { roleKey: "" };
    } catch (e) {
      jurisdiction = { roleKey: "" };
    }
    this.jurisdiction = jurisdiction;

    window.addEventListener("setItem", () => {
      let jurisdiction = localStorage.getItem("jurisdiction");
      try {
        jurisdiction = jurisdiction
          ? JSON.parse(jurisdiction)
          : { roleKey: "" };
      } catch (e) {
        jurisdiction = { roleKey: "" };
      }
      this.jurisdiction = jurisdiction;
    });
  },
  mounted() {
    let jurisdiction = localStorage.getItem("jurisdiction");
    try {
      jurisdiction = jurisdiction ? JSON.parse(jurisdiction) : { roleKey: "" };
    } catch (e) {
      jurisdiction = { roleKey: "" };
    }
    this.jurisdiction = jurisdiction;

    window.addEventListener("setItem", () => {
      let jurisdiction = localStorage.getItem("jurisdiction");
      try {
        jurisdiction = jurisdiction
          ? JSON.parse(jurisdiction)
          : { roleKey: "" };
      } catch (e) {
        jurisdiction = { roleKey: "" };
      }
      this.jurisdiction = jurisdiction;
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.updateWindowWidth); // 移除监听器
  },
  methods: {
    updateWindowWidth() {
      console.log(
        window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth
      );
      //取到了屏幕宽度

      const screenWidth =
        window.innerWidth ||
        document.documentElement.clientWidth ||
        document.body.clientWidth;
      const isNarrowScreen = screenWidth < 1280;
      Vue.prototype.$isMobile = isNarrowScreen;
      location.reload();
    },
  },
};
</script>

<style lang="scss">
:root {
  --background-color: #ffffff;
  --text-color: #000000;
}

.dark-mode {
  --background-color: #000000;
  --text-color: #ffffff;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  //隐藏滚动条
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-right: none;
  box-sizing: border-box;
  overflow: hidden;
}
#app {
  // font-family: Avenir, Helvetica, Arial, sans-serif;
  // -webkit-font-smoothing: antialiased;
  // -moz-osx-font-smoothing: grayscale;
  // text-align: center;
  // color: #2c3e50;
  overflow-x: hidden;

  // font-size: 1.1em;
  /* 滚动条整体部分 */
  font-size: 1rem;
  ::-webkit-scrollbar {
    width: 5px; /* 宽度 */
    height: 6px; /* 高度 */
  }

  /* 滚动条滑块 */
  ::-webkit-scrollbar-thumb {
    background-color: #d2c3e9; /* 滑块颜色 */
    border-radius: 20px; /* 圆角 */
  }

  /* 滚动条轨道 */
  ::-webkit-scrollbar-track {
    background-color: #f0f0f0; /* 轨道颜色 */
  }

  /* input type="number" 时去除上下按钮样式 */
  input::-webkit-outer-spin-button,
  input::-webkit-inner-spin-button {
    -webkit-appearance: none;
  }
  input[type="number"] {
    -moz-appearance: textfield;
  }
}

.el-message {
  //提示信息的层级设置

  z-index: 99999 !important;
  min-width: 300px !important;
}

.dynamic-content {
    
      :deep(p) {
        text-align: justify !important;
        text-justify: inter-ideograph !important;
        line-height: 2 !important;
        margin: 0.8em 0 !important;
        /* 英文按单词换行，避免拆词；超长连续单词在必要时断行 */
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: break-word !important; /* 现代浏览器 */
        word-wrap: break-word !important;      /* 旧版兼容 */
        hyphens: none;
    
      }
    }
</style>