样式调整

闫增涛

2024-05-09 47b06c613a82cea4066f323437d1275aa0c7c31d

样式调整

 public/information.json

New file
@@ -0,0 +1,21 @@
[
  {
    "label": "专题一 学前儿童生理发育特点与保健",
    "id": "a008",
    "page":1,
    "children": [
      {
        "label": "学习主题一 运动系统",
        "id": "b001",
        "page":2,
        "children": [
          {
            "label": "一、学前儿童运动系统的特点",
            "id": "c001",
            "page":2
          }
        ]
      }
    ]
  }
]

 public/resource.json

New file
@@ -0,0 +1,34 @@
{
  "imgList":[

  ],
  "audioList" :[


  ],
  "videoList" : [
    {
      "name": "1e5acedac3d8453d693a71db330a781d.mp4",
      "type": "video"
    }

  ],
  "attachmentList":[
    {
      "name": "1 教案 专题八：学习主题二 学前儿童常见的意外事故及急救.docx",
      "type": "word"
    },
    {
      "name": "1 教案 专题十：学习主题一 托幼机构的建筑卫生.docx",
      "type": "word"
    },
    {
      "name": "1 教案 专题四：学习主题二 学前儿童心理健康的评价.docx",
      "type": "word"
    },
    {
      "name": "1 教案 专题四：学习主题一 学前儿童身体健康的评价.docx",
      "type": "word"
    }
  ]
}

 src/assets/style/main.css

File was deleted

 src/books/childHealth/assets/main.css

File was deleted

 src/books/childHealth/assets/main.less

