Vue使⽤JQuery和svg.js实现连线题⽂字、图⽚、⾳频双列与
三列
使⽤先下载jquery与svg.js
npm i --save jquery
npm i --save svg.js
template部分
<div id="draw" class="draw-container">
<div class="btn-group">
<p href="javascript:;" id="j-reset">重置</p>
<p id="j-submit">确认</p>
</div>
<div id="result-dadan"></div>
<ul class="question-list data-list">
</ul>
<ul class="answer-list data-list">
</ul>
<ul class="audio-list data-list">
</ul>
</div>
css部分
.demo1{
width:760px;
height:706px;
margin:0 auto;
}
.show {
position:relative;
width:500px;
margin:40px 100px;
cursor:pointer;
}
.pBottom {
width: 1000px;
}
.canvas{
position:absolute;
left:0px;
top:0px;
z-index:-1;
}
.backcanvas{
position:absolute;
left:0px;
top:0px;
z-index:-2;
}
.showleft{
float:left;
width:150px;
}
.showright {
float:right;
width:150px;
}
svg和canvas的区别.showtop, .showbottom {    float: left;
}
.showtop {
margin-top: 20px;
}
.showbottom {
margin-top: 120px;
margin-bottom: 20px; }
.show .showitem{
width:130px;
height:60px;
display:block;
margin:10px 0;
background:#0CF;
border-radius:15px;
padding:10px;
color:#fff;
}
.pBottom .showitem {    float: left;
margin: 0 10px;
}
.show span.addstyle {
background:#F96;
}
.tools{
position:absolute;
height:50px;
width: calc( 100% + 20px );    position:absolute;
top:-50px;
left:-10px;
}
.tools div{
float:right;
height:50px;
padding:0 5px;
margin:0 5px;
color:#0C9;
cursor:pointer;
line-height:30px;
}
.tools div:hover{
color:#C30;
}
.showimg{
position:absolute;
left:510px;
top:0px; width:500px; }
.container {
margin: 0 auto;
max-width: 960px;
height: 75%;
/* background: #fff; */ }
.draw-container {
position: relative;
height: 100%;
/* background: #fff; */ }
.
btn-group {
position: absolute;
bottom: 10%;
width: 100%;
height: 50px;
line-height: 50px;
padding: 0 20px;
text-align: right;
display: flex;
justify-content: center; }
.btn-group p:hover{
color: #66b1ff;
}
#j-reset{
width: 100px;
height: 85%;
color: #4e4f50;
background-color: #ecf0ff;
border: 1px solid rgb(160, 160, 160);
display: flex;
justify-content: center;
align-items: center;
border-radius: 5%;
cursor: pointer;
}
#j-submit{
width: 100px;
height: 85%;
color: white;
background-image: linear-gradient(to top, #1f96f7 , #2c64fa);    display: flex;
justify-content: center;
align-items: center;
border-radius: 5%;
cursor: pointer;
margin-left: 3%;
}
p.btn-submit {
color: #67c23a
}
.draw-container ul {
margin-top: 4%;
}
.data-list {
position: absolute;
}
.question-list {
left: 15%;
height: 65%;
display: flex;
flex-direction: column;

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。