diff --git a/src/assets/img/yantai/index2/lines.png b/src/assets/img/yantai/index2/lines.png
index f004c71b0..f165a02c2 100644
Binary files a/src/assets/img/yantai/index2/lines.png and b/src/assets/img/yantai/index2/lines.png differ
diff --git a/src/assets/img/yantai/index2/pillar/1.png b/src/assets/img/yantai/index2/pillar/1.png
new file mode 100644
index 000000000..77de4115c
Binary files /dev/null and b/src/assets/img/yantai/index2/pillar/1.png differ
diff --git a/src/assets/img/yantai/index2/pillar/2.png b/src/assets/img/yantai/index2/pillar/2.png
new file mode 100644
index 000000000..1e265001e
Binary files /dev/null and b/src/assets/img/yantai/index2/pillar/2.png differ
diff --git a/src/assets/img/yantai/index2/pillar/3.png b/src/assets/img/yantai/index2/pillar/3.png
new file mode 100644
index 000000000..1dcbeb4d3
Binary files /dev/null and b/src/assets/img/yantai/index2/pillar/3.png differ
diff --git a/src/assets/img/yantai/index2/pillar/4.png b/src/assets/img/yantai/index2/pillar/4.png
new file mode 100644
index 000000000..eee0669a4
Binary files /dev/null and b/src/assets/img/yantai/index2/pillar/4.png differ
diff --git a/src/assets/img/yantai/index2/pillar/5.png b/src/assets/img/yantai/index2/pillar/5.png
new file mode 100644
index 000000000..423bdece1
Binary files /dev/null and b/src/assets/img/yantai/index2/pillar/5.png differ
diff --git a/src/assets/img/yantai/index2/pillar/6.png b/src/assets/img/yantai/index2/pillar/6.png
new file mode 100644
index 000000000..e8bb061d9
Binary files /dev/null and b/src/assets/img/yantai/index2/pillar/6.png differ
diff --git a/src/assets/img/yantai/index2/pillar/7.png b/src/assets/img/yantai/index2/pillar/7.png
new file mode 100644
index 000000000..81332c81f
Binary files /dev/null and b/src/assets/img/yantai/index2/pillar/7.png differ
diff --git a/src/assets/img/yantai/index2/pillar/8.png b/src/assets/img/yantai/index2/pillar/8.png
new file mode 100644
index 000000000..98278eb77
Binary files /dev/null and b/src/assets/img/yantai/index2/pillar/8.png differ
diff --git a/src/assets/img/yantai/index2/platform-top-1.png b/src/assets/img/yantai/index2/platform-top-1.png
index 21dff25e0..018b4d78e 100644
Binary files a/src/assets/img/yantai/index2/platform-top-1.png and b/src/assets/img/yantai/index2/platform-top-1.png differ
diff --git a/src/assets/img/yantai/index2/platform-top-2.png b/src/assets/img/yantai/index2/platform-top-2.png
index 3dc766f2f..c774ff779 100644
Binary files a/src/assets/img/yantai/index2/platform-top-2.png and b/src/assets/img/yantai/index2/platform-top-2.png differ
diff --git a/src/assets/scss/pages/yantai-index.scss b/src/assets/scss/pages/yantai-index.scss
index baa0e7c0a..33ee2cc58 100644
--- a/src/assets/scss/pages/yantai-index.scss
+++ b/src/assets/scss/pages/yantai-index.scss
@@ -68,16 +68,16 @@
width: 123px;
}
&:nth-child(1) {
- transform: rotateY(90deg) translateZ(502px);
+ transform: rotateY(90deg) translateZ(622px);
}
&:nth-child(2) {
- transform: rotateY(180deg) translateZ(502px);
+ transform: rotateY(180deg) translateZ(622px);
}
&:nth-child(3) {
- transform: rotateY(270deg) translateZ(502px);
+ transform: rotateY(270deg) translateZ(622px);
}
&:nth-child(4) {
- transform: rotateY(360deg) translateZ(502px);
+ transform: rotateY(360deg) translateZ(622px);
}
}
}
@@ -277,7 +277,7 @@
}
&:nth-child(3) {
top: 600px;
- left: 681px;
+ left: 674px;
width: 180px;
height: 110px;
}
@@ -291,7 +291,7 @@
}
&:nth-child(5) {
top: 600px;
- right: 681px;
+ right: 674px;
width: 180px;
height: 110px;
}
@@ -349,7 +349,7 @@
.platform-top-2 {
position: absolute;
z-index: 20;
- top: 270px;
+ top: 238px;
left: 0;
right: 0;
margin: 0 auto;
@@ -360,7 +360,7 @@
.platform-top-1 {
position: absolute;
z-index: 30;
- top: 171px;
+ top: 129px;
left: 0;
right: 0;
margin: 0 auto;
@@ -371,7 +371,7 @@
.lines {
position: absolute;
z-index: 10;
- top: 424px;
+ top: 433px;
left: 0;
right: 0;
margin: 0 auto;
@@ -383,7 +383,7 @@
.pillar {
position: absolute;
z-index: 40;
- width: 100px;
+ width: 130px;
text-align: center;
font-size: 20px;
font-family: PingFang SC;
@@ -397,44 +397,47 @@
transform: translateY(-10px);
}
span {
- position: relative;
+ position: absolute;
z-index: 1;
+ left: 0;
+ right: 0;
+ bottom: 16px;
}
img {
margin: 0 auto;
margin-top: -6px;
}
&:nth-child(1) {
- top: 225px;
- left: 636px;
+ top: 165px;
+ left: 575px;
}
&:nth-child(2) {
- top: 306px;
- left: 531px;
+ top: 257px;
+ left: 444px;
}
&:nth-child(3) {
- top: 356px;
- left: 657px;
+ top: 320px;
+ left: 622px;
}
&:nth-child(4) {
- top: 376px;
- left: 822px;
+ top: 343px;
+ left: 801px;
}
&:nth-child(5) {
- top: 376px;
- right: 822px;
+ top: 343px;
+ right: 801px;
}
&:nth-child(6) {
- top: 356px;
- right: 657px;
+ top: 320px;
+ right: 622px;
}
&:nth-child(7) {
- top: 306px;
- right: 531px;
+ top: 257px;
+ right: 444px;
}
&:nth-child(8) {
- top: 225px;
- right: 636px;
+ top: 165px;
+ right: 575px;
}
}
}
@@ -460,7 +463,7 @@
.btn {
position: absolute;
z-index: 100;
- top: 300px;
+ top: 269px;
left: 0;
right: 0;
margin: 0 auto;
@@ -509,3 +512,159 @@
}
}
}
+
+.m-arc {
+ position: absolute;
+ z-index: 60;
+ left: 0;
+ right: 0;
+ top: 650px;
+ margin: 0 auto;
+ width: 160px;
+ height: 160px;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-perspective: 400px;
+ perspective: 400px;
+ pointer-events: none;
+ margin-bottom: 40px;
+
+ .line {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ border-bottom: 1.5px solid rgba(#83fbfe, 0.7);
+ }
+
+ .line:first-child {
+ -webkit-animation: rotate1 1.15s linear infinite;
+ animation: rotate1 1.15s linear infinite;
+ }
+
+ .line:nth-child(2) {
+ -webkit-animation: rotate2 1.15s linear infinite;
+ animation: rotate2 1.15s linear infinite;
+ }
+
+ .line:nth-child(3) {
+ -webkit-animation: rotate3 1.15s linear infinite;
+ animation: rotate3 1.15s linear infinite;
+ }
+
+ .line:first-child {
+ -webkit-animation-delay: -0.8s;
+ animation-delay: -0.8s;
+ }
+
+ .line:nth-child(2) {
+ -webkit-animation-delay: -0.4s;
+ animation-delay: -0.4s;
+ }
+
+ .line:nth-child(3) {
+ -webkit-animation-delay: 0s;
+ animation-delay: 0s;
+ }
+
+ @keyframes rotate1 {
+ 0% {
+ -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(0);
+ transform: rotateX(35deg) rotateY(-45deg) rotate(0);
+ }
+
+ to {
+ -webkit-transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
+ transform: rotateX(35deg) rotateY(-45deg) rotate(1turn);
+ }
+ }
+
+ @keyframes rotate2 {
+ 0% {
+ -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(0);
+ transform: rotateX(50deg) rotateY(10deg) rotate(0);
+ }
+
+ to {
+ -webkit-transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
+ transform: rotateX(50deg) rotateY(10deg) rotate(1turn);
+ }
+ }
+
+ @keyframes rotate3 {
+ 0% {
+ -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(0);
+ transform: rotateX(35deg) rotateY(55deg) rotate(0);
+ }
+
+ to {
+ -webkit-transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
+ transform: rotateX(35deg) rotateY(55deg) rotate(1turn);
+ }
+ }
+}
+
+.m-arc2 {
+ position: absolute;
+ z-index: 60;
+ left: 0;
+ right: 0;
+ top: 210px;
+ margin: 0 auto;
+ width: 120px;
+ height: 120px;
+ -webkit-transform-style: preserve-3d;
+ transform-style: preserve-3d;
+ -webkit-perspective: 400px;
+ perspective: 400px;
+ pointer-events: none;
+ margin-bottom: 40px;
+
+ /* 第二个 */
+ .line {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 50%;
+ border-bottom: 1px solid rgba(#83fbfe, 0.5);
+ border-top: 1px solid rgba(#83fbfe, 0.5);
+ }
+
+ .line:first-child {
+ -webkit-animation: rotate4 1.15s linear infinite;
+ animation: rotate4 1.15s linear infinite;
+ }
+
+ .line:nth-child(2) {
+ -webkit-animation: rotate5 1.15s linear infinite;
+ animation: rotate5 1.15s linear infinite;
+ }
+
+ @keyframes rotate4 {
+ 0% {
+ -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(0);
+ transform: rotateX(55deg) rotateY(-30deg) rotate(0);
+ }
+
+ to {
+ -webkit-transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
+ transform: rotateX(55deg) rotateY(-30deg) rotate(1turn);
+ }
+ }
+
+ @keyframes rotate5 {
+ 0% {
+ -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(0);
+ transform: rotateX(55deg) rotateY(30deg) rotate(0);
+ }
+
+ to {
+ -webkit-transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
+ transform: rotateX(55deg) rotateY(30deg) rotate(1turn);
+ }
+ }
+}
diff --git a/src/views/pages/yantai-index.vue b/src/views/pages/yantai-index.vue
index dc43b982d..57316a0ef 100644
--- a/src/views/pages/yantai-index.vue
+++ b/src/views/pages/yantai-index.vue
@@ -27,7 +27,7 @@
人房信息