New file
@@ -0,0 +1,567 @@
.temp-book {
  font-family: "宋体", SimSun, sans-serif;
  .custom_tag {
    background-color: #1eb9ee;
    color: #ffffff;
    display: inline-block;
    padding: 5px 10px;
    border-radius: 8px;
    font-size: 15px;
    padding: 10px;
    box-shadow: 9px 5px 0px 0px #eaf6fd;
    margin: 0;
    margin-top: 20px;
    text-indent: 0em;
    margin-bottom: 0.5em;
  }
  h6.Conclusion-title4 {
    font-family: "DK-HEITI", "������ͤ�ڼ���", "����";
    font-weight: normal;
    font-size: 18px;
    color: #ffffff;
    background-color: #1eb9ee;
    padding: 0.3em;
    width: 7em;
    text-align: center;
    border-radius: 0.6em;
    margin-bottom: -0.6em;
    duokan-text-indent: 0em;
    text-indent: 0em;
  }
  h6.Conclusion-title2 {
    font-family: "DK-HEITI", "������ͤ�ڼ���", "����";
    font-weight: normal;
    font-size: 18px;
    color: #ffffff;
    background-color: #1eb9ee;
    padding: 0.3em;
    width: 6.5em;
    text-align: center;
    border-radius: 0.6em;
    margin-bottom: -0.9em;
    duokan-text-indent: 0em;
    text-indent: 0em;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  p.blockh6 {
    font-family: "STKaiti";
    font-weight: normal;
    font-size: 16px;
    border-style: dotted;
    border-width: 2px;
    border-color: #1eb9ee;
    padding: 0.8em;
    margin-left: 1em;
    margin-top: 0em;
    margin-bottom: 40px;
    border-radius: 1em;
    duokan-text-indent: 2em;
    text-indent: 2em;
  }
  p.blockh6-c {
    font-family: "STKaiti";
    font-weight: normal;
    font-size: 16px;
    border-style: dotted;
    border-radius: 1em;
    border-width: 2px;
    border-color: #1eb9ee;
    padding: 0.8em;
    text-align: center;
    margin-left: 1em;
    margin-top: 0em;
    text-indent: 0em;
    margin-bottom: 20px;
    text-align: center;
  }
  h6.Conclusion-title3 {
    font-family: "DK-HEITI", "������ͤ�ڼ���", "����";
    font-weight: normal;
    font-size: 18px;
    color: #ffffff;
    background-color: #32a59e;
    padding: 0.3em;
    width: 6em;
    text-align: center;
    border-radius: 0.6em;
    margin-bottom: -0.5em;
    duokan-text-indent: 0em;
    text-indent: 0em;
  }

  .module_block {
    display: flex;
    font-size: 1.2em;
    position: relative;
    padding-left: 110px;
  }
  .module_block .custom1 {
    background-color: #1eb9ee;
    padding: 10px 20px;
    color: #ffffff;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
  }
  .module_block .custom2 {
    border: 4px solid #1eb9ee;
    padding: 6px 5px 6px 40px;
    color: #1eb9ee;
    font-weight: bold;
    border-radius: 1em;
  }

  .fieldset {
    margin-bottom: 20px;
    border: dotted #1eb9ee;
    border-radius: 1em;
    font-size: 0.9em; /*16px;*/
    padding: 10px 10px 10px 10px;
    color: #666666;
    font-family: "����", "����";
  }
  .inline {
    height: 1.2em;
    vertical-align: top;
  }
  .imz {
    height: 96%;
    text-align: center;
  }

  .note {
    font-size: 0.85em;
  }

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

  .block1 {
    font-family: "STKaiti";
    text-align: right;
    margin-left: 0%;
    margin-right: 2em;
  }

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

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

  .img {
    text-align: center;
    font-family: "STKaiti";
    font-size: 1em;
    text-indent: 0em;
  }

  p {
    margin-top: 0.5em;
    text-indent: 2em;
    line-height: 1.5em;
    margin: 0;
  }
  .cover {
    width: 100%;
    padding: 0px;
  }
  .center {
    text-align: center;
    margin-left: 0%;
    margin-right: 0%;
    text-indent: 0em;
  }
  .left {
    text-indent: 0em;
    margin-left: 0%;
    margin-right: 0%;
  }
  .right {
    text-align: right;
    margin-left: 0%;
    margin-right: 0%;
  }
  .quote {
    margin-top: 0%;
    margin-bottom: 0%;
    margin-left: 1em;
    margin-right: 1em;
    text-align: justify;
    font-family: "cnepub", serif;
  }
  h1 {
    color: #9f052f;
    font-family: "cnepub", serif;
    text-align: center;
    font-size: 1.5em;
    margin-top: 1em;
    margin-bottom: 1em;
    font-family: "HiFont Hei GB";
  }

  h2 {
    font-family: "cnepub", serif;
    text-align: center;
    font-weight: bold;
    font-size: 1.3em;
    margin-top: 1em;
    margin-bottom: 0.2em;
    font-family: "HiFont Hei GB";
  }
  h3 {
    color: #00a1e9;
    font-family: "cnepub", serif;
    font-weight: bold;
    font-size: 1.2em;
    margin-top: 1em;
    margin-bottom: 0.2em;
    text-indent: 0em;
    font-family: "HiFont Hei GB";
  }
  h4 {
    font-family: "cnepub", serif;
    font-weight: bold;
    font-size: medium;
    margin-top: 1.1em;
    text-indent: 2em;
    margin-bottom: 0.2em;
    font-family: "HiFont Hei GB";
  }
  h5 {
    color: #00a1e9;
    font-family: "cnepub", serif;
    font-weight: bold;
    font-size: 1em;
    margin-top: 0.8em;
    text-indent: 2em;
    margin-bottom: 0.2em;
    font-family: "HiFont Hei GB";
  }
  h6 {
    font-family: "cnepub", serif;
    text-align: left;
    font-weight: bold;
    font-size: x-small;
    margin-top: 1em;
    margin-bottom: 0.2em;
    font-family: "HiFont Hei GB";
  }
  .u {
    text-decoration: underline;
  }

  .img-a {
    width: 90%;
  }
  .img-b {
    width: 80%;
  }
  .img-c {
    width: 70%;
  }
  .img-d {
    width: 60%;
  }
  .img-e {
    width: 50%;
  }
  .img-f {
    width: 40%;
  }
  .img-g {
    width: 30%;
  }
  .img-h {
    width: 20%;
  }
  .img-i {
    width: 10%;
  }
  .img-j {
    width: 5%;
  }
  .img-n {
    height: 1em;
  }
  .border-1 {
    border: 1px solid #e6e6fa;
    background-color: #e6e6fa;
    border-radius: 0.6em;
    padding-top: 30%;
    padding-bottom: 70%;
    margin: 20% 10% 20% 10%;
  }
  .border-2 {
    border: 1px solid #fff5ee;
    background-color: #fff5ee;
    border-radius: 0.6em;
    padding-top: 30%;
    padding-bottom: 70%;
    margin: 20% 10% 20% 10%;
  }

  .img-gn {
    height: 1.3em;
    vertical-align: top;
  }

  .book {
    margin: 0 auto;
    width: 816px;
  }

  .text-center {
    text-align: center;
  }
  .tl {
    text-align: left !important;
  }
  .tl-ju {
    text-align: justify;
  }
  .ti2 {
    text-indent: 2em !important;
  }
  .lineInput {
    width: 90%;
    font-size: 14px;
    color: #666;
    border: none;
    border-bottom: 1px solid #15c0f2;
    outline: none;
    background: transparent;
  }
  .completion-input {
    width: 64px !important;
    color: #000 !important;
  }
  .judge-input {
    width: 20px;
    font-size: 14px;
    color: #000;
    border: none;
    border: 0;
    outline: none;
    background: transparent;
  }

  .sport-text {
    font-size: 20px;
    line-height: 40px;
  }
  .img-text {
    color: #000;
    text-align: center;
    font-size: 16px;
    text-indent: 0em;
    font-weight: 700;
  }
  .text-size {
    font-size: 20px;
  }
  .fl {
    display: flex;
  }
  .fl-evenly {
    justify-content: space-evenly;
  }
  .fl-around {
    justify-content: space-around;
  }
  .fl-between {
    justify-content: space-between;
  }
  .fl-di {
    flex-direction: column;
  }
  .fl-cn {
    align-items: center;
  }
  .fz-18 {
    font-size: 18px;
  }
  .fz-16 {
    font-size: 16px;
  }
  .fz-14 {
    font-size: 14px;
  }
  .fz-12 {
    font-size: 12px;
  }
  .suspend-title {
    white-space: nowrap;
    min-width: 120px;
    position: absolute;
    top: -27px;
    left: -15px;
    background-color: #32a59e;
    height: 34px;
    line-height: 34px;
    border-radius: 13px;
    color: #fff;
    text-align: center;
  }
  .m0 {
    margin: 0;
  }
  .t0 {
    text-indent: 0;
  }
  .m0-t0 {
    margin: 0;
    text-indent: 0 !important;
  }

  .learn-btn img {
    cursor: pointer;
    height: 30px;
  }

  .lh {
    line-height: 1.5em;
    margin-top: 0.5em;
  }
  .page-box {
    box-sizing: border-box;
    min-height: 1150px !important;
    margin-bottom: 20px;
    box-shadow: 0 3px 6px 1px #00000029;
    background-color: #fff;
  }
  .ds-bl {
    display: block;
  }
  ul {
    list-style: none;
    padding: 0;
  }

  .lh2 {
    line-height: 2em;
  }

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

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

  .header-num-box {
    box-sizing: border-box;
    position: absolute;
    top: 50px;
    width: 100%;
    height: 26px !important;
    line-height: 26px;
    background-color: #15c0f2;
    color: #fff;
    padding-left: 50px;
  }
  .page-header-box {
    padding-top: 96px;
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    margin-bottom: 45px;
  }
  .page-header-text {
    color: #616161;
    font-size: 14px;
  }
  .page-header-num {
    display: inline-block;
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    box-sizing: border-box;
    background-color: #15c0f2;
    color: #fff;
    margin-left: 20px;
    font-weight: bold;
  }
  .fw-b {
    font-weight: bold;
  }
  .italic {
    font-style: italic;
  }
  .mb-0 {
    margin-bottom: 0;
  }
  .mb-20 {
    margin: 20px 0 !important;
  }
  .mb-40 {
    margin-bottom: 40px !important;
  }
  .mb-80 {
    margin-bottom: 80px !important;
  }
  .ml-30 {
    margin-left: 30px;
  }
  .table-box {
    width: 94%;
    font-family: "STKaiti";
    line-height: 1.5em;
  }
}

body {
  background-color: #e6e6e6;
}

/* 媒体查询做基础响应式布局 */
@media (max-width: 660px) {
  .temp-book {
    /* 分页padding */
    .page-padding {
      padding: 104px 20px;
    }
    .padding-96 {
      padding: 0 20px 104px 20px;
    }
    /* video大小 */
    .video-box {
      max-width: 260px;
    }
  }
}
@media (min-width: 660px) {
  .temp-book {
    .page-padding {
      padding: 104px 96px;
    }
    .padding-96 {
      padding: 0 96px 104px 96px;
    }
    .video-box {
      max-width: 370px;
    }
  }
}

 src/books/childHealth/view/content/components/chapter001.vue

@@ -42,6 +42,7 @@
        />
      </p>
    </div>
    <!-- 2 -->
    <div class="chapterOne">
      <div class="page-box" style="padding-bottom: 50px">
        <div class="header-box">
@@ -54,9 +55,13 @@
        <div class="padding-96">
          <h6 class="Conclusion-title2">•预备学习•</h6>
          <p class="blockh6-c tl ti2">
            <span style="margin:10px 0;display:block">
            亲爱的同学们，在开始学习“运动系统”之前，咱们先通过视频学习“人体概述”并完成相关练习。请扫描下面的二维码，开始咱们的预备学习之旅吧！
            </span>
            <span class="span-border"></span>
            <span class="fl fl-cn mb-20">
              <span>自主学习任务单</span>
              <span class="learn-title-text">自主学习任务单：</span>
              <span style="text-indent:0">专题一学习主题一 运动系统自主学习任务单</span>
              <img
                src="../../../assets/images/icon/document.png"
                alt=""
@@ -65,30 +70,30 @@
                class="btn"
              />
            </span>
            <span class="span-border" v-if="learnTbaleOne">
              <table
              v-if="learnTbaleOne"
                align="center"
                border="1"
                cellpadding="10"
                cellspacing="0"
                style="width: 94%"
                style="width: 100%;border-color:#e9e9e9"
              >
                <caption class="fw-b" style="font-size: 18px; margin: 20px 0">
                <!-- <caption class="fw-b" style="font-size: 18px; margin: 20px 0">
                  自主学习任务单：专题一学习主题一 运动系统自主学习任务单
                </caption>
                </caption> -->
                <tr>
                  <th>一、学习指南</th>
                  <th class="primary-color">一、学习指南</th>
                </tr>
                <tr>
                  <td>
                    <span class="ds-bl">(一)学习内容</span>
                    <span class="ds-bl primary-color">(一)学习内容</span>
                    <span class="ds-bl">专题一 学前儿童生理发育特点与保健</span>
                    <span class="ds-bl">学习主题一 运动系统</span>
                  </td>
                </tr>
                <tr>
                  <td>
                    <span class="ds-bl">(二)达成目标</span>
                    <span class="ds-bl primary-color">(二)达成目标</span>
                    <span class="ds-bl">1.了解运动系统的组成及功能。</span>
                    <span class="ds-bl"
                      >2.掌握学前儿童骨骼、肌肉、关节的特点。</span
@@ -103,7 +108,7 @@
                </tr>
                <tr>
                  <td>
                    <span class="ds-bl">(三)学习方法建议</span>
                    <span class="ds-bl primary-color">(三)学习方法建议</span>
                    <span class="ds-bl">组合学习方法，任务单+阅读+视频</span>
                    <span class="ds-bl"
                      >1.阅读：教材、教学课件及补充材料。</span
@@ -115,7 +120,7 @@
                </tr>
                <tr>
                  <td>
                    <span class="ds-bl">(四)课件学习形式预告</span>
                    <span class="ds-bl primary-color">(四)课件学习形式预告</span>
                    <span class="ds-bl"
                      >1.测验：教材、教学课件及补充材料。</span
                    >
@@ -125,68 +130,68 @@
                  </td>
                </tr>
                <tr>
                  <th>二、学习任务</th>
                  <th class="primary-color">二、学习任务</th>
                </tr>
                <tr>
                  <td>
                    <span class="ds-bl"
                      >1.人体运动系统由哪三个部分组成？各部分的功能式什么？</span
                    >
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <span class="ds-bl"
                      >2.学前儿童的骨（骼）有什么特点？日常生活中应该如何保健？</span
                    >
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <span class="ds-bl"
                      >3.为什么学前儿童不宜从事拔河、攀岩、引体向上等活动？</span
                    >
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <span class="ds-bl"
                      >4.学前儿童骨骼肌有什么特点？运动过程中应该注意哪些事项？</span
                    >
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <span class="ds-bl"
                      >5.幼儿园能组织幼儿练习写字吗？为什么？</span
                    >
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <span class="ds-bl"
                      >6.学前儿童的关节有什么特点？日常生活中应该注意哪些问题？</span
                    >
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <span class="ds-bl"
                      >7.什么是扁平足？怎样预防学前儿童形成扁平足？</span
                    >
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <span class="ds-bl"
                      >8.学前儿童运动系统的保育要点有哪些？</span
                    >
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <span class="ds-bl"
                      >9.日常保教活动中，如何科学组织体育锻炼和户外活动？</span
                    >
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                    <input type="text" class="lineInput w100" />
                  </td>
                </tr>
                <tr>
                  <th>三、学习反馈</th>
                  <th class="primary-color">三、学习反馈</th>
                </tr>
                <tr>
                  <td>
@@ -196,9 +201,9 @@
                  </td>
                </tr>
              </table>
            </span>
              <span class="span-border"></span>
            <span class="fl fl-cn mb-20">
              <span>视频：人体概述</span>
              <span class="learn-title-text">视频：人体概述</span>
              <img
                src="../../../assets/images/icon/video.png"
                alt=""
@@ -218,11 +223,12 @@
                x5-video-player-fullscreen="true"
                x5-playsinline=""
                controls
                style="width: 92%; padding: 20px; border: 2px dotted #1eb9ee"
                style="width: 100%; border:1px dotted #15c0f2"
              ></video>
            </span>
            <span class="span-border"></span>
            <span class="fl fl-cn mb-20">
              <span>云测试：人体概述</span>
              <span class="learn-title-text">云测试：人体概述</span>
              <img
                src="../../../assets/images/icon/topic.png"
                alt=""
@@ -231,24 +237,12 @@
                class="btn"
              />
            </span>
            <span class="span-border" v-if="testOne">
              <examinations
              v-if="testOne"
                ref="examinationOne"
                :productLinkPath="productLinkPath"
              ></examinations>
            </span>
          </p>
        </div>
      </div>
      <!-- 3 -->
      <div class="page-box" style="padding: 0 0 68px 0">
        <div class="page-header-box">
          <span class="page-header-text"
            >专题一&nbsp;学前儿童生理发育特点与保健</span
          >
          <span class="page-header-num">3</span>
        </div>
        <div class="padding-96">
          <h2 class="module_block" id="b001" style="margin: 0">
            <div class="custom1">学习主题一</div>
            <div class="custom2">运动系统</div>
@@ -311,14 +305,13 @@
        </div>
      </div>
    </div>
    <!-- 4 -->
    <!-- 3 -->
    <div class="page-box">
      <div class="header-box">
        <div class="header-border-box"></div>
        <div class="header-num-box">
          <span class="fw-b italic">4</span>
          <span class="ml-30">学前儿童卫生与保健（第3版）</span>
        </div>
      <div class="page-header-box">
          <span class="page-header-text"
            >专题一&nbsp;学前儿童生理发育特点与保健</span
          >
          <span class="page-header-num">3</span>
      </div>
      <div class="padding-96">
        <h5 id="e002">2.骨柔韧，易变形</h5>
@@ -333,15 +326,21 @@
        <p class="text-left text-height lh2 mb-0">
          骨盆是由左、右髋骨与脊柱下部的骶骨和尾骨借骨连结构成的骨性腔。婴幼儿时期，髋骨由髂骨、坐骨和耻骨借软骨连结起来，约16岁时三骨完全融合。男女骨盆在形态上，到10岁左右开始出现差别，女性宽而短，男性窄而长。
        </p>
        <div class="fl">
          <div class="bottom-left" style="width: 65%">
            <p class="text-left text-height lh2">
              学前儿童的骨盆和成人不同，还没长结实，在蹦跳时要注意安全。比如，幼儿从高处往硬地上跳，就可能导致组成骨盆的骨发生不易察觉的移位，使骨盆变形。若女童骨盆变形，将会直接影响成年后的正常生理功能，这一点应引起家长和教师的特别注意。
            </p>
        <p class="text-left text-height lh2">
          学前儿童的骨盆和成人不同，还没长结实，在蹦跳时要注意安全。比如，幼儿从高处往硬地上跳，就可能导致组成骨盆的骨发生不易察觉的移位，使骨盆变形。若女童骨盆变形，将会直接影响成年后的正常生理功能，这一点应引起家长和教师的特别注意。
        </p>
        <div class="fl">
          <div class="bottom-left" style="width: 65%">
            <h5 id="e005">5.脊柱的生理弯曲还未定型</h5>
            <p class="text-left text-height lh2 mb-0">
              脊柱是人体的主要支柱，由24块椎骨、1块骶骨和1块尾骨借助椎间盘、韧带和椎间关节连结而成。成人脊柱有4个生理弯曲，即颈曲、胸曲、腰曲和骶曲（见图1-2）。这些弯曲的形成既有利于保持身体平衡，还可增加脊柱本
              脊柱是人体的主要支柱，由24块椎骨、1块骶骨和1块尾骨借助椎间盘、韧带和椎间关节连结而成。成人脊柱有4个生理弯曲，即颈曲、胸曲、腰曲和骶曲（见图1-2）。这些弯曲的形成既有利于保持身体平衡，还可增加脊柱本身的弹性，剧烈运动时缓冲对脑和内脏的冲击与震荡。胚胎阶段脊柱整体形成后凸，出生后，俯卧抬头发展过程中形成颈曲，逐步直立发展过程中形成腰曲，直到第6年年底才结束。脊柱的生理性弯曲在婴幼儿时期虽已形成，但还未定型，一般在18～25岁才能完成定型。
            </p>
            <h4 id="d002">（二）骨骼肌</h4>
            <h5 id="e006">1.骨胳肌容易疲劳</h5>
            <p>新生儿骨骼肌的质量仅占体重的1/5左右，随着年龄</p>
          </div>
          <div class="bottom-right" style="width: 35%">
            <el-carousel
@@ -366,26 +365,21 @@
          </div>
        </div>
        <p class="m0-t0 lh2 tl-ju">
          身的弹性，剧烈运动时缓冲对脑和内脏的冲击与震荡。胚胎阶段脊柱整体形成后凸，出生后，俯卧抬头发展过程中形成颈曲，逐步直立发展过程中形成腰曲，直到第6年年底才结
        </p>
      </div>
    </div>
    <!-- 5 -->
    <!-- 4 -->
    <div class="page-box">
      <div class="page-header-box">
        <span class="page-header-text"
          >专题一&nbsp;学前儿童生理发育特点与保健</span
        >
        <span class="page-header-num">5</span>
      <div class="header-box">
          <div class="header-border-box"></div>
          <div class="header-num-box">
            <span class="fw-b italic">4</span>
            <span class="ml-30">学前儿童卫生与保健（第3版）</span>
          </div>
      </div>
      <div class="padding-96">
        <p class="m0-t0 lh2 tl-ju">
          束。脊柱的生理性弯曲在婴幼儿时期虽已形成，但还未定型，一般在18～25岁才能完成定型。
        </p>
        <h4 id="d002">（二）骨骼肌</h4>
        <h5 id="e006">1.骨胳肌容易疲劳</h5>
        <p class="lh2">
          新生儿骨骼肌的质量仅占体重的1/5左右，随着年龄的增长，骨骼肌占体重的百分比逐渐上升，5岁时达1/3左右，而到青春发育期达近1/2。学前儿童骨骼肌中所含水分相对较多，蛋白质、肌糖原和无机盐较成人少，因此，肌肉柔嫩，收缩力较差，力量小，易疲劳。但由于新陈代谢旺盛，学前儿童疲劳后恢复较快。年龄越小，这些特点越明显。
        <p class="lh2 t0">
          的增长，骨骼肌占体重的百分比逐渐上升，5岁时达1/3左右，而到青春发育期达近1/2。学前儿童骨骼肌中所含水分相对较多，蛋白质、肌糖原和无机盐较成人少，因此，肌肉柔嫩，收缩力较差，力量小，易疲劳。但由于新陈代谢旺盛，学前儿童疲劳后恢复较快。年龄越小，这些特点越明显。
        </p>
        <h5 id="e007">2.大肌肉群发育早、小肌肉群发育晚</h5>
        <p class="lh2">
@@ -412,18 +406,6 @@
            <p class="tl">关节模式见图1-3。</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 6 -->
    <div class="page-box">
      <div class="header-box">
        <div class="header-border-box"></div>
        <div class="header-num-box">
          <span class="fw-b italic">6</span>
          <span class="ml-30">学前儿童卫生与保健（第3版）</span>
        </div>
      </div>
      <div class="padding-96">
        <div class="fl">
          <div class="left" style="width: 30%">
            <el-carousel
@@ -457,6 +439,19 @@
            </p>
          </div>
        </div>
      </div>
    </div>
    <!-- 6 -->
    <div class="page-box">
      <div class="header-box">
        <div class="header-border-box"></div>
        <div class="header-num-box">
          <span class="fw-b italic">6</span>
          <span class="ml-30">学前儿童卫生与保健（第3版）</span>
        </div>
      </div>
      <div class="padding-96">

        <h3 id="c002">二、学前儿童运动系统的保健</h3>
        <h4 id="d004">（一）指导学前儿童保持正确姿势，防止脊柱和胸廓畸形</h4>
        <p class="lh2">
@@ -770,9 +765,7 @@
            <p class="lh2">
              学前儿童鼻旁窦尚未发育完全，随着年龄的增长，面颅骨逐渐发育，鼻旁窦才逐渐发育完善。因此，学前儿童虽然容易发生上呼吸道感染，但极少出现鼻窦炎。鼻中隔前下方血管丰富，容易因干燥、外伤等出血，称为“易出血区”。
            </p>
            <p class="lh2">
              学前儿童鼻泪管较短，开口于
            </p>
            <p class="lh2">学前儿童鼻泪管较短，开口于</p>
          </div>
          <div class="right" style="width: 60%">
            <video
@@ -790,7 +783,9 @@
            <p class="img">视频：学前儿童呼吸道的防御特点与保健</p>
          </div>
        </div>
        <p class="t0 lh2">眼内眦，瓣膜发育不全。因此，如果上呼吸道感染，病菌可以通过鼻泪管侵及眼结膜，引发泪囊炎、结膜炎等。</p>
        <p class="t0 lh2">
          眼内眦，瓣膜发育不全。因此，如果上呼吸道感染，病菌可以通过鼻泪管侵及眼结膜，引发泪囊炎、结膜炎等。
        </p>
        <h5 id="e013">2.咽</h5>
        <p class="lh2">
          咽分别以软腭游离缘和会厌上缘为界，分为鼻咽、口咽和喉咽，在婴儿期相对狭小，方向垂直。学前儿童咽鼓管较宽、短，而且平直，故上呼吸道感染时，病原体容易侵入中耳，引发中耳炎，损伤听力。
@@ -809,7 +804,8 @@
            </p>
            <h5 id="e015">4.气管、支气管</h5>
            <p class="lh2">
              学前儿童气管和支气管管腔较成人狭窄，管壁柔软，肌肉发育不完善，缺乏弹性组织； 黏膜血管丰富，黏液腺分泌不足而较干燥，黏膜纤毛运动较差，不能很好地排除微生物及黏液，因而若发生感染，易出现呼吸困难。
              学前儿童气管和支气管管腔较成人狭窄，管壁柔软，肌肉发育不完善，缺乏弹性组织；
              黏膜血管丰富，黏液腺分泌不足而较干燥，黏膜纤毛运动较差，不能很好地排除微生物及黏液，因而若发生感染，易出现呼吸困难。
            </p>
          </div>
          <div class="right" style="width: 20%">
@@ -821,68 +817,95 @@
        </div>
      </div>
    </div>

    <p class="m0-t0">
     
    </p>
    <!-- 12 -->
    <div class="page-box">
      <div class="header-box">
        <div class="header-border-box"></div>
        <div class="header-num-box">
          <span class="fw-b italic">12</span>
          <span class="ml-30">学前儿童卫生与保健（第3版）</span>
        </div>
      </div>
      <div class="padding-96">
    <h5 id="e016">5.肺</h5>
    <p>
        <p class="lh2">
      在胎儿时期，肺已发育，出生后随着年龄的增长，肺进一步发育，主要是肺泡的分化。肺泡数量在出生时约为200万，8岁时增至1
      400万左右，成人为3亿～4亿；肺泡面积的增长比体表面积明显，从出生至成年，气体交换面积增加了20倍左右，总面积约为100平方米；自出生到生长发育停止，肺的质量增加了大约20倍。
    </p>
    <p>
        <p class="lh2">
      学前儿童肺弹力组织发育较差，血管丰富，肺含血多，含气少，肺间质发育旺盛，肺泡数量少，因而感染时容易导致黏液堵塞，并引起肺不张、肺气肿及肺瘀血等。
    </p>
    <h4 id="d010">（二）呼吸运动的特点</h4>
    <p>
        <p class="lh2">
      学前儿童新陈代谢旺盛，在新陈代谢过程中，机体需氧量相对比成人多，只有加快呼吸频率才能满足自身对氧气的需求量，所以，年龄越小，呼吸频率越快。新生儿每分钟呼吸40～44次，1岁以内约30次，1～3岁25～30次，4～7岁约22次。不同年龄的人的呼吸频率见表1-1。
    </p>
    <p class="img">表1-1 不同年龄的人的呼吸频率</p>
    <p class="center">
      <el-image :src="tableOne" :preview-src-list="[tableOne]" />
    </p>
    <p>
        <p class="lh2">
      因调节呼吸运动的神经中枢发育尚未完善，学前儿童呼吸节律常不稳定。因呼吸肌较弱，所以学前儿童以腹式呼吸为主。
    </p>
    <h3 id="c004">二、学前儿童呼吸系统的保健＞＞＞＞＞＞</h3>
    <h4 id="d011">（一）培养学前儿童良好的卫生习惯</h4>
    <p>
        <p class="lh2">
      第一，戒除用口呼吸的习惯。用口呼吸是一种不良习惯，应当戒除。首先，它会导致空气中的灰尘、细菌不经过鼻毛及鼻黏膜的清洁过滤而进入体内，久而久之会造成呼吸系统和消化系统疾病。其次，由于学前儿童肺部扩张不全，长期用口呼吸会影响胸廓发育，形成漏斗胸。再次，用口呼吸会使睡眠不安稳，影响精力和体力恢复。此外，用口呼吸还有可能导致消化不良，等等。总之，一旦发现学前儿童有用口呼吸的不良习惯，务必及时采取措施进行矫正，以使其养成用鼻呼吸的良好习惯。
    </p>
    <p>
      第二，禁止用手挖鼻孔。用手挖鼻孔也是一种坏习惯，需要及时改正。因为它会使鼻毛脱落，黏膜损伤，甚至导致血管破裂引起出血。另外，手指及指甲缝中的病菌也会随之入侵鼻腔，可能会引起鼻腔感染，甚至是更为严重的并发症。此外，长期用手挖鼻孔，还有可能使学前儿童形成“朝天鼻”。
        <p class="lh2">
          第二，禁止用手挖鼻孔。用手挖鼻孔也是一种坏习惯，需要及时改正。因为它会使鼻毛脱落，黏膜损伤，甚至导致血管破裂引起出血。另外，手指及指甲缝中的病菌也会随之
    </p>
    <p>
      </div>
    </div>
    <!-- 13 -->
    <div class="page-box">
      <div class="page-header-box">
        <span class="page-header-text"
          >专题一&nbsp;学前儿童生理发育特点与保健</span
        >
        <span class="page-header-num">13</span>
      </div>
      <div class="padding-96">
        <p class="lh2 t0">
          入侵鼻腔，可能会引起鼻腔感染，甚至是更为严重的并发症。此外，长期用手挖鼻孔，还有可能使学前儿童形成“朝天鼻”。
        </p>
        <p class="lh2">
      第三，教育学前儿童咳嗽、打喷嚏时，不要面对他人，要用纸巾等捂住口鼻；教给学前儿童正确的擤鼻涕方法。
    </p>
    <p>第四，不要让学前儿童蒙头睡眠，以保证睡觉时吸入新鲜空气。</p>
        <p class="lh2">
          第四，不要让学前儿童蒙头睡眠，以保证睡觉时吸入新鲜空气。
        </p>
    <h4 id="d012">（二）保持室内空气新鲜</h4>
    <p>
        <p class="lh2">
      新鲜空气里病菌少并有充足的氧气，能促进人体的新陈代谢，还可以增强学前儿童对外界气候变化的适应能力。因此，室内应经常开窗通风换气。
    </p>
    <h4 id="d013">（三）科学组织体育锻炼和户外活动</h4>
    <p>
        <p class="lh2">
      经常参加体育锻炼和户外活动，可以增强学前儿童呼吸肌的力量，促进其胸廓和肺的正常发育，增加肺活量。户外活动还能提高呼吸系统对疾病的抵抗力，预防呼吸道感染。
    </p>
    <p>
        <p class="lh2">
      在组织学前儿童开展体育游戏、体操、跑步等活动时，应注意让儿童配合动作，自然而正确地加深呼吸，使肺部充分吸进氧气，排出二氧化碳。
    </p>
    <h4 id="d014">（四）严防呼吸道异物</h4>
    <p>
        <p class="lh2">
      培养学前儿童安静进餐的习惯，不要边吃边说笑。教育儿童不要边玩边吃小食品，更不可抛起来“接食”，防止食物呛入气管。
    </p>
    <p>
        <p class="lh2">
      教育学前儿童玩玻璃球、硬币、纽扣、豆类等小东西时要特别注意，更不能将它们放入鼻腔，严防呼吸道异物的发生。
    </p>
    <h6 class="Conclusion-title2">
      <img class="img-gn" alt="" src="../../../assets/images/icon/ycs.png" />
          <img
            class="img-gn"
            alt=""
            src="../../../assets/images/icon/ycs.png"
          />
      云测试
    </h6>
    <p class="blockh6-c">
      <!-- <img class="img-g" alt="" src="image/0022-1.jpg" /><br /> -->
      <span class="img">专题一 学习主题二</span>
    </p>

      </div>
    </div>
    <h4 id="d015">（五）保护声带</h4>
    <p>
      选择适合学前儿童音域特点的歌曲或朗读材料，每次唱歌或朗读的时间不宜过长（最多5分钟），更不能高声喊叫，以防声带充血、肿胀、变厚，造成声音嘶哑。练习发声的场所应保持空气流通，温度、湿度适宜。冬季不要在室外练声，要避免学前儿童在温度骤变的情况下练习发声。当咽部有炎症时，应减少发音，直到完全康复。
@@ -2508,14 +2531,27 @@
</script>

<style lang="less" scoped>
.w100 {
  width: 100% !important;
}
.primary-color {
  color: #15c0f2;
}
.learn-title-text {
  font-weight: bold;
  color: #1eb9ee;
}
.span-border {
  margin-left: -13px;
  display: block;
  padding-bottom: 20px;
  border: 2px dotted #1eb9ee;
  width: 105%;
  margin-top: 20px;
  border-bottom: 2px dotted #1eb9ee;
  border-radius: 10px;
}
.btn {
  cursor: pointer;
  width: 30px;
}
.btn-box {
  width: 100%;

 src/books/childHealth/view/header/index.vue

@@ -15,8 +15,8 @@
        <p class="tl fz-14 m0">
          学前儿童卫生与保健/张兰香，潘秀萍主编.—3版.—北京：北京师范大学出版社，2023.2（2024.2重印）
        </p>
        <p class="tl">ISBN 978-7-303-26340-0</p>
        <p class="tl fz-14 m0">
        <p class="tl" style="margin-bottom: 10px;">ISBN 978-7-303-26340-0</p>
        <p class="tl fz-14 m0" style="margin-bottom: 10px;">
          Ⅰ.①学… Ⅱ.①张… ②潘… Ⅲ.①学前儿童—卫生保健—幼儿师范学校—教材 Ⅳ.①R179
        </p>
        <p class="tl fz-14">中国版本图书馆CIP数据核字（2020）第179545号</p>
@@ -51,8 +51,8 @@
            <p class="tl fz-14 m0">责任印制：马洁</p>
          </li>
        </ul>
        <p class="center m0" style="margin-top: 20px">
          <b>版权所有 侵权必究</b>
        <p class="center m0" style="margin-top: 20px;font-size:20px;">
          <b>版权所有&nbsp;&nbsp;侵权必究</b>
        </p>
        <p class="center m0"><b>反盗版、 侵权举报电话：</b>010-58800697</p>
        <p class="block2 m0">北京读者服务部电话：010-58808104</p>
@@ -127,7 +127,6 @@
      </p>
      <p class="block1">编者</p>
    </div>
    <div class="page-box"></div>
    <!-- 前言1 -->
    <div class="page-box page-padding">
      <div class="tixing">

 src/components/examinations/index.vue

@@ -1,6 +1,6 @@
<template>
  <div class="examination" v-loading="loading">
    <div v-for="(item, nindex) in cardList" :key="nindex">
    <div v-for="(item, nindex) in cardList" :key="nindex" class="border-box">
      <p class="catalogName">
        <span v-if="nindex == 0">一、</span>
        <span v-if="nindex == 1">二、</span>
@@ -18,7 +18,13 @@
          <!-- 标题 -->
          <div class="questionTitle">
            <div class="titleContent">
              <span class="questionNum" :style="{marginTop:value.questionType == 'completion' ? '12px' : '0'}">{{ index + 1 }}、</span>
              <span
                class="questionNum"
                :style="{
                  marginTop: value.questionType == 'completion' ? '12px' : '0',
                }"
                >{{ index + 1 }}、</span
              >
              <!-- 听力进度条 -->
              <!-- <answerAudioPlayer :audioUrl="value.src" v-show="item.name == '听力题'" /> -->
              <!-- 题干 -->
@@ -269,11 +275,11 @@
                      <div class="headerConent sitgBox">
                        <p v-if="!value.isUnfold">
                          <span class="analysisColor">查看解析</span
                          ><el-image :src="chakanIcon" />
                          ><el-image  />
                        </p>
                        <p v-else>
                          <span class="analysisColor">收起解析</span
                          ><el-image :src="packIcon" />
                          ><el-image  />
                        </p>
                      </div>
                    </div>
@@ -353,10 +359,20 @@
    </div>

    <div class="bottom-btn" v-if="!loading">
      <el-button>保存</el-button>
      <el-button @click="openAnswers">提交</el-button>
      <el-button @click="redo">重做</el-button>
      <el-button @click="openAnswers">查看答案</el-button>
      <el-button style="height: 34px; padding: 4px 10px">保存</el-button>
      <el-button
        @click="handleQuestion"
        style="border-color: #1eb9ee; height: 34px; padding: 4px 10px"
        >提交</el-button
      >
      <el-button @click="redo" style="height: 34px; padding: 4px 10px"
        >重做</el-button
      >
      <el-button
        @click="openAnswers"
        style="border-color: #1eb9ee; height: 34px; padding: 4px 10px"
        >查看答案</el-button
      >
    </div>
  </div>
</template>
@@ -374,7 +390,7 @@
    };
  },
  mounted() {
    this.getIdPathList()
    this.getIdPathList();
  },
  methods: {
    // 数组转为字符串方法
@@ -424,7 +440,7 @@
      // }
    },
    openAnswers() {
      this.$data.loading = true
      this.$data.loading = true;
      for (let index = 0; index < this.cardList.length; index++) {
        const item = this.cardList[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
@@ -432,7 +448,7 @@
          citem.isComplete = true;
        }
      }
      this.$data.loading = false
      this.$data.loading = false;
    },
    watchParsing(data) {
      data.isUnfold = !data.isUnfold;
@@ -444,7 +460,7 @@
        path: "*",
        queryType: "*",
        productId: this.config.bookId,
        cmsPath: '24080\\63791\\63792\\63807',
        cmsPath: "24080\\63791\\63792\\63807",
        pading: {
          start: 0,
          size: 999,
@@ -680,6 +696,57 @@
        });
      }
    },
    // 批改题目  (练习,我的做题,我的收藏模式下)
    handleQuestion() {
      const list = this.$data.cardList
      for (let index = 0; index < list.length; index++) {
        const item = list[index];
        for (let cindex = 0; cindex < item.infoList.length; cindex++) {
          const citem = item.infoList[cindex];
          citem.isComplete = true;
           // 修改题目状态为完成
           citem.isComplete = true;
            // 批改题目
            if (citem.questionType == "multipleChoice") {
              // 多选题
              if (citem.answer.length == citem.userAnswer.length) {
                const sortedArr1 = citem.answer.slice().sort();
                const sortedArr2 = citem.userAnswer.slice().sort();
                citem.isRight = sortedArr1.every(
                  (value, index) => value === sortedArr2[index]
                );
              } else {
                citem.isRight = false;
              }
            } else if (
              citem.questionType == "singleChoice" ||
              citem.questionType == "judge"
            ) {
              if(citem.id == '63825') console.log('i',item);
              citem.isRight = citem.answer == citem.userAnswer;
            } else if (citem.questionType == "shortAnswer") {
              // 简答 翻译
              citem.isRight = null;
            } else if (citem.questionType == "completion") {
              // 填空
              if (typeof citem.answer == "string") {
                citem.isRight = citem.answer == citem.userAnswer[0];
              } else {
                if (citem.answer.length != citem.userAnswer.length) {
                  citem.isRight = false;
                } else {
                  citem.isRight = citem.answer.every(
                    (value, index) =>
                      value === citem.userAnswer[index]
                  );
                }
              }
            }
        }
        
      }
      this.$data.cardList = list
    },
  },
};
</script>
@@ -688,12 +755,29 @@
.catalogName {
  color: #00aeef;
  text-indent: 1em !important;
  font-size: 24px;
  font-size: 16px;
}
.examination {
  min-height: 100px;
  ul {
    list-style:none ;
  }
}
.border-box {
  border: 2px solid #e9e9e9;
  border-top: 0;
}
.border-box:first-child {
  border-top:2px solid #e9e9e9 ;
}
.questionContent {
  // display: flex;
  // justify-content: flex-start;
  margin-left: -36px;
}
.input {
  /deep/ .el-input__inner {
    height: 26px;
  }
}
p {
@@ -747,9 +831,9 @@
  padding-left: 12px;
  display: flex;
  align-items: center;
  font-size: 14px;
  font-size: 16px;
  .questionText {
    font-size: 14px;
    font-size: 16px;
    color: #000;
  }
  span {
@@ -776,12 +860,12 @@
      text-align: left;
      padding: 0 10px 10px 0px;
      min-width: 90%;
      font-size: 14px;
      font-size: 16px;
      line-height: 32px;
      color: #000;
      span {
        display: inline-block;
        font-size: 14px;
        font-size: 16px;
        // line-height: 26px;
        color: #000;
        font-weight: 400;
@@ -799,7 +883,7 @@
        border-top: 0 !important;
        border-left: 0 !important ;
        border-right: 0 !important ;
        border-bottom: 1px solid #000 !important;
        border-bottom: 1px solid #15c0f2 !important;
        border-radius: 0 !important;
      }
      /deep/ .el-input.is-disabled .el-input__inner {
@@ -858,7 +942,7 @@
    min-height: 48px;
    height: min-content;
    padding: 0 20px;
    font-size: 14px;
    font-size: 16px;
    background-color: #f4f4f4;
    .headerBox {
      width: 100%;
@@ -908,7 +992,7 @@
          }
          .errorBox {
            width: 100px;
            height: 48px;
            // height: 48px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
@@ -937,7 +1021,7 @@
  width: 100%;
  padding: 0 20px;
  background-color: #f4f4f4;
  font-size: 14px;
  font-size: 16px;
  color: #333;
}
/deep/ .el-collapse-item__arrow {
@@ -956,7 +1040,7 @@
    background-color: #f4f4f4;
    width: 100%;
    padding: 0 20px;
    font-size: 14px;
    font-size: 16px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
@@ -1007,7 +1091,7 @@
      span,
      p {
        text-indent: 0em;
        font-size: 14px;
        font-size: 16px;
        line-height: 20px;
      }
    }
@@ -1148,7 +1232,7 @@
}

.bottom-btn {
  margin-top: 50px;
  margin-top: 25px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;

 src/main.js

@@ -1,7 +1,7 @@
import Vue from "vue";
import App from "./App.vue";
import less from "less";
import "./books/childHealth/assets/main.css";
import "./books/childHealth/assets/main.less";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
import store from "./store";