艺术戏剧（文本框样式修改）

zhongshujie

2024-07-04 38b2ebcdd71d5f59b79c2e9db9f6a857fef34c63

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

@@ -1913,7 +1913,7 @@
            <p>
              1.We are witnessing the rapid development of modern society.What
              impresses you most?
              <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
              <span class="btn-box" @click="showAnswerFive = !showAnswerFive">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
@@ -1922,17 +1922,17 @@
              </span>
            </p>
            <!-- 文本框 -->
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
            <textarea v-model="questionData.reading.three" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
            <!-- 答案框 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFive">
              答案：(1)intercitut rain(2)online shopping (3)electronic payment (4)shared bike (5)take-away service
              (6)facial recognition
              (7)2022 Beijing Winter Olympics (8)2023 World University Games (9)Hong Kong-Zhuhai-Macao Bridge
              (10)Scenery spots, such as Jiuzhaigou, the Palace Museum, the Great Wall
            </p>
            <p>2.What will our life be like in ten or twenty years?
              <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
              <span class="btn-box" @click="showAnswerSex = !showAnswerSex">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
@@ -1941,10 +1941,10 @@
              </span>
            </p>
            <!-- 文本框 -->
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
            <textarea v-model="questionData.reading.four" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
            <!-- 答案框 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerSex">
              答案：(1)population aging (2)worsening climate change
              (3)more automation and Al,such as flying cars, driverless
            </p>
@@ -2168,7 +2168,8 @@
              3.It was at that moment that I knew about the metro system.It was
              new,fast,and extraordinary.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
              v-if="showlessonTwoQuestionAnswer">
              答案： A.3 &nbsp; B.1 &nbsp; C.2 &nbsp;
            </p>
            <p>
@@ -2202,7 +2203,8 @@
              Vanessa’s life
              easier.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
              v-if="showlessonTwoQuestionAnswer">
              答案： 1.T &nbsp; 2.F &nbsp; 3.T &nbsp; 4.F &nbsp; 5.T
            </p>
            <p><b>Ⅱ.Language focus.</b></p>
@@ -2235,7 +2237,8 @@
              of modern people.<input :disabled="testData.isComplete" type="text" class="input-bottom-border"
                style="width: 90px" v-model="testData.in.one" @change="setTestData" />
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
              v-if="showlessonTwoQuestionAnswer">
              答案： 1.witnessed &nbsp; 2.extraordinary &nbsp; 3.via &nbsp; 4.era &nbsp; 5.pace
            </p>
            <p>
@@ -2287,7 +2290,8 @@
                v-model="testData.in.one" @change="setTestData" />,all the people committed to Shenzhou Spacecrafts
              deserve respect.
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
              v-if="showlessonTwoQuestionAnswer">
              答案： 1.went through &nbsp; 2.Type in &nbsp; 3.a matter of &nbsp; 4.well Off &nbsp; 5.Last but not least
            </p>
            <p><b>Ⅲ.Grammar focus:The simple sentence.</b></p>
@@ -2310,27 +2314,28 @@
              </p>
            </div>
            <p>1.It is actually an online shopping website.（<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />）</p>
                class="input-bottom-border" style="width: 80px" v-model="testData.in.one" @change="setTestData" />）</p>
            <p>
              2.Vanessa finally got her own online payment account.（<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />）
                class="input-bottom-border" style="width: 80px" v-model="testData.in.one" @change="setTestData" />）
            </p>
            <p>
              3.China offers researchers world-class advanced research
              facilities in the institutes. （<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />）
                class="input-bottom-border" style="width: 80px" v-model="testData.in.one" @change="setTestData" />）
            </p>
            <p>
              4.These friends made Vanessa see China through the eyes of the
              locals.（<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 60px"
              locals.（<input :disabled="testData.isComplete" type="text" class="input-bottom-border" style="width: 80px"
                v-model="testData.in.one" @change="setTestData" />）
            </p>
            <p>5.The list of Chinese food never ends.（<input :disabled="testData.isComplete" type="text"
                class="input-bottom-border" style="width: 60px" v-model="testData.in.one" @change="setTestData" />）</p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
                class="input-bottom-border" style="width: 80px" v-model="testData.in.one" @change="setTestData" />）</p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
              v-if="showlessonTwoQuestionAnswer">
              答案： 1.S+V+C &nbsp; 2.S+V+O &nbsp; 3.S+V+O+O &nbsp; 4.S+V+O+C &nbsp; 5.S+V
            </p>

            <!-- 提交按钮 -->
            <div class="w100 fl">
              <ul class="fl ju-ar w100">
                <li>
@@ -2344,7 +2349,7 @@
                  </button>
                </li>
                <li>
                  <button @click="showQuestionAnswer = !showQuestionAnswer" class="parimary-btn">
                  <button @click="showlessonTwoQuestionAnswer = !showlessonTwoQuestionAnswer" class="parimary-btn">
                    查看答案
                  </button>
                </li>
