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

user1

2024-06-13 870e0b3c8361cfa8af3facf67b08f1f5be66252a

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

 src/App.vue

@@ -8,11 +8,8 @@
      v-if="activeBook.name == 'sportsAndHealth'"
    ></sportsAndHealth>
    <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance>

    <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama>

    <math v-if="activeBook.name == 'math'"></math>

    <mathBook v-if="activeBook.name == 'math'"></mathBook>
  </div>
</template>

@@ -23,8 +20,8 @@
import english from "./books/English/view/index.vue";
import sportsAndHealth from "./books/sportsAndHealth/view/index";
import artAndDance from './books/artAndDance/view/index.vue'
import mathBook from './books/math/view/index.vue'
import artAndDrama from './books/artAndDrama/view/index.vue'
import math from './books/math/view/index.vue'
export default {
  name: "App",
  components: {
@@ -34,8 +31,8 @@
    english,
    sportsAndHealth,
    artAndDance,
    artAndDrama,
    math
    mathBook,
    artAndDrama
  },
  data() {
    return {
@@ -81,6 +78,7 @@
        // english
        // artAndDance
        // artAndDrama
        // math
        this.config.resourceCtx + "artAndDrama"
      );
      // 测试试读30页

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

@@ -2672,6 +2672,7 @@
      };
    },
    setBookQuestion() {
      console.log('保存');
      localStorage.setItem(
        "english-book-question-one",
        JSON.stringify(this.questionData)

 src/books/math/assets/images/0100-1.jpg

 src/books/math/assets/images/0100-2.jpg

 src/books/math/assets/images/0100-3.jpg

 src/books/math/assets/images/0101-1.jpg

 src/books/math/assets/images/0101-2.jpg

 src/books/math/assets/images/0102-1.jpg

 src/books/math/assets/images/0102-2.jpg

 src/books/math/assets/images/0103-1.jpg

 src/books/math/assets/images/0103-2.jpg

 src/books/math/assets/images/Covers.png

 src/books/math/assets/images/cxgk.jpg

 src/books/math/assets/images/dy1.jpg

 src/books/math/assets/images/dy3.jpg

 src/books/math/assets/images/hzjl.jpg

 src/books/math/assets/images/icon/heart-check.png

 src/books/math/assets/images/icon/heart.png

 src/books/math/assets/images/question/0103-1-1.png

 src/books/math/assets/images/question/0103-1-2.png

 src/books/math/assets/images/question/0103-1-3.png

 src/books/math/assets/images/question/0103-1-4.png

 src/books/math/assets/images/stlx.jpg

 src/books/math/assets/images/tbts.jpg

 src/books/math/assets/images/tjfx.jpg

 src/books/math/assets/images/wttc.jpg

 src/books/math/assets/images/xxmb.jpg

 src/books/math/assets/main.less

@@ -2,331 +2,387 @@
  width: 100%;
  height: 100%;
  font-family: "宋体", SimSun, sans-serif;
  ul {
    list-style-type: none;
  }

  li {
    list-style-type: none;
  }

  .ls1 {
    font-family: "HiFont Hei GB";
    color: #30aad1;
    font-weight: bold;
  }
  .hs {
    font-family: "HiFont Hei GB";
    color: #ea6b00;
    font-weight: bold;
  }

  .zs1 {
    font-family: "HiFont Hei GB";
    color: #857eb4;
    font-weight: bold;
  }

  span.under1 {
    border-bottom: 2px solid #f0bd4a;
    border-width: 2px;
  }

  div.bodystyle {
    font-size: 18px;
    text-align: justify;
    margin: 5%;
    line-height: 30px;
  }

  span.zt-0 {
    color: #0087af;
  }

  p.pzt-0 {
    color: #0087af;
    font-size: 18px;
  }
  p.pzt-0-right {
    font-size: 18px;
    color: #0087af;
    text-align: right;
  }
  p.pzt-1 {
    font-weight: bold;
    color: #0087af;
    font-size: 18px;
  }

  .note {
  mn{
    font-size:1em;
    }
    mi{
    font-size:1em;
    }
    
        ul {
            list-style-type:none;
        }
    
        li {
            list-style-type:none;
        }
    
    div.bodystyle {
      font-family:'FZLTXIHJW',"Times New Roman";
      font-size:18px;
      text-align:justify;
      margin:5%;
      line-height:30px;
    }
    .info {
        position: relative;
    }
    
    
    .em_circle {
      text-decoration:dashed;
    }
    
    .fieldset {
      background: #E7F4FC;
      padding:1em;
      border-radius: 5px;
      border-radius: 0.6em;
    }
    
    .inline{
    height:1.2em;
      vertical-align:top;
    
    }
    .inline2{
    height:2.9em;
    margin-top:2em;
    margin-bottom:-0.4em;
    }
    .imz{
         height:96%;
         text-align:center;
    
    
    }
    
    .note{
    font-size: 0.85em;
  }

  .img {
    }
    
    
    .block{
      font-family:"STKaiti";
    }
    
    .block1
    {
      font-family:"STKaiti";
      text-align:right;
      margin-left:0%;
      margin-right:2em;
    }
    
    .block2
    {
      font-family:"STKaiti";
      text-indent:0em;
      text-align:center;
      margin-left:0%;
      margin-right:0%;
    }
    
    .block3
    {
      font-family:"STKaiti";
      text-align:left;
      text-indent:0em;
      margin-left:0%;
      margin-right:0%;
    
    }
    
    .img{color:#146Eb4;
    text-align: center;
    font-size:18px;
    color: #000;
    margin-left: 0%;
    margin-right: 0%;
    font-size:0.85em;
    text-indent: 0em;
  }

  .img1 {
    text-align: right;
    font-size: 0.85em;
    margin-left: 0%;
    margin-right: 2em;
    text-indent: 0em;
  }

  p {
    // margin-top: 1em;
    margin: 0;
    text-indent: 2em;
    line-height: 30px;
    font-size: 18px;
    text-align: justify;
  }
  .cover {
    width: 100%;
    padding: 0px;
  }
  .center {
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    text-indent: 0em;
  }

  .center1 {
    font-family: "STKaiti";
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    text-indent: 0em;
  }

  .left {
    text-indent: 0em;
    margin-left: 0%;
    margin-right: 0%;
  }
  .right {
    text-align: right;
    margin-left: 0%;
    margin-right: 0%;
  }
  .right1 {
    font-family: "STKaiti";
    text-align: right;
    margin-left: 0%;
    margin-right: 0%;
  }
  .quote {
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: 1em;
    margin-right: 1em;
    text-align: justify;
    font-family: "cnepub", serif;
  }
  h1 {
    font-family: "STKaiti";
    text-align: center;
    font-size: 1.8em;
    color: #515594;
    margin-bottom: 0.5cm;
    margin-top: 0.5cm;
  }

  h2 {
    font-family: "STKaiti";
    text-align: center;
    font-size: 1.2em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    text-indent: 0em;
  }

  h2.lefth2 {
    text-align: left;
    font-size: 1.2em;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    text-indent: 0em;
  }

  h2.whleft2 {
    text-align: left;
    color: #af0206;
    font-size: 38px;
    margin-top: 0.2em;
    margin-bottom: 0.2em;
    text-indent: 0em;
  }

  h3 {
    font-family: "STKaiti";
    color: #ef495d;
    font-weight: bold;
    // font-size: 1.15em;
    font-size: 26px;
    margin-top: 2em;
    text-align: center;
    margin-bottom: 20px;
    text-indent: 0em;
  }

  h4 {
    font-weight: bold;
    color: #5877ba;
    font-size: 1.1em;
    margin-top: 0.2em;
    margin-bottom: 1em;
    text-indent: 0em;
  }
  h5 {
    font-weight: bold;
    color: #c96653;
    font-size: 1em;
    margin-top: 0.2em;
    margin-bottom: 1em;
    text-indent: 2em;
  }
  h6 {
    font-family: "cnepub", serif;
    color: #36c3f4;
    font-size: 1.1em;
    margin-top: 10px;
    text-indent: 2em;
    margin-bottom: 10px;
  }
  .u {
    text-decoration: underline;
  }

  .img-0 {
    width: 100%;
  }
  .imz {
    width: 96%;
    text-align: center;
  }

  .img-a {
    width: 95%;
  }
  .img-b {
    width: 80%;
  }
  .img-c {
    width: 70%;
  }
  .img-d {
    width: 60%;
  }
  .img-e {
    width: 50%;
  }
  .img-f {
    width: 40%;
  }
  .img-g {
    width: 30%;
  }
  .img-gh1 {
    width: 30%;
    text-align: right;
  }
  .img-gh2 {
    width: 45%;
    text-align: right;
  }
  .img-h {
    width: 25%;
  }
  .img-i {
    width: 10%;
  }
  .img-j {
    width: 5%;
  }
  .img-gn {
    width: 48%;
  }
  .img-gn1 {
    width: 18%;
  }
  .inline {
    height: 2em;
    margin-bottom: -0.5em;
  }
  .inline1 {
    height: 1.5em;
    margin-top: -1em;
    margin-bottom: -0.4em;
  }
  .inline2 {
    height: 2.5em;
    margin-top: 2em;
    margin-bottom: -0.4em;
  }
  .inline3 {
    height: 4em;
    margin-top: 2em;
    margin-bottom: -0.4em;
  }
  .block {
    font-family: "STKaiti";
    font-size: 1.15em;
  }

  .block1 {
    font-family: "STKaiti";
    color: #08a496;
    text-align: right;
    font-size: 1.15em;
    margin-right: 2em;
    text-indent: 0em;
  }
  .block2 {
    font-family: "STKaiti";
    // font-size: 1.15em;
    font-size: 26px;
    text-align: center;
    text-indent: 0em;
    margin: 6px 0;
  }

  .bj1 {
    border: 2px solid #0aa19c;
    background: #e3efd7;
    border-style: solid none none none;
    padding: 0.2em 0.4em 0.2em 0.4em;
    margin-top: 1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-bottom: 1em;
    font-size: 1.1em;
    box-shadow: 0.3em 0.3em 0px 0px #c3c2c0;
  }

  .bj2 {
    border: 2px solid #e04239;
    background: #fdecd2;
    border-style: solid none none none;
    padding: 0.2em 0.4em 0.2em 0.4em;
    margin-top: 1em;
    margin-left: 0.5em;
    margin-right: 0.5em;
    margin-bottom: -0.8em;
    font-size: 1.1em;
    box-shadow: 0.3em 0.3em 0px 0px #c3c2c0;
  }

  .kaiti {
    font-family: "STKaiti";
  }
    }
    
    body {
      font-family:"Times New Roman", "����";
    }
    
    
    
    
    p
    {
      margin-top: 0.5em;
      text-indent: 2em;
      line-height: 1.5em;
    }
    .cover {
      width:100%;
      padding:0px;
    }
    .center {
      text-align: center;
      margin-left: 0%;
      margin-right: 0%;
      text-indent: 0em
    }
    .left1 {
      text-indent: 1em;
      text-align: left;
    }
    .left {
      text-indent: 0em;
      margin-left: 0%;
      margin-right: 0%;
    }
    .right {
      text-align: right;
      margin-left: 0%;
      margin-right: 0%;
    }
    .quote {
      margin-top: 0%;
      margin-bottom: 0%;
      margin-left: 1em;
      margin-right: 1em;
      text-align: justify;
      font-family:"Times New Roman", "����";
    }
    h1 {
      color: #9f052f;
      font-family:"Times New Roman", "����";
      text-align: center;
      font-size:1.5em;
      margin-top: 1em;
      margin-bottom: 1em;
      font-family:"Times New Roman", "����";
    }
    
    h2 {
      font-family:"Times New Roman", "����";
      font-weight:bold;
      font-size:1.3em;
      margin-top: 1em;
      margin-bottom: 0.2em;
    }
    h3 {
    
      font-family:"Times New Roman", "����";
      text-align: left;
      font-size:1.2em;
      margin-top: 1em;
      margin-bottom: 0.2em;
    }
    h4 {
    
      font-family:"Times New Roman", "����";
      color: #00A1E9;
      text-align: left;
      font-weight:bold;
      font-size:medium;
      margin-top: 1em;
      margin-bottom: 0.2em;
    }
    h5 {
    
      font-family:"Times New Roman", "����";
      text-align: left;
      font-weight:bold;
      font-size:small;
      margin-top: 0.8em;
      margin-bottom: 0.2em;
    }
    h6 {
    
      font-family:"Times New Roman", "����";
      text-align: left;
      font-weight:bold;
      font-size:x-small;
      margin-top: 1em;
      margin-bottom: 0.2em;
    }
    .u { 
    
          text-decoration: underline; }
    
    .img-0{	
    width:100%;
    }
    .img-a{	
      width:90%;
    }
    .img-b{
      width:80%;
    }
    .img-c{	
      width:70%;
    }
    .img-d{	
      width:60%;
    }
    .img-e{	
      width:50%;
    }
    .img-f{	
      width:40%;
    }
    .img-g{	
      width:30%;
    }
    .img-h{	
      width:20%;
    }
    .img-i{       
      width:10%;
    }
    .img-j{        
      width:5%;
    }
    .img-n{        
      height:1em;
    }
    
    .img-gn{	
      height:3em;
    }
    .img-gn1{	
      height:2.2em;
    }
    .img-gn2{
      height:1.9em;
    }
    .border-1{
      border: 1px solid #E6E6FA;
      background-color:#E6E6FA;
      border-radius: 0.6em;
      padding-top: 30%;
      padding-bottom: 70%;
      margin: 20% 10% 20% 10%;
    }
    .border-2{
      border: 1px solid #FFF5EE;
      background-color:#FFF5EE;
      border-radius: 0.6em;
      padding-top: 30%;
      padding-bottom: 70%;
      margin: 20% 10% 20% 10%;
    }
    /*�»���*/
    .em_dot {
      -webkit-text-emphasis-style:dot;
         -moz-text-emphasis-style:dot;
          -ms-text-emphasis-style:dot;
              text-emphasis-style:dot;
      -webkit-text-emphasis-position:under;
         -moz-text-emphasis-position:under;
          -ms-text-emphasis-position:under;
              text-emphasis-position:under;
    }
    blockquote.kindle-cn-blockquote {
      background: #f9f9f9;
      border-left: 0.5em solid #ccc;
      margin: 1.5em;
      padding: 1em;
      text-indent:2em;
      line-height:1.5em;
    }
    div.bj{    background-color:#D3EDFA;
      padding: 0.3em;
      margin-top:1em;
      margin-bottom:1em;
    }
    .hs
    {
      font-family:"Times New Roman", "����";
      color:red;
    }
    
    
    .zt-ls{
      color: #00A1E9;
    }
    .zt-ls1{
      color: #00A1E9;
      font-weight:bold;
      font-size:0.9em;
    }
    
    .zt-ls2{
      font-family:'FZLTXIHJW',"Times New Roman";
      color: #00A1E9;
      font-weight:bold;
    }
    
    .fontsz1
    {
      color: #00A1E9;
      font-size:0.8em;
    }
    .fontsz2
    {
      color: #00A1E9;
      font-size:0.6em;
    }
    
    
    div.bk-hzjl{
      border:2px solid #00A1E9;
      background:#F6FBFF;
      border-radius: 0 0 0 5px;
      padding:15px;
      margin-bottom:2em;
      margin-top:2em;
      border-radius:0em 0em 2em 0em;
    }
    
    div.bj1-hzjl{
      padding:0.01em 1em 0.01em 1em;
      margin-top:-2.4em;
      margin-left:-0.5em;
      margin-right:-1em;
    }
    
    div.bk{
      border:2px solid #00A1E9;
      padding:0.8em;
      margin-bottom:2em;
      margin-top:2em;
      box-shadow: inset -0.5em -0.5em 0 0 #E0F2FC;
    }
    
    div.bj1{
      padding:0.01em 1em 0.01em 1em;
      margin-top:-2.6em;
      margin-left:-0.5em;
      margin-right:-1em;
    }
    
    
    p.bj2{
      background-color:#81CFF5;
      color:#FFFFFF;
      display: inline-block;
      padding:1px;
      font-size: 1.1em;
      padding: 3px 10px 3px 10px;
      font-weight: bold;
      box-shadow: -0.3em -0.3em 0px 0px #2FBDEF; 
      margin: 0;
      text-indent: 0em;
      margin-top:1em;
      margin-bottom:1em;
    }
    
    .bj-sp{
      background-color:#FFFFFF;
      color:#53C3F1;
      padding:0.3em 1em 0.3em 1em;
      margin-top:0em;
      margin-left:-3em;
    }
    
    .fieldset1 {
      border:2px solid #33BCF0;
      padding:1em;
      border-radius: 5px;
      border-radius: 0.6em;
    }

  // 自定义
  .page-box {
@@ -418,6 +474,9 @@
  .fl-cn {
    align-items: center;
  }
  .al-end {
    align-items: flex-end;
  }
  .fz-18 {
    font-size: 18px;
  }
@@ -485,54 +544,73 @@
  .lh2 {
    line-height: 2em;
  }

  .header-box {
    position: relative;
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
  }

  .header-border-box {
    width: 90%;
    height: 100px;
    border-bottom: 1px solid #00aeef;
    border-left: 1px solid #00aeef;
  }

  .header-num-box {
    box-sizing: border-box;
    position: absolute;
    top: 50px;
    width: 100%;
    height: 26px !important;
    line-height: 26px;
    background-color: #15c0f2;
    color: #fff;
    padding-left: 50px;
  }
  // 奇数页页眉
  .page-header-box {
    padding-top: 96px;
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    height: 104px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 28px;
    li:first-child {
      height: 100%;
      width: 88%;
      display: flex;
      align-items: flex-end;
      P {
        margin: 0 !important;
        width: 100%;
        height: 24px;
        background-color: #97a4d3;
        text-align: right;
        padding-right: 20px;
        color: #fff;
      }
    }
    li:last-child {
      margin-left: 20px;
      p {
        margin: 0 !important;
        height: 100%;
        padding:0 4px;
        width: min-content;
        border: 1px solid #7b8cc5; 
        text-indent: 0em;
        display: flex;
        align-items: flex-end;
        justify-content: center;
      }
    }
  }
  .page-header-text {
    color: #616161;
    font-size: 14px;
  }
  .page-header-num {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    box-sizing: border-box;
    background-color: #15c0f2;
    color: #fff;
    margin-left: 20px;
    font-weight: bold;
  .page-header-odd {
    margin: 0;
    margin-bottom: 20px;
    width: 100%;
    height: 104px;
    display: flex;
    justify-content: space-between;
    li:first-child {
      border: 1px solid #7b8cc5;
      width: 15%;
      height: 24px;
      text-align: right;
      padding-right: 4px;
      box-sizing: border-box;
    }
    li:nth-child(2) {
      padding: 0 4px;
      min-width:132px;
      height: 24px;
      border: 1px solid #7b8cc5;
      text-align: center;
      box-sizing: border-box;
      color: #5f7abc;
      font-weight: bold;
    }
    li:last-child {
      width: 64%;
      height: 24px;
      background-color: #97a4d3;
    }
  }
  .fw-b {
    font-weight: bold;
@@ -582,7 +660,8 @@
    color: #15c0f2;
  }
  .video-border {
    border: 1px dotted #15c0f2;
    border: 1px solid #15c0f2;
    border-radius: 30px;
  }
  .fm-st {
    font-family: "STKaiti";
@@ -653,6 +732,39 @@
  a {
    cursor: default;
  }
  ul {
    list-style: none;
  }
  li {
    list-style: none !important;
  }
  .collect-btn {
    cursor: pointer;
    width: 20px;
    height: 20px;
    margin-left: 10px;
  }
  // 显示答案按钮
  .btn-box {
    margin-left: 5px;
    cursor: pointer;
    text-indent: 0;
    display: inline-block;
    border:1px solid #8281ED;
    height: 22px;
    padding: 5px;
    background-color:#8281ED ;
    border-radius: 5px;
    svg {
      fill: #fff;
    }
    &:hover {
      background-color: #fff;
      svg {
        fill:#8281ED ;
      }
    }
  }
}

/* 媒体查询做基础响应式布局 */
@@ -667,13 +779,13 @@
  }
}
@media (max-width: 660px) {
  .ans-dance {
  .math-book {
    /* 分页padding */
    .page-padding {
      padding: 104px 20px;
    }
    .padding-96 {
      padding: 0 20px;
      padding: 0 20px 40px 20px;
    }
    /* video大小 */
    .video-box {
@@ -692,12 +804,12 @@
  }
}
@media (min-width: 660px) {
  .ans-dance {
  .math-book{
    .page-padding {
      padding: 104px 96px;
    }
    .padding-96 {
      padding: 0 96px;
      padding: 0 96px 104px 96px;
    }
    .video-box {
      max-width: 370px;

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

New file
@@ -0,0 +1,812 @@
<template>
  <div class="chapter" num="2">
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <h1 id="a007">
          <img class="img-0" alt="" src="../../assets/images/dy3.jpg" />
        </h1>
        <div class="padding-96">
          <p>
            在客观世界中存在各种各样的运动变化现象.如搭载神舟十四号载人飞船的长征二号运载火箭发射过程中，飞船与发射点距离会随着时间的变化而变化；深海勇士号载人潜水器在下潜实验过程中，其压强随着下潜深度的增加而增大；代表新能源技术的光伏发电和风能发电，我国的装机容量随时间变化而增长；我国快速发展的高速铁路，其总里程是逐年增加的，现已突破4万km
            ，稳居世界第一；每个人的体温随着时间的变化而变化；到商店购买同一种饮料的数量越多，付费越多等.这些动态变化现象都表现为变量之间的对应关系，我们常用函数模型来描述这些变量之间的关系和规律，并通过研究函数来认识客观世界.
          </p>
          <p>
            函数是描述客观世界变化规律和解决数学问题的重要工具.它与代数式、方程、不等式等知识联系紧密，是进一步学习数学的重要基础.函数的概念及其反映的数学思想和方法已广泛渗透到数学的各个领域，并在现实生活中有着广泛的应用.
          </p>
          <p>
            本单元主要学习函数的概念、函数的表示方法、函数的单调性和奇偶性以及函数的应用.本单元的学习，重在感受用直观想象从具体问题中抽象出数学问题，并用精确的数学符号语言表达概念、性质、推理等；掌握研究函数的基本内容、过程和方法；运用建立分段函数、二次函数等数学模型解决实际问题的方法；积累一定的数学经验和方法，提升直观想象、数学抽象、数学建模、逻辑推理等核心素养.
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <div class="padding-96">
          <p class="left">
            <img class="inline2" alt="" src="../../assets/images/xxmb.jpg" />
          </p>
          <div class="fieldset">
            <p>1.函数的概念.</p>
            <p>
              能从具体情境中抽象概括出函数的概念，学习用集合语言和对应关系描述函数概念.
            </p>
            <p>2.函数的表示方法.</p>
            <p>了解函数的三种表示方法，会恰当地选用这些方法表示函数；</p>
            <p>理解分段函数的概念；</p>
            <p>通过研究函数的变化规律来把握客观世界中事物的变化规律.</p>
            <p>3.函数的单调性和奇偶性.</p>
            <p>
              学习用精准的数学符号语言描述函数的性质，掌握判断函数单调性和奇偶性的方法.
            </p>
            <p>4.函数的应用.</p>
            <p>初步掌握建立分段函数、二次函数模型来解决实际问题的方法；</p>
            <p>能运用函数的思想和方法解决实际问题，提升核心素养和思维品质.</p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <ul class="page-header-box">
          <li>
            <p>第三单元 函数</p>
          </li>
          <li>
            <p><span>089</span></p>
          </li>
        </ul>
        <div class="padding-96">
          <h3 id="c031">
            3.3.2 函数的奇偶性<span class="fontsz2">＞＞＞</span>
          </h3>
          <p class="left">
            <img class="img-gn" alt="" src="../../assets/images/wttc.jpg" />
          </p>
          <p>
            函数<i>f</i>（<i>x</i>）=|<i>x</i>|和<i>g</i>（<i>x</i>）=<i>x</i
            ><sup>2</sup>的图像的对称性如何？
          </p>
          <p class="left">
            <img class="img-gn" alt="" src="../../assets/images/tjfx.jpg" />
          </p>
          <p>
            列出表3-11和表3-12，画出函数<i>f</i>（<i>x</i>）=|<i>x</i>|
            和<i>g</i>（<i>x</i>）=<i>x</i><sup>2</sup>的图像，如图3-14（1）
            和（2） 所示.
          </p>
          <p class="img">表3-11</p>
          <p class="center">
            <img class="img-a" alt="" src="../../assets/images/0100-1.jpg" />
          </p>
          <p class="img">表3-12</p>
          <p class="center">
            <img class="img-a" alt="" src="../../assets/images/0100-2.jpg" />
          </p>
          <iframe
            src="https://www.geogebra.org/calculator"
            frameborder="0"
            class="iframe-box"
          ></iframe>
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/0100-3.jpg" />
          </p>
          <p class="img fl al-cn ju-cn">
            <span>图3-14 </span
            ><img
              :src="chapterData.isCollectImg ? collectCheck : collectImg"
              alt=""
              class="collect-btn"
              @click="handleCollect('img')"
            />
          </p>
          <p>
            观察图3-14（1）
            发现，函数<i>f</i>（<i>x</i>）=|<i>x</i>|的定义域是（-∞，+∞），函数图像关于<i>y</i>轴对称.从表3-11中还发现，当自变量取一对相反数时，对应的函数值相等，如<i>f</i>（-1）=<i>f</i>（1）=1，<i>f</i>（-2）=<i>f</i>（2）=2，<i>f</i>（-3）=<i>f</i>（3）=3，…实际上，对任意<i>x</i>∈（-∞，+∞），都有<i>f</i>（-<i>x</i>）=|-<i>x</i>|=|<i>x</i>|=<i>f</i>（<i>x</i>），即<i>f</i>（-<i>x</i>）=<i>f</i>（<i>x</i>）.
          </p>
          <p>
            图3-14（2） 中，函数<i>g</i>（<i>x</i>）=<i>x</i
            ><sup>2</sup
            >的定义域是（-∞，+∞），函数图像也关于<i>y</i>轴对称.表3-12中，当自变量取一对相反数时，对应的函数值相等，如<i>g</i>（-1）=<i>g</i>（1）=1，<i>g</i>（-2）=<i>g</i>（2）=4，<i>g</i>（-3）=<i>g</i>（3）=9，…实际上，对任意<i>x</i>∈（-∞，+∞），都有<i>g</i>（-<i>x</i>）=（-<i>x</i>）<sup>2</sup>=<i
              >x</i
            ><sup>2</sup
            >=<i>g</i>（<i>x</i>），即<i>g</i>（-<i>x</i>）=<i>g</i>（<i>x</i>）.
          </p>
          <p>
            这两个函数的图像都关于<i>y</i>轴对称；当自变量取定义域中任意一对相反数时，对应的函数值都相等，这种函数就是偶函数.
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="7">
      <div v-if="showPageList.indexOf(7) > -1">
        <ul class="page-header-odd fl al-end">
          <li>090</li>
          <li>数学.基础模块</li>
          <li></li>
        </ul>
        <div class="padding-96">
          <p class="left">
            <img class="img-gn" alt="" src="../../assets/images/cxgk.jpg" />
          </p>
          <p>
            一般地，设函数<i>f</i>（<i>x</i>）的定义域为<i>D</i>，如果对于<span
              class="u"
              >任意</span
            ><i>x</i>∈<i>D</i>，<span class="u">都有</span
            >-<i>x</i>∈<i>D</i>，且<i>f</i>（-<i>x</i>）=<i>f</i>（<i>x</i>），那么函数<i>f</i>（<i>x</i>）就叫作<b>偶函数</b>，如图3-15所示.<b>偶函数的图像关于<i>y</i>轴对称</b>.
          </p>
          <p>
            我们可以由函数的图像是否关于<i>y</i>轴对称来判断函数是不是偶函数.
          </p>
          <p class="center openImgBox">
            <img
              class="img-c"
              alt=""
              src="../../assets/images/0101-1.jpg"
              style="width: 40%"
            />
          </p>
          <p class="img">图3-15</p>
          <video
            :src="videoPath"
            webkit-playsinline="true"
            x-webkit-airplay="true"
            playsinline="true"
            x5-video-orientation="h5"
            x5-video-player-fullscreen="true"
            x5-playsinline=""
            controls
            controlslist="nodownload"
            class="video-border w100"
          ></video>
          <p class="img fl al-cn ju-cn">
            <span>视频：判数函数奇偶性的方法和步骤 </span>
            <img
              :src="chapterData.isCollectVideo ? collectCheck : collectImg"
              alt=""
              class="collect-btn"
              @click="handleCollect('video')"
            />
          </p>
          <p>
            <span class="zt-ls"><b>例1</b></span
            >　根据图3-16中函数的图像，判断哪些函数是偶函数.
            <span class="btn-box" @click="isShowExampleOne = !isShowExampleOne">
              <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"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
          </p>
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/0101-2.jpg" />
          </p>
          <p class="img">图3-16</p>
          <div v-if="isShowExampleOne">
            <p>
              <span class="zt-ls"><b>解</b></span> 在四个函数图像中，图3-16（1）
              和图3-16（4） 的函数图像关于<i>y</i>轴对称；图3-16（2）
              和图3-16（3）
              的函数图像不关于<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>轴左边的部分.
            <span class="btn-box" @click="isShowExampleTwo = !isShowExampleTwo">
              <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"
                  transform="translate(-3327.144 15329)"
                />
              </svg>
            </span>
          </p>
          <p class="center openImgBox">
            <img
              class="img-c"
              alt=""
              src="../../assets/images/0102-1.jpg"
              style="width: 40%"
            />
          </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］上的图像.
          </p>
          <p>
            如图3-18所示，在<i>y</i>轴右边的图像上取两点<i>A</i>和<i>B</i>，分别画出它们关于<i>y</i>轴对称的点<i>A</i>′和<i>B</i>′，然后连线<i>A</i>′<i>B</i>′，就得到这个函数的图像在<i>y</i>轴左边的部分.
          </p>
          <p class="center openImgBox">
            <img
              class="img-c"
              alt=""
              src="../../assets/images/0102-2.jpg"
              style="width: 40%"
            />
          </p>
          <p class="img">图3-18</p>
          <div class="bk">
            <div class="bj1">
              <p class="left">
                <img
                  class="img-gn1"
                  alt=""
                  src="../../assets/images/tbts.jpg"
                />
              </p>
            </div>
            <p class="block">
              一个函数是不是偶函数，可以由函数的图像是否关于<i>y</i>轴对称来判断；当函数用解析法表示时，可以用偶函数的定义来判断.
            </p>
          </div>
          <p>
            <span class="zt-ls"><b>例3</b></span
            >　判断下列函数是不是偶函数.
          </p>
          <ul>
            <li class="fl fl-cn">
              <p>（1） <i>f</i>（<i>x</i>）=3<i>x</i><sup>2</sup>+1；</p>
              <span
                class="btn-box"
                @click="isShowExampleThree = !isShowExampleThree"
              >
                <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"
                    transform="translate(-3327.144 15329)"
                  />
                </svg>
              </span>
              <span class="btn-box" @click="openThinkingDialog">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="20.545"
                  height="22.112"
                  viewBox="0 0 20.545 22.112"
                >
                  <path
                    class="a"
                    d="M3771.2-14311.889a2.356,2.356,0,0,1-1.727-.626c-.027-.054-.053-.1-.079-.148l0-.007c-.123-.224-.2-.371-.076-.629a.869.869,0,0,1,.784-.471.205.205,0,0,1,.158.079.205.205,0,0,0,.158.079.187.187,0,0,0,.038.1.143.143,0,0,0,.117.05h.158a.573.573,0,0,0,.471.158,2.2,2.2,0,0,0,.916-.3l.023-.011a.572.572,0,0,1,.471-.158.575.575,0,0,1,.626.626.526.526,0,0,1,.036.409.664.664,0,0,1-.349.375A3.582,3.582,0,0,1,3771.2-14311.889Zm-1.885-1.723h-.155a.718.718,0,0,1-.784-.63.38.38,0,0,1-.021-.3.976.976,0,0,1,.492-.485l4.86-1.252a1.047,1.047,0,0,1,.784.626c.151.3-.128.61-.471.784l-4.705,1.256Zm-.155-1.885H3769a.716.716,0,0,1-.784-.626c-.149-.3.129-.611.471-.784l4.234-1.1v-.158l-.021.007a7.808,7.808,0,0,1-1.861.31,5.3,5.3,0,0,1-3.137-.942,5.789,5.789,0,0,1-2.666-4.076,6.421,6.421,0,0,1,1.256-5.018,7.038,7.038,0,0,1,2.194-1.568,7.848,7.848,0,0,1,2.666-.472,6.43,6.43,0,0,1,2.979.784,4.958,4.958,0,0,1,2.2,2.194,5.522,5.522,0,0,1,.313,5.177,13.113,13.113,0,0,1-1.256,1.882l-.313.313a2.156,2.156,0,0,0-.78,1.244l0,.012a1.731,1.731,0,0,1-1.727,1.723l-.313.158-3.292.939Zm1.256-6.271v1.256h1.41v-1.256Zm.784-4.234c.718,0,1.1.271,1.1.784a.925.925,0,0,1-.316.783l-.468.156a2.235,2.235,0,0,0-.63.471l-.012.024a2.2,2.2,0,0,0-.3.918v.155h1.1v-.155a1.2,1.2,0,0,1,.313-.629.543.543,0,0,0,.315-.153c.007,0,.315,0,.315-.16a1.226,1.226,0,0,0,.626-.626,2.277,2.277,0,0,0,.313-1.1,1.409,1.409,0,0,0-.626-1.252,2.337,2.337,0,0,0-1.569-.471,2.258,2.258,0,0,0-2.507,2.353l1.252.154A1.121,1.121,0,0,1,3771.2-14326Zm-6.51,9.645a.769.769,0,0,1-.549-.237.772.772,0,0,1-.235-.549.772.772,0,0,1,.235-.548l.939-.939a.781.781,0,0,1,.55-.234.772.772,0,0,1,.547.234.772.772,0,0,1,.238.549.772.772,0,0,1-.238.549l-.939.938A.769.769,0,0,1,3764.686-14316.356Zm13.174-.157a.774.774,0,0,1-.549-.234l-.943-.942a.678.678,0,0,1-.233-.47.678.678,0,0,1,.233-.47.774.774,0,0,1,.549-.234.774.774,0,0,1,.549.234l.942.939a.427.427,0,0,1,.228.324.74.74,0,0,1-.228.618A.774.774,0,0,1,3777.859-14316.514Zm2.9-6.351h-1.414c-.469-.158-.784-.474-.784-.784a.743.743,0,0,1,.784-.784h1.414a.743.743,0,0,1,.784.784A.743.743,0,0,1,3780.761-14322.864Zm-17.566-.158h-1.41c-.469-.157-.784-.473-.784-.784a.743.743,0,0,1,.784-.784h1.41a.743.743,0,0,1,.784.784A.743.743,0,0,1,3763.195-14323.022Zm13.861-5.723a.759.759,0,0,1-.529-.237.776.776,0,0,1-.235-.549.772.772,0,0,1,.235-.549l.939-.938a.44.44,0,0,1,.413-.238.759.759,0,0,1,.529.238.772.772,0,0,1,.235.549.772.772,0,0,1-.235.548l-.942.939A.435.435,0,0,1,3777.055-14328.745Zm-11.429,0a.776.776,0,0,1-.55-.237l-.939-1.1a.678.678,0,0,1-.235-.469.678.678,0,0,1,.235-.47.772.772,0,0,1,.549-.238.772.772,0,0,1,.549.238l.939,1.1a.675.675,0,0,1,.238.47.675.675,0,0,1-.238.47A.767.767,0,0,1,3765.626-14328.745Zm5.724-2.273a.743.743,0,0,1-.784-.785v-1.413c.157-.469.473-.784.784-.784a.743.743,0,0,1,.784.784v1.413A.743.743,0,0,1,3771.35-14331.019Z"
                    transform="translate(-3761 14334.001)"
                  />
                </svg>
              </span>
              <span class="btn-box" @click="openMathDiaolog">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="18.323"
                  height="18.939"
                  viewBox="0 0 18.323 15.939"
                >
                  <g transform="translate(-398 -946)">
                    <path
                      class="a"
                      d="M11.985,1.241a.894.894,0,0,1-.242.623.79.79,0,0,1-.6.263.644.644,0,0,1-.547-.229,3.034,3.034,0,0,1-.339-.741A.935.935,0,0,0,10.1.846a.4.4,0,0,0-.291-.1.36.36,0,0,0-.333.18,1.836,1.836,0,0,0-.2.478L8.251,4.753H9.7l-.27.79H8.043l-1.51,4.849a27.9,27.9,0,0,1-1.06,2.93,5.5,5.5,0,0,1-1.316,1.857,3.11,3.11,0,0,1-2.189.755,2.258,2.258,0,0,1-1.455-.409A1.192,1.192,0,0,1,0,14.618a.97.97,0,0,1,.27-.693.894.894,0,0,1,.693-.291.741.741,0,0,1,.693.27,1.815,1.815,0,0,1,.2.693c0,.381.2.575.492.575a.817.817,0,0,0,.693-.478,6.983,6.983,0,0,0,.568-1.469L6,5.543H4.5l.236-.776h1.5l.159-.54a14.548,14.548,0,0,1,.693-2.016A4.544,4.544,0,0,1,8.313.694,2.91,2.91,0,0,1,10.281,0a2.425,2.425,0,0,1,.8.145,1.5,1.5,0,0,1,.693.429.963.963,0,0,1,.236.693Z"
                      transform="translate(398 948)"
                    />
                    <path
                      class="b"
                      d="M18.323,5.668a3.505,3.505,0,0,1-.152,1.046H17.36a3.969,3.969,0,0,0,.166-1.06.5.5,0,0,0-.062-.236.27.27,0,0,0-.249-.132.346.346,0,0,0-.229.076c-.069.055-.222.208-.471.471L14.936,7.489a22.329,22.329,0,0,0-1.552,1.621l-1.815,1.974a2.168,2.168,0,0,1-1.385.859c-.492,0-.741-.333-.741-.991a3.575,3.575,0,0,1,.3-1.385h.914a4.766,4.766,0,0,0-.263,1.1c0,.18.048.263.159.263s.242-.111.464-.333l2.147-2.286c-.006-.033,1.525-1.611,1.524-1.6l1.3-1.385a2.078,2.078,0,0,1,1.385-.8.755.755,0,0,1,.776.388,1.9,1.9,0,0,1,.173.776Z"
                      transform="translate(398 948)"
                    />
                    <path
                      class="a"
                      d="M14.936,7.489l.693,2.251a5.154,5.154,0,0,0,.236.61c.083.159.18.242.3.242a.82.82,0,0,0,.533-.457,4.849,4.849,0,0,0,.339-.817H17.8a4.849,4.849,0,0,1-.693,1.51,2.813,2.813,0,0,1-.873.852,1.766,1.766,0,0,1-.88.27,1.178,1.178,0,0,1-1.018-.464,4.357,4.357,0,0,1-.623-1.309l-.326-1.067a6.4,6.4,0,0,0-.222-.8L12.747,7c-.083-.27-.152-.478-.2-.6a1.136,1.136,0,0,0-.194-.312.4.4,0,0,0-.284-.118c-.326,0-.6.423-.817,1.261h-.769a6.671,6.671,0,0,1,.6-1.5,3.034,3.034,0,0,1,.81-.873,1.663,1.663,0,0,1,.942-.312,1.344,1.344,0,0,1,1.067.471,3.692,3.692,0,0,1,.644,1.268l.139.436C14.672,6.7,14.936,7.489,14.936,7.489Z"
                      transform="translate(398 948)"
                    />
                  </g>
                </svg>
              </span>
              <span class="btn-box" @click="stepDialog = true">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  width="19.28"
                  height="20.563"
                  viewBox="0 0 19.28 20.563"
                >
                  <g transform="translate(-109.056 -82.941)">
                    <path
                      class="a"
                      d="M3439.656-15185.7h-12.643a1.815,1.815,0,0,1-1.816-1.81v-16.944a1.83,1.83,0,0,1,1.816-1.809h15.674a1.8,1.8,0,0,1,1.79,1.809v13.93h-4.217a.6.6,0,0,0-.6.6v4.217h0Zm-9.819-2.764a.5.5,0,0,0-.5.5.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5.5.5,0,0,0-.5-.5Zm0-2a.5.5,0,0,0-.5.5.5.5,0,0,0,.5.5h4a.5.5,0,0,0,.5-.5.5.5,0,0,0-.5-.5Zm1.393-8.525a2.416,2.416,0,0,0-2.416,2.411,2.421,2.421,0,0,0,2.416,2.42h.111a1.8,1.8,0,0,0,1.1,1.1,1.809,1.809,0,0,0,.6.107,1.808,1.808,0,0,0,1.7-1.206h4.072l-.172.172a.635.635,0,0,0-.179.454.569.569,0,0,0,.179.4.637.637,0,0,0,.435.176.6.6,0,0,0,.424-.176l1.2-1.214a.618.618,0,0,0,0-.858l-1.2-1.187a.619.619,0,0,0-.431-.176.6.6,0,0,0-.427.176.615.615,0,0,0,0,.854l.172.176h-4.072a1.8,1.8,0,0,0-1.1-1.1,1.755,1.755,0,0,0-.6-.1,1.808,1.808,0,0,0-1.7,1.206h-.111a.554.554,0,0,1-.145-.016,1.2,1.2,0,0,1-.84-.4,1.217,1.217,0,0,1-.3-.878,1.2,1.2,0,0,1,1.206-1.137.407.407,0,0,1,.069,0h3.729a1.807,1.807,0,0,0,1.118,1.114,1.816,1.816,0,0,0,.576.091,1.789,1.789,0,0,0,1.7-1.205h.309a2.415,2.415,0,0,0,1.679-.775,2.407,2.407,0,0,0,.637-1.729,2.411,2.411,0,0,0-2.419-2.324h-6.213a1.821,1.821,0,0,0-1.107-1.1,1.8,1.8,0,0,0-.6-.1,1.814,1.814,0,0,0-1.706,1.2,1.8,1.8,0,0,0,.077,1.389,1.787,1.787,0,0,0,1.026.92,1.841,1.841,0,0,0,.6.1,1.807,1.807,0,0,0,1.706-1.2h6.266a1.179,1.179,0,0,1,.836.4,1.22,1.22,0,0,1,.305.874,1.213,1.213,0,0,1-1.214,1.146h-.172a1.8,1.8,0,0,0-1.118-1.118,1.711,1.711,0,0,0-.576-.1,1.8,1.8,0,0,0-1.706,1.214Z"
                      transform="translate(-3316.14 15289.201)"
                    />
                    <path
                      class="a"
                      d="M316.806,239.727a.6.6,0,1,0,.6-.6A.6.6,0,0,0,316.806,239.727Zm-5.421-4.207a.6.6,0,1,0,.6.6A.587.587,0,0,0,311.385,235.52Zm2.4,8.438a.607.607,0,1,0-.6-.613A.621.621,0,0,0,313.789,243.958Z"
                      transform="translate(-196.896 -148.921)"
                    />
                    <path
                      class="a"
                      d="M763.392,793.79l3.262-3.262h-3.262Z"
                      transform="translate(-638.661 -690.634)"
                    />
                  </g>
                </svg>
              </span>
            </li>
            <li class="fl fl-cn">
              <p>（2） <i>f</i>（<i>x</i>）=<i>x</i><sup>2</sup>+<i>x</i>；</p>
              <span
                class="btn-box"
                @click="isShowExampleFour = !isShowExampleFour"
              >
                <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"
                    transform="translate(-3327.144 15329)"
                  />
                </svg>
              </span>
              <span class="btn-box" @click="openMathDiaolog">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="18.323"
                  height="18.939"
                  viewBox="0 0 18.323 15.939"
                >
                  <g transform="translate(-398 -946)">
                    <path
                      class="a"
                      d="M11.985,1.241a.894.894,0,0,1-.242.623.79.79,0,0,1-.6.263.644.644,0,0,1-.547-.229,3.034,3.034,0,0,1-.339-.741A.935.935,0,0,0,10.1.846a.4.4,0,0,0-.291-.1.36.36,0,0,0-.333.18,1.836,1.836,0,0,0-.2.478L8.251,4.753H9.7l-.27.79H8.043l-1.51,4.849a27.9,27.9,0,0,1-1.06,2.93,5.5,5.5,0,0,1-1.316,1.857,3.11,3.11,0,0,1-2.189.755,2.258,2.258,0,0,1-1.455-.409A1.192,1.192,0,0,1,0,14.618a.97.97,0,0,1,.27-.693.894.894,0,0,1,.693-.291.741.741,0,0,1,.693.27,1.815,1.815,0,0,1,.2.693c0,.381.2.575.492.575a.817.817,0,0,0,.693-.478,6.983,6.983,0,0,0,.568-1.469L6,5.543H4.5l.236-.776h1.5l.159-.54a14.548,14.548,0,0,1,.693-2.016A4.544,4.544,0,0,1,8.313.694,2.91,2.91,0,0,1,10.281,0a2.425,2.425,0,0,1,.8.145,1.5,1.5,0,0,1,.693.429.963.963,0,0,1,.236.693Z"
                      transform="translate(398 948)"
                    />
                    <path
                      class="b"
                      d="M18.323,5.668a3.505,3.505,0,0,1-.152,1.046H17.36a3.969,3.969,0,0,0,.166-1.06.5.5,0,0,0-.062-.236.27.27,0,0,0-.249-.132.346.346,0,0,0-.229.076c-.069.055-.222.208-.471.471L14.936,7.489a22.329,22.329,0,0,0-1.552,1.621l-1.815,1.974a2.168,2.168,0,0,1-1.385.859c-.492,0-.741-.333-.741-.991a3.575,3.575,0,0,1,.3-1.385h.914a4.766,4.766,0,0,0-.263,1.1c0,.18.048.263.159.263s.242-.111.464-.333l2.147-2.286c-.006-.033,1.525-1.611,1.524-1.6l1.3-1.385a2.078,2.078,0,0,1,1.385-.8.755.755,0,0,1,.776.388,1.9,1.9,0,0,1,.173.776Z"
                      transform="translate(398 948)"
                    />
                    <path
                      class="a"
                      d="M14.936,7.489l.693,2.251a5.154,5.154,0,0,0,.236.61c.083.159.18.242.3.242a.82.82,0,0,0,.533-.457,4.849,4.849,0,0,0,.339-.817H17.8a4.849,4.849,0,0,1-.693,1.51,2.813,2.813,0,0,1-.873.852,1.766,1.766,0,0,1-.88.27,1.178,1.178,0,0,1-1.018-.464,4.357,4.357,0,0,1-.623-1.309l-.326-1.067a6.4,6.4,0,0,0-.222-.8L12.747,7c-.083-.27-.152-.478-.2-.6a1.136,1.136,0,0,0-.194-.312.4.4,0,0,0-.284-.118c-.326,0-.6.423-.817,1.261h-.769a6.671,6.671,0,0,1,.6-1.5,3.034,3.034,0,0,1,.81-.873,1.663,1.663,0,0,1,.942-.312,1.344,1.344,0,0,1,1.067.471,3.692,3.692,0,0,1,.644,1.268l.139.436C14.672,6.7,14.936,7.489,14.936,7.489Z"
                      transform="translate(398 948)"
                    />
                  </g>
                </svg>
              </span>
            </li>
            <li class="fl fl-cn">
              <p>（3） <i>f</i>（<i>x</i>）=5<i>x</i>+2.</p>
              <span
                class="btn-box"
                @click="isShowExampleFive = !isShowExampleFive"
              >
                <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"
                    transform="translate(-3327.144 15329)"
                  />
                </svg>
              </span>
              <span class="btn-box" @click="openMathDiaolog">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  width="18.323"
                  height="18.939"
                  viewBox="0 0 18.323 15.939"
                >
                  <g transform="translate(-398 -946)">
                    <path
                      class="a"
                      d="M11.985,1.241a.894.894,0,0,1-.242.623.79.79,0,0,1-.6.263.644.644,0,0,1-.547-.229,3.034,3.034,0,0,1-.339-.741A.935.935,0,0,0,10.1.846a.4.4,0,0,0-.291-.1.36.36,0,0,0-.333.18,1.836,1.836,0,0,0-.2.478L8.251,4.753H9.7l-.27.79H8.043l-1.51,4.849a27.9,27.9,0,0,1-1.06,2.93,5.5,5.5,0,0,1-1.316,1.857,3.11,3.11,0,0,1-2.189.755,2.258,2.258,0,0,1-1.455-.409A1.192,1.192,0,0,1,0,14.618a.97.97,0,0,1,.27-.693.894.894,0,0,1,.693-.291.741.741,0,0,1,.693.27,1.815,1.815,0,0,1,.2.693c0,.381.2.575.492.575a.817.817,0,0,0,.693-.478,6.983,6.983,0,0,0,.568-1.469L6,5.543H4.5l.236-.776h1.5l.159-.54a14.548,14.548,0,0,1,.693-2.016A4.544,4.544,0,0,1,8.313.694,2.91,2.91,0,0,1,10.281,0a2.425,2.425,0,0,1,.8.145,1.5,1.5,0,0,1,.693.429.963.963,0,0,1,.236.693Z"
                      transform="translate(398 948)"
                    />
                    <path
                      class="b"
                      d="M18.323,5.668a3.505,3.505,0,0,1-.152,1.046H17.36a3.969,3.969,0,0,0,.166-1.06.5.5,0,0,0-.062-.236.27.27,0,0,0-.249-.132.346.346,0,0,0-.229.076c-.069.055-.222.208-.471.471L14.936,7.489a22.329,22.329,0,0,0-1.552,1.621l-1.815,1.974a2.168,2.168,0,0,1-1.385.859c-.492,0-.741-.333-.741-.991a3.575,3.575,0,0,1,.3-1.385h.914a4.766,4.766,0,0,0-.263,1.1c0,.18.048.263.159.263s.242-.111.464-.333l2.147-2.286c-.006-.033,1.525-1.611,1.524-1.6l1.3-1.385a2.078,2.078,0,0,1,1.385-.8.755.755,0,0,1,.776.388,1.9,1.9,0,0,1,.173.776Z"
                      transform="translate(398 948)"
                    />
                    <path
                      class="a"
                      d="M14.936,7.489l.693,2.251a5.154,5.154,0,0,0,.236.61c.083.159.18.242.3.242a.82.82,0,0,0,.533-.457,4.849,4.849,0,0,0,.339-.817H17.8a4.849,4.849,0,0,1-.693,1.51,2.813,2.813,0,0,1-.873.852,1.766,1.766,0,0,1-.88.27,1.178,1.178,0,0,1-1.018-.464,4.357,4.357,0,0,1-.623-1.309l-.326-1.067a6.4,6.4,0,0,0-.222-.8L12.747,7c-.083-.27-.152-.478-.2-.6a1.136,1.136,0,0,0-.194-.312.4.4,0,0,0-.284-.118c-.326,0-.6.423-.817,1.261h-.769a6.671,6.671,0,0,1,.6-1.5,3.034,3.034,0,0,1,.81-.873,1.663,1.663,0,0,1,.942-.312,1.344,1.344,0,0,1,1.067.471,3.692,3.692,0,0,1,.644,1.268l.139.436C14.672,6.7,14.936,7.489,14.936,7.489Z"
                      transform="translate(398 948)"
                    />
                  </g>
                </svg>
              </span>
            </li>
          </ul>
          <div v-if="isShowExampleThree">
            <p>
              <span class="zt-ls"><b>解</b></span
              >（1） 函数<i>f</i>（<i>x</i>）=3<i>x</i
              ><sup>2</sup
              >+1的定义域是<b>R</b>，对任意<i>x</i>∈<b>R</b>，都有-<i>x</i>∈<b>R</b>，
            </p>
            <p>而</p>
            <p class="center">
              <i>f</i>（-<i>x</i>）=3（-<i>x</i>）<sup>2</sup>+1=3<i>x</i
              ><sup>2</sup>+1=<i>f</i>（<i>x</i>），
            </p>
            <p>
              所以，函数<i>f</i>（<i>x</i>）=3<i>x</i><sup>2</sup>+1是偶函数.
            </p>
          </div>
          <div v-if="isShowExampleFour">
            <p>
              （2） 函数<i>f</i>（<i>x</i>）=<i>x</i
              ><sup>2</sup
              >+<i>x</i>的定义域是<b>R</b>，对任意<i>x</i>∈<b>R</b>，都有-<i>x</i>∈<b>R</b>，而
            </p>
            <p class="center">
              <i>f</i>（-<i>x</i>）=（-<i>x</i>）<sup>2</sup>+（-<i>x</i>）=<i
                >x</i
              ><sup>2</sup>-<i>x</i>≠<i>f</i>（<i>x</i>），
            </p>
            <p>
              所以，函数<i>f</i>（<i>x</i>）=<i>x</i
              ><sup>2</sup>+<i>x</i>不是偶函数.
            </p>
          </div>
          <div v-if="isShowExampleFive">
            <p>
              （3）
              函数<i>f</i>（<i>x</i>）=5<i>x</i>+2的定义域是<b>R</b>，对任意<i>x</i>∈<b>R</b>，都有-<i>x</i>∈<i>R</i>，而
            </p>
            <p class="center">
              <i>f</i
              >（-<i>x</i>）=5（-<i>x</i>）+2=-5<i>x</i>+2≠<i>f</i>（<i>x</i>），
            </p>
            <p>所以，函数<i>f</i>（<i>x</i>）=5<i>x</i>+2不是偶函数.</p>
          </div>
          <div class="bk-hzjl">
            <div class="bj1-hzjl">
              <p class="left">
                <img
                  class="img-gn2"
                  alt=""
                  src="../../assets/images/hzjl.jpg"
                />
              </p>
            </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>）仍是偶函数吗？
            </p>
          </div>
          <textarea
            cols="30"
            rows="4"
            v-model="chapterData.txtOne"
            placeholder="请输入内容"
            class="w100 ta-br textarea-text"
            @input="handleChapterData"
          ></textarea>
        </div>
      </div>
    </div>
    <div class="page-box" page="9">
      <div v-if="showPageList.indexOf(9) > -1">
        <ul class="page-header-odd fl al-end">
          <li>092</li>
          <li>数学.基础模块</li>
          <li></li>
        </ul>
        <div class="padding-96">
          <p class="left">
            <img class="img-gn" alt="" src="../../assets/images/stlx.jpg" />
          </p>
          <div class="bj">
            <examinations
              :cardList="questionData"
              v-if="questionData"
              :isReal="false"
            ></examinations>
          </div>
        </div>
      </div>
    </div>

    <!-- 函数控件弹窗 -->
    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      width="60%"
      :append-to-body="true"
    >
      <iframe
        src="https://www.geogebra.org/calculator"
        frameborder="0"
        class="iframe-box"
      ></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"
    >
      <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"
              >
                <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
        >
      </span>
    </el-dialog>
    <!-- 解题步骤弹窗 -->
    <el-dialog
      title="解题步骤"
      :visible.sync="stepDialog"
      width="40%"
      :append-to-body="true"
    >
      <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"
              >
                <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>
    </el-dialog>
  </div>
</template>

<script>
import examinations from "@/components/examinations/index.vue";
import { getResourcePath } from "@/assets/methods/resources";
import axios from "axios";
export default {
  name: "chapter-one",
  components: { examinations },
  props: {
    showPageList: {
      type: Array,
      default: [],
    },
  },
  mounted() {
    const data = localStorage.getItem("math-chapterData");
    if (data) {
      this.chapterData = JSON.parse(data);
    }
    this.getPath();
    this.getQuestionData();
  },
  data() {
    return {
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      isShowExampleOne: false,
      isShowExampleTwo: false,
      isShowExampleThree: false,
      isShowExampleFour: false,
      isShowExampleFive: false,
      dialogVisible: false,
      thinkingDialog: false,
      stepDialog: false,
      videoPath: "",
      questionData: [],
      chapterData: {
        isCollectImg: false,
        isCollectVideo: false,
        txtOne: "",
      },
      thinkOne: [
        {
          txt: "1:一个函数是不 是偶函数,可以由 函数的图像是否关 于y 轴 对 称 来 判 断;当函数用解析 法表示时,可以用 偶 函 数 的 定 义 来 判断。 偶函数:一般地，设函数f(x)的定义域为D，如果对于任意xED，都有XED，且f(-x)=f(x)，那么函数f(x)就叫作偶函数",
          isShow: true,
        },
        {
          txt: "2:计算f(-x)",
          isShow: false,
        },
        {
          txt: "3:判断f(-x)是否等于f(x)",
          isShow: false,
        },
      ],
      stepOne: [
        {
          txt: "1:(1)函数f(x)=3x2+1的定义域是R，对任意XER，都有-XER",
          isShow: true,
        },
        {
          txt: "2:f(-x)=3(-x)2+1=3x2+1=f(x)",
          isShow: false,
        },
      ],
    };
  },
  methods: {
    handleChapterData() {
      localStorage.setItem(
        "math-chapterData",
        JSON.stringify(this.chapterData)
      );
    },
    async getPath() {
      this.videoPath = await getResourcePath(
        "a28cd862d61b5df2201406b76e9f01b0"
      );
    },
    getQuestionData() {
      axios
        .get(this.config.activeBook.resourceUrl + "/question.json")
        .then((res) => {
          let oldAnswer = localStorage.getItem(
            this.config.activeBook.name + "oldAnswerData"
          );
          if (oldAnswer) {
            oldAnswer = JSON.parse(oldAnswer);
            console.log("旧数据", oldAnswer);
            if(oldAnswer[9]) {
              for (let index = 0; index < res.data.data.length; index++) {
                const item = res.data.data[index];
                if(item.infoList.length) {
                  for (let cindex = 0; cindex < item.infoList.length; cindex++) {
                  const citem = item.infoList[cindex];
                  const question = oldAnswer[9].find(ditem => ditem.id == citem.id)
                  if(question) {
                    citem.userAnswer = question.userAnswer
                  }
                }
                }
              }
            } 
          }
          this.questionData = res.data.data;
        });
    },
    handleCollect(type) {
      if (type == "img") {
        this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
      } else if (type == "video") {
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
      }
      this.handleChapterData();
    },
    openMathDiaolog() {
      this.dialogVisible = true;
    },
    openThinkingDialog() {
      this.thinkingDialog = true;
    },
    showNext(num) {
      const number = this.thinkOne.findIndex((item, index) => index == num);
      console.log(number);
      this.thinkOne[number].isShow = true;
    },
    showNextChange(num) {
      const number = this.stepOne.findIndex((item, index) => index == num);
      this.stepOne[number].isShow = true;
    },
  },
};
</script>

<style lang="less" scoped>
.iframe-box {
  width: 100%;
  min-height: 800px;
  border: 1px solid #8281ed;
}
li {
  list-style: none;
}
.txt-p {
  margin-top: 0;
  border-bottom: 1px dashed #000;
  padding: 10px 0;
}
</style>

 src/books/math/view/components/header.vue

@@ -1,37 +1,38 @@

<template>
  <div class="chapter" num="1">
    <!-- 封面 -->
    <div class="page-box cover mt-20" page="1" style="min-height:auto">
    <div class="page-box cover mt-20" page="1" style="min-height: auto">
      <div v-if="showPageList.indexOf(1) > -1">
        <img src="../../assets/images/Cover.jpg" alt="" />
        <img src="../../assets/images/Cover.jpg" alt="" class="w100" />
      </div>
    </div>
    <div class="page-box" page="2" style="min-height:auto">
      <div v-if="showPageList.indexOf(1) > -1">
        <img src="../../assets/images/Cover.jpg" alt="" />
    <div class="page-box" page="2" style="min-height: auto">
      <div v-if="showPageList.indexOf(2) > -1">
        <img src="../../assets/images/Covers.png" alt="" class="w100" />
      </div>
    </div>
      <!-- 版权页 -->
      <div class="page-box text-center" style="padding: 136px 0" page="3">
    <!-- 版权页 -->
    <div class="page-box text-center" style="padding: 136px 0" page="3">
      <div v-if="showPageList.indexOf(3) > -1">
        <div class="box">
          <hr class="line" />
          <p class="tl fz-14"><b>图书在版编目（CIP）数据</b></p>
          <p class="tl fz-14 m0">
            学前儿童卫生与保健/张兰香，潘秀萍主编.—3版.—北京：北京师范大学出版社，2023.2（2024.2重印）
            数学：基础模块.上册/曹一鸣，付勇，董连春主编.—4版.—北京：北京师范大学出版社，2021.8（2023.6重印）
          </p>
          <p class="tl" style="margin-bottom: 10px">ISBN 978-7-303-26340-0</p>
          <p class="tl" style="margin-bottom: 10px">ISBN 978-7-303-27089-7</p>
          <p class="tl fz-14 m0" style="margin-bottom: 10px">
            Ⅰ.①学… Ⅱ.①张… ②潘… Ⅲ.①学前儿童—卫生保健—幼儿师范学校—教材 Ⅳ.①R179
            Ⅰ.①数… Ⅱ.①曹… ②付… ③董… Ⅲ.①数学课-中等专业学校-教材 Ⅳ.①G634.603
          </p>
          <p class="tl fz-14">中国版本图书馆CIP数据核字（2020）第179545号</p>
          <p class="tl fz-14">中国版本图书馆CIP数据核字（2021）第127012号</p>
          <hr class="line" style="height: 1px" />
          <p class="tl fz-14 m0" style="margin-top: 136px">
            <b>教材意见反馈：gaozhifk@bnupg.com 010-58805079</b>
            <b>教材意见反馈联系电话　010-58807762 58806368</b>
          </p>
          <p class="tl fz-14 m0">营销中心电话：010-58802755 58800035</p>
          <p class="tl fz-14 m0">编辑部电话：010-58802883</p>
          <p class="tl fz-14 m0">
            <b>教材意见反馈电子信箱　yjp@bnupg.com lz@bnupg.com</b>
          </p>
          <p class="tl fz-14 m0">营销中心电话　010-58806880 58801876</p>
          <hr class="line" style="height: 1px" />
          <p class="tl fz-14 m0">出版发行：北京师范大学出版社 www.bnupg.com</p>
          <p class="tl fz-14 m0">　　　　　北京市西城区新街口外大街12-3号</p>
@@ -39,22 +40,22 @@
          <p class="tl fz-14 m0">印　　刷：天津旭非印刷有限公司</p>
          <p class="tl fz-14 m0">经　　销：全国新华书店</p>
          <p class="tl fz-14 m0">开　　本：889mm×1194mm 1/16</p>
          <p class="tl fz-14 m0">印　　张：18.25</p>
          <p class="tl fz-14 m0">字　　数：373千字</p>
          <p class="tl fz-14 m0">版　　次：2023年2月第3版</p>
          <p class="tl fz-14 m0">印　　次：2024年2月第23次印刷</p>
          <p class="tl fz-14 m0">定　　价：39.80元</p>
          <p class="tl fz-14 m0">印　　张：14</p>
          <p class="tl fz-14 m0">字　　数：214千字</p>
          <p class="tl fz-14 m0">版　　次：2021年8月第4版</p>
          <p class="tl fz-14 m0">印　　次：2023年6月第39次印刷</p>
          <p class="tl fz-14 m0">定　　价：27.00元</p>
          <hr class="line" />
          <ul class="fl fl-between m0" style="padding: 0">
            <li>
              <p class="tl fz-14 m0">策划编辑：姚贵平</p>
              <p class="tl fz-14 m0">美术编辑：焦丽</p>
              <p class="tl fz-14 m0">责任校对：陈民</p>
              <p class="tl fz-14 m0">策划编辑：林　子　余娟平</p>
              <p class="tl fz-14 m0">美术编辑：焦　丽</p>
              <p class="tl fz-14 m0">责任校对：陈　民</p>
            </li>
            <li>
              <p class="tl fz-14 m0">责任编辑：周鹏</p>
              <p class="tl fz-14 m0">装帧设计：焦丽</p>
              <p class="tl fz-14 m0">责任印制：马洁</p>
              <p class="tl fz-14 m0">责任编辑：马力敏</p>
              <p class="tl fz-14 m0">装帧设计：焦　丽</p>
              <p class="tl fz-14 m0">责任印制：马　洁</p>
            </li>
          </ul>
          <p class="center m0" style="margin-top: 20px; font-size: 20px">
@@ -70,6 +71,7 @@
        </div>
      </div>
    </div>

  </div>
</template>

@@ -82,12 +84,57 @@
      default: [],
    },
    data() {
      return {
      }
      return {};
    },
  },
};
</script>

<style lang="less" scoped>
</style>
.cover img {
  width: 100%;
  object-fit: contain;
}
.box {
  max-width: 400px;
  margin: 0 auto;
}
.line {
  background-color: #000;
  height: 2px;
}
.tixing {
  position: relative;
  margin-bottom: 110px;
}
.tixing-left {
  position: absolute;
  top: 0px;
  width: 200px;
  border-top: 50px solid #1eb9ee;
  border-right: 20px solid transparent;
  border-bottom: 30px solid transparent;
  border-left: 0px solid transparent;
}
.tixing-right {
  max-width: 200px;
  border-top: 40px solid transparent;
  border-right: 0px solid transparent;
  border-bottom: 40px solid #8dd7f7;
  border-left: 40px solid transparent;
}
.tixing-box {
  width: 100%;
  height: 50px;
  background-color: #8dd7f7;
}
.tixing-text {
  position: absolute;
  top: -36px;
  left: 44px;
}
.preface-text {
  font-size: 24px;
  color: #fff;
}
</style>

 src/books/math/view/components/index.vue

@@ -15,31 +15,10 @@
        v-if="showCatalogList.indexOf(1) > -1"
        :showPageList="loadPageList"
      ></pageHeader>
      <!-- <chapterOne
      <chapterOne
        v-if="showCatalogList.indexOf(2) > -1"
        :showPageList="loadPageList"
      ></chapterOne>
      <chapterTwo
        v-if="showCatalogList.indexOf(3) > -1"
        :showPageList="loadPageList"
      >
      </chapterTwo>
      <chapterThree
      v-if="showCatalogList.indexOf(4) > -1"
        :showPageList="loadPageList"
      ></chapterThree>
      <chapterFour
      v-if="showCatalogList.indexOf(5) > -1"
        :showPageList="loadPageList"
      ></chapterFour>
      <chapterFive
      v-if="showCatalogList.indexOf(6) > -1"
        :showPageList="loadPageList"
      ></chapterFive>
      <chapterSix
        v-if="showCatalogList.indexOf(7) > -1"
        :showPageList="loadPageList"
      ></chapterSix> -->
    </div>

  </div>
@@ -47,7 +26,7 @@

<script>
import pageHeader from "./header.vue";
// import chapterOne from "./chapter001.vue";
import chapterOne from "./chapter001.vue";
// import chapterTwo from "./chapter002.vue";
// import chapterThree from "./chapter003.vue"
// import chapterFour from './chapter004.vue'
@@ -63,7 +42,7 @@
  name:"pageContent",
  data() {
    return {
      catalogLength: 7, // 总章节数
      catalogLength: 2, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -730,7 +709,7 @@
      // 所有章节组件（每本书制作时单独配置）
      const pageData = {
        pageHeader,
        // chapterOne,
        chapterOne,
        // chapterTwo,
        // chapterThree,
        // chapterFour,
@@ -837,7 +816,7 @@
  },
  components: {
    pageHeader,
    // chapterOne,
    chapterOne,
    // chapterTwo,
    // chapterThree,
    // chapterFour,

 src/components/examinations/index.vue

@@ -124,7 +124,9 @@
                    :src="getPublicImage(content.img, 115)"
                    v-show="content.img"
                    :preview-src-list="[getPublicImage(content.img)]"
                    v-if="isReal"
                  ></el-image>
                  <img :src="content.img" alt="" v-if="!isReal" class="radio-img">
                </p>
                <p
                  class="optionContent"
@@ -402,17 +404,17 @@
      </ul>
    </div>
    <div class="bottom-btn" v-if="!loading">
      <el-button class="btn-box" @click="saveAnswer">保存</el-button>
      <el-button class="examinations-btn-box" @click="saveAnswer">保存</el-button>
      <el-button
        @click="handleQuestion"
        class="btn-box"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >提交</el-button
      >
      <el-button @click="redo" class="btn-box">重做</el-button>
      <el-button @click="redo" class="examinations-btn-box">重做</el-button>
      <el-button
        @click="openAnswers"
        class="btn-box"
        class="examinations-btn-box"
        :style="{ borderColor: primaryColor }"
        >查看答案</el-button
      >
@@ -437,13 +439,18 @@
    page: {
      type: Number,
    },
    isReal:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      type: "option",
      loading: false,
      cardData:[],
      loading:true
      loading:true,
      
    };
  },
  watch:{
@@ -638,7 +645,7 @@
    list-style: none;
  }
}
.btn-box {
.examinations-btn-box {
  height: 30px;
  width: 78px;
  padding: 4px 10px;
@@ -1135,4 +1142,8 @@
    margin-top: 10px;
  }
}
.radio-img {
  width: 200px;
  object-fit: contain;
}
</style>