连线题，合并

闫增涛

2024-06-03 713e5f5c012eb510b768d4f75d6aa1e2631e649b

连线题，合并

 src/books/English/assets/main.less

@@ -651,7 +651,7 @@
  // 自定义内容
  .page-box {
    box-sizing: border-box;
    min-height: 1128px !important;
    min-height: 1128px;
    margin-bottom: 20px;
    box-shadow: 0 3px 6px 1px #00000029;
    background-color: #fff;

 src/books/English/view/components/header.vue

@@ -1,16 +1,16 @@
<template>
  <div class="chapter" num="1">
    <!-- <div class="page-box">
    <div class="page-box">
      <matching :rawData="rawData" :item="question" :value="value"></matching>
    </div> -->
    </div>
    <!--  -->
    <div class="page-box mt-20" page="1">
    <div class="page-box mt-20" page="1" style="min-height: auto">
      <div v-if="showPageList.indexOf(1) > -1">
        <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
      </div>
    </div>
    <!-- 1 -->
    <div class="page-box" page="2">
    <div class="page-box" page="2" style="min-height: auto">
      <div v-if="showPageList.indexOf(2) > -1">
        <img class="img-0" alt="" src="../../assets/images/SMY.jpg" />
      </div>
@@ -191,6 +191,7 @@
        </div>
      </div>
    </div>

  </div>
</template>


 src/books/childHealth/assets/main.less

@@ -451,7 +451,7 @@
  }
  .page-box {
    box-sizing: border-box;
    min-height: 1150px !important;
    min-height: 1150px ;
    margin-bottom: 20px;
    box-shadow: 0 3px 6px 1px #00000029;
    background-color: #fff;

 src/books/childHealth/view/content/components/header.vue

@@ -1,12 +1,12 @@
<template>
  <div class="chapter" num="1">
    <!-- 封面 -->
    <div class="page-box cover" page="1">
    <div class="page-box cover" page="1" style="min-height:auto">
      <div v-if="showPageList.indexOf(1) > -1">
        <img src="../../../assets/images/Covers.jpg" alt="" />
      </div>
    </div>
    <div class="page-box cover" page="2">
    <div class="page-box cover" page="2" style="min-height:auto">
      <div v-if="showPageList.indexOf(2) > -1">
        <img src="../../../assets/images/Cover.jpg" alt="" />
      </div>

 src/books/embedded/assets/main.less

@@ -601,7 +601,7 @@
  // 自定义内容
  .page-box {
    box-sizing: border-box;
    min-height: 1092px !important;
    min-height: 1092px ;
    margin-bottom: 20px;
    box-shadow: 0 3px 6px 1px #00000029;
    background-color: #fff;

 src/books/embedded/view/components/header.vue

@@ -1,7 +1,7 @@
<template>
  <div class="chapter" num="1">
    <!-- 封面 -->
    <div class="page-box" page="1">
    <div class="page-box" page="1" style="min-height: auto;">
      <div v-if="showPageList.indexOf(1) > -1">
        <h1 class="frontCover" title="">
          <img

 src/components/matching/matching.vue

@@ -1,6 +1,6 @@
<template>
  <div class="connect" id="connect" ref="connect" @mouseup="mouseup">
    <div class="answer"    @mousemove="mousemove">
  <div class="connect" id="connect" ref="connect"  @mousemove="mousemove" @mouseup="(e) => touchend(e)">
    <div class="answer"    >
      <div class="answer-box">
        <div
          class="answer-box-item"
@@ -19,7 +19,6 @@
          v-for="(item, index) in rightArr"
          :key="index"
          ref="right"
          @mouseup="(e) => touchend(e, item, index)"
        >
          {{ item.label.txt }}
        </div>
@@ -57,6 +56,7 @@
      scrollTop: 0,
      debounce: false,
      checkItem: null,
      checkItemIndex:null
    };
  },
  props: {
@@ -149,8 +149,8 @@
      });
    },
    // 触摸结束
    touchend(e, item, index) {
      console.log("抬起", e,item);
    touchend(e, index) {
      console.log("抬起", e,this.checkItem);
      this.isDragging = false;
      if (this.item.showAnswer) {
        return false;
@@ -164,20 +164,20 @@
      this.canvasB.clearRect(0, 0, this.clientWidth, this.clientHeight);
      // 如果不是右边的dom 直接把 线 干掉 -- 证明不是 没有拖到右边上
      if (!right) {
        item.line = [];
        this.checkItem.line = [];
        return;
      }
      // 如果已有的不是我自己 直接替换掉上一个的
      if (item.value[0] !== right.index) {
      if (this.checkItem.value[0] !== right.index) {
        let model = this.leftArr.find((r) => r.value[0] === right.index);
        if (model) {
          model.value = [];
          model.line = [];
        }
        item.value = [right.index];
        this.checkItem.value = [right.index];
      }
      // 重新赋值 线的 x y 轴
      item.line = this.attachment(index, right.index);
      this.checkItem.line = this.attachment(this.checkItemIndex, right.index);
      this.drawing();
      let model = this.leftArr
        .map((r, i) => {
@@ -192,10 +192,11 @@
      console.log(JSON.stringify(model));
    },
    // 触摸开始
    touchstart(e, item) {
    touchstart(e, item,index) {
      this.isDragging = true;
      console.log("按下", e);
      this.checkItem = item
      this.checkItemIndex = index
      e.stopPropagation();
      // let event = e.targetTouches[0];
      item.line = [
@@ -219,7 +220,6 @@
    // 移动中
    mousemove(e) {
      if (!this.isDragging) return false;
      console.log("移动", e);
      if (this.item.showAnswer) {
        return false;
      }