优化

unknown

2024-06-14 828bae289890b1e3a3ab0f0645af741d1b749bcd

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

@@ -149,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
@@ -172,19 +177,24 @@
          ></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  class="fl">
          <p class="fl">
            <span>
              <span class="zt-ls"><b>例1</b></span
                >　根据图3-16中函数的图像，判断哪些函数是偶函数.
              >　根据图3-16中函数的图像，判断哪些函数是偶函数.
            </span>
            <span class="btn-box" @click="isShowExampleOne = !isShowExampleOne">
              <svg
@@ -229,10 +239,9 @@
        <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 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"
@@ -385,7 +394,7 @@
                class="btn-box"
                @click="isShowExampleFour = !isShowExampleFour"
              >
              <svg
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16.501"
                  height="16.501"
@@ -432,7 +441,7 @@
                class="btn-box"
                @click="isShowExampleFive = !isShowExampleFive"
              >
              <svg
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="16.501"
                  height="16.501"
@@ -574,14 +583,8 @@
      <iframe
        src="https://www.geogebra.org/calculator"
        frameborder="0"
        style="  width: 100%;min-height: 800px;"
        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
@@ -592,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
@@ -640,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>
@@ -715,11 +734,13 @@
      stepDialog: false,
      videoPath: "",
      questionData: [],
      stepIndex: 1,
      thinkIndex:1,
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
        txtTwo:"",
        txtTwo: "",
      },
      thinkOne: [
        {
@@ -811,10 +832,16 @@
      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 ++ 
      }
    },
  },
};
@@ -829,14 +856,28 @@
  width: 100%;
  min-height: 800px;
  border: 1px solid #00a1e9;
  border-radius:10px
  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>