滚动条修改

qianlishi 3 years ago
parent 3a60083fa2
commit 3cf25fe666

@ -1,76 +1,72 @@
/* 滚动条 */ /* 滚动条 */
::-webkit-scrollbar {
/*垂直滚动条的宽*/
width: 10px;
/*垂直滚动条的高*/
height: 10px;
}
::-webkit-scrollbar-track-piece { ::-webkit-scrollbar-track-piece {
/*修改滚动条的背景和圆角*/ /*修改滚动条的背景和圆角*/
background: #F7F7F7; background: #f7f7f7;
-webkit-border-radius: 7px; -webkit-border-radius: 7px;
} }
/*修改垂直滚动条的样式*/ /*修改垂直滚动条的样式*/
::-webkit-scrollbar-thumb:vertical { ::-webkit-scrollbar-thumb:vertical {
background-color: #dcdfe6; background-color: #dcdfe6;
-webkit-border-radius: 7px; -webkit-border-radius: 7px;
} }
/*修改水平滚动条的样式*/ /*修改水平滚动条的样式*/
::-webkit-scrollbar-thumb:horizontal { ::-webkit-scrollbar-thumb:horizontal {
background-color: #dcdfe6; background-color: #dcdfe6;
-webkit-border-radius: 7px; -webkit-border-radius: 7px;
} }
/* IE7 */ /* IE7 */
input:focus, a:focus, button:focus, textarea:focus { input:focus,
outline: none a:focus,
} button:focus,
input:-webkit-autofill { textarea:focus {
outline: none;
}
input:-webkit-autofill {
/* -webkit-box-shadow: 0 0 0px 1000px black inset !important; */ /* -webkit-box-shadow: 0 0 0px 1000px black inset !important; */
/* background-color: #ffffff !important;*/ /* background-color: #ffffff !important;*/
/* background-image: none !important; /* background-image: none !important;
color: white !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-color: #040406 !important;
background-image: none !important; background-image: none !important;
color: white !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; float: left;
} }
.el-table td{ .el-table td {
padding: 8px 0; padding: 8px 0;
} }

@ -13,13 +13,27 @@ body {
Microsoft YaHei, Arial, sans-serif; Microsoft YaHei, Arial, sans-serif;
} }
label {
font-weight: 700;
}
html { html {
height: 100%; height: 100%;
box-sizing: border-box; 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 { #app {

@ -7,130 +7,63 @@
<template> <template>
<div class="layout"> <div class="layout">
<div :style="bigScreenStyle"> <div :style="bigScreenStyle">
<widget v-for="(widget, index) in widgets" <widget
v-for="(widget, index) in widgets"
:key="index" :key="index"
v-model="widget.value" v-model="widget.value"
:type="widget.type" /> :type="widget.type"
/>
</div> </div>
</div> </div>
</template> </template>
<script> <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 { export default {
name: 'Login', name: "Login",
components: { components: {
widget, widget
}, },
data () { data() {
return { 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: {}, bigScreenStyle: {},
widgets: [], widgets: []
} };
}, },
mounted () { mounted() {
this.getData() this.getData();
}, },
methods: { 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 = { 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: `scale(${ratioEquipment}, ${ratioEquipment})`,
'transform-origin': '0 0', "transform-origin": "0 0"
};
this.widgets = data.dashboard.widgets;
} }
this.widgets = data.dashboard.widgets }
}, };
},
}
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.layout { .layout {
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: hidden;
} }
</style> </style>

Loading…
Cancel
Save