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

zhongshujie

6 小时以前 30d147c4c92dbfd5ca1b2f8c24a617dc82d2d25b

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

@@ -4,7 +4,8 @@
      <div v-if="showPageList.indexOf(4) > -1">
        <h1 id="a004">
          <img class="img-0" alt="" src="../../assets/images/dy1.jpg" />
          <audio :src="auidoPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
          <audio style="margin-top: 1em" :src="auidoPathOne" controls controlslist="noplaybackrate nodownload"
            class="audio"></audio>
        </h1>
        <div class="bodystyle">
          <div class="bk">
@@ -13,7 +14,7 @@
                <img class="img-gn" alt="" src="../../assets/images/dydd.jpg" />
              </p>
            </div>
            <p class="block" style="margin:  8% 5% 5% 7%">
            <p class="block mar-block">
              在故事《一块奶酪》中，蚂蚁家庭的每一位成员都为了共同的目标分工协作、努力奋斗，在面对诱惑和挑战时更是严于律己、遵守团队纪律。本单元，让我们读一读《一块奶酪》的故事，学习蚂蚁们的优秀品格吧！
            </p>
          </div>
@@ -36,11 +37,11 @@
          <h3 class="lefth3" id="c001">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
          <p class="text ">
            在语言表述中，为了突出或强调某些意思，我们会使用“逻辑重音”这一技巧。同样一句话，不同的逻辑重音可以表达出不一样的意思。
          </p>
          <p class="text">
            <span class="hs1">◇</span>大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>大声朗读下面的句子，连一连不同逻辑重音强调的意思。
          </p>
          <h1>
            <!-- <audio :src="auidoPathTwo" controls controlslist="noplaybackrate nodownload" class="audio"
@@ -72,15 +73,16 @@
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
              x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
              controlslist="nodownload" class="w100 video "
              controlslist="nodownload" class="w100 video"
              style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          </p>
          <p class="center videoname">
            <span>视频：我们是一家人 </span>
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start">
              <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
                @click="handleCollect('video')" />
              <img
                :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg"
                alt="" class="collect-btn" @click="handleCollect('video')" />
            </el-tooltip>
          </p>
        </div>
@@ -102,8 +104,8 @@
          <h3 class="lefth3" id="c003">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          <p class="text rhombusFather">
            <span class="hs1 rhombus" style="">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1><audio :src="auidoPathThree" controls controlslist="noplaybackrate nodownload" class="audio"></audio></h1>
          <div class="bj3">
@@ -122,8 +124,8 @@
          <h3 class="lefth3" id="c004">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>在《一块奶酪》的故事中，小蚂蚁们都有各自的立场，你能理解他们的想法吗？请你和同伴根据故事内容讨论一下。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>在《一块奶酪》的故事中，小蚂蚁们都有各自的立场，你能理解他们的想法吗？请你和同伴根据故事内容讨论一下。
          </p>
          <hr style="margin-left: 9%; margin-top: 10%; width: 25%;" />
          <p class="note left1 references">
@@ -148,8 +150,8 @@
          <h3 class="lefth3" id="c006">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1 class="lefth3 openImgBox" id="c005">
            <img class="img-gn1" alt="" src="../../assets/images/1-3.gif" style="height: auto; width: 50%" />
@@ -196,20 +198,18 @@
          <h1 class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
          </h1>
          <p class="text">
          <p class="text rhombusFather">
            <span
              class="hs1">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
              class="hs1 rhombus">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
          </p>
          <p class="text t-l">正义队长：
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 40px; width: 92%" class="" @change="setBookQuestion"
              :class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
          <p class="text t-l special-P">正义队长：
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6" class="w90 ma-l-40"
              @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"
              :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
          <p class="text t-l special-P">黑暗队长：
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6" class="w90 ma-l-40"
              @change="setBookQuestion" :class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
              @blur="handleBlur('two')"></textarea>
          </p>
        </div>
@@ -230,8 +230,8 @@
          <h3 class="lefth3" id="c007">
            <img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>请将以下课文选段大声朗诵出来，加点的字请重读。
          </p>
          <h1>
            <audio :src="auidoPathFive" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
@@ -251,8 +251,8 @@
          <h3 class="lefth3" id="c008">
            <img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" />
          </h3>
          <p class="text">
            <span class="hs1">◇</span>假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>假如你是搬运奶酪的蚂蚁，你要怎么搬运不同形状、大小的奶酪呢？请先为自己设计一个剧本吧：
          </p>
          <p class="text">
            我是蚂蚁 <input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" style=" width: 13%;"
