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 @@ 人房信息
社区查询
社区党建
社区治理
社区服务
疫情防控
便携工具
系统管理
@@ -146,7 +146,10 @@ src="@/assets/img/yantai/index2/platform/right-1.png" /> -
+
+ +
+
+
+
+
+ +
+
+
+