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

user1

2024-06-14 f4bfea700a57d71a9c30315387a77650af13858c

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

@@ -5,7 +5,7 @@
        <h1 id="a007">
          <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
        </h1>
        <div class="padding-96">
        <div class="padding-116">
          <p>
            在客观世界中存在各种各样的运动变化现象.如搭载神舟十四号载人飞船的长征二号运载火箭发射过程中，飞船与发射点距离会随着时间的变化而变化；深海勇士号载人潜水器在下潜实验过程中，其压强随着下潜深度的增加而增大；代表新能源技术的光伏发电和风能发电，我国的装机容量随时间变化而增长；我国快速发展的高速铁路，其总里程是逐年增加的，现已突破4万km
            ，稳居世界第一；每个人的体温随着时间的变化而变化；到商店购买同一种饮料的数量越多，付费越多等.这些动态变化现象都表现为变量之间的对应关系，我们常用函数模型来描述这些变量之间的关系和规律，并通过研究函数来认识客观世界.
@@ -21,7 +21,7 @@
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <div class="padding-96">
        <div class="padding-116">
          <p class="left">
            <img class="inline2" alt="" src="../../assets/images/xxmb.jpg" />
          </p>
@@ -55,7 +55,7 @@
            <p><span>089</span></p>
          </li>
        </ul>
        <div class="padding-96">
        <div class="padding-116">
          <h3 id="c031">
            3.3.2 函数的奇偶性<span class="fontsz2">＞＞＞</span>
          </h3>
@@ -66,6 +66,14 @@
            函数<i>f</i>（<i>x</i>）=|<i>x</i>|和<i>g</i>（<i>x</i>）=<i>x</i
            ><sup>2</sup>的图像的对称性如何？
          </p>
          <textarea
            cols="30"
            rows="4"
            v-model="chapterData.txtOne"
            placeholder="请输入内容"
            class="w100 ta-br textarea-text"
            @input="handleChapterData"
          ></textarea>
          <p class="left">
            <img class="img-gn" alt="" src="../../assets/images/tjfx.jpg" />
          </p>
@@ -104,7 +112,7 @@
            >=<i>g</i>（<i>x</i>），即<i>g</i>（-<i>x</i>）=<i>g</i>（<i>x</i>）.
          </p>
          <p>
            这两个函数的图像都关于<i>y</i>轴对称；当自变量取定义域中任意一对相反数时，对应的函数值都相等，这种函数就是偶函数.
            这两个函数的图像都关于 <i>y</i> 轴对称；当自变量取定义域中任意一对相
          </p>
        </div>
      </div>
@@ -116,7 +124,8 @@
          <li>数学.基础模块</li>
          <li></li>
        </ul>
        <div class="padding-96">
        <div class="padding-116">
          <p class="t0">反数时，对应的函数值都相等，这种函数就是偶函数.</p>
          <p class="left">
            <img class="img-gn" alt="" src="../../assets/images/cxgk.jpg" />
          </p>
@@ -140,13 +149,18 @@
          </p>
          <p class="img fl fl-cn ju-cn">
            <span>图3-15</span>
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectImg ? '点击取消' : '点击收藏'" placement="top-start">
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectImg ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
              :src="chapterData.isCollectImg ? collectCheck : collectImg"
              alt=""
              class="collect-btn"
              @click="handleCollect('img')"
            />
                :src="chapterData.isCollectImg ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('img')"
              />
            </el-tooltip>
          </p>
          <video
