Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout

闫增涛

2024-10-17 39da75fa54f4a0bfc6c135bcacdd5a4df4890210

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

@@ -800,14 +800,17 @@
            </svg><span class="ff-s f-18 fw-800 span-c " style="margin-left: 5px">思考与讨论</span></p>
          <div style="background-color: rgba(55, 201, 111, 0.06); padding: 10px 20px;">
            <p><span class="ff-s">1.如何区分梓树、楸树和黄金树？</span></p>
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 20px; width: 92%" class="fz-16 fm-son " @change="setBookQuestion"></textarea>
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6" class="textarea-box"
              @change="setBookQuestion" :class="{ 'textarea-focused': isFocused == 'one' }" @focus="handleFocus('one')"
              @blur="handleBlur()"></textarea>
            <p><span class="ff-s">2.如何区分鸡爪槭和元宝枫？</span></p>
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
              style="margin-left: 20px; width: 92%" class="fz-16 fm-son " @change="setBookQuestion"></textarea>
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6" class="textarea-box"
              @change="setBookQuestion" :class="{ 'textarea-focused': isFocused == 'two' }" @focus="handleFocus('two')"
              @blur="handleBlur()"></textarea>
            <p><span class="ff-s">3.试着利用本地区春季、夏季、秋季、冬季常见的观叶树木及进行庭院植物配置，并达到三季有花、四季有景的效果。</span></p>
            <textarea v-model="questionData.reading.three" placeholder="请输入内容" rows="6"
              style="margin-left: 20px; width: 92%" class="fz-16 fm-son " @change="setBookQuestion"></textarea>
            <textarea v-model="questionData.reading.three" placeholder="请输入内容" rows="6" class="textarea-box"
              @change="setBookQuestion" :class="{ 'textarea-focused': isFocused == 'three' }"
              @focus="handleFocus('three')" @blur="handleBlur()"></textarea>
          </div>
          <p class="fl al-c"><svg t="1728866427323" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="24341" xmlns:xlink="http://www.w3.org/1999/xlink" width="32"
@@ -820,42 +823,41 @@
          <p><span class="fw-800">1.判断题</span></p>
          <p v-for="(item, index) in questionData.judge[0].value" :key="index">
            <span>{{ index + 1 }}</span>.<span>{{ item.stem }}。</span>
            <span>（
            <span>
              <select class="select-border" v-model="questionData.judge[0].value[index].userAnswer"
                @change="saveListenTwo" :disabled="questionData.judge[0].isComplete">
                <option v-for="(citem, cindex) in questionData.judge[0].option" :key="cindex" :value="citem">
                  {{ citem }}
                </option>
              </select>）
              </select>
            </span>
          </p>
          <p><span class="fw-800">2.填空题</span></p>
          <p><span class="ff-s">（1）你生活的城市中，常见彩叶树种有<input :disabled="questionData.isComplete"
                v-model="questionData.cm.one" type="text" class="input-bottom-border" style="width: 60px"
                v-model="questionData.cm.one" type="text" class="input-bottom-border" style="width: 80px"
                @change="setTestData" />、
              <input :disabled="questionData.isComplete" v-model="questionData.cm.two" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、 <input
                class="input-bottom-border" style="width: 80px" @change="setTestData" />、 <input
                :disabled="questionData.isComplete" v-model="questionData.cm.three" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、 <input
                class="input-bottom-border" style="width: 80px" @change="setTestData" />、 <input
                :disabled="questionData.isComplete" v-model="questionData.cm.four" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、
                class="input-bottom-border" style="width: 80px" @change="setTestData" />、
              <input :disabled="questionData.isComplete" v-model="questionData.cm.five" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />。</span></p>
          <p><span class="ff-s">（2）园林中常见的春色叶树种有 <input :disabled="questionData.isComplete"
                v-model="questionData.am.one" type="text" class="input-bottom-border" style="width: 60px"
                @change="setTestData" />、
                class="input-bottom-border" style="width: 80px" @change="setTestData" />。</span></p>
          <p><span class="ff-s">（2）园林中常见的春色叶树种有 <input :disabled="questionData.isComplete" v-model="questionData.am.one"
                type="text" class="input-bottom-border" style="width: 80px" @change="setTestData" />、
              <input :disabled="questionData.isComplete" v-model="questionData.am.two" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、 <input
                class="input-bottom-border" style="width: 80px" @change="setTestData" />、 <input
                :disabled="questionData.isComplete" v-model="questionData.am.three" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />，秋色叶树种有
                class="input-bottom-border" style="width: 80px" @change="setTestData" />，秋色叶树种有
              <input :disabled="questionData.isComplete" v-model="questionData.am.four" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、<input
                class="input-bottom-border" style="width: 80px" @change="setTestData" />、<input
                :disabled="questionData.isComplete" v-model="questionData.am.five" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、 <input
                class="input-bottom-border" style="width: 80px" @change="setTestData" />、 <input
                :disabled="questionData.isComplete" v-model="questionData.am.six" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、
                class="input-bottom-border" style="width: 80px" @change="setTestData" />、
              <input :disabled="questionData.isComplete" v-model="questionData.am.seven" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />。</span></p>
                class="input-bottom-border" style="width: 80px" @change="setTestData" />。</span></p>
        </div>
      </div>
    </div>
