Skip to content

X
xxx_phase2_web
Commit fc165db2 authored by 高飞's avatar 高飞
Browse files
Options

1

parent ddfb6557
Show whitespace changes
Inline Side-by-side
Showing with 127 additions and 5 deletions
src/view/homepage.vue
View file @ fc165db2
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
</div> </div>
<div class="content"> <div class="content">
<div class="left-content"> <div class="left-content">
<div class="leftModule bk-homeapge-animation" v-for="item in modules.leftModule"> <div class="leftModule bk-homeapge-animation" v-for="(item,index) in modules.leftModule">
<div :class="['module-info', isSelected == item.id ? 'selectedModule' : '']" <div :class="['module-info', isSelected == item.id ? 'selectedModule' : '']"
@click="choiceModule(item.id)"> @click="choiceModule(item.id)">
<div class="info-description"> <div class="info-description">
...@@ -17,13 +17,23 @@ ...@@ -17,13 +17,23 @@
<div v-text="item.eg"></div> <div v-text="item.eg"></div>
</div> </div>
</div> </div>
<div style="position: absolute;top:50%;right: 2.3%;" :id="'left'+index"></div>
</div> </div>
</div> </div>
<div class="center-content"> <div class="center-content">
<div class="pulse"></div>
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="center-img"></div> <div class="center-img"></div>
<div style="position: absolute;top:48%;left: calc(50% - 240px);" id="left11"></div>
<div style="position: absolute;top:52%;left: calc(50% - 240px);" id="left22"></div>
<div style="position: absolute;top:56%;left: calc(50% - 240px);" id="left33"></div>
<div style="position: absolute;top:48%;right: calc(50% - 250px);" id="right11"></div>
<div style="position: absolute;top:52%;right: calc(50% - 250px);" id="right22"></div>
<div style="position: absolute;top:56%;right: calc(50% - 250px);" id="right33"></div>
</div> </div>
<div class="right-content"> <div class="right-content">
<div class="rightModule bk-homeapge-animation" v-for="item in modules.rightModule"> <div class="rightModule bk-homeapge-animation" v-for="(item,index) in modules.rightModule">
<div :class="['module-info', isSelected == item.id ? 'selectedModule' : '']" <div :class="['module-info', isSelected == item.id ? 'selectedModule' : '']"
@click="choiceModule(item.id)"> @click="choiceModule(item.id)">
<div class="info-description"> <div class="info-description">
...@@ -31,6 +41,7 @@ ...@@ -31,6 +41,7 @@
<div v-text="item.eg"></div> <div v-text="item.eg"></div>
</div> </div>
</div> </div>
<div style="position: absolute;top:50%;left: 6.1%;" :id="'right'+index"></div>
</div> </div>
</div> </div>
</div> </div>
...@@ -63,8 +74,59 @@ export default { ...@@ -63,8 +74,59 @@ export default {
this.isSelected = id; this.isSelected = id;
this.$store.commit("activeIndex", id-1); this.$store.commit("activeIndex", id-1);
this.$router.push("/"); this.$router.push("/");
} }
},
activated() {
this.$nextTick(() => {
const styleOption = {
startPlugColor: '#1a9ee0',
endPlugColor: '#00cda0',
gradient: true,
size:2,
dash: {animation: true},
endPlug:'behind',
}
const styleOption1 = {
...styleOption,
startSocket:'right',
endSocket:'left'
}
const styleOption2 = {
...styleOption,
startSocket:'left',
endSocket:'right'
}
new LeaderLine( {
...styleOption1,
start:document.getElementById('left0'),
end:document.getElementById('left11'),
});
new LeaderLine( {
...styleOption1,
start:document.getElementById('left1'),
end:document.getElementById('left22'),
});
new LeaderLine( {
...styleOption1,
start:document.getElementById('left2'),
end:document.getElementById('left33'),
});
new LeaderLine( {
...styleOption2,
start:document.getElementById('right0'),
end:document.getElementById('right11'),
});
new LeaderLine( {
...styleOption2,
start:document.getElementById('right1'),
end:document.getElementById('right22'),
});
new LeaderLine( {
...styleOption2,
start:document.getElementById('right2'),
end:document.getElementById('right33'),
});
})
} }
} }
</script> </script>
...@@ -133,6 +195,7 @@ export default { ...@@ -133,6 +195,7 @@ export default {
background-image: url('../assets/img/homepage/rightModule.png'); background-image: url('../assets/img/homepage/rightModule.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative;
.module-info { .module-info {
width: 100%; width: 100%;
...@@ -178,7 +241,7 @@ export default { ...@@ -178,7 +241,7 @@ export default {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
position: relative;
.center-img { .center-img {
width: 500px; width: 500px;
max-width: 500px; max-width: 500px;
...@@ -186,7 +249,7 @@ export default { ...@@ -186,7 +249,7 @@ export default {
background-image: url('../assets/img/homepage/6.png'); background-image: url('../assets/img/homepage/6.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
animation: roate 15s infinite linear; animation: roate 20s infinite linear;
} }
@keyframes roate { @keyframes roate {
...@@ -207,6 +270,64 @@ export default { ...@@ -207,6 +270,64 @@ export default {
} }
} }
} }
.pulse {
position: absolute;
width: 500px;
height: 500px;
border: 1px solid #3399ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 5s ease-out;
-moz-animation: warn 5s ease-out;
animation: warn 5s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #50a2f5; /* 阴影效果 */
}
.pulse1 {
position: absolute;
width: 500px;
height: 500px;
border: 1px solid #50a8ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 7s ease-out;
-moz-animation: warn 7s ease-out;
animation: warn 7s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
}
.pulse2 {
position: absolute;
width: 500px;
height: 500px;
border: 1px solid #50a8ff;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
z-index: 1;
opacity: 0;
-webkit-animation: warn 9s ease-out;
-moz-animation: warn 9s ease-out;
animation: warn 9s ease-out;
-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;
animation-iteration-count: infinite;
box-shadow: 1px 1px 30px #3399ff; /* 阴影效果 */
}
@keyframes warn {
from { opacity:0.5; transform:scale(0); }
to { opacity:0; transform:scale(1); }
}
.right-content { .right-content {
width: 30%; width: 30%;
...@@ -221,6 +342,7 @@ export default { ...@@ -221,6 +342,7 @@ export default {
background-image: url('../assets/img/homepage/rightModule.png'); background-image: url('../assets/img/homepage/rightModule.png');
background-size: 100% 100%; background-size: 100% 100%;
background-repeat: no-repeat; background-repeat: no-repeat;
position: relative;
.module-info { .module-info {
width: 100%; width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment