英语

闫增涛

2024-05-23 ea9138a6eb9b54c46369a2805be40e65a43a55e3

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

@@ -24,7 +24,7 @@
    <div class="page-box" page="7">
      <div class="w100 mb-20" style="padding-right: 20px">
        <div
          class="w100 event-header-bc fl al-end"
          class="event-header-bc fl al-end"
          style="height: 100px; padding-left: 40px"
        >
          <div class="preface-header-box event-header-text-bc">
@@ -46,75 +46,94 @@
            >
          </p>
          <div class="fl ju-bt">
            <div class="left" style="width:48%">
            <div class="left" style="width: 48%">
              <p class="center">
                <el-image
                :src="imgOne"
                :preview-src-list="[imgOne]"
                class="w100"
              />
                <el-image :src="imgOne" :preview-src-list="[imgOne]" />
              </p>
              <p class="center">1._____________________</p>
              <p class="center">
                1.<input
                  v-model="questionData.warnUp.one.value"
                  class="input-bottom-border fz-18"
                  @blur="handleQuestion('one')"
                />
                <i
                  class="el-icon-check correct-icon"
                  v-if="questionData.warnUp.one.isRight"
                ></i>
                <i class="el-icon-close error-icon" v-if="questionData.warnUp.one.isRight == false"></i>
              </p>
            </div>
            <div class="right" style="width:48%">
            <div class="right" style="width: 48%">
              <p class="center">
                <el-image
                :src="imgTwo"
                :preview-src-list="[imgTwo]"
                class="w100"
              />
                  :src="imgTwo"
                  :preview-src-list="[imgTwo]"
                  style="width: 96%"
                />
              </p>
              <p class="center">2._____________________</p>
              <p class="center">
                2.<input class="input-bottom-border fz-18" />
              </p>
            </div>
          </div>

          <div class="fl ju-bt">
            <div class="left" style="width:48%">
            <div class="left" style="width: 48%">
              <p class="center">
                <el-image
                :src="imgThree"
                :preview-src-list="[imgThree]"
                class="w100"
              />
                <el-image :src="imgThree" :preview-src-list="[imgThree]" />
              </p>
              <p class="center">3._____________________</p>
              <p class="center">
                3.<input class="input-bottom-border fz-18" />
              </p>
            </div>
            <div class="right" style="width:48%">
            <div class="right" style="width: 48%">
              <p class="center">
                <el-image
                :src="imgFour"
                :preview-src-list="[imgFour]"
                class="w100"
              />
                  :src="imgFour"
                  :preview-src-list="[imgFour]"
                  style="width: 94%"
                />
              </p>
              <p class="center">4._____________________</p>
              <p class="center">
                4.<input class="input-bottom-border fz-18" />
              </p>
            </div>
          </div>

          <div class="fl ju-bt">
            <div class="left" style="width:48%">
            <div class="left" style="width: 48%">
              <p class="center">
                <el-image
                :src="imgFive"
                :preview-src-list="[imgFive]"
                class="w100"
              />
                <el-image :src="imgFive" :preview-src-list="[imgFive]" />
              </p>
              <p class="center">5._____________________</p>
              <p class="center">
                5.<input class="input-bottom-border fz-18" />
              </p>
            </div>
            <div class="right" style="width:48%">
            <div class="right" style="width: 48%">
              <p class="center">
                <el-image
                :src="imgSix"
                :preview-src-list="[imgSix]"
                class="w100"
              />
                  :src="imgSix"
                  :preview-src-list="[imgSix]"
                  style="width: 94%"
                />
              </p>
              <p class="center">6._____________________</p>
              <p class="center">
                6.<input class="input-bottom-border fz-18" />
              </p>
            </div>
          </div>
          <p><b>Ⅱ.What other symbols can you think of?</b></p>
          <p>_________________________________________</p>
          <p>
            <b>Ⅱ.What other symbols can you think of?</b>
            <button class="parimary-btn" @click="showAnswer('seven')">
              显示答案
            </button>
          </p>
          <p>
            <input
              v-model="questionData.warnUp.seven"
              class="input-bottom-border w100 fz-18"
            />
          </p>
        </div>
      </div>
      <div class="preface-bottom">
@@ -443,16 +462,59 @@
  name: "chapter-one",
  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"),
    }
  }
      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"),
      questionData: {
        warnUp: {
          one: {
            value: "",
            isRight:null,
          },
          two:{
            value:"",
            isRight:null,
          },
          three:{
            value: "",
            isRight:null,
          },
          four:{
            value: "",
            isRight:null,
          },
          five:{
            value: "",
            isRight:null,
          },
          six:{
            value: "",
            isRight:null,
          },
          seven:{
            value: "",
            isRight:null,
          },
        },
      },
    };
  },
  methods: {
    showAnswer(type) {
      if (type == "seven") {
        this.questionData.warnUp.seven = "This is a good idear.";
      }
    },
    handleQuestion(type) {
      if (type == "one") {
        return  this.questionData.warnUp.one.value ? this.questionData.warnUp.one.isRight = this.questionData.warnUp.one.value == "你好" : this.questionData.warnUp.one.isRight = null
      }
    },
  },
};
</script>

<style lang="less" scoped>
</style>
<style lang="less" scoped></style>