无人机样章

zhongshujie

2025-07-01 bb584963c6abe77c5577cbcad3c9956b69444ae9

无人机样章

 .env.product

@@ -1,12 +1,20 @@
VUE_APP_ENV = 'product'
VUE_APP_API_URL = "https://jsek.bnuic.com"

# 测试服图书部署配置文件
# VUE_APP_API_URL = "http://182.92.203.7:3001"
# VUE_APP_API_URL = "https://www.tepcb.com"
VUE_APP_RESOURCE_CTX = 'https://jsek.bnuic.com/books/resource/'
VUE_APP_PUBLIC_PATH = 'https://jsek.bnuic.com/books/book/lifeCare'
# VUE_APP_RESOURCE_CTX = 'http://182.92.203.7:3007/books/resource/'
# VUE_APP_PUBLIC_PATH = 'http://182.92.203.7:3007/books/book/hydraulicTransmission'

# 京师e课正式服图书部署配置文件
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/UAVTechIntro'


# 旅游社图书部署配置文件
# VUE_APP_API_URL = "https://www.tepcb.com"
# VUE_APP_RESOURCE_CTX = 'https://www.tepcb.com/books/resource/'
# VUE_APP_PUBLIC_PATH = 'https://www.tepcb.com/books/book/policiesAndRegulations'
VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/childcareInstitutionsManagement/preschoolGameGuidance/kindergartenLanguageActivity/preschoolEvaluation/preschoolBasicKnowledge/practicalCareChildrenManual/OralAndBroadcasting/aurturingAndEducationAged0to3/policiesAndRegulations/kindergartenActivitiesDesignGuidance/toddlerSportsSafetyProtection/artInitiationForAges0to3/childIllnessPreventionCare/behaviorObserveAndGuid/cognitiveLanDevEduAges0to3/aviationPassengerTransport6th/hotelEnglishTrainingBrochure2nd/hydraulicTransmission/MMVRTCMP/foodSensoryInspection"
VUE_APP_BOOK_ID = 'lifeCare'

VUE_APP_BOOK_LIST = "childHealth/lifeCare/sportsAndHealth/embedded/english/artAndDance/artAndDrama/mathBook/botany/civilAviation/civilServices/meetingPlanners/aviationBasicSkills/aviationEtiquette/aviationSafety/toddlerGameImplementation/childcareInstitutionsManagement/preschoolGameGuidance/kindergartenLanguageActivity/preschoolEvaluation/preschoolBasicKnowledge/practicalCareChildrenManual/OralAndBroadcasting/aurturingAndEducationAged0to3/policiesAndRegulations/kindergartenActivitiesDesignGuidance/toddlerSportsSafetyProtection/artInitiationForAges0to3/childIllnessPreventionCare/behaviorObserveAndGuid/cognitiveLanDevEduAges0to3/aviationPassengerTransport6th/hotelEnglishTrainingBrochure2nd/hydraulicTransmission/MMVRTCMP/foodSensoryInspection/civilPassengerTransport/UAVTechIntro"
VUE_APP_BOOK_ID = 'UAVTechIntro'

 package-lock.json

@@ -34,8 +34,11 @@
        "@vue/cli-service": "~5.0.0",
        "eslint": "^7.32.0",
        "eslint-plugin-vue": "^8.0.3",
        "file-loader": "^6.2.0",
        "less": "^4.2.0",
        "less-loader": "^12.2.0",
        "rimraf": "^6.0.1",
        "url-loader": "^4.1.1",
        "vue-template-compiler": "^2.6.14",
        "webpack": "^5.92.0"
      }
@@ -2075,6 +2078,123 @@
      "dev": true,
      "license": "BSD-3-Clause"
    },
    "node_modules/@isaacs/balanced-match": {
      "version": "4.0.1",
      "resolved": "https://registry.npmmirror.com/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
      "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
      "dev": true,
      "engines": {
        "node": "20 || >=22"
      }
    },
    "node_modules/@isaacs/brace-expansion": {
      "version": "5.0.0",
      "resolved": "https://registry.npmmirror.com/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
      "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
      "dev": true,
      "dependencies": {
        "@isaacs/balanced-match": "^4.0.1"
      },
      "engines": {
        "node": "20 || >=22"
      }
    },
    "node_modules/@isaacs/cliui": {
      "version": "8.0.2",
      "resolved": "https://registry.npmmirror.com/@isaacs/cliui/-/cliui-8.0.2.tgz",
      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
      "dev": true,
      "dependencies": {
        "string-width": "^5.1.2",
        "string-width-cjs": "npm:string-width@^4.2.0",
        "strip-ansi": "^7.0.1",
        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
        "wrap-ansi": "^8.1.0",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
      },
      "engines": {
        "node": ">=12"
      }
    },
    "node_modules/@isaacs/cliui/node_modules/ansi-regex": {
      "version": "6.1.0",
      "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.1.0.tgz",
      "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
      "dev": true,
      "engines": {
        "node": ">=12"
      },
      "funding": {
        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
      }
    },
    "node_modules/@isaacs/cliui/node_modules/ansi-styles": {
      "version": "6.2.1",
      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.1.tgz",
      "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
      "dev": true,
      "engines": {
        "node": ">=12"
      },
      "funding": {
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
    "node_modules/@isaacs/cliui/node_modules/emoji-regex": {
      "version": "9.2.2",
      "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
      "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
      "dev": true
    },
    "node_modules/@isaacs/cliui/node_modules/string-width": {
      "version": "5.1.2",
      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
      "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
      "dev": true,
      "dependencies": {
        "eastasianwidth": "^0.2.0",
        "emoji-regex": "^9.2.2",
        "strip-ansi": "^7.0.1"
      },
      "engines": {
        "node": ">=12"
      },
      "funding": {
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
    "node_modules/@isaacs/cliui/node_modules/strip-ansi": {
      "version": "7.1.0",
      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz",
      "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
      "dev": true,
      "dependencies": {
        "ansi-regex": "^6.0.1"
      },
      "engines": {
        "node": ">=12"
      },
      "funding": {
        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
      }
    },
    "node_modules/@isaacs/cliui/node_modules/wrap-ansi": {
      "version": "8.1.0",
      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
      "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
      "dev": true,
      "dependencies": {
        "ansi-styles": "^6.1.0",
        "string-width": "^5.0.1",
        "strip-ansi": "^7.0.1"
      },
      "engines": {
        "node": ">=12"
      },
      "funding": {
        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
      }
    },
    "node_modules/@jridgewell/gen-mapping": {
      "version": "0.3.5",
      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -2164,6 +2284,43 @@
      },
      "bin": {
        "node-pre-gyp": "bin/node-pre-gyp"
      }
    },
    "node_modules/@mapbox/node-pre-gyp/node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
      "deprecated": "Glob versions prior to v9 are no longer supported",
      "optional": true,
      "dependencies": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
        "inherits": "2",
        "minimatch": "^3.1.1",
        "once": "^1.3.0",
        "path-is-absolute": "^1.0.0"
      },
      "engines": {
        "node": "*"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/@mapbox/node-pre-gyp/node_modules/rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
      "deprecated": "Rimraf versions prior to v4 are no longer supported",
      "optional": true,
      "dependencies": {
        "glob": "^7.1.3"
      },
      "bin": {
        "rimraf": "bin.js"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/@mapbox/node-pre-gyp/node_modules/semver": {
@@ -5119,11 +5276,10 @@
      }
    },
    "node_modules/cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
      "version": "7.0.6",
      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "path-key": "^3.1.0",
        "shebang-command": "^2.0.0",
@@ -5979,6 +6135,12 @@
      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/eastasianwidth": {
      "version": "0.2.0",
      "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
      "dev": true
    },
    "node_modules/easy-stack": {
      "version": "1.0.1",
@@ -7127,6 +7289,58 @@
        "node": "^10.12.0 || >=12.0.0"
      }
    },
    "node_modules/file-loader": {
      "version": "6.2.0",
      "resolved": "https://registry.npmmirror.com/file-loader/-/file-loader-6.2.0.tgz",
      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
      "dev": true,
      "dependencies": {
        "loader-utils": "^2.0.0",
        "schema-utils": "^3.0.0"
      },
      "engines": {
        "node": ">= 10.13.0"
      },
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/webpack"
      },
      "peerDependencies": {
        "webpack": "^4.0.0 || ^5.0.0"
      }
    },
    "node_modules/file-loader/node_modules/loader-utils": {
      "version": "2.0.4",
      "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
      "dev": true,
      "dependencies": {
        "big.js": "^5.2.2",
        "emojis-list": "^3.0.0",
        "json5": "^2.1.2"
      },
      "engines": {
        "node": ">=8.9.0"
      }
    },
    "node_modules/file-loader/node_modules/schema-utils": {
      "version": "3.3.0",
      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
      "dev": true,
      "dependencies": {
        "@types/json-schema": "^7.0.8",
        "ajv": "^6.12.5",
        "ajv-keywords": "^3.5.2"
      },
      "engines": {
        "node": ">= 10.13.0"
      },
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/webpack"
      }
    },
    "node_modules/fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
@@ -7233,6 +7447,43 @@
        "node": "^10.12.0 || >=12.0.0"
      }
    },
    "node_modules/flat-cache/node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
      "deprecated": "Glob versions prior to v9 are no longer supported",
      "dev": true,
      "dependencies": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
        "inherits": "2",
        "minimatch": "^3.1.1",
        "once": "^1.3.0",
        "path-is-absolute": "^1.0.0"
      },
      "engines": {
        "node": "*"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/flat-cache/node_modules/rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
      "deprecated": "Rimraf versions prior to v4 are no longer supported",
      "dev": true,
      "dependencies": {
        "glob": "^7.1.3"
      },
      "bin": {
        "rimraf": "bin.js"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/flatted": {
      "version": "3.3.1",
      "resolved": "https://registry.npmmirror.com/flatted/-/flatted-3.3.1.tgz",
@@ -7258,6 +7509,34 @@
        "debug": {
          "optional": true
        }
      }
    },
    "node_modules/foreground-child": {
      "version": "3.3.1",
      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.1.tgz",
      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
      "dev": true,
      "dependencies": {
        "cross-spawn": "^7.0.6",
        "signal-exit": "^4.0.1"
      },
      "engines": {
        "node": ">=14"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/foreground-child/node_modules/signal-exit": {
      "version": "4.1.0",
      "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
      "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
      "dev": true,
      "engines": {
        "node": ">=14"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/form-data": {
@@ -7346,8 +7625,7 @@
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
      "devOptional": true,
      "license": "ISC"
      "devOptional": true
    },
    "node_modules/fsevents": {
      "version": "2.3.3",
@@ -7455,21 +7733,23 @@
      }
    },
    "node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
      "devOptional": true,
      "license": "ISC",
      "version": "11.0.3",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-11.0.3.tgz",
      "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==",
      "dev": true,
      "dependencies": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
        "inherits": "2",
        "minimatch": "^3.1.1",
        "once": "^1.3.0",
        "path-is-absolute": "^1.0.0"
        "foreground-child": "^3.3.1",
        "jackspeak": "^4.1.1",
        "minimatch": "^10.0.3",
        "minipass": "^7.1.2",
        "package-json-from-dist": "^1.0.0",
        "path-scurry": "^2.0.0"
      },
      "bin": {
        "glob": "dist/esm/bin.mjs"
      },
      "engines": {
        "node": "*"
        "node": "20 || >=22"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
@@ -7494,6 +7774,30 @@
      "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
      "dev": true,
      "license": "BSD-2-Clause"
    },
    "node_modules/glob/node_modules/minimatch": {
      "version": "10.0.3",
      "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-10.0.3.tgz",
      "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
      "dev": true,
      "dependencies": {
        "@isaacs/brace-expansion": "^5.0.0"
      },
      "engines": {
        "node": "20 || >=22"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/glob/node_modules/minipass": {
      "version": "7.1.2",
      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.2.tgz",
      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
      "dev": true,
      "engines": {
        "node": ">=16 || 14 >=14.17"
      }
    },
    "node_modules/globals": {
      "version": "11.12.0",
@@ -8078,8 +8382,8 @@
      "version": "1.0.6",
      "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
      "integrity": "sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==",
      "deprecated": "This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.",
      "devOptional": true,
      "license": "ISC",
      "dependencies": {
        "once": "^1.3.0",
        "wrappy": "1"
@@ -8323,6 +8627,21 @@
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/jackspeak": {
      "version": "4.1.1",
      "resolved": "https://registry.npmmirror.com/jackspeak/-/jackspeak-4.1.1.tgz",
      "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==",
      "dev": true,
      "dependencies": {
        "@isaacs/cliui": "^8.0.2"
      },
      "engines": {
        "node": "20 || >=22"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/javascript-stringify": {
@@ -10092,6 +10411,12 @@
        "node": ">=6"
      }
    },
    "node_modules/package-json-from-dist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
      "dev": true
    },
    "node_modules/param-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
@@ -10204,7 +10529,6 @@
      "resolved": "https://registry.npmmirror.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz",
      "integrity": "sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==",
      "devOptional": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
      }
@@ -10225,6 +10549,40 @@
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/path-scurry": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/path-scurry/-/path-scurry-2.0.0.tgz",
      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
      "dev": true,
      "dependencies": {
        "lru-cache": "^11.0.0",
        "minipass": "^7.1.2"
      },
      "engines": {
        "node": "20 || >=22"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/path-scurry/node_modules/lru-cache": {
      "version": "11.1.0",
      "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-11.1.0.tgz",
      "integrity": "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==",
      "dev": true,
      "engines": {
        "node": "20 || >=22"
      }
    },
    "node_modules/path-scurry/node_modules/minipass": {
      "version": "7.1.2",
      "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.2.tgz",
      "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
      "dev": true,
      "engines": {
        "node": ">=16 || 14 >=14.17"
      }
    },
    "node_modules/path-to-regexp": {
      "version": "0.1.7",
@@ -11436,16 +11794,19 @@
      }
    },
    "node_modules/rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
      "devOptional": true,
      "license": "ISC",
      "version": "6.0.1",
      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-6.0.1.tgz",
      "integrity": "sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==",
      "dev": true,
      "dependencies": {
        "glob": "^7.1.3"
        "glob": "^11.0.0",
        "package-json-from-dist": "^1.0.0"
      },
      "bin": {
        "rimraf": "bin.js"
        "rimraf": "dist/esm/bin.mjs"
      },
      "engines": {
        "node": "20 || >=22"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
@@ -12139,12 +12500,40 @@
        "node": ">=8"
      }
    },
    "node_modules/string-width-cjs": {
      "name": "string-width",
      "version": "4.2.3",
      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
      "dev": true,
      "dependencies": {
        "emoji-regex": "^8.0.0",
        "is-fullwidth-code-point": "^3.0.0",
        "strip-ansi": "^6.0.1"
      },
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
      "devOptional": true,
      "license": "MIT",
      "dependencies": {
        "ansi-regex": "^5.0.1"
      },
      "engines": {
        "node": ">=8"
      }
    },
    "node_modules/strip-ansi-cjs": {
      "name": "strip-ansi",
      "version": "6.0.1",
      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
      "dev": true,
      "dependencies": {
        "ansi-regex": "^5.0.1"
      },
@@ -12816,6 +13205,65 @@
      "license": "BSD-2-Clause",
      "dependencies": {
        "punycode": "^2.1.0"
      }
    },
    "node_modules/url-loader": {
      "version": "4.1.1",
      "resolved": "https://registry.npmmirror.com/url-loader/-/url-loader-4.1.1.tgz",
      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
      "dev": true,
      "dependencies": {
        "loader-utils": "^2.0.0",
        "mime-types": "^2.1.27",
        "schema-utils": "^3.0.0"
      },
      "engines": {
        "node": ">= 10.13.0"
      },
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/webpack"
      },
      "peerDependencies": {
        "file-loader": "*",
        "webpack": "^4.0.0 || ^5.0.0"
      },
      "peerDependenciesMeta": {
        "file-loader": {
          "optional": true
        }
      }
    },
    "node_modules/url-loader/node_modules/loader-utils": {
      "version": "2.0.4",
      "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
      "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
      "dev": true,
      "dependencies": {
        "big.js": "^5.2.2",
        "emojis-list": "^3.0.0",
        "json5": "^2.1.2"
      },
      "engines": {
        "node": ">=8.9.0"
      }
    },
    "node_modules/url-loader/node_modules/schema-utils": {
      "version": "3.3.0",
      "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
      "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
      "dev": true,
      "dependencies": {
        "@types/json-schema": "^7.0.8",
        "ajv": "^6.12.5",
        "ajv-keywords": "^3.5.2"
      },
      "engines": {
        "node": ">= 10.13.0"
      },
      "funding": {
        "type": "opencollective",
        "url": "https://opencollective.com/webpack"
      }
    },
    "node_modules/url-parse": {
@@ -13541,12 +13989,49 @@
        "ajv": "^8.8.2"
      }
    },
    "node_modules/webpack-dev-server/node_modules/glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
      "deprecated": "Glob versions prior to v9 are no longer supported",
      "dev": true,
      "dependencies": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
        "inherits": "2",
        "minimatch": "^3.1.1",
        "once": "^1.3.0",
        "path-is-absolute": "^1.0.0"
      },
      "engines": {
        "node": "*"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
      "version": "1.0.0",
      "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
      "dev": true,
      "license": "MIT"
    },
    "node_modules/webpack-dev-server/node_modules/rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
      "deprecated": "Rimraf versions prior to v4 are no longer supported",
      "dev": true,
      "dependencies": {
        "glob": "^7.1.3"
      },
      "bin": {
        "rimraf": "bin.js"
      },
      "funding": {
        "url": "https://github.com/sponsors/isaacs"
      }
    },
    "node_modules/webpack-dev-server/node_modules/schema-utils": {
      "version": "4.2.0",
@@ -13766,6 +14251,57 @@
      "funding": {
        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
      }
    },
    "node_modules/wrap-ansi-cjs": {
      "name": "wrap-ansi",
      "version": "7.0.0",
      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
      "dev": true,
      "dependencies": {
        "ansi-styles": "^4.0.0",
        "string-width": "^4.1.0",
        "strip-ansi": "^6.0.0"
      },
      "engines": {
        "node": ">=10"
      },
      "funding": {
        "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
      }
    },
    "node_modules/wrap-ansi-cjs/node_modules/ansi-styles": {
      "version": "4.3.0",
      "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
      "dev": true,
      "dependencies": {
        "color-convert": "^2.0.1"
      },
      "engines": {
        "node": ">=8"
      },
      "funding": {
        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
      }
    },
    "node_modules/wrap-ansi-cjs/node_modules/color-convert": {
      "version": "2.0.1",
      "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
      "dev": true,
      "dependencies": {
        "color-name": "~1.1.4"
      },
      "engines": {
        "node": ">=7.0.0"
      }
    },
    "node_modules/wrap-ansi-cjs/node_modules/color-name": {
      "version": "1.1.4",
      "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
      "dev": true
    },
    "node_modules/wrap-ansi/node_modules/ansi-styles": {
      "version": "4.3.0",
@@ -15346,6 +15882,86 @@
      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
      "dev": true
    },
    "@isaacs/balanced-match": {
      "version": "4.0.1",
      "resolved": "https://registry.npmmirror.com/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz",
      "integrity": "sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==",
      "dev": true
    },
    "@isaacs/brace-expansion": {
      "version": "5.0.0",
      "resolved": "https://registry.npmmirror.com/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz",
      "integrity": "sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==",
      "dev": true,
      "requires": {
        "@isaacs/balanced-match": "^4.0.1"
      }
    },
    "@isaacs/cliui": {
      "version": "8.0.2",
      "resolved": "https://registry.npmmirror.com/@isaacs/cliui/-/cliui-8.0.2.tgz",
      "integrity": "sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==",
      "dev": true,
      "requires": {
        "string-width": "^5.1.2",
        "string-width-cjs": "npm:string-width@^4.2.0",
        "strip-ansi": "^7.0.1",
        "strip-ansi-cjs": "npm:strip-ansi@^6.0.1",
        "wrap-ansi": "^8.1.0",
        "wrap-ansi-cjs": "npm:wrap-ansi@^7.0.0"
      },
      "dependencies": {
        "ansi-regex": {
          "version": "6.1.0",
          "resolved": "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.1.0.tgz",
          "integrity": "sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==",
          "dev": true
        },
        "ansi-styles": {
          "version": "6.2.1",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.1.tgz",
          "integrity": "sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==",
          "dev": true
        },
        "emoji-regex": {
          "version": "9.2.2",
          "resolved": "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz",
          "integrity": "sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==",
          "dev": true
        },
        "string-width": {
          "version": "5.1.2",
          "resolved": "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz",
          "integrity": "sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==",
          "dev": true,
          "requires": {
            "eastasianwidth": "^0.2.0",
            "emoji-regex": "^9.2.2",
            "strip-ansi": "^7.0.1"
          }
        },
        "strip-ansi": {
          "version": "7.1.0",
          "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz",
          "integrity": "sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==",
          "dev": true,
          "requires": {
            "ansi-regex": "^6.0.1"
          }
        },
        "wrap-ansi": {
          "version": "8.1.0",
          "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz",
          "integrity": "sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==",
          "dev": true,
          "requires": {
            "ansi-styles": "^6.1.0",
            "string-width": "^5.0.1",
            "strip-ansi": "^7.0.1"
          }
        }
      }
    },
    "@jridgewell/gen-mapping": {
      "version": "0.3.5",
      "resolved": "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz",
@@ -15418,6 +16034,29 @@
        "tar": "^6.1.11"
      },
      "dependencies": {
        "glob": {
          "version": "7.2.3",
          "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
          "optional": true,
          "requires": {
            "fs.realpath": "^1.0.0",
            "inflight": "^1.0.4",
            "inherits": "2",
            "minimatch": "^3.1.1",
            "once": "^1.3.0",
            "path-is-absolute": "^1.0.0"
          }
        },
        "rimraf": {
          "version": "3.0.2",
          "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
          "optional": true,
          "requires": {
            "glob": "^7.1.3"
          }
        },
        "semver": {
          "version": "7.6.3",
          "resolved": "https://registry.npmmirror.com/semver/-/semver-7.6.3.tgz",
@@ -17578,9 +18217,9 @@
      }
    },
    "cross-spawn": {
      "version": "7.0.3",
      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz",
      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
      "version": "7.0.6",
      "resolved": "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz",
      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
      "dev": true,
      "requires": {
        "path-key": "^3.1.0",
@@ -18161,6 +18800,12 @@
      "version": "0.1.2",
      "resolved": "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz",
      "integrity": "sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==",
      "dev": true
    },
    "eastasianwidth": {
      "version": "0.2.0",
      "resolved": "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
      "integrity": "sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==",
      "dev": true
    },
    "easy-stack": {
@@ -18974,6 +19619,40 @@
        "flat-cache": "^3.0.4"
      }
    },
    "file-loader": {
      "version": "6.2.0",
      "resolved": "https://registry.npmmirror.com/file-loader/-/file-loader-6.2.0.tgz",
      "integrity": "sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==",
      "dev": true,
      "requires": {
        "loader-utils": "^2.0.0",
        "schema-utils": "^3.0.0"
      },
      "dependencies": {
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "schema-utils": {
          "version": "3.3.0",
          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
          "dev": true,
          "requires": {
            "@types/json-schema": "^7.0.8",
            "ajv": "^6.12.5",
            "ajv-keywords": "^3.5.2"
          }
        }
      }
    },
    "fill-range": {
      "version": "7.0.1",
      "resolved": "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz",
@@ -19051,6 +19730,31 @@
        "flatted": "^3.2.9",
        "keyv": "^4.5.3",
        "rimraf": "^3.0.2"
      },
      "dependencies": {
        "glob": {
          "version": "7.2.3",
          "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
          "dev": true,
          "requires": {
            "fs.realpath": "^1.0.0",
            "inflight": "^1.0.4",
            "inherits": "2",
            "minimatch": "^3.1.1",
            "once": "^1.3.0",
            "path-is-absolute": "^1.0.0"
          }
        },
        "rimraf": {
          "version": "3.0.2",
          "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
          "dev": true,
          "requires": {
            "glob": "^7.1.3"
          }
        }
      }
    },
    "flatted": {
@@ -19063,6 +19767,24 @@
      "version": "1.15.6",
      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz",
      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA=="
    },
    "foreground-child": {
      "version": "3.3.1",
      "resolved": "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.1.tgz",
      "integrity": "sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==",
      "dev": true,
      "requires": {
        "cross-spawn": "^7.0.6",
        "signal-exit": "^4.0.1"
      },
      "dependencies": {
        "signal-exit": {
          "version": "4.1.0",
          "resolved": "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz",
          "integrity": "sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==",
          "dev": true
        }
      }
    },
    "form-data": {
      "version": "4.0.0",
@@ -19196,17 +19918,34 @@
      }
    },
    "glob": {
      "version": "7.2.3",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
      "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
      "devOptional": true,
      "version": "11.0.3",
      "resolved": "https://registry.npmmirror.com/glob/-/glob-11.0.3.tgz",
      "integrity": "sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==",
      "dev": true,
      "requires": {
        "fs.realpath": "^1.0.0",
        "inflight": "^1.0.4",
        "inherits": "2",
        "minimatch": "^3.1.1",
        "once": "^1.3.0",
        "path-is-absolute": "^1.0.0"
        "foreground-child": "^3.3.1",
        "jackspeak": "^4.1.1",
        "minimatch": "^10.0.3",
        "minipass": "^7.1.2",
        "package-json-from-dist": "^1.0.0",
        "path-scurry": "^2.0.0"
      },
      "dependencies": {
        "minimatch": {
          "version": "10.0.3",
          "resolved": "https://registry.npmmirror.com/minimatch/-/minimatch-10.0.3.tgz",
          "integrity": "sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==",
          "dev": true,
          "requires": {
            "@isaacs/brace-expansion": "^5.0.0"
          }
        },
        "minipass": {
          "version": "7.1.2",
          "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.2.tgz",
          "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
          "dev": true
        }
      }
    },
    "glob-parent": {
@@ -19770,6 +20509,15 @@
      "resolved": "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz",
      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
      "dev": true
    },
    "jackspeak": {
      "version": "4.1.1",
      "resolved": "https://registry.npmmirror.com/jackspeak/-/jackspeak-4.1.1.tgz",
      "integrity": "sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==",
      "dev": true,
      "requires": {
        "@isaacs/cliui": "^8.0.2"
      }
    },
    "javascript-stringify": {
      "version": "2.1.0",
@@ -21005,6 +21753,12 @@
      "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
      "dev": true
    },
    "package-json-from-dist": {
      "version": "1.0.1",
      "resolved": "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz",
      "integrity": "sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==",
      "dev": true
    },
    "param-case": {
      "version": "3.0.4",
      "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz",
@@ -21104,6 +21858,30 @@
      "resolved": "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz",
      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
      "dev": true
    },
    "path-scurry": {
      "version": "2.0.0",
      "resolved": "https://registry.npmmirror.com/path-scurry/-/path-scurry-2.0.0.tgz",
      "integrity": "sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==",
      "dev": true,
      "requires": {
        "lru-cache": "^11.0.0",
        "minipass": "^7.1.2"
      },
      "dependencies": {
        "lru-cache": {
          "version": "11.1.0",
          "resolved": "https://registry.npmmirror.com/lru-cache/-/lru-cache-11.1.0.tgz",
          "integrity": "sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==",
          "dev": true
        },
        "minipass": {
          "version": "7.1.2",
          "resolved": "https://registry.npmmirror.com/minipass/-/minipass-7.1.2.tgz",
          "integrity": "sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==",
          "dev": true
        }
      }
    },
    "path-to-regexp": {
      "version": "0.1.7",
@@ -21885,12 +22663,13 @@
      "dev": true
    },
    "rimraf": {
      "version": "3.0.2",
      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
      "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
      "devOptional": true,
      "version": "6.0.1",
      "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-6.0.1.tgz",
      "integrity": "sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==",
      "dev": true,
      "requires": {
        "glob": "^7.1.3"
        "glob": "^11.0.0",
        "package-json-from-dist": "^1.0.0"
      }
    },
    "run-parallel": {
@@ -22401,11 +23180,31 @@
        "strip-ansi": "^6.0.1"
      }
    },
    "string-width-cjs": {
      "version": "npm:string-width@4.2.3",
      "resolved": "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz",
      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
      "dev": true,
      "requires": {
        "emoji-regex": "^8.0.0",
        "is-fullwidth-code-point": "^3.0.0",
        "strip-ansi": "^6.0.1"
      }
    },
    "strip-ansi": {
      "version": "6.0.1",
      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
      "devOptional": true,
      "requires": {
        "ansi-regex": "^5.0.1"
      }
    },
    "strip-ansi-cjs": {
      "version": "npm:strip-ansi@6.0.1",
      "resolved": "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz",
      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
      "dev": true,
      "requires": {
        "ansi-regex": "^5.0.1"
      }
@@ -22846,6 +23645,41 @@
      "dev": true,
      "requires": {
        "punycode": "^2.1.0"
      }
    },
    "url-loader": {
      "version": "4.1.1",
      "resolved": "https://registry.npmmirror.com/url-loader/-/url-loader-4.1.1.tgz",
      "integrity": "sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==",
      "dev": true,
      "requires": {
        "loader-utils": "^2.0.0",
        "mime-types": "^2.1.27",
        "schema-utils": "^3.0.0"
      },
      "dependencies": {
        "loader-utils": {
          "version": "2.0.4",
          "resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-2.0.4.tgz",
          "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==",
          "dev": true,
          "requires": {
            "big.js": "^5.2.2",
            "emojis-list": "^3.0.0",
            "json5": "^2.1.2"
          }
        },
        "schema-utils": {
          "version": "3.3.0",
          "resolved": "https://registry.npmmirror.com/schema-utils/-/schema-utils-3.3.0.tgz",
          "integrity": "sha512-pN/yOAvcC+5rQ5nERGuwrjLlYvLTbCibnZ1I7B1LaiAz9BRBlE9GMgE/eqV30P7aJQUf7Ddimy/RsbYO/GrVGg==",
          "dev": true,
          "requires": {
            "@types/json-schema": "^7.0.8",
            "ajv": "^6.12.5",
            "ajv-keywords": "^3.5.2"
          }
        }
      }
    },
    "url-parse": {
@@ -23376,11 +24210,34 @@
            "fast-deep-equal": "^3.1.3"
          }
        },
        "glob": {
          "version": "7.2.3",
          "resolved": "https://registry.npmmirror.com/glob/-/glob-7.2.3.tgz",
          "integrity": "sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==",
          "dev": true,
          "requires": {
            "fs.realpath": "^1.0.0",
            "inflight": "^1.0.4",
            "inherits": "2",
            "minimatch": "^3.1.1",
            "once": "^1.3.0",
            "path-is-absolute": "^1.0.0"
          }
        },
        "json-schema-traverse": {
          "version": "1.0.0",
          "resolved": "https://registry.npmmirror.com/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
          "dev": true
        },
        "rimraf": {
          "version": "3.0.2",
          "resolved": "https://registry.npmmirror.com/rimraf/-/rimraf-3.0.2.tgz",
          "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==",
          "dev": true,
          "requires": {
            "glob": "^7.1.3"
          }
        },
        "schema-utils": {
          "version": "4.2.0",
@@ -23546,6 +24403,43 @@
        }
      }
    },
    "wrap-ansi-cjs": {
      "version": "npm:wrap-ansi@7.0.0",
      "resolved": "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
      "integrity": "sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==",
      "dev": true,
      "requires": {
        "ansi-styles": "^4.0.0",
        "string-width": "^4.1.0",
        "strip-ansi": "^6.0.0"
      },
      "dependencies": {
        "ansi-styles": {
          "version": "4.3.0",
          "resolved": "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-4.3.0.tgz",
          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
          "dev": true,
          "requires": {
            "color-convert": "^2.0.1"
          }
        },
        "color-convert": {
          "version": "2.0.1",
          "resolved": "https://registry.npmmirror.com/color-convert/-/color-convert-2.0.1.tgz",
          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
          "dev": true,
          "requires": {
            "color-name": "~1.1.4"
          }
        },
        "color-name": {
          "version": "1.1.4",
          "resolved": "https://registry.npmmirror.com/color-name/-/color-name-1.1.4.tgz",
          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
          "dev": true
        }
      }
    },
    "wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz",

 package.json