@@ -163,23 +177,30 @@
          ></video>
          <p class="img fl fl-cn ju-cn">
            <span>视频：判数函数奇偶性的方法和步骤 </span>
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
              :src="chapterData.isCollectVideo ? collectCheck : collectImg"
              alt=""
              class="collect-btn"
              @click="handleCollect('video')"
            />
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            </el-tooltip>
          </p>
          <p>
            <span class="zt-ls"><b>例1</b></span
            >　根据图3-16中函数的图像，判断哪些函数是偶函数.
          <p class="fl">
            <span>
              <span class="zt-ls"><b>例1</b></span
              >　根据图3-16中函数的图像，判断哪些函数是偶函数.
            </span>
            <span class="btn-box" @click="isShowExampleOne = !isShowExampleOne">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                width="16.501"
                height="16.501"
                viewBox="0 0 20.501 20.501"
              >
                <path
@@ -202,14 +223,30 @@
              的函数图像不关于<i>y</i>轴对称.根据偶函数的图像具有关于<i>y</i>轴对称的特点，图3-16（1）和图3-16（4）的函数是偶函数，图3-16（2）和图3-16（3）的函数不是偶函数.
            </p>
          </div>
          <p>
            <span class="zt-ls"><b>例2</b></span
            >　已知<i>f</i>（<i>x</i>）=|<i>x</i>|+1图像在<i>y</i>轴右边的部分如图3-17所示.试画出这个函数图像在<i>y</i>轴左边的部分.
        </div>
      </div>
    </div>
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <ul class="page-header-box">
          <li>
            <p>第三单元 函数</p>
          </li>
          <li>
            <p><span>091</span></p>
          </li>
        </ul>
        <div class="padding-116">
          <p class="fl">
            <span>
              <span class="zt-ls"><b>例2</b></span>
              　已知<i>f</i>（<i>x</i>）=|<i>x</i>|+1图像在<i>y</i>轴右边的部分如图3-17所示.试画出这个函数图像在<i>y</i>轴左边的部分.
            </span>
            <span class="btn-box" @click="isShowExampleTwo = !isShowExampleTwo">
              <svg
                xmlns="http://www.w3.org/2000/svg"
                width="20.501"
                height="20.501"
                width="16.501"
                height="16.501"
                viewBox="0 0 20.501 20.501"
              >
                <path
@@ -229,20 +266,6 @@
            />
          </p>
          <p class="img">图3-17</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <ul class="page-header-box">
          <li>
            <p>第三单元 函数</p>
          </li>
          <li>
            <p><span>091</span></p>
          </li>
        </ul>
        <div class="padding-96">
          <p v-if="isShowExampleTwo">
            <span class="zt-ls"><b>解</b></span>
            函数<i>f</i>（<i>x</i>）=|<i>x</i>|+1的定义域是（-∞，+∞），因为它是偶函数，所以根据其图像关于<i>y</i>轴对称的特点，即可画出这个函数在<i>x</i>∈（-∞，0］上的图像.
@@ -286,8 +309,8 @@
              >
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18.501"
                  height="18.501"
                  width="16.501"
                  height="16.501"
                  viewBox="0 0 20.501 20.501"
                >
                  <path
@@ -300,8 +323,8 @@
              <span class="btn-box" @click="openThinkingDialog">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18.545"
                  height="20.112"
                  width="16.545"
                  height="18.112"
                  viewBox="0 0 20.545 22.112"
                >
                  <path
@@ -314,8 +337,8 @@
              <span class="btn-box" @click="stepDialog = true">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="17.28"
                  height="19.563"
                  width="15.28"
                  height="17.563"
                  viewBox="0 0 19.28 20.563"
                >
                  <g transform="translate(-109.056 -82.941)">
@@ -341,8 +364,8 @@
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="17.323"
                  height="17.939"
                  width="15.323"
                  height="15.939"
                  viewBox="0 0 18.323 15.939"
                >
                  <g transform="translate(-398 -946)">
@@ -371,10 +394,10 @@
                class="btn-box"
                @click="isShowExampleFour = !isShowExampleFour"
              >
              <svg
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18.501"
                  height="18.501"
                  width="16.501"
                  height="16.501"
                  viewBox="0 0 20.501 20.501"
                >
                  <path
