| | |
| | | <template> |
| | | <div class="drag-box" :style="{ borderColor: bcColor }"> |
| | | <div class="title-box"> |
| | | <p class="text" style="text-indent:2em !important"><span class="hs1">◇</span>{{ titileText }}</p> |
| | | <span class="svg-btn t0" @mouseenter="mouseenterTitle" @mouseleave="mouseleaveTitle"> |
| | | <p class="text" style="text-indent: 2em !important"> |
| | | <span class="hs1">◇</span>{{ titileText }} |
| | | </p> |
| | | <span |
| | | class="svg-btn t0" |
| | | @mouseenter="mouseenterTitle" |
| | | @mouseleave="mouseleaveTitle" |
| | | > |
| | | <p class="p-title" v-if="ishowTitle">请拖拽答案到括号里吧</p> |
| | | <svg |
| | | <svg |
| | | t="1719309984490" |
| | | class="icon" |
| | | viewBox="0 0 1024 1024" |
| | |
| | | p-id="6317" |
| | | ></path> |
| | | </svg> |
| | | |
| | | </span> |
| | | </div> |
| | | <div |
| | |
| | | spaceList: [], |
| | | submitState: false, |
| | | isLift: false, |
| | | ishowTitle:false |
| | | ishowTitle: false, |
| | | }; |
| | | }, |
| | | mounted() {}, |
| | |
| | | }, |
| | | // 鼠标移动 |
| | | mousemove(e) { |
| | | if (this.isLift) { |
| | | this.moveDom.style.position = ""; |
| | | this.moveDom.style.left = "0px"; |
| | | this.moveDom.style.top = "0px"; |
| | | } |
| | | if (!this.moveDom) return false; |
| | | this.moveDom.style.position = "absolute"; |
| | | // 限制在此题范围内拖动 |
| | |
| | | const moveY = e.y - this.parentY + 40; |
| | | this.moveDom.style.left = moveX + "px"; |
| | | this.moveDom.style.top = moveY + "px"; |
| | | this.moveDom.style.zIndex = "99999999"; |
| | | // 如果还有有空格 |
| | | if (this.spaceList.length) { |
| | | for (let index = 0; index < this.spaceList.length; index++) { |
| | |
| | | return flag; |
| | | }, |
| | | mouseenterTitle() { |
| | | this.ishowTitle = true |
| | | console.log(this.ishowTitle ); |
| | | this.ishowTitle = true; |
| | | console.log(this.ishowTitle); |
| | | }, |
| | | mouseleaveTitle() { |
| | | this.ishowTitle = false |
| | | console.log(this.ishowTitle ); |
| | | } |
| | | this.ishowTitle = false; |
| | | console.log(this.ishowTitle); |
| | | }, |
| | | }, |
| | | }; |
| | | </script> |
| | |
| | | text-indent: 0 !important; |
| | | position: absolute; |
| | | top: -33px; |
| | | background-color:#8fae34 ; |
| | | background-color: #8fae34; |
| | | padding: 0 4px; |
| | | white-space: nowrap; |
| | | border-radius: 4px; |
| | |
| | | margin-bottom: 20px; |
| | | p { |
| | | margin: 0; |
| | | text-indent: 2em ; |
| | | text-indent: 2em; |
| | | } |
| | | } |
| | | /** 解析 */ |