@@ -34,8 +34,11 @@
    "@vue/cli-service": "~5.0.0",
    "eslint": "^7.32.0",
    "eslint-plugin-vue": "^8.0.3",
    "file-loader": "^6.2.0",
    "less": "^4.2.0",
    "less-loader": "^12.2.0",
    "rimraf": "^6.0.1",
    "url-loader": "^4.1.1",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.92.0"
  },

 src/App.vue

@@ -44,6 +44,8 @@
    <hydraulicTransmission v-if="activeBook.name == 'hydraulicTransmission'"></hydraulicTransmission>
    <foodSensoryInspection v-if="activeBook.name == 'foodSensoryInspection'"></foodSensoryInspection>
    <MMVRTCMP v-if="activeBook.name == 'MMVRTCMP'"></MMVRTCMP>
    <civilPassengerTransport v-if="activeBook.name == 'civilPassengerTransport'"> </civilPassengerTransport>
    <UAVTechIntro v-if="activeBook.name == 'UAVTechIntro'"></UAVTechIntro>
  </div>
</template>
<script>
@@ -127,6 +129,9 @@
    foodSensoryInspection: () =>
      import("./books/foodSensoryInspection/view/index.vue"),
    MMVRTCMP: () => import("./books/MMVRTCMP/view/index.vue"),
    civilPassengerTransport: () =>
      import("./books/civilPassengerTransport/view/index.vue"),
    UAVTechIntro: () => import("./books/UAVTechIntro/view/index.vue")
  },
  data() {
    return {
@@ -169,6 +174,7 @@
      // aviationBasicSkills                    // 基本技能
      // aviationSafety                         // 安全检查实务
      // aviationEtiquette                      // 礼仪服务
      // botany                                 // 植物学（农大社）
      // childcareInstitutionsManagement        // 托育机构管理与实务
      // toddlerGameImplementation              // 婴幼儿游戏活动实施
      // preschoolGameGuidance                  // 学前游戏指导
@@ -190,13 +196,14 @@
      // hydraulicTransmission                  // 机械传动 （哈工大）
      // foodSensoryInspection                  // 食品感官检验技术
      // MMVRTCMP                               // 视觉手册
      // civilPassengerTransport                // 民航旅客运输
      // UAVTechIntro                           // 无人机应用技术导论
      this.activeBook = await this.config.getBookConfig(
        process.env.VUE_APP_RESOURCE_CTX +
        (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "toddlerGameImplementation")
          : "UAVTechIntro")
      );

      // 测试试读30页
      // this.activeBook.tryPageCount = 10;
      // this.config.activeBook = this.activeBook;

 src/assets/js/config.js

@@ -7,6 +7,12 @@
  return response.data;
};

// 请求教材资源信息
const getBookResources =  async (ctx) => {
  const response = await axios.get(ctx + "/bookResources.json");
  return response.data;
};

export const appId = 0;
export const requestTimeOut = 300000; // 请求超时时间
export const tokenKey = "token";
@@ -19,5 +25,6 @@
  goodsStore,
  appId,
  getBookConfig,
  getBookResources,
};
export default config;

 src/assets/methods/resources.js