@@ -388,8 +411,8 @@
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="17.323"
                  height="17.939"
                  width="15.323"
                  height="15.939"
                  viewBox="0 0 18.323 15.939"
                >
                  <g transform="translate(-398 -946)">
@@ -418,10 +441,10 @@
                class="btn-box"
                @click="isShowExampleFive = !isShowExampleFive"
              >
              <svg
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="18.501"
                  height="18.501"
                  width="16.501"
                  height="16.501"
                  viewBox="0 0 20.501 20.501"
                >
                  <path
@@ -435,8 +458,8 @@
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="17.323"
                  height="17.939"
                  width="15.323"
                  height="15.939"
                  viewBox="0 0 18.323 15.939"
                >
                  <g transform="translate(-398 -946)">
@@ -515,16 +538,16 @@
            </div>
            <p class="block">
              如果<i>f</i>（<i>x</i>），<i>g</i>（<i>x</i>）都是定义域为<i>D</i>的偶函数，那么<i>f</i>（<i>x</i>）+<i>g</i>（<i>x</i>）和<i>f</i>（<i>x</i>）<i>g</i>（<i>x</i>）仍是偶函数吗？
              <textarea
                cols="30"
                rows="4"
                v-model="chapterData.txtTwo"
                placeholder="请输入内容"
                class="w100 ta-br textarea-text"
                @input="handleChapterData"
              ></textarea>
            </p>
          </div>
          <textarea
            cols="30"
            rows="4"
            v-model="chapterData.txtOne"
            placeholder="请输入内容"
            class="w100 ta-br textarea-text"
            @input="handleChapterData"
          ></textarea>
        </div>
      </div>
    </div>
@@ -535,7 +558,7 @@
          <li>数学.基础模块</li>
          <li></li>
        </ul>
        <div class="padding-96">
        <div class="padding-116">
          <p class="left">
            <img class="img-gn" alt="" src="../../assets/images/stlx.jpg" />
          </p>
@@ -560,14 +583,8 @@
      <iframe
        src="https://www.geogebra.org/calculator"
        frameborder="0"
        class="iframe-box"
        style="width: 100%; min-height: 800px"
      ></iframe>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 解题思路弹窗 -->
    <el-dialog
@@ -578,44 +595,51 @@
    >
      <ul>
        <li v-for="(item, index) in thinkOne" :key="index">
          <div v-if="item.isShow">
          <div v-if="item.isShow" style="display: flex">
            <span class="step-num">
              <span class="step-num-box">{{ index + 1 }}</span>
              <img
                src="../../assets/images/icon/blue-group.png"
                alt=""
                style="margin-right: 10px"
                v-if="index < thinkOne.length - 1"
              />
              <img
                src="../../assets/images/icon/blue.png"
                alt=""
                v-if="index == thinkOne.length - 1"
                style="margin-right: 10px"
              />
            </span>
            <p class="txt-p">{{ item.txt }}</p>
            <div style="text-align: center">
              <svg
                @click="showNext(index + 1)"
                v-if="index != thinkOne.length - 1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                t="1710234570135"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                p-id="5067"
                width="15"
                height="15"
              >
                <path
                  d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
                  fill="#1296db"
                  p-id="5068"
                />
                <path
                  d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
                  fill="#1296db"
                  p-id="5069"
                />
              </svg>
            </div>
          </div>
        </li>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button @click="thinkingDialog = false">取 消</el-button>
        <el-button type="primary" @click="thinkingDialog = false"
          >确 定</el-button
      <div class="bottom-btn" @click="showNext(thinkIndex)">
        <img src="../../assets/images/icon/mouse.png" alt="" v-if="thinkIndex != 3" />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          t="1710234570135"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          p-id="5067"
          width="15"
          height="15"
        >
      </span>
          <path
            d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
            fill="#1296db"
            p-id="5068"
          />
          <path
            d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
            fill="#1296db"
            p-id="5069"
          />
        </svg>
      </div>
    </el-dialog>
    <!-- 解题步骤弹窗 -->
    <el-dialog
