合并

闫增涛

2024-05-30 b419eeb1a6a6afac7c83580c18c80219c47997e1

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

@@ -2,7 +2,7 @@
  <div class="chapter" num="0">
    <!-- 1 -->
    <div class="page-box" page="7">
      <div class="bodystyle">
      <div class="bodystyle" v-if="showPageList.indexOf(7) > -1">
        <h1 id="a005">
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
        </h1>
@@ -24,6 +24,7 @@
    </div>
    <!-- 2 -->
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -60,18 +61,13 @@
                />
              </svg>
            </span>
            <!-- <button
              @click="showAnswerTwo = !showAnswerTwo"
              class="parimary-btn"
            >
              显示答案
            </button> -->
          </p>
            <div class="openImgBox">
          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgOne" :preview-src-list="[imgOne]" />
                      <img src="../../assets/images/0012-1.jpg" class="w100" />
                </p>
                <p class="center">
                  1.<input
@@ -109,11 +105,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgTwo"
                    :preview-src-list="[imgTwo]"
                    style="width: 94%"
                  />
                      <img src="../../assets/images/0012-2.jpg" style="width: 94%" />
                </p>
                <p class="center">
                  2.<input
@@ -154,7 +146,7 @@
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgThree" :preview-src-list="[imgThree]" />
                      <img src="../../assets/images/0012-3.jpg" class="w100" />
                </p>
                <p class="center">
                  3.<input
@@ -192,11 +184,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgFour"
                    :preview-src-list="[imgFour]"
                    style="width: 93%"
                  />
                      <img src="../../assets/images/0012-4.jpg" style="width: 93%" />
                </p>
                <p class="center">
                  4.<input
@@ -237,7 +225,7 @@
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgFive" :preview-src-list="[imgFive]" />
                      <img src="../../assets/images/0012-5.jpg" class="w100" />
                </p>
                <p class="center">
                  5.<input
@@ -275,11 +263,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgSix"
                    :preview-src-list="[imgSix]"
                    style="width: 92%"
                  />
                      <img src="../../assets/images/0012-6.jpg" style="width: 92%" />
                </p>
                <p class="center">
                  6.<input
@@ -313,6 +297,7 @@
              >
                答案：Chinese chess
              </p>
                </div>
            </div>
          </div>
          <p class="t0">
@@ -362,8 +347,10 @@
        <span class="contet-num-box">2</span>
      </div>
    </div>
    </div>
    <!-- 3 -->
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -526,8 +513,10 @@
        <span class="contet-num-box">3</span>
      </div>
    </div>
    </div>
    <!-- 4 -->
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -648,8 +637,10 @@
        <span class="contet-num-box">4</span>
      </div>
    </div>
    </div>
    <!-- 5 -->
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -706,22 +697,24 @@
            China.
          </p>
          <p>
            <input type="checkbox" name="ball" value="basketball" id="1" checked="checked"/> 
              <input type="checkbox" name="ball" value="Language" id="1" v-model="testData.check" /> 
            Language</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> People</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1"/> Culture</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Cuisine</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Folk art</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Landscapes</p>
          <p><input type="checkbox" name="ball" value="basketball" id="1" /> Transportation</p>
            <p><input type="checkbox" name="ball" value="People" id="2" v-model="testData.check" /> People</p>
            <p><input type="checkbox" name="ball" value="Culture" id="3" v-model="testData.check" /> Culture</p>
            <p><input type="checkbox" name="ball" value="Cuisine" id="4" v-model="testData.check" /> Cuisine</p>
            <p><input type="checkbox" name="ball" value="Folk" id="5" v-model="testData.check" /> Folk art</p>
            <p><input type="checkbox" name="ball" value="Landscapes" id="6" v-model="testData.check" /> Landscapes</p>
            <p><input type="checkbox" name="ball" value="Transportation" id="7" v-model="testData.check" /> Transportation</p>
        </div>
      </div>
      <div class="preface-bottom">
        <span class="contet-num-box">5</span>
      </div>
    </div>
    </div>
    <!-- 6 -->
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -955,8 +948,10 @@
        <span class="contet-num-box">6</span>
      </div>
    </div>
    </div>
    <!-- 7 -->
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -1043,9 +1038,15 @@
          </p>
          <p>
            <b>Ⅲ.Grammar focus:The conditional sentence—if-clause.</b>
            <button class="parimary-btn" @click="showAnswer('showImg')">
              图片
            </button>
              <span class="btn-box" @click="showAnswer('showImg')">
                <svg t="1717037443722" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="30864" xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="20" height="20">
                  <path
                    d="M387.2 471.152l-154.768 258.72v103.488h515.792V626.384l-149.12 103.488z m283.712-51.744a77.632 77.632 0 1 0 77.392 77.616 77.504 77.504 0 0 0-77.472-77.616zM640 0H160.72A96.736 96.736 0 0 0 64 96.72V927.36a96.736 96.736 0 0 0 96.72 96.64h702.56A96.704 96.704 0 0 0 960 927.36V298.016z m7.808 94.736l226.544 211.008h-146.544a80.08 80.08 0 0 1-80-80zM896 927.36a32.688 32.688 0 0 1-32.72 32.64h-702.56A32.704 32.704 0 0 1 128 927.36V96.72A32.752 32.752 0 0 1 160.72 64l423.088 0.384v161.44a144.176 144.176 0 0 0 144 143.92H896z"
                     p-id="30865"></path>
                </svg>
              </span>
          </p>
          <el-image
            v-if="showImg"