@@ -16,7 +16,6 @@
    md5,
    appRefCode,
  });
  console.log("res", res);
  if (typeof res === "string" && res.includes("http")) {
    return res;
  } else if (typeof res === "object" && res.data != "") {

 src/books/UAVTechIntro/assets/Fonts/FZSSK.TTF

Binary files differ

 src/books/UAVTechIntro/assets/images/0007-01.jpg

 src/books/UAVTechIntro/assets/images/0008-01.jpg

 src/books/UAVTechIntro/assets/images/0009-01.jpg

 src/books/UAVTechIntro/assets/images/0010-01.jpg

 src/books/UAVTechIntro/assets/images/0011-01.jpg

 src/books/UAVTechIntro/assets/images/0013-01.jpg

 src/books/UAVTechIntro/assets/images/0013-02.jpg

 src/books/UAVTechIntro/assets/images/0013-03.jpg

 src/books/UAVTechIntro/assets/images/0013-04.jpg

 src/books/UAVTechIntro/assets/images/0014-04.jpg

 src/books/UAVTechIntro/assets/images/0014_02.jpg

 src/books/UAVTechIntro/assets/images/0014_03.jpg

 src/books/UAVTechIntro/assets/images/0014_05.jpg

 src/books/UAVTechIntro/assets/images/0014_06.jpg

 src/books/UAVTechIntro/assets/images/0015-01.jpg

 src/books/UAVTechIntro/assets/images/0015-02.jpg

 src/books/UAVTechIntro/assets/images/0016-01-01.png

 src/books/UAVTechIntro/assets/images/0016-01-02.png

 src/books/UAVTechIntro/assets/images/0016-01-03.png

 src/books/UAVTechIntro/assets/images/0016-01-04.png

 src/books/UAVTechIntro/assets/images/0016-01-05.png

 src/books/UAVTechIntro/assets/images/0016-01.jpg

 src/books/UAVTechIntro/assets/images/0016-02.jpg

 src/books/UAVTechIntro/assets/images/0017-01-01.png

 src/books/UAVTechIntro/assets/images/0017-01-02.png

 src/books/UAVTechIntro/assets/images/0017-01.jpg

 src/books/UAVTechIntro/assets/images/0017-02.jpg

 src/books/UAVTechIntro/assets/images/0017_03.jpg

 src/books/UAVTechIntro/assets/images/0018-01.jpg

 src/books/UAVTechIntro/assets/images/0018-02.jpg

 src/books/UAVTechIntro/assets/images/0018-03.jpg

 src/books/UAVTechIntro/assets/images/0019-01.jpg

 src/books/UAVTechIntro/assets/images/0019-03.jpg

 src/books/UAVTechIntro/assets/images/0019_02.jpg

 src/books/UAVTechIntro/assets/images/0020-02.jpg

 src/books/UAVTechIntro/assets/images/0020_01.jpg

 src/books/UAVTechIntro/assets/images/0026-01.jpg

 src/books/UAVTechIntro/assets/images/0026-03.jpg

 src/books/UAVTechIntro/assets/images/0026_02.jpg

 src/books/UAVTechIntro/assets/images/0029-01.jpg

 src/books/UAVTechIntro/assets/images/0029_02.jpg

 src/books/UAVTechIntro/assets/images/0030-01.jpg

 src/books/UAVTechIntro/assets/images/0031-01.jpg

 src/books/UAVTechIntro/assets/images/0031-02.jpg

 src/books/UAVTechIntro/assets/images/0032-01.jpg

 src/books/UAVTechIntro/assets/images/0032-02.jpg

 src/books/UAVTechIntro/assets/images/0033_01.jpg

 src/books/UAVTechIntro/assets/images/0033_02.jpg

 src/books/UAVTechIntro/assets/images/0033_03.jpg

 src/books/UAVTechIntro/assets/images/0036-01.jpg

 src/books/UAVTechIntro/assets/images/0037-03.jpg

 src/books/UAVTechIntro/assets/images/0038-02.jpg

 src/books/UAVTechIntro/assets/images/0038-03.jpg

 src/books/UAVTechIntro/assets/images/0038_01.jpg

 src/books/UAVTechIntro/assets/images/0039-01.jpg

 src/books/UAVTechIntro/assets/images/0039-02.jpg

 src/books/UAVTechIntro/assets/images/0039-03.jpg

 src/books/UAVTechIntro/assets/images/0040-01.jpg

 src/books/UAVTechIntro/assets/images/0040-02.jpg

 src/books/UAVTechIntro/assets/images/0041-01.jpg

 src/books/UAVTechIntro/assets/images/0041-02.jpg

 src/books/UAVTechIntro/assets/images/0042-01.jpg

 src/books/UAVTechIntro/assets/images/0046-01.jpg

 src/books/UAVTechIntro/assets/images/0046-03.jpg

 src/books/UAVTechIntro/assets/images/0046_02.jpg

 src/books/UAVTechIntro/assets/images/0050-01.jpg

 src/books/UAVTechIntro/assets/images/0050-03.jpg

 src/books/UAVTechIntro/assets/images/0050_02.jpg

 src/books/UAVTechIntro/assets/images/0054-01.jpg

 src/books/UAVTechIntro/assets/images/0055-01.jpg

 src/books/UAVTechIntro/assets/images/0055-02.jpg

 src/books/UAVTechIntro/assets/images/0057-01.jpg

 src/books/UAVTechIntro/assets/images/0058-01.jpg

 src/books/UAVTechIntro/assets/images/0059-03.jpg

 src/books/UAVTechIntro/assets/images/0060-02.jpg

 src/books/UAVTechIntro/assets/images/0060_01.jpg

 src/books/UAVTechIntro/assets/images/0061-01.jpg

 src/books/UAVTechIntro/assets/images/0063-01.jpg

 src/books/UAVTechIntro/assets/images/0063-02.jpg

 src/books/UAVTechIntro/assets/images/0065-01.jpg

 src/books/UAVTechIntro/assets/images/0066-01.jpg

 src/books/UAVTechIntro/assets/images/0067-01.jpg

 src/books/UAVTechIntro/assets/images/0071-01.jpg

 src/books/UAVTechIntro/assets/images/0071-03.jpg

 src/books/UAVTechIntro/assets/images/0071_02.jpg

 src/books/UAVTechIntro/assets/images/0072-01.jpg

 src/books/UAVTechIntro/assets/images/0075-01.jpg

 src/books/UAVTechIntro/assets/images/0076-01.jpg

 src/books/UAVTechIntro/assets/images/0076-03.jpg

 src/books/UAVTechIntro/assets/images/0076_02.jpg

 src/books/UAVTechIntro/assets/images/0077-01.jpg

 src/books/UAVTechIntro/assets/images/0077-02.jpg

 src/books/UAVTechIntro/assets/images/0078-01.jpg

 src/books/UAVTechIntro/assets/images/0078-02.jpg

 src/books/UAVTechIntro/assets/images/0079-01.jpg

 src/books/UAVTechIntro/assets/images/0079-02.jpg

 src/books/UAVTechIntro/assets/images/0080-01.jpg

 src/books/UAVTechIntro/assets/images/0080-02.jpg

 src/books/UAVTechIntro/assets/images/0080-03.jpg

 src/books/UAVTechIntro/assets/images/0081-01.jpg

 src/books/UAVTechIntro/assets/images/0082-03.jpg

 src/books/UAVTechIntro/assets/images/0083-02.jpg

 src/books/UAVTechIntro/assets/images/0083_01.jpg

 src/books/UAVTechIntro/assets/images/0084-01.jpg

 src/books/UAVTechIntro/assets/images/0084-02.jpg

 src/books/UAVTechIntro/assets/images/0085-01.jpg

 src/books/UAVTechIntro/assets/images/0085-02.jpg

 src/books/UAVTechIntro/assets/images/0085-03.jpg

 src/books/UAVTechIntro/assets/images/0086-01.jpg

 src/books/UAVTechIntro/assets/images/0089-01.jpg

 src/books/UAVTechIntro/assets/images/0090-02.jpg

 src/books/UAVTechIntro/assets/images/0090_01.jpg

 src/books/UAVTechIntro/assets/images/0091-01.jpg

 src/books/UAVTechIntro/assets/images/0091-02.jpg

 src/books/UAVTechIntro/assets/images/0092-01.jpg

 src/books/UAVTechIntro/assets/images/0095-01.jpg

 src/books/UAVTechIntro/assets/images/0096-01.jpg

 src/books/UAVTechIntro/assets/images/0096-03.jpg

 src/books/UAVTechIntro/assets/images/0096_02.jpg

 src/books/UAVTechIntro/assets/images/0097-01.jpg

 src/books/UAVTechIntro/assets/images/0097-02.jpg

 src/books/UAVTechIntro/assets/images/0098-01.jpg

 src/books/UAVTechIntro/assets/images/0098-02.jpg

 src/books/UAVTechIntro/assets/images/0099-01.jpg

 src/books/UAVTechIntro/assets/images/0099-02.jpg

 src/books/UAVTechIntro/assets/images/0100-01.jpg

 src/books/UAVTechIntro/assets/images/0100-02.jpg

 src/books/UAVTechIntro/assets/images/0101-01.jpg

 src/books/UAVTechIntro/assets/images/0101-02.jpg

 src/books/UAVTechIntro/assets/images/0102-01.jpg

 src/books/UAVTechIntro/assets/images/0105-01.jpg

 src/books/UAVTechIntro/assets/images/0105-02.jpg

 src/books/UAVTechIntro/assets/images/0110-01.jpg

 src/books/UAVTechIntro/assets/images/0111-01.jpg

 src/books/UAVTechIntro/assets/images/0112-03.jpg

 src/books/UAVTechIntro/assets/images/0113-02.jpg

 src/books/UAVTechIntro/assets/images/0113_01.jpg

 src/books/UAVTechIntro/assets/images/0120-01.jpg

 src/books/UAVTechIntro/assets/images/0120-03.jpg

 src/books/UAVTechIntro/assets/images/0120_02.jpg

 src/books/UAVTechIntro/assets/images/0121-01.jpg

 src/books/UAVTechIntro/assets/images/0122-01.jpg

 src/books/UAVTechIntro/assets/images/0123-01.jpg

 src/books/UAVTechIntro/assets/images/0124-01.jpg

 src/books/UAVTechIntro/assets/images/0126-01.jpg

 src/books/UAVTechIntro/assets/images/0127-02.jpg

 src/books/UAVTechIntro/assets/images/0127_01.jpg

 src/books/UAVTechIntro/assets/images/0131-01.jpg

 src/books/UAVTechIntro/assets/images/0132-03.jpg

 src/books/UAVTechIntro/assets/images/0133-02.jpg

 src/books/UAVTechIntro/assets/images/0133_01.jpg

 src/books/UAVTechIntro/assets/images/0134-01.jpg

 src/books/UAVTechIntro/assets/images/0135-01.jpg

 src/books/UAVTechIntro/assets/images/0136-01.jpg

 src/books/UAVTechIntro/assets/images/0136-02.jpg

 src/books/UAVTechIntro/assets/images/0137-01.jpg

 src/books/UAVTechIntro/assets/images/0137-02.jpg

 src/books/UAVTechIntro/assets/images/0138-01.jpg

 src/books/UAVTechIntro/assets/images/0141-01.jpg

 src/books/UAVTechIntro/assets/images/0141-03.jpg

 src/books/UAVTechIntro/assets/images/0141_02.jpg

 src/books/UAVTechIntro/assets/images/0143-01.jpg

 src/books/UAVTechIntro/assets/images/0145-01.jpg

 src/books/UAVTechIntro/assets/images/0146-02.jpg

 src/books/UAVTechIntro/assets/images/0146_01.jpg

 src/books/UAVTechIntro/assets/images/0147-01.jpg

 src/books/UAVTechIntro/assets/images/0147-02.jpg

 src/books/UAVTechIntro/assets/images/0148-01.jpg

 src/books/UAVTechIntro/assets/images/0148-02.jpg

 src/books/UAVTechIntro/assets/images/0151-01.jpg

 src/books/UAVTechIntro/assets/images/0151-03.jpg

 src/books/UAVTechIntro/assets/images/0151_02.jpg

 src/books/UAVTechIntro/assets/images/0153-01.jpg

 src/books/UAVTechIntro/assets/images/0153-02.jpg

 src/books/UAVTechIntro/assets/images/0154-01.jpg

 src/books/UAVTechIntro/assets/images/0154-02.jpg

 src/books/UAVTechIntro/assets/images/0155-01.jpg

 src/books/UAVTechIntro/assets/images/0155-02.jpg

 src/books/UAVTechIntro/assets/images/0157-01.jpg

 src/books/UAVTechIntro/assets/images/0158-01.jpg

 src/books/UAVTechIntro/assets/images/0159-03.jpg

 src/books/UAVTechIntro/assets/images/0160-02.jpg

 src/books/UAVTechIntro/assets/images/0160_01.jpg

 src/books/UAVTechIntro/assets/images/0161-01.jpg

 src/books/UAVTechIntro/assets/images/0162-01.jpg

 src/books/UAVTechIntro/assets/images/0162-02.jpg

 src/books/UAVTechIntro/assets/images/0163-01.jpg

 src/books/UAVTechIntro/assets/images/0168-01.jpg

 src/books/UAVTechIntro/assets/images/0168-03.jpg

 src/books/UAVTechIntro/assets/images/0168_02.jpg

 src/books/UAVTechIntro/assets/images/0175-01.jpg

 src/books/UAVTechIntro/assets/images/0176-01.jpg

 src/books/UAVTechIntro/assets/images/Cover.jpg

 src/books/UAVTechIntro/assets/images/a1.jpg

 src/books/UAVTechIntro/assets/images/a2.jpg

 src/books/UAVTechIntro/assets/images/a3.jpg

 src/books/UAVTechIntro/assets/images/feiye.jpg

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

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

 src/books/UAVTechIntro/assets/images/tb.png

 src/books/UAVTechIntro/assets/images/yemei.png

 src/books/UAVTechIntro/assets/images/yemei01.png

 src/books/UAVTechIntro/assets/images/yemei02.png

 src/books/UAVTechIntro/assets/main.less

New file
@@ -0,0 +1,2311 @@
.UAVTechIntro-book {
    width: 100%;
    height: 100%;

    // 自定义内容
    .page-box {
        box-sizing: border-box;
        min-height: 1128px;
        margin-bottom: 20px;
        box-shadow: 0 3px 6px 1px #00000029;
        background-color: #fff;
    }

    .foreword {
        font-family: 'FZLTZHJW';
        font-weight: 300;
        font-size: 1.4em;
        color: #6E85AF;
        margin-top: 0;
        margin-bottom: 0;
        text-indent: 0em;
        line-height: 30px;
    }

    .topBorder {
        width: 120px;
        border-top: 1px solid #6E85AF;
        border-bottom: 1px solid #6E85AF;
        height: 2px;
    }

    .bottomBorder {
        width: 220px;
        border-top: 1px solid #6E85AF;
        border-bottom: 1px solid #6E85AF;
        height: 2px;
    }

    input[type="radio"] {
        accent-color: #6E85AF !important;
        cursor: pointer;
    }

    input[type="checkbox"] {
        accent-color: #6E85AF !important;
        cursor: pointer;
    }


    .wh-no {
        white-space: nowrap;
    }

    .c-g {
        color: green;
    }

    .c-r {
        color: red;
    }

    .t-right {
        text-align: right;
    }

    .mr-0 {
        margin: 0;
    }

    .mt-10 {
        margin-top: 10px !important;
    }

    .mt-20 {
        margin-top: 20px !important;
    }

    .table-pad {
        padding: 1em 0.8em !important;
    }


    .mt-30 {
        margin-top: 30px;
    }

    .mb-30 {
        margin-bottom: 30px !important;
    }

    .ml-35 {
        margin-left: 35px;
    }

    .ma-l {
        margin-left: 8%;
    }

    .ma-0 {
        margin: 0% !important;
    }

    .pd-5 {
        padding: 0 5px;
    }

    .w100 {
        width: 100%;
    }

    .w80 {
        width: 80%;
    }

    .w70 {
        width: 70%;
    }

    .w25 {
        width: 25%;
    }

    .w20 {
        width: 20%;
    }


    .fz-11 {
        font-size: 11px !important;
    }

    .fz-13 {
        font-size: 13px !important;
    }

    .fz-14 {
        font-size: 14px !important;
    }

    .fz-15 {
        font-size: 15px !important;
    }

    .fz-16 {
        font-size: 16px !important;
    }

    .fz-18 {
        font-size: 18px !important;
    }

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

    .pt-20 {
        padding-top: 20px;
    }

    .td-0 {
        text-indent: 0em !important;
    }

    .c-p {
        cursor: pointer;
    }

    .fl {
        display: flex;
    }

    .ju-cn {
        justify-content: center;
    }

    .ju-ev {
        justify-content: space-evenly;
    }

    .jc-sb {
        justify-content: space-between;
    }

    .jc-fs {
        justify-content: flex-start;
    }

    .fw-w {
        flex-wrap: wrap;
    }

    .fd-c {
        flex-direction: column;
    }

    .fd-r {
        flex-direction: row-reverse;
    }

    .al-c {
        align-items: center;
    }

    .h-25 {
        height: 25.59px;
    }

    .al-fe {
        align-items: flex-end;
    }

    .ac-f {
        align-content: flex-end;
    }

    .jc-fe {
        justify-content: flex-end;
    }

    .jc-c {
        justify-content: center;
    }

    .jc-sa {
        justify-content: space-around
    }

    .mr-70 {
        margin-right: 70px;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .pad-t-55 {
        padding-top: 55px;
    }

    .ma-t-30 {
        margin-top: 30px;
    }

    .ma-t-20 {
        margin-top: 20px;
    }

    .pad-l-60 {
        padding-left: 60px;
    }

    .pad-l-80 {
        padding-left: 80px;
    }

    .pad-r-80 {
        padding-right: 80px;
    }

    .mb-45 {
        margin-bottom: 45px;
    }

    .mb-20 {
        margin-bottom: 20px !important;
    }

    .mb-10 {
        margin-bottom: 10px !important;
    }

    .pNum {
        font-size: 18px !important;
        font-style: italic;
        font-family: "kaiti";
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }

    .p-Num {
        background-color: #92B0D5;
        color: #fff;
        height: 100%;
        padding-right: 8px;
        font-size: 18px;
        font-style: italic;
        font-family: "kaiti";
        display: flex;
        align-items: center;
    }

    /*行内图*/
    .h-pic {
        height: 1.6em;
        vertical-align: middle;
    }



    .cloud {
        padding: 0px 8px 0 0 !important;
    }

    .headerImg {
        width: 30px;
    }

    .headerText {
        font-size: 12px;
        padding: 0 8px;
        color: #B1BEDE;
    }

    .headerNumber {
        color: #231F20;
        font-size: 12px;
        padding: 0 8px;
        border-left: 1px solid #231F20;
    }

    .header-left-Number {
        color: #728DC0;
        font-size: 14px;
        padding-right: 8px;

        .span-box-title {
            margin: 0 5px;
            display: inline-block;
            width: 8px;
            height: 8px;
            background-color: #728DC0;
        }
    }

    .header-left-text {
        margin-left: 8px;
        font-size: 12px;
        text-align: right;
    }

    .header-right-Box {
        color: #728DC0;
        font-size: 14px;
        padding-right: 8px;

    }

    .header-right-Number {
        background-color: #92B0D5;
        color: #fff;
        font-size: 14px;
        padding: 3px 0;
        padding-right: 8px;
        display: flex;
        align-items: center;

        img {
            height: 26px;
        }
    }

    .header-right-title {
        padding-left: 20px;
        border-radius: 10px 0px 0px 10px;
    }

    .header-right-last {
        height: 100%;
        font-size: 18px;
        background-color: #B799B6;
        padding-left: 20px;
    }

    .header-right-end {
        height: 100%;
        font-size: 18px;
        background-color: #738DC0;
        padding-left: 50px;
    }


    table {
        border-color: none !important;
    }

    .table-th-bc {
        background-color: #8898c7;
        color: #fff;
        text-align: center;
        text-wrap: nowrap;


        th {
            font-weight: 400;
            font-family: "方正宋体";
        }
    }

    td {
        padding: 3px;
        line-height: 20px;
    }

    .table-tr-bc {
        background-color: #ede8f1;
        color: #000;
        font-family: "方正仿宋";
    }

    .table-tr-bc-one {
        background-color: #c7d0e6;
        color: #000;
        font-family: "方正仿宋";
    }

    .table-textarea {
        background-color: transparent;
        border: none;
        font-size: 14px;
        width: 40px;
        font-family: "Times New Roman", "宋体";
        resize: none;

        &:focus {
            outline: none;
        }
    }

    .textarea-box {
        width: 88%;
        margin-left: 2em;
        overflow: auto;
        word-break: break-all;
        resize: none;
        border: 1px solid #738DC0;
        border-radius: 5px;
        background-color: rgba(255, 255, 255, 0);
    }

    .input-box {
        border: none;
        border-bottom: 1px solid #333;
        background-color: rgba(255, 255, 255, 0);
        outline: none;
    }


    .b0 {
        border: 0;
    }

    .task {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #5192C6;
    }

    .task2 {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #F89C1C;
    }

    .task3 {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #448D9C;
    }

    .task4 {
        width: 16%;
        margin-bottom: 5em;
        margin-top: 0;
        border-top: 0.7em solid #9EAA60;
    }

    .p-odd {
        padding-right: 1%;
    }

    .p-even {
        padding-left: 1%;
    }

    .p-continued {
        text-align: right;
        font-size: 14px;
        margin-bottom: 10px;
    }

    .img-float {
        width: 310px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;

        img {
            width: 100%;
        }

        p {
            margin: 0;
        }
    }

    .img-rights {
        width: 310px;
        float: right;
        height: auto;
        margin: auto;
        margin-left: 20px;

        img {
            width: 100%;
        }

        p {
            margin: 0 !important;
        }
    }

    .w430 {
        width: 430px;
    }

    .w395 {
        width: 395px;
    }

    .w350 {
        width: 350px;
    }

    .w290 {
        width: 290px;
    }

    .w280 {
        width: 280px;
    }

    .w275 {
        width: 275px;
    }

    .w270 {
        width: 270px;
    }

    .w250 {
        width: 250px;
    }

    .w230 {
        width: 230px;
    }

    .w220 {
        width: 220px;
    }

    .w200 {
        width: 200px;
    }

    .w180 {
        width: 180px;
    }

    .w150 {
        width: 150px;
    }

    .w115 {
        width: 115px;
    }

    .pdf-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;

        p {
            margin: 0;
            margin-right: 10px;
        }

        .pdf-con {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 10px 0;
            box-sizing: border-box;
            border-radius: 10px;

            .pdf-view {
                min-width: 160px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 0.15em dashed #895B2E;
                margin-right: 15px;
                padding: 0 15px;
                border-radius: 5px;
                margin-top: 15px;

                span {
                    font-size: 14px;
                    text-align: center;
                    font-family: 'FZLTXIHJW';
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    svg {
                        fill: #895B2E;
                    }
                }

                span:nth-child(2) {
                    padding-top: 5px;
                    box-sizing: border-box;
                }

                span:hover {
                    color: #895B2E;
                    cursor: pointer;
                    text-decoration: underline;
                    -webkit-user-select: none;
                    /* Safari 3.1+ */
                    -moz-user-select: none;
                    /* Firefox 2+ */
                    -ms-user-select: none;
                    /* IE 10+ */
                    user-select: none;
                    /* 标准语法 */
                }
            }
        }

        .pdf-con-15 {
            margin-top: -20px;
        }
    }

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

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


    .link-float {
        width: 150px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;
    }

    .imgBox-003 {
        width: 100%;
        height: 280px;
        margin-bottom: 18px;
    }


    .imgBox {
        display: flex !important;
        flex-direction: column-reverse !important;
        position: relative !important;

        .img {
            margin: 0 !important;
            font-size: 14px !important;
            position: absolute !important;
            left: 50% !important;
            transform: translateX(-50%);
            bottom: -2% !important;
        }

        img {
            height: 80%;
        }
    }

    // 题目

    .textarea-main {
        background-color: transparent;
        max-width: 95%;
        min-width: 95%;
        outline: none;
    }

    .textarea-focused {
        border-color: #5192c6 !important;
        box-shadow: #5192c6 !important;
    }

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

        &:focus {
            outline: none;
        }
    }

    .btn-border {
        border-radius: 6px;
        border-color: #5192C6;
    }

    .btn-w {
        cursor: pointer;
        font-size: 14px;
        border-width: 1px;
        width: 80px;
        height: 30px;
        background-color: #fff;

        &:hover {
            background-color: #5192C6;
            color: #fff;
        }
    }

    .parimary-btn {
        cursor: pointer;
        min-width: 80px;
        height: 30px;
        font-size: 14px;
        margin-left: 5px;
        background-color: #5192C6;
        border-color: #5192C6;
        border-width: 1px;
        color: #fff;
        border-radius: 6px;

        &:hover {
            background-color: #a1afc8;
            border-color: #a1afc8;
        }
    }

    .event-header-text-bc {
        background-color: #DED5E8;
    }

    //视频  
    .video-box-cover {
        border: 1px dashed #6E85AF;
        padding: 2% 2%;
    }

    .video-box {
        margin: 20px 0 20px 0;
        border: 1px dashed #6E85AF;
        padding: 2% 2%;
    }

    .video-box-left {
        margin: 20px 8% 20px 0;
        border: 1px dashed #6E85AF;
        padding: 2% 2%;
    }

    .videoname {
        display: flex;
        justify-content: center;
    }

    .collect-btn {
        cursor: pointer;
        width: 20px;
        height: 20px;
        margin-left: 10px;
        margin-top: 0.8%;
    }

    .collect-btn1 {
        cursor: pointer;
        width: 10px;
        height: 10px;
        margin-left: 10px;
        margin-top: 0.8%;
    }

    .unitImg {
        position: relative;
        z-index: 1;
    }

    .unitBox {
        z-index: 99;
        position: absolute;
        top: -5px;
        left: 40px;
    }

    .unit2Box {
        z-index: 99;
        position: absolute;
        top: -200px;
        left: 40px;
    }

    .unitGraphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #5192C6;
        border-radius: 50%;
        margin-right: 15px;
    }

    .unit2Graphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #F89C1C;
        border-radius: 50%;
        margin-right: 15px;
    }

    .unit3Graphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #448D9C;
        border-radius: 50%;
        margin-right: 15px;
    }

    .unit4Graphic {
        display: inline-block;
        width: 10px;
        height: 10px;
        background-color: #9EAA60;
        border-radius: 50%;
        margin-right: 15px;
    }


    .unitText {
        color: #5192C6;
        font-size: 18px;
    }

    .unit2Text {
        color: #F89C1C;
        font-size: 16px;
    }

    .unit3Text {
        color: #448D9C;
        font-size: 16px;
    }

    .unit4Text {
        color: #9EAA60;
        font-size: 16px;
    }



    //迁移
    ul {
        list-style-type: none;
    }

    li {
        list-style-type: none;
    }

    .custom_tag2 {
        background-color: #F1BE49;
        color: #FFFFFF;
        display: inline-block;
        padding: 0.5px;
        border-radius: 1.5em;
        font-size: 1.1em;
        padding: 2px 10px 2px 10px;
        font-weight: bold;
        margin: 0;
        text-indent: 0em;
        margin-bottom: 0.5em;
    }

    .custom_tag1 {
        background-color: #35ACD6;
        color: #FFFFFF;
        display: inline-block;
        padding: 1px;
        font-size: 1.1em;
        padding: 3px 10px 3px 10px;
        font-weight: bold;
        box-shadow: 15px 0px 0px 0px #F5D83E, -15px 0px 0px 0px #F5D83E;
        margin: 0;
        text-indent: 0em;
        margin-bottom: 0.5em;
    }

    .custom_tag {
        background-color: #35509F;
        color: #FFFFFF;
        display: inline-block;
        padding: 1px;
        border-radius: 1.5em;
        font-size: 1.1em;
        padding: 10px 20px 10px 20px;
        font-weight: bold;
        box-shadow: 30px 0px 0px 0px #F5D83E;
        margin: 0;
        text-indent: 0em;
        margin-bottom: 0.5em;
    }


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

    }

    div.bodycontent-div-center {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        margin: 1em 1em 1em 1em;
        font-weight: normal;
        border-width: 1.5px;
        border-color: #dfb27d;
        padding: 1em;
    }

    img.bodycontent-divcenter-image {
        float: center;
        clear: both;
        height: 140px;
        margin: 15px;
    }

    .module_block {
        display: flex;
        font-size: 1.1em;
        position: relative;
        padding-left: 90px;
        justify-content: center;
        align-items: center;
        margin-right: 91px;
    }

    .module_block .custom1 {
        background-color: #9ACC77;
        padding: 10px 20px;
        color: #FFFFFF;
        /* position: absolute; */
        /* left:0; */
        /* top: 50%; */
        border-radius: 0.5em 0em 0em 0.5em;
        /* transform: translateY(-50%); */
    }

    .module_block .custom2 {
        background-color: #E9F3E0;
        padding: 10px 20px;
        color: #75A64E;
        font-weight: bold;
        border-radius: 0em 0.5em 0.5em 0em;
    }



    div.bodycontent-div-left1 {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        margin: 1em 1em 1em 1em;
        font-weight: normal;
        border-width: 1.5px;
        border-color: #dfb27d;
        padding: 1em;
        background-color: #F0F8FF;
    }

    div.bodycontent-div-left {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        margin: 1em 1em 1em 1em;
        font-weight: normal;
        border-width: 1.5px;
        border-color: #dfb27d;
        padding: 1em;
    }

    img.bodycontent-divright-image {
        float: right;
        clear: both;
        height: 140px;
        margin: 15px;
    }

    img.bodycontent-divleft-image {
        float: left;
        clear: both;
        height: 110px;
        margin: 15px;
    }

    .bodystyle {
        text-align: justify;
        margin: 0 12%;
        padding-bottom: 80px;
        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;
    }

    div.sgc-toc-title {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: 1em;
        text-align: center;
    }

    div.sgc-toc-level-1 {
        margin-left: 0em;
    }

    div.sgc-toc-level-2 {
        margin-left: 2em;
    }

    div.sgc-toc-level-3 {
        margin-left: 2em;
    }

    div.sgc-toc-level-4 {
        margin-left: 2em;
    }

    div.sgc-toc-level-5 {
        margin-left: 2em;
    }

    div.sgc-toc-level-6 {
        margin-left: 2em;
    }

    .imz {
        width: 100%;
        text-align: center;


    }

    .note {
        font-size: 0.85em;
    }


    .block {
        font-family: "FangSong";
        margin-top: 0.2em;
        margin-bottom: 0.2em !important;
        text-indent: 2em;
        line-height: 30px;
        font-size: 17px;
        text-align: justify;
    }

    .block1 {
        text-align: center;
    }

    .block2 {
        line-height: 25px;
    }

    .block3 {
        line-height: 20px;
    }


    .img {
        font-weight: 400;
        font-family: 'FZLTXIHJW';
        text-align: center;
        font-size: 0.7em;
        margin-left: 0%;
        margin-right: 0%;
        text-indent: 0em;
    }

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


    p {
        font-family: "方正宋体";
        margin-top: 0.2em;
        margin-bottom: 0.2em !important;
        text-indent: 2em;
        line-height: 30px;
        text-align: justify;
    }

    .t-al {
        text-align-last: justify;
    }


    .cover {
        width: 100%;
        padding: 0px;
    }

    .center {
        text-align: center;
        margin-left: 0%;
        margin-right: 0%;
        text-indent: 0em;
    }

    .center-ss {
        text-align: center;
        color: #EF8472;
        font-weight: bold;
        margin-left: 0%;
        margin-right: 0%;
        text-indent: 0em;
    }

    .left {
        text-indent: 0em;
        margin: 0 !important;
        line-height: 20px;
    }

    .left2 {
        font-size: 1.3em;
        text-indent: 0em;
        font-weight: bold;
        margin-left: 0%;
        margin-right: 0%;
    }

    .left3 {
        margin: 0 !important;
        line-height: 20px;
    }

    .right {
        text-align: right;
        margin-left: 0%;
        margin-right: 0%;
    }

    .left1 {
        text-indent: 0em;
        margin-left: 0%;
        margin-right: 0%;
    }

    .center1 {
        text-align: center;
        margin-left: 0%;
        margin-right: 0%;
        font-size: 1.2em;
        text-indent: 0em;
        font-weight: bold;
    }

    .right1 {
        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: 'FZLTZHJW';
        line-height: 2em;
        font-weight: bold;
        color: #FFFFFF;
        font-size: 2em;
        margin-bottom: 1em;
        margin-top: 1em;
    }

    .h1-bj {
        background-color: #6E85AF;
        padding: 0.3em 0.5em 0.3em 0.5em;
        margin-left: -0.2em;

    }

    .h1-bk {
        box-shadow: inset 0em 0.1em 0em 0em #C3C2C0;
        border-top-style: solid;
        border-right-style: solid;
        border-bottom-style: solid;
        border-left-style: none;
        padding: 0.1em 0.8em 0.1em 0.5em;
        font-weight: bold;
        color: #000000;
        margin-bottom: 1em;
        margin-top: 1em;

    }

    h1.jz {
        text-align: center;
        text-indent: 0em;
    }



    .front {
        font-family: 'FZLTZHJW';
        font-weight: 400;
        font-size: 1.1em;
        color: #000;
        margin-top: 1.5em;
        margin-bottom: 3em;
        text-indent: 0em;
        text-align: center;
    }

    h2 {
        font-family: 'FZLTZHJW';
        color: #6A80B9;
        font-weight: 400;
        text-align: left;
        font-size: 25px;
        margin-top: 2em;
        margin-bottom: 1.5em;
        margin-left: 2.5em;
    }

    h3 {
        font-family: 'FZLTZHJW';
        font-weight: 100;
        text-align: left;
        font-size: 1em;
        color: #EEAF68;
        margin-top: 2em;
        margin-bottom: 1.5em;
        text-indent: 0em;
        margin-left: 0em;
    }

    h4 {
        font-family: 'FZHTJW';
        color: #697DB8;
        font-weight: 100;
        margin-bottom: 0.5em;
        margin-top: 1em;
        font-size: 1.1em;
        text-indent: 0em;
    }

    h5 {
        font-family: 'FZHTJW';
        color: #EEAF68;
        margin-bottom: 0.5em;
        margin-top: 1em;
        font-size: 1.05em;
        text-indent: 2em;
        font-weight: 100;
    }

    h6 {
        font-weight: 100;
        font-family: "楷体";
        color: #000000;
        margin-bottom: 0.2em;
        margin-top: 0.2em;
        font-size: 1.15em;
        text-indent: 2em;
    }

    .zt-h6 {

        font-family: 'FZHTJW';
        color: #65C097;
        margin-bottom: 0.5em;
        margin-top: 1em;
        font-size: 1.15em;
        text-indent: 2em;
    }

    .bb {

        font-family: "cnepub", serif;
        font-family: 'FZHTJW';
        color: #66CCCC;
        font-size: 1.1em;
        margin-top: 10px;
        text-indent: 2em;
        margin-bottom: 10px;
        border-bottom: 5px dotted #F4C388;
        margin-left: 2em;
        margin-bottom: 0.5em;
        text-indent: 0em;
    }

    .u {

        text-decoration: underline;
    }

    .img-0 {
        width: 100%;
    }

    .img-a {
        width: 95%;
    }

    .img-b {
        width: 70%;
    }

    .img-c {
        width: 60%;
    }

    .img-d {
        width: 50%;
    }

    .img-e {
        width: 45%;
    }

    .img-f {
        width: 40%;
    }

    .img-g {
        width: 30%;
    }

    .img-h {
        width: 20%;
    }

    .img-i {
        width: 10%;
    }

    .img-j {
        width: 5%;
    }

    .img-k{
        width: 2%;
    }

    .img-zt {
        height: 6em;
        margin-top: -1.5em;
        margin-bottom: -0.4em;
        margin-left: 15%;
    }

    .inline {
        height: 1em;
        margin-bottom: -0.3em;
    }

    .inline0 {
        height: 3em;
    }

    .inline0-1 {
        height: 2em;
    }

    .inline2 {
        height: 2.3em;
    }

    .img-qj {
        height: 7.5em;
        margin-bottom: -3.4em;
        margin-right: 0.5em;
    }


    .bk-bwh {
        background-color: #DFEBF7;
        font-size: 1.2em;
        padding: 25px;
        border: 4px dotted #197ABF;

        .block {
            font-family: "kaiti";
        }
    }

    .zt-ls1 {
        color: #000;
        font-size: 16px;
        font-weight: bold;
    }

    span.lsyq-1 {
        background-color: #0082D4;
        padding: 0.2em 0.4em 0.2em 0.4em;
        border-radius: 1.2em;
        margin-right: 0.5em;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.3em;
    }

    span.hsyq-1 {
        background-color: #FFB7D4;
        padding: 0.2em 0.4em 0.2em 0.4em;
        border-radius: 1.2em;
        margin-right: 0.5em;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.3em;

    }

    .zt-hs1 {
        font-weight: bold;
        color: #F0855B;
        font-size: 1.2em;
    }

    .h1-zt1 {
        padding: 5px 25px 5px 25px;
        border-radius: 10px 0px 0px 10px;
        background-color: #5392C7;
        font-size: 1.2em;
        color: #FFFFFF;
    }

    .h1-zt2 {
        padding: 10px;
        background-color: #B1DDE0;
        margin-right: 2em;
        color: #FFFFFF;
        padding: 5px 50px 5px 25px;
        border-radius: 0px 5px 80px 0px;
        font-size: 1.2em;
    }


    .bk {
        border: 0.15em dotted #FAAD70;
        padding: 1em;
        margin-bottom: 2.5em;
        margin-top: 2.5em;
        border-radius: 0em;
        position: relative;

    }

    .bk-img {
        border: 0.15em dotted #FAAD70;
        padding: 3em 3em;
        margin-bottom: 2em;
        margin-top: 2em;
        border-radius: 0em;
        position: relative;
    }

    p.bj1-qjms {
        background-color: #fff;
        color: #FAAD70;
        font-weight: bold;
        border-radius: 1.5em;
        margin-left: 0em;
        text-align: center;
        text-indent: 0em;
        position: absolute;
        top: -19px;
    }

    .span-box {
        display: inline-block;
        width: 8px;
        height: 8px;
        background-color: #FAAD70;
    }

    .span-text {
        font-size: 16px;
        font-weight: 100;
        padding: 0em 0.5em 0em 0.5em;
    }


    .bj {
        background-color: #E1E7F3;
        padding: 0.2em 0.8em 0.2em 0.8em;
        margin-bottom: 2em;

    }

    span.bj1 {
        background-color: #FFFFFF;
        padding: 0.2em 0.05em 0.2em 0.05em;
        font-size: 1.1em;
        font-weight: bold;
        color: #EFAA71;
    }

    span.bj2 {
        background-color: #6E85AF;
        padding: 0.2em 0.5em 0.2em 0.5em;
        font-size: 1.1em;
        font-weight: bold;
        border-radius: 1em;
        color: #FFFFFF;
        box-shadow: 0.3em 0.3em 0px 0px #C3C2C0;
    }

    div.bk2 {
        border: 3px solid #93A8D5;
        padding: 0.2em 1em 0.2em 1em;
        border-radius: 1em;
        margin-top: 2em;
        margin-bottom: 1.5em;
    }

    .zt-zysx {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        background-color: #24b8bc;
        border-radius: 1.5em;
        color: #FFFFFF;
        font-weight: bold;
        padding: 4px;
        font-size: 1.2em;
        box-shadow: 0.2em 0.2em 0px 0px #c1e3e4;
    }

    .zt-zysx1 {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        background-color: #96A7D5;
        border-radius: 1.5em;
        color: #FFFFFF;
        font-weight: 100;
        padding: 4px;
        font-size: 1em;
    }

    .zt-zysx2 {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        background-color: #0071BD;
        font-size: 1.2em;
    }

    .zt-1 {
        color: #6F84AF;
        font-weight: bold;
        font-size: 1.1em;

    }

    div.bj3 {
        background-color: #DED5E8;
        padding: 1em 1em 1em 1.5em;
        border-radius: 1em;
        margin-bottom: 0.1em;
        margin-left: -0.6em;
        margin-right: -0.6em;
        margin-top: -0.5em;

    }

    div.bj3 p {
        font-family: 'FangSong' !important;
    }

    span.bj3-xyx {
        background-color: #92B03D;
        color: #FFFFFF;
        border-radius: 5px;
        padding: 5px 10px 5px 10px;
        font-size: 1em;
        font-weight: bold;

    }

    div.bj3-xyx {
        position: absolute;
        top: -15px;
        left: -25px;

    }



    span.bj3-xyx {
        background-color: #92B03E;
        color: #FFFFFF;
        border-radius: 1.5em;
        padding: 5px 20px 5px 20px;
        font-size: 1em;
        font-weight: bold;

    }

    div.bk1 {
        margin-top: -2em;
        margin-left: -1.6em;
    }


    .bk-video {
        padding: 10px 5px;
        margin-bottom: 2em;
        margin-top: 0;
        border-radius: 0em;
        position: relative;
    }

    p.bj4-qjms {
        background-color: #fff;
        color: #92A1CB;
        font-size: 20px;
        font-weight: bold;
        border-radius: 1.5em;
        margin-left: 0em;
        text-align: center;
        text-indent: 0em;
        position: absolute;
        top: -32px;
    }

    .span-text-video {
        padding: 0em 0.15em 0em 0.3em;
    }

    .span-svg {
        padding: 0.3em 0.15em 0em 0.3em;
    }

    .bold {
        font-size: 1.1em;
        font-weight: 800;
        color: #677fb7;
    }

    .quotation {
        font-family: "kaiti";
        font-size: 1em;
        font-weight: 400;
    }


    .ts-1 {
        font-weight: bold;
    }

    .zt-h4 {
        background-color: #F0BD40;
        padding: 10px;
        color: #FFFFFF;
        margin-left: -2em;
        border-radius: 1.5em;
    }

    .qyls-h4 {
        font-family: "HiFont Hei GB";
        color: #6CB26C;
        font-weight: bold;
        padding: 0.2em;
        text-indent: 0em;
        margin-left: 0%;
    }

    .bj4 {
        background-color: #FFDEB5;
        padding: 20px;
        border-radius: 0.1em;
        margin-bottom: 2em;
        margin-top: 2.5em;
    }

    span.bj4-xyx {
        background-color: #FA9D1A;
        color: #FFFFFF;
        border-radius: 1.5em;
        padding: 5px 20px 5px 20px;
        font-size: 1em;
        font-weight: bold;

    }

    div.bj4-xyx {
        margin-top: -3em;
        margin-bottom: 1.5em;
        margin-left: -2.5em;
    }

    .bj5 {
        background-color: #CFCBDC;
        padding: 20px;
        border-radius: 1em;
        margin-bottom: 1em;
        margin-top: 2.5em;
    }

    span.bj5-xyx {
        background-color: #FFFFFF;
        color: #7D719F;
        border-radius: 0.5em 0.5em 0em 0em;
        padding: 5px 20px 5px 20px;
        font-size: 1em;
        font-weight: bold;

    }

    div.bj5-xyx {
        margin-top: -4em;
        margin-bottom: 1.5em;
        margin-left: -1.5em;
    }


    div.bj6 {
        margin-top: 1.6em;
        margin-bottom: -2.2em;
        margin-left: -1.3em;
    }


    span.bj6-xyx {
        background-color: #7B72A1;
        border-radius: 0.5em 0.5em 0em 0em;
        padding: 10px 20px 10px 20px;
        font-size: 1em;
        font-weight: bold;

    }

    .zt-1 {
        color: #6F84AF;
        font-weight: bold;
        font-size: 1.1em;

    }


    .zt-lvs1 {
        color: #95B321;
    }


    .zt-cs {
        color: #FCA01B;
    }


    .bk3 {
        background-color: #E9F0E9;
        border: 2px dotted #C9DBCD;
        padding: 3px 10px 3px 10px;
        margin-top: 2em;
        margin-bottom: 1em;
    }

    .zysx {
        margin-top: -1.2em;
        margin-left: -2em;

        p {
            margin: 0 !important;
        }
    }

    .zt-zysx2 {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        background-color: #0071BD;
        font-size: 1.2em;
    }

    span.bk1 {
        border: 1px solid #000000;
        margin: 1em 1em 1em 1em;
    }

    .cs1 {
        color: #E9AB7A;
        font-weight: bold;
    }

    .bk4 {
        border: 2px dashed #9FA8CF;
        padding: 3px 10px 3px 10px;
        margin-top: 2em;
        margin-bottom: 1em;
    }


    .bk5 {
        margin-top: -1.4em;
        margin-bottom: 0.5em;
        margin-left: -1.6em;
    }

    .h3-zt1 {
        padding: 0.26em 0.7em;
        background-color: #EEAF68;
        color: #FFFFFF;
    }

    .h3-bk {
        border: 1px solid #EEAF68;
        margin: 5em 5em 5em 0em;
        padding: 0.2em 1em 0.2em 0.4em;
        border-radius: 0em 1em 1em 0em;
    }


    .inline1 {
        height: 2em;
        margin-top: 0.5em;
        margin-bottom: -0.5em;
    }


    .tp-3 {
        margin-top: -4.5em;
        margin-bottom: 1em;
    }


    .rwmb-4 {
        height: 2.5em;
    }


}


.custom-dialog {
    overflow: hidden !important;

    .el-dialog__body {
        padding: 0;
    }

    .el-dialog__header {
        background-color: rgba(0, 0, 0, 0.8);

        .header_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-weight: 900;
            font-size: 16px;
            font-family: 'FZLTXIHJW';

            span:nth-child(2):hover {
                cursor: pointer;
            }
        }

        .el-dialog__title,
        .el-dialog__headerbtn .el-dialog__close {
            color: #fff;
            font-weight: 900;
            font-size: 16px;
            font-family: 'FZLTXIHJW';
        }
    }
}

.header_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // color: #fff;
    font-weight: 900;
    font-size: 16px;
    font-family: 'FZLTXIHJW';

    span:nth-child(2):hover {
        cursor: pointer;
    }
}

// 表格样式
table {
    border-collapse: collapse; //表格的边框合并，如果相邻，则共用一个边框。
    border-spacing: 0px; //设置行与单元格边框的间距。
}

@font-face {
    font-family: '方正宋体';
    src: url('./Fonts/FZSSK.TTF');
}

// @font-face {
//     font-family: 'FZLTXIHJW';
//     src: url('./Fonts/FZLTXIHJW.ttf');
// }

// @font-face {
//     font-family: 'FZHTJW';
//     src: url('./Fonts/FZHTJW.ttf');
// }

// @font-face {
//     font-family: 'FANGSONG';
//     src: url('./Fonts/fangSong.ttf');
// }

// @font-face {
//     font-family: 'FANGZHENG';
//     src: url('./Fonts/fangZheng.ttf');
// }

// @font-face {
//     font-family: 'ZHUNYUAN';
//     src: url('./Fonts/zhunyuan.ttf');
// }

// @font-face {
//     font-family: 'ZHONGDENGXIAN';
//     src: url('./Fonts/zhongdengxian.ttf');
// }

// @font-face {
//     font-family: 'BOYA';
//     src: url('./Fonts/boYa.ttf');
// }


.dialogQuestion {
    background-color: #6E85AF;
    height: 80px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;

    span {
        color: #fff;
        font-size: 20px;
        padding: 0 40px 0 20px;

    }
}

// 隐藏页面
.hidePage {
    min-height: 0 !important;
    height: 0 !important;
    box-shadow: none !important;
}


.pdfModal {
    width: 100%;
    height: 90vh;

    .pdfBox-component {
        width: 100%;
        height: 100%;
        position: relative;

        .preview {
            width: 100%;
            height: 100%;

            .imageBox {
                height: calc(100% - 30px);
                overflow-x: hidden;
                overflow-y: auto;
                background: #ccc;
                box-sizing: border-box;
            }

            .imageBox:hover {
                cursor: zoom-in !important;
            }

            ::v-deep .el-dialog__header {
                background-color: rgba(0, 0, 0, 0.8);

                .header_title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #fff;
                    font-weight: 900;
                    font-size: 16px;
                    font-family: 'FZLTXIHJW';

                    span:nth-child(2):hover {
                        cursor: pointer;
                    }
                }

                ::v-deep .el-dialog__title,
                ::v-deep .el-dialog__headerbtn .el-dialog__close {
                    color: #fff;
                    font-weight: 900;
                    font-size: 16px;
                    font-family: 'FZLTXIHJW';
                }
            }

            .bottom_tool {
                height: 30px;
                background-color: rgba(0, 0, 0, 0.8);
                display: flex;
                justify-content: flex-end;
                align-items: center;

                svg {
                    margin-right: 15px;
                    fill: #d1d1d1;
                }

                svg:hover {
                    fill: #fff;
                    cursor: pointer;
                }
            }
        }

        .notBox {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(100% - 30px);
            min-height: 300px;
        }
    }
}

.custom-dialog {
    overflow: hidden !important;

    .el-dialog__body {
        padding: 0;
    }

    .el-dialog__header {
        background-color: rgba(0, 0, 0, 0.8);

        .header_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-weight: 900;
            font-size: 16px;
            font-family: 'FZLTXIHJW';

            span:nth-child(2):hover {
                cursor: pointer;
            }
        }

        .el-dialog__title,
        .el-dialog__headerbtn .el-dialog__close {
            color: #fff;
            font-weight: 900;
            font-size: 16px;
            font-family: 'FZLTXIHJW';
        }
    }
}

.examination {
    height: calc(100% - 50px);
    overflow-x: hidden;
    overflow-y: auto;
    box-sizing: border-box;
}


.header_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // color: #fff;
    font-weight: 900;
    font-size: 16px;
    font-family: 'FZLTXIHJW';

    span:nth-child(2):hover {
        cursor: pointer;
    }
}


.custom-dialog .el-dialog__header {
    background-color: #6E85AF !important;
}

/* 媒体查询做基础响应式布局 */

@media screen and (max-width: 1024px) {

    .custom-dialog {
        .el-dialog {
            width: 90vw !important;
        }
    }
}

@media screen and (max-width: 800px) {


    .custom-dialog {
        .el-dialog {
            width: 90vw !important;
        }
    }
}

@media (max-width: 660px) {
    .UAVTechIntro-book {
        .header-right-Number {
            font-size: 9px;

            img {
                height: 16px;
            }
        }

        .header-left-Number {
            font-size: 9px;
        }

        .pad-r-80 {
            padding-right: 10px;
        }

        .pad-l-80 {
            padding-left: 10px;
        }

        h1 {
            font-size: 1em;
        }

        h2 {
            font-size: 0.9em;
            margin-top: 1.8em;
            margin-bottom: 1.5em;
            margin-left: 2.5em;
        }

        .rwmb-4 {
            margin-top: 1.5em;
            height: 1.5em;
        }

        .header-right-last {
            font-size: 10px;
        }

        .header-right-end {
            font-size: 10px;
        }

        .p-Num {
            font-size: 12px;
        }

        .mr-70 {
            margin-right: 10px;
        }

        /* 分页padding */
        .padding-93 {
            padding: 0 20px;
        }

        .padding-102 {
            padding: 0 20px;
        }


        .img-float {
            width: 130px;
        }

        .img-rights {
            width: 130px;
        }

        .btn-w {
            width: 42px;
        }

        .unitText {
            color: #5192C6;
            font-size: 10px;
        }

        .unit2Text {
            color: #F89C1C;
            font-size: 10px;
        }

        .wh-no {
            white-space: wrap;
        }

        td {
            padding: 5px 10px;
        }
    }
}