@@ -626,42 +650,51 @@
    >
      <ul>
        <li v-for="(item, index) in stepOne" :key="index">
          <div v-if="item.isShow">
          <div v-if="item.isShow" style="display: flex">
            <span class="step-num">
              <span class="step-num-box">{{ index + 1 }}</span>
              <img
                src="../../assets/images/icon/blue-group.png"
                alt=""
                style="margin-right: 10px"
                v-if="index < stepOne.length - 1"
              />
              <img
                src="../../assets/images/icon/blue.png"
                alt=""
                v-if="index == stepOne.length - 1"
                style="margin-right: 10px"
              />
            </span>
            <p class="txt-p">{{ item.txt }}</p>
            <div style="text-align: center">
              <svg
                @click="showNextChange(index + 1)"
                v-if="index != thinkOne.length - 1"
                xmlns="http://www.w3.org/2000/svg"
                xmlns:xlink="http://www.w3.org/1999/xlink"
                t="1710234570135"
                class="icon"
                viewBox="0 0 1024 1024"
                version="1.1"
                p-id="5067"
                width="15"
                height="15"
              >
                <path
                  d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
                  fill="#1296db"
                  p-id="5068"
                />
                <path
                  d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
                  fill="#1296db"
                  p-id="5069"
                />
              </svg>
            </div>
          </div>
        </li>
      </ul>

      <span slot="footer" class="dialog-footer">
        <el-button @click="stepDialog = false">取 消</el-button>
        <el-button type="primary" @click="stepDialog = false">确 定</el-button>
      </span>
      <div class="bottom-btn" @click="showNextChange(stepIndex)">
        <img src="../../assets/images/icon/mouse.png" alt="" v-if="stepIndex != 2" />
        <svg
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
          t="1710234570135"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          p-id="5067"
          width="15"
          height="15"
        >
          <path
            d="M2.257993 493.371555 415.470783 906.584344 512 1003.113561 608.529217 906.584344 1021.742007 493.371555 925.212789 396.842337 512 810.055127 98.787211 396.842337Z"
            fill="#1296db"
            p-id="5068"
          />
          <path
            d="M2.257993 117.980154 415.470783 531.192944 512 627.722161 608.529217 531.192944 1021.742007 117.980154 925.212789 21.450937 512 434.663727 98.787211 21.450937Z"
            fill="#1296db"
            p-id="5069"
          />
        </svg>
      </div>
    </el-dialog>
  </div>
</template>
@@ -701,10 +734,13 @@
      stepDialog: false,
      videoPath: "",
      questionData: [],
      stepIndex: 1,
      thinkIndex:1,
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
        txtTwo: "",
      },
      thinkOne: [
        {
@@ -796,27 +832,52 @@
      const number = this.thinkOne.findIndex((item, index) => index == num);
      console.log(number);
      this.thinkOne[number].isShow = true;
      if(this.thinkIndex <= 2) {
        this.thinkIndex ++
      }
    },
    showNextChange(num) {
      const number = this.stepOne.findIndex((item, index) => index == num);
      this.stepOne[number].isShow = true;
      if(this.stepIndex < 2) {
        this.stepIndex ++ 
      }
    },
  },
};
</script>

<style lang="less" scoped>
p {
  font-size: 18px;
  text-align: justify;
}
.iframe-box {
  width: 100%;
  min-height: 800px;
  border: 1px solid #8281ed;
  border: 1px solid #00a1e9;
  border-radius: 10px;
}
li {
  list-style: none;
}
.txt-p {
  margin-top: 0;
  border-bottom: 1px dashed #000;
  padding: 10px 0;
}
.bottom-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.step-num {
  position: relative;
  .step-num-box {
    position: absolute;
    top: 16px;
    left: 13px;
    color: #fff;
  }
}
</style>