Skip to content

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

1

parent ddfb6557
Hide whitespace changes
Inline Side-by-side
Showing with 127 additions and 5 deletions
src/view/homepage.vue
View file @ fc165db2
......@@ -9,7 +9,7 @@
</div>
<div class="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' : '']"
@click="choiceModule(item.id)">
<div class="info-description">
......@@ -17,13 +17,23 @@
<div v-text="item.eg"></div>
</div>
</div>
<div style="position: absolute;top:50%;right: 2.3%;" :id="'left'+index"></div>
</div>
</div>
<div class="center-content">
<div class="pulse"></div>
<div class="pulse1"></div>
<div class="pulse2"></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 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' : '']"
@click="choiceModule(item.id)">
<div class="info-description">
......@@ -31,6 +41,7 @@
<div v-text="item.eg"></div>
</div>
</div>
<div style="position: absolute;top:50%;left: 6.1%;" :id="'right'+index"></div>
</div>
</div>
</div>
......@@ -63,8 +74,59 @@ export default {
this.isSelected = id;
this.$store.commit("activeIndex", id-1);
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>
......@@ -133,6 +195,7 @@ export default {
background-image: url('../assets/img/homepage/rightModule.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
.module-info {
width: 100%;
......@@ -178,7 +241,7 @@ export default {
display: flex;
justify-content: center;
align-items: center;
position: relative;
.center-img {
width: 500px;
max-width: 500px;
......@@ -186,7 +249,7 @@ export default {
background-image: url('../assets/img/homepage/6.png');
background-size: 100% 100%;
background-repeat: no-repeat;
animation: roate 15s infinite linear;
animation: roate 20s infinite linear;
}
@keyframes roate {
......@@ -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 {
width: 30%;
......@@ -221,6 +342,7 @@ export default {
background-image: url('../assets/img/homepage/rightModule.png');
background-size: 100% 100%;
background-repeat: no-repeat;
position: relative;
.module-info {
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