@@ -2500,7 +2505,7 @@
                style="width: 60px" v-model="testData.in.one" @change="setTestData" />of Sanya to the rocky seaside
              of Laoshan… China is such a beautiful country!
            </p>
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showlessonThreeQuestionAnswer">
              答案： 1.culture &nbsp; 2.explore &nbsp; 3.subways &nbsp; 4.convenient &nbsp; 5.surprising &nbsp; 6.beach
            </p>
            <p>
@@ -2550,7 +2555,7 @@
            <h3 id="c009"><span class="bjh3">Practical Writing</span></h3>
            <p>Work with your partner to discuss the following questions.</p>
            <p>1.How do you let others know about an upcoming event?
              <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
              <span class="btn-box" @click="showAnswerSeven = !showAnswerSeven">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
@@ -2559,15 +2564,16 @@
              </span>
            </p>
            <!-- 文本框 -->
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
            <textarea v-model="questionData.reading.five" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
            <!-- 答案框 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
              答案： 1)posters 2)Wechat public account 3)Campus radio 4)Campus TV station 5)Notice
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerSeven">
              答案： (1)posters &nbsp; (2)Wechat public account &nbsp; (3)Campus radio &nbsp; (4)Campus TV station &nbsp;
              (5)Notice
            </p>
            <p>
              2.What information would you like to tell them about the event?
              <span class="btn-box" @click="showAnswerFour = !showAnswerFour">
              <span class="btn-box" @click="showAnswerEight = !showAnswerEight">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
@@ -2576,10 +2582,10 @@
              </span>
            </p>
            <!-- 文本框 -->
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
            <textarea v-model="questionData.reading.sex" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"></textarea>
            <!-- 答案框 -->
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerFour">
            <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 91%" v-if="showAnswerEight">
              答案：(1)Name of the event(2)Date & time (3)Address (4)Organizer
            </p>
            <p>
@@ -2695,31 +2701,23 @@
                <input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
                  v-model="testData.in.one" @change="setTestData" />
              </p>
              <!-- 答案 -->
              <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
                答案： Traditional handicraft show
              </p>
              <p>2.What should be included in the exhibition?</p>
              <p><input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
                  v-model="testData.in.one" @change="setTestData" /></p>
              <!-- 答案 -->
              <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
                答案： Various handicrafts made by Chinese students in theirtraditional Chinese culture courses
              </p>
              <p>3.Where will the exhibition be held?</p>
              <p><input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
                  v-model="testData.in.one" @change="setTestData" /></p>
              <!-- 答案 -->
              <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
                答案： Students activity center.
              </p>
              <p>4.When will the exhibition be held?</p>
              <p><input :disabled="testData.isComplete" type="text" class="input-bc-t" style="width: 325px"
                  v-model="testData.in.one" @change="setTestData" /></p>
              <!-- 答案 -->
              <p class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%" v-if="showQuestionAnswer">
                答案： November 13th -- 19th
              </p>
              <div class="event-header-text-bc pd-5" style="margin-left: 40px; width: 93%"
                v-if="showlessonThreeQuestionAnswer">
              <span>答案：</span>
              <p>1、 Traditional handicraft show</p>
              <p>2、 Various handicrafts made by Chinese students in theirtraditional Chinese culture courses</p>
              <p>3、 Students activity center.</p>
              <p>4、 November 13th -- 19th</p> 
              </div>
              <p>...</p>
            </div>
          </div>
@@ -2810,6 +2808,26 @@
              <p>What will hold the audience’s interest?</p>
              <p>What do you hope to achieve through this event?</p>
            </div>
            <!-- 提交按钮 -->
            <div class="w100 fl">
              <ul class="fl ju-ar w100">
                <li>
                  <button class="btn-border btn-w" @click="saveData">
                    提交
                  </button>
                </li>
                <li>
                  <button @click="changeTestData" class="btn-border btn-w">
                    重做
                  </button>
                </li>
                <li>
                  <button @click="showlessonThreeQuestionAnswer = !showlessonThreeQuestionAnswer" class="parimary-btn">
                    查看答案
                  </button>
                </li>
              </ul>
            </div>
          </div>
          <div class="preface-bottom">
            <span class="contet-num-box">18</span>
@@ -2839,8 +2857,14 @@
      showAnswerThree: false,
      showAnswerFour: false,
      showAnswerFive: false,
      showAnswerSex: false,
      showAnswerSeven: false,
      showAnswerEight: false,
      showAnswerNine: false,
      showImg: false,
      showQuestionAnswer: false,
      showlessonTwoQuestionAnswer: false,
      showlessonThreeQuestionAnswer: false,
      rawData: {
        left: [
          {
@@ -2996,6 +3020,10 @@
        reading: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          sex: "",
        },
        table: {
          one: "",