数学收藏优化

闫增涛

2024-06-17 b2192de76696d2612ce78192f211694b2b5e8920

 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>
@@ -138,14 +147,21 @@
              style="width: 40%"
            />
          </p>
          <p class="img fl al-cn ju-cn">
          <p class="img fl fl-cn ju-cn">
            <span>图3-15</span>
            <img
              :src="chapterData.isCollectImg ? collectCheck : collectImg"
              alt=""
              class="collect-btn"
              @click="handleCollect('img')"
            />
            <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')"
              />
            </el-tooltip>
          </p>
          <video
            :src="videoPath"
@@ -159,23 +175,32 @@
            controlslist="nodownload"
            class="video-border w100"
          ></video>
          <p class="img fl al-cn ju-cn">
          <p class="img fl fl-cn ju-cn">
            <span>视频：判数函数奇偶性的方法和步骤 </span>
            <img
              :src="chapterData.isCollectVideo ? collectCheck : collectImg"
              alt=""
              class="collect-btn"
              @click="handleCollect('video')"
            />
            <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')"
              />
            </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
@@ -198,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
@@ -225,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］上的图像.
@@ -282,8 +309,8 @@
              >
                <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
@@ -296,8 +323,8 @@
              <span class="btn-box" @click="openThinkingDialog">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20.545"
                  height="22.112"
                  width="16.545"
                  height="18.112"
                  viewBox="0 0 20.545 22.112"
                >
                  <path
@@ -310,8 +337,8 @@
              <span class="btn-box" @click="stepDialog = true">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="19.28"
                  height="20.563"
                  width="15.28"
                  height="17.563"
                  viewBox="0 0 19.28 20.563"
                >
                  <g transform="translate(-109.056 -82.941)">
@@ -337,8 +364,8 @@
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="18.323"
                  height="18.939"
                  width="15.323"
                  height="15.939"
                  viewBox="0 0 18.323 15.939"
                >
                  <g transform="translate(-398 -946)">
@@ -369,8 +396,8 @@
              >
                <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
@@ -384,8 +411,8 @@
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="18.323"
                  height="18.939"
                  width="15.323"
                  height="15.939"
                  viewBox="0 0 18.323 15.939"
                >
                  <g transform="translate(-398 -946)">
@@ -416,8 +443,8 @@
              >
                <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
@@ -431,8 +458,8 @@
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="18.323"
                  height="18.939"
                  width="15.323"
                  height="15.939"
                  viewBox="0 0 18.323 15.939"
                >
                  <g transform="translate(-398 -946)">
@@ -509,18 +536,18 @@
                />
              </p>
            </div>
            <p class="block">
            <p class="block tl">
              如果<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>
@@ -531,13 +558,15 @@
          <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>
          <div class="bj">
            <examinations
              :cardList="questionData"
              :hideCollect="true"
              inputBc="#d3edfa"
              v-if="questionData"
              :isReal="false"
            ></examinations>
@@ -548,116 +577,240 @@

    <!-- 函数控件弹窗 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="60%"
      :append-to-body="true"
      :show-close="false"
    >
    <div slot="title" style="padding: 0 0 15px 0;position: relative;">
        <svg
          style="position: absolute; right:10px;cursor: pointer;"
          @click="dialogVisible = false"
          t="1718596022986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4252"
          width="20"
          height="20"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
            fill="#979797"
            p-id="4253"
          ></path>
          <path
            d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
            fill="#979797"
            p-id="4254"
          ></path>
        </svg>
      </div>
      <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
      title="解题思路"
      :visible.sync="thinkingDialog"
      width="40%"
      :append-to-body="true"
      :show-close="false"
    >
      <div slot="title" style="padding: 0; text-align: center; color: #333;display:flex;justify-content: center;">
        <span style=""> 解题思路 </span>
        <svg
          style="position: absolute; right:10px;cursor: pointer;"
          @click="thinkingDialog = false"
          t="1718596022986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4252"
          width="20"
          height="20"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
            fill="#979797"
            p-id="4253"
          ></path>
          <path
            d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
            fill="#979797"
            p-id="4254"
          ></path>
        </svg>
      </div>
      <ul>
        <li v-for="(item, index) in thinkOne" :key="index">
          <div v-if="item.isShow">
            <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"
          <div v-if="item.isShow" style="display: flex">
            <span style="position: relative">
              <span
                style="position: absolute; top: 16px; left: 13px; color: #fff"
                >{{ index + 1 }}</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>
              <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>
        </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
        @click="showNext(thinkIndex)"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <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
      class="stepDialog"
      title="解题步骤"
      :visible.sync="stepDialog"
      width="40%"
      :append-to-body="true"
      :show-close="false"
    >
      <div slot="title" style="padding: 0; text-align: center; color: #333;display:flex;justify-content: center;">
        <span>
          解题步骤
        </span>
        <svg
          style="position: absolute; right:10px;cursor: pointer;"
          @click="stepDialog = false"
          t="1718596022986"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4252"
          width="20"
          height="20"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <path
            d="M176.661601 817.172881C168.472798 825.644055 168.701706 839.149636 177.172881 847.338438 185.644056 855.527241 199.149636 855.298332 207.338438 846.827157L826.005105 206.827157C834.193907 198.355983 833.964998 184.850403 825.493824 176.661601 817.02265 168.472798 803.517069 168.701706 795.328267 177.172881L176.661601 817.172881Z"
            fill="#979797"
            p-id="4253"
          ></path>
          <path
            d="M795.328267 846.827157C803.517069 855.298332 817.02265 855.527241 825.493824 847.338438 833.964998 839.149636 834.193907 825.644055 826.005105 817.172881L207.338438 177.172881C199.149636 168.701706 185.644056 168.472798 177.172881 176.661601 168.701706 184.850403 168.472798 198.355983 176.661601 206.827157L795.328267 846.827157Z"
            fill="#979797"
            p-id="4254"
          ></path>
        </svg>
      </div>
      <ul>
        <li v-for="(item, index) in stepOne" :key="index">
          <div v-if="item.isShow">
            <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"
          <div v-if="item.isShow" style="display: flex">
            <span style="position: relative">
              <span
                style="position: absolute; top: 16px; left: 13px; color: #fff"
                >{{ index + 1 }}</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>
              <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>
        </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
        @click="showNextChange(stepIndex)"
        style="
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
        "
      >
        <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>
@@ -697,10 +850,13 @@
      stepDialog: false,
      videoPath: "",
      questionData: [],
      stepIndex: 1,
      thinkIndex: 1,
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
        txtTwo: "",
      },
      thinkOne: [
        {
@@ -792,27 +948,54 @@
      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;
  }
}
.stepDialog {
}
</style>