From c15f50e77f5588d704301029ba499aab23b0d109 Mon Sep 17 00:00:00 2001
From: surprise <15810472099@163.com>
Date: 星期日, 07 四月 2024 14:13:05 +0800
Subject: [PATCH] 系统更新
---
src/views/CIM.vue | 89 ++++++++++++++++++++++-------
public/index.html | 1
public/js/index.js | 0
src/assets/css/global.css | 11 +++
src/views/WebGIS.vue | 5 +
src/views/Home.vue | 26 ++++++++
src/views/ParallelWorld.vue | 4 +
7 files changed, 113 insertions(+), 23 deletions(-)
diff --git a/public/index.html b/public/index.html
index 6630d69..32be090 100644
--- a/public/index.html
+++ b/public/index.html
@@ -12,6 +12,7 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
+ <script src="./js/index.js"></script>
<title>SmartEarth</title>
</head>
<body>
diff --git a/public/js/index.js b/public/js/index.js
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/public/js/index.js
diff --git a/src/assets/css/global.css b/src/assets/css/global.css
index c1e2e88..3fe120f 100644
--- a/src/assets/css/global.css
+++ b/src/assets/css/global.css
@@ -105,4 +105,15 @@
background: #3DBEFD !important;
color: rgba(1, 15, 22, 0.85) !important;
+}
+.contentRight_l_left{
+ opacity: 0;
+ transform: translateX(-100px);
+ transition: opacity 1s ease, transform 1s ease;
+}
+.contentRight_l_rgiht{
+ opacity: 0;
+ transform: translateX(100px);
+ transition: opacity 1s ease, transform 1s ease;
+
}
\ No newline at end of file
diff --git a/src/views/CIM.vue b/src/views/CIM.vue
index d990011..fa8a1b5 100644
--- a/src/views/CIM.vue
+++ b/src/views/CIM.vue
@@ -46,14 +46,8 @@
</ul>
</div> -->
<div class="contentRight">
- <div
- class="contentRight_l contentRight_l_c"
- :class="item.className"
- v-for="(item, i) in htmlObj"
- :key="i"
- v-html="item.html"
- ref="item"
- ></div>
+ <div class="contentRight_l contentRight_l_c" :class="item.className" v-for="(item, i) in htmlObj" :key="i"
+ v-html="item.html" ref="item"></div>
</div>
</div>
</div>
@@ -218,18 +212,23 @@
},
];
}
-onMounted(() => {});
-onBeforeUnmount(() => {});
+onMounted(() => {
+ window.onbeforeunload = function () {
+ window.scrollTo(0, 0)
+
+ }
+});
+onBeforeUnmount(() => { });
</script>
<style lang="less" scoped>
.banner {
width: 100%;
height: 100vh;
position: relative;
- background: url("../assets/img/index/javier-miranda-Jn2EaLLYZfY-unsplash.png")
- no-repeat center;
- cursor: pointer;
+ background: url("../assets/img/index/javier-miranda-Jn2EaLLYZfY-unsplash.png") no-repeat center;
+ cursor: pointer;
background-size: cover;
+
.pcimg {
width: 100%;
height: 100%;
@@ -238,16 +237,19 @@
left: 0;
object-fit: cover;
}
+
.banner_bg {
width: 100%;
height: 100%;
position: relative;
background: rgba(0, 0, 0, 0.4);
}
+
.title {
position: absolute;
top: 39%;
left: 200px;
+
h3 {
font-size: 60px;
font-family: WDCHT;
@@ -256,6 +258,7 @@
margin: 0;
padding-bottom: 10px;
}
+
p {
font-size: 30px;
font-family: MicrosoftYaHei;
@@ -263,14 +266,17 @@
padding-top: 20px;
}
}
+
.QRcode {
position: absolute;
right: 200px;
bottom: 6%;
+
img {
width: 164px;
height: 164px;
}
+
.QRcode_title {
font-size: 18px;
color: #fff;
@@ -283,6 +289,7 @@
.title_btn {
padding-top: 80px;
+
.btn {
width: 160px;
height: 44px;
@@ -293,15 +300,16 @@
font-size: 16px;
}
}
+
@media (max-width: 1125px) {
.banner {
width: 100%;
height: 360px;
- background: url("../assets/img/index/pic_banner_1beitu.png") no-repeat
- center;
+ background: url("../assets/img/index/pic_banner_1beitu.png") no-repeat center;
background-size: cover;
cursor: pointer;
}
+
.title_btn {
padding-top: 10px;
// .btn {
@@ -310,6 +318,7 @@
// }
}
}
+
.content {
width: 1530px;
margin: 0 auto;
@@ -331,10 +340,12 @@
// -ms-overflow-style: none;
// overflow: -moz-scrollbars-none;
}
+
.contentLeft {
position: absolute;
top: 0px;
left: 0;
+
.left_top {
width: 200px;
height: 44px;
@@ -347,6 +358,7 @@
line-height: 44px;
margin-bottom: 30px;
}
+
.left_top_title {
padding-left: 16px;
font-size: 30px;
@@ -355,8 +367,10 @@
color: #192236;
margin-bottom: 40px;
}
+
.left_ul {
padding-left: 50px;
+
li {
width: 20px;
height: 20px;
@@ -371,17 +385,21 @@
margin-bottom: 12px;
cursor: pointer;
}
+
.highLight {
background: rgba(25, 34, 54, 1);
color: #fff;
}
+
li:hover {
background-color: rgba(25, 34, 54, 1);
color: #fff;
}
}
}
+
.contentRight {
+
// width: 100%;
.contentRight_l {
// width: 100%;
@@ -395,12 +413,14 @@
width: calc(300px + 100px);
position: relative;
margin-right: 60px;
+
h3 {
font-size: 28px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #192236;
padding-bottom: 20px;
+
span {
font-size: 26px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
@@ -409,6 +429,7 @@
padding-right: 10px;
}
}
+
p {
font-size: 24px;
font-family: MicrosoftYaHei;
@@ -416,6 +437,7 @@
text-align: justify;
text-align-last: auto;
}
+
.contentRight_num1 {
position: absolute;
width: 189px;
@@ -425,6 +447,7 @@
background: url("../assets/img/index/1.png") no-repeat center;
background-size: 100% 100%;
}
+
.contentRight_num3 {
position: absolute;
width: 189px;
@@ -435,21 +458,23 @@
background-size: 100% 100%;
}
}
+
.contentRight_l_rgiht {
width: 908px;
height: 523px;
- background: url("../assets/img/index/sign_waikuang_da.png") no-repeat
- center;
+ background: url("../assets/img/index/sign_waikuang_da.png") no-repeat center;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
+
img {
width: 880px;
height: 495px;
}
}
}
+
.contentRight_R {
display: flex;
// align-items: center;
@@ -458,17 +483,20 @@
flex-direction: row-reverse;
// margin-bottom: 180px;
margin-bottom: 160px;
+
.contentRight_l_left {
width: calc(300px + 100px);
position: relative;
margin-left: 60px;
margin-right: 0;
+
h3 {
font-size: 28px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
font-weight: bold;
color: #192236;
padding-bottom: 20px;
+
span {
font-size: 26px;
font-family: MicrosoftYaHei-Bold, MicrosoftYaHei;
@@ -477,6 +505,7 @@
padding-right: 10px;
}
}
+
p {
font-size: 24px;
font-family: MicrosoftYaHei;
@@ -484,6 +513,7 @@
text-align: justify;
text-align-last: auto;
}
+
.contentRight_num2 {
position: absolute;
width: 189px;
@@ -493,6 +523,7 @@
background: url("../assets/img/index/2.png") no-repeat center;
background-size: 100% 100%;
}
+
.contentRight_num4 {
position: absolute;
width: 189px;
@@ -503,21 +534,23 @@
background-size: 100% 100%;
}
}
+
.contentRight_l_rgiht {
width: 908px;
height: 523px;
- background: url("../assets/img/index/sign_waikuang_da.png") no-repeat
- center;
+ background: url("../assets/img/index/sign_waikuang_da.png") no-repeat center;
background-size: 100% 100%;
display: flex;
align-items: center;
justify-content: center;
+
img {
width: 880px;
height: 495px;
}
}
}
+
// .contentRight_l:nth-child(2) {
// margin-bottom: 0;
// padding-bottom: 80px;
@@ -530,6 +563,7 @@
margin-bottom: 0;
// padding-bottom: 80px;
}
+
.pcvideo {
width: 880px;
height: 495px;
@@ -537,15 +571,18 @@
}
}
}
+
.parent::-webkit-scrollbar {
width: 0 !important;
}
+
.content_bottom {
width: 100%;
// height: 884px;
background: rgba(25, 34, 54, 1);
position: relative;
padding-bottom: 100px;
+
.content_bottom_bg {
width: 100%;
position: absolute;
@@ -556,6 +593,7 @@
left: 0;
z-index: 0;
}
+
.content_bottom_title {
position: relative;
font-size: 36px;
@@ -565,6 +603,7 @@
text-align: center;
padding-bottom: 85px;
}
+
.content_bottom_b {
width: 100%;
@@ -574,14 +613,15 @@
justify-content: space-around;
flex-wrap: wrap;
}
+
.content_bottom_b_x {
width: 536px;
}
+
.content_bottom_b_c_b {
width: 536px;
height: 312px;
- background: url("../assets/img/index/sign_waikuang_xiao.png") no-repeat
- center;
+ background: url("../assets/img/index/sign_waikuang_xiao.png") no-repeat center;
background-size: 100% 100%;
display: flex;
align-items: center;
@@ -593,12 +633,14 @@
background: url("../assets/img/index/pic_bottom_1.png") no-repeat center !important;
background-size: 100% 100%;
}
+
.content_bottom_b_c_b2 {
width: 512px;
height: 288px;
background: url("../assets/img/index/pic_bottom_2.png") no-repeat center !important;
background-size: 100% 100%;
}
+
.content_bottom_b_c_b3 {
width: 512px;
height: 288px;
@@ -606,8 +648,11 @@
background-size: 100% 100%;
}
}
+
.content_bottom_b_c_n {
- padding-top: 16px /* 16/192 */;
+ padding-top: 16px
+ /* 16/192 */
+ ;
font-size: 24px;
font-family: MicrosoftYaHei;
color: #ffffff;
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 19c67e8..db7059d 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -126,7 +126,31 @@
{ immediate: true, deep: true }
);
-onMounted(() => { });
+onMounted(() => {
+ window.addEventListener('scroll', function () {
+ var elementsLeft = document.querySelectorAll('.contentRight_l_left');
+ var elementsRight = document.querySelectorAll('.contentRight_l_rgiht');
+
+
+ for (var i = 0; i < elementsLeft.length; i++) {
+ var elementLeft = elementsLeft[i];
+ var elementRight = elementsRight[i];
+ var positionLeft = elementLeft.getBoundingClientRect().top;
+ var positionRight = elementRight.getBoundingClientRect().top;
+ var screenHeight = window.innerHeight;
+
+ if (positionLeft - screenHeight <= 0) {
+ elementLeft.style.opacity = 1;
+ elementLeft.style.transform = 'translateX(0)';
+ }
+
+ if (positionRight - screenHeight <= 0) {
+ elementRight.style.opacity = 1;
+ elementRight.style.transform = 'translateX(0)';
+ }
+ }
+ });
+ });
</script>
<style lang="less" scoped>
.logo_box {
diff --git a/src/views/ParallelWorld.vue b/src/views/ParallelWorld.vue
index 60a7013..30ac337 100644
--- a/src/views/ParallelWorld.vue
+++ b/src/views/ParallelWorld.vue
@@ -204,7 +204,11 @@
carouselTitle.value = obj.label;
}
onMounted(() => {
+ window.onbeforeunload = function()
+{
+ window.scrollTo(0, 0)
+}
setMenuOptionStart();
});
diff --git a/src/views/WebGIS.vue b/src/views/WebGIS.vue
index 168951b..566f40b 100644
--- a/src/views/WebGIS.vue
+++ b/src/views/WebGIS.vue
@@ -248,9 +248,14 @@
carouselMenusFeature.value= item.feature;
}
onMounted(() => {
+ window.onbeforeunload = function()
+{
+ window.scrollTo(0, 0)
+}
setMenuOptionStart();
+
});
onBeforeUnmount(() => { });
</script>
--
Gitblit v1.9.3