@media (min-width: 660px) {
    .UAVTechIntro-book {
        .padding-93 {
            padding: 0 93px 0px 93px;
        }

        .padding-102 {
            padding: 0 102px 0 102px;
        }
    }
}

::-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;
}

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

New file
@@ -0,0 +1,2048 @@
<template>
    <div class="chapter" num="2">
        <!-- 1页 -->
        <div class="page-box" page="7">
            <div v-if="showPageList.indexOf(7) > -1">
                <ul class="fl al-c jc-fe mr-70 pad-t-55 mb-45">
                    <li class="headerText pNum">1</li>
                    <img class="headerImg mr-10" src="../../assets/images/yemei.png" alt="" />
                </ul>
                <div class="bodystyle">
                    <h2 id="b001">项目一　无人机基础知识</h2>
                    <div class="tp-3">
                        <p class="tl-f td-0">
                            <img class="rwmb-4" alt="" src="../../assets/images/tb.png" />
                        </p>
                    </div>
                    <div class="bk">
                        <p class="bj1-qjms fl al-c">
                            <span class="span-box"></span><span class="span-text">目标领航</span><span
                                class="span-box"></span>
                        </p>
                        <p class="fz-15">
                            小周作为无人机企业的一名实习员工，近期被分配到了内部的无人机的运行部门。现在小周的无人机系统已准备完成，需要首先认识各种组成部分，再学习无人机飞行安全及法规、空域知识、空中交通管制的相关内容，认识大气环境，最后对无人机进行试飞工作。我们先带着小周认识一下无人机基础知识。
                        </p>
                    </div>
                    <div class="bk-img">
                        <p class="bj1-qjms fl al-c">
                            <span class="span-box"></span><span class="span-text">学习内容</span><span
                                class="span-box"></span>
                        </p>
                        <p class="openImgBox td-0">
                            <img class="img-a" src="../../assets/images/0013-04.jpg" alt="" active="true" />
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 2页 -->
        <div class="page-box" page="8">
            <div v-if="showPageList.indexOf(8) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">2</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="content td-0"><img class="h-pic" src="../../assets/images/0014_02.jpg" alt="" /></p>
                    <p class="content td-0 mb-10 mt-20"><img class="h-pic" src="../../assets/images/0014_03.jpg"
                            alt="" /></p>
                    <div class="openImgBox">
                        <img class="img-0" src="../../assets/images/0014-04.jpg" alt="" active="true" />
                    </div>
                    <p class="td-0 mb-10 mt-20"><img class="h-pic" src="../../assets/images/0014_05.jpg" alt="" />
                    </p>
                    <p class="content">无人机系统（unmanned aircraft
                        system，UAS）由多个结构组成，包括空中系统、飞机系统、任务载荷和无人机使用保障人员。本文介绍了固定翼无人机系统、无人直升机系统和多旋翼无人机系统。不同的无人机系统具有不同的结构和特点。
                    </p>
                    <p class="td-0 mb-10 mt-20"><img class="h-pic" src="../../assets/images/0014_06.jpg" alt="" /></p>
                    <p class="td-0"><span class="bold">相关知识点：无人机系统概述</span></p>
                    <p class="content">广义上讲，无人机系统，也称远程驾驶航空器系统（remotely piloted aircraft
                        sys-tem，RPAS），是指由一架无人机、相关的遥控站、所需的指令与控制数据链路以及批准的型号设计规定的任何其他部件组成的系统。</p>
                    <p class="content">常规的无人机系统可分为以下几类。</p>
                    <p class="quotation">1．固定翼无人机系统</p>
                    <p class="content">固定翼无人机系统一般由这几部分构成：机体结构、航电系统、动力系统和地面控制站。</p>
                    <p class="content">
                        固定翼无人机是一种由动力装置产生前进的推力或拉力，由机体上固定的机翼产生升力，在大气层内飞行的重于空气的无人驾驶航空器。它一般包括机翼、机身、尾翼和起落装置等（图1.1.1）。</p>
                    <p class="content">机翼的主要功能是产生升力，以支持飞机在空中飞行，同时也起到一定的稳定和操作用途。</p>
                </div>
            </div>
        </div>
        <!-- 3页 -->
        <div class="page-box" page="9">
            <div v-if="showPageList.indexOf(9) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">3</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <div class="center openImgBox">
                        <img class="img-b" src="../../assets/images/0015-01.jpg" alt="" active="true" />
                        <p class="center img">图1.1.1　一款典型的固定翼无人机</p>
                    </div>
                    <p class="content">机身的主要功能是装载各种设备，将飞机其他部件（如机翼和动力装置）连接成一个整体，以保持其整体气动性。</p>
                    <p class="content">
                        尾翼包括水平尾翼和垂直尾翼。水平尾翼由固定的水平安定面和可动的升降舵组成。垂直尾翼包括固定的垂直安定面和可动的方向舵。尾翼的作用是操纵飞机俯仰和偏转，以保证飞机能平稳飞行。</p>
                    <p class="content">起落装置大多由减震支柱和机轮组成，其作用是起飞、着陆滑跑、地面滑行和停放时支撑飞机。</p>
                    <p class="quotation">2．无人直升机系统</p>
                    <p class="content">无人直升机是具有一副或两副主旋翼，通过旋翼的倾斜、转速的调整来产生各个运动方向的力的无人驾驶航空器。</p>
                    <p class="content">无人直升机的主要结构有：机身、动力系统、旋翼、尾翼、起落架等（图1.1.2）。</p>
                    <div class="center openImgBox mb-10 mt-10">
                        <img class="img-b" src="../../assets/images/0015-02.jpg" alt="" active="true" />
                        <p class="center img">图1.1.2　无人直升机系统的主要结构示意图</p>
                    </div>
                    <p class="content">直升机按旋翼数量和布局方式的不同可分为单旋翼直升机、共轴式双旋翼直升机、纵列式双旋翼直升机、横列式双旋翼直升机和带翼式直升机等几种类型（图1.1.3）。</p>
                    <p class="content">（1）机身：无人直升机机身结构有桁架式结构、薄壁式结构和复合材料夹层结构。</p>
                    <p class="content">（2）旋翼：无人直升机旋翼结构有全铰接式、跷跷板式、柔性铰式和无轴承式四种结构。</p>
                </div>
            </div>
        </div>
        <!-- 4页 -->
        <div class="page-box" page="10">
            <div v-if="showPageList.indexOf(10) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">4</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <!-- 轮播图 -->
                    <div class="imgBox-003 openImgBox">
                        <div class="swiper-container swiper-img">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="imgBox" style="width: 100%; height: 100%">
                                        <img src="../../assets/images/0016-01-01.png" />
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="imgBox" style="width: 100%; height: 100%">
                                        <img src="../../assets/images/0016-01-02.png" />
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="imgBox" style="width: 100%; height: 100%">
                                        <img src="../../assets/images/0016-01-03.png" />
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="imgBox" style="width: 100%; height: 100%">
                                        <img src="../../assets/images/0016-01-04.png" />
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="imgBox" style="width: 100%; height: 100%">
                                        <img src="../../assets/images/0016-01-05.png" />
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                    <p class="img">（a）单旋翼直升机；（b）共轴式双旋翼直升机；（c）纵列式双旋翼直升机；（d）横列式双旋翼直升机；（e）带翼式直升机</p>
                    <p class="img">图1.1.3　直升机的类型</p>
                    <p class="content">（3）尾翼：无人直升机尾翼包括垂直安定面和水平安定面（图1.1.4）。</p>
                    <div class="center openImgBox mt-10 mb-10">
                        <img class="img-d" src="../../assets/images/0016-02.jpg" alt="" active="true" />
                        <p class="img">图1.1.4　无人直升机尾翼的结构示意图</p>
                    </div>
                    <p class="quotation">3．多旋翼无人机系统</p>
                    <p class="content">
                        多旋翼无人机是一种特殊的直升机。每个旋翼的螺旋桨桨距一般不发生改变，而是通过改变各个旋翼之间的相对转速，以改变单轴推进力的大小，从而改变运行轨迹的一种无人驾驶航空器。</p>
                    <p class="content">相对固定翼无人机和无人直升机来说，多旋翼无人机的机体结构比较简单。按形状可分为X型布局、十型布局、H型布局等（图1.1.5、图1.1.6）。</p>
                    <p class="content">目前X型布局的多旋翼无人机是最常见的。相比十型布局的多旋翼无人机来说，它的前后左右动作时加减速的电机较多，控制比较迅速、有力。</p>
                </div>
            </div>
        </div>
        <!-- 5页 -->
        <div class="page-box" page="11">
            <div v-if="showPageList.indexOf(11) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">5</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <!-- 轮播图 -->
                    <div class="imgBox-003 openImgBox">
                        <div class="swiper-container swiper-img">
                            <div class="swiper-wrapper">
                                <div class="swiper-slide">
                                    <div class="imgBox" style="width: 100%; height: 100%">
                                        <img src="../../assets/images/0017-01-01.png" />
                                    </div>
                                </div>
                                <div class="swiper-slide">
                                    <div class="imgBox" style="width: 100%; height: 100%">
                                        <img src="../../assets/images/0017-01-02.png" />
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-button-next"></div>
                            <div class="swiper-button-prev"></div>
                        </div>
                    </div>
                    <p class="img">图1.1.5　一款X型布局的四旋翼无人机</p>
                    <p class="content">十型多旋翼是最早出现的一种气动布局，只需改变少量电机转速就可实现。</p>
                    <p class="content">H型布局的多旋翼无人机的特点在于比较易于设计成水平折叠结构，看起来比X型布局的多旋翼无人机厚重，又拥有与X型布局的多旋翼无人机相当的特点，结构简单，方便控制。
                    </p>
                    <div class="center openImgBox mt-10 mb-10">
                        <img class="w80" src="../../assets/images/0017-02.jpg" alt="" active="true" />
                        <p class="img">图1.1.6　一款H型布局的四旋翼无人机</p>
                    </div>
                    <p class="td-0 mt-10 mb-10"><span class="bj2">·视频库·</span></p>
                    <div class="bk-video fl">
                        <div class="fl jc-fs fw-w">
                            <div style="width: 290px; height: auto; margin: 0 5px;"
                                v-for="(item, index) in videoDataOne.videoMd5" :key="index">
                                <video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                                    x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline=""
                                    controls controlslist="nodownload" class="video-border w100"
                                    :src="item.handleMd5"></video>
                                <div class="fl al-c jc-c">
                                    <p class="td-0" style="font-size: 12px;">{{ item.name }}</p>
                                    <el-tooltip class="item" effect="dark"
                                        :content="item.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
                                        <img :src="collectResourceList.findIndex(citem => citem.id == item.md5) > -1 ? collectCheck : collectImg"
                                            alt="" class="collect-btn1" @click="handleCollect(item)" />
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="content"><img class="h-pic" src="../../assets/images/0017_03.jpg" alt="" /></p>
                    <div v-for="(item, index) in questionData.slice(0, 3)" :key="index">
                        <p class="block">{{ index + 1 }}.{{ item.txt }}</p>
                        <p class="block" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveInputChoice" />
                            {{ citem.txt }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 6页 -->
        <div class="page-box" page="12">
            <div v-if="showPageList.indexOf(12) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">6</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <div v-for="(item, index) in questionData.slice(3, 8)" :key="index">
                        <p class="block">{{ index + 4 }}.{{ item.txt }}</p>
                        <p class="center" v-if="item.imgSrc">
                            <img class="img-c" :src=item.imgSrc alt="">
                        </p>
                        <p class="block" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveInputChoice" />
                            {{ citem.txt }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 7页 -->
        <div class="page-box" page="13">
            <div v-if="showPageList.indexOf(13) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">7</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <div v-for="(item, index) in questionData.slice(8, 12)" :key="index">
                        <p class="block">{{ index + 9 }}.{{ item.txt }}</p>
                        <p class="block" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveInputChoice" />
                            {{ citem.txt }}
                        </p>
                        <p class="center" v-if="item.imgSrc">
                            <img class="img-e" :src=item.imgSrc alt="">
                        </p>
                    </div>
                    <p class="td-0 mb-10 mt-10"><img class="h-pic" src="../../assets/images/0019_02.jpg" alt="" /></p>
                    <p class="content">通过本任务的学习，请根据自己的学习情况填写任务评价表，评分时要综合考虑小组之间的合作、沟通能力等职业素养（按自评分数40%、教师评分60%计算得分）。</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #677fb7; border-collapse: collapse" class="fz-14 img-0">
                        <tr class="img-0 table-th-bc">
                            <th>序号</th>
                            <th>课后任务</th>
                            <th>标准评价</th>
                            <th>自评分数</th>
                            <th>教师评分</th>
                        </tr>
                        <tr class="table-tr-bc">
                            <td rowspan="3" class="center">1</td>
                            <td rowspan="3" class="center">无人机系统的基本概念(40分)</td>
                            <td>无人机系统的定义及分类清晰(40分)</td>
                            <td rowspan="3" class="center">
                                <input v-model="tableData.unitOne.one" type="number" step="1" min="0"
                                    class="table-textarea" @change="setBookTableData">
                            </td>
                            <td rowspan="3" class="center">
                                <input v-model="tableData.unitOne.two" type="number" step="1" min="0"
                                    class="table-textarea" @change="setBookTableData">
                            </td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td>无人机系统的定义及分类较清晰(30分)</td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td>无人机系统的定义及分类不清晰(10分)</td>
                        </tr>
                        <tr class="table-tr-bc-one">
                            <td rowspan="3" class="center">2</td>
                            <td rowspan="3" class="center">无人机系统的分类(40分)</td>
                            <td>对无人机系统的各组成部分及其作用明确(40分)</td>
                            <td rowspan="3" class="center"><input v-model="tableData.unitOne.three" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                            <td rowspan="3" class="center"><input v-model="tableData.unitOne.four" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                        </tr>
                        <tr class="table-tr-bc-one">
                            <td>对无人机系统的各组成部分及其作用较明确(30分)</td>
                        </tr>
                        <tr class="table-tr-bc-one">
                            <td>对无人机系统的各组成部分及其作用不明确(10分)</td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td rowspan="2" class="center">3</td>
                            <td rowspan="2" class="center">团队合作(20分)</td>
                            <td>互帮互助，可以正常沟通交流(20分)</td>
                            <td rowspan="2" class="center"><input v-model="tableData.unitOne.five" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                            <td rowspan="2" class="center"><input v-model="tableData.unitOne.six" type="number" step="1"
                                    min="0" class="table-textarea" @change="setBookTableData"></td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td>互帮互助，交流较少，带有脾气(10分)</td>
                        </tr>
                    </table>
                </div>
            </div>
        </div>
        <!-- 8页 -->
        <div class="page-box" page="14">
            <div v-if="showPageList.indexOf(14) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">8</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="content td-0"><img class="h-pic" src="../../assets/images/0020_01.jpg" alt="" /></p>
                    <p class="content td-0 mb-10 mt-20"><img class="h-pic" src="../../assets/images/0014_03.jpg"
                            alt="" />
                    </p>
                    <div class="openImgBox"><img class="img-0" src="../../assets/images/0020-02.jpg" alt=""
                            active="true" />
                    </div>
                    <p class="content td-0 mb-10 mt-20"><img class="h-pic" src="../../assets/images/0014_05.jpg"
                            alt="" />
                    </p>
                    <p class="content">
                        无人机系统在运行时需要考虑许多因素，不仅受到无人机法规的制约，还需要配合无人机的空域管理，同时根据不同的飞行情况选择不同的飞行空域。本文在此将介绍无人机相关法规、空域的划分等。</p>
                    <p class="td-0 mb-10 mt-20"><img class="h-pic" src="../../assets/images/0014_06.jpg" alt="" /></p>
                    <p class="content"><span class="bold">相关知识点1：无人机法规</span></p>
                    <p class="content">
                        民用无人机法律法规是无人机应用的法律保障，它使无人机飞行、作业等有法可依。依据《中华人民共和国民用航空法》《中华人民共和国飞行基本规则》《中国民用航空空中交通管制工作规则》《通用航空飞行管制条例》等制定了无人机相关法规，如由国务院下设中国民用航空局的相关部门根据民用无人机的发展状况，制定的相关规定与办法；中国民用航空局委托“中国航空器拥有者及驾驶员协会（Aircraft
                        Owners and Pilots Asso-ciation of
                        China，AOPA-China）”制定的相关规则（如《民用无人机驾驶员管理规定》），共同构筑了生产制造、适航审定、运行管理、人员训练、人员管理、证照管理等无人机的法制基础。</p>
                    <p class="content">
                        中国航空器拥有者及驾驶员协会，成立于2004年，经国务院批准，在民政部登记注册，是国内民用航空领域第一个全国性行业协会。它是中国（含香港、澳门、台湾地区）在国际航空器拥有者及驾驶员协会（The
                        International Council of Aircraft Owner and Pilot Association，IAOPA）的唯一合法代表。</p>
                    <p class="content">无人机法规用来规范民用无人机适航性设计、生产、运行以及从业人员的训练、管理等。</p>
                </div>
            </div>
        </div>
        <!-- 9页 -->
        <div class="page-box" page="15">
            <div v-if="showPageList.indexOf(15) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">9</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <p class="content">汽车的行驶，要遵守规则，各行其道，听从指挥，否则轻者造成交通拥堵，重者引发交通事故甚至车毁人亡。可见遵守规则的重要性。无人机的飞行也一样，要遵守无人机相关法规。
                    </p>
                    <p class="content">
                        无人机的无序飞行曾经多次造成延误航班、干扰通信、损坏财物、误伤人员等事故，造成了不可估量的损失。当前我国政府为保证无人机的飞行安全，有序作业，制定了多项相关规定、办法，对无人机的飞行进行有序管理。这些规定、办法包括为什么要进行飞行管制、依据什么进行管制、如何进行管制等方面的内容，规定了什么样的无人机在什么情况下飞行必须进行空域申请、在什么情况下必须得到相关航空管制部门批准后才能飞行等。
                    </p>
                    <p class="content">民用无人机法规具有独立性、综合性、平时性、国际性等特性。</p>
                    <p class="quotation">1．独立性</p>
                    <p class="content">无人机法规的独立性是指无人机的法规自成一类，形成一个独立的法律体系。</p>
                    <p class="content">
                        无人机相关法规仅适用于民用无人机的生产、适航、运行及人员管理等，不适用于有人航空器及国家航空器。当然，独立性是在继承基础上的独立，是在联系基础上的独立。没有联系与继承的独立是不存在的。</p>
                    <p class="content">
                        民用无人机的相关法律、规章来源于民用航空法及其相关的规章制度，具有一定的继承性和从属性。例如，《低空空域管理使用规定》参考《中华人民共和国民用航空法》《中华人民共和国飞行基本规则》《通用航空飞行管制条例》以及军方的相关管理规定制定。同时，民用无人机的空域管理又有其独有属性，其管理的空域是指飞行高度在1000
                        m以下的区域，并且根据情况不同按照管制空域、报告空域、监视空域、目视飞行航线等进行了分类，所以无人机法律法规具有独立性。</p>
                    <p class="quotation">2．综合性</p>
                    <p class="content">综合性是指将不同部分、不同事物的属性合并成为一个整体的特性。</p>
                    <p class="content">无人机法规是调整无人机生产、运营及其相关领域中产生的社会关系的各种法律手段。这些手段纵横交错，法律调整方法多种多样。</p>
                    <p class="content">
                        无人机法规的综合性主要体现在涉及的法律既有民用航空的相关法律法规，又有宪法、气象法、国家安全法、民法、刑法、治安条例等方面的内容，还涉及社会关系的方方面面上，因此无人机法律法规具有将相关法规进行融合的综合性。
                    </p>
                    <p class="quotation">3．平时性</p>
                    <p class="content">
                        平时性是指无人机相关法规仅用于调整和平时期民用无人机航空活动及其相关领域产生的社会关系。如果遇战争或国家处于紧急状态，民用无人航空则要受到战时法令或紧急状态下的非常法的约束。</p>

                </div>
            </div>
        </div>
        <!-- 10页 -->
        <div class="page-box" page="16">
            <div v-if="showPageList.indexOf(16) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">10</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="quotation">4．国际性</p>
                    <p class="content">
                        国际性体现在法律法规来源的国际性上。由于民用无人机在全球范围内发展迅速，国际民航组织已经开始为无人机系统制定标准和建议措施、空中航行服务程序及指导材料，并且多个国家发布了管理规定。我国无人机法律法规的制定既参照了其他国家或国际组织的相关条文，如美国联邦航空管理局（Federal
                        Aviation Administration，FAA）颁布的107部规章等，也结合了相关的判例等。因此，无人机法律法规具有一定的国际性。</p>
                    <p class="content"><span class="bold">相关知识点2：空域知识</span></p>
                    <p class="content">
                        无人机的空域管理主要从无人机空域划设的原则、划设的依据、划设的内容，空中交通管制的依据、内容和相应条款等方面，把无人机飞行空域的使用与管理纳入法治化、正规化、统一化的管理之中，即由航空管制部门进行统一的管理。只有这样才能保证空中交通安全，保证各种航空器有序、安全运行。
                    </p>
                    <p class="content">无人机的空域是指无人机飞行的空间。目前无人机的飞行高度为0～1000
                        m。水平空间根据需要划分为管制空域、报告空域、监视空域、目视飞行航线、融合空域和隔离空域六类。</p>
                    <p class="quotation">1．管制空域</p>
                    <p class="content">管制空域是指重点目标外围5 km区域、以民航机场跑道中心点为中心的跑道两头各25 km区域和跑道两侧各10
                        km的区域。在该区域内，无人机需获得批准并持有执照方可飞行。</p>
                    <p class="quotation">2．报告空域</p>
                    <p class="content">报告空域是指通用机场和临时起降点10 km区域，且不得划设在空中禁区边缘外20 km范围内和全国重点目标外缘10
                        km范围内。在该区域内，无人机飞行必须报备飞行计划，驾驶员须持照飞行。</p>
                    <p class="quotation">3．监视空域</p>
                    <p class="content">监视空域是指位于管制空域和报告空域之外的空域。</p>
                    <p class="quotation">4．目视飞行航线</p>
                    <p class="content">目视飞行航线是指航空器处于驾驶员目视视距半径500 m，相对高度低于120 m的范围。</p>
                    <p class="quotation">5．融合空域</p>
                    <p class="content">融合空域是指有其他航空器同时运行的空域。</p>
                </div>
            </div>
        </div>
        <!-- 11页 -->
        <div class="page-box" page="17">
            <div v-if="showPageList.indexOf(17) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">11</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <p class="quotation">6．隔离空域</p>
                    <p class="content">隔离空域是指专门分配给无人机运行的空域，通过限制其他航空器的进入以规避碰撞风险。</p>
                    <p class="content"><span class="bold">相关知识点3：空中交通管制</span></p>
                    <p class="content">空中交通管制是指航空管制部门利用技术手段对无人机的飞行计划、飞行区域、飞行高度等运行情况进行管理和控制。</p>
                    <p class="quotation">1．空中交通管制的目的</p>
                    <p class="content">空中交通管制的目的在于防止无人机与空中飞机、地面障碍物相撞，并有效地利用空域，安全地加速空中交通运输。其内容包括空中交通管制业务、飞行情报和告警业务。</p>
                    <p class="quotation">2．空中交通管制的任务</p>
                    <p class="content">空中交通管制的任务是维护空中秩序，确保飞行安全，防止航空器相撞，防止机场及其附近空域内的航空器与障碍物相撞，从而保障空中交通畅通，保证飞行安全，提高飞行效率。
                    </p>
                    <p class="quotation">3．空中交通管制服务主体</p>
                    <p class="content">空中交通管制服务主体是指具备空中交通管制服务资格并提供空中交通管制服务的单位和人员。</p>
                    <p class="quotation">4．空中交通管制服务单位</p>
                    <p class="content">空中交通管制服务单位包括机场塔台及空中交通管制室、空中交通服务报告室、进近管制室、区域管制室、民航地区管理局调度室、中国民用航空局空中交通管理局总调度室。</p>
                    <p class="quotation">5．空中交通管制服务人员</p>
                    <p class="content">空中交通管制服务人员包括空中交通管制员、空中航行调度员、飞行签派员、航行情报员。</p>
                    <p class="content">
                        空中交通管制通常采用程序管制与雷达管制两种方法。无论是程序管制还是雷达管制，都是为了加强对无人机运行的管控，维护空中秩序，确保飞行安全。无人机的空中交通管制必须注重无人机飞行的动态控制。
                    </p>
                    <p class="content">无人机飞行单位、个人应当与空管部门建立有效的沟通协调机制和顺畅的协同通报，对无人机及其飞行活动实施联合管理，促进我国空管改革的深入推进和无人机应用的健康发展。
                    </p>
                    <p class="content">无人机空中交通运行管制的内容主要包括运行动态掌握、无人机安全间隔服务、无人机运行应急处理、无人机违规运行查处、无人机空中管制保障与协调等。</p>
                </div>
            </div>
        </div>
        <!-- 12页 -->
        <div class="page-box" page="18">
            <div v-if="showPageList.indexOf(18) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">12</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                     <p class="td-0 mt-10 mb-10"><span class="bj2">·视频库·</span></p>
                    <div class="bk-video fl">
                        <div class="fl jc-fs fw-w">
                            <div style="width: 290px; height: auto; margin: 0 5px;"
                                v-for="(item, index) in videoDataTwo.videoMd5" :key="index">
                                <video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                                    x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline=""
                                    controls controlslist="nodownload" class="video-border w100"
                                    :src="item.handleMd5"></video>
                                <div class="fl al-c jc-c">
                                    <p class="td-0" style="font-size: 12px;">{{ item.name }}</p>
                                    <el-tooltip class="item" effect="dark"
                                        :content="item.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
                                        <img :src="collectResourceList.findIndex(citem => citem.id == item.md5) > -1 ? collectCheck : collectImg"
                                            alt="" class="collect-btn1" @click="handleCollect(item)" />
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="td-0 mb-10 mt-10"><img class="h-pic" src="../../assets/images/0017_03.jpg" alt="" /></p>
                    <div v-for="(item, index) in questionDataTwo.slice(0, 8)" :key="index">
                        <p class="block">{{ index + 1 }}.{{ item.txt }}</p>
                        <p class="block" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveQuestionDataTwo" />
                            {{ citem.txt }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 13页 -->
        <div class="page-box" page="19">
            <div v-if="showPageList.indexOf(19) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">13</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <div v-for="(item, index) in questionDataTwo.slice(8, 19)" :key="index">
                        <p class="block">{{ index + 9 }}.{{ item.txt }}</p>
                        <p class="block" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveQuestionDataTwo" />
                            {{ citem.txt }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 14页 -->
        <div class="page-box" page="20">
            <div v-if="showPageList.indexOf(20) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">14</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <div v-for="(item, index) in questionDataTwo.slice(19, 20)" :key="index">
                        <p class="block">{{ index + 20 }}.{{ item.txt }}</p>
                        <p class="block" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveQuestionDataTwo" />
                            {{ citem.txt }}
                        </p>
                    </div>
                    <p class="td-0 mb-10 mt-10"><img class="h-pic" src="../../assets/images/0019_02.jpg" alt="" /></p>
                    <p class="content">通过本任务的学习，请根据自己的学习情况填写任务评价表，评分时要综合考虑小组之间的合作、沟通能力等职业素养（按自评分数40%、教师评分60%计算得分）。</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #677fb7; border-collapse: collapse" class="fz-14 img-0">
                        <tr class="img-0 table-th-bc">
                            <th>序号</th>
                            <th>课后任务</th>
                            <th>标准评价</th>
                            <th>自评分数</th>
                            <th>教师评分</th>
                        </tr>
                        <tr class="table-tr-bc">
                            <td rowspan="3" class="center">1</td>
                            <td rowspan="3" class="center">无人机法规的主要内容(30分)</td>
                            <td>对无人机相关法规明确(30 分)</td>
                            <td rowspan="3" class="center">
                                <input v-model="tableData.unitTwo.one" type="number" step="1" min="0"
                                    class="table-textarea" @change="setBookTableData">
                            </td>
                            <td rowspan="3" class="center">
                                <input v-model="tableData.unitTwo.two" type="number" step="1" min="0"
                                    class="table-textarea" @change="setBookTableData">
                            </td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td>无人机系统的定义及分类较清晰(30分)</td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td>无人机系统的定义及分类不清晰(10分)</td>
                        </tr>
                        <tr class="table-tr-bc-one">
                            <td rowspan="3" class="center">2</td>
                            <td rowspan="3" class="center">无人机系统的分类(40分)</td>
                            <td>对无人机系统的各组成部分及其作用明确(40分)</td>
                            <td rowspan="3" class="center"><input v-model="tableData.unitTwo.three" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                            <td rowspan="3" class="center"><input v-model="tableData.unitTwo.four" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                        </tr>
                        <tr class="table-tr-bc-one">
                            <td>对无人机系统的各组成部分及其作用较明确(30分)</td>
                        </tr>
                        <tr class="table-tr-bc-one">
                            <td>对无人机系统的各组成部分及其作用不明确(10分)</td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td rowspan="2" class="center">3</td>
                            <td rowspan="2" class="center">团队合作(20分)</td>
                            <td>互帮互助，可以正常沟通交流(20分)</td>
                            <td rowspan="2" class="center"><input v-model="tableData.unitTwo.five" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                            <td rowspan="2" class="center"><input v-model="tableData.unitTwo.six" type="number" step="1"
                                    min="0" class="table-textarea" @change="setBookTableData"></td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td>互帮互助，交流较少，带有脾气(10分)</td>
                        </tr>
                    </table>
                    <p><br></p>
                    <p class="content td-0 mt-30 mb-20"><img class="h-pic" src="../../assets/images/0026_02.jpg"
                            alt="" /></p>
                    <p class="content td-0 mt-10 mb-20"><img class="h-pic" src="../../assets/images/0014_03.jpg"
                            alt="" /></p>
                    <div class="bodyPic"><img class="img-0" src="../../assets/images/0026-03.jpg" alt=""
                            active="true" />
                    </div>
                </div>
            </div>
        </div>
        <!-- 15页 -->
        <div class="page-box" page="21">
            <div v-if="showPageList.indexOf(21) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">15</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <p class="content td-0 mt-10 mb-10"><img class="h-pic" src="../../assets/images/0014_05.jpg"
                            alt="" /></p>
                    <p class="content">飞行器在飞行时不仅要受到空域环境的影响，还受到大气环境的影响。大气包括气温、气压、空气湿度等气象要素。了解飞行器所运行的大气环境才能实现安全高效的飞行。</p>
                    <p class="content td-0 mt-10 mb-10"><img class="h-pic" src="../../assets/images/0014_06.jpg"
                            alt="" /></p>
                    <p class="content">大气飞行环境主要指飞行器在大气层内飞行时所处的环境条件。包围地球的空气层（即大气）是航空器的唯一飞行活动环境，也是导弹和航天器的重要飞行环境。</p>
                    <p class="content"><span class="bold">相关知识点1：大气的基本要素</span></p>
                    <p class="content">
                        表示大气状态的物理量和物理现象通称为气象要素。气温、气压、空气湿度等物理量是气象要素，风、云、降水等现象也是气象要素，它们都能在一定程度上反映当时的大气状况。其中，气温、气压和空气湿度被称为三大气象要素。
                    </p>
                    <p class="quotation">1．气温</p>
                    <p class="content">
                        气温是表示空气冷热程度的物理量，它实质上是空气分子的平均动能大小的宏观表现。一般情况下，可将空气视为理想气体，这样空气分子的平均动能就是空气内能，因此气温的升高或降低，也就是空气内能的增加或减少。在实际大气中，气温变化的基本方式有非绝热变化和绝热变化两种。对某一地点的气温（又称局地气温）来说，其变化除了与该地点的气块温度的绝热变化和非绝热变化有关外，还与不同气块温度的移动有关。
                    </p>
                    <p class="quotation">2．气压</p>
                    <p class="content">
                        气压即大气压力，是指与大气相接触的面上，空气分子作用在单位面积上的力。这个力是由空气分子对接触面的碰撞引起的，也是空气分子运动所产生的压力。气压的单位是帕（Pa）。在气象学中，人们一般用百帕（hPa），其换算关系有1
                        hPa=100 N/m<span class="super">2</span>。</p>
                    <p class="content">
                        气压随高度的变化而变化。当大气处于静止状态时，某一高度上的气压值等于其单位水平面积上所承受的上部大气柱的重力。随着高度增加，其上部大气柱越来越短，气柱中空气密度越来越小，气柱重力也就越来越小。
                    </p>
                    <p class="content">航空领域常用的气压包括以下几类。</p>
                    <p class="content">本站气压：指气象台气压表直接测得的气压。由于各测站所处的地理位置及海拔不同，本站气压常有较大差异。</p>
                    <p class="content">修正海平面气压：指由本站气压推算到同一地点海平面高度上的气压值。运用修正海平面气压便于分析和研究气压的水平分布情况。海拔高于1500
                        m的测站不推算修正海平面气压，因为推算出的修正海平面气压的误差可能过大，失去意义。</p>
                </div>
            </div>
        </div>
        <!-- 16页 -->
        <div class="page-box" page="22">
            <div v-if="showPageList.indexOf(22) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">16</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="content">
                        场面气压：指着陆区（跑道入口端）最高点的气压。场面气压也是由本站气压推算出来的。飞机起降时，为了准确掌握其相对跑道的高度，就需要知道场面气压。场面气压也可由机场标高点处的气压代替。</p>
                    <p class="content">标准海平面气压：大气处于标准状态下的海平面气压被称为标准海平面气压，其值为1013.25 hPa。海平面气压是经常变化的，而标准海平面气压是一个常数。</p>
                    <p class="content">
                        飞机飞行时，测量其飞行高度多采用无线电高度表和气压式高度表。无线电高度表所测量的是飞机相对于所飞越地区地表的垂直距离。无线电高度表能不断地指示飞机相对于所飞越地表的高度，并对地形的任何变化都很“敏感”。
                    </p>
                    <p class="content">
                        气压式高度表是主要的航行仪表，它是一个高度灵敏的空盒气压表，但刻度盘上标出的是高度。另外，有一个辅助刻度盘可显示气压，高度和气压都可通过旋钮调定。气压式高度表的刻度盘是在标准大气条件下按气压随高度的变化规律而确定的，即气压式高度表所测量的是气压，根据标准大气中气压与高度的关系，就可以表示高度。
                    </p>
                    <p class="content">飞行中常用的气压高度有以下几种。</p>
                    <p class="content">
                        场面气压高度：它是指飞机相对于起飞或着陆机场跑道的高度。为使气压式高度表指示场面气压高度，飞行员需按场面气压来拨正气压式高度表，将气压式高度表的气压刻度拨正到场面气压值上。</p>
                    <p class="content">
                        面高度：它是指相对于标准海平面的高度。飞机在航线上飞行时，都要按标准海平面气压调整高度表，其目的是使所有在航线上飞行的飞机都有相同的“零点”高度，并按此保持规定的航线仪表高度飞行，以避免飞机在空中相撞。
                    </p>
                    <p class="content">
                        修正海平面气压高度：如果按修正海平面气压拨正气压式高度表，则高度表将显示修正海平面气压高度。在飞机着陆时，将高度表指示高度减去机场标高就等于飞机距机场跑道面的高度。</p>
                    <p class="quotation">3．空气湿度</p>
                    <p class="content">大气中含有水蒸气，大气中的水蒸气含量是随时间、地点、高度、天气条件而不断变化的。空气湿度就是用来量度空气中的水蒸气含量或者空气潮湿程度的物理量。</p>
                    <p class="content"><span class="bold">相关知识点2：大气层的划分</span></p>
                    <p class="content">
                        大气层无明显的上限，它的各种特性在垂直方向上的差异非常明显，如空气随高度增加而趋于稀薄。以大气中温度随高度的分布为主要依据，可将大气层划分为对流层、平流层、中间层、热层和散逸层，如图1.3.1所示。航空器的大气飞行环境是对流层和平流层。大气层对飞行有很大的影响，恶劣的天气条件会危及飞行安全。大气属性（温度、压力、湿度、风向、风速等）对飞机的飞行性能和飞行航迹也会产生不同程度的影响。
                    </p>
                </div>
            </div>
        </div>
        <!-- 17页 -->
        <div class="page-box" page="23">
            <div v-if="showPageList.indexOf(23) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">17</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <div class="center openImgBox">
                        <img class="img-e" src="../../assets/images/0029-01.jpg" alt="" active="true" />
                        <p class="img">图1.3.1　地球大气层划分示意图</p>
                    </div>
                    <p class="quotation">1．对流层</p>
                    <p class="content">
                        对流层是地球大气中最低的一层。在对流层中，气温随高度增加而降低，空气的对流运动极为明显，空气温度和湿度的水平分布也很不均匀。对流层的厚度随纬度和季节变化，一般在低纬度地区平均为16 km～18
                        km，在中纬度地区平均为10 km～12 km，在高纬度地区平均为8 km～9 km。就季节而言，我国绝大部分地区一般都是夏季对流层厚，冬季对流层薄。对流层集中了全部大气约
                        <math>
                            <mfrac>
                                <mn>3</mn>
                                <mn>4</mn>
                            </mfrac>
                        </math>的质量和几乎全部的水蒸气，是天气变化最复杂的层，也是对飞行影响最重要的层。飞行中所遇到的各种重要天气现象几乎都出现在这一层中，如雷暴、浓雾、低云幕、雨、雪、大气湍流、风切变等。对流层按气流和天气现象分布的特点，又可分为下层、中层和上层。
                    </p>
                    <p class="content">对流层下层，又称摩擦层，它的范围自地面到1 km～2
                        km的高度，但在各地的实际高度又与地表性质、季节等因素有关。一般说来，其高度在粗糙地表上高于平整地表上，夏季高于冬季（北半球），昼间高于夜间。在对流层下层，气流受地面摩擦作用影响很大，风速通常随高度增加而增大。在复杂的地形和恶劣的天气条件下，常存在剧烈的气流扰动，威胁着飞行安全，突发的下冲气流和强烈的低空风切变常会引发飞机事故。另外，充沛的水蒸气和尘埃往往导致浓雾及其他恶化能见度的现象，对飞机的起飞和着陆构成严重的障碍。为了确保飞行安全，每个机场都规定有各类飞机的起降气象条件。另外，对流层下层中气温的日变化极为明显，昼夜温差可达10℃～40℃。
                    </p>
                    <p class="content">对流层中层的底界即对流层下层顶，上界高度约为6
                        km，这一层受地表的影响远小于对流层下层。大气中的云和降水现象大都发生在这一层内。对流层中层的上部的气压通常只有地面的一半，在那里飞行时需要使用氧气。一般轻型运输机、直升机等常在这一层中飞行（图1.3.2）。
                    </p>
                </div>
            </div>
        </div>
        <!-- 18页 -->
        <div class="page-box" page="24">
            <div v-if="showPageList.indexOf(24) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">18</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="content">上层范围从6
                        km高度伸展到对流层的顶部，这一层的气温常年都在0℃以下，水蒸气含量很少，各种云都由冰晶或过冷却水滴组成。在中纬度和副热带地区，这一层中常有风速等于或大于30
                        m/s的强风带，即所谓高空急流。飞机在高空急流附近飞行时往往会发生强烈颠簸，使乘客感觉不适，甚至被破坏结构和造成安全威胁。</p>
                    <p class="content">在对流层和平流层之间，还有一个厚度为数百米到2
                        km的过渡层，被称为对流层顶。对流层顶对垂直气流有很大的阻挡作用。上升的水蒸气、尘粒等多聚集其下，那里的能见度往往较低。</p>
                    <div class="openImgBox center">
                        <img class="img-b" src="../../assets/images/0030-01.jpg" alt="" active="true" />
                        <p class="img">图1.3.2　一架正在对流层巡航飞行的小型客机</p>
                    </div>
                    <p class="quotation">2．平流层</p>
                    <p class="content">平流层位于对流层之上，位于50 km～55 km高度处。在平流层内，随着高度的增加，气温最初保持不变或微有上升，到30
                        km高度以上气温升高较快，到了平流层顶气温升至270 K～290
                        K。平流层的这种气温分布特征同它受地面影响小和存在大量臭氧（臭氧能直接吸收太阳辐射）有关。平流层过去常被称为同温层，实际上指的是平流层的下部。在平流层中，空气的垂直运动远比对流层弱，水蒸气、尘粒含量也较少，因而气流比较平缓，能见度较高。对于飞行来说，平流层气流平稳、空气阻力小是有利的一面（图1.3.3），但因平流层空气稀薄，飞行器的稳定性和操纵性变差，这又是不利的一面。高性能的现代歼击机和侦察机都能在平流层中飞行（图1.3.4）。随着飞机飞行高度上限的日益增加，火箭、导弹等技术的发展，对平流层的研究日趋重要。
                    </p>

                </div>
            </div>
        </div>
        <!-- 19页 -->
        <div class="page-box" page="25">
            <div v-if="showPageList.indexOf(25) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">19</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <div class="openImgBox center">
                        <img class="img-c" src="../../assets/images/0031-01.jpg" alt="" active="true" />
                        <p class="img">图1.3.3　一架正在平流层巡航飞行的大型客机</p>
                    </div>
                    <div class="openImgBox center">
                        <img class="img-c" src="../../assets/images/0031-02.jpg" alt="" active="true" />
                        <p class="img">图1.3.4　美国“黑鸟”侦察机26600 m的飞行高度是航空领域目前极限</p>
                    </div>
                    <p class="quotation">3．中间层</p>
                    <p class="content">中间层从平流层顶伸展到80 km～85 km高度。这一层的特点是气温随高度增加而降低，空气有相当强烈的垂直运动。在这一层的顶部，气温可低至160 K～190 K。
                    </p>
                    <p class="quotation">4．热层</p>
                    <p class="content">热层又称为暖层或电离层，范围从中间层顶伸展到约800
                        km高度。这一层的空气密度很小，声波也难以传播。热层的一个特征是气温随高度增加而上升，另一个特征是空气处于高度电离状态。热层的变化会影响飞行器的无线电通信（图1.3.5、图1.3.6）。
                    </p>
                </div>
            </div>
        </div>
        <!-- 20页 -->
        <div class="page-box" page="26">
            <div v-if="showPageList.indexOf(26) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">20</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <div class="openImgBox center">
                        <img class="img-c" src="../../assets/images/0032-01.jpg" alt="" active="true" />
                        <p class="img">图1.3.5　低轨卫星在电离层执行资源探测或气象探测任务</p>
                    </div>
                    <div class="openImgBox center">
                        <img class="img-c" src="../../assets/images/0032-02.jpg" alt="" active="true" />
                        <p class="img">图1.3.6　洲际弹道导弹可抵达电离层飞行</p>
                    </div>
                    <p class="quotation">5．散逸层</p>
                    <p class="content">
                        散逸层又称逃逸层、外大气层，是地球大气的最外层，位于热层之上。散逸层的空气极其稀薄，同时又远离地面，受地球的引力作用较小，因而大气分子不断地向星际空间逃逸。航天器脱离这一层后便进入太空飞行。
                    </p>
                    <p class="td-0 mt-10 mb-10"><span class="bj2">·视频库·</span></p>
                    <div class="bk-video fl">
                        <div class="fl jc-fs fw-w">
                            <div style="width: 290px; height: auto; margin: 0 5px;"
                                v-for="(item, index) in videoDataThree.videoMd5" :key="index">
                                <video webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                                    x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline=""
                                    controls controlslist="nodownload" class="video-border w100"
                                    :src="item.handleMd5"></video>
                                <div class="fl al-c jc-c">
                                    <p class="td-0" style="font-size: 12px;">{{ item.name }}</p>
                                    <el-tooltip class="item" effect="dark"
                                        :content="item.isCollectVideo ? '点击取消' : '点击收藏'" placement="top-start">
                                        <img :src="collectResourceList.findIndex(citem => citem.id == item.md5) > -1 ? collectCheck : collectImg"
                                            alt="" class="collect-btn1" @click="handleCollect(item)" />
                                    </el-tooltip>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="td-0 mt-10 mb-10"><img class="h-pic" src="../../assets/images/0017_03.jpg" alt="" /></p>
                    <div v-for="(item, index) in questionDataThree.slice(0, 3)" :key="index">
                        <p class="block">{{ index + 1 }}.{{ item.txt }}</p>
                        <p class="block" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveQuestionDataThree" />
                            {{ citem.txt }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 21页 -->
        <div class="page-box" page="27">
            <div v-if="showPageList.indexOf(27) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">21</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <div v-for="(item, index) in questionDataThree.slice(3, 14)" :key="index">
                        <p class="block">{{ index + 4 }}.{{ item.txt }}</p>
                        <p class="block fl ml-35" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveQuestionDataThree" />
                            <span class="td-0" v-if="citem.txt">{{ citem.txt }}</span>
                            <img class="img-k" v-if="citem.imgSrc" :src="citem.imgSrc" alt="">
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 22页 -->
        <div class="page-box" page="28">
            <div v-if="showPageList.indexOf(28) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">22</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <div v-for="(item, index) in questionDataThree.slice(14, 28)" :key="index">
                        <p class="block">
                            <span>{{ index + 15 }}</span>.
                            <span class="td-0" v-if="item.txt">{{ item.txt }}</span>
                            <span class="td-0" v-if="item.RichTxt" v-html="item.RichTxt"></span>
                        </p>
                        <p class="block" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveQuestionDataThree" />
                            <span class="td-0" v-if="citem.txt">
                                {{ citem.txt }}
                            </span>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 23页 -->
        <div class="page-box" page="29">
            <div v-if="showPageList.indexOf(29) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">23</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                    <div v-for="(item, index) in questionDataThree.slice(28, 39)" :key="index">
                        <p class="block">{{ index + 29 }}.{{ item.txt }}</p>
                        <p class="block" v-for="(citem, cindex) in item.options" :key="cindex">
                            <input type="radio" :value="citem.value" v-model="item.userAnswer"
                                @change="saveQuestionDataThree" />
                            {{ citem.txt }}
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <!-- 24页 -->
        <div class="page-box" page="30">
            <div v-if="showPageList.indexOf(30) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">24</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="content td-0 mt-10 mb-10"><img class="h-pic" src="../../assets/images/0019_02.jpg"
                            alt="" /></p>
                    <p class="content">通过本任务学习，请根据自己的学习情况填写任务评价表，评分时要综合考虑小组之间的合作、沟通能力等职业素养（按自评分数40%、教师评分60%计算得分）。</p>
                    <table border="1" cellpadding="4" cellspacing="0"
                        style="border-color: #677fb7; border-collapse: collapse" class="fz-14 img-0">
                        <tr class="img-0 table-th-bc">
                            <th>序号</th>
                            <th>课后任务</th>
                            <th>标准评价</th>
                            <th>自评分数</th>
                            <th>教师评分</th>
                        </tr>
                        <tr class="table-tr-bc">
                            <td rowspan="3" class="center">1</td>
                            <td rowspan="3" class="center">大气的基本要素(40分)</td>
                            <td>对大气层的三个基本要素明确(40分)</td>
                            <td rowspan="3" class="center">
                                <input v-model="tableData.unitThree.one" type="number" step="1" min="0"
                                    class="table-textarea" @change="setBookTableData">
                            </td>
                            <td rowspan="3" class="center">
                                <input v-model="tableData.unitThree.two" type="number" step="1" min="0"
                                    class="table-textarea" @change="setBookTableData">
                            </td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td>对大气层的三个基本要素较明确(30分)</td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td>对大气层的三个基本要素不明确(10分)</td>
                        </tr>
                        <tr class="table-tr-bc-one">
                            <td rowspan="3" class="center">2</td>
                            <td rowspan="3" class="center">大气层的划分(40分)</td>
                            <td>对大气层的划分及特点明确(40分)</td>
                            <td rowspan="3" class="center"><input v-model="tableData.unitThree.three" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                            <td rowspan="3" class="center"><input v-model="tableData.unitThree.four" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                        </tr>
                        <tr class="table-tr-bc-one">
                            <td>对大气层的划分及特点较明确(30分)</td>
                        </tr>
                        <tr class="table-tr-bc-one">
                            <td>对大气层的划分及特点不明确(10分)</td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td rowspan="2" class="center">3</td>
                            <td rowspan="2" class="center">团队合作(20分)</td>
                            <td>互帮互助，可以正常沟通交流(20分)</td>
                            <td rowspan="2" class="center"><input v-model="tableData.unitThree.five" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                            <td rowspan="2" class="center"><input v-model="tableData.unitThree.six" type="number"
                                    step="1" min="0" class="table-textarea" @change="setBookTableData"></td>
                        </tr>
                        <tr class="table-tr-bc">
                            <td>互帮互助，交流较少，带有脾气(10分)</td>
                        </tr>
                    </table>

                </div>
            </div>
        </div>
        <!-- 5页 -->
        <!-- <div class="page-box" page="11">
            <div v-if="showPageList.indexOf(11) > -1">
                <ul class="fl al-fe pad-t-55 pad-l-80 jc-fe mb-45  h-25">
                    <li class="header-right-Number header-right-title">项目一</li>
                    <li class="header-right-Number">无人机基础知识</li>
                    <li class="p-Num">5</li>
                    <li class="header-right-Number cloud">
                        <img class="" src="../../assets/images/yemei02.png" alt="" />
                    </li>
                    <li class="header-right-last"><br /></li>
                    <li class="header-right-end"><br /></li>
                </ul>
                <div class="bodystyle">
                </div>
            </div>
        </div> -->
    </div>
</template>
<script>
import { getResourcePath } from "@/assets/methods/resources";
import {
    getCollectResource,
    setCollectResource,
} from "@/assets/methods/resources";
export default {
    name: "chapterOne",
    props: {
        showPageList: {
            type: Array,
        },
        resourceList: {
            type: Object,
        }
    },
    data() {
        return {
            collectImg: require("../../assets/images/icon/heart.png"),
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            questionData: [
                {
                    txt: "机身的主要功能是（　）。",
                    userAnswer: "",
                    options: [
                        {
                            txt: "装载人员",
                            value: "A",
                        },
                        {
                            txt: "装载各种设备",
                            value: "B",
                        },
                        {
                            txt: "保护飞机",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "固定翼无人机系统一般由（　）部分构成。",
                    userAnswer: "",
                    options: [
                        {
                            txt: "三",
                            value: "A",
                        },
                        {
                            txt: "四",
                            value: "B",
                        },
                        {
                            txt: "五",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "旋翼结构有（　）种。",
                    userAnswer: "",
                    options: [
                        {
                            txt: "四",
                            value: "A",
                        },
                        {
                            txt: "五",
                            value: "B",
                        },
                        {
                            txt: "六",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "前后左右动作时加减速的电机较多，控制比较迅速、有力的是（　）。",
                    userAnswer: "",
                    options: [
                        {
                            txt: "X型布局的多旋翼无人机",
                            value: "A",
                        },
                        {
                            txt: "十型布局的多旋翼无人机",
                            value: "B",
                        },
                        {
                            txt: "H型布局的多旋翼无人机",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "易于设计成水平折叠结构的是（　）。",
                    userAnswer: "",
                    options: [
                        {
                            txt: "X型多旋翼",
                            value: "A",
                        },
                        {
                            txt: "十型多旋翼",
                            value: "B",
                        },
                        {
                            txt: "H型多旋翼",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "下图是（　）型布局的（　）旋翼无人机。",
                    userAnswer: "",
                    imgSrc: require("../../assets/images/0018-01.jpg"),
                    options: [
                        {
                            txt: "H\四",
                            value: "A",
                        },
                        {
                            txt: "X\四",
                            value: "B",
                        },
                        {
                            txt: "十\四",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "下图是（　）型布局的（　）旋翼无人机。",
                    userAnswer: "",
                    imgSrc: require("../../assets/images/0018-02.jpg"),
                    options: [
                        {
                            txt: "X\四",
                            value: "A",
                        },
                        {
                            txt: "H\四",
                            value: "B",
                        },
                        {
                            txt: "十\四",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "下图是（　）。",
                    userAnswer: "",
                    imgSrc: require("../../assets/images/0018-03.jpg"),
                    options: [
                        {
                            txt: "纵列式双旋翼直升机",
                            value: "A",
                        },
                        {
                            txt: "横列式双旋翼直升机",
                            value: "B",
                        },
                        {
                            txt: "单旋翼直升机",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "下图是（　）。",
                    userAnswer: "",
                    imgSrc: require("../../assets/images/0019-01.jpg"),
                    options: [
                        {
                            txt: "纵列式双旋翼直升机",
                            value: "A",
                        },
                        {
                            txt: "横列式双旋翼直升机",
                            value: "B",
                        },
                        {
                            txt: "单旋翼直升机",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "水平尾翼由（　）组成。①固定的水平安定面；②可动的升降舵；③可动的方向舵。",
                    userAnswer: "",
                    options: [
                        {
                            txt: "①②③",
                            value: "A",
                        },
                        {
                            txt: "②③",
                            value: "B",
                        },
                        {
                            txt: "①②",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "尾翼的作用是（　）。①操纵飞机俯仰和偏转；②保证飞机能平稳飞行；③提供升力。",
                    userAnswer: "",
                    options: [
                        {
                            txt: "①②③",
                            value: "A",
                        },
                        {
                            txt: "①②",
                            value: "B",
                        },
                        {
                            txt: "①③",
                            value: "C",
                        },
                    ]
                },
                {
                    txt: "无人机系统包括空中系统、飞机系统、（　）和无人机使用保障人员。",
                    userAnswer: "",
                    options: [
                        {
                            txt: "数据链系统",
                            value: "A",
                        },
                        {
                            txt: "任务载荷",
                            value: "B",
                        },
                        {
                            txt: "地面站",
                            value: "C",
                        },
                    ]
                },
            ],
            tableData: {
                unitOne: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                },
                unitTwo: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                },
                unitThree: {
                    one: "",
                    two: "",
                    three: "",
                    four: "",
                    five: "",
                    six: "",
                },
            },
            questionDataTwo: [
                {
                    txt: "监视空域是指位于管制空域和报告（　）的空域。",
                    userAnswer: "",
                    options: [
                        { txt: "空域之外", value: "A" },
                        { txt: "雷达之外", value: "B" },
                        { txt: "空域之内", value: "C" }
                    ]
                },
                {
                    txt: "目视飞行航线是指航空器处于驾驶员目视视距半径（　），相对高度低于（　）的范围。",
                    userAnswer: "",
                    options: [
                        { txt: "550 m，150 m", value: "A" },
                        { txt: "500 m，120 m", value: "B" },
                        { txt: "505 m，125 m", value: "C" }
                    ]
                },
                {
                    txt: "中国航空器拥有者及驾驶员协会成立于（　）年。",
                    userAnswer: "",
                    options: [
                        { txt: "2002", value: "A" },
                        { txt: "2006", value: "B" },
                        { txt: "2004", value: "C" }
                    ]
                },
                {
                    txt: "管制空域是指重点目标外围（　）区域、以民航机场跑道中心点为中心的跑道两头各（　）区域和跑道两侧各（　）的区域。",
                    userAnswer: "",
                    options: [
                        { txt: "5.5 km，20 km，5 km", value: "A" },
                        { txt: "5 km，25 km，10 km", value: "B" },
                        { txt: "10 km，30 km，5 km", value: "C" }
                    ]
                },
                {
                    txt: "目前无人机的运行高度空间为（　）。水平空间根据需要划分为管制空域、报告空域、监视空域、目视飞行航线、融合空域和隔离空域六类。",
                    userAnswer: "",
                    options: [
                        { txt: "0～500 m", value: "A" },
                        { txt: "0～750 m", value: "B" },
                        { txt: "0～1000 m", value: "C" }
                    ]
                },
                {
                    txt: "无人机的空域管理主要从无人机空域划设的原则、划设的依据和划设的内容，（　）内容和相应条款等方面，把无人机运行空域的使用与管理纳入法治化、正规化、统一化的管理之中。",
                    userAnswer: "",
                    options: [
                        { txt: "空中通管制的依据", value: "A" },
                        { txt: "空中交管制的依据", value: "B" },
                        { txt: "空中交通管制的依据", value: "C" }
                    ]
                },
                {
                    txt: "中国航空器拥有者及驾驶员协会，经国务院批准，在民政部登记注册，为接受民航局业务指导的国家一级协会，是国内（　）航空领域第一个全国性行业协会。",
                    userAnswer: "",
                    options: [
                        { txt: "军用", value: "A" },
                        { txt: "军民两用", value: "B" },
                        { txt: "民用", value: "C" }
                    ]
                },
                {
                    txt: "中国航空器拥有者及驾驶员协会，是中国（　）在国际航空器拥有者及驾驶员协会的唯一合法代表。",
                    userAnswer: "",
                    options: [
                        { txt: "台湾地区", value: "A" },
                        { txt: "含香港、澳门地区", value: "B" },
                        { txt: "含香港、澳门、台湾地区", value: "C" }
                    ]
                },
                {
                    txt: "例如，《低空空域管理使用规定》参考《中华人民共和国民用航空法》《中华人民共和国飞行基本规则》《通用航空飞行管制条例》以及军方的相关管理规定制定。同时，民用无人机的空域管理又有其独有属性，其管理的空域是飞行高度在（　）以下的区域，并且根据情况不同按照管制空域、报告空域、监视空域、目视飞行航线等进行了分类，所以无人机法律法规具有独立性。",
                    userAnswer: "",
                    options: [
                        { txt: "1200 m", value: "A" },
                        { txt: "1500 m", value: "B" },
                        { txt: "1000 m", value: "C" }
                    ]
                },
                {
                    txt: "空中交通管制服务主体是（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "具备空中交通管制服务资格的单位和人员", value: "A" },
                        { txt: "提供空中交通管制服务的单位和人员", value: "B" },
                        { txt: "具备空中交通管制服务资格并提供空中交通管制服务的单位和人员", value: "C" }
                    ]
                },
                {
                    txt: "空中交通管制服务人员包括（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "空中交通管制员、空中航行调度员、飞行签派员、航行情报员", value: "A" },
                        { txt: "空中交通管制员、空中航行调度员、飞行签派员、飞行情报员", value: "B" },
                        { txt: "空中交通管制员、空中飞行调度员、飞行签派员、飞行情报员", value: "C" }
                    ]
                },
                {
                    txt: "民用无人机法规具有独立性、综合性、（　）等特性。",
                    userAnswer: "",
                    options: [
                        { txt: "平时性、经常性", value: "A" },
                        { txt: "经常性、国际性", value: "B" },
                        { txt: "平时性、国际性", value: "C" }
                    ]
                },
                {
                    txt: "中国航空器拥有者及驾驶员协会，简称中国AOPA，成立于（　）年。",
                    userAnswer: "",
                    options: [
                        { txt: "2002", value: "A" },
                        { txt: "2003", value: "B" },
                        { txt: "2004", value: "C" }
                    ]
                },
                {
                    txt: "美国“黑鸟”侦察机（　）飞行高度是航空领域目前极限。",
                    userAnswer: "",
                    options: [
                        { txt: "26000 m", value: "A" },
                        { txt: "26600 m", value: "B" },
                        { txt: "20600 m", value: "C" }
                    ]
                },
                {
                    txt: "全世界最复杂的空域结构是（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "美国纽约", value: "A" },
                        { txt: "英国伦敦", value: "B" },
                        { txt: "中国广州", value: "C" }
                    ]
                },
                {
                    txt: "（　）是无人机应用的法律保障基石。",
                    userAnswer: "",
                    options: [
                        { txt: "无人机法律", value: "A" },
                        { txt: "无人机法规", value: "B" },
                        { txt: "民用无人机法律法规", value: "C" }
                    ]
                },
                {
                    txt: "空中交通管制单位为飞行中的民用航空器提供的空中交通服务中含有（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "飞行情报服务", value: "A" },
                        { txt: "机场保障服务", value: "B" },
                        { txt: "导航服务", value: "C" }
                    ]
                },
                {
                    txt: "空中交通管制的目的在于（　）。①防止无人机与空中飞机、地面障碍物相撞；②有效地利用空域；③安全地加速空中交通运输。",
                    userAnswer: "",
                    options: [
                        { txt: "①②③", value: "A" },
                        { txt: "②③", value: "B" },
                        { txt: "①③", value: "C" }
                    ]
                },
                {
                    txt: "民用航空器在管制空域内（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "可以自由飞行", value: "A" },
                        { txt: "可以按VFR（目视飞机规则）自由飞行", value: "B" },
                        { txt: "必须取得空中交通管制单位的许可", value: "C" }
                    ]
                },
                {
                    txt: "下列航空法律法规中级别最高的是（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "《中华人民共和国飞行基本规则》", value: "A" },
                        { txt: "《中华人民共和国民用航空法》", value: "B" },
                        { txt: "《中华人民共和国搜寻援救民用航空器的规定》", value: "C" }
                    ]
                }
            ],
            questionDataThree: [
                {
                    txt: "航空器的大气飞行环境是（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "对流层，平流层", value: "A" },
                        { txt: "对流层，中间层", value: "B" },
                        { txt: "平流层，热层", value: "C" }
                    ]
                },
                {
                    txt: "对流层是地球大气中最低的一层，对流层中气温随高度（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "增加而增加", value: "A" },
                        { txt: "增加而降低", value: "B" },
                        { txt: "降低而降低", value: "C" }
                    ]
                },
                {
                    txt: "对流层的厚度随纬度和季节变化，一般低纬度地区平均为（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "16 km～18 km", value: "A" },
                        { txt: "8 km～9 km", value: "B" },
                        { txt: "10 km～12 km", value: "C" }
                    ]
                },
                {
                    txt: "对流层集中了全部大气约（　）的质量和几乎全部的水蒸气，是天气变化最复杂的层，也是对飞行影响最重要的层。",
                    userAnswer: "",
                    options: [
                        { imgSrc: require("../../assets/images/0033_01.jpg"), value: "A" },
                        { imgSrc: require("../../assets/images/0033_02.jpg"), value: "B" },
                        { imgSrc: require("../../assets/images/0033_03.jpg"), value: "C" }
                    ]
                },
                {
                    txt: "对流层下层，又称摩擦层，它的范围自地面到（　）的高度，但在各地的实际高度又与地表性质、季节等因素有关。",
                    userAnswer: "",
                    options: [
                        { txt: "2 km～3 km", value: "A" },
                        { txt: "1 km～2 km", value: "B" },
                        { txt: "1 km～3 km", value: "C" }
                    ]
                },
                {
                    txt: "为了确保飞行安全，每个机场都规定有各类飞机的起降气象条件。另外，对流层下层中气温的日变化极为明显，昼夜温差可达（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "10℃～40℃", value: "A" },
                        { txt: "10℃～30℃", value: "B" },
                        { txt: "20℃～40℃", value: "C" }
                    ]
                },
                {
                    txt: "对流层中层的底界即对流层下层顶，上界高度约为（　），这一层受地表的影响远小于对流层下层。",
                    userAnswer: "",
                    options: [
                        { txt: "5 km", value: "A" },
                        { txt: "6 km", value: "B" },
                        { txt: "7 km", value: "C" }
                    ]
                },
                {
                    txt: "在中纬度和副热带地区，这一层中常有风速等于或大于（　）的强风带，即所谓高空急流。",
                    userAnswer: "",
                    options: [
                        { txt: "20 m/s", value: "A" },
                        { txt: "30 m/s", value: "B" },
                        { txt: "40 m/s", value: "C" }
                    ]
                },
                {
                    txt: "平流层位于（　）之上，位于50 km～55 km高度处。",
                    userAnswer: "",
                    options: [
                        { txt: "中间层", value: "A" },
                        { txt: "对流层", value: "B" },
                        { txt: "热层", value: "C" }
                    ]
                },
                {
                    txt: "在平流层内，随着高度的增加，气温最初保持不变或微有上升，到30 km高度以上气温升高较快，到了平流层顶气温升至（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "270 K～290 K", value: "A" },
                        { txt: "260 K～290 K", value: "B" },
                        { txt: "270 K～280 K", value: "C" }
                    ]
                },
                {
                    txt: "对流层下层，又称摩擦层，它的范围自地面到（　）的高度。",
                    userAnswer: "",
                    options: [
                        { txt: "500 km～800 km", value: "A" },
                        { txt: "800 km～1000 km", value: "B" },
                        { txt: "1000 km～2000 km", value: "C" }
                    ]
                },
                {
                    txt: "上层范围从（　）高度伸展到对流层的顶部，这一层的气温常年都在0℃以下，水蒸气含量很少，各种云都由冰晶或过冷却水滴组成。",
                    userAnswer: "",
                    options: [
                        { txt: "5 km", value: "A" },
                        { txt: "6 km", value: "B" },
                        { txt: "7 km", value: "C" }
                    ]
                },
                {
                    txt: "在中纬度和副热带地区，这一层中常有风速等于或大于30 m/s的强风带，即所谓（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "高空急流", value: "A" },
                        { txt: "低空急流", value: "B" },
                        { txt: "中高空急流", value: "C" }
                    ]
                },
                {
                    txt: "在复杂的地形和恶劣天气条件下，常存在剧烈的气流扰动，威胁着飞行安全，突发的下冲气流和强烈的（　）常会引发飞机事故。",
                    userAnswer: "",
                    options: [
                        { txt: "低空风切变", value: "A" },
                        { txt: "中高空风切变", value: "B" },
                        { txt: "高空风切变", value: "C" }
                    ]
                },
                {
                    txt: "热层又称为暖层或电离层，范围从中间层顶伸展到约（　）高度。这一层的空气密度很小，声波也难以传播。",
                    userAnswer: "",
                    options: [
                        { txt: "700 km", value: "A" },
                        { txt: "800 km", value: "B" },
                        { txt: "900 km", value: "C" }
                    ]
                },
                {
                    txt: "在较高的高度，由于大气压力降低，起飞和着陆距离会（　），爬升率也会（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "增加，增加", value: "A" },
                        { txt: "增加，减小", value: "B" },
                        { txt: "减小，减小", value: "C" }
                    ]
                },
                {
                    RichTxt: "<span>海平面温度为（　），海平面空气标准密度为1.225 kg/m<sup>2</sup></span>",
                    userAnswer: "",
                    options: [
                        { txt: "55 F", value: "A" },
                        { txt: "59 F", value: "B" },
                        { txt: "60 F", value: "C" }
                    ]
                },
                {
                    txt: "（　）气压和空气湿度称为三大气象要素。",
                    userAnswer: "",
                    options: [
                        { txt: "风压", value: "A" },
                        { txt: "气温", value: "B" },
                        { txt: "气密度", value: "C" }
                    ]
                },
                {
                    txt: "大气处于标准状态下的海平面气压称为（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "标准海平面气压", value: "A" },
                        { txt: "大气标准海平面气压", value: "B" },
                        { txt: "海平面气压", value: "C" }
                    ]
                },
                {
                    txt: "（　）是指相对于标准海平面的高度。",
                    userAnswer: "",
                    options: [
                        { txt: "平面高度", value: "A" },
                        { txt: "海平面高度", value: "B" },
                        { txt: "面高度", value: "C" }
                    ]
                },
                {
                    txt: "在对流层和平流层之间，还有一个厚度为数百米到2 km的过渡层，称为（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "平对流层", value: "A" },
                        { txt: "对流层顶", value: "B" },
                        { txt: "对流层", value: "C" }
                    ]
                },
                {
                    txt: "平流层过去常被称为（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "平对流层", value: "A" },
                        { txt: "平流层中", value: "B" },
                        { txt: "同温层", value: "C" }
                    ]
                },
                {
                    txt: "热层的变化（　）飞行器的无线电通信。",
                    userAnswer: "",
                    options: [
                        { txt: "不影响", value: "A" },
                        { txt: "会影响", value: "B" },
                        { txt: "有一定影响", value: "C" }
                    ]
                },
                {
                    txt: "散逸层又称（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "逃逸层", value: "A" },
                        { txt: "逃散层", value: "B" },
                        { txt: "散远层", value: "C" }
                    ]
                },
                {
                    txt: "地球表面有一层厚厚的（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "大气层", value: "A" },
                        { txt: "氧气层", value: "B" },
                        { txt: "臭氧层", value: "C" }
                    ]
                },
                {
                    txt: "对流层下层，又称（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "下对流层", value: "A" },
                        { txt: "摩擦层", value: "B" },
                        { txt: "对流层", value: "C" }
                    ]
                },
                {
                    txt: "在对流层下层，气流受地面摩擦作用很大，风速通常随高度增加而（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "增大", value: "A" },
                        { txt: "减小", value: "B" },
                        { txt: "不变", value: "C" }
                    ]
                },
                {
                    txt: "（　）按气流和天气现象分布的特点，又可分为下层、中层和上层。",
                    userAnswer: "",
                    options: [
                        { txt: "对流层", value: "A" },
                        { txt: "摩擦层", value: "B" },
                        { txt: "中层急流", value: "C" }
                    ]
                },
                {
                    txt: "对流层是地球大气中最（　）的一层。",
                    userAnswer: "",
                    options: [
                        { txt: "高", value: "A" },
                        { txt: "低", value: "B" },
                        { txt: "外", value: "C" }
                    ]
                },
                {
                    txt: "在飞机着陆时，将高度表指示高度减去机场标高就等于飞机距机场跑道面的（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "长度", value: "A" },
                        { txt: "高度", value: "B" },
                        { txt: "距离", value: "C" }
                    ]
                },
                {
                    txt: "根据标准大气中气压与高度的关系，就可以表示（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "高度", value: "A" },
                        { txt: "气压", value: "B" },
                        { txt: "大气压", value: "C" }
                    ]
                },
                {
                    txt: "气压式高度表是主要的（　）仪表。",
                    userAnswer: "",
                    options: [
                        { txt: "高度", value: "A" },
                        { txt: "大气压", value: "B" },
                        { txt: "航行", value: "C" }
                    ]
                },
                {
                    txt: "气压随高度的变化当大气处于静止状态，某一高度上的气压值等于其单位水平面积上所承受的上部大气柱的重力，随着高度增加，其上部大气柱越来越短，且气柱中空气密度越来越小，气柱重力也就（　）。",
                    userAnswer: "",
                    options: [
                        { txt: "越小", value: "A" },
                        { txt: "越大", value: "B" },
                        { txt: "不变", value: "C" }
                    ]
                },
                {
                    txt: "洲际弹道导弹可抵达（　）飞行。",
                    userAnswer: "",
                    options: [
                        { txt: "电离层", value: "A" },
                        { txt: "热层", value: "B" },
                        { txt: "云层", value: "C" }
                    ]
                },
                {
                    txt: "（　）的变化会影响飞行器的无线电通信。",
                    userAnswer: "",
                    options: [
                        { txt: "电离", value: "A" },
                        { txt: "热层", value: "B" },
                        { txt: "云层", value: "C" }
                    ]
                },
                {
                    txt: "（　）的现代歼击机和侦察机都能在平流层中飞行。",
                    userAnswer: "",
                    options: [
                        { txt: "高性能", value: "A" },
                        { txt: "低性能", value: "B" },
                        { txt: "中性能", value: "C" }
                    ]
                },
                {
                    txt: "（　）、（　）和（　）称为三大气象要素。",
                    userAnswer: "",
                    options: [
                        { txt: "气温、气压、云", value: "A" },
                        { txt: "气温、气压、空气湿度", value: "B" },
                        { txt: "气温、云、降水", value: "C" }
                    ]
                },
                {
                    txt: "飞行高度层应当根据（　）计算。",
                    userAnswer: "",
                    options: [
                        { txt: "标准大气压条件下平均平面", value: "A" },
                        { txt: "标准大气压条件下假定海平面", value: "B" },
                        { txt: "实际大气压条件下假定海平面", value: "C" }
                    ]
                },
                {
                    txt: "（　）指气象台气压表直接测得的气压。由于各测站所处的地理位置及海拔不同，本站气压常有较大差异。",
                    userAnswer: "",
                    options: [
                        { txt: "本站气压", value: "A" },
                        { txt: "场面气压", value: "B" },
                        { txt: "修正海平面气压", value: "C" }
                    ]
                }
            ],
            // 视频
            videoDataOne: {
                videoMd5: [
                    {
                        isCollectVideo: false,
                        handleMd5: "",
                        md5: this.resourceList[23],
                        name: "1-多旋翼无人机概念及结构",
                    },
                    {
                        isCollectVideo: false,
                        handleMd5: "",
                        md5: this.resourceList[24],
                        name: "2-无人直升机概念与结构",
                    },
                    {
                        isCollectVideo: false,
                        handleMd5: "",
                        md5: this.resourceList[25],
                        name: "3-固定翼无人机概念与结构",
                    },
                    {
                        isCollectVideo: false,
                        handleMd5: "",
                        md5: this.resourceList[26],
                        name: "4-多（四）旋翼无人机布局及其特点",
                    },
                ],
            },
            videoDataTwo: {
                videoMd5: [
                    {
                        isCollectVideo: false,
                        handleMd5: "",
                        md5: this.resourceList[27],
                        name: "5-无人机法规的意义及黑飞的危害",
                    },
                    {
                        isCollectVideo: false,
                        handleMd5: "",
                        md5: this.resourceList[28],
                        name: "6-空域的分类与区别",
                    },
                ],
            },
            videoDataThree: {
                videoMd5: [
                    {
                        isCollectVideo: false,
                        handleMd5: "",
                        md5: this.resourceList[29],
                        name: "7-大气层的划分及对流层、平流层的特点",
                    },
                ],
            },
            collectResourceList: [],
        };
    },
    async mounted() {
        const questionData = localStorage.getItem("UAVTechIntro-book-chapter001-questionData");
        if (questionData) {
            this.questionData = JSON.parse(questionData);
        }

        const tableData = localStorage.getItem("UAVTechIntro-book-chapter001-tableData");
        if (tableData) {
            this.tableData = JSON.parse(tableData);
        }

        const questionDataTwo = localStorage.getItem("UAVTechIntro-book-chapter001-questionDataTwo");
        if (questionDataTwo) {
            this.questionDataTwo = JSON.parse(questionDataTwo);
        }

        const questionDataThree = localStorage.getItem("UAVTechIntro-book-chapter001-questionDataThree");
        if (questionDataThree) {
            this.questionDataThree = JSON.parse(questionDataThree);
        }
        this.getVidoePath()
        this.collectResourceList = await getCollectResource(
            this.config.activeBook.bookId
        );
    },
    methods: {
        async getVidoePath() {
            for (let index = 0; index < this.videoDataOne.videoMd5.length; index++) {
                const item = this.videoDataOne.videoMd5[index];
                if (item.md5 && !item.md5.includes("https:")) {
                    item.handleMd5 = await getResourcePath(item.md5);
                }
            }

            for (let index = 0; index < this.videoDataTwo.videoMd5.length; index++) {
                const item = this.videoDataTwo.videoMd5[index];
                if (item.md5 && !item.md5.includes("https:")) {
                    item.handleMd5 = await getResourcePath(item.md5);
                }
            }

            for (let index = 0; index < this.videoDataThree.videoMd5.length; index++) {
                const item = this.videoDataThree.videoMd5[index];
                if (item.md5 && !item.md5.includes("https:")) {
                    item.handleMd5 = await getResourcePath(item.md5);
                }
            }
        },
        handleCollect(e) {
            if (e.md5) {
                this.handleCollectResource(
                    e.md5,
                    e.md5,
                    "",
                    "视频",
                    "bits",
                    "" + e.name
                );
                e.isCollectVideo = !e.isCollectVideo;
            }
        },
        //资源收藏事件
        // resourcePath  文件路径，
        // resourceType  文件类型
        // source        文件来源
        handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
            let list = this.collectResourceList
            if (list.findIndex(item => item.id == id) > -1) {
                list = list.filter(item => item.id != id)
            } else {
                list.push({
                    id,
                    md5,
                    resourcePath,
                    resourceType,
                    source,
                    resourceName,
                })
            }
            this.collectResourceList = list
            setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
        },

        saveInputChoice() {
            localStorage.setItem('UAVTechIntro-book-chapter001-questionData', JSON.stringify(this.questionData))
        },
        setBookTableData() {
            localStorage.setItem('UAVTechIntro-book-chapter001-tableData', JSON.stringify(this.tableData))
        },

        saveQuestionDataTwo() {
            localStorage.setItem('UAVTechIntro-book-chapter001-questionDataTwo', JSON.stringify(this.questionDataTwo))
        },
        saveQuestionDataThree() {
            localStorage.setItem('UAVTechIntro-book-chapter001-questionDataThree', JSON.stringify(this.questionDataThree))
        }
    },
};
</script>

