农大社

zhongshujie

2024-10-16 fc02f690bfea99d3f41f2a690063cff71577915b

农大社

 .env.product

@@ -1,6 +1,6 @@
VUE_APP_ENV = 'product'
VUE_APP_API_URL = "https://jsek.bnuic.com"
VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/sportsAndHealth'
VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook"
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/botany'
VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany"
VUE_APP_BOOK_ID = 'sportsAndHealth'

 src/App.vue

@@ -8,6 +8,7 @@
    <artAndDance v-if="activeBook.name == 'artAndDance'"></artAndDance>
    <artAndDrama v-if="activeBook.name == 'artAndDrama'"></artAndDrama>
    <mathBook v-if="activeBook.name == 'mathBook'"></mathBook>
    <botany v-if="activeBook.name == 'botany'"></botany>
  </div>
</template>

@@ -22,8 +23,8 @@
    sportsAndHealth: () => import("./books/sportsAndHealth/view/index.vue"),
    artAndDance: () => import("./books/artAndDance/view/index.vue"),
    mathBook: () => import("./books/mathBook/view/index.vue"),
    artAndDrama: () => import("./books/artAndDrama/view/index.vue")

    artAndDrama: () => import("./books/artAndDrama/view/index.vue"),
    botany: () => import("./books/botany/view/index.vue")
  },
  data() {
    return {
@@ -35,7 +36,6 @@
      this.setGlobalState({

        initTestBook: async (bookId, tryPageCount) => {

          this.activeBook = await this.config.getBookConfig(
            process.env.VUE_APP_RESOURCE_CTX + process.env.VUE_APP_BOOK_ID
          );
@@ -63,12 +63,19 @@
      // artAndDance
      // artAndDrama
      // mathBook

      this.activeBook = await this.config.getBookConfig(
        process.env.VUE_APP_RESOURCE_CTX +
      process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "sportsAndHealth")
      );
      // this.activeBook = await this.config.getBookConfig(
      //   'http://182.92.203.7:3007/books/resource/'+
      //   (process.env.VUE_APP_ENV == "product"
      //     ? process.env.VUE_APP_BOOK_ID
      //     : "botany")
      // );
      // æµ‹è¯•è¯•è¯»30页
      // this.activeBook.tryPageCount = 10;
      this.config.activeBook = this.activeBook;

 src/books/artAndDrama/assets/main.less

@@ -72,7 +72,6 @@
    text-align: justify;
    margin: 0 12%;
    line-height: 30px;

  }

  span.zt-0 {

 src/books/botany/assets/images/chongyangmu001.png

 src/books/botany/assets/images/chongyangmu002.png

 src/books/botany/assets/images/chongyangmu003.png

 src/books/botany/assets/images/ezhang001.png

 src/books/botany/assets/images/ezhang002.png

 src/books/botany/assets/images/ezhang003.png

 src/books/botany/assets/images/fengmianBg.png

 src/books/botany/assets/images/guailiu001.png

 src/books/botany/assets/images/guailiu002.png

 src/books/botany/assets/images/guailiu003.png

 src/books/botany/assets/images/guailiu004.png

 src/books/botany/assets/images/huanglu.png

 src/books/botany/assets/images/jinyenvzhen001.png

 src/books/botany/assets/images/jinyenvzhen002.png

 src/books/botany/assets/images/jinyenvzhen003.png

 src/books/botany/assets/images/jiushu.png

 src/books/botany/assets/images/jizhua.png

 src/books/botany/assets/images/mubiao.png

 src/books/botany/assets/images/nvzhen001.png

 src/books/botany/assets/images/nvzhen002.png

 src/books/botany/assets/images/nvzhen003.png

 src/books/botany/assets/images/qiyeshu.png

 src/books/botany/assets/images/shinan001.png

 src/books/botany/assets/images/shinan002.png

 src/books/botany/assets/images/shinan003.png

 src/books/botany/assets/images/simianmu001.png

 src/books/botany/assets/images/simianmu002.png

 src/books/botany/assets/images/simianmu003.png

 src/books/botany/assets/images/sutie001.png

 src/books/botany/assets/images/sutie002.png

 src/books/botany/assets/images/sutie003.png

 src/books/botany/assets/images/sutie004.png

 src/books/botany/assets/images/wuhuanzi001.png

 src/books/botany/assets/images/wuhuanzi002.png

 src/books/botany/assets/images/wuhuanzi003.png

 src/books/botany/assets/images/yuanbaofeng.png

 src/books/botany/assets/images/zishu.png

 src/books/botany/assets/images/ziye001.png

 src/books/botany/assets/images/ziye002.png

 src/books/botany/assets/images/ziye003.png

 src/books/botany/assets/images/ziye004.png

 src/books/botany/assets/images/ziyeli.png

 src/books/botany/assets/images/¶Ô»°ÏûÏ¢ÌÖÂÛ (1).svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728865689474" class="icon" viewBox="0 0 1039 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="20685" xmlns:xlink="http://www.w3.org/1999/xlink" width="32.46875" height="32"><path d="M286.174886 611.378945a4812.096955 4812.096955 0 0 0 509.595383-15.767562c20.841711-1.839124 39.966567-18.8039 42.024756-37.495721 16.59797-153.696796 11.167204-307.31208-16.28211-460.85604-3.408239-18.666348-22.833672-38.687841-42.697233-43.919921C543.280398-7.483861 307.74002-12.415363 72.199642 38.545194c-19.853373 4.381294-39.436736 24.377313-43.018189 43.848597-28.814647 160.044577-34.709015 320.012736-17.67801 479.909572 10.092259 94.753114 28.233871 189.475662 54.424836 284.177831C129.910448 909.373134 114.626866 629.174129 286.174886 611.378945z" fill="#0e932e" p-id="20686"></path><path d="M658.197652 263.97803a1484.942647 1484.942647 0 0 0-465.374886 0l-11.956856-75.475423a1561.431881 1561.431881 0 0 1 489.283503 0l-11.951761 75.475423zM574.025871 420.487005a1747.703085 1747.703085 0 0 0-382.991284 0l-8.385592-75.954308a1824.029294 1824.029294 0 0 1 399.767562 0l-8.390686 75.954308z" fill="#0e932e" p-id="20687"></path><path d="M964.714985 1020.98404a32.992159 32.992159 0 0 1-23.409353-9.730547c-19.919602-20.041871-31.764378-32.044577-42.488358-42.941772-18.931264-19.196179-33.878607-34.362587-82.602667-82.88796a29.09994 29.09994 0 0 1-1.197214-1.253254c-92.669453-102.532458-220.210945-138.255284-379.114348-106.200517L422.845771 713.259303c183.000517-36.950607 331.225791 5.466428 440.554348 125.987662 47.53194 47.333254 62.866468 62.876657 81.329035 81.609234a1652.603542 1652.603542 0 0 0 23.144438-177.595224c9.959801-132.926408 3.209552-267.758169-20.046965-400.745711L1012.842985 331.144279c24.199005 138.362269 31.219264 278.670647 20.856995 417.03801-6.138905 81.970945-18.508418 165.062687-36.772298 246.972497a33.012537 33.012537 0 0 1-32.217791 25.829254z" fill="#0e932e" p-id="20688"></path></svg>

 src/books/botany/assets/images/˼Ïë¼ÓÓÍÕ¾.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728866532005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26280" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M593.8 1013.9c-10.1 0-19.6-4.4-26.1-12-48.3-56.6-77.3-108.5-86.3-154.4-6.6-33.9 3.9-69.2 28.1-94.3 23.8-24.6 24-39.8 22.9-45.2-2.2-11.5-17.3-24.4-41.5-35.5-65-29.8-104.2-84.5-113.2-158.2-1.7-13.5-2.3-27.4-1.8-41.5-2.1 1.5-4.2 3.1-6.2 4.7-32.5 26.3-45.6 61.4-50.5 79.9-5.9 22.1-19.6 41.2-38.7 53.7l-43.1 28.5 10.6 15c14.1 19.8 16.9 45 7.7 67.4l-29.1 71.1c-1.5 3.7-1.3 7.9 0.5 11.4 1.9 3.6 5.2 6.1 9.1 7l39.4 8.6c39.5 8.6 74.6 31.2 99 63.5l56.8 75.5c5.5 7.3 7.9 16.3 6.6 25.4-1.3 9.1-6 17.1-13.3 22.6-15.4 11.2-37.3 7.7-48.1-6.7l-56.9-75.5c-14.5-19.2-35.4-32.7-58.9-37.8l-39.4-8.6c-23.7-5.2-43.8-20.5-55.2-42.1-11.3-21.7-12.5-47-3.2-69.4l29.3-71.3c0.1-0.3 0.3-0.9-0.2-1.6l-20.8-29.3c-8-11.3-11.2-25.7-8.7-39.3s10.7-25.9 22.3-33.6l57.9-38.2c5-3.3 8.5-8.2 10.1-14 7-26.5 25.9-76.8 73.6-115.6 26.1-21.2 57.3-36 92.7-44.1 40.2-9.2 86.3-9.8 137.1-1.7 52.3 8.3 96.6 26.6 131.7 54.3 30.5 24 54.2 55.3 70.4 92.8 27.3 63.2 28.2 133.2 24.1 180.8-3 34.1-14.4 67-33 95.3-18.9 28.7-41.5 53.1-67.3 72.6-27.9 21.1-59 36-92.7 44.3 8.9 12.7 19.1 25.8 30.4 39 12.3 14.3 10.6 36.1-3.8 48.4-6.3 5.1-14.2 8.1-22.3 8.1zM404.5 428.8l-2.6 22.5c-2.3 20.6-2.3 40.8 0 59.9 7.9 64.8 42.2 112.9 99.2 139 32.9 15.1 51.5 33 55.2 53.2 2.6 13.8-0.3 36.6-29.3 66.7-18.7 19.4-26.8 46.6-21.7 72.7 8.2 41.7 35.4 90 80.9 143.3 3.4 4 9.8 4.6 14.1 1 4.1-3.5 4.6-9.8 1.1-14-16.4-19.3-30.6-38.3-42.3-56.5l-9.9-15.4 18-3.2c36.8-6.4 70.6-21.1 100.3-43.6 23.6-17.8 44.3-40.2 61.7-66.5 16.4-24.8 26.4-53.9 29-84 3.9-44.8 3.2-110.4-22.2-169-14.6-33.8-35.9-61.8-63.2-83.3-31.8-25.1-72.3-41.7-120.4-49.4-47.7-7.6-90.7-7.1-127.9 1.4-31.7 7.3-59.6 20.5-82.8 39.3-42.3 34.4-59.2 79.2-65.4 102.9-3.1 11.6-10.2 21.6-20.2 28.1l-57.9 38.2c-6.2 4.1-10.5 10.5-11.8 17.6-1.3 7.2 0.3 14.8 4.6 20.8l20.9 29.4c5.1 7.4 6.2 16.6 2.8 24.9l-29.3 71.4c-6.5 15.8-5.7 33.5 2.3 48.8 8 15.1 22.1 26 38.8 29.6l39.4 8.6c29.2 6.4 55.2 23 73.2 46.9l56.8 75.5c3.2 4.2 9.5 5.2 14.1 1.8 2-1.5 3.3-3.8 3.7-6.5 0.4-2.6-0.3-5.2-1.9-7.3l-56.9-75.5c-20.9-27.7-51-47-84.8-54.4l-39.4-8.6c-10.9-2.4-20.2-9.5-25.5-19.4-5.2-10-5.8-21.6-1.5-32l29.1-71.1c6.1-14.6 4.2-31-5-44L203 632.9l64.2-42.4c14.1-9.2 24.2-23.3 28.5-39.6 5.7-21.4 20.9-61.9 58.7-92.5 9-7.3 19.1-13.8 29.9-19.3l20.2-10.3z m137 457.5l-5.1-11.7c-5.5-12.6-9.4-24.7-11.5-35.9-3.9-19.7 2.3-40.2 16.5-55 34.9-36.2 38-65.8 34.5-84.2-5.1-26.9-27.5-49.7-66.5-67.5-50.7-23.2-80.1-64.2-87.5-121.9-4.5-35.5 0.9-67 3.4-78.9l1.7-7.8 7.8-1.6c33.3-6.7 71.9-6.7 114.6 0 44.8 7.1 82.2 22.4 111.3 45.4 24.7 19.5 43.9 44.9 57.2 75.6 23.6 54.8 24.2 116.9 20.6 159.4-2.3 26.8-11.2 52.6-25.8 74.7-26.9 40.7-76 91.6-156.7 102.8-0.9 0.1-1.8 0.4-3 1l-11.5 5.6z m-93.8-442c-2.3 13.6-4.9 37-1.6 62.7 6.3 48.8 31 83.4 73.5 102.9 46.6 21.3 73.7 50 80.4 85.1 4.6 24 1.2 61.9-40.9 105.7-8.7 9.1-12.5 21.5-10.2 33.4 1.3 6.6 3.3 13.7 6.1 21.2 70.3-10.5 113.5-55.6 137.4-91.7 12.3-18.7 19.9-40.6 21.9-63.3 3.4-39.7 2.9-97.5-18.7-147.6-11.7-26.9-28.5-49.2-49.9-66.1-25.7-20.3-59.4-33.9-100-40.4-36.5-6-69.4-6.6-98-1.9z" fill="#0e932e" p-id="26281"></path><path d="M399.8 810.8c-15.3 0-30.2-4.5-42.9-13.1-7.6-5.1-12.8-12.9-14.6-21.9-1.8-9 0.1-18.2 5.3-25.8 5-7.6 12.8-12.8 21.9-14.6 9.1-1.7 18.2 0.1 25.8 5.3 1.9 1.3 4.1 1.7 6.4 1.3 2.3-0.5 4.3-1.8 5.5-3.7 1.3-1.9 1.7-4.2 1.3-6.5-0.5-2.3-1.8-4.3-3.7-5.5-7.6-5.1-12.8-12.9-14.6-21.9-1.8-9 0.1-18.2 5.2-25.7 5.1-7.6 12.9-12.8 21.9-14.6 9-1.7 18.2 0.1 25.8 5.2 35.4 23.7 44.9 71.9 21.1 107.2-14.4 21.5-38.5 34.3-64.4 34.3zM376 759.2c-0.6 0-1.3 0.1-1.9 0.2-2.6 0.5-4.9 2-6.3 4.2-1.5 2.3-2.1 4.9-1.5 7.5 0.5 2.6 2 4.9 4.2 6.3 8.8 5.9 18.9 8.9 29.4 8.9 17.8 0 34.3-8.7 44.1-23.4 16.2-24.2 9.7-57.1-14.5-73.4-2.2-1.5-4.8-2.1-7.4-1.5-2.6 0.5-4.8 2-6.3 4.2-1.5 2.3-2.1 4.9-1.5 7.5 0.5 2.6 2 4.9 4.2 6.3 7.3 5 12.3 12.4 14 21.1 1.7 8.7-0.1 17.5-5 24.8-10.2 15.1-30.7 19.2-45.9 9-1.8-1.1-3.7-1.7-5.6-1.7zM124.5 523.5c-57.8 0-104.8-47-104.8-104.7S66.7 314 124.5 314s104.7 47 104.7 104.8-47 104.7-104.7 104.7z m0-185.1c-44.3 0-80.4 36-80.4 80.4 0 44.3 36 80.4 80.4 80.4 44.3 0 80.4-36 80.4-80.4-0.1-44.4-36.1-80.4-80.4-80.4z" fill="#0e932e" p-id="26282"></path><path d="M124.5 326.2c-51.1 0-92.6 41.4-92.6 92.6 0 51.1 41.4 92.6 92.6 92.6 51.1 0 92.6-41.4 92.6-92.6-0.1-51.2-41.5-92.6-92.6-92.6z m47 100h-37.1v37.1h-18.6v-37.1H78.4v-18.7h37.3v-37.3h18.6v37.3h37.1v18.7zM502.3 346.8c-91.8 0-166.5-74.7-166.5-166.4 0-91.8 74.7-166.5 166.5-166.5s166.4 74.7 166.4 166.5c0.1 91.7-74.6 166.4-166.4 166.4z m0-308.5c-78.3 0-142.1 63.7-142.1 142.1 0 78.3 63.7 142.1 142.1 142.1 78.3 0 142.1-63.7 142.1-142.1 0-78.4-63.7-142.1-142.1-142.1z" fill="#0e932e" p-id="26283"></path><path d="M502.5 126.1h-1c-0.4 4.9-1.4 9.5-2.9 14l-18.9 57.8h44.1L505 140.5c-1.2-3.6-2-8.4-2.5-14.4z" fill="#0e932e" p-id="26284"></path><path d="M502.3 26.1C417.1 26.1 348 95.2 348 180.4c0 85.2 69.1 154.3 154.3 154.3 85.2 0 154.3-69.1 154.3-154.3 0-85.3-69.1-154.3-154.3-154.3z m42.3 237l-12.4-37.9H472l-12.2 37.9h-38.3l60.6-165.6h41.5L583 263.1h-38.4zM888.6 525.4c-63.4 0-115-51.6-115-115s51.6-115 115-115 115 51.6 115 115-51.6 115-115 115z m0-205.7c-50 0-90.6 40.7-90.6 90.6s40.7 90.6 90.6 90.6 90.6-40.7 90.6-90.6-40.6-90.6-90.6-90.6z" fill="#0e932e" p-id="26285"></path><path d="M888.6 307.5c-56.8 0-102.8 46-102.8 102.8s46 102.8 102.8 102.8 102.8-46 102.8-102.8c0-56.7-46-102.8-102.8-102.8z m34.5 154.7l-35.7-35.7-35.9 35.9-18-18 35.9-35.9-35.9-35.9 17.9-17.9 35.9 35.9 35.7-35.7 18 18-35.7 35.7 35.7 35.7-17.9 17.9z" fill="#0e932e" p-id="26286"></path></svg>

 src/books/botany/assets/images/Á·Ï°.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1728866427323" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="24341" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><path d="M841.710792 959.651436 176.856475 959.651436c-61.197804 0-110.807688-49.643654-110.807688-110.878297L66.048787 183.481871c0-61.241806 50.339502-116.132974 111.538329-116.132974l446.152293 0 0 55.769165L177.586093 123.118062c-30.598902 0-56.132438 29.743418-56.132438 60.363809l0 665.292292c0 30.613228 24.802896 55.44273 55.401798 55.44273l664.854317 0c30.594809 0 60.871369-25.477254 60.871369-56.102762L902.581138 401.965931l55.768141 0 0 446.147176C958.350302 909.351843 902.908596 959.651436 841.710792 959.651436L841.710792 959.651436zM482.681766 718.861348c-8.100492 8.109702-18.243503 12.163017-28.703739 14.199397L211.397153 853.052606c-27.301809 12.674671-49.170886-11.809977-39.10974-39.134299L292.198433 571.171658c2.035356-10.467399 6.087649-20.614503 14.189164-28.723182L737.331513 111.220081c21.638833-21.653159 56.718793-21.653159 78.354556 0l97.942683 98.007151c21.633716 21.649066 21.633716 56.757678 0 78.403674L482.681766 718.861348 482.681766 718.861348zM225.343793 780.39275c-6.335289 12.782118 5.904477 25.904996 19.556405 19.567661l149.800771-90.739631-78.683037-78.726016L225.343793 780.39275 225.343793 780.39275zM345.565898 581.656453l312.716234-312.920896 98.639554 97.303116L443.505511 679.661557C406.779052 642.907469 355.970876 592.065524 345.565898 581.656453L345.565898 581.656453zM854.86437 228.830709l-58.764382-58.803267c-10.818393-10.827603-28.361955-10.827603-39.178301 0l-57.361429 57.394175 96.53666 99.413174 58.767452-58.804291C865.683786 257.208013 865.683786 239.657288 854.86437 228.830709L854.86437 228.830709z" p-id="24342" fill="#0e932e"></path></svg>

 src/books/botany/assets/main.less

New file
@@ -0,0 +1,566 @@
.botany {
    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;
      padding: 20px 116px 104px 116px;
      line-height: 30px;
    }

    .bodystyle-pt{
      font-size: 18px;
      text-align: justify;
      padding: 50px 116px 104px 116px;
      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 {
      font-size: 0.85em;
    }
  
    .img {
      margin: 1em 0;
      text-align: center;
      font-size: 0.8em;
      color: #000;
      text-indent: 0em;
    }
  
    .img1 {
      text-align: right;
      font-size: 0.85em;
      margin-left: 0%;
      margin-right: 2em;
      text-indent: 0em;
    }
  
    p {
      font-family: '宋体';
      // text-indent: 2em;
      line-height: 30px;
      font-size: 18px;
      color: #000;
      text-align: justify;
    }
    .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 {
      display: flex;
      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;
    }

  
    .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";
    }
  
    // è‡ªå®šä¹‰
    .page-box {
      position: relative;
      box-sizing: border-box;
      min-height: 1150px;
      margin-bottom: 20px;
      box-shadow: 0 3px 6px 1px #00000029;
      background-color: #fff;
    }
    ul {
      list-style: none;
      margin: 0;
      padding: 0;
    }
    .fl {
      display: flex;
    }
    .fw-wr {
      flex-wrap: wrap;
    }
    .fl-cl {
      flex-direction: column;
    }
    .ju-bt {
      justify-content: space-between;
    }
    .ju-cn {
      justify-content: center;
    }
    .ju-end {
      justify-content: flex-end;
    }
    .al-cn {
      align-items: center;
    }
    .al-end {
      align-items: end;
    }
    .wh-nr {
      white-space: nowrap;
    }
    .w100 {
      width: 100%;
    }
    .m0 {
      margin: 0;
    }
    .mr-8 {
      margin-right: 8px;
    }
    .mt-20 {
      margin-top: 20px;
    }
    .mt-40 {
      margin-top: 40px !important;
    }
    .mb-20 {
      margin-bottom: 20px;
    }
    .mb-40 {
      margin-bottom: 40px;
    }
    .ml-40 {
      margin-left: 40px;
    }
    .mr-40 {
      margin-right: 40px;
    }
    .pg-mh {
      min-height: 1150px;
    }
    .dl-ib {
      display: inline-block;
    }
    .w-min {
      width: min-content;
    }
    .w40 {
      width: 40px;
    }
    .pb-box {
      position: absolute;
      bottom: 0;
    }
    .m16-0 {
      margin: 16px 0;
    }
    .fm-son {
      font-family: "宋体", SimSun, sans-serif;
    }
    .auido-text {
      font-size: 22px;
      font-family: "FangSong", "PMingLiU", serif;
      font-weight: bold;
    }
    .front{
      text-align: left !important;
    }
  }
  
  /* åª’体查询做基础响应式布局 */
  @media (max-width: 660px) {
    .ans-dance {
      /* åˆ†é¡µpadding */
      .page-padding {
        padding: 104px 20px;
      }
      .padding-96 {
        padding: 0 20px;
      }
      /* video大小 */
      .video-box {
        max-width: 260px;
      }
      .audio-box {
        margin-top: 20px;
        flex-wrap: wrap;
        li {
          width: 100%;
        }
        li:nth-child(2) {
          margin-top: 10px;
        }
      }
      .page-box{
        min-height: 500px;
      }
      .pg-mh {
        min-height: 815px;
      }
      .share-img-box {
        min-height: 460px;
      }
    }
  }
  @media (max-width:820px) {
    .botany {
      .page-box {
        min-height: 500px;
      }
    } 
  }
  @media (min-width: 660px) {
    .botany {
      .page-padding {
        padding: 104px 96px;
      }
      .padding-96 {
        padding: 0 96px;
      }
      .video-box {
        max-width: 370px;
      }
      .share-img-box {
        min-height: 650px;
      }
      .audio-box {
        margin-top: 20px;
        flex-wrap: nowrap;
        li {
          width: 58%;
        }
      }
    }
  }
  
  
  ::-webkit-scrollbar {
    width: 8px;
    height: 10px;
  }
  
  ::-webkit-scrollbar-track-piece {
    background-color: rgba(0, 0, 0, 0.1);
    -webkit-border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:vertical {
    height: 5px;
    background-color: rgba(125, 125, 125, 0.3);
    -webkit-border-radius: 6px;
  }
  
  ::-webkit-scrollbar-thumb:horizontal {
    width: 5px;
    background-color: rgba(125, 125, 125, 0.3);
    -webkit-border-radius: 6px;
  }


// è‡ªå®šä¹‰
.page-header-odd {
  margin: 0;
  margin-bottom: 20px;
  width: 100%;
  height: 104px;
  display: flex;
  justify-content: space-between;
  li:first-child {
    border: 1px solid #0E932E;
    width: 15%;
    height: 24px;
    text-align: right;
    padding-right: 4px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-weight: 400;
  }
  li:nth-child(2) {
    padding: 0 4px;
    min-width: 132px;
    height: 24px;
    border: 1px solid #0E932E;
    text-align: center;
    box-sizing: border-box;
    color: #0E932E;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  li:last-child {
    width: 64%;
    height: 24px;
    background-color: #0E932E;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 5px;
  }
}
  

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

New file
@@ -0,0 +1,1286 @@
<template>
  <div class="chapter" num="1">
    <div class="page-box mt-20" page="1">
      <div v-if="showPageList.indexOf(1) > -1">
        <div class="cover">
          <img class="img-0 header-img" src="../../assets/images/fengmianBg.png" alt="">
          <div class="header-box">
            <div class="header-inner-box">
              <div class="inner-top">项目二</div>
              <div class="inner-bottom">常见观赏树木识别与应用</div>
            </div>
          </div>
          <div class="main-box">
            <div class="main-text">任务三</div>
            <div class="main-text">观叶类观赏树木的识别与应用</div>
          </div>
          <div class="text-box">
            <div class="text-top">
              <div class="text-title">
                <div class="titleImg-box">
                  <img class="titleImg-box-img" src="../../assets/images/mubiao.png" alt="">
                </div>
              </div>
              <div class="title-text">
                <div class="title-text-box">
                  çŸ¥è¯†ç›®æ ‡
                </div>
                <div class="title-text-triangle"></div>
              </div>
              <p class="block">
                1.了解常见观叶树木的观赏特性及园林应用形式。
              </p>
              <p class="block">2.掌握常见观叶树木的识别特征，花（花序）观赏特性及园林应用。</p>
              <p class="block">3.重点掌握观叶树木的识别特征、习性、观赏特性及园林应用。</p>
            </div>
          </div>
          <div class="text-box-bottom">
            <div class="text-top">
              <div class="text-title">
                <div class="titleImg-box">
                  <img class="titleImg-box-img" src="../../assets/images/mubiao.png" alt="">
                </div>
              </div>
              <div class="title-text">
                <div class="title-text-box">
                  èƒ½åŠ›ç›®æ ‡
                </div>
                <div class="title-text-triangle"></div>
              </div>
              <p class="block">
                1.能进行常见观叶树木的识别。
              </p>
              <p class="block">2.能对园林绿地中亦混淆的观叶树木进行辨别。</p>
              <p class="block">3.能在植物景观设计与营造中正确选择、配置观叶树木。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="2">
      <div v-if="showPageList.indexOf(2) > -1">
        <ul class="page-header-odd fl al-end">
          <li>001</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <h1 class="center"><span class="span-c ff-s"><strong>项目二
                å¸¸è§è§‚赏树木识别与应用</strong></span></h1>
          <p class="center"><span class="span-c"><strong><span class="ff-s f-18">任务三
                  è§‚叶类观赏树木的识别与应用</span></strong></span></p>
          <p> </p>
          <p><span class="f-18">一、常绿树类</span></p>
          <p><span class="ff-s f-18 fw-800">1.石楠（千年红、扇骨木）<em>Photinia
                serrulata</em>蔷薇科 çŸ³æ¥ å±ž</span></p>
          <p><span><span
                class="span-c">【识别特征】</span>常绿小乔木，树冠卵形或圆球形。单叶互生，革质，表面深绿，有光泽，长椭圆形至倒卵状椭圆形，缘有细尖锯齿。新叶红色。花单性，复伞房花序顶生，花小，白色。花期5～7月。梨果球形，红色。果期10～11月。</span>
          </p>
          <p class=" "><span><span
                class="span-c">【分布及习性】</span>主产长江流域及秦岭以南地区，华北地区有栽培，多呈灌木状。喜温暖湿润的气候，抗寒力不强，气温低于-10℃以下会落叶、死亡；喜光也耐荫，对土壤要求不严，以肥沃湿润的砂质土壤最为适宜；萌芽力强，耐修剪，对烟尘和有毒气体有一定的抗性。</span>
          </p>
          <p class=" "><span><span
                class="span-c">【植物用途】</span>石楠树冠圆整，叶片光绿，初春嫩叶紫红，春末白花点点，秋日红果累累，极富观赏价值，是著名的庭院绿化树种。在园林中孤植、丛植及作基础栽植都很合适。低矮的灌木丛可与金叶女贞、红叶小檗，扶芳藤等组成美丽的图案。叶根可入药。南方地区常用作嫁接枇杷的砧木</span>
          </p>
          <div class="bk-ztgs">
            <p class="bj1-ztgs">品种</p>
            <p class="fw-800">
              çº¢å¶çŸ³æ¥ 
              <em>P</em>
              <em>hotinia fraseri</em> :
            </p>
            <p>
              ä¸ºæˆ‘国产的石楠与光叶石楠（<em>P.glabra</em>）杂交而成，外形与石楠甚相似，主要区别是：常绿小乔木，叶长椭圆至卵状椭圆形，新梢及嫩叶鲜红持久，艳丽夺目。园林中常见的栽培品种有红罗宾;（<em>P</em><em>hotinia
                fraseri</em><em> </em> Red Robin ;）和 çº¢å”‡ ;（<em>P</em><em>hotinia
                fraseri</em> Red Tip ;），均是目前国外红色绿篱的主栽品种，被誉为红叶绿篱之王。耐寒能力强，最低可达-18℃，适合在我国黄河流域以南地区栽植。
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="3">
      <div v-if="showPageList.indexOf(3) > -1">
        <ul class="page-header-odd fl al-end">
          <li>002</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/shinan001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/shinan002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/shinan003.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-4 çŸ³æ¥ </p>
          <p><span class="ff-s f-18 fw-800">2.女贞（大叶女贞、蜡树）<em>Ligustrum
                lucidum</em> æœ¨çŠ€ç§‘ å¥³è´žå±ž</span></p>
          <p><span><span
                class="span-c">【识别特征】</span>常绿乔木，树冠倒卵形。树皮灰色平滑，枝开展，具皮孔。叶革质，卵形至卵状披针形，全缘，表面深绿色，有光泽。圆锥花序顶生，花小、白色，芳香，花冠裂片与花冠筒近等长。花期6～7月。浆果状核果椭圆形，熟时紫黑色。果期11～12月。</span>
          </p>
          <p><span><span
                class="span-c">【分布及习性】</span>分布于长江流域及以南各地。长江以北地区有栽培。喜光，稍耐阴，喜温暖，不耐寒，不耐干旱，在微酸性至微碱性湿润土壤上生长良好；对二氧化硫、氯气、氟化氢等有害气体抗性强；生长快，萌芽力强，耐修剪；侧根发达，移栽极易成活。</span>
          </p>
          <p><span><span
                class="span-c">【植物用途】</span>女贞枝叶清秀，终年常绿，夏日白花满树，微带芳香，冬季紫果经久不凋，是优良绿化树种和抗污染树种。可孤植、列植于园林绿地、草坪边缘、广场、建筑物周围，亦可作行道树。生长快又耐修剪，也用于绿篱。我国北方地区露地多栽植于建筑物的南侧。</span>
          </p>
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/nvzhen001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/nvzhen002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/nvzhen003.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-5 å¥³è´ž</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="4">
      <div v-if="showPageList.indexOf(4) > -1">
        <ul class="page-header-odd fl al-end">
          <li>003</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p><span class="f-16"><span class="ff-s f-18 fw-800">3.苏铁(铁树、凤尾蕉、凤尾松、避火蕉) <em>Cycas
                  revolute</em><em> </em>Thunb è‹é“ç§‘ è‹é“å±ž</span></span></p>
          <p><span><span
                class="ff-s span-c">【识别特征】</span>常绿棕榈状乔木，全株呈伞形。主干粗壮，圆柱形，有显著的落叶痕迹。大型羽状复叶丛生茎端，厚革质而坚硬。花顶生，雌雄异株，雄球花圆柱形，黄色；雌球花头状扁球形，密生褐色绒毛，花期6～7月。种子倒卵形，略扁，10月成熟，熟时棕红色。</span>
          </p>
          <p>
            <span><span
                class="ff-s span-c">【分布及习性】</span>原产我国福建、台湾、广东等地。华南、西南地区可露地栽植，长江流域及以北地区多盆栽。喜光，但耐半阴；喜温暖湿润，不耐严寒及长期干旱；寿命长，可达300年以上；在原产地通常10年生植株即可开花，且连年均能开花结实，但长江以北由于日照过长，且积温不够，因而不易孕蕾开花，故有
              60年一花 æˆ– åƒå¹´é“æ ‘难开花 ä¹‹è¯´ã€‚</span>
          </p>
          <p><span><span
                class="ff-s span-c">【植物用途】</span>铁树四季常青，主干铁青而叶色墨绿并具光泽。苏铁树形优美，是表现热带风光的优良树种。在南方适于草坪内孤植或群植，北方地区多盆栽，可布置于花坛中心，也可用于装饰大型会场。羽状叶可用于插花。</span>
          </p>
          <div class="bk-ztgs">
            <p class="bj1-ztgs">应用注意事项</p>
            <p>
              å› è‹é“ä¸ºè‚‰è´¨æ ¹ï¼Œä¸è€ç§¯æ°´ï¼Œå› æ­¤ï¼Œç›†æ ½æ—¶å¿Œç”¨ç²˜è´¨åœŸå£¤ï¼Œäº¦å¿Œæµ‡æ°´è¿‡å¤šï¼Œå¦åˆ™æ˜“烂根。
            </p>
          </div>
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/sutie001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/sutie002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/sutie003.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/sutie004.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-6 è‹é“</p>
          <p> </p>
          <p><span class="f-18">二、落叶树类</span></p>
          <p><span class="ff-s f-18 fw-800">4.七叶树（桫椤树）<em>Aesculus chinensis </em>七叶树科 ä¸ƒå¶æ ‘属</span></p>
          <p><span><span
                class="span-c">【识别特征】</span>落叶乔木，树冠庞大，圆球形。树皮灰褐色，片状剥落。掌状复叶，对生，小叶5～7，长椭圆状披针形至矩圆形，缘具细锯齿。圆锥花序密集圆柱状，花白色，芳香。花期5月。蒴果近球形，黄褐色。种子形如板栗，深褐色。果期9～10月。</span>
          </p>
          <p class=" "><span><span
                class="span-c">【分布及习性】</span>我国黄河流域及东部各省均有分布。喜光，稍耐阴；喜温暖湿润气候，较耐寒，畏酷热。喜深厚、肥沃、湿润而排水良好的土壤；深根性，萌芽力不强，生长较慢，寿命长。</span>
          </p>
          <p class=" "><span><span
                class="span-c">【植物用途】</span>七叶树树干耸直，冠大荫浓，初夏繁花满树，硕大的白色花序又似一盏华丽的烛台，蔚然可观，是世界著名观赏树。与悬铃木、鹅掌楸、银杏、椴树共称为世界五大行道树。可孤植、群植，或与常绿树和阔叶树混种。</span>
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="5">
      <div v-if="showPageList.indexOf(5) > -1">
        <ul class="page-header-odd fl al-end">
          <li>004</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/qiyeshu.png" />
          </p>
          <p class="img">图2-3-7 ä¸ƒå¶æ ‘</p>
          <p><span><span class="ff-s f-18 fw-800">5.黄栌<em>Cotinus coggygria </em>漆树科 é»„栌属</span></span></p>
          <p><span><span
                class="span-c">【识别特征】</span>落叶小乔木或灌木，树冠卵圆形或圆球形。树皮深灰褐色，不开裂。单叶互生，宽卵形或圆形，侧脉顶端常2叉状。花小，杂性，圆锥花序顶生，花后多数不孕，花梗伸长成淡紫色羽状，宿存在树梢上。花期4～5月。核果小，扁肾形。果期6～7月。</span>
          </p>
          <p><span><span class="span-c">【分布及习性】</span>原产于我国西南、华北和浙江。欧洲东南部也有分布。喜光，稍耐阴；耐干瘠，耐寒，要求土壤排水良好；萌蘖力强，生长快。</span>
          </p>
          <p><span><span
                class="span-c">【植物用途】</span>黄栌是我国重要的观赏红叶树种，叶片秋季变红，鲜艳夺目，著名的北京香山红叶即为本种。花后久留不落的不孕花的花梗呈粉红羽毛状在枝头形成似云似雾的景观，宛如万缕罗纱缭绕林间，故有
              çƒŸæ ‘ çš„美誉。在园林中可大面积栽植成风景林，也可丛植、片植在庭园、林缘、山坡、河岸或配置于大型山石旁。</span>
          </p>
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/huanglu.png" />
          </p>
          <p class="img">图2-3-8 é»„æ Œ</p>
        </div>
      </div>
    </div>
    <div class="page-box" page="6">
      <div v-if="showPageList.indexOf(6) > -1">
        <ul class="page-header-odd fl al-end">
          <li>005</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p><span><span class="ff-s f-18 fw-800">6.无患子（皮皂子）<em>Sapindus
                  mukurossi </em>Gaertn æ— æ‚£å­ç§‘ æ— æ‚£å­å±ž</span></span>
          </p>
          <p><span><span
                class="span-c">【识别特征】</span>落叶或半常绿乔木，高达25m，树冠广卵形或扁球形。树皮灰白色，平滑不裂。小枝无毛，芽两个叠生。偶数羽状树叶，互生或近对生，小叶8～14，卵状披针形，全缘，薄革质。顶生圆锥花序，黄白色或带淡紫色。花期5～6月。核果近球形，熟时黄色或橙黄色；种子球形，褐色，坚硬。果期9～10月。</span>
          </p>
          <p><span><span
                class="span-c">【分布及习性】</span>产我国长江流域及其以南地区。越南、老挝、印度、日本亦产。喜光，耐寒性不强；对土壤要求不严，不耐水湿，耐干旱；深根性，抗风力强；萌芽力弱，不耐修剪；寿命长；对二氧化硫抗性较强。</span>
          </p>
          <p><span><span
                class="span-c">【植物用途】</span>无患子树形高大，树冠开展，绿荫稠密，秋叶金黄，果实累累，颇为美观，若与其它秋色叶树种及常绿树种配植，更可谓园林秋景增色。宜作庭荫树及行道树。果肉含皂素，可代肥皂使用；根及果入药；种子榨油可作润滑油用。</span>
          </p>
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/wuhuanzi001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/wuhuanzi002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/wuhuanzi003.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-9 æ— æ‚£å­</p>
          <p><span><span class="ff-s f-18 fw-800">7.紫叶李（红叶李）<em>Prunus cerasifera
                </em>f.<em> atropurpurea</em> è”·è–‡ç§‘ æŽå±žï¼ˆæ¨±å±žï¼‰</span></span></p>
          <p><span><span
                class="span-c">【识别特征】</span>落叶小乔木。干皮紫灰色，小枝光滑，紫红色。单叶互生，叶卵形至倒卵形，基部圆形，缘有重锯齿。叶片、花柄、花萼、雄蕊都成紫红色。花单生或2～3朵聚生，淡粉红色。花期4～5月。核果近球形，暗红色。果期6～7月。</span>
          </p>
          <p><span><span
                class="span-c">【分布及习性】</span>原产亚洲西南部，现各地广为栽培。喜光，喜温暖湿润气候，有一定的抗旱能力；对土壤适应性强，不耐干旱，较耐水湿，但在肥沃、深厚、排水良好的黏质中性、酸性土壤中生长良好，不耐碱；浅根性，萌蘖性强。</span>
          </p>
          <p><span><span
                class="span-c">【植物用途】</span>紫叶李叶片自春至秋呈红色，尤以春季最为鲜艳，花小，白色或粉红色，是良好的观叶植物。可丛植、孤植于草坪角隅和建筑物前，或以浅色叶树为背景树，更能烘托出叶色美的特性；与常绿树配植，则绿树红色相映成趣。</span>
          </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>006</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/ziyeli.png" />
          </p>
          <p class="img">图2-3-10 ç´«å¶æŽ</p>
          <p><span><span class=" ff-s f-18 fw-800">8.丝绵木（明开百合、白杜）<em>Euonymus</em><em>&nbsp;</em><em>bungeanus</em>卫矛科
                å«çŸ›å±ž</span></span></p>
          <p><span class="ff-s"><span
                class="span-c">【识别特征】</span>落叶小乔木，树冠圆形或卵圆形。小枝细长，绿色无毛，四棱形。单叶对生，卵形至卵状椭圆形，缘有细锯齿。花淡绿色，花部4数，3～7朵成聚伞花序。花期5月。蒴果粉红色，4深裂，种子具红色假种皮。果期10月。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【分布及习性】</span>产我国华东、华中、华北各地。喜光，稍耐阴；耐寒，耐旱，耐水湿，对土壤要求不严；深根性，生长较慢，根系发达，根蘖性强；对有害气体有一定抗性。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【植物用途】</span>丝绵木枝叶秀丽，秋季叶果红艳，是良好的园林绿化和观赏树种。宜植于林缘、草坪、路旁、湖边及溪畔，也可用作防护林及工厂绿化树种。</span>
          </p>
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/simianmu001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/simianmu002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/simianmu003.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-10 ä¸ç»µæœ¨</p>
          <p><span><span><span class="ff-s f-18 fw-800"><span>9.紫叶小檗<em>Berberis
                      thunbergii </em>小檗科 å°æª—属 </span>&nbsp;</span></span>&nbsp;</span></p>
          <p><span class="ff-s"><span
                class="span-c">【识别特征】</span>落叶多枝灌木。幼枝紫红色，老枝灰褐色或紫褐色，有槽，具刺。叶全缘，菱形或倒卵形，叶深紫色或红色，在短枝上簇生。花单生或2～5朵成短总状花序，黄色，下垂，花瓣边缘有红色纹晕。浆果红色，宿存。花期4月份．果熟期9～10月份。</span>
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="8">
      <div v-if="showPageList.indexOf(8) > -1">
        <ul class="page-header-odd fl al-end">
          <li>007</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p><span class="ff-s"><span
                class="span-c">【分布及习性】</span>紫叶小檗原产日本，我国秦岭地区也有分布．现我国各大城市有栽培。喜凉爽湿润的环境，耐寒也耐旱，不耐水涝，喜阳，耐修剪，对各种土壤都能适应。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【植物用途】</span>紫叶小檗春开黄花，秋缀红果，是叶、花、果俱美的观赏花木。适宜在园林中作花篱或在园路角隅丛植、大型花坛镶边或剪成球形对称状配植．或点缀在岩石间、池畔。也可制作盆景。</span>
          </p>
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/ziye001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/ziye002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/ziye003.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/ziye004.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-11 ç´«å¶å°æª—</p>
          <p><span><span class="ff-s f-18 fw-800">10.梓树（黄花楸、水桐、木角豆）<em>Catalpa ovata</em>紫葳科
                æ¢“树属</span></span></p>
          <p><span class="ff-s"><span
                class="span-c"><strong>【识别特征】</strong></span>落叶乔木。树皮灰褐色，浅纵裂。单叶对生，或3叶轮生，广卵形或近圆形，基部心形或圆形，基部脉腋有紫斑。顶生圆锥花序，花冠淡黄色，内有黄色条纹及紫色斑纹。花期5～6月。蒴果细长下垂，长22～30cm。种子有毛。果期9～10月。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c"><strong>【分布及习性】</strong></span>原产我国，分布于东北、华北，南至华南北部，以黄河中下游为分布中心。喜光，稍耐阴；适生于温带地区，耐寒；喜深厚、肥沃、湿润土壤，不耐干瘠。抗性强，深根性。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c"><strong>【植物用途】</strong></span>梓树树冠宽大，夏季花大鲜艳，秋冬蒴果垂挂。可作庭荫树、行道树、独赏树及&ldquo;四旁&rdquo;绿化树种。常与桑树配植，&ldquo;桑梓&rdquo;意即故乡。</span>
          </p>
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/zishu.png" />
          </p>
          <p class="img">图2-3-12 æ¢“æ ‘</p>
        </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>008</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p><span><span class="ff-s f-18 fw-800">11.楸树（梓桐、金丝楸）<em>Catalpa bungei </em>紫葳科
                æ¢“树属</span></span></p>
          <p><span class="ff-s"><span
                class="span-c">【识别特征】</span>落叶乔木，树冠狭长或倒卵形。树皮灰褐色，浅纵裂，老树干具瘤状突起。单叶对生或轮生，三角状卵形至卵状椭圆形，全缘或中下部有裂片，基部脉腋有紫斑。顶生伞房状总状花序；花冠白色，内有紫斑。花期4～5月。蒴果长25～50cm。种子有毛。果期9～10月。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【分布及习性】</span>原产我国，长江下游和黄河流域各地普遍栽培。喜光，喜温凉气候，苗期耐庇荫；在深厚肥沃、湿润疏松的中性、微酸性和钙质壤土中生长迅速，不耐干旱和水湿；主根明显、粗壮，侧根发达，萌芽力、根蘖力都很强。自花不育，需异株或异花授粉。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【植物用途】</span>楸树树姿俊秀，枝繁叶茂，花多盖冠，其花形若钟，红斑点缀白色花冠，如雪似火，颇为美丽。可孤植、列植、丛植、与建筑配植更能显示古朴、苍劲的树势。</span>
          </p>
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/jiushu.png" />
          </p>
          <p class="img">图2-3-13 æ¥¸æ ‘</p>
          <p><span><span
                class="ff-s f-18 fw-800">12.金叶女贞<em>Ligustrum</em><em>&times;</em><em>vicaryi</em>&nbsp;&nbsp;木犀科
                å¥³è´žå±ž</span></span></p>
          <p><span class="ff-s"><span
                class="span-c">【识别特征】</span>灌木，高2～3米，冠幅1.5～2米。枝条铺散。单叶对生，椭圆形或卵状椭圆形，长2～5厘米。总状花序，小花白色。核果阔椭圆形，紫黑色。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【分布及习性】</span>中国中部、东部、西南部。金叶女贞性喜光，耐阴性较差，耐寒力中等，适应性强，以疏松肥沃、通逶性良好的沙壤土为最好。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【植物用途】</span>金叶女贞在生长季节叶色呈鲜丽的金黄色，尤其在春秋两季色泽更加璀璨亮丽。可与红叶的紫叶小檗、红花继木、绿叶的龙柏、黄杨等组成灌木状色块，形成强烈的色彩对比，具极佳的观赏效果。由于</span>
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1">
        <ul class="page-header-odd fl al-end">
          <li>009</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p style="text-indent: 0em;"><span class="ff-s">其叶色为金黄色，所以大量应用在园林绿化中，主要用来组成图案和建造绿篱。</span></p>
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/jinyenvzhen001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/jinyenvzhen002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/jinyenvzhen003.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-14 é‡‘叶女贞</p>
          <p><span><span class="ff-s f-18 fw-800 ">13.柽柳（三春柳、红荆条）<em>Tamarix chinensis</em>&nbsp;柽柳科
                æŸ½æŸ³å±ž</span></span></p>
          <p><span class="ff-s"><span
                class="span-c">【识别特征】</span>落叶小乔木，树冠圆球形。小枝细长下垂，红褐色或淡棕色。单叶互生，鳞片状或卵状披针形。总状花序组成顶生大型圆锥花序，多柔弱下垂；花粉红色或紫红色，苞片线状披针形。花期4～9月。蒴果3裂，长3～3.5cm。果期10月。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【分布及习性】</span>我国特有种。长江中下游至华北、辽宁南部各地，华南、西南有栽培。喜光，对气候适应性强，适于温凉气候；耐盐碱土（pH7.5～8.5）能力极强，也能分泌盐分，为盐碱地指示植物。深根性，根系发达，耐旱力、抗风力强；耐修剪，耐沙割与沙埋，生长快。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【植物用途】</span>柽柳枝条细柔，姿态婆娑，开花如红蓼，颇为美观。在庭院中可作绿篱用，适宜于水滨、池畔、桥头、河岸、堤防栽植。还有降低土壤含盐量的显著功效和保土固沙等防护功能，是改造盐碱地和海滨防护林的优良树种。老桩可作盆景。</span>
          </p>
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/guailiu001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/guailiu002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/guailiu003.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/guailiu004.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-15 æ€ªæŸ³</p>
          <p><span><span class="ff-c f-18 fw-800">14.元宝槭（元宝枫、平基槭）<em>Acer
                  truncatum</em>槭树科 æ§­æ ‘属</span></span></p>
          <p><span class="ff-c"><span
                class="span-c">【识别特征】</span>落叶乔木，树冠伞形或倒广卵形。干皮浅纵裂。叶掌状5裂，叶基常截形，全缘，叶柄细长。花杂性，黄绿色，顶生伞房花序。花期4月。翅果扁平，两翅展开约成直角，形似元宝。果期10月。</span>
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
        <ul class="page-header-odd fl al-end">
          <li>010</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p><span class="ff-c"><span
                class="span-c">【分布及习性】</span>主产我国黄河中、下游各地，东北南部、江苏北部、安徽南部也有分布。弱阳性，耐半阴，喜生于阴坡及山谷；喜温凉气候及肥沃、湿润而排水良好的土壤，稍耐旱，不耐涝；萌蘖力强，深根性，对环境适应性强；移植易成活。</span>
          </p>
          <p><span class="ff-c"><span
                class="span-c">【植物用途】</span>元宝枫冠大荫浓，树形优美，叶形奇特，嫩叶红色，秋季叶又变成橙黄色或红色，是北方优良的秋色叶树种。可作庭荫树和行道树。</span>
          </p>
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/yuanbaofeng.png" />
          </p>
          <p class="img">图2-3-16 å…ƒå®æž«</p>
          <p><span><span class="ff-c f-18 fw-800">15.鸡爪槭<em>Acer</em><em>&nbsp;</em><em>palmatum </em>槭树科
                æ§­æ ‘属</span></span></p>
          <p><span class="ff-c "><span
                class="span-c">【识别特征】</span>落叶小乔木，树冠伞形。树皮平滑，灰褐色。枝开张，小枝细长，光滑。单叶对生，5～9掌状深裂，基部心形，裂片缘有重锯齿。花杂性，紫色，伞房花序顶生。花期5月。翅果紫红色至棕红色，两翅成钝角。果期10月。</span>
          </p>
          <p><span class="ff-c"><span
                class="span-c">【分布及习性】</span>主要分布于我国华东、华中各地。喜温暖、湿润气候及半阴环境，适生于肥沃、疏松的土壤，不耐涝，较耐旱，夏季在阳光暴晒或潮风影响的地方生长不良。</span>
          </p>
          <p><span class="ff-c"><span
                class="span-c">【植物用途】</span>鸡爪槭叶形秀丽，树姿婆娑，入秋叶色红艳，是珍贵的的秋色叶树种。宜植于庭园、草坪、建筑物前，或与常绿针叶及阔叶树类混植。</span>
          </p>
          <div class="bk-ztgs">
            <p class="bj1-ztgs">常见变种</p>
            <p class="ti-2">
              çº¢æž«ï¼ˆç´«çº¢é¸¡çˆªæ§­ï¼‰&lsquo;Atropurpureum&rsquo;:叶常年红色或紫红色，5～7深裂；枝条也常紫红色。
            </p>
            <p class="ti-2">
              ç¾½æ¯›æž«ï¼ˆç»†å¶é¸¡çˆªæ§­ï¼‰&lsquo;Dissectum&rsquo;：叶深裂达基部，裂片狭长且又羽状细裂，秋叶深黄至橙红色；树冠开展而枝略下垂。
            </p>
            <p class="ti-2">
              é‡‘叶鸡爪槭&lsquo;Aureum&rsquo;：叶常年金黄色。
            </p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <ul class="page-header-odd fl al-end">
          <li>011</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p class="center openImgBox">
            <img class="img-c" alt="" src="../../assets/images/jizhua.png" />
          </p>
          <p class="img">图2-3-17 é¸¡çˆªæ§­</p>
          <p><span><span class="ff-s f-18 fw-800">16.鹅掌楸(马褂木) <em>Liriodendron
                  chinens</em><em>e</em>&nbsp;&nbsp;木兰科 é¹…掌楸属</span></span></p>
          <p><span class="ff-s"><span
                class="span-c">【识别特征】</span>落叶乔木，树冠圆锥形。单叶互生，先端截形，两侧常各具1裂口，向中腰部缩入，形如&ldquo;马褂&rdquo;；老叶背部有白色乳状突点。花单生于枝顶，杯状，花被片淡绿色，内面近基部淡黄色。花期5～6月。聚合果纺锤形；果期9～10月。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【分布及习性】</span>产于我国长江流域以南地区。喜光，喜温暖湿润气候，可耐-15℃的低温；在湿润深厚肥沃疏松的酸性、微酸性土中生长良好，不耐干旱瘠薄，忌积水。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【植物用途】</span>鹅掌楸叶形奇特，秋叶金黄，树形端正挺拔，是珍贵的庭荫树、行道树。宜丛植草坪、列植园路，或与常绿针、阔叶树混交成风景林效果很好，也可在居民区、街头绿地与各种花灌木配植点缀秋景。</span>
          </p>
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/ezhang001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/ezhang002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/ezhang003.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-17 é¹…掌楸</p>
          <p><span><span class="ff-s f-18 fw-800">17.重阳木（朱树）<em>Bischofia polycarpa</em><em>&nbsp;</em>大戟科
                é‡é˜³æœ¨å±ž</span></span></p>
          <p><span class="ff-s"><span
                class="span-c">【识别特征】</span>落叶乔木，高达15m，树冠伞形。树皮褐色，纵裂。羽状三出复叶，小叶卵形至椭圆状卵形，基部圆形或近心形，缘具细锯齿。总状花序。花期4～5月。浆果较小，熟时红褐色至蓝黑色。果期8～10月。</span>
          </p>
          <p><span class="ff-s"><span class="span-c">【分布及习性】</span>产于秦岭-淮河流域以南至广东、广西北部，长江流</span>
          </p>
        </div>
      </div>
    </div>
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
        <ul class="page-header-odd fl al-end">
          <li>012</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p style="text-indent: 0em"><span class="ff-s">域中下游地区习见树种。喜光，稍耐阴；耐水湿，对土壤要求不严。根系发达，抗风力强。</span>
          </p>
          <p><span class="ff-s"><span
                class="span-c">【植物用途】</span>重阳木树姿优美，冠如伞盖，花叶同放，秋叶转红，艳丽夺目，抗风耐湿，生长快速，是良好的庭荫树和行道树种。用于堤岸、溪边、湖畔和草坪周围作为点缀树种极有观赏价值。孤植、丛植或与常绿树种配置，秋日分外壮丽。对二氧化硫有一定抗性，可用于工矿区、街道绿化。</span>
          </p>
          <!-- è½®æ’­å›¾ -->
          <div class="resource-primary-border" style="padding: 8px">
            <div class="banshi openImgBox">
              <div class="swiper-container swiper_ppt">
                <div class="swiper-wrapper">
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/chongyangmu001.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/chongyangmu002.png" />
                    </div>
                  </div>
                  <div class="swiper-slide">
                    <div class="imgBox" style="width: 100%; height: 100%">
                      <img src="../../assets/images/chongyangmu003.png" />
                    </div>
                  </div>
                </div>
                <div class="swiper-button-next"></div>
                <div class="swiper-button-prev"></div>
                <div class="pageBox"></div>
              </div>
              <!-- æ˜¾ç¤ºå½“前页和总页数的元素 -->
            </div>
          </div>
          <p class="img">图2-3-18 é‡é˜³æœ¨</p>
          <p class="fl al-c"><svg t="1728865399557" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="5622" xmlns:xlink="http://www.w3.org/1999/xlink" width="32"
              height="32">
              <path
                d="M849.170732 0c97.404878 0 174.829268 77.42439 174.829268 174.829268v674.341464c0 97.404878-77.42439 174.829268-174.829268 174.829268H174.829268c-97.404878 0-174.829268-77.42439-174.829268-174.829268V174.829268c0-97.404878 77.42439-174.829268 174.829268-174.829268h674.341464z m-167.336586 209.795122c-12.487805-12.487805-34.965854-12.487805-47.453658 0l-24.97561 22.478049-24.97561-22.478049-262.243902 257.24878-24.97561-22.478048L224.780488 514.497561l169.834146 164.839024 72.429268-69.931707-24.975609-22.478049 114.887805-112.390244c32.468293 37.463415 44.956098 74.926829 37.463414 117.385366-7.492683 44.956098-32.468293 89.912195-74.926829 132.370732h-187.317073c-57.443902 0-102.4 44.956098-102.4 99.902439H774.243902c0-54.946341-44.956098-99.902439-102.4-99.902439h-24.975609c22.478049-34.965854 39.960976-74.926829 47.453658-114.887805l2.497561-7.492683c12.487805-72.429268-12.487805-139.863415-64.936585-199.804878l77.42439-74.926829-24.97561-22.478049 24.97561-22.478049c12.487805-12.487805 12.487805-34.965854 0-47.453658l-27.473171-24.97561z"
                fill="#057514" p-id="5623"></path>
            </svg><span class="ff-s f-18 fw-800 span-c " style="margin-left: 5px">实训与操作</span></p>
          <div style="background-color: rgba(55, 201, 111, 0.06); padding: 10px 20px;">
            <p class="center"><span class="ff-s fw-800">实训 æ ¡å›­æˆ–公园观叶园景树识别及景观应用形式调查</span></p>
            <p><span class="ff-s">（一）实训目的</span></p>
            <p><span class="ff-s">能够识别校园或附近公园中不同季节的观叶树木，并进行景观应用形式调查。</span></p>
            <p><span class="ff-s">（二）实训场景</span></p>
            <p><span class="ff-s">1.实训地点 &nbsp;校园以及本地区1-2个有代表性的城市公园</span></p>
            <p><span class="ff-s">2.实训用品与材料 &nbsp;照相机、标本夹、记录本等</span></p>
            <p><span class="ff-s">3.分组情况 &nbsp;自然班级内以2-4人分为一组</span></p>
            <p><span class="ff-s">（三）实训内容</span></p>
            <p><span class="ff-s">1.常见观叶树木识别调查及标本制作。</span></p>
            <p><span class="ff-s">2.易混淆观叶树木辨别。</span></p>
            <p><span class="ff-s">3.选取典型景观节点记录拍照记录观叶树木景观配置方式</span></p>
            <p><span class="ff-s">（四）实训反馈</span></p>
            <p><span class="ff-s">1.城市园林景观中观叶树的应用形式主要有哪些？试分析其原因。</span></p>
            <p><span class="ff-s">2.试分析如何在景观节点通过配置观叶树木体现景观特色。</span></p>
            <p><span class="ff-s">（五）实训考核</span></p>
            <p><span class="ff-s">小组内各成员协作良好占20%，工具使用合理且没有损坏占20%，组内每人完成任务单占60%。</span></p>
          </div>
        </div>
      </div>
    </div>
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <ul class="page-header-odd fl al-end">
          <li>013</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle">
          <p class="fl al-c"><svg t="1728865689474" class="icon" viewBox="0 0 1039 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="20685" xmlns:xlink="http://www.w3.org/1999/xlink"
              width="32.46875" height="32">
              <path
                d="M286.174886 611.378945a4812.096955 4812.096955 0 0 0 509.595383-15.767562c20.841711-1.839124 39.966567-18.8039 42.024756-37.495721 16.59797-153.696796 11.167204-307.31208-16.28211-460.85604-3.408239-18.666348-22.833672-38.687841-42.697233-43.919921C543.280398-7.483861 307.74002-12.415363 72.199642 38.545194c-19.853373 4.381294-39.436736 24.377313-43.018189 43.848597-28.814647 160.044577-34.709015 320.012736-17.67801 479.909572 10.092259 94.753114 28.233871 189.475662 54.424836 284.177831C129.910448 909.373134 114.626866 629.174129 286.174886 611.378945z"
                fill="#0e932e" p-id="20686"></path>
              <path
                d="M658.197652 263.97803a1484.942647 1484.942647 0 0 0-465.374886 0l-11.956856-75.475423a1561.431881 1561.431881 0 0 1 489.283503 0l-11.951761 75.475423zM574.025871 420.487005a1747.703085 1747.703085 0 0 0-382.991284 0l-8.385592-75.954308a1824.029294 1824.029294 0 0 1 399.767562 0l-8.390686 75.954308z"
                fill="#0e932e" p-id="20687"></path>
              <path
                d="M964.714985 1020.98404a32.992159 32.992159 0 0 1-23.409353-9.730547c-19.919602-20.041871-31.764378-32.044577-42.488358-42.941772-18.931264-19.196179-33.878607-34.362587-82.602667-82.88796a29.09994 29.09994 0 0 1-1.197214-1.253254c-92.669453-102.532458-220.210945-138.255284-379.114348-106.200517L422.845771 713.259303c183.000517-36.950607 331.225791 5.466428 440.554348 125.987662 47.53194 47.333254 62.866468 62.876657 81.329035 81.609234a1652.603542 1652.603542 0 0 0 23.144438-177.595224c9.959801-132.926408 3.209552-267.758169-20.046965-400.745711L1012.842985 331.144279c24.199005 138.362269 31.219264 278.670647 20.856995 417.03801-6.138905 81.970945-18.508418 165.062687-36.772298 246.972497a33.012537 33.012537 0 0 1-32.217791 25.829254z"
                fill="#0e932e" p-id="20688"></path>
            </svg><span class="ff-s f-18 fw-800 span-c " style="margin-left: 5px">思考与讨论</span></p>
          <div style="background-color: rgba(55, 201, 111, 0.06); padding: 10px 20px;">
            <p><span class="ff-s">1.如何区分梓树、楸树和黄金树？</span></p>
            <textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
              style="margin-left: 20px; width: 92%" class="fz-16 fm-son " @change="setBookQuestion"></textarea>
            <p><span class="ff-s">2.如何区分鸡爪槭和元宝枫？</span></p>
            <textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
              style="margin-left: 20px; width: 92%" class="fz-16 fm-son " @change="setBookQuestion"></textarea>
            <p><span class="ff-s">3.试着利用本地区春季、夏季、秋季、冬季常见的观叶树木及进行庭院植物配置，并达到三季有花、四季有景的效果。</span></p>
            <textarea v-model="questionData.reading.three" placeholder="请输入内容" rows="6"
              style="margin-left: 20px; width: 92%" class="fz-16 fm-son " @change="setBookQuestion"></textarea>
          </div>
          <p class="fl al-c"><svg t="1728866427323" class="icon" viewBox="0 0 1024 1024" version="1.1"
              xmlns="http://www.w3.org/2000/svg" p-id="24341" xmlns:xlink="http://www.w3.org/1999/xlink" width="32"
              height="32">
              <path
                d="M841.710792 959.651436 176.856475 959.651436c-61.197804 0-110.807688-49.643654-110.807688-110.878297L66.048787 183.481871c0-61.241806 50.339502-116.132974 111.538329-116.132974l446.152293 0 0 55.769165L177.586093 123.118062c-30.598902 0-56.132438 29.743418-56.132438 60.363809l0 665.292292c0 30.613228 24.802896 55.44273 55.401798 55.44273l664.854317 0c30.594809 0 60.871369-25.477254 60.871369-56.102762L902.581138 401.965931l55.768141 0 0 446.147176C958.350302 909.351843 902.908596 959.651436 841.710792 959.651436L841.710792 959.651436zM482.681766 718.861348c-8.100492 8.109702-18.243503 12.163017-28.703739 14.199397L211.397153 853.052606c-27.301809 12.674671-49.170886-11.809977-39.10974-39.134299L292.198433 571.171658c2.035356-10.467399 6.087649-20.614503 14.189164-28.723182L737.331513 111.220081c21.638833-21.653159 56.718793-21.653159 78.354556 0l97.942683 98.007151c21.633716 21.649066 21.633716 56.757678 0 78.403674L482.681766 718.861348 482.681766 718.861348zM225.343793 780.39275c-6.335289 12.782118 5.904477 25.904996 19.556405 19.567661l149.800771-90.739631-78.683037-78.726016L225.343793 780.39275 225.343793 780.39275zM345.565898 581.656453l312.716234-312.920896 98.639554 97.303116L443.505511 679.661557C406.779052 642.907469 355.970876 592.065524 345.565898 581.656453L345.565898 581.656453zM854.86437 228.830709l-58.764382-58.803267c-10.818393-10.827603-28.361955-10.827603-39.178301 0l-57.361429 57.394175 96.53666 99.413174 58.767452-58.804291C865.683786 257.208013 865.683786 239.657288 854.86437 228.830709L854.86437 228.830709z"
                p-id="24342" fill="#0e932e"></path>
            </svg><span class="ff-s f-18 fw-800 span-c " style="margin-left: 5px">练习与判断</span></p>

          <p><span class="fw-800">1.判断题</span></p>
          <p v-for="(item, index) in questionData.judge[0].value" :key="index">
            <span>{{ index + 1 }}</span>.<span>{{ item.stem }}。</span>
            <span>（
              <select class="select-border" v-model="questionData.judge[0].value[index].userAnswer"
                @change="saveListenTwo" :disabled="questionData.judge[0].isComplete">
                <option v-for="(citem, cindex) in questionData.judge[0].option" :key="cindex" :value="citem">
                  {{ citem }}
                </option>
              </select>）
            </span>
          </p>
          <p><span class="fw-800">2.填空题</span></p>
          <p><span class="ff-s">（1）你生活的城市中，常见彩叶树种有<input :disabled="questionData.isComplete"
                v-model="questionData.cm.one" type="text" class="input-bottom-border" style="width: 60px"
                @change="setTestData" />、
              <input :disabled="questionData.isComplete" v-model="questionData.cm.two" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、 <input
                :disabled="questionData.isComplete" v-model="questionData.cm.three" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、 <input
                :disabled="questionData.isComplete" v-model="questionData.cm.four" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、
              <input :disabled="questionData.isComplete" v-model="questionData.cm.five" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />。</span></p>
          <p><span class="ff-s">（2）园林中常见的春色叶树种有 <input :disabled="questionData.isComplete"
                v-model="questionData.am.one" type="text" class="input-bottom-border" style="width: 60px"
                @change="setTestData" />、
              <input :disabled="questionData.isComplete" v-model="questionData.am.two" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、 <input
                :disabled="questionData.isComplete" v-model="questionData.am.three" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />，秋色叶树种有
              <input :disabled="questionData.isComplete" v-model="questionData.am.four" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、<input
                :disabled="questionData.isComplete" v-model="questionData.am.five" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、 <input
                :disabled="questionData.isComplete" v-model="questionData.am.six" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />、
              <input :disabled="questionData.isComplete" v-model="questionData.am.seven" type="text"
                class="input-bottom-border" style="width: 60px" @change="setTestData" />。</span></p>
        </div>
      </div>
    </div>
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
        <ul class="page-header-odd fl al-end">
          <li>014</li>
          <li>植物识别.项目二</li>
          <li>任务三</li>
        </ul>
        <div class="bodystyle-pt">
          <div class="text-top">
            <div class="text-title">
              <div class="titleImg-box">
                <svg t="1728866532005" class="icon" viewBox="0 0 1024 1024" version="1.1"
                  xmlns="http://www.w3.org/2000/svg" p-id="26280" xmlns:xlink="http://www.w3.org/1999/xlink" width="32"
                  height="32">
                  <path
                    d="M593.8 1013.9c-10.1 0-19.6-4.4-26.1-12-48.3-56.6-77.3-108.5-86.3-154.4-6.6-33.9 3.9-69.2 28.1-94.3 23.8-24.6 24-39.8 22.9-45.2-2.2-11.5-17.3-24.4-41.5-35.5-65-29.8-104.2-84.5-113.2-158.2-1.7-13.5-2.3-27.4-1.8-41.5-2.1 1.5-4.2 3.1-6.2 4.7-32.5 26.3-45.6 61.4-50.5 79.9-5.9 22.1-19.6 41.2-38.7 53.7l-43.1 28.5 10.6 15c14.1 19.8 16.9 45 7.7 67.4l-29.1 71.1c-1.5 3.7-1.3 7.9 0.5 11.4 1.9 3.6 5.2 6.1 9.1 7l39.4 8.6c39.5 8.6 74.6 31.2 99 63.5l56.8 75.5c5.5 7.3 7.9 16.3 6.6 25.4-1.3 9.1-6 17.1-13.3 22.6-15.4 11.2-37.3 7.7-48.1-6.7l-56.9-75.5c-14.5-19.2-35.4-32.7-58.9-37.8l-39.4-8.6c-23.7-5.2-43.8-20.5-55.2-42.1-11.3-21.7-12.5-47-3.2-69.4l29.3-71.3c0.1-0.3 0.3-0.9-0.2-1.6l-20.8-29.3c-8-11.3-11.2-25.7-8.7-39.3s10.7-25.9 22.3-33.6l57.9-38.2c5-3.3 8.5-8.2 10.1-14 7-26.5 25.9-76.8 73.6-115.6 26.1-21.2 57.3-36 92.7-44.1 40.2-9.2 86.3-9.8 137.1-1.7 52.3 8.3 96.6 26.6 131.7 54.3 30.5 24 54.2 55.3 70.4 92.8 27.3 63.2 28.2 133.2 24.1 180.8-3 34.1-14.4 67-33 95.3-18.9 28.7-41.5 53.1-67.3 72.6-27.9 21.1-59 36-92.7 44.3 8.9 12.7 19.1 25.8 30.4 39 12.3 14.3 10.6 36.1-3.8 48.4-6.3 5.1-14.2 8.1-22.3 8.1zM404.5 428.8l-2.6 22.5c-2.3 20.6-2.3 40.8 0 59.9 7.9 64.8 42.2 112.9 99.2 139 32.9 15.1 51.5 33 55.2 53.2 2.6 13.8-0.3 36.6-29.3 66.7-18.7 19.4-26.8 46.6-21.7 72.7 8.2 41.7 35.4 90 80.9 143.3 3.4 4 9.8 4.6 14.1 1 4.1-3.5 4.6-9.8 1.1-14-16.4-19.3-30.6-38.3-42.3-56.5l-9.9-15.4 18-3.2c36.8-6.4 70.6-21.1 100.3-43.6 23.6-17.8 44.3-40.2 61.7-66.5 16.4-24.8 26.4-53.9 29-84 3.9-44.8 3.2-110.4-22.2-169-14.6-33.8-35.9-61.8-63.2-83.3-31.8-25.1-72.3-41.7-120.4-49.4-47.7-7.6-90.7-7.1-127.9 1.4-31.7 7.3-59.6 20.5-82.8 39.3-42.3 34.4-59.2 79.2-65.4 102.9-3.1 11.6-10.2 21.6-20.2 28.1l-57.9 38.2c-6.2 4.1-10.5 10.5-11.8 17.6-1.3 7.2 0.3 14.8 4.6 20.8l20.9 29.4c5.1 7.4 6.2 16.6 2.8 24.9l-29.3 71.4c-6.5 15.8-5.7 33.5 2.3 48.8 8 15.1 22.1 26 38.8 29.6l39.4 8.6c29.2 6.4 55.2 23 73.2 46.9l56.8 75.5c3.2 4.2 9.5 5.2 14.1 1.8 2-1.5 3.3-3.8 3.7-6.5 0.4-2.6-0.3-5.2-1.9-7.3l-56.9-75.5c-20.9-27.7-51-47-84.8-54.4l-39.4-8.6c-10.9-2.4-20.2-9.5-25.5-19.4-5.2-10-5.8-21.6-1.5-32l29.1-71.1c6.1-14.6 4.2-31-5-44L203 632.9l64.2-42.4c14.1-9.2 24.2-23.3 28.5-39.6 5.7-21.4 20.9-61.9 58.7-92.5 9-7.3 19.1-13.8 29.9-19.3l20.2-10.3z m137 457.5l-5.1-11.7c-5.5-12.6-9.4-24.7-11.5-35.9-3.9-19.7 2.3-40.2 16.5-55 34.9-36.2 38-65.8 34.5-84.2-5.1-26.9-27.5-49.7-66.5-67.5-50.7-23.2-80.1-64.2-87.5-121.9-4.5-35.5 0.9-67 3.4-78.9l1.7-7.8 7.8-1.6c33.3-6.7 71.9-6.7 114.6 0 44.8 7.1 82.2 22.4 111.3 45.4 24.7 19.5 43.9 44.9 57.2 75.6 23.6 54.8 24.2 116.9 20.6 159.4-2.3 26.8-11.2 52.6-25.8 74.7-26.9 40.7-76 91.6-156.7 102.8-0.9 0.1-1.8 0.4-3 1l-11.5 5.6z m-93.8-442c-2.3 13.6-4.9 37-1.6 62.7 6.3 48.8 31 83.4 73.5 102.9 46.6 21.3 73.7 50 80.4 85.1 4.6 24 1.2 61.9-40.9 105.7-8.7 9.1-12.5 21.5-10.2 33.4 1.3 6.6 3.3 13.7 6.1 21.2 70.3-10.5 113.5-55.6 137.4-91.7 12.3-18.7 19.9-40.6 21.9-63.3 3.4-39.7 2.9-97.5-18.7-147.6-11.7-26.9-28.5-49.2-49.9-66.1-25.7-20.3-59.4-33.9-100-40.4-36.5-6-69.4-6.6-98-1.9z"
                    fill="#0e932e" p-id="26281"></path>
                  <path
                    d="M399.8 810.8c-15.3 0-30.2-4.5-42.9-13.1-7.6-5.1-12.8-12.9-14.6-21.9-1.8-9 0.1-18.2 5.3-25.8 5-7.6 12.8-12.8 21.9-14.6 9.1-1.7 18.2 0.1 25.8 5.3 1.9 1.3 4.1 1.7 6.4 1.3 2.3-0.5 4.3-1.8 5.5-3.7 1.3-1.9 1.7-4.2 1.3-6.5-0.5-2.3-1.8-4.3-3.7-5.5-7.6-5.1-12.8-12.9-14.6-21.9-1.8-9 0.1-18.2 5.2-25.7 5.1-7.6 12.9-12.8 21.9-14.6 9-1.7 18.2 0.1 25.8 5.2 35.4 23.7 44.9 71.9 21.1 107.2-14.4 21.5-38.5 34.3-64.4 34.3zM376 759.2c-0.6 0-1.3 0.1-1.9 0.2-2.6 0.5-4.9 2-6.3 4.2-1.5 2.3-2.1 4.9-1.5 7.5 0.5 2.6 2 4.9 4.2 6.3 8.8 5.9 18.9 8.9 29.4 8.9 17.8 0 34.3-8.7 44.1-23.4 16.2-24.2 9.7-57.1-14.5-73.4-2.2-1.5-4.8-2.1-7.4-1.5-2.6 0.5-4.8 2-6.3 4.2-1.5 2.3-2.1 4.9-1.5 7.5 0.5 2.6 2 4.9 4.2 6.3 7.3 5 12.3 12.4 14 21.1 1.7 8.7-0.1 17.5-5 24.8-10.2 15.1-30.7 19.2-45.9 9-1.8-1.1-3.7-1.7-5.6-1.7zM124.5 523.5c-57.8 0-104.8-47-104.8-104.7S66.7 314 124.5 314s104.7 47 104.7 104.8-47 104.7-104.7 104.7z m0-185.1c-44.3 0-80.4 36-80.4 80.4 0 44.3 36 80.4 80.4 80.4 44.3 0 80.4-36 80.4-80.4-0.1-44.4-36.1-80.4-80.4-80.4z"
                    fill="#0e932e" p-id="26282"></path>
                  <path
                    d="M124.5 326.2c-51.1 0-92.6 41.4-92.6 92.6 0 51.1 41.4 92.6 92.6 92.6 51.1 0 92.6-41.4 92.6-92.6-0.1-51.2-41.5-92.6-92.6-92.6z m47 100h-37.1v37.1h-18.6v-37.1H78.4v-18.7h37.3v-37.3h18.6v37.3h37.1v18.7zM502.3 346.8c-91.8 0-166.5-74.7-166.5-166.4 0-91.8 74.7-166.5 166.5-166.5s166.4 74.7 166.4 166.5c0.1 91.7-74.6 166.4-166.4 166.4z m0-308.5c-78.3 0-142.1 63.7-142.1 142.1 0 78.3 63.7 142.1 142.1 142.1 78.3 0 142.1-63.7 142.1-142.1 0-78.4-63.7-142.1-142.1-142.1z"
                    fill="#0e932e" p-id="26283"></path>
                  <path d="M502.5 126.1h-1c-0.4 4.9-1.4 9.5-2.9 14l-18.9 57.8h44.1L505 140.5c-1.2-3.6-2-8.4-2.5-14.4z"
                    fill="#0e932e" p-id="26284"></path>
                  <path
                    d="M502.3 26.1C417.1 26.1 348 95.2 348 180.4c0 85.2 69.1 154.3 154.3 154.3 85.2 0 154.3-69.1 154.3-154.3 0-85.3-69.1-154.3-154.3-154.3z m42.3 237l-12.4-37.9H472l-12.2 37.9h-38.3l60.6-165.6h41.5L583 263.1h-38.4zM888.6 525.4c-63.4 0-115-51.6-115-115s51.6-115 115-115 115 51.6 115 115-51.6 115-115 115z m0-205.7c-50 0-90.6 40.7-90.6 90.6s40.7 90.6 90.6 90.6 90.6-40.7 90.6-90.6-40.6-90.6-90.6-90.6z"
                    fill="#0e932e" p-id="26285"></path>
                  <path
                    d="M888.6 307.5c-56.8 0-102.8 46-102.8 102.8s46 102.8 102.8 102.8 102.8-46 102.8-102.8c0-56.7-46-102.8-102.8-102.8z m34.5 154.7l-35.7-35.7-35.9 35.9-18-18 35.9-35.9-35.9-35.9 17.9-17.9 35.9 35.9 35.7-35.7 18 18-35.7 35.7 35.7 35.7-17.9 17.9z"
                    fill="#0e932e" p-id="26286"></path>
                </svg>
              </div>
            </div>
            <div class="title-text">
              <div class="title-text-box">
                æ€æƒ³åŠ æ²¹ç«™
              </div>
              <div class="title-text-triangle"></div>
            </div>
            <p class="block">
              1.为什么常用“桑梓”这两种树代指家乡呢 ï¼Ÿ
            </p>
            <p class="block">
              2.我们都知道在博大精深的汉语中，人们常常喜欢选用最具代表性的事物来指称另外一个概念，如用“社稷”来指称“国家”，用“鸿雁”指代“书信”，用“折柳”指代挽留之情，还常用“桑树”“梓树”这两种树木连称来代指家乡、故乡。但是在纷繁的自然界中，有那么多种树木，为何独独选中“桑树”和“梓树”这两种树木来指代家乡呢？
            </p>
            <p class="ti-2">这主要是因为在古代桑树和梓树是与人们的生活关系极为密切的两种树。桑树的叶子可以用来养蚕，桑树结的果子叫“桑葚[sāng
              shèn]”，可以食用，也可以用来酿酒，十分甜美；树干及枝条可以用来制造器具，桑皮可以用来造纸，另外桑树还可以入药。所以古人经常用“桑麻”来指代农事，如孟浩然《过故人庄》，就有“开轩面场圃[pǔ]
              ï¼ŒæŠŠé…’话桑麻”的句子。可见桑树对于小农时代的家庭生产来说，简直浑身都是宝。梓树的功用也不例外，它的嫩叶可以作为食物，它的皮是一种中药，而且梓木重量轻、耐腐蚀，是制作家具、乐器、棺材的优质材料。此外，梓树的生长速度特别快，成材周期较短，在古代还常被作为木炭的制作材料。
            </p>
            <p class="ti-2">
              æ­£æ˜¯å› ä¸ºæ¡‘树、梓树与人们的衣、食、住、用都有着如此密切的关系，所以古代人们经常在自己家的房前屋后栽植这两种树木，久而久之桑树和梓树就成了故乡的象征，“桑梓”也就成了故乡的代名词。如毛泽东青年时候写给父亲的一首诗：“孩儿立志出乡关，学不成名誓不还。埋骨何须桑梓地，人生无处不青山。
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "pageHeader",
  props: {
    showPageList: {
      type: Array,
    },
  },
  data() {
    return {
      questionData: {
        isComplete: false,
        reading: {
          one: "",
          two: "",
          three: "",
        },
        judge: [
          {
            type: "dropdown",
            isComplete: false,
            isShowAnswer: false,
            option: ['正确', '错误'],
            value: [
              {
                stem: "七叶树为掌状复叶",
                answer: '正确',
                userAnswer: '',
                isRight: null
              },
              {
                stem: "黄栌为秋色叶树种",
                answer: '正确',
                userAnswer: '',
                isRight: null
              },
              {
                stem: "鸡爪槭秋色叶为黄色",
                answer: '正确',
                userAnswer: '',
                isRight: null
              },
              {
                stem: "金叶女贞为木犀科彩叶树种",
                answer: '错误',
                userAnswer: '',
                isRight: null
              },
              {
                stem: "紫叶李春天花叶同放",
                answer: '错误',
                userAnswer: '',
                isRight: null
              },
            ]
          },
          {

          }
        ],
        cm: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
        },
        am: {
          one: "",
          two: "",
          three: "",
          four: "",
          five: "",
          six:"",
          seven:"",
        },
      }
    }
  },
  mounted() {
    const bookQuestion = localStorage.getItem("botany-book-chapter01-question-one");
    if (bookQuestion) {
      this.questionData = JSON.parse(bookQuestion);
    }
  },
  methods: {
    setBookQuestion() {
      localStorage.setItem(
        "botany-book-chapter01-question-one",
        JSON.stringify(this.questionData)
      );
    },
    saveListenTwo() {
      localStorage.setItem('botany-book-chapter01-question-one', JSON.stringify(this.questionData))
    },
    setTestData() {
      localStorage.setItem("botany-book-chapter01-question-one", JSON.stringify(this.questionData));
    },
  }
};
</script>

<style scoped>
.ti-2 {
  text-indent: 2em
}

p {
  margin: 18px 0;
}

.ff-s {
  font-family: '宋体';
}

.f-16 {
  font-size: 16px;
}

.f-18 {
  font-size: 18px;
}

.fw-800 {
  font-weight: 800;
}


.f-20 {
  font-size: 20px;
}

.span-c {
  color: #0e932e;
  font-weight: 800;
}

div.bk-ztgs {
  border: 0.15em dotted #0e932e;
  padding: 0.5em;
  margin-bottom: 2em;
  margin-top: 2em;
  border-radius: 1em;
  position: relative;
}

p.bj1-ztgs {
  background-color: #0e932e;
  color: #ffffff;
  display: inline-block;
  font-size: 1em;
  padding: 0.1em 0.7em 0.12em 0.7em;
  font-weight: bold;
  border-radius: 0.5em;
  margin-left: 0em;
  text-align: center;
  text-indent: 0em;
  position: absolute;
  top: -2em;
}


/* è½®æ’­å›¾ */
.banshi {
  position: relative;
  margin-top: 40px;
  width: 100%;
  height: 220px;
  margin: 0 auto;
}


.pageBox {
  z-index: 9999999999;
  color: #999;
  font-weight: 800;
  position: absolute;
  left: 48%;
  bottom: 0px;
}

.cover {
  max-width: 816px;
}

.header-img {
  position: relative;
}


.header-box {
  position: absolute;
  top: 0;
  right: 12%;
  max-width: 229px;
  max-height: 209px;
  border-radius: 0px 0px 18px 18px;
  background-color: #0E932E;
  border: 1px solid rgba(255, 255, 255, 0.27);
  padding: 0 7px 6px 7px;
}

.header-inner-box {
  /* width: 100%; */
  height: 91%;
  padding: 0 27px 17px 22px;
  border-radius: 0px 0px 18px 18px;
  border: 1px dashed #ffffff;
  border-top: none;

}

.inner-top {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 400;
  font-size: 20px;
  color: #FFFFFF;
  line-height: 24px;
  padding: 66px 27px 9px 0px;
  border-bottom: 1px solid #FFF;
}

.inner-bottom {
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 500;
  font-size: 23px;
  color: #FFFFFF;
  line-height: 35px;
  padding-top: 12px
}

.main-box {
  position: absolute;
  top: 250px;
  right: 98px;
}

.main-text {
  text-align: right;
  font-family: Source Han Sans CN, Source Han Sans CN;
  font-weight: 550;
  font-size: 29px;
  color: #000000;
  line-height: 34px;
  margin-bottom: 14px;
}

.text-box {
  position: absolute;
  top: 500px;
  right: 98px;
}

.text-box-bottom {
  position: absolute;
  top: 820px;
  right: 12%;
}

.text-top {
  /* width: 611px; */
  padding: 37px 36px 25px 33px;
  background: rgba(55, 201, 111, 0.06);
  border-radius: 0px 29px 0px 29px;
  border: 1px dashed #0E932E;
  /* padding: 37px 36px 25px 33px; */
  position: relative;
}


.text-title {
  width: 48px;
  height: 48px;
  position: absolute;
  top: -25px;
  left: -24px;
  z-index: 99;
}

.titleImg-box {
  width: 100%;
  height: 100%;
  border: 1.5px solid #0E932E;
  border-radius: 50px;
  background-color: #FFF;
  display: flex;
  align-items: center;
  justify-content: center;
}

.titleImg-box-img {
  width: 80%;
  height: 80%;
}

.title-text {
  display: flex;
  position: absolute;
  top: -18px;
  left: 10px;
  z-index: 1;
}


.title-text-box {
  padding: 3px 0 3px 0;
  min-width: 100px;
  font-weight: 400;
  font-size: 23px;
  color: #FFFFFF;
  line-height: 27px;
  background-color: #0E932E;
  padding-left: 20px;
}

.title-text-triangle {
  width: 0;
  height: 0;
  border-right: 12px solid transparent;
  border-top: 33px solid #0E932E;
  border-bottom: 0px solid transparent;
}

.block {
  max-width: 542px;
  min-width: 542px;
  text-indent: 0em;
  font-family: KaiTi, KaiTi;
  font-weight: 400;
  font-size: 20px;
  color: #000000;
  line-height: 35px;
  margin: 0;
}

.swiper-button-prev:after,
.swiper-button-next:after {
  color: #0E932E;
  font-family: swiper-icons;
  font-size: var(--swiper-navigation-size);
  text-transform: none !important;
  letter-spacing: 0;
  text-transform: none;
  font-variant: initial;
  line-height: 1;
}


.select-border {
  border: 0;
  border-bottom: 1px solid #767676;

  &:focus {
    outline: none;
  }
}

.input-bottom-border {
  border: 0;
  border-bottom: 1px solid #000000;

  &:focus {
    outline: none;
  }
}
</style>

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

New file
@@ -0,0 +1,954 @@
<template>
    <div class="page-main" @scroll="throttledScrollHandler">
      <div class="page-content" :style="{
        fontSize: fontSize ? fontSize + 'px' : '16px',
        transform: `scale(${pageZoom ? pageZoom : 1})`,
        transformOrigin: 'center top',
      }">
        <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
        <!-- <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>
      <!-- <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
      </miniAudio> -->
    </div>
  </template>
  
  <script>
  import pageHeader from "./header.vue";
  // import chapterOne from "./chapterr001.vue";
//   import chapterTwo from "./chapter002.vue";
//   import chapterThree from "./chapter003.vue";
//   import chapterFour from "./chapter004.vue";
//   import chapterFive from "./chapter005.vue";
//   import chapterSix from "./chapter006.vue";
  import NoteIcon from "@/assets/images/biji.png";
//   import miniAudio from "@/components/miniAudio/index.vue";
  import _ from "lodash";
  import Swiper from "swiper/bundle";
  import "swiper/swiper-bundle.css";
  import Viewer from "viewerjs";
  import "viewerjs/dist/viewer.css";
  export default {
    name: "pageContent",
    data() {
      return {
        catalogLength: 1, // æ€»ç« èŠ‚æ•°
        showCatalogList: [], // æ˜¾ç¤ºçš„章节
        loadThreshold: 300, // è§¦å‘加载阈值
        throttleThreshold: 100, // èŠ‚流阈值
        previousScrollTop: 0,
        throttledScrollHandler: null,
        observer: null,
        loadPageObserver: null,
        loadPageList: [],
        questionDataMap: {},
        renderSignMap: {},
        highlightData: null,
        audioPath: "",
        currentTime: null,
        videoList: [],
      };
    },
    computed: {
      fontSize() {
        return this.$store.state.qiankun.fontSize;
      },
      pageZoom() {
        return this.$store.state.qiankun.scale / 100;
      },
    },
    watch: {
      showCatalogList: {
        handler(newVal, oldVal) {
          if (
            this.$store.state.qiankun &&
            this.$store.state.qiankun.catalogChange
          ) {
            // è°ƒç”¨çˆ¶å±‚方法
            this.$store.state.qiankun.catalogChange({
              showCatalogList: newVal,
            });
          }
          // å¯åŠ¨é¡µç è§‚察
          setTimeout(() => {
            this.initObservation();
            this.initThemeColor();
          }, 500);
        },
      },
      loadPageList: {
        handler(newVal, oldVal) {
          setTimeout(() => {
            this.initSwiper();
            this.initViewer();
            this.closeAudio();
            this.closeVideo();
          }, 200);
        },
      },
      pageZoom: {
        handler(newVal, oldVal) {
          const scrollBox = (
            this.container ? this.container : document
          ).querySelector(".page-main");
          scrollBox.scrollTop = (scrollBox.scrollTop / oldVal) * newVal;
        },
      },
    },
    mounted() {
      // é»˜è®¤åŠ è½½ç« èŠ‚
      this.showCatalogList = [1];
      // æ»šåŠ¨ç›‘听节流
      this.throttledScrollHandler = _.throttle(
        this.scrollFun,
        this.throttleThreshold,
        { leading: true, trailing: false }
      );
      // å®šä¹‰å­å±‚方法
      if (this.setGlobalState) {
        // æä¾›é¡µé¢è·³è½¬åŠŸèƒ½
        this.setGlobalState({
          gotoPage: (catalog, page) => {
            this.gotoPage(catalog, page);
          },
          // æ¸²æŸ“笔记、高亮、划线
          renderSign: (type, data) => {
            // å› ä¸ºè°ƒæ•´ä¸ºé¡µé¢æ‡’加载，所以渲染标记也需要按照页面进行处理，先储存数据，页面加载完成再渲染对应的标记；
            this.handelSignData(type, data);
            // this.renderSign(type, data);
          },
          // åˆ é™¤ç¬”记、高亮、划线
          delSign: (data) => {
            this.delSign(data);
          },
          // å…¨æ–‡æ£€ç´¢
          searchBookByKeyword: (keyword) => {
            return this.searchTextByPage(keyword);
          },
          // è·³è½¬æ£€ç´¢ç»“果位置
          jumpSearchItem: (data) => {
            this.searchItemLocation(data);
          },
        });
      }
  
      // åˆ›å»ºä¸€ä¸ªæ–°çš„ Intersection Observer å®žä¾‹ï¼Œç”¨äºŽè§‚察目标元素和执行相应的回调函数。
      // new IntersectionObserver(callback, options)：使用之前定义的 callback å›žè°ƒå‡½æ•°å’Œ options é…ç½®é€‰é¡¹æ¥åˆå§‹åŒ– Intersection Observer å®žä¾‹ã€‚
      this.observer = new IntersectionObserver(this.pageChangeCallback, {
        root: null, // æŒ‡å®šæ ¹å…ƒç´ ï¼Œè¿™é‡Œè®¾ä¸º null，表示选取整个视窗作为根元素。
        rootMargin: "0px", // æŒ‡å®šæ ¹å…ƒç´ çš„边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
        threshold: 0.5, // æŒ‡å®šäº¤å‰æ¯”例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
      });
  
      this.loadPageObserver = new IntersectionObserver(this.loadPageCallback, {
        root: null, // æŒ‡å®šæ ¹å…ƒç´ ï¼Œè¿™é‡Œè®¾ä¸º null，表示选取整个视窗作为根元素。
        rootMargin: "0px", // æŒ‡å®šæ ¹å…ƒç´ çš„边界，这里设为 "0px"，表示根元素的边界和视窗的边界重合
        threshold: 0, // æŒ‡å®šäº¤å‰æ¯”例，这里设为 0.5，表示当目标元素一半或更多显示在视窗中时触发回调函数。
      });
  
      // å¯åŠ¨é¡µç è§‚察
      setTimeout(() => {
        this.initObservation();
        this.initThemeColor();
      }, 500);
  
      // æµ‹è¯•é¡µé¢è·³è½¬
      // setTimeout(() => {
      //   this.gotoPage(1, 14);
      //   setTimeout(() => {
      //     this.renderSign("Highlight", {
      //       id: "2ACA9359",
      //       txt: "题一学习主题一 è¿åŠ¨",
      //       page: "10",
      //       type: "Highlight",
      //       color: "#F5E12A"
      //     });
      // setTimeout(() => {
      //   this.delSign({
      //     ids: ["2ACA9359"]
      //   });
      // }, 2000);
      // }, 500);
  
      // const pageDom = (this.container ? this.container : document)
      //   .querySelector("#app")
      //   .querySelectorAll(".page-box");
      // æ£€ç´¢
      // console.log(this.searchTextByPage("保护内脏器官"), "searchTextByPage");
      // æ£€ç´¢è·³è½¬
      // this.searchItemLocation({
      //   catalog: 2,
      //   page: 10,
      //   txt: " è¿åŠ¨ç³»ç»Ÿæ˜¯ç”±éª¨ã€éª¨è¿žç»“和骨骼肌三部分组成的。全身的骨通过骨连结组成人体骨骼（见图1-1）。骨骼是人体的支架，具有保护内脏器官、供肌肉附着和作为肌肉运动的杠杆等作用。在神经系统的支配下，肌肉收缩牵动所附着的骨绕着关节转动，使身体产生各种动作。所以，运动系统具有运动、支持和保护等功能，幼年时期的骨骼还具有造血功能。 ",
      //   txtIndex: 57
      // });
      // }, 500);
    },
    methods: {
      // setZoom1() {
      //   let scale = this.$store.state.qiankun.scale + 10;
      //   const scrollBox = (
      //     this.container ? this.container : document
      //   ).querySelector(".page-main");
      //   this.$store.commit("setZoom", scale);
      // },
      // setZoom2() {
      //   let scale = this.$store.state.qiankun.scale - 10;
      //   const scrollBox = (
      //     this.container ? this.container : document
      //   ).querySelector(".page-main");
      //   this.$store.commit("setZoom", scale);
      // },
      // æ»šåŠ¨ç›‘听
      scrollFun(event) {
        this.handleVideoPicture()
        // åˆ¤æ–­å‘上滚动还是向下滚动
        if (event.target.scrollTop > this.previousScrollTop) {
          this.getAduio();
          // å‘下
          const currentScrollTop =
            event.target.scrollTop + event.target.offsetHeight;
          if (
            currentScrollTop >=
            event.target.scrollHeight - this.loadThreshold
          ) {
            // åˆ°è¾¾é˜ˆå€¼
            if (
              this.showCatalogList[this.showCatalogList.length - 1] <
              this.catalogLength
            ) {
              // åŠ è½½ä¸‹ä¸€ç« 
              this.showCatalogList.push(
                this.showCatalogList[this.showCatalogList.length - 1] + 1
              );
              if (this.showCatalogList.length > 3) {
                // è¶…过三章隐藏顶部一章
                this.showCatalogList.shift();
              }
            }
          }
        } else if (event.target.scrollTop < this.previousScrollTop) {
          this.handleAudio();
          // å‘上
          const currentScrollTop = event.target.scrollTop;
          if (currentScrollTop <= this.loadThreshold) {
            // åˆ°è¾¾é˜ˆå€¼
            if (this.showCatalogList[0] > 0) {
              // åŠ è½½ä¸Šä¸€ç« 
              this.showCatalogList.unshift(this.showCatalogList[0] - 1);
              if (this.showCatalogList.length > 3) {
                // è¶…过三章隐藏底部一章
                this.showCatalogList.pop();
              }
            }
          }
        }
        // showCatalogList å½“前显示的三个章节，watch监听传递给主应用
        // æ›´æ–°ä¸Šä¸€æ¬¡æ»šåŠ¨çš„位置
        this.previousScrollTop = event.target.scrollTop;
      },
      // ç« èŠ‚、页面跳转
      gotoPage(catalog, page) {
        if (catalog >= 0 && catalog <= this.catalogLength) {
          // å¤„理渲染章节
          if (catalog == 0) {
            this.showCatalogList = [0, 1];
          } else if (catalog == this.catalogLength) {
            this.showCatalogList = [
              this.catalogLength - 2,
              this.catalogLength - 1,
              this.catalogLength,
            ];
          } else {
            this.showCatalogList = [catalog - 1, catalog, catalog + 1];
          }
          setTimeout(() => {
            // è·³è½¬é¡µç 
            const pageDom = (
              this.container ? this.container : document
            ).querySelector(`[page="${page}"]`);
            if (pageDom) {
              pageDom.scrollIntoView();
            } else {
              console.log("页码错误！");
            }
          }, 500);
        } else {
          console.log("章节错误！");
        }
      },
  
      // å¤„理标记数据
      handelSignData(type, data) {
        if (this.loadPageList.indexOf(Number(data.page)) > -1) {
          // ç«‹å³æ¸²æŸ“
          this.renderSign(type, data);
        }
  
        // å‚¨å­˜æ•°æ®
        if (!this.renderSignMap[type]) this.renderSignMap[type] = {};
        if (!this.renderSignMap[type][data.page])
          this.renderSignMap[type][data.page] = [];
        this.renderSignMap[type][data.page].push(data);
      },
  
      // æ¸²æŸ“标记
      renderSign(type, data) {
        // çˆ¶å±‚设置禁止渲染标记时不再进行渲染
        if (this.$store.state.qiankun.disableSign) {
          return false;
        }
        const existence = (
          this.container ? this.container : document
        ).querySelector(`[dataid="${data.id}"]`);
        // åŽ»é‡
        if (!existence) {
          const pageDom = (
            this.container ? this.container : document
          ).querySelector(`[page="${data.page}"]`);
          // åˆ›å»º createTreeWalker è¿­ä»£å™¨ï¼Œç”¨äºŽéåŽ†æ–‡æœ¬èŠ‚点，保存到一个数组
          const treeWalker = document.createTreeWalker(
            pageDom,
            NodeFilter.SHOW_TEXT
          );
          const allTextNodes = [];
          let currentNode = treeWalker.nextNode();
          while (currentNode) {
            allTextNodes.push(currentNode);
            currentNode = treeWalker.nextNode();
          }
          for (let i = 0; i < allTextNodes.length; i++) {
            const textDom = allTextNodes[i];
            if (textDom.textContent.indexOf(data.txt) > -1) {
              let reg = new RegExp(`${data.txt}`, "ig");
              switch (type) {
                case "Highlight":
                  // é«˜äº®
                  textDom.parentNode.innerHTML =
                    textDom.parentNode.innerHTML.replace(
                      reg,
                      `<span datatype="Highlight" dataid="${data.id}" style="background: ${data.color};" class="highLight" onclick="signClick('Highlight','${data.id}','${data.chapterNum}')">${data.txt}</span>`
                    );
                  break;
                case "Dashing":
                  // åˆ’线
                  textDom.parentNode.innerHTML =
                    textDom.parentNode.innerHTML.replace(
                      reg,
                      `<span datatype="Dashing" dataid="${data.id}" style="text-decoration-color:${data.color};" class="underline" onclick="signClick('Dashing','${data.id}','${data.chapterNum}')">${data.txt}</span>`
                    );
                  break;
                case "Note":
                  // ç¬”è®°
                  textDom.parentNode.innerHTML =
                    textDom.parentNode.innerHTML.replace(
                      reg,
                      `<span datatype="Note" dataid="${data.id}" style="border-bottom-color:${data.color}" class="notesline" onclick="signClick('Note','${data.id}','${data.chapterNum}')" onmouseover="noteHover('Note','${data.id}','${data.chapterNum}')" onmouseout="noteOut('Note')">${data.txt}<img src="${NoteIcon}"/></span>`
                    );
                  break;
              }
            }
          }
        }
      },
      // åˆ é™¤æ ‡è®°æ¸²æŸ“
      delSign({ ids, type }) {
        if (ids && ids.length) {
          for (let i = 0; i < ids.length; i++) {
            const id = ids[i];
            const dom = (
              this.container ? this.container : document
            ).querySelector(`[dataid="${id}"]`);
            dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
              dom.outerHTML,
              dom.outerText
            );
          }
        }
        if (type) {
          const doms = (
            this.container ? this.container : document
          ).querySelectorAll(`[datatype="${type}"]`);
          for (let i = 0; i < doms.length; i++) {
            const dom = doms[i];
            dom.parentNode.innerHTML = dom.parentNode.innerHTML.replace(
              dom.outerHTML,
              dom.outerText
            );
          }
        }
      },
      initObservation() {
        const sections = (
          this.container ? this.container : document
        ).querySelectorAll(".page-box");
        sections.forEach((section) => {
          if (this.config.activeBook && this.config.activeBook.tryPageCount) {
            const page = section.getAttribute("page");
            if (Number(page) > this.config.activeBook.tryPageCount) {
              let chapterDom = this.getParentWithClass(section, "chapter");
              const chapterNum = chapterDom.getAttribute("num");
              this.catalogLength = Number(chapterNum) - 1;
              section.remove();
              return false;
            }
          }
          // observer è§‚察每个元素，以便在它们进入或离开视窗时触发回调函数。
          const isObserver = section.getAttribute("observer");
          const isLoadObserver = section.getAttribute("loadObserver");
          if (!isObserver) {
            this.observer.observe(section);
            section.setAttribute("observer", "1");
          }
          if (!isLoadObserver) {
            this.loadPageObserver.observe(section);
            section.setAttribute("loadObserver", "1");
          }
        });
      },
      initThemeColor() {
        // èŽ·å–各种需要主题色的节点
        const colorDom = (
          this.container ? this.container : document
        ).querySelectorAll(".theme-color");
        const backgroundColorDom = (
          this.container ? this.container : document
        ).querySelectorAll(".theme-back");
        const borderColorDom = (
          this.container ? this.container : document
        ).querySelectorAll(".theme-border");
        // èŽ·å–配置的主题色
        const bookThemeColor =
          this.config.activeBook && this.config.activeBook.bookThemeColor
            ? this.config.activeBook.bookThemeColor
            : null;
        const chapterThemeColor =
          this.config.activeBook && this.config.activeBook.chapterThemeColor
            ? this.config.activeBook.chapterThemeColor
            : null;
        const pageThemeColor =
          this.config.activeBook && this.config.activeBook.pageThemeColor
            ? this.config.activeBook.pageThemeColor
            : null;
        colorDom.forEach((domItem) => {
          // èŽ·å–章节、页码
          let pageDom = this.getParentWithClass(domItem, "page-box");
          let chapterDom = this.getParentWithClass(domItem, "chapter");
          let page, chapterNum;
          if (pageDom) page = pageDom.getAttribute("page");
          if (chapterDom) chapterNum = chapterDom.getAttribute("num");
          // å‘上匹配主题色
          const themeColor =
            page && pageThemeColor && pageThemeColor[page]
              ? pageThemeColor[page]
              : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
                ? chapterThemeColor[chapterNum]
                : bookThemeColor;
          if (themeColor) {
            domItem.style.color = themeColor;
          }
        });
        backgroundColorDom.forEach((domItem) => {
          // èŽ·å–章节、页码
          let pageDom = this.getParentWithClass(domItem, "page-box");
          let chapterDom = this.getParentWithClass(domItem, "chapter");
          let page, chapterNum;
          if (pageDom) page = pageDom.getAttribute("page");
          if (chapterDom) chapterNum = chapterDom.getAttribute("num");
          // å‘上匹配主题色
          const themeColor =
            page && pageThemeColor && pageThemeColor[page]
              ? pageThemeColor[page]
              : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
                ? chapterThemeColor[chapterNum]
                : bookThemeColor;
          if (themeColor) {
            domItem.style.backgroundColor = themeColor;
          }
        });
        borderColorDom.forEach((domItem) => {
          // èŽ·å–章节、页码
          let pageDom = this.getParentWithClass(domItem, "page-box");
          let chapterDom = this.getParentWithClass(domItem, "chapter");
          let page, chapterNum;
          if (pageDom) page = pageDom.getAttribute("page");
          if (chapterDom) chapterNum = chapterDom.getAttribute("num");
          // å‘上匹配主题色
          const themeColor =
            page && pageThemeColor && pageThemeColor[page]
              ? pageThemeColor[page]
              : chapterNum && chapterThemeColor && chapterThemeColor[chapterNum]
                ? chapterThemeColor[chapterNum]
                : bookThemeColor;
          if (themeColor) {
            domItem.style.borderColor = themeColor;
          }
        });
      },
      getParentWithClass(element, className) {
        console.log(element, className, "element, className");
        while (element.parentElement) {
          element = element.parentElement;
          if (element.classList.contains(className)) {
            return element;
          }
        }
      },
      pageChangeCallback(entries, observer) {
        //entries：代表观察到的目标元素的集合。 observer：代表观察者对象。
        entries.forEach((entry) => {
          //entry.isIntersecting：检查当前目标元素是否与根元素相交。
          if (entry.isIntersecting) {
            const target = entry.target;
            //entry.target：获取当前目标元素
            const page = target.getAttribute("page");
            const catalogDom = this.tool.getParentNodeByClassName(
              target,
              "chapter"
            );
            const catalog = catalogDom.getAttribute("num");
            let text = null;
            if (target.querySelector("p")) {
              text = target.querySelector("p").textContent.substring(0, 50);
            }
            // è¿”回页码和章节信息
            if (this.$store.state.qiankun && this.$store.state.qiankun.pageChange)
              this.$store.state.qiankun.pageChange({
                page: page,
                catalog: catalog,
                text,
              });
            // const sections = Array.from(document.querySelectorAll(".section"));
            //sections：获取所有具有 .section ç±»åçš„元素，并转换为数组。
            // let index = sections.findIndex((section) => section === target) + 1;
            //index：查找当前目标元素在 sections æ•°ç»„中的索引，并加 1，用于确定当前页码。
          }
        });
      },
      loadPageCallback(entries, observer) {
        entries.forEach(async (entry) => {
          if (entry.isIntersecting) {
            const target = entry.target;
            const page = target.getAttribute("page");
            if (this.loadPageList.indexOf(Number(page)) == -1) {
              const catalogDom = this.tool.getParentNodeByClassName(
                target,
                "chapter"
              );
              // æ·»åŠ é¡µç 
              this.loadPageList.push(Number(page));
              const catalog = catalogDom.getAttribute("num");
              // if (!this.questionDataMap[page]) {
              //   if (testData && testData[catalog]) {
              //     if (testData[catalog][page]) {
              //       if (Array.isArray(testData[catalog][page])) {
              //         this.questionDataMap[page] = await getQuestionList(
              //           page,
              //           testData[catalog][page],
              //           this.config.activeBook
              //         );
              //       } else {
              //         const obj = {};
              //         for (let key in testData[catalog][page]) {
              //           obj[key] = await getQuestionList(
              //             [],
              //             testData[catalog][page][key],
              //             this.config.activeBook
              //           );
              //         }
              //         this.questionDataMap[page] = obj;
              //       }
              //       console.log("题目", this.questionDataMap);
              //     }
              //   }
              // }
              // æ¸²æŸ“这一页的标记
              for (const key in this.renderSignMap) {
                if (this.renderSignMap[key][page]) {
                  this.renderSignMap[key][page].forEach((item) => {
                    this.renderSign(key, item);
                  });
                }
              }
              // å¤„理高亮
              if (this.highlightData) {
                // é«˜äº®è¡Œ
                setTimeout(() => {
                  // èŽ·å–页面所有text节点
                  const pageTextList = document.createTreeWalker(
                    target,
                    NodeFilter.SHOW_TEXT
                  );
                  // åŒ¹é…å…³é”®å­—
                  const allPageTextNodes = [];
                  let currentNode = pageTextList.nextNode();
                  while (currentNode) {
                    allPageTextNodes.push(currentNode);
                    currentNode = pageTextList.nextNode();
                  }
                  for (let i = 0; i < allPageTextNodes.length; i++) {
                    const textDom = allPageTextNodes[i];
                    let txtIndex = textDom.textContent.indexOf(
                      this.highlightData.txt
                    );
                    if (txtIndex > -1) {
                      textDom.parentNode.style.transition =
                        "background-color 0.8s";
                      textDom.parentNode.scrollIntoView();
                      textDom.parentNode.style.backgroundColor = "#79bbf0";
                      setTimeout(() => {
                        textDom.parentNode.style.backgroundColor = "";
                      }, 1000);
                    }
                  }
                }, 100);
              }
              if (this.loadPageList.length > 5) {
                // è¶…过5页
                this.loadPageList.shift();
              }
            }
          }
        });
      },
      initSwiper() {
        const doms = (
          this.container ? this.container : document
        ).querySelectorAll(".swiper-img");
        for (let i = 0; i < doms.length; i++) {
          const dom = doms[i];
          new Swiper(dom, {
            loop: false, // æ— ç¼
            autoplay: {
              //自动开始
              delay: 3000, //时间间隔
              disableOnInteraction: false, //*手动操作轮播图后不会暂停*
            },
            paginationClickable: true,
            slidesPerView: 1, // ä¸€ç»„三个
            spaceBetween: 30, // é—´éš”
            // å¦‚果需要前进后退按钮
            navigation: {
              nextEl: dom.querySelector(".swiper-button-next"),
              prevEl: dom.querySelector(".swiper-button-prev"),
            },
            // çª—口变化,重新init,针对F11全屏和放大缩小,必须加
            // observer: true,
            // observeParents: true
            // // å¦‚果需要分页器
            // pagination: {
            //   el: (this.container ? this.container : document).querySelector(
            //     ".swiper-pagination"
            //   ),
            //   clickable: true // åˆ†é¡µå™¨å¯ä»¥ç‚¹å‡»
            // }
          });
        }
        const pptDoms = (
          this.container ? this.container : document
        ).querySelectorAll(".swiper_ppt");
        for (let i = 0; i < pptDoms.length; i++) {
          const dom = pptDoms[i];
          new Swiper(dom, {
            loop: false, // æ— ç¼
            autoplay: false,
            paginationClickable: true,
            slidesPerView: 1, // ä¸€ç»„三个
            spaceBetween: 30, // é—´éš”
            // å¦‚果需要前进后退按钮
            navigation: {
              nextEl: dom.querySelector(".swiper-button-next"),
              prevEl: dom.querySelector(".swiper-button-prev"),
            },
            // çª—口变化,重新init,针对F11全屏和放大缩小,必须加
            observer: true,
            observeParents: true,
            on: {
              init: (value) => {
                let currentPage = value.activeIndex + 1; // èŽ·å–当前页（从1开始计数）
                let totalPages = value.slides.length; // èŽ·å–总页数
                var paginationInfoEl = dom.querySelector(".pageBox");
                if (paginationInfoEl)
                  paginationInfoEl.textContent = currentPage + "/" + totalPages;
              },
              slideChange: (value) => {
                let currentPage = value.activeIndex + 1; // èŽ·å–当前页（从1开始计数）
                let totalPages = value.slides.length; // èŽ·å–总页数
                var paginationInfoEl = dom.querySelector(".pageBox");
                if (paginationInfoEl)
                  paginationInfoEl.textContent = currentPage + "/" + totalPages;
              },
            },
          });
        }
      },
      initViewer() {
        const doms = (
          this.container ? this.container : document
        ).querySelectorAll(".openImgBox");
        for (let i = 0; i < doms.length; i++) {
          const dom = doms[i];
          new Viewer(dom, {
            container: this.container
              ? this.container.querySelector("#app")
              : "body",
            navbar: true, // æ˜¾ç¤ºå¯¼èˆªæ 
            toolbar: true, // æ˜¾ç¤ºå·¥å…·æ 
            title: true, // æ˜¾ç¤ºæ ‡é¢˜
          });
        }
      },
      // æ ¹æ®å…³é”®å­—全文检索
      searchTextByPage(keyword) {
        const searchResult = [];
        let catalogIndex = 0;
        // æ‰€æœ‰ç« èŠ‚组件（每本书制作时单独配置）
        const pageData = {
          pageHeader,
          chapterOne,
        //   chapterTwo,
        //   chapterThree,
        //   chapterFour,
        //   chapterFive,
        //   chapterSix,
        };
        // éåŽ†æ‰€æœ‰ç« èŠ‚文件
        for (const key in pageData) {
          catalogIndex++;
          let pageComponent, pageExample;
          // å…ˆæ¸²æŸ“一次当前章节文件（这时页面的内容为空），获取页码信息
          pageComponent = Vue.extend(pageData[key]);
          pageExample = new pageComponent({
            propsData: {
              showPageList: [],
              questionData: {},
              isSearch: true,
            },
          });
          pageExample.$mount(
            (this.container ? this.container : document).querySelector(
              "#searchContent"
            )
          );
          // èŽ·å–页码
          const pageDom = (this.container ? this.container : document)
            .querySelector("#searchDomBox")
            .querySelectorAll(".page-box");
          const pages = [];
          for (let i = 0; i < pageDom.length; i++) {
            const pageDomItem = pageDom[i];
            pages.push(Number(pageDomItem.getAttribute("page")));
          }
          // èŽ·å–页面结束，卸载销毁
          pageExample.$destroy();
          (this.container ? this.container : document).querySelector(
            "#searchDomBox"
          ).innerHTML = '<div id="searchContent"></div>';
          // éåŽ†é¡µç 
          if (pages.length) {
            for (let i = 0; i < pages.length; i++) {
              const pageNum = pages[i];
              // åŠ¨æ€æ¸²æŸ“对应章节的页码
              pageComponent = Vue.extend(pageData[key]);
              pageExample = new pageComponent({
                propsData: {
                  showPageList: [pageNum],
                  questionData: {},
                  isSearch: true,
                },
              });
              pageExample.$mount(
                (this.container ? this.container : document).querySelector(
                  "#searchContent"
                )
              );
              // èŽ·å–对应页面dom
              const thisPageDom = (this.container ? this.container : document)
                .querySelector("#searchDomBox")
                .querySelector(`[page="${pageNum}"]`);
              if (thisPageDom) {
                // èŽ·å–页面所有text节点
                const pageTextList = document.createTreeWalker(
                  thisPageDom,
                  NodeFilter.SHOW_TEXT
                );
                // åŒ¹é…å…³é”®å­—
                const allPageTextNodes = [];
                let currentNode = pageTextList.nextNode();
                while (currentNode) {
                  allPageTextNodes.push(currentNode);
                  currentNode = pageTextList.nextNode();
                }
                for (let i = 0; i < allPageTextNodes.length; i++) {
                  const textDom = allPageTextNodes[i];
                  let txtIndex = textDom.textContent.indexOf(keyword);
                  if (txtIndex > -1) {
                    // è®°å½•å…³é”®å­—所在页码、章节以及匹配到的段落
                    searchResult.push({
                      page: pageNum,
                      catalog: catalogIndex,
                      txt: textDom.textContent,
                      txtIndex: txtIndex,
                    });
                  }
                }
                // ç»“束，卸载销毁
                pageExample.$destroy();
                (this.container ? this.container : document).querySelector(
                  "#searchDomBox"
                ).innerHTML = '<div id="searchContent"></div>';
              }
            }
          }
        }
        // è¾“出搜索结果
        console.log(searchResult);
        return searchResult;
      },
      // æ ¹æ®æ£€ç´¢ç»“果跳转对应位置并高亮
      searchItemLocation(data) {
        // è®°å½•é«˜äº®ä¿¡æ¯
        this.highlightData = data;
        // è·³è½¬
        this.gotoPage(data.catalog, data.page, () => { });
      },
      // é¡µé¢å‘下滚动，音频小窗播放功能
      getAduio() {
        let allVideo = (
          this.container ? this.container : document
        ).querySelectorAll(".audio");
        allVideo = Array.from(allVideo);
        this.videoList = allVideo;
        if (allVideo.length) {
          // æŸ¥æ‰¾æ’­æ”¾çŠ¶æ€çš„最后一条音频
          const playAudio = allVideo
            .reverse()
            .find((item) => item.paused == false);
          if (playAudio) {
            const bottomGap = playAudio.getBoundingClientRect().bottom;
            if (bottomGap < 0) {
              playAudio.pause();
              this.audioPath = playAudio.src;
              this.currentTime = playAudio.currentTime;
            }
          }
        }
      },
      // é¡µé¢å‘上滚动，音频小窗回收
      handleAudio() {
        if (!this.audioPath) return false;
        let allVideo = (
          this.container ? this.container : document
        ).querySelectorAll(".audio");
        allVideo = Array.from(allVideo);
        if (allVideo.length) {
          //查找与小窗播放音频同源的页面audio DOM
          const playAudio = allVideo.find((item) => item.src == this.audioPath);
          if (playAudio) {
            const bottomGap = playAudio.getBoundingClientRect().bottom;
            if (bottomGap >= 0) {
              if (this.$refs.audioPlayer) {
                const playerState = this.$refs.audioPlayer.getVideoPlayer();
                this.audioPath = "";
                playAudio.currentTime = playerState.currentTime;
                if (!playerState.paused) playAudio.play();
              }
            }
          }
        }
      },
      // å…³é—­mini video
      closeMiniAudio() {
        this.audioPath = "";
      },
      // ç‚¹å‡»éŸ³é¢‘播放，关闭其他音频
      closeAudio() {
        let allAudio = (
          this.container ? this.container : document
        ).querySelectorAll(".audio");
        for (let index = 0; index < allAudio.length; index++) {
          const item = allAudio[index];
          item.addEventListener("play", () => {
            const audioList = Array.from(allAudio);
            for (let cindex = 0; cindex < audioList.length; cindex++) {
              const citem = audioList[cindex];
              if (citem.currentSrc != item.src) {
                citem.pause();
              }
            }
            this.closeMiniAudio();
          });
        }
      },
      // ç‚¹å‡»è§†é¢‘关闭其他
      closeVideo() {
        let allVideo = (
          this.container ? this.container : document
        ).querySelectorAll(".video");
        for (let index = 0; index < allVideo.length; index++) {
          const item = allVideo[index];
          item.addEventListener("playing", (item) => {
            const path = item.srcElement.src;
            const videoList = Array.from(allVideo);
            for (let cindex = 0; cindex < videoList.length; cindex++) {
              const citem = videoList[cindex];
              if (citem.currentSrc != path && path) {
                citem.pause();
              }
            }
          });
        }
      },
      // è§†é¢‘小窗
      handleVideoPicture() {
        let doms = (
          this.container ? this.container : document
        ).querySelectorAll(".video");
        doms = Array.from(doms)
        if (!doms.length) return false
        const playVudio = doms
          .reverse()
          .find((item) => item.paused == false);
        if (playVudio) {
          const bottomGap = playVudio.getBoundingClientRect().bottom;
          const topGap = playVudio.getBoundingClientRect().top;
          if (bottomGap < 0 || topGap > window.innerHeight) {
            playVudio.requestPictureInPicture();
          }
        }
      }
    },
    components: {
      pageHeader,
    //   chapterOne,
    //   chapterTwo,
    //   chapterThree,
    //   chapterFour,
    //   chapterFive,
    //   chapterSix,
    //   miniAudio,
    },
  };
  </script>
  
  <style lang="less" scoped>
  .page-main {
    width: 100%;
    height: 100%;
    overflow: auto;
  
    .page-content {
      max-width: 816px;
      min-width: 375px;
      margin: 0 auto;
      padding-bottom: 100px;
    }
  }
  </style>
  

 src/books/botany/view/index.vue

