滚动条修改

report-ui/src/assets/styles/common.css

@@ -1,76 +1,72 @@
 /* 滚动条 */
- ::-webkit-scrollbar {
+
-   /*垂直滚动条的宽*/
+::-webkit-scrollbar-track-piece {
-   width: 10px;
+  /*修改滚动条的背景和圆角*/
-   /*垂直滚动条的高*/
+  background: #f7f7f7;
-   height: 10px;
+  -webkit-border-radius: 7px;
- }
+}
- 
+
- ::-webkit-scrollbar-track-piece {
+/*修改垂直滚动条的样式*/
-   /*修改滚动条的背景和圆角*/
+::-webkit-scrollbar-thumb:vertical {
-   background: #F7F7F7;
+  background-color: #dcdfe6;
-   -webkit-border-radius: 7px;
+  -webkit-border-radius: 7px;
- }
+}
- 
+
- /*修改垂直滚动条的样式*/
+/*修改水平滚动条的样式*/
- ::-webkit-scrollbar-thumb:vertical {
+::-webkit-scrollbar-thumb:horizontal {
-   background-color: #dcdfe6;
+  background-color: #dcdfe6;
-   -webkit-border-radius: 7px;
+  -webkit-border-radius: 7px;
- }
+}
- 
+
- /*修改水平滚动条的样式*/
+/* IE7 */
- ::-webkit-scrollbar-thumb:horizontal {
+input:focus,
-   background-color: #dcdfe6;
+a:focus,
-   -webkit-border-radius: 7px;
+button:focus,
- }
+textarea:focus {
- 
+  outline: none;
- /* IE7 */
+}
- input:focus, a:focus, button:focus, textarea:focus {
+input:-webkit-autofill {
-   outline: none
+  /* -webkit-box-shadow: 0 0 0px 1000px black inset !important; */
- }
+  /* background-color: #ffffff !important;*/
- input:-webkit-autofill {
+  /* background-image: none !important; 
-   /* -webkit-box-shadow: 0 0 0px 1000px black inset !important; */
-    /* background-color: #ffffff !important;*/
-   /* background-image: none !important; 
    color: white !important;  */
-   box-shadow: 0 0 0px 1000px rgb(229, 233, 238) inset !important;
+  box-shadow: 0 0 0px 1000px rgb(229, 233, 238) inset !important;
-     -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0,1) inset !important;
+  -webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 1) inset !important;
-     border: 0px solid #CCC!important;
+  border: 0px solid #ccc !important;
-     -webkit-text-fill-color: #FFF;
+  -webkit-text-fill-color: #fff;
- 
+}
- }
+/* input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
- /* input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: #040406 !important;
    background-image: none !important;
    color: white !important;
  } */
- ::-ms-clear {
+::-ms-clear {
-   display: none;
+  display: none;
- }
+}
- 
+
- ::-ms-reveal {
+::-ms-reveal {
-   display: none;
+  display: none;
- }
+}
- 
+
- .on-focus:focus {
+.on-focus:focus {
-   border: 1px solid #5BC0DE;
+  border: 1px solid #5bc0de;
- }
+}
- .clearfix::after{
+.clearfix::after {
-   content: '';
+  content: "";
-   display: block;
+  display: block;
-   clear: both;
+  clear: both;
-   height: 0;
+  height: 0;
-   width:100%;
+  width: 100%;
- }
+}
- .mt10{
+.mt10 {
-   margin-top: 10px;
+  margin-top: 10px;
- }
+}
- .fr{
+.fr {
-   float: right;
+  float: right;
- }
+}
- .fl{
+.fl {
   float: left;
 }
-.el-table td{
+.el-table td {
   padding: 8px 0;
-}
+}

report-ui/src/assets/styles/index.scss

@@ -13,13 +13,27 @@ body {
     Microsoft YaHei, Arial, sans-serif;
 }
 
-label {
-  font-weight: 700;
-}
-
 html {
   height: 100%;
   box-sizing: border-box;
+  /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
+  -ms-overflow-style: none;
+  /*火狐下隐藏滚动条*/
+  scrollbar-width: none;
+}
+// 谷歌浏览器去滚动条
+html::-webkit-scrollbar {
+  display: none;
+}
+.el-image-viewer__close {
+  color: #fff;
+}
+#app {
+  height: 100%;
+}
+
+label {
+  font-weight: 700;
 }
 
 #app {