@@ -894,7 +896,7 @@
              </div>
            </div>
            <div class="title-text">
              <div class="title-text-box">
              <div class="title-text-main">
                思想加油站
              </div>
              <div class="title-text-triangle"></div>
@@ -928,6 +930,7 @@
  },
  data() {
    return {
      isFocused: null, // 用于跟踪textarea的聚焦状态  
      questionData: {
        isComplete: false,
        reading: {
@@ -991,8 +994,8 @@
          three: "",
          four: "",
          five: "",
          six:"",
          seven:"",
          six: "",
          seven: "",
        },
      }
    }
@@ -1016,11 +1019,18 @@
    setTestData() {
      localStorage.setItem("botany-book-chapter01-question-one", JSON.stringify(this.questionData));
    },
    handleFocus(id) {
      this.isFocused = id; // 当textarea聚焦时，设置为true  
      
    },
    handleBlur() {
      this.isFocused = null; // 当textarea失去焦点时，设置为false  
    },
  }
};
</script>

<style scoped>
<style lang="less" scoped>
.ti-2 {
  text-indent: 2em
}
@@ -1100,7 +1110,8 @@
}

.cover {
  max-width: 816px;

  min-height: 1150px;
}

.header-img {
@@ -1152,7 +1163,7 @@
.main-box {
  position: absolute;
  top: 250px;
  right: 98px;
  right: 12%;
}

.main-text {
@@ -1168,7 +1179,7 @@
.text-box {
  position: absolute;
  top: 500px;
  right: 98px;
  right: 12%;
}

.text-box-bottom {
@@ -1178,7 +1189,7 @@
}

.text-top {
  /* width: 611px; */
  width: 520px;
  padding: 37px 36px 25px 33px;
  background: rgba(55, 201, 111, 0.06);
  border-radius: 0px 29px 0px 29px;
@@ -1233,6 +1244,20 @@
  padding-left: 20px;
}

.title-text-main {
  padding: 3px 0 3px 0;
  min-width: 100px;
  font-weight: 400;
  font-size: 20px;
  color: #FFFFFF;
  line-height: 27px;
  background-color: #0E932E;
  padding-left: 20px;
}




.title-text-triangle {
  width: 0;
  height: 0;
@@ -1242,8 +1267,6 @@
}

.block {
  max-width: 542px;
  min-width: 542px;
  text-indent: 0em;
  font-family: KaiTi, KaiTi;
  font-weight: 400;
@@ -1266,21 +1289,11 @@
}


.select-border {
  border: 0;
  border-bottom: 1px solid #767676;

  &:focus {
    outline: none;
  }
}

.input-bottom-border {
  border: 0;
  border-bottom: 1px solid #000000;

  &:focus {
    outline: none;
  }
.textarea-box {
  background-color: transparent;
  margin-left: 20px;
  max-width: 92%;
  min-width: 92%;
  outline:none;
}
</style>