文章目录
一、效果图
因为是图片，所以不能展示动画效果，你们要看具体效果，就复制下面的代码到自己的项目里面去
二、直接上代码
<template>
<div class="part">
<div class="line_box">
<svg height="505" width="450">
<defs>
<linearGradient id="lineGradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="#70e9ff"></stop>
<stop offset="100%" stop-color="#07b6ff"></stop>
</linearGradient>
</defs>
<image id="line_img" width="37" height="33" x="210" y="165" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAhCAYAAABeD2IVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVBSURBVHgBpZhPixxFFMBf9fT823WibMCowYAfwJvgxcN6MqCIizmq4EWyK6gHwVNOi4IXwc3s6kFBEMRDQA/iOZ7EHP0EkU3UUXbdzZid2ZnpLt979V53dXdN74x5UFRNd/359atX770aAwuLNfDAYuxCvWA5AHP22OJEc9r+NLZukRCMKdTrXv/hAlA9D+Rm1i7XFTgzByiHURCCGEl7IvWsBiyWRVtSd7FWSAcYgHNgISgzF+YEogzmApZpDVQTFxtgUbgVSGvgbADqDCDSDIGcR6iptBMpJKkHF8kCDawbAkWAB9iL2qS5M8BimCcKRNohiDWsRwIyxTaB9DwwXwhmiCVioBTHWziH/Q6lDaK1Xtj4fU3lWvI1NMapCegUS8JainArHJQWngJrI4tEAkTlhDWUMmgb60PRGG2naqygrXma8rdMgVQ7K6w5AoxwUsN1VVMpzmG5XgGyRdKNA17Dcg9H6WEJaCsqnDrVEonakNoPAXVwmQmWlpQJfnPCwI2s0G96nvdp8LhU5vHnVTNZLx64uLqVkB/5qQe0wotFvNBUNNXiDTKdKB87NryRluegcS3WOp0+i6ZgxSZz19LNNGVkCyEObp1+zUiMmr50xrXbxhlrIeogmMWFrc2h2ghkEHXcFBMg6TCkxRqpwR0Emv+At9mUtzCuaEnF11IqtpM4oE4TGhYh0SIbYt7G07dFg7DtGSQGwcZTcIafiOGn2QkO+TjWVq4ptSc1cJKkuG0fvw8XX7kMV45QW8dY9g9hsPka/FCG2vgQXopSdK9DSJP7kN7+FW7c+hnuIojlbZyIS5jJes6uslA030/NSscd2x98BIONF6Bz6SK8e5QArD4OsPsdPPX2FfhMh735OVxtPQRbkyP8Jpx9eAKf3voJfXvsaTT1PjwgUfDphZK37sqEbTBPPw87d+7Cde362JOwuf0NbKFtRVtfwuYjT8CWvvv3EPrf92GHxvH4rvehiYSqhaEGUJv3PHcZ+r/tw24Gdgmubv8IX5xHQH02PEAlfpLDLyMKZb3UwknD884jOean7mRR++UXob9/G/a0e2cVntH28QD2blyDPshJpHE8fiTGrvMPKqmN9aGc9CRgxlJ0AiNt9UFTSHGx9I0N6P/uaYzk6A/Y+/Y96NN76peN0fH6obpGywvOJU2FpSGxK+ITk5BfxiOeGPLjdOTRf7/zKlz/+44D++dP2P3qLdih5/we+1F/9ucTdihuvka9eRQD8joOo+N5jPXDOHSE9VjChIaXmQsl7KtomabTwevb8OzX1+CXTJPyAQwUc6xLcHyC8yU4X4JGn+I6CWvqUWzfZDfBATkMpSnLOZzylAOyA5sKmDhSAiMg6+VTanMZkGqpKUBtLikH5WKmkEEV/RQZ2zpAlmlScjbz8qJU4lhbFqZ34iqy1EWNOhagU6mbDOcSv6a3fb3qIfOhbLadXYlVFJsoOaMJ7+PzVQD2yi6O5WHDd4R6QAhkLDBuvKtjLwvtQvC2U/boDqwnx3cm2eKavFWwSMAS0EuBc4rqPkgIqiVGrUB5kgelU1fQVPniUM0+ybY0N9fskwBWvUy0LLEHE8mWtRnMaakm6wxBQQHsL1nQz9P9S4NmED3w74N5KuxfHvw0mMSduOBtxts+emBN3gEXooEuE005mt+TLdXrlQJOPC21AQq3GL1mdaB6kwkAlTRVozGnger9j2RWCqz+XY9kifteDVQFDApwZcA66ZZCSPBmfOZ/CUEwqACSrC8AtcT/B6GFYAm4RcfXxDezSOz7v1IHvNh/USH5D8fM0/nzbT+DAAAAAElFTkSuQmCC"></image>
<image id="line_img" width="37" height="33" x="210" y="295" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACUAAAAhCAYAAABeD2IVAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAVBSURBVHgBpZhPixxFFMBf9fT823WibMCowYAfwJvgxcN6MqCIizmq4EWyK6gHwVNOi4IXwc3s6kFBEMRDQA/iOZ7EHP0EkU3UUXbdzZid2ZnpLt979V53dXdN74x5UFRNd/359atX770aAwuLNfDAYuxCvWA5AHP22OJEc9r+NLZukRCMKdTrXv/hAlA9D+Rm1i7XFTgzByiHURCCGEl7IvWsBiyWRVtSd7FWSAcYgHNgISgzF+YEogzmApZpDVQTFxtgUbgVSGvgbADqDCDSDIGcR6iptBMpJKkHF8kCDawbAkWAB9iL2qS5M8BimCcKRNohiDWsRwIyxTaB9DwwXwhmiCVioBTHWziH/Q6lDaK1Xtj4fU3lWvI1NMapCegUS8JainArHJQWngJrI4tEAkTlhDWUMmgb60PRGG2naqygrXma8rdMgVQ7K6w5AoxwUsN1VVMpzmG5XgGyRdKNA17Dcg9H6WEJaCsqnDrVEonakNoPAXVwmQmWlpQJfnPCwI2s0G96nvdp8LhU5vHnVTNZLx64uLqVkB/5qQe0wotFvNBUNNXiDTKdKB87NryRluegcS3WOp0+i6ZgxSZz19LNNGVkCyEObp1+zUiMmr50xrXbxhlrIeogmMWFrc2h2ghkEHXcFBMg6TCkxRqpwR0Emv+At9mUtzCuaEnF11IqtpM4oE4TGhYh0SIbYt7G07dFg7DtGSQGwcZTcIafiOGn2QkO+TjWVq4ptSc1cJKkuG0fvw8XX7kMV45QW8dY9g9hsPka/FCG2vgQXopSdK9DSJP7kN7+FW7c+hnuIojlbZyIS5jJes6uslA030/NSscd2x98BIONF6Bz6SK8e5QArD4OsPsdPPX2FfhMh735OVxtPQRbkyP8Jpx9eAKf3voJfXvsaTT1PjwgUfDphZK37sqEbTBPPw87d+7Cde362JOwuf0NbKFtRVtfwuYjT8CWvvv3EPrf92GHxvH4rvehiYSqhaEGUJv3PHcZ+r/tw24Gdgmubv8IX5xHQH02PEAlfpLDLyMKZb3UwknD884jOean7mRR++UXob9/G/a0e2cVntH28QD2blyDPshJpHE8fiTGrvMPKqmN9aGc9CRgxlJ0AiNt9UFTSHGx9I0N6P/uaYzk6A/Y+/Y96NN76peN0fH6obpGywvOJU2FpSGxK+ITk5BfxiOeGPLjdOTRf7/zKlz/+44D++dP2P3qLdih5/we+1F/9ucTdihuvka9eRQD8joOo+N5jPXDOHSE9VjChIaXmQsl7KtomabTwevb8OzX1+CXTJPyAQwUc6xLcHyC8yU4X4JGn+I6CWvqUWzfZDfBATkMpSnLOZzylAOyA5sKmDhSAiMg6+VTanMZkGqpKUBtLikH5WKmkEEV/RQZ2zpAlmlScjbz8qJU4lhbFqZ34iqy1EWNOhagU6mbDOcSv6a3fb3qIfOhbLadXYlVFJsoOaMJ7+PzVQD2yi6O5WHDd4R6QAhkLDBuvKtjLwvtQvC2U/boDqwnx3cm2eKavFWwSMAS0EuBc4rqPkgIqiVGrUB5kgelU1fQVPniUM0+ybY0N9fskwBWvUy0LLEHE8mWtRnMaakm6wxBQQHsL1nQz9P9S4NmED3w74N5KuxfHvw0mMSduOBtxts+emBN3gEXooEuE005mt+TLdXrlQJOPC21AQq3GL1mdaB6kwkAlTRVozGnger9j2RWCqz+XY9kifteDVQFDApwZcA66ZZCSPBmfOZ/CUEwqACSrC8AtcT/B6GFYAm4RcfXxDezSOz7v1IHvNh/USH5D8fM0/nzbT+DAAAAAElFTkSuQmCC"></image>
<polyline stroke="#07b6ff" points="110,110 110,140 229,140" class="edge"></polyline>
<polyline stroke="#07b6ff" points="340,110 340,140 229,140" class="edge"></polyline>
<polyline stroke="#07b6ff" points="229,140 229,172" class="edge"></polyline>
<polyline stroke="#07b6ff" points="229,240 229,300" class="edge"></polyline>
</svg>
</div>
<div class="step step1">{{ dataList[0].name }}</div>
<div class="step step2">{{ dataList[1].name }}</div>
<div class="step step3">{{ dataList[2].name }}</div>
<div class="step step4">{{ dataList[3].name }}</div>
<div @click="pgOpenWin" class="step5">开始评估</div>
</div>
</template>
<script>
export default {
name: 'part1_2',
components: {},
data () {
return {
dataList: [
{name: '设置资金'},
{name: '资金分配'},
{name: '模型分析'},
{name: '预估结果'},
],
}
},
watch: {},
mounted () {
this.init()
},
methods: {
// 初始化加载
async init () {
this.$nextTick(() => {
})
},
//开始评估按钮
pgOpenWin(){
// this.$emit('pgOpenWin')
},
},
}
</script>
<style scoped lang="less" type="text/less">
.part {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
.line_box{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
svg{
position: absolute;
top: 0px;
left: 0px;
polyline {
animation: dash 15000s linear infinite;
}
@keyframes dash {
to {
stroke-dashoffset: -600000;
}
}
}
.edge {
stroke-width: 2.5px;
stroke-linecap: round;
stroke-dashoffset: 0;
stroke-dasharray: 8;
stroke-opacity: 1;
fill: none;
}
.edge.gray {
stroke: #b2cdeb;
}
}
.step{
width: 164px;
height: 42px;
line-height: 42px;
text-align: center;
font-family: SourceHanSansCN-Medium;
font-size: 18px;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #fefeff;
position: absolute;
text-shadow-shadow: 0px 1px 10px rgba(6, 48, 113, 1);
}
.step1,.step2,.step3,.step4,.step5,.step6,.step7,.step8,.step9,.step10,.step11{
position: absolute;
background: url("../img/22.png");
//background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKQAAAA0CAYAAAAE05MCAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyNpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDYuMC1jMDAyIDc5LjE2NDQ2MCwgMjAyMC8wNS8xMi0xNjowNDoxNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjIgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOkU3MzI4NEI1MTc1MzExRUY4Q0E0Q0FGQThCQzBDRDgzIiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOkU3MzI4NEI2MTc1MzExRUY4Q0E0Q0FGQThCQzBDRDgzIj4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6RTczMjg0QjMxNzUzMTFFRjhDQTRDQUZBOEJDMENEODMiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6RTczMjg0QjQxNzUzMTFFRjhDQTRDQUZBOEJDMENEODMiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4cmyICAAACZklEQVR42uzdQUvbYBjA8adNqggbzIOOfZzuNEdyHMObDD3K8Au4dew85obIPoGX3dIxdtGPM2wPilS3Vmv3PNpoUt9GahOr7P+DYEhrD+HP8/KiNKWtw544vNPjvQDFsb5qgxf9ITG+0mNejyb3DQWwtnb657WsIOMYq8SIAjX0eO6K0nfFuL5NjBjdh8Xxo/SJEROelLYa78ZR+jfF+G1FAv0Rcu+Qg2ivJfWBa81klH5/t3O+gSmX0u/cWpbg976En36ItP5yN3F7j2dE1l5K+GxWJCPKhp+4IOXy1Ts231zE+PmnyHEn/RowqqO2yIa29HYhM8r0LtvrR/dlSWM8kPDrL5E/navrwDhssFlTqy80yifOKNNBJpbscFN/8bidugaMH6U2ZW19fH2+L8kOMjkJmYwoirU1zNAgiRGTQJC4v0H6nvscYEKCIP2y+xxgyQZBEiRYsgEmJB5EkBXPfQ4wIUGQBAmWbIAJCSYkwIQEExIgSLBkA0xI/F8Tkn+uAEs2wJINJiRAkGBTAzAhwYQECg7S89znABMSBMlXqeDeBmmbml6PG4T8lUqjB1mfmZKgc6JRcv+QZ4x6TFUuGrsxyPiL7dunEk3rK9MVCU66RIn8YrQ/SeuErO+1JMoKck6PppcYpaddiWzZ1g8IumfcTIzPVuCMGOfiIO2RXvbQmqpOyNSDk856EtmX3muYAbcTOciK0RqsxQ9OMrvNI6k+fXTtaV5R/wAyaWy3Ecf43VqMl+zLKPVDeRIs7koqxsFNzWWUwuOJMYEYr+2yiRKTjNEVZDLKBvcNBaoNxmj+CTAATzSa/mRIA9oAAAAASUVORK5CYII=") no-repeat center center;
background-size: 100% 100%;
}
.step1{
top: 60px;
left: 30px;
}
.step2{
top: 60px;
right: 30px;
}
.step3{
top: 190px;
left: calc((100% - 164px) / 2);
}
.step4{
top: 320px;
left: calc((100% - 164px) / 2);
}
.step5{
width: 164px;
height: 42px;
line-height: 42px;
text-align: center;
font-size: 18px;
font-family: SourceHanSansCN-Medium;
font-weight: normal;
font-stretch: normal;
letter-spacing: 0px;
color: #fff;
background: url("../img/21.png");
background-size: 100% 100%;
position: absolute;
left: calc((100% - 164px) / 2);
bottom: 50px;
cursor: pointer;
}
}
</style>
代码里面的图片我放在下面，你们也可以用其他好看的图片：
