hz/ebiz-sunful-eco-web
1
0
Fork 0
mirror of http://112.124.100.131/happyinsurance_eco/ebiz-sunful-eco-web.git synced 2025-12-09 19:06:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' of http://112.124.100.131/happyinsurance_eco/ebiz-sunful-eco-web

Browse Source
This commit is contained in:
huangze
2025-07-05 16:19:16 +08:00
parent 27ef12174c 6c4ca42fb8
commit 214d85e87f
4 changed files with 380 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

305
src/views/app/Home.vue
View File

@@ -160,54 +160,58 @@ export default {
} }
.home-container { .home-container {
//height: calc(100vh - 80px); //height: calc(100vh - 80px);
width: 1920px; width: 1920px;
height: calc(1080px - 100px); height: calc(1080px - 100px);
display: flex; display: flex;
position: relative; position: relative;
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform, opacity;
& .home-text { & .home-text {
position: absolute; position: absolute;
top: 40px; top: 40px;
left: 60px; left: 60px;
} }
& .right-container { .right-container {
//background: #fff;
//height: 100%;
position: relative; position: relative;
flex: 1; flex: 1;
& .bolloon-comp {
transition: all 1s ease-in-out; .bolloon-comp {
transition: transform 1s ease-in-out;
position: absolute; position: absolute;
top: 200px; top: 200px;
//right: 460px;
left: 800px; left: 800px;
z-index: 11; z-index: 11;
animation: opcitys 4s ease-in-out forwards; animation: opcitys 4s ease-in-out forwards;
will-change: transform; // 提前通知浏览器优化
backface-visibility: hidden;
transform: translateZ(0); // 启用 GPU 加速
&.move { &.move {
left: 1490px; transform: translate(690px, 190px) translateZ(0);
top: 390px; /* 原来 left: 1490px; top: 390px; */
} }
//margin-left: 500px;
} }
& .bottom-butterfly { .bottom-butterfly {
z-index: 10; z-index: 10;
position: absolute; position: absolute;
//bottom: 0;
height: 450px;
width: 100%;
//opacity: 0;
//animation: show-butterfly 1s ease-in-out forwards;
bottom: 100px; bottom: 100px;
left: -1000px; left: -1000px;
margin-left: 650px; margin-left: 650px; // 可以考虑移除或改为 transform
height: 450px;
width: 100%;
will-change: transform;
backface-visibility: hidden;
transform: translateZ(0);
&.move { &.move {
left: -900px; transform: translate(100px, 0) translateZ(0);
bottom: 100px; bottom: 100px;
} }
& * { & * {
//zoom: 1.1; //zoom: 1.1; // zoom 已废弃，不推荐使用
} }
} }
} }
@@ -228,15 +232,11 @@ export default {
@keyframes show-butterfly { @keyframes show-butterfly {
0% { 0% {
opacity: 0; opacity: 0;
bottom: -450px; transform: translate(-850px, 450px) rotate(-10deg);
left: -50%;
margin-left: 500px;
} }
100% { 100% {
opacity: 1; opacity: 1;
bottom: 50px; transform: translate(-850px, 0) rotate(0deg);
left: -850px;
margin-left: 650px;
} }
} }
@@ -247,96 +247,84 @@ export default {
.red-container, .red-container,
.red-container2 { .red-container2 {
.red-box { .red-box {
transition: all 1s ease-in-out;
position: absolute; position: absolute;
z-index: 98; z-index: 98;
cursor: pointer; 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 { & .r-icon {
width: 164px; width: 164px;
height: 175px; height: 175px;
position: absolute; position: absolute;
z-index: 99; z-index: 99;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
} }
& .r-ban { & .r-ban {
position: absolute; position: absolute;
background: url('../../assets/images/new/r-ban.png'); background: url('../../assets/images/new/r-ban.png') no-repeat center center / cover;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
content: ' ';
width: 239px; width: 239px;
height: 98px; height: 98px;
left: -35px; left: -35px;
top: 100px; top: 100px;
z-index: -1; z-index: 0;
transition: background-image 0.5s ease-in-out, opacity 0.5s ease-in-out;
} }
&:hover { &:hover {
& .r-ban { .r-ban {
transition: all 1s ease-in-out; background-image: url('../../assets/images/new/r-ban-hover.png');
background: url('../../assets/images/new/r-ban-hover.png'); opacity: 0.9;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
} }
} }
&.red-box-1 { &.red-box-1 {
animation: red1 1s ease-in-out forwards; animation: red1 1s ease-in-out forwards;
& .r-icon { .r-icon {
//width: 155px; background-image: url('../../assets/images/new/r1.png');
//height: 155px;
background: url('../../assets/images/new/r1.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
} }
} }
&.red-box-2 { &.red-box-2 {
animation: red2 1s ease-in-out forwards; animation: red2 1s ease-in-out forwards;
& .r-icon { .r-icon {
//width: 229px; background-image: url('../../assets/images/new/r2.png');
//height: 135px;
background: url('../../assets/images/new/r2.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
} }
} }
&.red-box-3 { &.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; animation: red3 1s ease-in-out forwards;
.r-icon {
background-image: url('../../assets/images/new/r3.png');
} }
}
&.red-box-4 { &.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; animation: red4 1s ease-in-out forwards;
.r-icon {
background-image: url('../../assets/images/new/r4.png');
} }
}
&.red-box-5 { &.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; animation: red5 1s ease-in-out forwards;
.r-icon {
background-image: url('../../assets/images/new/r5.png');
} }
}
&.red-box-6 { &.red-box-6 {
& .r-icon {
background: url('../../assets/images/new/r6.png');
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
animation: red6 1s ease-in-out forwards; 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; z-index: 10;
width: 164px; width: 164px;
height: 175px; height: 175px;
// GPU 加速
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform, opacity;
&.red-box-1 { &.red-box-1 {
left: -200px;
top: 53%;
animation: red1 1.5s ease-in-out forwards; animation: red1 1.5s ease-in-out forwards;
transform: translate(-200px, 500px) translateZ(0);
} }
&.red-box-2 { &.red-box-2 {
left: -200px;
top: 10%;
animation: red2 1.5s ease-in-out forwards; animation: red2 1.5s ease-in-out forwards;
transform: translate(-100px, 100px) translateZ(0);
} }
&.red-box-3 { &.red-box-3 {
left: -200px;
top: 0;
animation: red3 1.5s ease-in-out forwards; animation: red3 1.5s ease-in-out forwards;
transform: translate(-200px, 0) translateZ(0);
} }
&.red-box-4 { &.red-box-4 {
right: 0;
top: 53%;
animation: red4 1.5s ease-in-out forwards; animation: red4 1.5s ease-in-out forwards;
transform: translate(1920px, 0) translateZ(0);
} }
&.red-box-5 { &.red-box-5 {
right: -200px;
top: 53%;
animation: red5 1.5s ease-in-out forwards; animation: red5 1.5s ease-in-out forwards;
transform: translate(1920px, 500px) translateZ(0);
} }
} }
&.redContainerMove { &.redContainerMove {
@@ -403,68 +392,75 @@ export default {
.red-container2 { .red-container2 {
position: absolute; position: absolute;
//background: rgba(255, 255, 255, 0.5);
width: 800px; width: 800px;
height: 500px; height: 500px;
left: -800px;
top: -500px;
opacity: 0; opacity: 0;
z-index: 11;
// 初始位置使用 transform 替代 left/top
transform: translate(-800px, -500px);
will-change: transform, opacity;
backface-visibility: hidden;
& .red-box { & .red-box {
z-index: 99; z-index: 99;
cursor: pointer; cursor: pointer;
width: 108px !important; width: 108px;
height: 100px; height: 100px;
animation: redContainerMoves 2 ease-in-out; animation: redContainerMoves 2s ease-in-out forwards;
transition: all 2s ease-in-out; transition: opacity 2s ease-in-out;
opacity: 0; opacity: 0;
// 子图标
& div:first-child { & div:first-child {
width: 100px !important; width: 100px;
height: 100px; height: 100px;
position: absolute; position: absolute;
z-index: 99; z-index: 99;
} }
// 背景遮罩
& .r-ban { & .r-ban {
position: absolute;
width: 178px; width: 178px;
height: 75px; height: 75px;
top: 55px; top: 55px;
background: url('../../assets/images/new/r-ban.png') no-repeat center / cover;
} }
// 每个红点定位使用 transform
&.red-box-1 { &.red-box-1 {
left: 200px !important; transform: translate(200px, 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;
z-index: 11; 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 { &.red-box-5 {
left: 300px !important; transform: translate(300px, 280px) !important;
top: 75% !important;
} }
&.red-box-6 { &.red-box-6 {
left: 450px !important; transform: translate(450px, 65%);
top: 65% !important;
} }
} }
// 显示动画触发类
&.redContainerMove { &.redContainerMove {
left: -130px !important; transform: translate(-130px, 200px);
top: 200px !important;
opacity: 1; opacity: 1;
//.red-box {
// animation: redContainerMovesLevel 1s ease-in-out;
//}
} }
} }
@@ -543,68 +539,59 @@ export default {
} }
} }
} }
@keyframes red1 { @keyframes red1 {
0% { 0% {
left: -200px; transform: translate(-200px, 500px) scale(0.9) translateZ(0);
top: 51%;
opacity: 0; opacity: 0;
} }
100% { 100% {
left: 100px; transform: translate(100px, 500px) scale(1) translateZ(0);
top: 51%;
opacity: 1; opacity: 1;
z-index: 11; z-index: 11;
} }
} }
@keyframes red2 { @keyframes red2 {
0% { 0% {
left: -200px; transform: translate(-100px, 100px) scale(0.9) translateZ(0);
top: 10%;
opacity: 0; opacity: 0;
} }
100% { 100% {
left: 330px; transform: translate(250px, 300px) scale(1) translateZ(0);
top: 32%;
opacity: 1; opacity: 1;
z-index: 11; z-index: 11;
} }
} }
@keyframes red3 { @keyframes red3 {
0% { 0% {
left: -200px; transform: translate(-200px, 0) scale(0.9) translateZ(0);
top: 0;
opacity: 0; opacity: 0;
} }
100% { 100% {
left: 660px; transform: translate(560px, 300px) scale(1) translateZ(0);
top: 28%;
opacity: 1; opacity: 1;
z-index: 11; z-index: 11;
} }
} }
@keyframes red4 { @keyframes red4 {
0% { 0% {
right: -230px; transform: translate(1920px, 0px) scale(0.9) translateZ(0);
top: 13%;
opacity: 0; opacity: 0;
} }
100% { 100% {
right: 230px; transform: translate(1500px, 200px) scale(1) translateZ(0);
top: 23%;
opacity: 1; opacity: 1;
z-index: 11;
} }
} }
@keyframes red5 { @keyframes red5 {
0% { 0% {
right: -200px; transform: translate(1920px, 500px) scale(0.9) translateZ(0);
top: 43%;
opacity: 0; opacity: 0;
} }
100% { 100% {
right: 50px; transform: translate(1650px, 550px) scale(1) translateZ(0);
top: 50%;
opacity: 1; opacity: 1;
z-index: 11;
} }
} }
@keyframes red6 { @keyframes red6 {
@@ -622,77 +609,69 @@ export default {
} }
@keyframes red1Level { @keyframes red1Level {
0% { 0% {
left: 100px; transform: translate(100px, 500px) scale(1) translateZ(0);
top: 51%;
opacity: 1; opacity: 1;
} }
100% { 100% {
left: -200px; transform: translate(-200px, 500px) scale(0.9) translateZ(0);
top: 51%;
opacity: 0; opacity: 0;
z-index: 11;
} }
} }
@keyframes red2Level { @keyframes red2Level {
0% { 0% {
left: 330px; transform: translate(250px, 300px) scale(1) translateZ(0);
top: 32%;
opacity: 1; opacity: 1;
} }
100% { 100% {
left: -200px; transform: translate(-100px, 100px) scale(0.9) translateZ(0);
top: 10%;
opacity: 0; opacity: 0;
z-index: 11;
} }
} }
@keyframes red3Level { @keyframes red3Level {
0% { 0% {
left: 660px; transform: translate(560px, 300px) scale(1) translateZ(0);
top: 28%;
opacity: 1; opacity: 1;
} }
100% { 100% {
left: -200px; transform: translate(-200px, 0) scale(0.9) translateZ(0);
top: 0;
opacity: 0; opacity: 0;
z-index: 11;
} }
} }
@keyframes red4Level { @keyframes red4Level {
0% { 0% {
right: 230px; transform: translate(1500px, 200px) scale(1) translateZ(0);
top: 23%;
opacity: 1; opacity: 1;
} }
100% { 100% {
right: -230px; transform: translate(1920px, 0px) scale(0.9) translateZ(0);
top: 13%;
opacity: 0; opacity: 0;
z-index: 11;
} }
} }
@keyframes red5Level { @keyframes red5Level {
0% { 0% {
right: 50px; transform: translate(1650px, 550px) scale(1) translateZ(0);
top: 50%;
opacity: 1; opacity: 1;
} }
100% { 100% {
right: -200px; transform: translate(1920px, 500px) scale(0.9) translateZ(0);
top: 43%;
opacity: 0; opacity: 0;
z-index: 11;
} }
} }
@keyframes red6Level { @keyframes red6Level {
0% { 0% {
right: 240px; transform: translate(240px, 61%) scale(1) translateZ(0);
top: 61%;
opacity: 1; opacity: 1;
} }
100% { 100% {
right: -200px; transform: translate(-200px, 53%) scale(0.9) translateZ(0);
top: 53%;
opacity: 0; opacity: 0;
} }
} }
@keyframes redContainerMoves { @keyframes redContainerMoves {
0% { 0% {
left: 0; left: 0;

43
src/views/app/homeComponents/bolloon/index.vue
View File

@@ -26,10 +26,6 @@ export default {
</script> </script>
<style lang="scss"> <style lang="scss">
.home-right-container * {
transition: all 0.5s ease;
}
.home-right-container { .home-right-container {
position: relative; position: relative;
display: flex; display: flex;
@@ -44,29 +40,26 @@ export default {
width: 252px; width: 252px;
height: 282px; height: 282px;
margin-top: -100px; margin-top: -100px;
transition: transform 0.5s ease; // 关键：控制缩放动画
z-index: 9999; z-index: 9999;
/* GPU 加速优化 */
transform: translateZ(0);
backface-visibility: hidden;
will-change: transform, opacity;
/* 动画控制 */
transition: transform 0.5s ease;
&.animateJump { &.animateJump {
animation: balloonJump 1s infinite alternate; animation: balloonJump 1s infinite alternate;
} }
&.shrinkFalse { &.shrinkFalse {
//c重新变回来 animation: scales-1 1s forwards 1 ease-in-out;
animation-name: scales-1;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
} }
&.shrink { &.shrink {
//一次之后停止缩放动画 不会变回来 animation: scales 1s forwards 1 ease-in-out;
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);
margin-top: -100px; margin-top: -100px;
.balloon-pointer { .balloon-pointer {
@@ -90,28 +83,28 @@ export default {
// 跳动动画定义 // 跳动动画定义
@keyframes balloonJump { @keyframes balloonJump {
from { from {
transform: translateY(0); transform: translateY(0) translateZ(0);
} }
to { to {
transform: translateY(-50px); transform: translateY(-50px) translateZ(0);
} }
} }
@keyframes scales { @keyframes scales {
from { from {
transform: scale(1); transform: scale(1) translateZ(0);
} }
to { to {
transform: scale(0.6); transform: scale(0.6) translateZ(0);
} }
} }
@keyframes scales-1 { @keyframes scales-1 {
from { from {
transform: scale(0.6); transform: scale(0.6) translateZ(0);
} }
to { to {
transform: scale(1); transform: scale(1) translateZ(0);
} }
} }
</style> </style>

338
src/views/app/homeComponents/bottom-butterfly/index.vue
View File

@@ -11,7 +11,7 @@
<!--帐篷 跟狗--> <!--帐篷 跟狗-->
<div class="butterfly-2"> <div class="butterfly-2">
<div class="positionR"> <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-title"></div>
<div class="cursor-1 cursor" /> <div class="cursor-1 cursor" />
<div class="cursor-desc"></div> <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/road/road-1.png" alt="" class="road-1" />
<img src="../../../../assets/images/rs/t2-1.png" alt="" class="t2-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="" /> <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-title"></div>
<div class="cursor-2 cursor" /> <div class="cursor-2 cursor" />
<div class="cursor-desc"></div> <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/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/road-3.png" alt="" class="road-3" />
<img src="../../../../assets/images/rs/road/road3-ban.png" alt="" class="road3-ban" /> <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-title"></div>
<div class="cursor-3 cursor" /> <div class="cursor-3 cursor" />
<div class="cursor-desc"></div> <div class="cursor-desc"></div>
@@ -53,13 +53,13 @@
<!-- 学校 年轻人 小树林 --> <!-- 学校 年轻人 小树林 -->
<div class="butterfly-5"> <div class="butterfly-5">
<div class="positionR"> <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-title"></div>
<div class="cursor-4 cursor" /> <div class="cursor-4 cursor" />
<div class="cursor-desc"></div> <div class="cursor-desc"></div>
</div> </div>
<img src="../../../../assets/images/rs/t5-1.png" alt="" class="t5-1" /> <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-title"></div>
<div class="cursor-5 cursor" /> <div class="cursor-5 cursor" />
<div class="cursor-desc"></div> <div class="cursor-desc"></div>
@@ -110,6 +110,9 @@ export default {
methods: { methods: {
cursorBoxClick(index) { cursorBoxClick(index) {
console.log(index) console.log(index)
if (!this.open) {
return false
}
this.$router.push({ this.$router.push({
path: '/pages', path: '/pages',
query: { query: {
@@ -124,6 +127,11 @@ export default {
} }
</script> </script>
<style scoped lang="scss"> <style scoped lang="scss">
.hide {
width: 0;
height: 0;
cursor: unset;
}
.positionR { .positionR {
position: relative; position: relative;
width: 100%; width: 100%;
@@ -135,72 +143,97 @@ export default {
.cursor-box { .cursor-box {
position: absolute; position: absolute;
z-index: 9999; // 提升到最高层 z-index: 9999; // 保持在最上层
opacity: 0; opacity: 0;
width: 160px; width: 160px;
cursor: pointer;
height: 150px; 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 { &:hover {
// .cursor-title 展示
.cursor-title { .cursor-title {
opacity: 1; opacity: 1;
} }
.cursor { .cursor {
background: url('../../../../assets/images/rs/cursor2.png'); background-image: url('../../../../assets/images/rs/cursor2.png');
background-repeat: no-repeat;
background-size: contain;
} }
.cursor-desc { .cursor-desc {
width: 669px;
height: 99px;
opacity: 1; opacity: 1;
transform: translateX(0) scale(1);
} }
} }
.cursor-title { .cursor-title {
width: 176px; width: 176px;
height: 70px; height: 70px;
cursor: pointer;
opacity: 0; opacity: 0;
transition: opacity 0.3s ease-in-out;
pointer-events: none;
} }
.cursor { .cursor {
cursor: pointer;
width: 99px; width: 99px;
height: 113px; height: 113px;
z-index: 50;
position: absolute; position: absolute;
top: 50px; top: 50px;
margin-left: 40px; left: 50%;
background: url('../../../../assets/images/rs/cursor.png'); transform: translateX(-50%);
background-repeat: no-repeat; z-index: 50;
background-size: contain; background: url('../../../../assets/images/rs/cursor.png') no-repeat center / contain;
transition: background-image 0.3s ease-in-out;
pointer-events: none;
} }
.cursor-desc { .cursor-desc {
width: 0; width: 669px;
position: fixed; height: 99px;
position: absolute;
top: -180px;
left: 50%;
transform: translateX(-50%) scale(0.95);
opacity: 0; opacity: 0;
//left: -1050px; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
//top: -180px; pointer-events: none;
background: transparent;
} }
} }
.butterfly-box { .butterfly-box {
position: relative; position: relative;
width: 100%; width: 100%;
//height: 600px; overflow: visible;
//过度
transition: all 3s; /* 启用 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 { .butterfly-1 {
position: absolute; position: absolute;
width: 476px; width: 476px;
height: 176px; height: 176px;
right: -30px; right: -30px;
top: 0; top: 0;
z-index: 2; z-index: 2;
.t1-1 { .t1-1 {
position: absolute; position: absolute;
top: -140px; top: -140px;
@@ -208,104 +241,134 @@ export default {
height: 234px; height: 234px;
left: -60px; left: -60px;
z-index: 1; z-index: 1;
transform: translateZ(0);
} }
} }
// ======================
// 蝴蝶路径容器 - butterfly-2
// ======================
.butterfly-2 { .butterfly-2 {
position: absolute; position: absolute;
width: 866px; width: 866px;
//height: 218px;
top: 30px; top: 30px;
right: 60px; right: 60px;
z-index: 3; z-index: 3;
img { img {
position: absolute; position: absolute;
&.t2-1 { &.t2-1 {
width: 672px; width: 672px;
height: 271px; height: 271px;
top: -70px; top: -70px;
right: -20px; right: -20px;
z-index: 1; z-index: 1;
transform: translateZ(0);
} }
&.road-1 { &.road-1 {
position: absolute;
right: 120px;
width: 256px; width: 256px;
height: 107px; height: 107px;
opacity: 0; right: 120px;
top: 95px; top: 95px;
opacity: 0;
z-index: 1; z-index: 1;
transform: translateZ(0);
} }
&.road-2 { &.road-2 {
position: absolute;
scale: 0.5;
width: 600px; width: 600px;
height: 273px; height: 273px;
scale: 0.5;
z-index: 0; z-index: 0;
opacity: 0; opacity: 0;
transform: translateZ(0);
} }
&.road2-ban { &.road2-ban {
position: absolute;
left: 60px; left: 60px;
opacity: 0; opacity: 0;
top: -30px; top: -30px;
width: 0; width: 0;
transform: translateZ(0);
} }
} }
.box1 {
.box1,
.box2 {
position: absolute; position: absolute;
top: -235px; transform: translateZ(0);
right: 320px;
.cursor-title { .cursor-title {
background: url('../../../../assets/images/rs/4@2x.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
&:hover { &:hover {
.cursor-desc { .cursor-desc {
background: url('../../../../assets/images/new/t1-desc.png'); opacity: 1;
transform: translateX(200px) translateY(-100px) translateZ(0);
}
}
.cursor-desc {
position: absolute;
opacity: 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
left: -600px; transform: translateZ(0);
top: -100px; 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 { .box2 {
position: absolute;
top: -60px; top: -60px;
right: 550px; right: 550px;
.cursor-title { .cursor-title {
background: url('../../../../assets/images/rs/5@2x.png'); background: url('../../../../assets/images/rs/2@2x.png') no-repeat center / cover;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
} }
&:hover { &:hover {
.cursor-desc { .cursor-desc {
background: url('../../../../assets/images/new/t2-desc.png'); background-image: url('../../../../assets/images/new/t2-desc.png');
background-repeat: no-repeat; transform: translate(-830px, 150px) translateZ(0);
background-size: contain;
background-position: center;
left: -600px;
top: -90px;
} }
} }
} }
} }
// ======================
// 蝴蝶路径容器 - butterfly-3
// ======================
.butterfly-3 { .butterfly-3 {
position: absolute; position: absolute;
background: url('../../../../assets/images/rs/t3.png'); background: url('../../../../assets/images/rs/t3.png') no-repeat;
width: 520px;
//height: 137px;
background-repeat: no-repeat;
background-size: cover; background-size: cover;
width: 520px;
top: 94px; top: 94px;
right: 505px; right: 505px;
z-index: 2; z-index: 2;
transform: translateZ(0);
.t3-1 { .t3-1 {
position: absolute; position: absolute;
width: 386px; width: 386px;
@@ -313,16 +376,19 @@ export default {
top: -50px; top: -50px;
right: 60px; right: 60px;
z-index: 3; z-index: 3;
transform: translateZ(0);
} }
.road-3 { .road-3 {
position: absolute; position: absolute;
width: 69px; width: 69px;
//height: 167px;
right: -100px; right: -100px;
top: 20px; top: 20px;
opacity: 0; opacity: 0;
z-index: 0; z-index: 0;
transform: translateZ(0);
} }
.road3-ban { .road3-ban {
position: absolute; position: absolute;
left: 0; left: 0;
@@ -330,53 +396,51 @@ export default {
width: 520px; width: 520px;
height: 196px; height: 196px;
opacity: 0; opacity: 0;
transform: translateZ(0);
} }
.box3 { .box3 {
position: absolute; position: absolute;
top: -10px; top: -10px;
left: 0px; left: 0px;
.cursor-title { .cursor-title {
background: url('../../../../assets/images/rs/3@2x.png'); background: url('../../../../assets/images/rs/3@2x.png') no-repeat center / cover;
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;
} }
&:hover { &:hover {
.cursor-desc { .cursor-desc {
background: url('../../../../assets/images/new/t3-desc.png'); 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-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
top: -275px; transform: translateZ(0);
left: -574px; pointer-events: none;
}
} }
} }
} }
// ======================
// 蝴蝶路径容器 - butterfly-4
// ======================
.butterfly-4 { .butterfly-4 {
position: absolute; position: absolute;
background: url('../../../../assets/images/rs/t4.png'); background: url('../../../../assets/images/rs/t4.png') no-repeat;
//width: 453px;
width: 482px;
//height: 170px;
background-repeat: no-repeat;
background-size: cover; background-size: cover;
width: 482px;
top: 180px; top: 180px;
right: 313px; right: 313px;
z-index: 3; z-index: 3;
transform: translateZ(0);
.t4-1 { .t4-1 {
position: absolute; position: absolute;
width: 381px; width: 381px;
@@ -384,89 +448,114 @@ export default {
top: -77px; top: -77px;
right: 8px; right: 8px;
z-index: 1; z-index: 1;
transform: translateZ(0);
} }
.road-4 { .road-4 {
position: absolute;
width: 69px; width: 69px;
height: 62px; height: 62px;
position: absolute;
z-index: 0; z-index: 0;
left: 150px; left: 150px;
top: 138px; top: 138px;
opacity: 0; opacity: 0;
transform: translateZ(0);
} }
.road-4-1 { .road-4-1 {
position: absolute; position: absolute;
width: 482px; width: 482px;
right: -35px; right: -35px;
top: 5px; top: 5px;
opacity: 0; opacity: 0;
transform: translateZ(0);
} }
} }
// ======================
// 蝴蝶路径容器 - butterfly-5
// ======================
.butterfly-5 { .butterfly-5 {
position: absolute; position: absolute;
//background: url('../../../../assets/images/rs/t5.png');
width: 473px; width: 473px;
//height: 291px;
background-repeat: no-repeat;
background-size: cover;
top: 225px; top: 225px;
right: 550px; right: 550px;
z-index: 3; z-index: 3;
transform: translateZ(0);
.t5-1 { .t5-1 {
position: absolute; position: absolute;
width: 473px; width: 473px;
height: 291px; height: 291px;
//width: 440px;
//height: 155px ;
top: -65px; top: -65px;
right: 65px; right: 65px;
z-index: 1; z-index: 1;
transform: translateZ(0);
} }
.box4 {
position: absolute; .box4,
top: -100px;
right: 30px;
.cursor-title {
background: url('../../../../assets/images/rs/2@2x.png');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
&:hover {
.cursor-desc {
background: url('../../../../assets/images/new/t4-desc.png');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
left: -575px;
top: -485px;
}
}
}
.box5 { .box5 {
position: absolute; position: absolute;
top: 50px; transform: translateZ(0);
left: -30px;
.cursor-title { .cursor-title {
background: url('../../../../assets/images/rs/1@2x.png');
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
background-position: center; background-position: center;
} }
&:hover { &:hover {
.cursor-title {
background: url('../../../../assets/images/rs/5@2x.png') no-repeat center / cover;
}
.cursor-desc { .cursor-desc {
background: url('../../../../assets/images/new/t5-desc.png'); opacity: 1;
transform: translate(-620px, -365px) translateZ(0);
}
}
.cursor-desc {
position: absolute;
opacity: 0;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
background-position: center; background-position: center;
top: -495px; transform: translateZ(0);
left: -580px; 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 {
top: 50px;
left: -30px;
&:hover {
.cursor-desc {
background: url('../../../../assets/images/new/t5-desc.png') no-repeat center / contain;
} }
} }
} }
} }
// ======================
// 蝴蝶路径容器 - butterfly-6
// ======================
.butterfly-6 { .butterfly-6 {
position: absolute; position: absolute;
bottom: 60px; bottom: 60px;
@@ -480,23 +569,30 @@ export default {
top: -10px; top: -10px;
left: -1471px; left: -1471px;
z-index: 1; z-index: 1;
transform: translateZ(0);
} }
} }
// ======================
// 蝴蝶路径容器 - butterfly-7
// ======================
.butterfly-7 { .butterfly-7 {
position: absolute; position: absolute;
width: 389px; width: 389px;
right: 10px; right: 10px;
//height: 520px;
top: -20px; top: -20px;
z-index: 5; z-index: 5;
transform: translateZ(0);
.t7-1 { .t7-1 {
width: 100%; width: 100%;
transform: translateZ(0);
} }
.t7-ban { .t7-ban {
//width: 100%;
right: 10px; right: 10px;
top: -20px; top: -20px;
transform: translateZ(0);
} }
} }
} }

1
vue.config.js
View File

@@ -28,6 +28,7 @@ module.exports = {
productionSourceMap: false, productionSourceMap: false,
devServer: { devServer: {
port: port, port: port,
host: '0.0.0.0',
open: true, open: true,
overlay: { overlay: {
warnings: false, warnings: false,