From abdc7313b9e2c5a3e09d42cbaee48c6f131d7173 Mon Sep 17 00:00:00 2001
From: Your Name <123456>
Date: 星期三, 17 八月 2022 09:14:43 +0800
Subject: [PATCH] lct
---
src/views/newHome/index.vue | 423 ++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 320 insertions(+), 103 deletions(-)
diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index 4e61775..c55f2ed 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -57,7 +57,7 @@
</div>
</div>
</div>
- <img class="bgImg1" src="../../assets/newMenu/card1.png" />
+ <img class="bgImg1" src="../../assets/newMenu/card-1.png" />
</div>
<div class="grid-content cont-bg-1" v-throttle @click="render('2')">
<div class="toplayer">
@@ -67,7 +67,7 @@
<div class="enTit">Double prevention</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card4.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-4.png" />
</div>
<div class="grid-content cont-bg-1" v-throttle @click="render('4')">
<div class="toplayer">
@@ -77,7 +77,7 @@
<div class="enTit">Intelligent inspection system</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card8.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-8.png" />
</div>
<div class="grid-content cont-bg-1" v-throttle @click="render('3')">
<div class="toplayer">
@@ -87,7 +87,7 @@
<div class="enTit">special work</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card7.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-7.png" />
</div>
<div class="grid-content cont-bg-1" v-throttle @click="render('7')">
<div class="toplayer">
@@ -97,7 +97,7 @@
<div class="enTit">Target Responsibility Management</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card2.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-2.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('10')">
<div class="toplayer">
@@ -107,7 +107,7 @@
<div class="enTit">Security Knowledge Graph</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card3.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-3.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('9')">
<div class="toplayer">
@@ -117,7 +117,7 @@
<div class="enTit">Comprehensive equipment control</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card9.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-9.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('6')">
<div class="toplayer">
@@ -127,17 +127,17 @@
<div class="enTit">Emergency management</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card5.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-5.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('11')">
<div class="toplayer">
<img class="iconImg" src="../../assets/newMenu/icon9.png" />
<div>
- <div class="itemTit">危险化学品全生命周期安全<br />管理系统</div>
+ <div class="itemTit">危险化学品全生命周期安全管理系统</div>
<div class="enTit">Full life cycle of hazardous chemicals</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card10.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-10.png" />
</div>
<div class="grid-content cont-bg-2" v-throttle @click="render('8')">
<div class="toplayer">
@@ -147,7 +147,7 @@
<div class="enTit">Incident Management</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card6.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-6.png" />
</div>
<div class="grid-content cont-bg-2" @click="render('1')">
<div class="toplayer">
@@ -157,7 +157,7 @@
<div class="enTit">Basic data permissions</div>
</div>
</div>
- <img class="bgImg" src="../../assets/newMenu/card11.png" />
+ <img class="bgImg" src="../../assets/newMenu/card-11.png" />
</div>
</div>
</div>
@@ -400,6 +400,312 @@
</script>
<style scoped lang="scss">
+ @media screen and (min-width: 1400px) {
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 20px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 99;
+
+ .itemTit {
+ font-size: 28px;
+ line-height: 34px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ color: #072270;
+ }
+ .enTit{
+ font-size: 18px;
+ line-height: 20px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+
+ .iconImg {
+ width: 88px;
+ height: 88px;
+ margin-right: 20px;
+ }
+ }
+ .bgImg {
+ position: absolute;
+ width: 30%;
+ height: auto;
+ right: -10px;
+ top: 15px;
+ }
+ }
+
+
+ .grid-content-1{
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
+
+ &>div{
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .itemTit1 {
+ font-size: 34px;
+ line-height: 42px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1{
+ font-size: 22px;
+ line-height: 24px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+ }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
+ }
+ }
+
+ .bot-rights{
+ font-size: 18px;
+ color: #333;
+ }
+ }
+
+ @media screen and (min-width: 1200px) and (max-width: 1400px){
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 15px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 20px;
+ z-index: 99;
+
+ .itemTit {
+ font-size: 26px;
+ line-height: 30px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ color: #072270;
+ margin-bottom: 2px;
+ }
+ .enTit{
+ font-size: 14px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+
+ .iconImg {
+ width: 44px;
+ height: 44px;
+ margin-right: 10px;
+ }
+
+ }
+ .bgImg {
+ position: absolute;
+ width: 30%;
+ height: auto;
+ right: -10px;
+ top: 15px;
+ }
+ }
+
+ .grid-content-1{
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
+
+ &>div{
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .itemTit1 {
+ font-size: 28px;
+ line-height: 36px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1{
+ font-size: 16px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+ }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
+ }
+ }
+ .bot-rights{
+ font-size: 15px;
+ color: #333;
+ }
+ }
+ @media screen and (max-width: 1200px){
+ .gridCont {
+ width: 100%;
+ height: 100%;
+ display: grid;
+ grid-gap: 10px;
+ grid-template-columns: repeat(3, 1fr);
+ grid-auto-flow: row;
+ justify-content: center;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ padding: 0 15px;
+ z-index: 99;
+
+ .itemTit {
+ font-size: 18px;
+ line-height: 22px;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ color: #072270;
+ }
+ .enTit{
+ font-size: 12px;
+ line-height: 14px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+
+ .iconImg {
+ width: 32px;
+ height: 32px;
+ margin-right: 10px;
+ }
+ }
+ .bgImg {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -10px;
+ top: 15px;
+ }
+ }
+
+ .grid-content-1{
+ grid-row-start: 1;
+ grid-row-end: 3;
+
+ .toplayer{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ left: 0;
+ top: 0;
+ display: flex;
+ align-items: center;
+ z-index: 99;
+
+ &>div{
+ display: flex;
+ align-items: flex-start;
+ }
+
+ .itemTit1 {
+ font-size: 24px;
+ line-height: 36px;
+ height: 40%;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ letter-spacing: 1px;
+ color: #072270;
+ margin-bottom: 12px;
+ }
+ .enTit1{
+ font-size: 14px;
+ color: #072270;
+ font-family: 'PingFang SC';
+ font-weight: 600;
+ }
+ }
+ .bgImg1 {
+ position: absolute;
+ width: 45%;
+ height: auto;
+ right: -20px;
+ top: 30%;
+ }
+ }
+ .bot-rights{
+ font-size: 12px;
+ color: #333;
+ }
+ }
.login-container {
width: 100%;
height: 100%;
@@ -499,7 +805,7 @@
height: 100%;
z-index: 99;
background: url('../../assets/newMenu/leftbg.png') no-repeat center;
- background-size: 100% auto;
+ background-size: 100% 100%;
}
.topCont{
position: absolute;
@@ -579,13 +885,6 @@
top: 260px;
left: 240px;
.gridCont {
- width: 100%;
- height: 100%;
- display: grid;
- grid-gap: 20px;
- grid-template-columns: repeat(3, 1fr);
- grid-auto-flow: row;
- justify-content: center;
.grid-content {
border-radius: 16px;
@@ -594,71 +893,10 @@
cursor: pointer;
transition: 0.3s;
border: none;
- .toplayer{
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- display: flex;
- align-items: center;
- padding: 0 20px;
- z-index: 99;
- }
+
&:hover {
background-image: radial-gradient(ellipse farthest-side at 50% 100%,#48A3FF 0%,#fff 120%);
box-shadow: 8px 8px 24px rgba(20,97,234,.2), -8px -8px 24px #fafafa;
- }
-
- .itemTit {
- font-size: 29px;
- line-height: 36px;
- height: 40%;
- font-family: 'PingFang SC';
- font-weight: 600;
- color: #072270;
- margin-bottom: 2px;
- }
- .enTit{
- font-size: 18px;
- color: #072270;
- font-family: 'PingFang SC';
- font-weight: 600;
- }
- .enTit1{
- font-size: 22px;
- color: #072270;
- font-family: 'PingFang SC';
- font-weight: 600;
- }
- .itemTit1 {
- font-size: 36px;
- line-height: 48px;
- height: 40%;
- font-family: 'PingFang SC';
- font-weight: 600;
- letter-spacing: 1px;
- color: #072270;
- margin-bottom: 18px;
- }
- .iconImg {
- width: 88px;
- height: 88px;
- margin-right: 20px;
- }
- .bgImg1 {
- position: absolute;
- width: 45%;
- height: auto;
- right: -20px;
- top: 30%;
- }
- .bgImg {
- position: absolute;
- width: 30%;
- height: auto;
- right: -10px;
- top: 15px;
}
}
.cont-bg-1{
@@ -667,26 +905,7 @@
.cont-bg-2{
background: #CDD6FF;
}
- .grid-content-1{
- grid-row-start: 1;
- grid-row-end: 3;
- .toplayer{
- width: 100%;
- height: 100%;
- position: absolute;
- left: 0;
- top: 0;
- display: flex;
- align-items: center;
- z-index: 99;
-
- &>div{
- display: flex;
- align-items: flex-start;
- }
- }
- }
/*.grid-content-2{*/
/* background-image: linear-gradient(135deg,#0098F5,#1461EA);*/
@@ -713,8 +932,6 @@
height: 8px;
}
div{
- font-size: 18px;
- color: #333;
margin: 0 20px;
}
}
--
Gitblit v1.9.2