Browse Source

Merge branch 'yantai_master' of http://git.elinkit.com.cn:7070/r/epmet-oper-gov

yantai_master
dai 3 years ago
parent
commit
0a1f405353
  1. BIN
      src/assets/img/yantai/index2/cnt-bg.png
  2. BIN
      src/assets/img/yantai/index2/lines.png
  3. BIN
      src/assets/img/yantai/index2/pillar.png
  4. BIN
      src/assets/img/yantai/index2/plate.png
  5. BIN
      src/assets/img/yantai/index2/platform-bottom.png
  6. BIN
      src/assets/img/yantai/index2/platform-top-1.png
  7. BIN
      src/assets/img/yantai/index2/platform-top-2.png
  8. BIN
      src/assets/img/yantai/index2/platform/center.png
  9. BIN
      src/assets/img/yantai/index2/platform/left-1.png
  10. BIN
      src/assets/img/yantai/index2/platform/left-2.png
  11. BIN
      src/assets/img/yantai/index2/platform/left-3.png
  12. BIN
      src/assets/img/yantai/index2/platform/right-1.png
  13. BIN
      src/assets/img/yantai/index2/platform/right-2.png
  14. BIN
      src/assets/img/yantai/index2/platform/right-3.png
  15. 232
      src/assets/scss/pages/yantai-index.scss
  16. 159
      src/views/pages/yantai-index.vue

BIN
src/assets/img/yantai/index2/cnt-bg.png

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.4 MiB

After

Width:  |  Height:  |  Size: 667 KiB

BIN
src/assets/img/yantai/index2/lines.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 87 KiB

BIN
src/assets/img/yantai/index2/pillar.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.3 KiB

BIN
src/assets/img/yantai/index2/plate.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

BIN
src/assets/img/yantai/index2/platform-bottom.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 741 KiB

BIN
src/assets/img/yantai/index2/platform-top-1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 116 KiB

BIN
src/assets/img/yantai/index2/platform-top-2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 76 KiB

BIN
src/assets/img/yantai/index2/platform/center.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 14 KiB

BIN
src/assets/img/yantai/index2/platform/left-1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/img/yantai/index2/platform/left-2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
src/assets/img/yantai/index2/platform/left-3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/assets/img/yantai/index2/platform/right-1.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 16 KiB

BIN
src/assets/img/yantai/index2/platform/right-2.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 32 KiB

BIN
src/assets/img/yantai/index2/platform/right-3.png

Binary file not shown.

After

Width:  |  Height:  |  Size: 40 KiB

232
src/assets/scss/pages/yantai-index.scss

