bug优化

zhongshujie

2024-10-17 3085935fbdc96b23d8852c35daa8e1a398ba442d

bug优化

 src/App.vue

@@ -66,7 +66,7 @@
      // process.env.VUE_APP_RESOURCE_CTX +
      //   (process.env.VUE_APP_ENV == "product"
      //     ? process.env.VUE_APP_BOOK_ID
      //     : "mathBook")
      //     : "artAndDrama")
      // );
      this.activeBook = await this.config.getBookConfig(
        'http://182.92.203.7:3007/books/resource/'+

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

@@ -202,13 +202,13 @@
          </p>
          <p class="text t-l">正义队长：
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
              style="margin-left: 40px; width: 92%"  @change="setBookQuestion"
              :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
              @blur="handleBlur('one')"></textarea>
          </p>
          <p class="text t-l">黑暗队长：
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
              style="margin-left: 40px; width: 92%"  @change="setBookQuestion"
              :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
              @blur="handleBlur('two')"></textarea>
          </p>

 src/books/botany/assets/main.less

@@ -563,4 +563,31 @@
    padding-left: 5px;
  }
}

.textarea-focused {
  border-color: #42b983 !important;
  box-shadow: 0 0 5px rgba(66, 185, 131, 0.5) !important;
}

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

  &:focus {
    outline: none;
  }
}


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

  &:focus {
    outline: none;
  }
}

  

 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: "",
        },
      }
    }
@@ -1015,6 +1018,13 @@
    },
    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  
    },
  }
};
@@ -1100,7 +1110,7 @@
}

.cover {
 

  min-height: 1150px;
}

@@ -1234,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;
@@ -1265,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>

 src/books/civilAviation/view/index.vue