@@ -1204,7 +1205,7 @@
          </p>
          <div class="w100 fl ju-cn">
            <ul class="fl ju-ev" style="width: 50%">
              <li><button class="btn-border btn-w">提交</button></li>
                <li><button class="btn-border btn-w" @click="saveData">提交</button></li>
              <li>
                <button @click="setTestData" class="btn-border btn-w">
                  保存
@@ -1227,8 +1228,10 @@
        <span class="contet-num-box">7</span>
      </div>
    </div>
    </div>
    <!-- 8 -->
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="event-header-bc fl al-end"
@@ -1291,14 +1294,14 @@
              <td>
                <textarea
                  v-model="questionData.table.one"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.two"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
@@ -1314,14 +1317,14 @@
              <td>
                <textarea
                  v-model="questionData.table.four"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.five"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
@@ -1337,14 +1340,14 @@
              <td>
                <textarea
                  v-model="questionData.table.seven"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
              <td>
                <textarea
                  v-model="questionData.table.enight"
                  class="w100 table-tr-bc b0 table-textarea"
                    class="w100 table-tr-bc b0 table-textarea textarea-box"
                  @change="setBookQuestion"
                ></textarea>
              </td>
@@ -1419,26 +1422,284 @@
            </p>
          </div>
          <div class="resource-primary-border" style="padding: 8px">
            <el-carousel
              :autoplay="false"
              trigger="click"
              class="bones-carousel carousel-image"
              arrow="always"
              indicator-position="none"
              <div class="banshi openImgBox">
                  <div class="swiper-container">
                    <div class="swiper-wrapper">
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
            >
              <el-carousel-item
                v-for="(item, index) in pptList"
                :key="index"
                class="bones-carousel-item"
              >
                <el-image
                  :src="item"
                  :preview-src-list="pptList"
                  :preview-teleported="true"
                  class="open-image"
                          <img
                            src="../../assets/images/ppt/ppt_01.png"
                />
              </el-carousel-item>
            </el-carousel>
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_01.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_03.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_04.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_05.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_06.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_07.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_08.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_09.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_10.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_11.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_12.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_13.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_14.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_15.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_16.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_17.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_18.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_19.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_20.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_21.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_22.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_23.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_24.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_25.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_26.png"
                          />
                        </div>
                      </div>
                      <div class="swiper-slide">
                        <div
                          class="imgBox"
                          style="width: 100%; height: 100%"
                        >
                          <img
                            src="../../assets/images/ppt/ppt_27.png"
                          />
                        </div>
                      </div>
                    </div>
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                  </div>
                </div>
          </div>
        </div>
      </div>
@@ -1446,8 +1707,10 @@
        <span class="contet-num-box">8</span>
      </div>
    </div>
    </div>
    <!-- 9 -->
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
      <ul class="preface-odd-header w100 fl ju-bt">
        <li class=""></li>
        <li class="fz-18">