@@ -288,8 +288,8 @@
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-5.gif" />
          </p>
          <p class="text">
            <span class="hs1">◇</span>蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
          <p class="text rhombusFather">
            <span class="hs1 rhombus">◇</span>蚂蚁队长把奶酪渣留给了年龄最小的蚂蚁，赢得了大家的认可。在生活中，你曾经像“蚂蚁队长”一样爱护弱小吗？或者像“小蚂蚁”一样得到过哥哥姐姐们的关爱吗？
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
@@ -309,8 +309,8 @@
          <h3 class="lefth3" id="c009">
            <img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" />
          </h3>
          <p class="text ends">
            <span><span class="hs1">◇</span>放大缩小</span>
          <p class="text ends rhombusFather">
            <span><span class="hs1 rhombuSpecial">◇</span>放大缩小</span>
            <span> <audio :src="auidoPathSex" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </span>
          </p>
@@ -318,16 +318,16 @@
            请你交替“放大”和“缩小”五官。在“放大”时，想象五官要飞到外太空；在“缩小”时，想象五官全部缩小到了鼻尖上。
          </p>

          <p class="text ends">
            <span><span class="hs1">◇</span>提升苹果肌</span>
          <p class="text ends rhombusFather">
            <span><span class="hs1 rhombuSpecial">◇</span>提升苹果肌</span>
            <span><audio :src="auidoPathSeven" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
            </span>
          </p>
          <p class="text">
            想象你在一个陌生的地方，谁都不认识，突然遇见了好朋友，你很高兴，上前和他/她打招呼。做一做你此时的表情吧。
          </p>
          <p class="text ends">
            <span><span class="hs1">◇</span>微笑说“ang”</span>
          <p class="text ends rhombusFather">
            <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">◇</span>微笑说“ang”</span>
            <span><audio :src="auidoPathEight" controls controlslist="noplaybackrate nodownload"
                class="audio"></audio></span>
          </p>
@@ -335,8 +335,8 @@
            请你试一试在提升苹果肌的基础上，发出“ang”的音。声音要尽可能拉长、保持稳定，并向远送。
          </p>

          <p class="text ends">
            <span style="text-wrap: nowrap"><span class="hs1">◇</span>向远山喊“阿毛”</span>
          <p class="text ends rhombusFather">
            <span style="text-wrap: nowrap"><span class="hs1 rhombuSpecial">◇</span>向远山喊“阿毛”</span>
            <span style="margin-left: -4%;"><audio :src="auidoPathNine" controls
                controlslist="noplaybackrate nodownload" class="audio"></audio></span>

@@ -362,7 +362,7 @@
          <h3 class="lefth3" id="c010">
            <img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" />
          </h3>
          <p class="text"><span class="hs1">◇</span>排一排·演一演：孔融让梨</p>
          <p class="text rhombusFather"><span class="hs1 rhombus">◇</span>排一排·演一演：孔融让梨</p>
          <p class="text">
            孔融四岁就懂礼貌、知谦让，是我们学习的好榜样，让我们运用本单元的戏剧知识，把他的故事表演出来吧！
          </p>
@@ -376,8 +376,9 @@
            <span>视频：我们是一家人 </span>
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start">
              <img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg" alt="" class="collect-btn"
                @click="handleCollect('video')" />
              <img
                :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg"
                alt="" class="collect-btn" @click="handleCollect('video')" />
            </el-tooltip>
          </p>
        </div>
@@ -419,7 +420,7 @@
      this.chapterData = JSON.parse(data);
    }
    this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
    

  },
  data() {
    return {
@@ -438,7 +439,7 @@
      accentColor: "",
      color: "#fff",
      isFocused: null, // 用于跟踪textarea的聚焦状态  
      collectResourceList:[],
      collectResourceList: [],
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
@@ -766,8 +767,8 @@
    },
    handleCollect(type) {
      if (type == "video") {
        this.handleCollectResource("691cbd2c13198d04afc7800d0f2cafb0","691cbd2c13198d04afc7800d0f2cafb0",'',"视频","bits",'视频：我们是一家人')
      } 
        this.handleCollectResource("691cbd2c13198d04afc7800d0f2cafb0", "691cbd2c13198d04afc7800d0f2cafb0", '', "视频", "bits", '视频：我们是一家人')
      }
      this.handleChapterData();
    },
    //资源收藏事件