<style lang="less" scoped></style>

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

New file
@@ -0,0 +1,136 @@
<template>
    <div class="chapter" num="1">
        <!-- 封面 -->
        <div class="page-box mt-20" page="1" style="padding-bottom: 0px">
            <div v-if="showPageList.indexOf(1) > -1">
                <img class="img-0" alt="" src="../../assets/images/Cover.jpg" />
            </div>
        </div>
        <!-- 扉页 -->
        <div class="page-box mt-20" page="2" style="padding-bottom: 0px">
            <div v-if="showPageList.indexOf(2) > -1">
                <img class="img-0" alt="" src="../../assets/images/feiye.jpg" />
            </div>
        </div>
        <!-- 介绍页面 -->
        <div class="page-box" page="3">
            <div v-if="showPageList.indexOf(3) > -1">
                <div style="margin: 0 auto; padding: 50% 40% 10% 10%;">
                    <p class="td-1 fz-15 block2"><b>图书在版编目（CIP）数据</b></p>
                    <p class="td-1 fz-15 block2">
                        无人机应用技术导论/魏全斌主编，—北京:北京师范大学出版社，2023.12
                    </p>
                    <p class="td-1 fz-15 block2">
                        职业教育航空装备类专业“产教融合”新形态教材/魏全斌总主编
                    </p>
                    <p class="td-1 fz-15 block2">ISBN 978-7-303-29775-7</p>
                    <p class="td-1 fz-15 block2">
                        I. ①无…　Ⅱ. ①魏…　Ⅲ. ①无人驾驶飞机一高等职业教育一教材　IV.①V279
                    </p>
                    <p class="td-1 fz-15 block2">
                        中国国家版本馆CIP数据核字(2024)第02473号
                    </p>
                    <hr />
                    <p class="td-0 fz-14 block3">
                        出版发行：北京师范大学出版社　https://www.bnupg.com
                    </p>
                    <p class="td-0 fz-14 block3">
                        　　　　　北京市西城区新街口外大街12-3号
                    </p>
                    <p class="td-0 fz-14 block3">　　　　　邮政编码：100088</p>
                    <p class="td-0 fz-14 block3">印　　刷：天津中印联印务有限公司</p>
                    <p class="td-0 fz-14 block3">经　　销：全国新华书店</p>
                    <p class="td-0 fz-14 block3">开　　本：889mm×1194mm　1/16</p>
                    <p class="td-0 fz-14 block3">印　　张：11</p>
                    <p class="td-0 fz-14 block3">字　　数：245千字</p>
                    <p class="td-0 fz-14 block3">版　　次：2023年12月第1版</p>
                    <p class="td-0 fz-14 block3">印　　次：2023年12月第1次印刷</p>
                    <p class="td-0 fz-14 block3">定　　价：38.00元</p>
                    <hr />
                    <p class="td-0 fz-15 block3">
                        策划编辑：王云英　　　　　　　责任编辑：马力敏
                    </p>
                    <p class="td-0 fz-15 block3">
                        美术编辑：焦　丽　　　　　　　装帧设计：焦　丽
                    </p>
                    <p class="td-0 fz-15 block3 mb-20">
                        责任校对：陈　民　　　　　　　责任印制：赵　龙
                    </p>
                    <p class="td-0 block3 fz-16"><b>版权所有　侵权必究</b></p>
                    <p class="td-0 block3 fz-11">读者服务电话:010-58806806</p>
                    <p class="td-0 block3 fz-11">如发现印装质量问题,影响阅读,请联系印制管理部:010-58800608</p>
                </div>
            </div>
        </div>
        <!-- 前言 -->
        <div class="page-box" page="5">
            <div v-if="showPageList.indexOf(5) > -1">
                <ul class="fl al-c jc-fe mr-70 pad-t-55 mb-45">
                    <li class="headerText pNum">1</li>
                    <img class="headerImg mr-10" src="../../assets/images/yemei.png" alt="" />
                </ul>
                <div style="padding: 0px 12% 136px 12%">
                    <div class="fl">
                        <div class="fl fd-c" style="margin: 0 0 100px 0">
                            <div class="topBorder"></div>
                            <h1 id="a004" class="foreword">前言</h1>
                            <div class="bottomBorder"></div>
                        </div>
                    </div>
                    <p class="preface">
                        习近平总书记多次强调教育强国、科技强国，明确指出“教育、科技、人才是全面建设社会主义现代化国家的基础性、战略性支撑”，这为高等教育的发展提出了新方向与新要求。拥抱科技，迭代文明，增强职业教育适应性，加快构建现代职业教育体系，培养更多高素质科技应用型人才、技术技能人才、能工巧匠、大国工匠，是职业院校的办学使命。
                    </p>
                    <p class="preface">
                        现代无人机技术以及以无人机为载体的拓展项目已经被应用到社会各个方面。随着无人机相关技术的发展和运用以及无人机产业的蓬勃发展，相关领域的专业人才培养已经成为时代所需、行业所需。然而，我国无人机职业教育起步较晚，教育过程中缺乏基础、系统、专业的教材。为解决这一问题，我们特编写了本书。
                    </p>
                    <p class="preface">
                        本书依据无人机专业教学指导方案，以及行业、职业技术规范和相关法律法规编写而成，全面介绍了无人机基础知识、相关应用方向、现状和未来发展趋势，为进入无人机应用技术专业学习的学生提供了扎实的知识讲解。广大读者也能在学习本书后，拓展知识面，培养兴趣爱好，并将学习到的无人机知识和技术运用到实际岗位实践中，达到学以致用、赋能实际工作的目的。
                    </p>
                    <p class="preface">
                        本书内容的选择和编排，充分考虑到学生原有知识结构的特点，去繁从简、由易到难，使用大量图片来代替抽象的理论概念，让初学者能够快速地掌握无人机基础知识，提高学习兴趣，为深入学习专业课程打下坚实的基础。
                    </p>
                    <p class="preface">
                        本书编排紧密结合科技发展和社会需求趋势，注重实用性和趣味性，适合职业院校无人机专业学生和无人机爱好者学习使用。我们衷心希望这本书能够帮助更多读者掌握无人机基础知识和基本技术，助力科技强国和无人机行业发展。
                    </p>
                    <p class="preface">
                        本书由四川泛美教育投资集团有限责任公司牵头，联合四川西南航空职业学院、北京信息科技大学、北京工业职业技术学院、金华市第一中等职业学校等院校，中国航空器拥有者及驾驶员协会，以及北京启智天空科技有限公司、苏州极目机器人科技有限公司等企业共同编写。编者中既有长期从事职业教育的专家、教授、一线教师，对职业院校的学术特点和教学规律非常熟悉；也有在企业工作多年转行至高职院校的高级工程技术人员，解决问题的思维导向十分明确；还有无人机协会和企业的技术专家和骨干，保证了内容贴近生产工作实际。
                    </p>
                </div>
            </div>
        </div>
        <!-- 前言 -->
        <div class="page-box" page="6">
            <div v-if="showPageList.indexOf(6) > -1">
                <ul class="fl al-c jc-sb pad-t-55 pad-l-80 pad-r-80">
                    <li class="header-left-Number">
                        <span class="mr-10 pNum">2</span>
                        <span><span class="span-box-title"></span>无人机应用技术导论<span class="span-box-title"></span></span>
                    </li>
                    <li class="header-left-text">
                        <img class="img-c" src="../../assets/images/yemei01.png" alt="" />
                    </li>
                </ul>
                <div class="bodystyle">
                    <p class="preface">本书由魏全斌担任主编，谭浩、姚文琳担任副主编，参加编写的还有徐丹、卿建东、黄婉婷、周风景、周伟、胡祖火、赵珠琪、毛瑶。</p>
                    <p class="preface">在编写过程中，得到了四川西南航空职业学院教务处、科研处及北京师范大学出版社（集团）有限公司的大力支持，并提出了宝贵的指导意见，在此一并表示感谢！</p>
                    <p class="preface">由于编者能力和水平有限，书中难免有不足之处，恳请广大读者批评指正，以便我们修订时加以完善。</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "pageHeader",
    props: {
        showPageList: {
            type: Array,
        },
    },
    data() {
        return {};
    },
};
</script>