@ -52,6 +52,7 @@
.m-anime {
/* 引入动画效果 */
position: absolute;
z-index: 25;
top: 280px;
left: 0;
right: 0;
@ -95,7 +96,7 @@
.m-anime2 {
/* 引入动画效果 */
position: absolute;
top: 720px;
top: 730px;
left: 0;
right: 0;
margin: 70px auto;
@ -229,8 +230,236 @@
width: 100%;
}
@keyframes plate {
/* 旋转沿x轴旋转-10度,再绕y轴旋转 */
0% {
opacity: 0.1;
transform: translateY(-80px);
}
50% {
opacity: 0;
transform: translateY(-80px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.plate-list {
.plate {
position: absolute;
z-index: 0;
width: 240px;
height: 240px;
cursor: pointer;
transition: all ease 0.13s;
animation: plate 1.5s ease;
&:hover {
transform: translateY(-10px);
}
img {
width: 100%;
}
&:nth-child(1) {
top: 632px;
left: 229px;
width: 222px;
height: 169px;
}
&:nth-child(2) {
top: 607px;
left: 471px;
width: 194px;
height: 130px;
}
&:nth-child(3) {
top: 600px;
left: 681px;
width: 180px;
height: 110px;
}
&:nth-child(4) {
top: 595px;
left: 0;
right: 0;
width: 168px;
height: 106px;
margin: 0 auto;
}
&:nth-child(5) {
top: 600px;
right: 681px;
width: 180px;
height: 110px;
}
&:nth-child(6) {
top: 607px;
right: 471px;
width: 194px;
height: 130px;
}
&:nth-child(7) {
top: 632px;
right: 229px;
width: 222px;
height: 169px;
}
}
}
.platform-bottom {
position: absolute;
z-index: 20;
top: 491px;
left: 0;
right: 0;
margin: 0 auto;
pointer-events: none;
}
@keyframes platform-top {
/* 旋转沿x轴旋转-10度,再绕y轴旋转 */
0% {
opacity: 0;
transform: translateY(200px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
@keyframes lines {
/* 旋转沿x轴旋转-10度,再绕y轴旋转 */
0% {
opacity: 0.1;
transform: translateY(40px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.platform-top-2 {
position: absolute;
z-index: 20;
top: 270px;
left: 0;
right: 0;
margin: 0 auto;
pointer-events: none;
animation: platform-top 0.8s ease;
}
.platform-top-1 {
position: absolute;
z-index: 30;
top: 171px;
left: 0;
right: 0;
margin: 0 auto;
pointer-events: none;
animation: platform-top 0.8s ease;
}
.lines {
position: absolute;
z-index: 10;
top: 424px;
left: 0;
right: 0;
margin: 0 auto;
pointer-events: none;
animation: lines 0.5s ease;
}
.pillar-list {
.pillar {
position: absolute;
z-index: 40;
width: 100px;
text-align: center;
font-size: 20px;
font-family: PingFang SC;
font-weight: 500;
color: #ffffff;
line-height: 24px;
cursor: pointer;
transition: all ease 0.13s;
animation: plate 1.5s ease;
&:hover {
transform: translateY(-10px);
}
span {
position: relative;
z-index: 1;
}
img {
margin: 0 auto;
margin-top: -6px;
}
&:nth-child(1) {
top: 225px;
left: 636px;
}
&:nth-child(2) {
top: 306px;
left: 531px;
}
&:nth-child(3) {
top: 356px;
left: 657px;
}
&:nth-child(4) {
top: 376px;
left: 822px;
}
&:nth-child(5) {
top: 376px;
right: 822px;
}
&:nth-child(6) {
top: 356px;
right: 657px;
}
&:nth-child(7) {
top: 306px;
right: 531px;
}
&:nth-child(8) {
top: 225px;
right: 636px;
}
}
}
@keyframes btn {
/* 旋转沿x轴旋转-10度,再绕y轴旋转 */
0% {
opacity: 0.1;
transform: scale(0);
}
50% {
opacity: 0;
transform: scale(0.5);
}
100% {
opacity: 1;
transform: scale(1);
}
}
.btn {
position: absolute;
z-index: 100;
top: 300px;
left: 0;
right: 0;
@ -240,6 +469,7 @@
text-align: center;
line-height: 66px;
cursor: pointer;
animation: btn 1s ease;
&:hover {
span {

159
src/views/pages/yantai-index.vue

@ -8,6 +8,161 @@
<div class="m-info">
<img class="bg" src="@/assets/img/yantai/index2/cnt-bg.png" />
<img class="lines" src="@/assets/img/yantai/index2/lines.png" />
<img
class="platform-bottom"
src="@/assets/img/yantai/index2/platform-bottom.png"
/>
<img
class="platform-top-1"
src="@/assets/img/yantai/index2/platform-top-1.png"
/>
<img
class="platform-top-2"
src="@/assets/img/yantai/index2/platform-top-2.png"
/>
<div class="pillar-list">
<div class="pillar" @click="toPage('/main/base-resi')">
<span>人房信息</span>
<img
class="pillar-bg"
src="@/assets/img/yantai/index2/pillar.png"
/>
</div>
<div
class="pillar"
@click="toPage('/main/communityService-measure-index')"
>
<span>社区查询</span>
<img
class="pillar-bg"
src="@/assets/img/yantai/index2/pillar.png"
/>
</div>
<div
class="pillar"
@click="toPage('/main/communityParty-members-index')"
>
<span>社区党建</span>
<img
class="pillar-bg"
src="@/assets/img/yantai/index2/pillar.png"
/>
</div>
<div
class="pillar"
@click="toPage('/main/shequzhili-event-eventList')"
>
<span>社区治理</span>
<img
class="pillar-bg"
src="@/assets/img/yantai/index2/pillar.png"
/>
</div>
<div
class="pillar"
@click="toPage('/main/shequzhili-event-eventList')"
>
<span>社区服务</span>
<img
class="pillar-bg"
src="@/assets/img/yantai/index2/pillar.png"
/>
</div>
<div class="pillar" @click="toPage('/main/base-epidemic-antiInfo')">
<span>疫情防控</span>
<img
class="pillar-bg"
src="@/assets/img/yantai/index2/pillar.png"
/>
</div>
<div
class="pillar"
@click="toPage('/main/workPc-guidance-guidanceList.vue')"
>
<span>便携工具</span>
<img
class="pillar-bg"
src="@/assets/img/yantai/index2/pillar.png"
/>
</div>
<div class="pillar" @click="toPage('/main/workSys-mapConfig')">
<span>系统管理</span>
<img
class="pillar-bg"
src="@/assets/img/yantai/index2/pillar.png"
/>
</div>
</div>
<div class="plate-list">
<div
class="plate"
@click="toPage('/main-shuju/visual-basicinfo-basicInfoMain')"
>
<img
class="plate-bg"
src="@/assets/img/yantai/index2/platform/left-3.png"
/>
</div>
<div
class="plate"
@click="toPage('/main-shuju/visual-warning-index')"
>
<img
class="plate-bg"
src="@/assets/img/yantai/index2/platform/left-2.png"
/>
</div>
<div
class="plate"
@click="toPage('/main-shuju/visual-measure-service')"
>
<img
class="plate-bg"
src="@/assets/img/yantai/index2/platform/left-1.png"
/>
</div>
<div
class="plate"
@click="toPage('/main-shuju/visual-communityParty-party')"
>
<img
class="plate-bg"
src="@/assets/img/yantai/index2/platform/center.png"
/>
</div>
<div
class="plate"
@click="
toPage(
'/main-shuju/visual-communityGovern-shijianchuli-shijianchulifenxi'
)
"
>
<img
class="plate-bg"
src="@/assets/img/yantai/index2/platform/right-1.png"
/>
</div>
<div class="plate" @click="toPage('/main-shuju/visual-heart-index')">
<img
class="plate-bg"
src="@/assets/img/yantai/index2/platform/right-2.png"
/>
</div>
<div
class="plate"
@click="toPage('/main-shuju/i-1536625421829599234')"
>
<img
class="plate-bg"
src="@/assets/img/yantai/index2/platform/right-3.png"
/>
</div>
</div>
<div class="btn" @click="handleClickItem(1)">
<img class="bg-bg" src="@/assets/img/yantai/index2/title-bg2.png" />
<span>管理平台</span>
@ -31,7 +186,6 @@
</div>
</div>
<div class="m-anime2">
<div class="anime"></div>
<div class="anime"></div>
@ -54,7 +208,6 @@
<div class="anime"></div>
<div class="anime"></div>
<div class="anime"></div>
<div class="anime"></div>
<div class="anime"></div>
@ -62,7 +215,6 @@
<div class="anime"></div>
<div class="anime"></div>
<div class="anime"></div>
<div class="anime"></div>
<div class="anime"></div>
@ -70,7 +222,6 @@
<div class="anime"></div>
<div class="anime"></div>
<div class="anime"></div>
<div class="anime"></div>
<div class="anime"></div>

Loading…
Cancel
Save