New file
@@ -0,0 +1,80 @@
<template>
  <div class="botany" @mouseup="handleMouseUp" :style="{
    fontSize: fontSize ? fontSize + 'px' : '16px',
    transform: `scale(${pageZoom ? pageZoom : 1})`,
  }">
    <pageContent></pageContent>
  </div>
</template>

<script>
import pageContent from "./components/index.vue"
export default {
  name: "botany",
  components: { pageContent },
  computed: {
    fontSize() {
      return this.$store.state.qiankun.fontSize;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale / 100;
    },
  },
  methods: {
    getParentWithClass(element, className) {
      while (element.parentElement) {
        element = element.parentElement;
        if (element.classList.contains(className)) {
          return element;
        }
      }
    },
    handleMouseUp(e) {
      const selection = (
        this.container ? this.container : window
      ).getSelection();
      const txt = selection.toString();
      if (selection.type != "none" && txt) {
        let node = selection.anchorNode.parentNode;
        let pageHtml = this.getParentWithClass(
          selection.anchorNode,
          "page-box"
        );
        let chapterDom = this.getParentWithClass(
          selection.anchorNode,
          "chapter"
        );
        let chapterNum;
        if (chapterDom) chapterNum = chapterDom.getAttribute("num");
        if (pageHtml) {
          const page = pageHtml.getAttribute("page");
          // ç›‘听选中文本事件，并触发父层方法
          if (this.$store.state.qiankun.windowSelection) {
            this.$store.state.qiankun.windowSelection({
              chapterNum,
              txt,
              page,
              x: e.x,
              y: e.y,
            });
          }
        }
      } else {
        if (this.$store.state.qiankun.windowSelection) {
          this.$store.state.qiankun.windowSelection({
            chapterNum: "",
            txt: "",
            page: "",
            x: e.x,
            y: e.y,
          });
        }
      }
    },
  },
};
</script>

<style lang="less">
@import "../assets/main.less";
</style>