diff --git a/vol-vue3/src/App.vue b/vol-vue3/src/App.vue index 1645abf..9adec79 100644 --- a/vol-vue3/src/App.vue +++ b/vol-vue3/src/App.vue @@ -26,6 +26,8 @@ export default { -moz-osx-font-smoothing: grayscale; height: 100%; width: 100%; + background-color: #020308; + overflow: hidden; } .el-alert--error.is-light { diff --git a/vol-vue3/src/mixin/index.js b/vol-vue3/src/mixin/index.js index f7f1bd7..4cf7020 100644 --- a/vol-vue3/src/mixin/index.js +++ b/vol-vue3/src/mixin/index.js @@ -1,3 +1,11 @@ +/* + * @Author: 王文杰 + * @Date: 2024-01-19 10:49:46 + * @LastEditors: 王文杰 + * @LastEditTime: 2024-01-19 13:51:58 + * @FilePath: /vol-vue3/src/mixin/index.js + * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE + */ // 屏幕适配 mixin 函数 // * 默认缩放值 const scale = { @@ -39,13 +47,15 @@ const scale = { // 表示更宽 scale.width = ((window.innerHeight * baseProportion) / baseWidth).toFixed(5) scale.height = (window.innerHeight / baseHeight).toFixed(5) - appRef.style.transform = `scale(${scale.width}, ${scale.height})` - // appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` + // appRef.style.transform = `scale(${scale.width}, ${scale.height})` + appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` } else { // 表示更高 + // debugger scale.height = ((window.innerWidth / baseProportion) / baseHeight).toFixed(5) scale.width = (window.innerWidth / baseWidth).toFixed(5) - appRef.style.transform = `scale(${scale.width}, ${scale.height})` + // appRef.style.transform = `scale(${scale.width}, ${scale.height})` + appRef.style.transform = `scale(${scale.width}, ${scale.height}) translate(-50%, -50%)` } } }, diff --git a/vol-vue3/src/views/data/bigscreen/index.less b/vol-vue3/src/views/data/bigscreen/index.less index e18da8d..3d5ab4e 100644 --- a/vol-vue3/src/views/data/bigscreen/index.less +++ b/vol-vue3/src/views/data/bigscreen/index.less @@ -1,13 +1,27 @@ .big-data-container { + // position: relative; + // overflow: hidden; + // height: 100%; + // width: 1920px; + + color: #d3d6dd; + width: 1920px; + height: 1080px; position: absolute; + top: 50%; + left: 50%; + -webkit-transform-origin: left top; + transform-origin: left top; + -webkit-transform: translate(-50%,-50%); + transform: translate(-50%,-50%); overflow: hidden; - height: 100%; - width: 100%; + background-color: #1400a8; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 1200 800'%3E%3Cdefs%3E%3CradialGradient id='a' cx='0' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230e0077'/%3E%3Cstop offset='1' stop-color='%230e0077' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='b' cx='1200' cy='800' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%2314057c'/%3E%3Cstop offset='1' stop-color='%2314057c' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='c' cx='600' cy='0' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%230d0524'/%3E%3Cstop offset='1' stop-color='%230d0524' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='d' cx='600' cy='800' r='600' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%231400a8'/%3E%3Cstop offset='1' stop-color='%231400a8' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='e' cx='0' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23000000'/%3E%3Cstop offset='1' stop-color='%23000000' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f' cx='1200' cy='0' r='800' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23130733'/%3E%3Cstop offset='1' stop-color='%23130733' stop-opacity='0'/%3E%3C/radialGradient%3E%3C/defs%3E%3Crect fill='url(%23a)' width='1200' height='800'/%3E%3Crect fill='url(%23b)' width='1200' height='800'/%3E%3Crect fill='url(%23c)' width='1200' height='800'/%3E%3Crect fill='url(%23d)' width='1200' height='800'/%3E%3Crect fill='url(%23e)' width='1200' height='800'/%3E%3Crect fill='url(%23f)' width='1200' height='800'/%3E%3C/svg%3E"); background-attachment: fixed; background-size: cover; + .header { height: 80px; // background: url(./head_bg.png) no-repeat center center; @@ -76,8 +90,8 @@ .data-right { flex: 1; margin-right: 10px; - display: flex; - flex-direction: column; + // display: flex; + // flex-direction: column; .data-left-item, .data-right-item { diff --git a/vol-vue3/src/views/data/bigscreen/index.vue b/vol-vue3/src/views/data/bigscreen/index.vue index 29fb481..ccf96ef 100644 --- a/vol-vue3/src/views/data/bigscreen/index.vue +++ b/vol-vue3/src/views/data/bigscreen/index.vue @@ -1,8 +1,8 @@