report-ui/src/views/report/bigscreen/viewer/index.vue

@@ -7,130 +7,63 @@
 <template>
   <div class="layout">
     <div :style="bigScreenStyle">
-      <widget v-for="(widget, index) in widgets"
+      <widget
-              :key="index"
+        v-for="(widget, index) in widgets"
-              v-model="widget.value"
+        :key="index"
-              :type="widget.type" />
+        v-model="widget.value"
+        :type="widget.type"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import widget from '../designer/widget/temp'
+import widget from "../designer/widget/temp";
-import { detailDashboard } from '@/api/bigscreen'
+import { detailDashboard } from "@/api/bigscreen";
 export default {
-  name: 'Login',
+  name: "Login",
   components: {
-    widget,
+    widget
   },
-  data () {
+  data() {
     return {
-      list: [
-        {
-          type: 'widget-text',
-          value: {
-            data: {},
-            position: {
-              height: 200,
-              left: 0,
-              top: 0,
-              width: 200,
-              zIndex: 0,
-            },
-            setup: {
-              background: '#12EF80',
-              color: '#F70F58',
-              fontSize: 30,
-              fontWeight: 'bold',
-              text: '文本文档',
-              textAlign: 'left',
-            },
-          },
-        },
-        {
-          type: 'widget-marquee',
-          value: {
-            data: {},
-            position: {
-              height: 200,
-              left: 200,
-              top: 0,
-              width: 200,
-              zIndex: 0,
-            },
-            setup: {
-              background: 'yellow',
-              color: '#F70F58',
-              fontSize: 30,
-              fontWeight: 'bold',
-              text: '滚动文本',
-              textAlign: 'left',
-              marqueeSet: true,
-              marqueeQuit: 10,
-            },
-          },
-        },
-        {
-          type: 'widget-href',
-          value: {
-            data: {},
-            position: {
-              height: 200,
-              left: 400,
-              top: 0,
-              width: 200,
-              zIndex: 0,
-            },
-            setup: {
-              background: 'yellow',
-              color: '#F70F58',
-              fontSize: 30,
-              fontWeight: 'bold',
-              text: '超链接',
-              textAlign: 'left',
-              jumpMode: 'other',
-            },
-          },
-        },
-      ],
       bigScreenStyle: {},
-      widgets: [],
+      widgets: []
-    }
+    };
   },
-  mounted () {
+  mounted() {
-    this.getData()
+    this.getData();
   },
   methods: {
-    async getData () {
+    async getData() {
-      const reportCode = this.$route.query.reportCode
+      const reportCode = this.$route.query.reportCode;
-      const { code, data } = await detailDashboard(reportCode)
+      const { code, data } = await detailDashboard(reportCode);
-      if (code != 200) return
+      if (code != 200) return;
-      const equipment = document.body.clientWidth
+      const equipment = document.body.clientWidth;
-      const ratioEquipment = equipment / data.dashboard.width
+      const ratioEquipment = equipment / data.dashboard.width;
       this.bigScreenStyle = {
-        width: data.dashboard.width + 'px',
+        width: data.dashboard.width + "px",
-        height: data.dashboard.height + 'px',
+        height: data.dashboard.height + "px",
-        'background-color': data.dashboard.backgroundColor,
+        "background-color": data.dashboard.backgroundColor,
-        'background-image': 'url(' + data.dashboard.backgroundImage + ')',
+        "background-image": "url(" + data.dashboard.backgroundImage + ")",
-        'background-position': '0% 0%',
+        "background-position": "0% 0%",
-        'background-size': '100% 100%',
+        "background-size": "100% 100%",
-        'background-repeat': 'initial',
+        "background-repeat": "initial",
-        'background-attachment': 'initial',
+        "background-attachment": "initial",
-        'background-origin': 'initial',
+        "background-origin": "initial",
-        'background-clip': 'initial',
+        "background-clip": "initial",
         transform: `scale(${ratioEquipment}, ${ratioEquipment})`,
-        'transform-origin': '0 0',
+        "transform-origin": "0 0"
-      }
+      };
-      this.widgets = data.dashboard.widgets
+      this.widgets = data.dashboard.widgets;
-    },
+    }
-  },
+  }
-}
+};
 </script>
 
 <style scoped lang="scss">
 .layout {
   width: 100%;
   height: 100%;
-  overflow: hidden;
 }
 </style>