From a8ef7c1a4b2ab6acd91a0520e6258bd753d17f20 Mon Sep 17 00:00:00 2001 From: 马宇豪 <978517621@qq.com> Date: 星期三, 16 八月 2023 15:58:20 +0800 Subject: [PATCH] 人员证书类型 --- src/views/newHome/index.vue | 101 +++++++++++++++++++++++++++++++++++++++----------- 1 files changed, 79 insertions(+), 22 deletions(-) diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue index 354e692..e04132f 100644 --- a/src/views/newHome/index.vue +++ b/src/views/newHome/index.vue @@ -52,7 +52,7 @@ </div> <img class="bgImg1" src="../../assets/newMenu/card-1.png" /> </div> - <div class="grid-content cont-bg-1" v-throttle @click="render('2')"> + <div class="grid-content cont-bg-1" v-throttle @click="toDoublePrevent"> <div class="toplayer"> <img class="iconImg" src="../../assets/newMenu/icon2.png" /> <div> @@ -82,7 +82,17 @@ </div> <img class="bgImg" src="../../assets/newMenu/card-7.png" /> </div> - <div class="grid-content cont-bg-1" v-throttle @click="render('7')"> + <div class="grid-content cont-bg-1" v-throttle @click="toManLocation"> + <div class="toplayer"> + <img class="iconImg" src="../../assets/newMenu/icon12.png" /> + <div> + <div class="itemTit">人员定位系统</div> + <div class="enTit">Personnel Positioning System</div> + </div> + </div> + <img class="bgImg" src="../../assets/newMenu/card-12.png" /> + </div> + <div class="grid-content cont-bg-2" v-throttle @click="render('7')"> <div class="toplayer"> <img class="iconImg" src="../../assets/newMenu/icon5.png" /> <div> @@ -141,6 +151,16 @@ </div> </div> <img class="bgImg" src="../../assets/newMenu/card-6.png" /> + </div> + <div class="grid-content cont-bg-2" v-throttle @click="toSmartFactory"> + <div class="toplayer"> + <img class="iconImg" src="../../assets/newMenu/icon13.png" /> + <div> + <div class="itemTit">智能工厂系统</div> + <div class="enTit">Intelligent Factory System</div> + </div> + </div> + <img class="bgImg" src="../../assets/newMenu/card-13.png" /> </div> <div class="grid-content cont-bg-2" @click="render('1')"> <div class="toplayer"> @@ -332,6 +352,16 @@ // }); window.open('http://39.104.85.193:8585/'); }; + + const toDoublePrevent = () => { + window.open('http://121.239.169.27:6801'); + }; + const toSmartFactory = () =>{ + window.open('http://10.211.134.139:5522/#/login'); + } + const toManLocation = () =>{ + window.open('http://10.211.134.138:8081/GUOTAI'); + } const throttle = (renderMenu: any, delay: number) => { let flag = true; let count = 0; @@ -353,6 +383,7 @@ //调用菜单方法 const renderMenu = throttle(() => { + // debugger renderFun(); }, 2000); @@ -405,6 +436,9 @@ getDateTime, renderToNew, toRiskPlatform, + toDoublePrevent, + toSmartFactory, + toManLocation, onScreenfullClick, loginIconTwo, getThemeConfig, @@ -433,13 +467,27 @@ left: 0; } } -@media screen and (min-width: 1400px) { + @keyframes upDown { + 50% { + -webkit-transform: translateY(-8px); + -ms-transform: translateY(-8px); + -o-transform: translateY(-8px); + transform: translateY(-8px); + } + 100% { + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); + } + } +@media screen and (min-width: 1600px) { .gridCont { width: 100%; - height: 100%; display: grid; grid-gap: 20px; grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(5, 200px); grid-auto-flow: row; justify-content: center; .toplayer { @@ -501,7 +549,7 @@ } .itemTit1 { - font-size: 34px; + font-size: 32px; line-height: 42px; height: 40%; letter-spacing: 1px; @@ -509,7 +557,7 @@ margin-bottom: 12px; } .enTit1 { - font-size: 20px; + font-size: 18px; line-height: 24px; color: #072270; } @@ -529,13 +577,13 @@ } } -@media screen and (min-width: 1200px) and (max-width: 1400px) { +@media screen and (min-width: 1200px) and (max-width: 1600px) { .gridCont { width: 100%; - height: 100%; display: grid; grid-gap: 15px; grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(5, 120px); grid-auto-flow: row; justify-content: center; @@ -551,14 +599,14 @@ z-index: 99; .itemTit { - font-size: 26px; + font-size: 22px; line-height: 30px; height: 40%; color: #072270; margin-bottom: 2px; } .enTit { - font-size: 14px; + font-size: 12px; color: #072270; } @@ -597,7 +645,7 @@ } .itemTit1 { - font-size: 28px; + font-size: 24px; line-height: 36px; height: 40%; letter-spacing: 1px; @@ -605,7 +653,7 @@ margin-bottom: 12px; } .enTit1 { - font-size: 16px; + font-size: 14px; color: #072270; } } @@ -625,10 +673,10 @@ @media screen and (max-width: 1200px) { .gridCont { width: 100%; - height: 100%; display: grid; grid-gap: 10px; grid-template-columns: repeat(3, 1fr); + grid-template-rows: repeat(5, 96px); grid-auto-flow: row; justify-content: center; @@ -644,12 +692,12 @@ z-index: 99; .itemTit { - font-size: 18px; + font-size: 14px; line-height: 22px; color: #072270; } .enTit { - font-size: 12px; + font-size: 10px; line-height: 14px; color: #072270; } @@ -689,7 +737,7 @@ } .itemTit1 { - font-size: 24px; + font-size: 16px; line-height: 36px; height: 40%; letter-spacing: 1px; @@ -697,7 +745,7 @@ margin-bottom: 12px; } .enTit1 { - font-size: 14px; + font-size: 12px; color: #072270; } } @@ -803,7 +851,7 @@ position: absolute; left: -100px; top: 0; - width: 240px; + width: 220px; height: 100%; z-index: 99; background: url('../../assets/newMenu/leftbg.png') no-repeat center; @@ -882,12 +930,14 @@ } } .menuGrid { - width: calc(100vw - 240px); + width: calc(100vw - 220px); height: calc(100vh - 320px); padding: 20px 20px 0; position: absolute; top: 260px; - left: 240px; + left: 220px; + overflow: hidden; + overflow-y: scroll; .gridCont { .grid-content { border-radius: 16px; @@ -895,11 +945,18 @@ overflow: hidden; cursor: pointer; transition: 0.3s; - border: none; + border: 2px solid rgba(255,255,255,0); &:hover { + border-radius: 16px; background-image: radial-gradient(ellipse farthest-side at 50% 100%, #48a3ff 0%, #fff 120%); - box-shadow: 8px 8px 24px rgba(20, 97, 234, 0.2), -8px -8px 24px #fafafa; + box-shadow: -8px -8px 24px rgba(20, 97, 234, 0.2), 8px 8px 24px rgba(20, 97, 234, 0.2); + border: 2px solid #fff; + + .iconImg{ + animation: upDown 0.3s 1 ease-in-out forwards; + filter: drop-shadow(0 0 12px rgba(20, 97, 234, 0.4)); + } } } .cont-bg-1 { -- Gitblit v1.9.2