<style lang="less" scoped></style>

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

New file
@@ -0,0 +1,989 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <div class="page-content" :style="{
      fontSize: fontSize + 'px',
      transform: `scale(${pageZoom})`,
      transformOrigin: 'center top',
    }">
      <pageHeader v-if="showCatalogList.indexOf(1) > -1" :showPageList="loadPageList"></pageHeader>
      <chapterOne v-if="showCatalogList.indexOf(2) > -1" :showPageList="loadPageList" :resourceList="resourceList">
      </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(2) > -1"
          :showPageList="loadPageList"
          :interfaceQuestion="questionDataMap"
        ></chapterFive>  -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
import chapterOne from "./chapter001.vue";
//   import chapterTwo from "./chapter002.vue";
//   import chapterThree from "./chapter003.vue";
//   import chapterFour from "./chapter004.vue";
//   import chapterFive from "./chapter005.vue";
import NoteIcon from "@/assets/images/biji.png";
//   import getQuestionList from "@/assets/methods/examination";
//   import testData from "../../assets/examinationList";
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: 2, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null,
      observer: null,
      loadPageObserver: null,
      loadPageList: [],
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
      audioPath: "",
      currentTime: null,
      videoList: [],
      resourceList: {},
    };
  },
  computed: {
    fontSize() {
      this.transformDom(this.$store.state.qiankun.fontSize);
      return this.$store.state.qiankun.fontSize
        ? this.$store.state.qiankun.fontSize
        : 16;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale
        ? this.$store.state.qiankun.scale / 100
        : 1;
    },
  },
  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.transformDom(this.$store.state.qiankun.fontSize);
          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;
      },
    },
    resourceList: {
      handler(newVal, oldVal) {
        this.resourceList = 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，表示当目标元素一半或更多显示在视窗中时触发回调函数。
    });

    this.getBookResourceList();

    // 启动页码观察
    setTimeout(() => {
      this.initObservation();
      this.initThemeColor();
    }, 500);

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(2, 11);
    // }, 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);
    // },
    // 请求资源Json
    async getBookResourceList() {
      this.resourceList = await this.config.getBookResources(
        process.env.VUE_APP_RESOURCE_CTX + (process.env.VUE_APP_ENV == "product"
          ? process.env.VUE_APP_BOOK_ID
          : "UAVTechIntro")
      );   
    },
    // 滚动监听
    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
        ) {
          console.log(1);

          // 到达阈值
          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) {
      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,
      };
      // 遍历所有章节文件
      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) {
          try {
            if (playVudio.readyState) playVudio.requestPictureInPicture();
          } catch (error) {
            console.log(error, "小窗错误error");
          }
        }
      }
    },
    //其他类名下字体大小变化
    transformDom(fs) {
      if (!fs) return;
      let doms = (this.container ? this.container : document).querySelectorAll(
        ".block"
      );
      if (!doms.length) return;
      for (let index = 0; index < doms.length; index++) {
        const dom = doms[index];
        dom.style.fontSize = fs + "px";
      }
    },
  },
  components: {
    pageHeader,
    chapterOne,
    //   chapterTwo,
    //   chapterThree,
    //   chapterFour,
    //   chapterFive,
  },
};
</script>

