diff --git a/src/App.vue b/src/App.vue index 2161288..3aba393 100644 --- a/src/App.vue +++ b/src/App.vue @@ -13,22 +13,22 @@ export default { }, methods: { enterFullscreen() { - const element = document.documentElement; // 请求全屏模式 - if (!this.isLoding) { - if (element.webkitRequestFullscreen) { - // Chrome, Safari and Opera - element.webkitRequestFullscreen(); - } else if (element.msRequestFullscreen) { - // IE/Edge - element.msRequestFullscreen(); - } else if (element.mozRequestFullScreen) { - // Firefox - element.mozRequestFullScreen(); - } else if (element.requestFullscreen) { - element.requestFullscreen(); - } - } + // const element = document.documentElement; + // if (!this.isLoding) { + // if (element.webkitRequestFullscreen) { + // // Chrome, Safari and Opera + // element.webkitRequestFullscreen(); + // } else if (element.msRequestFullscreen) { + // // IE/Edge + // element.msRequestFullscreen(); + // } else if (element.mozRequestFullScreen) { + // // Firefox + // element.mozRequestFullScreen(); + // } else if (element.requestFullscreen) { + // element.requestFullscreen(); + // } + // } }, }, }; @@ -39,6 +39,7 @@ export default { font-family: 'PanMen'; src: url('@/assets/fonts/PanMen.ttf') format('opentype'); } + @font-face { font-family: 'YouSheBiaoTiHei'; src: url('@/assets/fonts/YouSheBiaoTiHei.ttf') format('opentype'); @@ -51,6 +52,7 @@ export default { .youshe { font-family: 'YouSheBiaoTiHei'; } + * { color: #fff; // 思源黑体 微软雅黑 无衬线字体 diff --git a/src/api/publishApi.js b/src/api/publishApi.js index 6b55696..2d3a22e 100644 --- a/src/api/publishApi.js +++ b/src/api/publishApi.js @@ -35,10 +35,7 @@ export const getAudio = (data) => { ...data, }, { - headers: { - "Content-Type": "application/json", - }, - responseType: "blob", + responseType: "blob", } ); }; diff --git a/src/assets/img/bg.png b/src/assets/img/bg.png index 016a381..4960b62 100644 Binary files a/src/assets/img/bg.png and b/src/assets/img/bg.png differ diff --git a/src/assets/img/headerBg.png b/src/assets/img/headerBg.png new file mode 100644 index 0000000..262738e Binary files /dev/null and b/src/assets/img/headerBg.png differ diff --git a/src/assets/img/pageMonitor/Empty.png b/src/assets/img/pageMonitor/Empty.png new file mode 100644 index 0000000..2ccb345 Binary files /dev/null and b/src/assets/img/pageMonitor/Empty.png differ diff --git a/src/assets/img/pageMonitor/anesEnd.png b/src/assets/img/pageMonitor/anesEnd.png new file mode 100644 index 0000000..b6dc9d4 Binary files /dev/null and b/src/assets/img/pageMonitor/anesEnd.png differ diff --git a/src/assets/img/pageMonitor/headerBg.png b/src/assets/img/pageMonitor/headerBg.png new file mode 100644 index 0000000..40c0d20 Binary files /dev/null and b/src/assets/img/pageMonitor/headerBg.png differ diff --git a/src/assets/img/pageMonitor/headerLine.png b/src/assets/img/pageMonitor/headerLine.png new file mode 100644 index 0000000..14d6b6a Binary files /dev/null and b/src/assets/img/pageMonitor/headerLine.png differ diff --git a/src/assets/img/pageMonitor/opIng.png b/src/assets/img/pageMonitor/opIng.png new file mode 100644 index 0000000..162634f Binary files /dev/null and b/src/assets/img/pageMonitor/opIng.png differ diff --git a/src/assets/img/pageMonitor/triangle.png b/src/assets/img/pageMonitor/triangle.png new file mode 100644 index 0000000..bcbfb8c Binary files /dev/null and b/src/assets/img/pageMonitor/triangle.png differ diff --git a/src/assets/img/pageMonitor/trianglePurple.png b/src/assets/img/pageMonitor/trianglePurple.png new file mode 100644 index 0000000..14e3e50 Binary files /dev/null and b/src/assets/img/pageMonitor/trianglePurple.png differ diff --git a/src/assets/scss/pxtovh.scss b/src/assets/scss/pxtovh.scss deleted file mode 100644 index 11f90f5..0000000 --- a/src/assets/scss/pxtovh.scss +++ /dev/null @@ -1,3 +0,0 @@ -@function vh($px) { - @return $px/1080 * 100vh; -} \ No newline at end of file diff --git a/src/assets/scss/utils.scss b/src/assets/scss/utils.scss new file mode 100644 index 0000000..bbb4c2b --- /dev/null +++ b/src/assets/scss/utils.scss @@ -0,0 +1,7 @@ +@function vh($px) { + @return $px/1080 * 100vh; +} + +@function vw($px) { + @return $px / 1920 * 100vw; +} diff --git a/src/components/comHeader/comHeader.vue b/src/components/comHeader/comHeader.vue index 8ecfdad..0e08db7 100644 --- a/src/components/comHeader/comHeader.vue +++ b/src/components/comHeader/comHeader.vue @@ -1,13 +1,8 @@ @@ -64,4 +59,6 @@ export default { }; - + diff --git a/src/components/comHeader/index.scss b/src/components/comHeader/index.scss new file mode 100644 index 0000000..6947277 --- /dev/null +++ b/src/components/comHeader/index.scss @@ -0,0 +1,25 @@ +header { + display: flex; + justify-content: space-between; + align-items: center; + height: vh(88); + padding: 0 vw(50); + + .left { + width: vw(264); + } + + .mid { + font-size: vw(40); + font-weight: 700; + letter-spacing: vw(8); + color: #5B458D; + } + + .right { + font-size: vw(16); + font-weight: 700; + letter-spacing: vw(2); + color: #5B458D; + } +} diff --git a/src/router/index.js b/src/router/index.js index 7a38b1c..532e46c 100644 --- a/src/router/index.js +++ b/src/router/index.js @@ -7,7 +7,7 @@ const routes = [ { path: '/', name: 'home', - redirect: '/monitor', + redirect: '/pagemonitor', }, { path: '/pageBox', diff --git a/src/views/pageBox/index.scss b/src/views/pageBox/index.scss new file mode 100644 index 0000000..6fece7a --- /dev/null +++ b/src/views/pageBox/index.scss @@ -0,0 +1,19 @@ +#pageBox { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; +} + +.wrapper { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + background-image: url("@/assets/img/bg.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; +} diff --git a/src/views/pageBox/index.vue b/src/views/pageBox/index.vue index 4b72b89..6078370 100644 --- a/src/views/pageBox/index.vue +++ b/src/views/pageBox/index.vue @@ -3,7 +3,7 @@
-
+
@@ -20,24 +20,5 @@ export default { diff --git a/src/views/pageMonitor/bottomLeft/OpHistogram.vue b/src/views/pageMonitor/bottomLeft/OpHistogram.vue deleted file mode 100644 index 84a60be..0000000 --- a/src/views/pageMonitor/bottomLeft/OpHistogram.vue +++ /dev/null @@ -1,347 +0,0 @@ - - - - - diff --git a/src/views/pageMonitor/bottomLeft/index.scss b/src/views/pageMonitor/bottomLeft/index.scss new file mode 100644 index 0000000..30096bc --- /dev/null +++ b/src/views/pageMonitor/bottomLeft/index.scss @@ -0,0 +1,92 @@ +.box { + width: vw(552); + height: vh(438); + box-sizing: border-box; + border: 2px solid #DFE0F3; + box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2); + background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%); + border-radius: vw(8); + padding: vh(16) vw(8); + position: relative; + + header { + height: vh(48); + background-image: url("@/assets/img/pageMonitor/headerLine.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; + + div { + width: vw(200); + height: vh(40); + background-image: url("@/assets/img/pageMonitor/headerBg.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin-left: vw(12); + display: flex; + align-items: center; + + p { + color: #444444; + font-size: vw(22); + padding-left: vw(32); + } + } + } + + main { + height: vh(350); + } + + .sidebar { + position: absolute; + right: -1px; + top: 16%; + + >div { + width: vw(40); + height: vh(70); + background: #E9E4FF; + display: flex; + justify-content: center; + position: relative; + z-index: 10; + + span { + color: rgba(90, 73, 173, 0.5); + font-size: vw(16); + + } + + &:first-of-type { + transform: skewY(-30deg); + + span { + transform: skewY(30deg); + line-height: vh(60); + } + } + + &:last-of-type { + margin-top: vw(-24); + transform: skewY(30deg); + + span { + transform: skewY(-30deg); + line-height: vh(90); + } + } + + &.active { + background: #5C4BAD; + z-index: 1; + height: vh(82); + + span { + color: #fff; + } + } + } + } +} diff --git a/src/views/pageMonitor/bottomLeft/index.vue b/src/views/pageMonitor/bottomLeft/index.vue index 3cff540..73be8c1 100644 --- a/src/views/pageMonitor/bottomLeft/index.vue +++ b/src/views/pageMonitor/bottomLeft/index.vue @@ -1,109 +1,38 @@ - diff --git a/src/views/pageMonitor/bottomMiddle/index.vue b/src/views/pageMonitor/bottomMiddle/index.vue deleted file mode 100644 index f48dd50..0000000 --- a/src/views/pageMonitor/bottomMiddle/index.vue +++ /dev/null @@ -1,400 +0,0 @@ - - - - - diff --git a/src/views/pageMonitor/bottomRight/DepHistogram.vue b/src/views/pageMonitor/bottomRight/DepHistogram.vue deleted file mode 100644 index 322ee6d..0000000 --- a/src/views/pageMonitor/bottomRight/DepHistogram.vue +++ /dev/null @@ -1,344 +0,0 @@ - - - - - diff --git a/src/views/pageMonitor/bottomRight/index.scss b/src/views/pageMonitor/bottomRight/index.scss new file mode 100644 index 0000000..b8d2736 --- /dev/null +++ b/src/views/pageMonitor/bottomRight/index.scss @@ -0,0 +1,165 @@ +.boxWrap { + width: vw(1280); + height: vh(438); + display: flex; + justify-content: space-between; + align-items: center; + + .opGradeBox { + width: vw(340); + height: 100%; + + header { + height: vh(48); + background-image: url("@/assets/img/pageMonitor/headerLine.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; + + div { + width: vw(200); + height: vh(40); + background-image: url("@/assets/img/pageMonitor/headerBg.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin-left: vw(12); + display: flex; + align-items: center; + + p { + color: #444444; + font-size: vw(22); + padding-left: vw(32); + } + } + } + } + + .asaGradeBox { + width: vw(340); + height: 100%; + + header { + height: vh(48); + background-image: url("@/assets/img/pageMonitor/headerLine.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; + + div { + width: vw(200); + height: vh(40); + background-image: url("@/assets/img/pageMonitor/headerBg.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin-left: vw(12); + display: flex; + align-items: center; + + p { + color: #444444; + font-size: vw(22); + padding-left: vw(32); + } + } + } + } + + .opstatisticBox { + width: vw(552); + height: 100%; + + header { + height: vh(48); + background-image: url("@/assets/img/pageMonitor/headerLine.png"); + background-size: contain; + background-repeat: no-repeat; + background-position: center bottom; + + div { + width: vw(300); + height: vh(40); + background-image: url("@/assets/img/pageMonitor/headerBg.png"); + background-size: cover; + background-repeat: no-repeat; + background-position: center; + margin-left: vw(12); + display: flex; + align-items: center; + + p { + color: #444444; + font-size: vw(22); + padding-left: vw(32); + } + } + } + + .sidebar { + position: absolute; + right: -1px; + top: 16%; + + >div { + width: vw(40); + height: vh(70); + background: #E9E4FF; + display: flex; + justify-content: center; + position: relative; + z-index: 10; + + span { + color: rgba(90, 73, 173, 0.5); + font-size: vw(16); + + } + + &:first-of-type { + transform: skewY(-30deg); + + span { + transform: skewY(30deg); + line-height: vh(60); + } + } + + &:last-of-type { + margin-top: vw(-24); + transform: skewY(30deg); + + span { + transform: skewY(-30deg); + line-height: vh(90); + } + } + + &.active { + background: #5C4BAD; + z-index: 1; + height: vh(82); + + span { + color: #fff; + } + } + } + } + } + + .box { + box-sizing: border-box; + border: 2px solid #DFE0F3; + box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2); + background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%); + border-radius: vw(8); + padding: vh(16) vw(8); + position: relative; + } + + main { + height: vh(350); + } +} diff --git a/src/views/pageMonitor/bottomRight/index.vue b/src/views/pageMonitor/bottomRight/index.vue index 8bb8549..ee255cc 100644 --- a/src/views/pageMonitor/bottomRight/index.vue +++ b/src/views/pageMonitor/bottomRight/index.vue @@ -1,110 +1,390 @@ - diff --git a/src/views/pageMonitor/index.vue b/src/views/pageMonitor/index.vue index 5917752..915858a 100644 --- a/src/views/pageMonitor/index.vue +++ b/src/views/pageMonitor/index.vue @@ -1,46 +1,27 @@ - diff --git a/src/views/pageMonitor/topRight/index.scss b/src/views/pageMonitor/topRight/index.scss new file mode 100644 index 0000000..712abec --- /dev/null +++ b/src/views/pageMonitor/topRight/index.scss @@ -0,0 +1,145 @@ +.box { + width: vw(1280); + height: vh(444); + box-sizing: border-box; + margin-bottom: vh(24); + box-sizing: border-box; + border: 2px solid #DFE0F3; + box-shadow: 2px 4px 20px 0px rgba(87, 68, 175, 0.2); + background: linear-gradient(180deg, rgba(240, 243, 253, 0.95) 0%, rgba(232, 238, 253, 0.95) 100%); + border-radius: vw(8); + padding: vh(24); + position: relative; +} + +:deep(.el-carousel) { + height: 100%; + + .el-carousel__container { + height: 100%; + + .el-carousel__item { + section { + height: 100%; + display: grid; + grid-template-columns: repeat(auto-fill, vw(186)); + justify-content: space-between; + align-content: space-between; + + >div { + height: vh(112); + box-sizing: border-box; + background: linear-gradient(180deg, rgba(232, 238, 255, 0.4) 0%, #E8EEFF 100%); + border: 2px solid #E3E5FD; + border-radius: vw(8); + + p { + font-size: vw(22); + color: #000; + text-align: center; + letter-spacing: 2px; + line-height: vh(54); + } + + .line { + height: 1px; + background: linear-gradient(90deg, rgba(0, 109, 171, 0) -1%, #A7DFFF 50%, rgba(0, 109, 171, 0) 98%); + } + + div:last-of-type { + box-sizing: border-box; + height: vh(54); + padding: 0 vw(20); + display: flex; + align-items: center; + justify-content: space-evenly; + + span { + color: #000; + font-size: vw(20); + letter-spacing: 1px; + } + } + + &.opEnter { + p { + color: #35CEFD; + } + + div:last-of-type { + span { + color: #35CEFD; + } + } + + } + + &.anesStart { + p { + color: #424CFE; + } + + div:last-of-type { + span { + color: #424CFE; + } + } + + } + + &.opStart { + p { + color: #B53FDF; + } + + div:last-of-type { + span { + color: #B53FDF; + } + } + + } + + &.opEnd { + p { + color: #BAE7A4; + } + + div:last-of-type { + span { + color: #BAE7A4; + } + } + + } + + &.anesEnd { + p { + color: #946FEC; + } + + div:last-of-type { + span { + color: #946FEC; + } + } + + } + + &.empty { + p { + color: #037E7E; + } + + div:last-of-type { + span { + color: #037E7E; + } + } + + } + } + } + } + } +} diff --git a/src/views/pageMonitor/topRight/index.vue b/src/views/pageMonitor/topRight/index.vue index 1a67d23..09f1747 100644 --- a/src/views/pageMonitor/topRight/index.vue +++ b/src/views/pageMonitor/topRight/index.vue @@ -1,38 +1,17 @@ + diff --git a/vue.config.js b/vue.config.js index 910e297..1e9dd64 100644 --- a/vue.config.js +++ b/vue.config.js @@ -1,4 +1,11 @@ const { defineConfig } = require('@vue/cli-service') module.exports = defineConfig({ - transpileDependencies: true + transpileDependencies: true, + css: { + loaderOptions: { + scss: { + additionalData: `@import "@/assets/scss/utils.scss";` + } + } + } })