From 8edf0fc193df875b6e05d77be428e9134438857b Mon Sep 17 00:00:00 2001
From: Admin <978517621@qq.com>
Date: 星期二, 16 八月 2022 19:32:54 +0800
Subject: [PATCH] Default Changelist
---
src/views/newHome/index.vue | 399 ++++++++++++++++++++++++++++++++++++++++++++-------------
1 files changed, 308 insertions(+), 91 deletions(-)
diff --git a/src/views/newHome/index.vue b/src/views/newHome/index.vue
index 9ceff18..67f40e0 100644
--- a/src/views/newHome/index.vue
+++ b/src/views/newHome/index.vue
@@ -133,7 +133,7 @@
<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>
@@ -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%;
@@ -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