滚动条修改

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-scrollbar-thumb:vertical {
/*修改垂直滚动条的样式*/
::-webkit-scrollbar-thumb:vertical {
background-color: #dcdfe6;
-webkit-border-radius: 7px;
}
}
/*修改水平滚动条的样式*/
::-webkit-scrollbar-thumb:horizontal {
/*修改水平滚动条的样式*/
::-webkit-scrollbar-thumb:horizontal {
background-color: #dcdfe6;
-webkit-border-radius: 7px;
}
}
/* IE7 */
input:focus, a:focus, button:focus, textarea:focus {
outline: none
}
input:-webkit-autofill {
/* IE7 */
input:focus,
a:focus,
button:focus,
textarea:focus {
outline: none;
}
input:-webkit-autofill {
/* -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;
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0,1) inset !important;
border: 0px solid #CCC!important;
-webkit-text-fill-color: #FFF;
}
/* input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
-webkit-box-shadow: 0 0 0px 1000px rgba(0, 0, 0, 1) inset !important;
border: 0px solid #ccc !important;
-webkit-text-fill-color: #fff;
}
/* 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;
}
}
::-ms-reveal {
::-ms-reveal {
display: none;
}
}
.on-focus:focus {
border: 1px solid #5BC0DE;
}
.clearfix::after{
content: '';
.on-focus:focus {
border: 1px solid #5bc0de;
}
.clearfix::after {
content: "";
display: block;
clear: both;
height: 0;
width:100%;
}
.mt10{
width: 100%;
}
.mt10 {
margin-top: 10px;
}
.fr{
}
.fr {
float: right;
}
.fl{
}
.fl {
float: left;
}
.el-table td{
.el-table td {
padding: 8px 0;
}

@ -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 {

@ -7,130 +7,63 @@
<template>
<div class="layout">
<div :style="bigScreenStyle">
<widget v-for="(widget, index) in widgets"
<widget
v-for="(widget, index) in widgets"
:key="index"
v-model="widget.value"
:type="widget.type" />
:type="widget.type"
/>
</div>
</div>
</template>
<script>
import widget from '../designer/widget/temp'
import { detailDashboard } from '@/api/bigscreen'
import widget from "../designer/widget/temp";
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 () {
this.getData()
mounted() {
this.getData();
},
methods: {
async getData () {
const reportCode = this.$route.query.reportCode
const { code, data } = await detailDashboard(reportCode)
if (code != 200) return
const equipment = document.body.clientWidth
const ratioEquipment = equipment / data.dashboard.width
async getData() {
const reportCode = this.$route.query.reportCode;
const { code, data } = await detailDashboard(reportCode);
if (code != 200) return;
const equipment = document.body.clientWidth;
const ratioEquipment = equipment / data.dashboard.width;
this.bigScreenStyle = {
width: data.dashboard.width + 'px',
height: data.dashboard.height + 'px',
'background-color': data.dashboard.backgroundColor,
'background-image': 'url(' + data.dashboard.backgroundImage + ')',
'background-position': '0% 0%',
'background-size': '100% 100%',
'background-repeat': 'initial',
'background-attachment': 'initial',
'background-origin': 'initial',
'background-clip': 'initial',
width: data.dashboard.width + "px",
height: data.dashboard.height + "px",
"background-color": data.dashboard.backgroundColor,
"background-image": "url(" + data.dashboard.backgroundImage + ")",
"background-position": "0% 0%",
"background-size": "100% 100%",
"background-repeat": "initial",
"background-attachment": "initial",
"background-origin": "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>

Loading…
Cancel
Save