mirror of
http://112.124.100.131/happyinsurance_eco/ebiz-sunful-eco-web.git
synced 2025-12-08 02:16:51 +08:00
Merge branch 'master' of http://112.124.100.131/happyinsurance_eco/ebiz-sunful-eco-web
This commit is contained in:
huangze
@@ -160,54 +160,58 @@ export default {
|
||||
}
|
||||
.home-container {
|
||||
//height: calc(100vh - 80px);
|
||||
|
||||
width: 1920px;
|
||||
height: calc(1080px - 100px);
|
||||
display: flex;
|
||||
position: relative;
|
||||
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity;
|
||||
& .home-text {
|
||||
position: absolute;
|
||||
top: 40px;
|
||||
left: 60px;
|
||||
}
|
||||
& .right-container {
|
||||
//background: #fff;
|
||||
//height: 100%;
|
||||
.right-container {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
& .bolloon-comp {
|
||||
transition: all 1s ease-in-out;
|
||||
|
||||
.bolloon-comp {
|
||||
transition: transform 1s ease-in-out;
|
||||
position: absolute;
|
||||
top: 200px;
|
||||
//right: 460px;
|
||||
left: 800px;
|
||||
z-index: 11;
|
||||
animation: opcitys 4s ease-in-out forwards;
|
||||
will-change: transform; // 提前通知浏览器优化
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0); // 启用 GPU 加速
|
||||
|
||||
&.move {
|
||||
left: 1490px;
|
||||
top: 390px;
|
||||
transform: translate(690px, 190px) translateZ(0);
|
||||
/* 原来 left: 1490px; top: 390px; */
|
||||
}
|
||||
//margin-left: 500px;
|
||||
}
|
||||
|
||||
& .bottom-butterfly {
|
||||
.bottom-butterfly {
|
||||
z-index: 10;
|
||||
position: absolute;
|
||||
//bottom: 0;
|
||||
height: 450px;
|
||||
width: 100%;
|
||||
//opacity: 0;
|
||||
//animation: show-butterfly 1s ease-in-out forwards;
|
||||
bottom: 100px;
|
||||
left: -1000px;
|
||||
margin-left: 650px;
|
||||
margin-left: 650px; // 可以考虑移除或改为 transform
|
||||
height: 450px;
|
||||
width: 100%;
|
||||
will-change: transform;
|
||||
backface-visibility: hidden;
|
||||
transform: translateZ(0);
|
||||
|
||||
&.move {
|
||||
left: -900px;
|
||||
transform: translate(100px, 0) translateZ(0);
|
||||
bottom: 100px;
|
||||
}
|
||||
|
||||
& * {
|
||||
//zoom: 1.1;
|
||||
//zoom: 1.1; // zoom 已废弃，不推荐使用
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -228,15 +232,11 @@ export default {
|
||||
@keyframes show-butterfly {
|
||||
0% {
|
||||
opacity: 0;
|
||||
bottom: -450px;
|
||||
left: -50%;
|
||||
margin-left: 500px;
|
||||
transform: translate(-850px, 450px) rotate(-10deg);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
bottom: 50px;
|
||||
left: -850px;
|
||||
margin-left: 650px;
|
||||
transform: translate(-850px, 0) rotate(0deg);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -247,96 +247,84 @@ export default {
|
||||
.red-container,
|
||||
.red-container2 {
|
||||
.red-box {
|
||||
transition: all 1s ease-in-out;
|
||||
position: absolute;
|
||||
z-index: 98;
|
||||
cursor: pointer;
|
||||
|
||||
/* GPU 加速 */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity;
|
||||
transition: transform 1s ease-in-out, opacity 1s ease-in-out;
|
||||
|
||||
& .r-icon {
|
||||
width: 164px;
|
||||
height: 175px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
& .r-ban {
|
||||
position: absolute;
|
||||
background: url('../../assets/images/new/r-ban.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
content: ' ';
|
||||
background: url('../../assets/images/new/r-ban.png') no-repeat center center / cover;
|
||||
width: 239px;
|
||||
height: 98px;
|
||||
left: -35px;
|
||||
top: 100px;
|
||||
z-index: -1;
|
||||
z-index: 0;
|
||||
transition: background-image 0.5s ease-in-out, opacity 0.5s ease-in-out;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
& .r-ban {
|
||||
transition: all 1s ease-in-out;
|
||||
background: url('../../assets/images/new/r-ban-hover.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
.r-ban {
|
||||
background-image: url('../../assets/images/new/r-ban-hover.png');
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
&.red-box-1 {
|
||||
animation: red1 1s ease-in-out forwards;
|
||||
& .r-icon {
|
||||
//width: 155px;
|
||||
//height: 155px;
|
||||
background: url('../../assets/images/new/r1.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
.r-icon {
|
||||
background-image: url('../../assets/images/new/r1.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.red-box-2 {
|
||||
animation: red2 1s ease-in-out forwards;
|
||||
& .r-icon {
|
||||
//width: 229px;
|
||||
//height: 135px;
|
||||
background: url('../../assets/images/new/r2.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
.r-icon {
|
||||
background-image: url('../../assets/images/new/r2.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.red-box-3 {
|
||||
& .r-icon {
|
||||
background: url('../../assets/images/new/r3.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
animation: red3 1s ease-in-out forwards;
|
||||
.r-icon {
|
||||
background-image: url('../../assets/images/new/r3.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.red-box-4 {
|
||||
& .r-icon {
|
||||
background: url('../../assets/images/new/r4.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
animation: red4 1s ease-in-out forwards;
|
||||
.r-icon {
|
||||
background-image: url('../../assets/images/new/r4.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.red-box-5 {
|
||||
& .r-icon {
|
||||
background: url('../../assets/images/new/r5.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
animation: red5 1s ease-in-out forwards;
|
||||
}
|
||||
&.red-box-6 {
|
||||
& .r-icon {
|
||||
background: url('../../assets/images/new/r6.png');
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
.r-icon {
|
||||
background-image: url('../../assets/images/new/r5.png');
|
||||
}
|
||||
}
|
||||
|
||||
&.red-box-6 {
|
||||
animation: red6 1s ease-in-out forwards;
|
||||
.r-icon {
|
||||
background-image: url('../../assets/images/new/r6.png');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -347,30 +335,31 @@ export default {
|
||||
z-index: 10;
|
||||
width: 164px;
|
||||
height: 175px;
|
||||
// GPU 加速
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity;
|
||||
&.red-box-1 {
|
||||
left: -200px;
|
||||
top: 53%;
|
||||
animation: red1 1.5s ease-in-out forwards;
|
||||
transform: translate(-200px, 500px) translateZ(0);
|
||||
}
|
||||
&.red-box-2 {
|
||||
left: -200px;
|
||||
top: 10%;
|
||||
animation: red2 1.5s ease-in-out forwards;
|
||||
transform: translate(-100px, 100px) translateZ(0);
|
||||
}
|
||||
&.red-box-3 {
|
||||
left: -200px;
|
||||
top: 0;
|
||||
animation: red3 1.5s ease-in-out forwards;
|
||||
transform: translate(-200px, 0) translateZ(0);
|
||||
}
|
||||
|
||||
&.red-box-4 {
|
||||
right: 0;
|
||||
top: 53%;
|
||||
animation: red4 1.5s ease-in-out forwards;
|
||||
transform: translate(1920px, 0) translateZ(0);
|
||||
}
|
||||
|
||||
&.red-box-5 {
|
||||
right: -200px;
|
||||
top: 53%;
|
||||
animation: red5 1.5s ease-in-out forwards;
|
||||
transform: translate(1920px, 500px) translateZ(0);
|
||||
}
|
||||
}
|
||||
&.redContainerMove {
|
||||
@@ -403,68 +392,75 @@ export default {
|
||||
|
||||
.red-container2 {
|
||||
position: absolute;
|
||||
//background: rgba(255, 255, 255, 0.5);
|
||||
width: 800px;
|
||||
height: 500px;
|
||||
left: -800px;
|
||||
top: -500px;
|
||||
opacity: 0;
|
||||
z-index: 11;
|
||||
// 初始位置使用 transform 替代 left/top
|
||||
transform: translate(-800px, -500px);
|
||||
will-change: transform, opacity;
|
||||
backface-visibility: hidden;
|
||||
|
||||
& .red-box {
|
||||
z-index: 99;
|
||||
cursor: pointer;
|
||||
width: 108px !important;
|
||||
width: 108px;
|
||||
height: 100px;
|
||||
animation: redContainerMoves 2 ease-in-out;
|
||||
transition: all 2s ease-in-out;
|
||||
animation: redContainerMoves 2s ease-in-out forwards;
|
||||
transition: opacity 2s ease-in-out;
|
||||
opacity: 0;
|
||||
|
||||
// 子图标
|
||||
& div:first-child {
|
||||
width: 100px !important;
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
position: absolute;
|
||||
z-index: 99;
|
||||
}
|
||||
|
||||
// 背景遮罩
|
||||
& .r-ban {
|
||||
position: absolute;
|
||||
width: 178px;
|
||||
height: 75px;
|
||||
top: 55px;
|
||||
background: url('../../assets/images/new/r-ban.png') no-repeat center / cover;
|
||||
}
|
||||
|
||||
// 每个红点定位使用 transform
|
||||
&.red-box-1 {
|
||||
left: 200px !important;
|
||||
top: 52% !important;
|
||||
}
|
||||
&.red-box-2 {
|
||||
left: 330px !important;
|
||||
top: 43% !important;
|
||||
}
|
||||
&.red-box-3 {
|
||||
left: 580px !important;
|
||||
top: 24% !important;
|
||||
}
|
||||
&.red-box-4 {
|
||||
left: 450px !important;
|
||||
top: 33% !important;
|
||||
transform: translate(200px, 200px) !important;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
&.red-box-2 {
|
||||
transform: translate(330px, 150px) !important;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
&.red-box-3 {
|
||||
transform: translate(610px, 50px) !important;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
&.red-box-4 {
|
||||
transform: translate(480px, 100px) !important;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
&.red-box-5 {
|
||||
left: 300px !important;
|
||||
top: 75% !important;
|
||||
transform: translate(300px, 280px) !important;
|
||||
}
|
||||
|
||||
&.red-box-6 {
|
||||
left: 450px !important;
|
||||
top: 65% !important;
|
||||
transform: translate(450px, 65%);
|
||||
}
|
||||
}
|
||||
|
||||
// 显示动画触发类
|
||||
&.redContainerMove {
|
||||
left: -130px !important;
|
||||
top: 200px !important;
|
||||
transform: translate(-130px, 200px);
|
||||
opacity: 1;
|
||||
//.red-box {
|
||||
// animation: redContainerMovesLevel 1s ease-in-out;
|
||||
//}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -543,68 +539,59 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes red1 {
|
||||
0% {
|
||||
left: -200px;
|
||||
top: 51%;
|
||||
transform: translate(-200px, 500px) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
left: 100px;
|
||||
top: 51%;
|
||||
transform: translate(100px, 500px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red2 {
|
||||
0% {
|
||||
left: -200px;
|
||||
top: 10%;
|
||||
transform: translate(-100px, 100px) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
left: 330px;
|
||||
top: 32%;
|
||||
transform: translate(250px, 300px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red3 {
|
||||
0% {
|
||||
left: -200px;
|
||||
top: 0;
|
||||
transform: translate(-200px, 0) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
left: 660px;
|
||||
top: 28%;
|
||||
transform: translate(560px, 300px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red4 {
|
||||
0% {
|
||||
right: -230px;
|
||||
top: 13%;
|
||||
transform: translate(1920px, 0px) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
right: 230px;
|
||||
top: 23%;
|
||||
transform: translate(1500px, 200px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red5 {
|
||||
0% {
|
||||
right: -200px;
|
||||
top: 43%;
|
||||
transform: translate(1920px, 500px) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
right: 50px;
|
||||
top: 50%;
|
||||
transform: translate(1650px, 550px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red6 {
|
||||
@@ -622,77 +609,69 @@ export default {
|
||||
}
|
||||
@keyframes red1Level {
|
||||
0% {
|
||||
left: 100px;
|
||||
top: 51%;
|
||||
transform: translate(100px, 500px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: -200px;
|
||||
top: 51%;
|
||||
transform: translate(-200px, 500px) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red2Level {
|
||||
0% {
|
||||
left: 330px;
|
||||
top: 32%;
|
||||
transform: translate(250px, 300px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: -200px;
|
||||
top: 10%;
|
||||
transform: translate(-100px, 100px) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red3Level {
|
||||
0% {
|
||||
left: 660px;
|
||||
top: 28%;
|
||||
transform: translate(560px, 300px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
left: -200px;
|
||||
top: 0;
|
||||
transform: translate(-200px, 0) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red4Level {
|
||||
0% {
|
||||
right: 230px;
|
||||
top: 23%;
|
||||
transform: translate(1500px, 200px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
right: -230px;
|
||||
top: 13%;
|
||||
transform: translate(1920px, 0px) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red5Level {
|
||||
0% {
|
||||
right: 50px;
|
||||
top: 50%;
|
||||
transform: translate(1650px, 550px) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
right: -200px;
|
||||
top: 43%;
|
||||
transform: translate(1920px, 500px) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
z-index: 11;
|
||||
}
|
||||
}
|
||||
@keyframes red6Level {
|
||||
0% {
|
||||
right: 240px;
|
||||
top: 61%;
|
||||
transform: translate(240px, 61%) scale(1) translateZ(0);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
right: -200px;
|
||||
top: 53%;
|
||||
transform: translate(-200px, 53%) scale(0.9) translateZ(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes redContainerMoves {
|
||||
0% {
|
||||
left: 0;
|
||||
|
||||
@@ -26,10 +26,6 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.home-right-container * {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.home-right-container {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -44,29 +40,26 @@ export default {
|
||||
width: 252px;
|
||||
height: 282px;
|
||||
margin-top: -100px;
|
||||
transition: transform 0.5s ease; // 关键：控制缩放动画
|
||||
z-index: 9999;
|
||||
|
||||
/* GPU 加速优化 */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity;
|
||||
|
||||
/* 动画控制 */
|
||||
transition: transform 0.5s ease;
|
||||
|
||||
&.animateJump {
|
||||
animation: balloonJump 1s infinite alternate;
|
||||
}
|
||||
|
||||
&.shrinkFalse {
|
||||
//c重新变回来
|
||||
animation-name: scales-1;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in-out;
|
||||
animation: scales-1 1s forwards 1 ease-in-out;
|
||||
}
|
||||
|
||||
&.shrink {
|
||||
//一次之后停止缩放动画 不会变回来
|
||||
animation-name: scales;
|
||||
animation-duration: 1s;
|
||||
animation-fill-mode: forwards;
|
||||
animation-iteration-count: 1;
|
||||
animation-timing-function: ease-in-out;
|
||||
//animation: none;
|
||||
//transform: scale(0.6);
|
||||
animation: scales 1s forwards 1 ease-in-out;
|
||||
margin-top: -100px;
|
||||
|
||||
.balloon-pointer {
|
||||
@@ -90,28 +83,28 @@ export default {
|
||||
// 跳动动画定义
|
||||
@keyframes balloonJump {
|
||||
from {
|
||||
transform: translateY(0);
|
||||
transform: translateY(0) translateZ(0);
|
||||
}
|
||||
to {
|
||||
transform: translateY(-50px);
|
||||
transform: translateY(-50px) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scales {
|
||||
from {
|
||||
transform: scale(1);
|
||||
transform: scale(1) translateZ(0);
|
||||
}
|
||||
to {
|
||||
transform: scale(0.6);
|
||||
transform: scale(0.6) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes scales-1 {
|
||||
from {
|
||||
transform: scale(0.6);
|
||||
transform: scale(0.6) translateZ(0);
|
||||
}
|
||||
to {
|
||||
transform: scale(1);
|
||||
transform: scale(1) translateZ(0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
<!--帐篷 跟狗-->
|
||||
<div class="butterfly-2">
|
||||
<div class="positionR">
|
||||
<div class="cursor-box box1" @click="cursorBoxClick(1)">
|
||||
<div class="cursor-box box1" @click="cursorBoxClick(1)" :class="{ hide: !open }">
|
||||
<div class="cursor-title"></div>
|
||||
<div class="cursor-1 cursor" />
|
||||
<div class="cursor-desc"></div>
|
||||
@@ -19,7 +19,7 @@
|
||||
<img src="../../../../assets/images/rs/road/road-1.png" alt="" class="road-1" />
|
||||
<img src="../../../../assets/images/rs/t2-1.png" alt="" class="t2-1" />
|
||||
<img class="road2-ban" src="../../../../assets/images/rs/road/road2-ban.png" alt="" />
|
||||
<div class="cursor-box box2" @click="cursorBoxClick(2)">
|
||||
<div class="cursor-box box2" @click="cursorBoxClick(2)" :class="{ hide: !open }">
|
||||
<div class="cursor-title"></div>
|
||||
<div class="cursor-2 cursor" />
|
||||
<div class="cursor-desc"></div>
|
||||
@@ -33,7 +33,7 @@
|
||||
<img src="../../../../assets/images/rs/t3-1.png" alt="" class="t3-1" />
|
||||
<img src="../../../../assets/images/rs/road/road-3.png" alt="" class="road-3" />
|
||||
<img src="../../../../assets/images/rs/road/road3-ban.png" alt="" class="road3-ban" />
|
||||
<div class="cursor-box box3" @click="cursorBoxClick(3)">
|
||||
<div class="cursor-box box3" @click="cursorBoxClick(3)" :class="{ hide: !open }">
|
||||
<div class="cursor-title"></div>
|
||||
<div class="cursor-3 cursor" />
|
||||
<div class="cursor-desc"></div>
|
||||
@@ -53,13 +53,13 @@
|
||||
<!-- 学校 年轻人 小树林 -->
|
||||
<div class="butterfly-5">
|
||||
<div class="positionR">
|
||||
<div class="cursor-box box4" @click="cursorBoxClick(4)">
|
||||
<div class="cursor-box box4" @click="cursorBoxClick(4)" :class="{ hide: !open }">
|
||||
<div class="cursor-title"></div>
|
||||
<div class="cursor-4 cursor" />
|
||||
<div class="cursor-desc"></div>
|
||||
</div>
|
||||
<img src="../../../../assets/images/rs/t5-1.png" alt="" class="t5-1" />
|
||||
<div class="cursor-box box5" @click="cursorBoxClick(5)">
|
||||
<div class="cursor-box box5" @click="cursorBoxClick(5)" :class="{ hide: !open }">
|
||||
<div class="cursor-title"></div>
|
||||
<div class="cursor-5 cursor" />
|
||||
<div class="cursor-desc"></div>
|
||||
@@ -110,6 +110,9 @@ export default {
|
||||
methods: {
|
||||
cursorBoxClick(index) {
|
||||
console.log(index)
|
||||
if (!this.open) {
|
||||
return false
|
||||
}
|
||||
this.$router.push({
|
||||
path: '/pages',
|
||||
query: {
|
||||
@@ -124,6 +127,11 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.hide {
|
||||
width: 0;
|
||||
height: 0;
|
||||
cursor: unset;
|
||||
}
|
||||
.positionR {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
@@ -135,72 +143,97 @@ export default {
|
||||
|
||||
.cursor-box {
|
||||
position: absolute;
|
||||
z-index: 9999; // 提升到最高层
|
||||
z-index: 9999; // 保持在最上层
|
||||
opacity: 0;
|
||||
width: 160px;
|
||||
cursor: pointer;
|
||||
height: 150px;
|
||||
transition: all 0.5s;
|
||||
cursor: pointer;
|
||||
|
||||
// 启用 GPU 加速
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity;
|
||||
|
||||
transition: opacity 0.5s ease-in-out;
|
||||
|
||||
&:hover {
|
||||
// .cursor-title 展示
|
||||
.cursor-title {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
background: url('../../../../assets/images/rs/cursor2.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-image: url('../../../../assets/images/rs/cursor2.png');
|
||||
}
|
||||
|
||||
.cursor-desc {
|
||||
width: 669px;
|
||||
height: 99px;
|
||||
opacity: 1;
|
||||
transform: translateX(0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-title {
|
||||
width: 176px;
|
||||
height: 70px;
|
||||
cursor: pointer;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cursor {
|
||||
cursor: pointer;
|
||||
width: 99px;
|
||||
height: 113px;
|
||||
z-index: 50;
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
margin-left: 40px;
|
||||
background: url('../../../../assets/images/rs/cursor.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
z-index: 50;
|
||||
background: url('../../../../assets/images/rs/cursor.png') no-repeat center / contain;
|
||||
transition: background-image 0.3s ease-in-out;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.cursor-desc {
|
||||
width: 0;
|
||||
position: fixed;
|
||||
width: 669px;
|
||||
height: 99px;
|
||||
position: absolute;
|
||||
top: -180px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) scale(0.95);
|
||||
opacity: 0;
|
||||
//left: -1050px;
|
||||
//top: -180px;
|
||||
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
|
||||
pointer-events: none;
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.butterfly-box {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
//height: 600px;
|
||||
//过度
|
||||
transition: all 3s;
|
||||
overflow: visible;
|
||||
|
||||
/* 启用 GPU 加速 */
|
||||
transform: translateZ(0);
|
||||
backface-visibility: hidden;
|
||||
will-change: transform, opacity;
|
||||
|
||||
// 子组件通用动画属性
|
||||
.butterfly,
|
||||
.cursor-title,
|
||||
.cursor-desc,
|
||||
.road {
|
||||
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
|
||||
backface-visibility: hidden;
|
||||
}
|
||||
// ======================
|
||||
// 蝴蝶路径容器 - butterfly-1
|
||||
// ======================
|
||||
.butterfly-1 {
|
||||
position: absolute;
|
||||
|
||||
width: 476px;
|
||||
height: 176px;
|
||||
|
||||
right: -30px;
|
||||
top: 0;
|
||||
z-index: 2;
|
||||
|
||||
.t1-1 {
|
||||
position: absolute;
|
||||
top: -140px;
|
||||
@@ -208,104 +241,134 @@ export default {
|
||||
height: 234px;
|
||||
left: -60px;
|
||||
z-index: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
// ======================
|
||||
// 蝴蝶路径容器 - butterfly-2
|
||||
// ======================
|
||||
.butterfly-2 {
|
||||
position: absolute;
|
||||
width: 866px;
|
||||
//height: 218px;
|
||||
top: 30px;
|
||||
right: 60px;
|
||||
z-index: 3;
|
||||
|
||||
img {
|
||||
position: absolute;
|
||||
|
||||
&.t2-1 {
|
||||
width: 672px;
|
||||
height: 271px;
|
||||
top: -70px;
|
||||
right: -20px;
|
||||
z-index: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&.road-1 {
|
||||
position: absolute;
|
||||
right: 120px;
|
||||
width: 256px;
|
||||
height: 107px;
|
||||
opacity: 0;
|
||||
right: 120px;
|
||||
top: 95px;
|
||||
opacity: 0;
|
||||
z-index: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&.road-2 {
|
||||
position: absolute;
|
||||
scale: 0.5;
|
||||
width: 600px;
|
||||
height: 273px;
|
||||
scale: 0.5;
|
||||
z-index: 0;
|
||||
opacity: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
&.road2-ban {
|
||||
position: absolute;
|
||||
left: 60px;
|
||||
opacity: 0;
|
||||
top: -30px;
|
||||
width: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
.box1 {
|
||||
|
||||
.box1,
|
||||
.box2 {
|
||||
position: absolute;
|
||||
top: -235px;
|
||||
right: 320px;
|
||||
transform: translateZ(0);
|
||||
|
||||
.cursor-title {
|
||||
background: url('../../../../assets/images/rs/4@2x.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.cursor-desc {
|
||||
background: url('../../../../assets/images/new/t1-desc.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
left: -600px;
|
||||
top: -100px;
|
||||
opacity: 1;
|
||||
transform: translateX(200px) translateY(-100px) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-desc {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
transform: translateZ(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.box1 {
|
||||
top: -235px;
|
||||
right: 320px;
|
||||
|
||||
&:hover {
|
||||
.cursor-title {
|
||||
background: url('../../../../assets/images/rs/1@2x.png') no-repeat center / cover;
|
||||
}
|
||||
|
||||
.cursor-desc {
|
||||
background-image: url('../../../../assets/images/new/t1-desc.png');
|
||||
transform: translate(-1060px, 325px) translateZ(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box2 {
|
||||
position: absolute;
|
||||
top: -60px;
|
||||
right: 550px;
|
||||
.cursor-title {
|
||||
background: url('../../../../assets/images/rs/5@2x.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background: url('../../../../assets/images/rs/2@2x.png') no-repeat center / cover;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.cursor-desc {
|
||||
background: url('../../../../assets/images/new/t2-desc.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
left: -600px;
|
||||
top: -90px;
|
||||
background-image: url('../../../../assets/images/new/t2-desc.png');
|
||||
transform: translate(-830px, 150px) translateZ(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================
|
||||
// 蝴蝶路径容器 - butterfly-3
|
||||
// ======================
|
||||
.butterfly-3 {
|
||||
position: absolute;
|
||||
background: url('../../../../assets/images/rs/t3.png');
|
||||
width: 520px;
|
||||
//height: 137px;
|
||||
background-repeat: no-repeat;
|
||||
background: url('../../../../assets/images/rs/t3.png') no-repeat;
|
||||
background-size: cover;
|
||||
width: 520px;
|
||||
top: 94px;
|
||||
right: 505px;
|
||||
z-index: 2;
|
||||
transform: translateZ(0);
|
||||
|
||||
.t3-1 {
|
||||
position: absolute;
|
||||
width: 386px;
|
||||
@@ -313,16 +376,19 @@ export default {
|
||||
top: -50px;
|
||||
right: 60px;
|
||||
z-index: 3;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.road-3 {
|
||||
position: absolute;
|
||||
width: 69px;
|
||||
//height: 167px;
|
||||
right: -100px;
|
||||
top: 20px;
|
||||
opacity: 0;
|
||||
z-index: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.road3-ban {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
@@ -330,53 +396,51 @@ export default {
|
||||
width: 520px;
|
||||
height: 196px;
|
||||
opacity: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.box3 {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 0px;
|
||||
|
||||
.cursor-title {
|
||||
background: url('../../../../assets/images/rs/3@2x.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.cursor-desc {
|
||||
////transition: all 0s;
|
||||
//background: url('../../../../assets/images/new/t3-desc.png');
|
||||
//background-repeat: no-repeat;
|
||||
//background-size: contain;
|
||||
//background-position: center;
|
||||
//top: -10px;
|
||||
//left: 0px;
|
||||
//width: 0;
|
||||
//opacity: 0;
|
||||
background: url('../../../../assets/images/rs/3@2x.png') no-repeat center / cover;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.cursor-desc {
|
||||
background: url('../../../../assets/images/new/t3-desc.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
top: -275px;
|
||||
left: -574px;
|
||||
opacity: 1;
|
||||
background: url('../../../../assets/images/new/t3-desc.png') no-repeat center / contain;
|
||||
transform: translate(-654px, -90px) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-desc {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
transform: translateZ(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================
|
||||
// 蝴蝶路径容器 - butterfly-4
|
||||
// ======================
|
||||
.butterfly-4 {
|
||||
position: absolute;
|
||||
background: url('../../../../assets/images/rs/t4.png');
|
||||
//width: 453px;
|
||||
width: 482px;
|
||||
//height: 170px;
|
||||
background-repeat: no-repeat;
|
||||
background: url('../../../../assets/images/rs/t4.png') no-repeat;
|
||||
background-size: cover;
|
||||
width: 482px;
|
||||
top: 180px;
|
||||
right: 313px;
|
||||
z-index: 3;
|
||||
transform: translateZ(0);
|
||||
|
||||
.t4-1 {
|
||||
position: absolute;
|
||||
width: 381px;
|
||||
@@ -384,89 +448,114 @@ export default {
|
||||
top: -77px;
|
||||
right: 8px;
|
||||
z-index: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.road-4 {
|
||||
position: absolute;
|
||||
width: 69px;
|
||||
height: 62px;
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
left: 150px;
|
||||
top: 138px;
|
||||
opacity: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.road-4-1 {
|
||||
position: absolute;
|
||||
width: 482px;
|
||||
right: -35px;
|
||||
top: 5px;
|
||||
opacity: 0;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
// ======================
|
||||
// 蝴蝶路径容器 - butterfly-5
|
||||
// ======================
|
||||
.butterfly-5 {
|
||||
position: absolute;
|
||||
//background: url('../../../../assets/images/rs/t5.png');
|
||||
width: 473px;
|
||||
//height: 291px;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
top: 225px;
|
||||
right: 550px;
|
||||
z-index: 3;
|
||||
transform: translateZ(0);
|
||||
|
||||
.t5-1 {
|
||||
position: absolute;
|
||||
width: 473px;
|
||||
height: 291px;
|
||||
//width: 440px;
|
||||
//height: 155px ;
|
||||
top: -65px;
|
||||
right: 65px;
|
||||
z-index: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
.box4 {
|
||||
|
||||
.box4,
|
||||
.box5 {
|
||||
position: absolute;
|
||||
top: -100px;
|
||||
right: 30px;
|
||||
transform: translateZ(0);
|
||||
|
||||
.cursor-title {
|
||||
background: url('../../../../assets/images/rs/2@2x.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.cursor-title {
|
||||
background: url('../../../../assets/images/rs/5@2x.png') no-repeat center / cover;
|
||||
}
|
||||
|
||||
.cursor-desc {
|
||||
background: url('../../../../assets/images/new/t4-desc.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
left: -575px;
|
||||
top: -485px;
|
||||
opacity: 1;
|
||||
transform: translate(-620px, -365px) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
.cursor-desc {
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
transform: translateZ(0);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.box4 {
|
||||
top: -100px;
|
||||
right: 30px;
|
||||
|
||||
&:hover {
|
||||
.cursor-title {
|
||||
background: url('../../../../assets/images/rs/4@2x.png') no-repeat center / cover;
|
||||
}
|
||||
.cursor-desc {
|
||||
background: url('../../../../assets/images/new/t4-desc.png') no-repeat center / contain;
|
||||
transform: translate(-935px, -215px) translateZ(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.box5 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: -30px;
|
||||
.cursor-title {
|
||||
background: url('../../../../assets/images/rs/1@2x.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.cursor-desc {
|
||||
background: url('../../../../assets/images/new/t5-desc.png');
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
background-position: center;
|
||||
top: -495px;
|
||||
left: -580px;
|
||||
background: url('../../../../assets/images/new/t5-desc.png') no-repeat center / contain;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// ======================
|
||||
// 蝴蝶路径容器 - butterfly-6
|
||||
// ======================
|
||||
.butterfly-6 {
|
||||
position: absolute;
|
||||
bottom: 60px;
|
||||
@@ -480,23 +569,30 @@ export default {
|
||||
top: -10px;
|
||||
left: -1471px;
|
||||
z-index: 1;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
// ======================
|
||||
// 蝴蝶路径容器 - butterfly-7
|
||||
// ======================
|
||||
.butterfly-7 {
|
||||
position: absolute;
|
||||
width: 389px;
|
||||
right: 10px;
|
||||
//height: 520px;
|
||||
top: -20px;
|
||||
z-index: 5;
|
||||
transform: translateZ(0);
|
||||
|
||||
.t7-1 {
|
||||
width: 100%;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
|
||||
.t7-ban {
|
||||
//width: 100%;
|
||||
right: 10px;
|
||||
top: -20px;
|
||||
transform: translateZ(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -28,6 +28,7 @@ module.exports = {
|
||||
productionSourceMap: false,
|
||||
devServer: {
|
||||
port: port,
|
||||
host: '0.0.0.0',
|
||||
open: true,
|
||||
overlay: {
|
||||
warnings: false,
|
||||
|
||||
Reference in New Issue
Block a user