<style lang="less" scoped>
.page-main {
  width: 100% !important;
  height: 100% !important;
  overflow: auto;

  .page-content {
    max-width: 816px;
    min-width: 375px;
    margin: 0 auto;
    padding-bottom: 100px;
  }
}
</style>

 src/books/UAVTechIntro/view/index.vue

New file
@@ -0,0 +1,80 @@
<template>
    <div class="UAVTechIntro-book" @mouseup="handleMouseUp">
      <pageContent></pageContent>
    </div>
  </template>
  
  <script>
  import pageContent from "./components/index.vue";
  export default {
    name: "UAVTechIntro-book",
    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>

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

@@ -167,7 +167,7 @@

    //测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(4, 117);
    //   this.gotoPage(4, 99);
    // }, 500);

    // const pageDom = (this.container ? this.container : document)

 src/books/civilPassengerTransport/assets/main.less

New file
@@ -0,0 +1,1565 @@
.civilPassengerTransport-book {
    width: 100%;
    height: 100%;

    // 自定义内容
    .page-box {
        box-sizing: border-box;
        min-height: 1128px;
        margin-bottom: 20px;
        box-shadow: 0 3px 6px 1px #00000029;
        background-color: #fff;
    }

    .c-g {
        color: green;
    }

    .c-r {
        color: red;
    }

    .t-right {
        text-align: right;
    }

    .mr-0 {
        margin: 0;
    }

    .mt-20 {
        margin-top: 20px !important;
    }

    .mt-30 {
        margin-top: 30px;
    }

    .mb-30 {
        margin-bottom: 30px;
    }

    .mb-10 {
        margin-bottom: 10px;
    }

    .pd-5 {
        padding: 0 5px;
    }

    .w100 {
        width: 100%;
    }

    .w90 {
        width: 90%;
    }


    .w80 {
        width: 80%;
    }


    sup {
        vertical-align: super;
        /* 保持上标对齐方式 */
        font-size: smaller;
        // position: relative; /* 相对于正常位置调整 */  
        // top: -0.2em; /* 根据需要调整这个值 */ 
    }

    .fz-13 {
        font-size: 13px !important;
    }

    .fz-14 {
        font-size: 14px !important;
    }

    .fz-16 {
        font-size: 16px !important;
    }

    .fz-18 {
        font-size: 18px !important;
    }


    .img-0 {
        width: 100%;
    }

    .pt-20 {
        padding-top: 20px;
    }

    .td-0 {
        text-indent: 0em !important;
    }

    .fl {
        display: flex;
    }

    .ju-cn {
        justify-content: center;
    }

    .ju-ev {
        justify-content: space-evenly;
    }

    .fd-c {
        flex-direction: column;
    }

    .fd-r {
        flex-direction: row-reverse;
    }

    .al-c {
        align-items: center;
    }

    .al-fe {
        align-items: flex-end;
    }

    .ac-f {
        align-content: flex-end;
    }

    .jc-fe {
        justify-content: flex-end;
    }

    .jc-c {
        justify-content: center;
    }

    .jc-sa {
        justify-content: space-around
    }

    .mr-70 {
        margin-right: 70px;
    }

    .mr-45 {
        margin-right: 45px;
    }

    .mr-10 {
        margin-right: 10px;
    }

    .ma-l {
        margin-left: 10%;
    }

    .pad-t-55 {
        padding-top: 55px;
    }

    .pad-l-60 {
        padding-left: 60px;
    }

    .mb-45 {
        margin-bottom: 45px;
    }

    .headerImg {
        width: 30px;
    }

    .headerText {
        font-size: 12px;
        padding: 0 8px;
        color: #B98C64;
    }

    .headerNumber {
        color: #231F20;
        font-size: 12px;
        padding: 0 8px;
        border-left: 1px solid #231F20;
    }

    .header-left-Number {
        color: #231F20;
        font-size: 12px;
        padding-right: 8px;
        border-right: 1px solid #000;
    }

    .header-left-text {
        margin-left: 8px;
        font-size: 12px;
        color: #fff;
        background-color: #0082D4;
    }

    .table-tr-bc {
        color: #fff;
    }

    .task {
        width: 16%;
        margin-bottom: 3.5em;
        margin-top: 0;
        border-top: 0.7em solid #5192C6;
    }

    .task-u2-c {
        width: 16%;
        margin-bottom: 3.5em;
        margin-top: 0;
        border-top: 0.7em solid #F89C1C;
    }

    .task-u3-c {
        width: 16%;
        margin-bottom: 3.5em;
        margin-top: 0;
        border-top: 0.7em solid #0A9CAC;
    }

    .task-u4-c {
        width: 16%;
        margin-bottom: 3.5em;
        margin-top: 0;
        border-top: 0.7em solid #92B03D;
    }

    .task-u5-c {
        width: 16%;
        margin-bottom: 3.5em;
        margin-top: 0;
        border-top: 0.7em solid #0180CD;
    }



    .p-odd {
        padding-right: 10%;
    }

    .p-even {
        padding-left: 10%;
    }

    .img-float-smaller {
        width: 200px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;
    }

    .img-float-medium {
        width: 250px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;
    }



    .img-float {
        width: 310px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;

        img {
            width: 100%;
        }

        p {
            margin: 0;
        }
    }


    .img-float-formula {
        width: 310px;
        float: left;
        height: auto;
        margin: auto;
        margin-right: 20px;

        p {
            margin: 0;
        }
    }

    .img-rights {
        width: 47%;
        float: right;
        height: auto;
        margin: auto;
        margin-left: 20px;

        img {
            width: 100%;
        }

        p {
            margin: 0 !important;
        }
    }

    .references {
        margin-top: 140px;

        hr {
            font-weight: bold;
            margin-left: 0;
            width: 15%;
        }
    }

    .w395 {
        width: 395px;
    }

    .w430 {
        width: 430px;
    }

    .w280 {
        width: 280px;
    }

    .w270 {
        width: 270px;
    }

    .w250 {
        width: 250px;
    }

    .w230 {
        width: 230px;
    }

    .w220 {
        width: 220px;
    }

    .w200 {
        width: 200px;
    }

    .w180 {
        width: 180px;
    }

    .w115 {
        width: 115px;
    }



    .text-rights {
        width: 230px;
        float: right;
        height: auto;
        margin: auto;
        margin-left: 20px;

        img {
            width: 100%;
        }

        p {
            margin: 0 !important;
        }
    }



    .pdf-text {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: 20px;

        p {
            margin: 0;
            margin-right: 10px;
        }

        .pdf-con {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 10px 0;
            box-sizing: border-box;
            border-radius: 10px;

            .pdf-view {
                min-width: 160px;
                display: flex;
                justify-content: center;
                align-items: center;
                border: 0.15em dashed #895B2E;
                margin-right: 15px;
                padding: 0 15px;
                border-radius: 5px;
                margin-top: 15px;

                span {
                    font-size: 14px;
                    text-align: center;
                    font-family: 'FZLTXIHJW';
                    display: flex;
                    align-items: center;
                    justify-content: flex-start;

                    svg {
                        fill: #895B2E;
                    }
                }

                span:nth-child(2) {
                    padding-top: 5px;
                    box-sizing: border-box;
                }

                span:hover {
                    color: #895B2E;
                    cursor: pointer;
                    text-decoration: underline;
                    -webkit-user-select: none;
                    /* Safari 3.1+ */
                    -moz-user-select: none;
                    /* Firefox 2+ */
                    -ms-user-select: none;
                    /* IE 10+ */
                    user-select: none;
                    /* 标准语法 */
                }
            }
        }

        .pdf-con-15 {
            margin-top: -20px;
        }
    }

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

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


    .link-float {
        width: 120px;
        float: left;
        height: auto;
        margin: auto;
        margin-top: 12px;
        margin-right: 20px;
    }

    .imgBox-003 {
        width: 100%;
        height: 280px;
        margin-bottom: 18px;
    }

    // 题目
    .textarea-box {
        background-color: transparent;
        max-width: 85%;
        min-width: 85%;
        outline: none;
    }

    .textarea-box-left {
        background-color: transparent;
        margin-left: 12%;
        max-width: 85%;
        min-width: 85%;
        outline: none;
    }

    .textarea-box-right {
        background-color: transparent;
        margin-left: 8%;
        max-width: 85%;
        min-width: 85%;
        outline: none;
    }

    .textarea-focused {
        border-color: #5192c6 !important;
        box-shadow: #5192c6 !important;
    }

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

        &:focus {
            outline: none;
        }
    }

    .btn-border {
        border-radius: 6px;
        border-color: #5192C6;
    }

    .btn-w {
        cursor: pointer;
        font-size: 14px;
        border-width: 1px;
        width: 80px;
        height: 30px;
        background-color: #fff;

        &:hover {
            background-color: #5192C6;
            color: #fff;
        }
    }

    .parimary-btn {
        cursor: pointer;
        min-width: 80px;
        height: 30px;
        font-size: 14px;
        margin-left: 5px;
        background-color: #5192C6;
        border-color: #5192C6;
        border-width: 1px;
        color: #fff;
        border-radius: 6px;

        &:hover {
            background-color: #a1afc8;
            border-color: #a1afc8;
        }
    }

    .event-header-text-bc {
        background-color: #bbd4ec;
    }

    // 迁移
    .bk-bwh {
        min-height: 800px;
        background-color: #DFEBF7;
        font-size: 1.2em;
        padding: 25px;
        border: 4px dotted #197ABF;
    }

    ul {
        list-style-type: none;
    }

    li {
        list-style-type: none;
    }

    .custom_tag2 {
        background-color: #F1BE49;
        color: #FFFFFF;
        display: inline-block;
        padding: 0.5px;
        border-radius: 1.5em;
        font-size: 1.1em;
        padding: 2px 10px 2px 10px;
        font-weight: bold;
        margin: 0;
        text-indent: 0em;
        margin-bottom: 0.5em;
    }

    .custom_tag1 {
        background-color: #35ACD6;
        color: #FFFFFF;
        display: inline-block;
        padding: 1px;
        font-size: 1.1em;
        padding: 3px 10px 3px 10px;
        font-weight: bold;
        box-shadow: 15px 0px 0px 0px #F5D83E, -15px 0px 0px 0px #F5D83E;
        margin: 0;
        text-indent: 0em;
        margin-bottom: 0.5em;
    }

    .custom_tag {
        background-color: #35509F;
        color: #FFFFFF;
        display: inline-block;
        padding: 1px;
        border-radius: 1.5em;
        font-size: 1.1em;
        padding: 10px 20px 10px 20px;
        font-weight: bold;
        box-shadow: 30px 0px 0px 0px #F5D83E;
        margin: 0;
        text-indent: 0em;
        margin-bottom: 0.5em;
    }


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

    }

    div.bodycontent-div-center {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        margin: 1em 1em 1em 1em;
        font-weight: normal;
        border-width: 1.5px;
        border-color: #dfb27d;
        padding: 1em;
    }

    img.bodycontent-divcenter-image {
        float: center;
        clear: both;
        height: 140px;
        margin: 15px;
    }

    .module_block {
        display: flex;
        font-size: 1.1em;
        position: relative;
        padding-left: 90px;
        justify-content: center;
        align-items: center;
        margin-right: 91px;
    }

    .module_block .custom1 {
        background-color: #9ACC77;
        padding: 10px 20px;
        color: #FFFFFF;
        /* position: absolute; */
        /* left:0; */
        /* top: 50%; */
        border-radius: 0.5em 0em 0em 0.5em;
        /* transform: translateY(-50%); */
    }

    .module_block .custom2 {
        background-color: #E9F3E0;
        padding: 10px 20px;
        color: #75A64E;
        font-weight: bold;
        border-radius: 0em 0.5em 0.5em 0em;
    }



    div.bodycontent-div-left1 {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        margin: 1em 1em 1em 1em;
        font-weight: normal;
        border-width: 1.5px;
        border-color: #dfb27d;
        padding: 1em;
        background-color: #F0F8FF;
    }

    div.bodycontent-div-left {
        font-family: "DK-HEITI", "方正兰亭黑简体", "黑体";
        margin: 1em 1em 1em 1em;
        font-weight: normal;
        border-width: 1.5px;
        border-color: #dfb27d;
        padding: 1em;
    }

    img.bodycontent-divright-image {
        float: right;
        clear: both;
        height: 140px;
        margin: 15px;
    }

    img.bodycontent-divleft-image {
        float: left;
        clear: both;
        height: 110px;
        margin: 15px;
    }


    div.bodystyle {
        font-family: 'FZLTXIHJW';
        text-align: justify;
        margin: 0 10%;
        padding-bottom: 80px;
        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;
    }

    div.sgc-toc-title {
        font-size: 2em;
        font-weight: bold;
        margin-bottom: 1em;
        text-align: center;
    }

    div.sgc-toc-level-1 {
        margin-left: 0em;
    }

    div.sgc-toc-level-2 {
        margin-left: 2em;
    }

    div.sgc-toc-level-3 {
        margin-left: 2em;
    }

    div.sgc-toc-level-4 {
        margin-left: 2em;
    }

    div.sgc-toc-level-5 {
        margin-left: 2em;
    }

    div.sgc-toc-level-6 {
        margin-left: 2em;
    }

    .imz {
        height: 96%;
        text-align: center;


    }

    .note {
        margin: 0;
        font-size: 14px;
        line-height: 22px;
    }


    .block {
        font-family: "宋体";
        margin-top: 0.2em;
        margin-bottom: 0.2em !important;
        text-indent: 2em;
        line-height: 30px;
        font-size: 16px;
        text-align: justify;
    }

    .block1 {
        text-align: center;
    }

    .img {
        text-indent: 0;
        font-family: 'FZLTXIHJW';
        text-align: center;
        font-size: 14px;
        margin-left: 0%;
        margin-right: 0%;
        text-indent: 0em;
    }

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


    p {
        font-family: "宋体";
        margin-top: 0.2em;
        margin-bottom: 0.2em !important;
        text-indent: 2em;
        line-height: 30px;
        text-align: justify;
    }

    .cover {
        width: 100%;
        padding: 0px;
    }

    .center {
        text-align: center;
        margin-left: 0%;
        margin-right: 0%;
        text-indent: 0em;
    }

    .center-ss {
        text-align: center;
        color: #EF8472;
        font-weight: bold;
        margin-left: 0%;
        margin-right: 0%;
        text-indent: 0em;
    }

    .left {
        text-indent: 0em;
        margin: 0 !important;
        line-height: 20px;
    }

    .left3 {
        margin: 20px 0 0 0 !important;
        line-height: 20px;
    }

    .left2 {
        font-size: 1.3em;
        text-indent: 0em;
        font-weight: bold;
        margin-left: 0%;
        margin-right: 0%;
    }

    .right {
        text-align: right;
        margin-left: 0%;
        margin-right: 0%;
    }

    .left1 {
        text-indent: 0em;
        margin-left: 0%;
        margin-right: 0%;
    }

    .center1 {
        text-align: center;
        margin-left: 0%;
        margin-right: 0%;
        font-size: 1.2em;
        text-indent: 0em;
        font-weight: bold;
    }

    .right1 {
        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: 'FZLTZHJW';
        font-weight: 100;
        font-size: 2em;
        color: #F0855B;
        margin-top: 0.2em;
        margin-bottom: 0.2em;
        text-indent: 0em;
    }

    .front {
        font-family: 'FZLTZHJW';
        font-weight: 400;
        font-size: 1.1em;
        color: #000;
        margin-top: 1.5em;
        margin-bottom: 3em;
        text-indent: 0em;
        text-align: center;
    }


    h2 {
        font-family: 'FZLTZHJW';
        line-height: 2em;
        font-weight: bold;
        color: #5192C6;
        font-size: 1.3em;
        margin-bottom: 0.5cm;
        margin-top: 0.5cm;
    }

    h3 {
        font-family: 'FZHTJW';
        color: #5192C6;
        font-weight: 500;
        font-size: 1.6em;
        margin-top: 0.5em;
        margin-bottom: 5px;
        text-indent: 0em;
    }

    .unit2-c {
        color: #F89C1C !important;
    }

    .unit3-c {
        color: #0A9CAC !important;
    }

    .unit4-c {
        color: #92B03D !important;
    }

    .unit5-c {
        color: #0180CD !important;
    }

    h4 {
        font-family: 'FZHTJW';
        color: #5192C6;
        font-weight: 400;
        font-size: 1.1em;
        margin-bottom: 1.2em;
        margin-top: 1.2em;
        margin-left: 0em;
        text-indent: 0em;
    }

    h5 {
        font-family: 'FZHTJW';
        color: #5192C6;
        text-align: left;
        font-weight: 400;
        margin-bottom: 0.5em;
        margin-top: 0.5em;
        font-size: 18px;
        text-indent: 0em;
    }

    h6 {
        font-family: 'FZHTJW';
        font-weight: 400;
        margin-bottom: 5px;
        margin-top: 10px;
        font-size: 18px;
        text-indent: 2em;
    }

    .zt-h6 {
        font-family: 'FZHTJW';
        color: #65C097;
        margin-bottom: 0.5em;
        margin-top: 1em;
        font-size: 1.15em;
        text-indent: 2em;
    }

    .bb {

        font-family: "cnepub", serif;
        font-family: 'FZHTJW';
        color: #66CCCC;
        font-size: 1.1em;
        margin-top: 10px;
        text-indent: 2em;
        margin-bottom: 10px;
        border-bottom: 5px dotted #F4C388;
        margin-left: 2em;
        margin-bottom: 0.5em;
        text-indent: 0em;
    }

    .u {

        text-decoration: underline;
    }

    .img-0 {
        width: 100%;
    }

    .img-a {
        width: 95%;
    }

    .img-b {
        width: 70%;
    }

    .img-c {
        width: 60%;
    }

    .img-d {
        width: 50%;
    }

    .img-e {
        width: 45%;
    }

    .img-f {
        width: 40%;
    }

    .img-g {
        width: 30%;
    }

    .img-h {
        width: 20%;
    }

    .img-i {
        width: 10%;
    }

    .img-j {
        width: 5%;
    }

    .img-zt {
        height: 6em;
        margin-top: -1.5em;
        margin-bottom: -0.4em;
        margin-left: 15%;
    }

    .inline {
        height: 1em;
        margin-bottom: -0.3em;
    }

    .inline1 {
        height: 2.5em;
        margin-top: 0.5em;
        margin-bottom: -0.5em;
    }

    .inline2 {
        height: 1.5em;
        margin-top: 0.5em;
        margin-bottom: -0.5em;
    }

    .inline4 {
        height: 2em;
        margin-left: -2em;
        margin-right: 0.5em;
        margin-bottom: -0.6em;
    }

    .img-qj {
        height: 7.5em;
        margin-bottom: -3.4em;
        margin-right: 0.5em;
    }

    .zt-ls1 {
        color: #000;
        font-size: 16px;
        font-weight: bold;
    }

    span.lsyq-1 {
        background-color: #0082D4;
        padding: 0.2em 0.4em 0.2em 0.4em;
        border-radius: 1.5em;
        margin-right: 0.5em;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.5em;
    }

    span.hsyq-1 {
        background-color: #FFB7D4;
        padding: 0.2em 0.4em 0.2em 0.4em;
        border-radius: 1.5em;
        margin-right: 0.5em;
        color: #FFFFFF;
        font-weight: bold;
        font-size: 1.5em;

    }

    .zt-hs1 {
        font-weight: 500;
        color: #000;
        font-size: 1em;
    }

    .h2-zt1 {
        padding: 5px 25px 5px 25px;
        border-radius: 10px 0px 0px 10px;
        background-color: #5392C7;
        font-size: 1.2em;
        color: #FFFFFF;
    }

    .h2-zt2 {
        padding: 10px;
        background-color: #B1DDE0;
        margin-right: 2em;
        color: #FFFFFF;
        padding: 5px 50px 5px 25px;
        border-radius: 0px 5px 80px 0px;
        font-size: 1.2em;
    }

    .bk {
        border: 0.15em dotted #5593C6;
        padding: 0.5em;
        margin-bottom: 2em;
        margin-top: 0.5em;
        border-radius: 1em;
        position: relative;
    }

    .bk1 {
        border: 0.15em dotted #F89C1C;
        padding: 0.5em;
        margin-bottom: 2em;
        margin-top: 0.5em;
        border-radius: 1em;
        position: relative;
    }

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

    .bj {
        background-color: #E1E7F3;
        padding: 0.2em 0.8em 0.2em 0.8em;
    }

    .bj2 {
        background-color: #3D8B9F;
        padding: 0.2em 0.8em 0.2em 0.8em;
        font-size: 1.3em;
        font-weight: bold;
        border-radius: 0.5em;
        color: #FFFFFF;
    }

    .bj3 {
        background-color: #FEDDB4;
        padding: 20px 10px 10px 10px;
        border-radius: 10px;
        margin-bottom: 10px;
        margin-top: 10px;
        position: relative;
    }

    span.bj3-xyx {
        background-color: #F5A101;
        color: #FFFFFF;
        border-radius: 5px;
        padding: 5px 10px 5px 10px;
        font-size: 1em;
        font-weight: bold;

    }

    div.bj3-xyx {
        position: absolute;
        top: -15px;
        left: -25px;

    }

    .ts-1 {
        font-weight: bold;
    }

    .zt-h4 {
        background-color: #F0BD40;
        padding: 10px;
        color: #FFFFFF;
        margin-left: -2em;
        border-radius: 1.5em;
    }

    .qyls-h4 {
        font-family: "HiFont Hei GB";
        color: #6CB26C;
        font-weight: bold;
        padding: 0.2em;
        text-indent: 0em;
        margin-left: 0%;
    }

    .bj4 {
        background-color: #D7E2F0;
        padding: 10px 20px;
        border-radius: 0.1em;
        margin-bottom: 2em;
        margin-top: 1em;
    }

    div.bj4-xyx {
        font-size: 18px;
        color: #fff;
        line-height: 20px;
        padding: 12.5px 15px 12.5px 15px;
        margin-right: 10px;
        background-color: #5192C6;
        border-radius: 5px;
    }

    .bj4-xyx-pd {
        font-size: 16px;
        color: #fff;
        line-height: 20px;
        padding: 22px 10px 22px 10px;
        background-color: #5192C6;
        margin-right: 10px;
        border-radius: 5px;
        flex-wrap: nowrap;
    }

    .bj4-xyx-icon {
        color: #5192C6;
        text-wrap: nowrap;
    }

    .bj5 {
        background-color: #F0F3E2;
        padding: 20px;
        border-radius: 0.1em;
        margin-bottom: 2em;
        margin-top: 2.5em;
    }

    span.bj5-xyx {
        background-color: #95B321;
        color: #FFFFFF;
        border-radius: 1.5em;
        padding: 5px 20px 5px 20px;
        font-size: 1em;
        font-weight: bold;

    }

    div.bj5-xyx {
        margin-top: -3em;
        margin-bottom: 1.5em;
        margin-left: -2.5em;
    }

    .zt-lvs1 {
        color: #95B321;
    }

    div.bj-1 {
        color: #fff;
        border-radius: 2em;
        margin-bottom: 1.5em;
        margin-top: 1.5em;
    }

    .bj-1-zt {
        color: #fff;
        font-weight: 400;
        font-size: 1.2em;
        line-height: 1.8em;
    }

}

.pdfModal {
    width: 100%;
    height: 90vh;

    .pdfBox-component {
        width: 100%;
        height: 100%;
        position: relative;

        .preview {
            width: 100%;
            height: 100%;

            .imageBox {
                height: calc(100% - 30px);
                overflow-x: hidden;
                overflow-y: auto;
                background: #ccc;
                box-sizing: border-box;
            }

            .imageBox:hover {
                cursor: zoom-in !important;
            }

            ::v-deep .el-dialog__header {
                background-color: rgba(0, 0, 0, 0.8);

                .header_title {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    color: #fff;
                    font-weight: 900;
                    font-size: 16px;
                    font-family: 'FZLTXIHJW';

                    span:nth-child(2):hover {
                        cursor: pointer;
                    }
                }

                ::v-deep .el-dialog__title,
                ::v-deep .el-dialog__headerbtn .el-dialog__close {
                    color: #fff;
                    font-weight: 900;
                    font-size: 16px;
                    font-family: 'FZLTXIHJW';
                }
            }

            .bottom_tool {
                height: 30px;
                background-color: rgba(0, 0, 0, 0.8);
                display: flex;
                justify-content: flex-end;
                align-items: center;

                svg {
                    margin-right: 15px;
                    fill: #d1d1d1;
                }

                svg:hover {
                    fill: #fff;
                    cursor: pointer;
                }
            }
        }

        .notBox {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: calc(100% - 30px);
            min-height: 300px;
        }
    }
}

.custom-dialog {
    overflow: hidden !important;

    .el-dialog__body {
        padding: 0;
    }

    .el-dialog__header {
        background-color: rgba(0, 0, 0, 0.8);

        .header_title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: #fff;
            font-weight: 900;
            font-size: 16px;
            font-family: 'FZLTXIHJW';

            span:nth-child(2):hover {
                cursor: pointer;
            }
        }

        .el-dialog__title,
        .el-dialog__headerbtn .el-dialog__close {
            color: #fff;
            font-weight: 900;
            font-size: 16px;
            font-family: 'FZLTXIHJW';
        }
    }
}

.header_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    // color: #fff;
    font-weight: 900;
    font-size: 16px;
    font-family: 'FZLTXIHJW';

    span:nth-child(2):hover {
        cursor: pointer;
    }
}




/* 媒体查询做基础响应式布局 */

@media screen and (max-width: 1024px) {
    .pdfModal {
        width: 100%;
        height: 80vh;
    }

    .custom-dialog {
        .el-dialog {
            width: 90vw !important;
        }
    }
}

@media screen and (max-width: 800px) {
    .pdfModal {
        width: 100%;
        height: 60vh;
    }

    .custom-dialog {
        .el-dialog {
            width: 90vw !important;
        }
    }
}

@media (max-width: 660px) {
    .civilPassengerTransport-book {
        
        .pad-l-60 {
            padding-left: 10px;
        }

        .mr-70 {
            margin-right: 15px;
        }
        /* 分页padding */
        .padding-93 {
            padding: 0 20px;
        }

        .padding-102 {
            padding: 0 20px;
        }


        .img-float {
            width: 130px;
        }

        .img-rights {
            width: 130px;
        }

        .btn-w {
            width: 42px;
        }
    }
}

@media (min-width: 660px) {
    .civilPassengerTransport-book {
        .padding-93 {
            padding: 0 93px 0px 93px;
        }

        .padding-102 {
            padding: 0 102px 0 102px;
        }
    }
}

::-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;
}

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

New file
@@ -0,0 +1,46 @@
<template>
    <div class="chapter" num="1">
        <!-- 封面 -->
        <!-- <div class="page-box mt-30" page="1" style="min-height: auto">
            <div v-if="showPageList.indexOf(1) > -1">
                <img class="img-0" alt="" src="../../assets/images/fengmian.jpg" />
            </div>
        </div> -->
    </div>
</template>

