App.vue 2.8 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. <template>
  2. <!--<dv-full-screen-container style="height:100%!important;">-->
  3. <div id="app">
  4. <router-view />
  5. </div>
  6. <!--</dv-full-screen-container>-->
  7. </template>
  8. <script>
  9. // import DevicePixelRatio from '@/utils/devicePixelRatio'
  10. export default {
  11. name: 'App',
  12. metaInfo() {
  13. return {
  14. title: this.$store.state.settings.dynamicTitle && this.$store.state.settings.title,
  15. titleTemplate: title => {
  16. return title ? `${title} - ${process.env.VUE_APP_TITLE}` : process.env.VUE_APP_TITLE
  17. },
  18. }
  19. },
  20. // created() {
  21. // new DevicePixelRatio().init()
  22. // },
  23. mounted(){
  24. let cssText1 = '.el-dialog{transform:scale('+document.documentElement.clientWidth / 1920+')}'
  25. let cssText2 = '.el-message-box{transform:scale('+document.documentElement.clientWidth / 1920+')}'
  26. let cssText3 = '.el-tooltip__popper{transform:scale('+document.documentElement.clientWidth / 1920+')}'
  27. this.insertCSS(cssText1);
  28. this.insertCSS(cssText2);
  29. this.insertCSS(cssText3);
  30. document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
  31. document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
  32. window.onresize = () => {
  33. return (() => {
  34. document.getElementById('app').style.transform = `scale(${document.documentElement.clientWidth / 1920})`;
  35. document.getElementById('app').style.height = (window.innerHeight/(document.documentElement.clientWidth / 1920*100))*100+'px';
  36. })();
  37. };
  38. },
  39. methods:{
  40. insertCSS (cssStyle) {
  41. var style = document.createElement("style");
  42. var theHead = document.head || document.getElementsByTagName('head')[0];
  43. style.type = "text/css"; //IE需要设置
  44. if (style.styleSheet) { //IE
  45. var ieInsertCSS = function() {
  46. try {
  47. style.styleSheet.cssText = cssStyle;
  48. } catch (e) {}
  49. };
  50. //若当前styleSheet不能使用,则放到异步中
  51. if (style.styleSheet.disable) {
  52. setTimeout(ieInsertCSS, 10);
  53. } else {
  54. ieInsertCSS();
  55. }
  56. } else { //W3c浏览器
  57. style.appendChild(document.createTextNode(cssStyle));
  58. theHead.appendChild(style);
  59. }
  60. }
  61. }
  62. }
  63. </script>
  64. <style>
  65. html,body{
  66. margin:0;
  67. padding:0;
  68. height:100%;
  69. width:100%;
  70. overflow: hidden;
  71. }
  72. #app{
  73. transform-origin: left top;
  74. width:1920px;
  75. display: flex;
  76. flex-direction: column;
  77. flex:1;
  78. }
  79. body::-webkit-scrollbar{ display: none; }
  80. .v-modal{
  81. display: none;
  82. }
  83. .el-drawer__container,.el-dialog__wrapper,.el-message-box__wrapper{
  84. background: rgba(0,0,0,0.4);
  85. }
  86. </style>