@@ -1475,11 +1738,12 @@
              train　shared bike　take-away service
            </p>
          </div>
            <div class="openImgBox">
          <div class="fl ju-bt">
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgSeven" :preview-src-list="[imgSeven]" />
                      <img src="../../assets/images/0019-1.jpg" alt="" class="w100" />
                </p>
                <p class="center">
                  1.
@@ -1521,11 +1785,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgEnight"
                    :preview-src-list="[imgEnight]"
                    style="width: 98%"
                  />
                      <img src="../../assets/images/0019-2.jpg" alt="" style="width: 98%" />
                </p>
                <p class="center">
                  2.
@@ -1570,7 +1830,7 @@
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgNine" :preview-src-list="[imgNine]" />
                      <img src="../../assets/images/0019-3.jpg" alt="" style="width: 98%" />
                </p>
                <p class="center">
                  3.
@@ -1612,11 +1872,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgTen"
                    :preview-src-list="[imgTen]"
                    style="width: 94%"
                  />
                      <img src="../../assets/images/0019-4.jpg" alt=""  style="width: 94%" />
                </p>
                <p class="center">
                  4.
@@ -1661,7 +1917,7 @@
            <div class="left" style="width: 48%">
              <div>
                <p class="center">
                  <el-image :src="imgEleven" :preview-src-list="[imgEleven]" />
                      <img src="../../assets/images/0019-5.jpg" alt=""  class="w100" />
                </p>
                <p class="center">
                  5.
@@ -1703,11 +1959,7 @@
            <div class="right" style="width: 48%">
              <div>
                <p class="center">
                  <el-image
                    :src="imgTwelve"
                    :preview-src-list="[imgTwelve]"
                    style="width: 98%"
                  />
                      <img src="../../assets/images/0019-6.jpg" alt="" style="width: 98%" />
                </p>
                <p class="center">
                  6.
@@ -1747,6 +1999,7 @@
              </p>
            </div>
          </div>
            </div>
          <div class="w100 fl ju-cn">
            <div class="fl ju-ev" style="width: 60%">
              <button @click="setDropdownData" class="btn-border btn-w">
@@ -1771,6 +2024,7 @@
      </div>
    </div>
  </div>
  </div>
</template>

<script>
@@ -1778,20 +2032,13 @@

export default {
  name: "chapter-one",
  props:{
    showPageList:{
      type:Array
    }
  },
  data() {
    return {
      imgOne: require("../../assets/images/0012-1.jpg"),
      imgTwo: require("../../assets/images/0012-2.jpg"),
      imgThree: require("../../assets/images/0012-3.jpg"),
      imgFour: require("../../assets/images/0012-4.jpg"),
      imgFive: require("../../assets/images/0012-5.jpg"),
      imgSix: require("../../assets/images/0012-6.jpg"),
      imgSeven: require("../../assets/images/0019-1.jpg"),
      imgEnight: require("../../assets/images/0019-2.jpg"),
      imgNine: require("../../assets/images/0019-3.jpg"),
      imgTen: require("../../assets/images/0019-4.jpg"),
      imgEleven: require("../../assets/images/0019-5.jpg"),
      imgTwelve: require("../../assets/images/0019-6.jpg"),
      imgThirteen: require("../../assets/images/grammar.jpg"),
      showAnswerOne: false,
      showAnswerTwo: false,
@@ -1851,6 +2098,7 @@
        },
      },
      testData: {
        check:[],
        tx: {
          one: "",
          two: "",
@@ -1940,7 +2188,7 @@
      },
      pptList: [
        require("../../assets/images/ppt/ppt_01.png"),
        require("../../assets/images/ppt/ppt_02.png"),
        require("../../assets/images/ppt/ppt_01.png"),
        require("../../assets/images/ppt/ppt_03.png"),
        require("../../assets/images/ppt/ppt_04.png"),
        require("../../assets/images/ppt/ppt_05.png"),
@@ -2064,6 +2312,9 @@
        JSON.stringify(this.dropdownData)
      );
    },
    saveData() {
      console.log(this.testData);
    }
  },
};
</script>
@@ -2107,4 +2358,13 @@
    color: #fff;
  }
}
.banshi {
  margin-top: 40px;
  width: 100%;
  height: 350px;
  margin: 0 auto;
}
select {
  height: 24px;
}
</style>