<script>
export default {
    name: "pageHeader",
    props: {
        showPageList: {
            type: Array,
        },
    },
    data() {
        return {
        };
    },
};
</script>

<style lang="less" scoped>
.box {
    max-width: 400px;
    margin: 0 auto;
}

.preface {
    height: 224px;
    background: linear-gradient(to right, #8fc58c, #fff);
}

.preface-text {
    font-size: 26px !important;
    color: #000 !important;
}

.mt-100 {
    margin-top: 100px !important;
}
</style>

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

New file
@@ -0,0 +1,975 @@
<template>
  <div class="page-main" @scroll="throttledScrollHandler">
    <div id="searchDomBox" style="display: none">
      <div id="searchContent"></div>
    </div>
    <div
      class="page-content"
      :style="{
        fontSize: fontSize + 'px',
        transform: `scale(${pageZoom})`,
        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> -->
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import pageHeader from "./header.vue";
// import chapterOne from "./chapter001.vue";
// import chapterTwo from "./chpater002.vue";
// import chapterThree from "./chapter003.vue";
// import chapterFour from "./chapter004.vue";
import NoteIcon from "@/assets/images/biji.png";
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: 2, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
      previousScrollTop: 0,
      throttledScrollHandler: null,
      observer: null,
      loadPageObserver: null,
      loadPageList: [],
      questionDataMap: {},
      renderSignMap: {},
      highlightData: null,
      audioPath: "",
      currentTime: null,
      videoList: [],
    };
  },
  computed: {
    fontSize() {
      this.transformDom(this.$store.state.qiankun.fontSize);
      return this.$store.state.qiankun.fontSize
        ? this.$store.state.qiankun.fontSize
        : 18;
    },
    pageZoom() {
      return this.$store.state.qiankun.scale
        ? this.$store.state.qiankun.scale / 100
        : 1;
    },
  },
  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.transformDom(this.$store.state.qiankun.fontSize);
          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(4,140);
    // }, 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
        ) {
          console.log(1);

          // 到达阈值
          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) {
      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,
      };
      // 遍历所有章节文件
      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) {
          try {
            if (playVudio.readyState) {
              // playVudio.requestPictureInPicture();
              setTimeout(()=>{
                playVudio.requestPictureInPicture();
              },0)
            }
          } catch (error) {
            console.log(error, "小窗错误error");
          }
        }
      }
    },
    //其他类名下字体大小变化
    transformDom(fs) {
      if (!fs) return;
      let doms = (this.container ? this.container : document).querySelectorAll(
        ".block"
      );
      if (!doms.length) return;
      for (let index = 0; index < doms.length; index++) {
        const dom = doms[index];
        dom.style.fontSize = fs + "px";
      }
    },
  },
  components: {
    pageHeader,
    // chapterOne,
    // chapterTwo,
    // chapterThree,
    // chapterFour,
  },
};
</script>

<style lang="less" scoped>
.page-main {
  width: 100% !important;
  height: 100% !important;
  overflow: auto;

  .page-content {
    max-width: 816px;
    min-width: 375px;
    margin: 0 auto;
    padding-bottom: 100px;
  }
}
</style>

 src/books/civilPassengerTransport/view/index.vue

New file
@@ -0,0 +1,78 @@
<template>
    <div class="civilPassengerTransport-book" @mouseup="handleMouseUp">
      <pageContent></pageContent>
    </div>
  </template>
  
  <script>
  import pageContent from "./components/index.vue"
  export default {
    name: "civilPassengerTransport-book",
    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>
  

 src/books/toddlerGameImplementation/assets/main.less

@@ -174,8 +174,8 @@
    font-family: "方正书宋";
  }

  .fm-fzxbs{
   font-weight: 100 !important;
  .fm-fzxbs {
    font-weight: 100 !important;
    font-size: 0.9em !important;
    font-family: "方正新报宋" !important;
  }
@@ -1490,7 +1490,7 @@
  }

  h4 {
    font-family: '方正准雅宋';
    font-family: 'FZZYS';
    font-weight: 400;
    color: #03AFED;
    margin-bottom: 0.2em;
@@ -1650,7 +1650,7 @@


  .ls2 {
    font-family: "方正准雅宋";
    font-family: "FZZYS";
    color: #00B1F5;
    font-weight: 400;
    font-size: 1em;
@@ -2191,11 +2191,9 @@
}




@font-face {
  font-family: '方正仿宋';
  src: url('./Fonts/FZFSK.TTF');
  src: url(../assets/Fonts/FZFSK.TTF);
}

@font-face {
@@ -2247,13 +2245,13 @@
}

@font-face {
    font-family: '方正中等线';
    src: url('./Fonts/FZZDXK.TTF');
  font-family: '方正中等线';
  src: url('./Fonts/FZZDXK.TTF');
}

@font-face {
    font-family: '方正准雅宋';
    src: url('./Fonts/FZZYSJW.TTF');
  font-family: 'FZZYS';
  src: url('./Fonts/FZZYSJW.TTF');
}



 src/books/toddlerGameImplementation/view/components/chapter002.vue

@@ -612,7 +612,7 @@
                            <span class="c-g"> 答案：{{ item.answer }}</span>
                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{
                                item.userAnswer
                                }}</span>
                            }}</span>
                            <span class="icon-box-big fl al-c">
                                <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
@@ -644,7 +644,7 @@
                        </li>
                        <li v-if="unitQuestionOne.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa">
                            <span class="c-g"> 答案：<span v-for="(answer, dindex) in item.answer" :key="dindex">{{ answer
                            }}、</span></span>
                                    }}、</span></span>
                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：<span
                                    v-for="(userAnswer, eindex) in item.userAnswer" :key="eindex">{{
                                        userAnswer }}、</span></span>
@@ -1192,7 +1192,7 @@
                            <span class="c-g"> 答案：{{ item.answer }}</span>
                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{
                                item.userAnswer
                                }}</span>
                            }}</span>
                            <span class="icon-box-big fl al-c">
                                <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
@@ -1240,7 +1240,7 @@
                            <span class="c-g"> 答案：{{ item.answer }}</span>
                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：{{
                                item.userAnswer
                                }}</span>
                            }}</span>
                            <span class="icon-box-big fl al-c">
                                <svg v-if="item.isRight" t="1716986419862" class="icon" viewBox="0 0 1820 1024"
                                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18767"
@@ -1272,7 +1272,7 @@
                        </li>
                        <li v-if="unitQuestionTwo.isShowAnswer" class="event-header-text-bc pd-5 fl jc-sa">
                            <span class="c-g"> 答案：<span v-for="(answer, dindex) in item.answer" :key="dindex">{{ answer
                            }}、</span></span>
                                    }}、</span></span>
                            <span :class="{ 'c-g': item.isRight, 'c-r': item.isRight == false }">您的答案：<span
                                    v-for="(userAnswer, eindex) in item.userAnswer" :key="eindex">{{
                                        userAnswer }}、</span></span>
@@ -1406,9 +1406,9 @@
            </div>
        </div>
        <preView :isClear="dialogVisible" :md5="p_md5" :pdfTitle="somePdfTitleValue" ref="pdfDialogRef"></preView>
        <dialogExaminations :isClear="dialogVisibleOne" :primaryColor="themeColor"
            :cardList="interfaceQuestion[questionNum]" v-if="interfaceQuestion" :chapter="3" :page="questionNum"
            :questionTitle="questionTitleMain" ref="dialogRef">
        <dialogExaminations :isClear="dialogVisibleOne" :primaryColor="themeColor" :cardList="cardArrayList"
            v-if="interfaceQuestion" :chapter="3" :page="questionNum" :questionTitle="questionTitleMain"
            ref="dialogRef">
        </dialogExaminations>
    </div>
</template>
@@ -1485,6 +1485,7 @@
            themeColor: "#6dcff6",
            questionNum: 0,
            questionTitleMain: "",
            cardArrayList: [],
            // 题目
            tableData: {
                unitOne: {
@@ -1783,6 +1784,17 @@
            },
        };
    },
    watch: {
        interfaceQuestion: {
            handler(newValue) {
                if (newValue[this.questionNum] != undefined) {
                    this.cardArrayList = newValue[this.questionNum];
                }
            },
            deep: true,
            immediate: true
        },
    },
    async mounted() {
        const bookQuestion = localStorage.getItem(
            "toddleGame-book-chapter02-tableData"
@@ -1903,8 +1915,6 @@
                JSON.stringify(this.unitQuestionOne)
            );
        },


        goUnitTwo() {
            for (let index = 0; index < this.unitQuestionTwo.unitOne.length; index++) {
                const item = this.unitQuestionTwo.unitOne[index];
@@ -1951,7 +1961,6 @@
                JSON.stringify(this.unitQuestionTwo)
            );
        },

        toUrl(val) {
            if (val) {
                this.p_md5 = this.chapter001.pdfMd5[val].md5;

 src/books/toddlerGameImplementation/view/components/chapter007.vue

@@ -1526,7 +1526,7 @@
                        name: "模块七 岗位进阶训练",
                    },
                    2: {
                        md5: "aba3b273bec8580f316611f82118cb21",
                        md5: "81517e6df1265de49aa9000c456ef2fc",
                        name: "模块七 实训工作任务",
                    },
                },
@@ -1775,7 +1775,7 @@
                ],
                unitOneChoice: [
                    {
                        txt: "在4-6个月婴儿的情绪情感与社会性发展特点中，描述正确的有（　）。",
                        txt: "在4～6个月婴儿的情绪情感与社会性发展特点中，描述正确的有（　）。",
                        isRight: null,
                        answer: ["A", "B", "D"],
                        userAnswer: [],

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

@@ -178,9 +178,10 @@
    }, 500);

    // 测试页面跳转
    // setTimeout(() => {
    //   this.gotoPage(6, 118);
    // }, 500);
    setTimeout(() => {
      this.gotoPage(4, 59);
    }, 500);

    // const pageDom = (this.container ? this.container : document)
    //   .querySelector("#app")
    //   .querySelectorAll(".page-box");
@@ -537,6 +538,7 @@
        }
      });
    },

    loadPageCallback(entries, observer) {
      entries.forEach(async (entry) => {
        if (entry.isIntersecting) {
@@ -554,11 +556,12 @@
              if (testData && testData[catalog]) {
                if (testData[catalog][page]) {
                  if (Array.isArray(testData[catalog][page])) {
                    this.questionDataMap[page] = await getQuestionList(
                    Vue.set(this.questionDataMap, page, await getQuestionList(
                      page,
                      testData[catalog][page],
                      this.config.activeBook
                    );
                    ));
                    console.log("题目", this.questionDataMap);
                  } else {
                    const obj = {};
                    for (let key in testData[catalog][page]) {
@@ -568,9 +571,8 @@
                        this.config.activeBook
                      );
                    }
                    this.questionDataMap[page] = obj;
                    Vue.set(this.questionDataMap, page, obj);
                  }
                  console.log("题目", this.questionDataMap);
                }
              }
            }

 src/components/dialogExaminations/index.vue

@@ -367,18 +367,19 @@
      ],
    };
  },
  watch: {
    cardList: {
      handler(newVal) {
        this.cardData = this.cardList;
        if (newVal && newVal.length) {
          this.loading = false;
        }
      },
      immediate: true,
      deep: true,
watch: {
  cardList: {
    handler(newVal) {
      if (newVal && newVal.length) {
        this.cardData = newVal;
        this.loading = false;
      }
    },
    immediate: true,
    deep: true,
  },
},

  mounted() {
    this.getCollectIdList();
    this.getErrorList();

 src/components/pdfview/index.vue

@@ -1,15 +1,7 @@
<!-- @format -->
<template>
  <el-dialog
    :visible.sync="localDialogVisible"
    @open="hadleOpenDialog"
    width="60vw"
    top="2vh"
    append-to-body
    lock-scroll
    :show-close="false"
    class="custom-dialog"
  >
  <el-dialog :visible.sync="localDialogVisible" @open="hadleOpenDialog" width="60vw" top="2vh" append-to-body
    lock-scroll :show-close="false" class="custom-dialog">
    <div slot="title" class="header_title">
      <span>{{ pdfTitle }}</span>
      <span @click="closeDialog"> x </span>
@@ -54,7 +46,7 @@
    return {
      localDialogVisible: false,
      currentPageSrc: "",
      currentPage: 1,
      currentPage: 3,
      totalPage: 1,
      viewerCon: null,
      preViewMd5: "",
@@ -92,7 +84,7 @@
  methods: {
    hadleOpenDialog() {
      this.preViewMd5 = this.md5;
      this.currentPage = 1;
      this.currentPage = 3;
      this.currentPageSrc = "";
      this.totalPage = 1;
      this.viewerCon?.destroy();
@@ -174,7 +166,7 @@
            if (this.currentPage < this.totalPage) {
              this.currentPage++;
              if (this.currentPage <= this.totalPage) {
                this.createDom(this.currentPage, ele);
                this.createDom(this.currentPage);
              }
            }
          }
@@ -182,6 +174,7 @@
        });
      }
    },


    getFileInfo() {
      // 获取目录
@@ -198,8 +191,8 @@
          } catch (error) {
            console.log(error, "pdf返回值类型错误");
          }
          Math.min(3, res.totalPages);
          for (let i = 0; i <= Math.min(3, res.totalPages); i++) {
          const maxPages = Math.min(3, this.totalPage);
          for (let i = 0; i < maxPages; i++) {
            this.createDom(i + 1);
          }
          this.loading = false;
@@ -211,6 +204,7 @@
          this.loading = false;
        });
    },

    getPageImage(page) {
      const ctx = process.env.VUE_APP_API_URL;
      return (

 vue.config.js

@@ -1,7 +1,10 @@
const { defineConfig } = require("@vue/cli-service");
const webpack = require("webpack");
// 获取所有书籍列表
const bookList = process.env.VUE_APP_BOOK_LIST ? process.env.VUE_APP_BOOK_LIST.split("/") : [];
const bookList = process.env.VUE_APP_BOOK_LIST
  ? process.env.VUE_APP_BOOK_LIST.split("/")
  : [];
const publicPath = process.env.VUE_APP_PUBLIC_PATH;
module.exports = defineConfig({
  publicPath: process.env.VUE_APP_PUBLIC_PATH,
  transpileDependencies: true,
@@ -14,14 +17,14 @@
      "access-control-allow-origin": "*",
    },
    client: {
      overlay: { warnings: false, errors: true }
    }
      overlay: { warnings: false, errors: true },
    },
  },
  configureWebpack: {
    output: {
      library: `app-content`,
      libraryTarget: "umd",
      chunkLoadingGlobal: `webpackJsonp_app-content`
      chunkLoadingGlobal: `webpackJsonp_app-content`,
    },
    plugins: [
      new webpack.IgnorePlugin({
@@ -39,9 +42,9 @@
            }
          }
          return false;
        }
      })
    ]
        },
      }),
    ],
  },
  chainWebpack: (config) => {
    config.module
@@ -53,8 +56,19 @@
      .loader("change-prefix-loader")
      .options({
        prefix: "el-",
        replace: "gp-"
        replace: "gp-",
      })
      .end();
  }
  //   config.module
  //     .rule("fonts")
  //     .test(/.(woff|woff2|eot|ttf|otf|TTF)$/)
  //     .type("asset/resource")
  //     .use("file-loader")
  //     .loader("file-loader")
  //     .options({
  //       name: "fonts/[name].[hash:8].[ext]", // 输出到 dist/fonts/ 目录
  //       publicPath: publicPath, // 确保 publicPath 正确
  //       limit: 0,
  //     });
   },
});

 yarn.lock

@@ -1085,6 +1085,30 @@
  resolved "https://registry.npmmirror.com/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz"
  integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==

"@isaacs/balanced-match@^4.0.1":
  version "4.0.1"
  resolved "https://registry.npmmirror.com/@isaacs/balanced-match/-/balanced-match-4.0.1.tgz"
  integrity sha512-yzMTt9lEb8Gv7zRioUilSglI0c0smZ9k5D65677DLWLtWJaXIS3CqcGyUFByYKlnUj6TkjLVs54fBl6+TiGQDQ==

"@isaacs/brace-expansion@^5.0.0":
  version "5.0.0"
  resolved "https://registry.npmmirror.com/@isaacs/brace-expansion/-/brace-expansion-5.0.0.tgz"
  integrity sha512-ZT55BDLV0yv0RBm2czMiZ+SqCGO7AvmOM3G/w2xhVPH+te0aKgFjmBvGlL1dH+ql2tgGO3MVrbb3jCKyvpgnxA==
  dependencies:
    "@isaacs/balanced-match" "^4.0.1"

"@isaacs/cliui@^8.0.2":
  version "8.0.2"
  resolved "https://registry.npmmirror.com/@isaacs/cliui/-/cliui-8.0.2.tgz"
  integrity sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==
  dependencies:
    string-width "^5.1.2"
    string-width-cjs "npm:string-width@^4.2.0"
    strip-ansi "^7.0.1"
    strip-ansi-cjs "npm:strip-ansi@^6.0.1"
    wrap-ansi "^8.1.0"
    wrap-ansi-cjs "npm:wrap-ansi@^7.0.0"

"@jridgewell/gen-mapping@^0.3.5":
  version "0.3.5"
  resolved "https://registry.npmmirror.com/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"
@@ -2044,6 +2068,11 @@
  resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-5.0.1.tgz"
  integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==

ansi-regex@^6.0.1:
  version "6.1.0"
  resolved "https://registry.npmmirror.com/ansi-regex/-/ansi-regex-6.1.0.tgz"
  integrity sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==

ansi-styles@^3.2.1:
  version "3.2.1"
  resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-3.2.1.tgz"
@@ -2064,6 +2093,11 @@
  integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
  dependencies:
    color-convert "^2.0.1"

ansi-styles@^6.1.0:
  version "6.2.1"
  resolved "https://registry.npmmirror.com/ansi-styles/-/ansi-styles-6.2.1.tgz"
  integrity sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==

any-promise@^1.0.0:
  version "1.3.0"
@@ -2756,10 +2790,10 @@
    shebang-command "^1.2.0"
    which "^1.2.9"

cross-spawn@^7.0.2, cross-spawn@^7.0.3:
  version "7.0.3"
  resolved "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.3.tgz"
  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
cross-spawn@^7.0.2, cross-spawn@^7.0.3, cross-spawn@^7.0.6:
  version "7.0.6"
  resolved "https://registry.npmmirror.com/cross-spawn/-/cross-spawn-7.0.6.tgz"
  integrity sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==
  dependencies:
    path-key "^3.1.0"
    shebang-command "^2.0.0"
@@ -3137,6 +3171,11 @@
  resolved "https://registry.npmmirror.com/duplexer/-/duplexer-0.1.2.tgz"
  integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==

eastasianwidth@^0.2.0:
  version "0.2.0"
  resolved "https://registry.npmmirror.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz"
  integrity sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==

easy-stack@1.0.1:
  version "1.0.1"
  resolved "https://registry.npmmirror.com/easy-stack/-/easy-stack-1.0.1.tgz"
@@ -3168,6 +3207,11 @@
  version "8.0.0"
  resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-8.0.0.tgz"
  integrity sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==

emoji-regex@^9.2.2:
  version "9.2.2"
  resolved "https://registry.npmmirror.com/emoji-regex/-/emoji-regex-9.2.2.tgz"
  integrity sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==

emojis-list@^3.0.0:
  version "3.0.0"
@@ -3622,6 +3666,14 @@
  dependencies:
    flat-cache "^3.0.4"

file-loader@*, file-loader@^6.2.0:
  version "6.2.0"
  resolved "https://registry.npmmirror.com/file-loader/-/file-loader-6.2.0.tgz"
  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
  dependencies:
    loader-utils "^2.0.0"
    schema-utils "^3.0.0"

fill-range@^7.0.1:
  version "7.0.1"
  resolved "https://registry.npmmirror.com/fill-range/-/fill-range-7.0.1.tgz"
@@ -3682,6 +3734,14 @@
  version "1.15.6"
  resolved "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.6.tgz"
  integrity sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==

foreground-child@^3.3.1:
  version "3.3.1"
  resolved "https://registry.npmmirror.com/foreground-child/-/foreground-child-3.3.1.tgz"
  integrity sha512-gIXjKqtFuWEgzFRJA9WCQeSJLZDjgJUOMCMzxtvFq/37KojM1BFGufqsCy0r4qSQmYLsZYMeyRqzIWOMup03sw==
  dependencies:
    cross-spawn "^7.0.6"
    signal-exit "^4.0.1"

form-data@^4.0.0:
  version "4.0.0"
@@ -3822,6 +3882,18 @@
  version "0.4.1"
  resolved "https://registry.npmmirror.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz"
  integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==

glob@^11.0.0:
  version "11.0.3"
  resolved "https://registry.npmmirror.com/glob/-/glob-11.0.3.tgz"
  integrity sha512-2Nim7dha1KVkaiF4q6Dj+ngPPMdfvLJEOpZk/jKiUAkqKebpGAWQXAq9z1xu9HKu5lWfqw/FASuccEjyznjPaA==
  dependencies:
    foreground-child "^3.3.1"
    jackspeak "^4.1.1"
    minimatch "^10.0.3"
    minipass "^7.1.2"
    package-json-from-dist "^1.0.0"
    path-scurry "^2.0.0"

glob@^7.1.3:
  version "7.2.3"
@@ -4321,6 +4393,13 @@
  resolved "https://registry.npmmirror.com/isobject/-/isobject-3.0.1.tgz"
  integrity sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==

jackspeak@^4.1.1:
  version "4.1.1"
  resolved "https://registry.npmmirror.com/jackspeak/-/jackspeak-4.1.1.tgz"
  integrity sha512-zptv57P3GpL+O0I7VdMJNBZCu+BPHVQUk55Ft8/QCJjTVxrnJHuVuX/0Bl2A6/+2oyR/ZMEuFKwmzqqZ/U5nPQ==
  dependencies:
    "@isaacs/cliui" "^8.0.2"

javascript-stringify@^2.0.1:
  version "2.1.0"
  resolved "https://registry.npmmirror.com/javascript-stringify/-/javascript-stringify-2.1.0.tgz"
@@ -4638,6 +4717,11 @@
  dependencies:
    tslib "^2.0.3"

lru-cache@^11.0.0:
  version "11.1.0"
  resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-11.1.0.tgz"
  integrity sha512-QIXZUBJUx+2zHUdQujWejBkcD9+cs94tLn0+YL8UrCh+D5sCXZ4c7LaEH48pNwRY3MLDgqUFyhlCyjJPf1WP0A==

lru-cache@^4.0.1:
  version "4.1.5"
  resolved "https://registry.npmmirror.com/lru-cache/-/lru-cache-4.1.5.tgz"
@@ -4794,6 +4878,13 @@
  resolved "https://registry.npmmirror.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz"
  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==

minimatch@^10.0.3:
  version "10.0.3"
  resolved "https://registry.npmmirror.com/minimatch/-/minimatch-10.0.3.tgz"
  integrity sha512-IPZ167aShDZZUMdRk66cyQAW3qr0WzbHkPdMYa8bzZhlHhO3jALbKdxcaak7W9FfT2rZNpQuUu4Od7ILEpXSaw==
  dependencies:
    "@isaacs/brace-expansion" "^5.0.0"

minimatch@^3.0.4, minimatch@^3.1.1:
  version "3.1.2"
  resolved "https://registry.npmmirror.com/minimatch/-/minimatch-3.1.2.tgz"
@@ -4817,6 +4908,11 @@
  version "5.0.0"
  resolved "https://registry.npmmirror.com/minipass/-/minipass-5.0.0.tgz"
  integrity sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==

minipass@^7.1.2:
  version "7.1.2"
  resolved "https://registry.npmmirror.com/minipass/-/minipass-7.1.2.tgz"
  integrity sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==

minizlib@^2.1.1:
  version "2.1.2"
@@ -5162,6 +5258,11 @@
  resolved "https://registry.npmmirror.com/p-try/-/p-try-2.2.0.tgz"
  integrity sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==

package-json-from-dist@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npmmirror.com/package-json-from-dist/-/package-json-from-dist-1.0.1.tgz"
  integrity sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==

param-case@^3.0.4:
  version "3.0.4"
  resolved "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz"
@@ -5256,6 +5357,14 @@
  version "1.0.7"
  resolved "https://registry.npmmirror.com/path-parse/-/path-parse-1.0.7.tgz"
  integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==

path-scurry@^2.0.0:
  version "2.0.0"
  resolved "https://registry.npmmirror.com/path-scurry/-/path-scurry-2.0.0.tgz"
  integrity sha512-ypGJsmGtdXUOeM5u93TyeIEfEhM6s+ljAhrk5vAvSx8uyY/02OvrZnA0YNGUrPXfpJMgI1ODd3nwz8Npx4O4cg==
  dependencies:
    lru-cache "^11.0.0"
    minipass "^7.1.2"

path-to-regexp@0.1.7:
  version "0.1.7"
@@ -5878,6 +5987,14 @@
  dependencies:
    glob "^7.1.3"

rimraf@^6.0.1:
  version "6.0.1"
  resolved "https://registry.npmmirror.com/rimraf/-/rimraf-6.0.1.tgz"
  integrity sha512-9dkvaxAsk/xNXSJzMgFqqMCuFgt2+KsOFek3TMLfo8NCPfWpBmqwyNn5Y+NX56QUYfCtsyhF3ayiboEoUmJk/A==
  dependencies:
    glob "^11.0.0"
    package-json-from-dist "^1.0.0"

run-parallel@^1.1.9:
  version "1.2.0"
  resolved "https://registry.npmmirror.com/run-parallel/-/run-parallel-1.2.0.tgz"
@@ -6149,6 +6266,11 @@
  resolved "https://registry.npmmirror.com/signal-exit/-/signal-exit-3.0.7.tgz"
  integrity sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==

signal-exit@^4.0.1:
  version "4.1.0"
  resolved "https://registry.npmmirror.com/signal-exit/-/signal-exit-4.1.0.tgz"
  integrity sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==

simple-concat@^1.0.0:
  version "1.0.1"
  resolved "https://registry.npmmirror.com/simple-concat/-/simple-concat-1.0.1.tgz"
@@ -6323,6 +6445,15 @@
  dependencies:
    safe-buffer "~5.1.0"

"string-width-cjs@npm:string-width@^4.2.0":
  version "4.2.3"
  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
  dependencies:
    emoji-regex "^8.0.0"
    is-fullwidth-code-point "^3.0.0"
    strip-ansi "^6.0.1"

"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.3:
  version "4.2.3"
  resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
@@ -6340,6 +6471,22 @@
    is-fullwidth-code-point "^2.0.0"
    strip-ansi "^4.0.0"

string-width@^5.0.1, string-width@^5.1.2:
  version "5.1.2"
  resolved "https://registry.npmmirror.com/string-width/-/string-width-5.1.2.tgz"
  integrity sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==
  dependencies:
    eastasianwidth "^0.2.0"
    emoji-regex "^9.2.2"
    strip-ansi "^7.0.1"

"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
  version "6.0.1"
  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
  dependencies:
    ansi-regex "^5.0.1"

strip-ansi@^4.0.0:
  version "4.0.0"
  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-4.0.0.tgz"
@@ -6353,6 +6500,13 @@
  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
  dependencies:
    ansi-regex "^5.0.1"

strip-ansi@^7.0.1:
  version "7.1.0"
  resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz"
  integrity sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==
  dependencies:
    ansi-regex "^6.0.1"

strip-eof@^1.0.0:
  version "1.0.0"
@@ -6669,6 +6823,15 @@
  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
  dependencies:
    punycode "^2.1.0"

url-loader@^4.1.1:
  version "4.1.1"
  resolved "https://registry.npmmirror.com/url-loader/-/url-loader-4.1.1.tgz"
  integrity sha512-3BTV812+AVHHOJQO8O5MkWgZ5aosP7GnROJwvzLS9hWDj00lZ6Z0wNak423Lp9PBZN05N+Jk/N5Si8jRAlGyWA==
  dependencies:
    loader-utils "^2.0.0"
    mime-types "^2.1.27"
    schema-utils "^3.0.0"

url-parse@^1.5.3:
  version "1.5.10"
@@ -7039,6 +7202,15 @@
  resolved "https://registry.npmmirror.com/wildcard/-/wildcard-2.0.1.tgz"
  integrity sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==

"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
  version "7.0.0"
  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
  dependencies:
    ansi-styles "^4.0.0"
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

wrap-ansi@^3.0.1:
  version "3.0.1"
  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-3.0.1.tgz"
@@ -7056,6 +7228,15 @@
    string-width "^4.1.0"
    strip-ansi "^6.0.0"

wrap-ansi@^8.1.0:
  version "8.1.0"
  resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz"
  integrity sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==
  dependencies:
    ansi-styles "^6.1.0"
    string-width "^5.0.1"
    strip-ansi "^7.0.1"

wrappy@1:
  version "1.0.2"
  resolved "https://registry.npmmirror.com/wrappy/-/wrappy-1.0.2.tgz"