shangshuan

litian

2025-02-07 7fe66523c87a00ea5be4d2f784356db825c6a3cd

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

@@ -1,10 +1,10 @@
<template>
  <div class="chapter" num="2">
    <!-- P1 -->
    <div class="page-box" page="10">
      <div v-if="showPageList.indexOf(10) > -1" class="fl f1">
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1" class="fl">
        <div class="img-g">
          <img class="" alt="" src="../../assets/images/mk.png" class="mk-img"/>
          <img alt="" src="../../assets/images/mk.png" class="mk-img"/>
        </div>
        <div class="bodystyle">

@@ -27,11 +27,11 @@
      </div>
    </div>
    <!-- P2 -->
    <div class="page-box" page="11">
      <div v-if="showPageList.indexOf(11) > -1">
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">2</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="rw-bg">
          <div class="bj4">
@@ -101,10 +101,10 @@
      </div>
    </div>
    <!-- P3 -->
    <div class="page-box" page="12">
      <div v-if="showPageList.indexOf(12) > -1">
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">3</li>
        </ul>
@@ -148,11 +148,11 @@
      </div>
    </div>
    <!-- P4 -->
    <div class="page-box" page="13">
      <div v-if="showPageList.indexOf(13) > -1">
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">4</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p>
@@ -177,10 +177,10 @@
    </div>

    <!-- P5 -->
    <div class="page-box" page="14">
      <div v-if="showPageList.indexOf(14) > -1">
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">5</li>
        </ul>
@@ -231,11 +231,11 @@
      </div>
    </div>
    <!-- P6 -->
    <div class="page-box" page="15">
      <div v-if="showPageList.indexOf(15) > -1">
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">6</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <div class="img-lefts">
@@ -279,10 +279,10 @@
    </div>

    <!-- P7 -->
    <div class="page-box" page="16">
      <div v-if="showPageList.indexOf(16) > -1">
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">7</li>
        </ul>
@@ -326,11 +326,11 @@
    </div>

    <!-- P8 -->
    <div class="page-box" page="17">
      <div v-if="showPageList.indexOf(17) > -1">
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
        <ul class="fl al-c fc ml-9">
          <li class="br">8</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
@@ -382,10 +382,10 @@
    </div>

    <!-- P9 -->
    <div class="page-box" page="18">
      <div v-if="showPageList.indexOf(18) > -1">
    <div class="page-box" page="19">
      <div v-if="showPageList.indexOf(19) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">9</li>
        </ul>
@@ -403,12 +403,27 @@
              电影《啊！摇篮》就是根据此事件改编而成。请扫描二维码阅读《马背上的摇篮》全文。
            </p>
            <p>思考：你在阅读完全文之后有什么感想？</p>
            <div class="pdf-text">
              <div class="pdf-con">
                <div class="pdf-view">
                  <span>
                    <svg t="1717640665152" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="11009" width="25.098" height="24.098">
                      <path
                        d="M896.152 336.108l0 576.229c0 26.511-21.508 48.019-48.018 48.019L175.866 960.356c-26.511 0-48.019-21.508-48.019-48.019L127.847 112.019c0-26.511 21.508-48.019 48.019-48.019l448.179 0c26.512 0 63.527 15.508 82.031 34.013l156.064 156.064C880.645 272.582 896.152 309.597 896.152 336.108zM832.127 384.127 624.045 384.127c-26.512 0-48.02-21.508-48.02-48.019L576.025 128.025 191.873 128.025l0 768.306 640.254 0L832.127 384.127zM335.93 448.153l352.14 0c9.004 0 16.006 7.003 16.006 16.006l0 32.013c0 9.003-7.002 16.007-16.006 16.007L335.93 512.179c-9.003 0-16.006-7.003-16.006-16.007l0-32.013C319.924 455.156 326.927 448.153 335.93 448.153zM704.076 592.21l0 32.013c0 9.004-7.002 16.007-16.006 16.007L335.93 640.23c-9.003 0-16.006-7.003-16.006-16.007L319.924 592.21c0-9.003 7.003-16.006 16.006-16.006l352.14 0C697.074 576.204 704.076 583.207 704.076 592.21zM704.076 720.262l0 32.013c0 9.003-7.002 16.006-16.006 16.006L335.93 768.281c-9.003 0-16.006-7.003-16.006-16.006l0-32.013c0-9.004 7.003-16.007 16.006-16.007l352.14 0C697.074 704.255 704.076 711.258 704.076 720.262zM640.051 320.102l188.076 0c-3.002-8.505-7.502-17.009-11.002-20.511L660.563 143.029c-3.502-3.501-12.006-8-20.512-11.003L640.051 320.102z"
                        p-id="11010"></path>
                    </svg>
                  </span>
                  <span @click="toUrl(1)">马背上的摇篮.pdf</span>
                </div>
              </div>
            </div>
          </div>
          <p><img class="rwmb-1" alt="" src="../../assets/images/xxxgjc.png" /></p>
          <p class="td-0">
            1.请你根据本学习任务的内容，将国外托育机构的发展历史和我国托育机构的发展历史制作成思维导图，并进行对照分析。
            <img class="jc-img" alt="" src="../../assets/images/SWDT.svg" />
            <span class="btn-box" @click="askAnswerOne = !askAnswerOne">
            <img class="jc-img" alt="" src="../../assets/images/SWDT.svg" title="请使用思维导图工具绘制思维导图，绘制完毕后下载为图片，上传到教材中" @click="showMindMapDialog"/>
            <span class="btn-box" @click="askAnswerOne = !askAnswerOne" title="查看答案">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
@@ -416,26 +431,57 @@
                </svg>
              </span>
          </p>
          </p>
          <div class="w100 fl ju-cn">
            <ul class="fl ju-ev w80 choice">
          <div class="w100 textarea-box">
            <ul class="fl w80">
              <li>
                <el-upload
                  ref="upload"
                  class="upload-demo"
                  action="'#'"
                  :limit="1"
                  :http-request="fileUpload"
                  :show-file-list="false"
                >
                <button class="btn-border btn-w" >
                  上传图片
                </button>
              </el-upload>
              </li>
              <li>
                <button class="btn-border btn-w">
              <li class="li-btn">
                <button class="btn-border btn-w" @click="delFile">
                  删除图片
                </button>
              </li>
            </ul>
            <div>
              <img class="img-a" alt="" :src="questionDataImg" />
            </div>
          </div>
          <div class="w100 " v-show="askAnswerOne">
            <img class="img-a" alt="" src="../../assets/images/answerImg1.png" />
            <img class="img-a" alt="" src="../../assets/images/answerImg2.png" />
          </div>
          <p class="td-0">
            2.结合本学习任务所学习的内容和生活实际，说一说你对我国农村地区托育机构发展的看法。
            <span class="btn-box" @click="askAnswerTwo = !askAnswerTwo" title="查看答案">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)" />
                </svg>
              </span>
          </p>
          <textarea v-model="questionData.askAbout.two" placeholder="请输入内容" rows="4"
                class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
           <div v-show="askAnswerTwo">
            <p>参考答案如下。</p>
            <p>我国农村地域差异较大，有些地区托育机构师资力量弱，教师专业素质不高，教师外出培训机会少，教学硬件条件差。有些偏远的农村根本没有托育机构。</p>
            <p>可以总结为:</p>
            <p>(1)资源不均，广度受限。</p>
            <p>(2)结构局部失衡，深度不足。</p>
            <p>(3)文化底蕴较弱，厚度不足。</p>
            <p>(4)标准化程度较低，效度欠佳。</p>
           </div>   
          <p><img class="rwmb-1" alt="" src="../../assets/images/ysyd.png" /></p>
          <p>
            1.张晓梅、申琳琳、潘雨晴：《国内外0—3岁婴幼儿托育研究比对及启示》，载《大庆师范学院学报》，2021（4）。
@@ -448,11 +494,11 @@
    </div>

    <!-- P10 -->
    <div class="page-box" page="19">
      <div v-if="showPageList.indexOf(19) > -1">
    <div class="page-box" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">10</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p>
@@ -465,10 +511,10 @@
      </div>
    </div>
    <!-- P11 -->
    <div class="page-box" page="20">
      <div v-if="showPageList.indexOf(20) > -1">
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">11</li>
        </ul>
@@ -521,12 +567,18 @@
            <tr class="tr">
              <td class="td1">学习运用</td>
              <td class="td">
                你觉得在哪些工作场景中可以运用到本学习任务所学内容?
                <p>你觉得在哪些工作场景中可以运用到本学习任务所学内容?</p>
                <textarea v-model="questionData.taskData.three" placeholder="请输入内容" rows="6"
                class="fz-15 textarea-box1" @change="setBookQuestion"></textarea>
              </td>
            </tr>
            <tr class="tr">
              <td class="td1">学习反思</td>
              <td class="td">请记录你在学习过程中的思考。</td>
              <td class="td">
                <p>请记录你在学习过程中的思考。</p>
                <textarea v-model="questionData.taskData.four" placeholder="请输入内容" rows="6"
                class="fz-15 textarea-box1" @change="setBookQuestion"></textarea>
              </td>
            </tr>
          </table>
        </div>
@@ -534,11 +586,11 @@
    </div>

    <!-- P12 -->
    <div class="page-box" page="21">
      <div v-if="showPageList.indexOf(21) > -1">
    <div class="page-box" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">12</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p><img class="rwmb-2" alt="" src="../../assets/images/aldr.png" /></p>
@@ -580,10 +632,10 @@
    </div>

    <!-- P13 -->
    <div class="page-box" page="22">
      <div v-if="showPageList.indexOf(22) > -1">
    <div class="page-box" page="23">
      <div v-if="showPageList.indexOf(23) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">13</li>
        </ul>
@@ -597,7 +649,7 @@
              <p class="fz-14">
                请你通过实地走访或者网络问卷等方式对所在地的托育机构进行调研，主要了解当地托育机构的类型并做整理。
              </p>
              <textarea v-model="questionData.askAbout.three" placeholder="请输入内容" rows="73"
              <textarea v-model="questionData.practiceData.one" placeholder="请输入内容" rows="73"
                class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
            </div>
          </div>
@@ -626,11 +678,11 @@
    </div>

    <!-- P14 -->
    <div class="page-box" page="23">
      <div v-if="showPageList.indexOf(23) > -1">
    <div class="page-box" page="24">
      <div v-if="showPageList.indexOf(24) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">14</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p>
@@ -671,10 +723,10 @@
    </div>

    <!-- P15 -->
    <div class="page-box" page="24">
      <div v-if="showPageList.indexOf(24) > -1">
    <div class="page-box" page="25">
      <div v-if="showPageList.indexOf(25) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">15</li>
        </ul>
@@ -688,6 +740,21 @@
              请你扫描二维码，仔细阅读中华人民共和国住房和城乡建设部发布的《托儿所、幼儿园建筑设计规范》（JGJ
              39—2016）（2019年版）的相关内容。
            </p>
            <div class="pdf-text">
              <div class="pdf-con">
                <div class="pdf-view">
                  <span>
                    <svg t="1717640665152" class="icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="11009" width="25.098" height="24.098">
                      <path
                        d="M896.152 336.108l0 576.229c0 26.511-21.508 48.019-48.018 48.019L175.866 960.356c-26.511 0-48.019-21.508-48.019-48.019L127.847 112.019c0-26.511 21.508-48.019 48.019-48.019l448.179 0c26.512 0 63.527 15.508 82.031 34.013l156.064 156.064C880.645 272.582 896.152 309.597 896.152 336.108zM832.127 384.127 624.045 384.127c-26.512 0-48.02-21.508-48.02-48.019L576.025 128.025 191.873 128.025l0 768.306 640.254 0L832.127 384.127zM335.93 448.153l352.14 0c9.004 0 16.006 7.003 16.006 16.006l0 32.013c0 9.003-7.002 16.007-16.006 16.007L335.93 512.179c-9.003 0-16.006-7.003-16.006-16.007l0-32.013C319.924 455.156 326.927 448.153 335.93 448.153zM704.076 592.21l0 32.013c0 9.004-7.002 16.007-16.006 16.007L335.93 640.23c-9.003 0-16.006-7.003-16.006-16.007L319.924 592.21c0-9.003 7.003-16.006 16.006-16.006l352.14 0C697.074 576.204 704.076 583.207 704.076 592.21zM704.076 720.262l0 32.013c0 9.003-7.002 16.006-16.006 16.006L335.93 768.281c-9.003 0-16.006-7.003-16.006-16.006l0-32.013c0-9.004 7.003-16.007 16.006-16.007l352.14 0C697.074 704.255 704.076 711.258 704.076 720.262zM640.051 320.102l188.076 0c-3.002-8.505-7.502-17.009-11.002-20.511L660.563 143.029c-3.502-3.501-12.006-8-20.512-11.003L640.051 320.102z"
                        p-id="11010"></path>
                    </svg>
                  </span>
                  <span @click="toUrl(2)">托儿所、幼儿园建筑设计规范.pdf</span>
                </div>
              </div>
            </div>
          </div>
          <h3 id="c006">四、托育机构房屋空间功能设计</h3>
          <p>
@@ -712,11 +779,11 @@
    </div>

    <!-- P16 -->
    <div class="page-box" page="25">
      <div v-if="showPageList.indexOf(25) > -1">
    <div class="page-box" page="26">
      <div v-if="showPageList.indexOf(26) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">16</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p class="img">表1-1 班级规模设置参考（全日制、半日制）</p>
@@ -748,10 +815,10 @@
    </div>

    <!-- P17 -->
    <div class="page-box" page="26">
      <div v-if="showPageList.indexOf(26) > -1">
    <div class="page-box" page="27">
      <div v-if="showPageList.indexOf(27) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">17</li>
        </ul>
@@ -767,7 +834,7 @@
              <p class="fz-14">
                请你根据托育机构房屋空间功能设计要求的内容绘制本知识点的思维导图，并进行展示和讲解。
              </p>
              <textarea v-model="questionData.askAbout.four" placeholder="请输入内容" rows="30"
              <textarea v-model="questionData.practiceData.two" placeholder="请输入内容" rows="30"
                  class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
            </div>
          </div>
@@ -792,11 +859,11 @@
    </div>

    <!-- P18 -->
    <div class="page-box" page="27">
      <div v-if="showPageList.indexOf(27) > -1">
    <div class="page-box" page="28">
      <div v-if="showPageList.indexOf(28) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">18</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <!-- 轮播图 -->
@@ -857,10 +924,10 @@
    </div>

    <!-- P19 -->
    <div class="page-box" page="28">
      <div v-if="showPageList.indexOf(28) > -1">
    <div class="page-box" page="29">
      <div v-if="showPageList.indexOf(29) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">19</li>
        </ul>
@@ -881,24 +948,74 @@
    </div>

    <!-- P20 -->
    <div class="page-box" page="29">
      <div v-if="showPageList.indexOf(29) > -1">
    <div class="page-box" page="30">
      <div v-if="showPageList.indexOf(30) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">20</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p><img class="rwmb-1" alt="" src="../../assets/images/xxxgjc.png" /></p>
          <p>
            1.请你结合本学习任务的内容，利用网络搜集关于我国0～3岁婴幼儿托育机构与3～6岁幼儿教育机构在房屋空间功能设计方面的不同点。
            <span class="btn-box" @click="askAnswerThree = !askAnswerThree" title="查看答案">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)" />
                </svg>
              </span>
          </p>
          <textarea v-model="questionData.askAbout.five" placeholder="请输入内容" rows="4"
          <textarea v-model="questionData.askAbout.three" placeholder="请输入内容" rows="4"
                class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <div v-show ="askAnswerThree">
            <p>参考答案如下。</p>
            <p>0~3岁婴幼儿的房间功能包含生活用房设计。婴幼儿的生活用房包括活动室、盥洗室、
              卫生间、睡眠室、储藏室和专用活动室(如美术活动室)。乳儿班房间的设置应包括睡眠
              区、活动区、配餐区、清洁区、储藏区等;托小班除了包括睡眠区、活动区、配餐区、清洁
              区、储藏区之外，还应设有卫生间等;托大班生活用房的使用面积及要求基本与幼儿园生活
              用房相同。托育机构空间设计旨在为婴幼儿创设一个适应其发展的空间环境，满足婴幼儿成
              长发育需求，使其感知爱与自由。托育机构空间专属的桌、椅等家具，应传递出包容、接
              纳、友好的心理感受。家具边角打磨成圆弧形、带有辅助婴幼儿稳定身体重心的扶手等，使
              他们使用时有安全感。有趣的造型、明快的色彩、适宜的游戏主题场景，为婴幼儿打造一个
              又一个梦幻的游戏环境，使他们在游戏中体验乐趣，实现个体发展。</p>
              <p>服务管理用房包括前台工作区、办公室、保健室、母婴室、值班室、资源室等空间。</p>
              <p>托育机构的卫生间应依据婴幼儿年龄班进行科学设置，面积应不小于10平方米。托小
              班和托大班的卫生间内应配备相应数量的幼儿专用坐便器、小便斗或小便池，托大班卫生间
              内还可以配置一些适合幼儿一人一位的蹲便、小便池，并加装隔板和扶手，从小培养幼儿保
              护隐私和尊重他人隐私的意识和习惯。</p>
              <p>3~6岁幼儿教育机构房屋空间功能包括:室外环境、教室、多功能室、走廊、餐厅、卧
              室等。</p>
              <p>托育机构要求区域划分合理，包括活动区、就餐区、睡眠区、喂养区、卫生间、盥洗室、
              配餐间、保健室，卫生间最好干湿分离。3~6岁幼儿教育机构没有喂养区，其余的和托育机
              构要求差不多。</p>
              <p>托育机构活动区:托小班、托大班要求和幼儿园一样，房屋使用面积至少70 平方米。
                <p>睡眠区:托小班、托大班要求和幼儿园一样，房屋使用面积至少60平方米。</p>
                <p>如果没有单独的活动区和睡眠区，二者可以合并，合并之后使用面积不得低于105平方
              米。最好每间教室都配备卫生间，如果不能达到这个标准，可以设置公共卫生间。儿童马
              桶的要求是每个房间每5名儿童配备1个马桶，即按1:5的比例配备。如果设置公共马桶，
              至少要有4个，男女分开并且需要准备1~2个小便盆。盥洗室的洗手池也要按照1:5的比
              例设置。配餐间要有独立的上下水。保健室至少12平方米，也应有上下水，没有的话则要
              有室内流动水设施。房屋内的开关离地面应在1.8米以上。一巾一杯架一定要设置在距离
              地面20厘米以上，避免有卫生死角。</p>

          </div>
          <p>
            2.如果你是一家托育机构的工作人员，你们单位的负责人交给你一个布置母婴室的工作任务，请你根据所学内容设计平面图并列举所需设施和设备。
            <span class="btn-box" @click="askAnswerFour = !askAnswerFour" title="查看答案">
                <svg xmlns="http://www.w3.org/2000/svg" width="20.501" height="20.501" viewBox="0 0 20.501 20.501">
                  <path class="a"
                    d="M3344.717-15308.5H3337.4a10.186,10.186,0,0,1-7.25-3,10.185,10.185,0,0,1-3-7.25A10.262,10.262,0,0,1,3337.4-15329a10.26,10.26,0,0,1,10.249,10.248,10.129,10.129,0,0,1-2.2,6.341v3.177A.734.734,0,0,1,3344.717-15308.5Zm-9.606-7.29h4.493l.527,1.419c.071.182.156.386.254.608a2.428,2.428,0,0,0,.273.512.986.986,0,0,0,.315.262.971.971,0,0,0,.454.1,1.05,1.05,0,0,0,.773-.327,1.025,1.025,0,0,0,.319-.723,3.3,3.3,0,0,0-.277-1.051l-.062-.161-2.889-7.313c-.119-.321-.228-.607-.335-.873a2.972,2.972,0,0,0-.323-.616,1.56,1.56,0,0,0-.5-.469,1.552,1.552,0,0,0-.781-.181,1.535,1.535,0,0,0-.773.181,1.475,1.475,0,0,0-.5.477,3.674,3.674,0,0,0-.362.739l-.239.627-.054.135-2.824,7.355c-.095.229-.179.46-.25.688a1.529,1.529,0,0,0-.073.477.978.978,0,0,0,.323.72,1.039,1.039,0,0,0,.746.315.838.838,0,0,0,.716-.3,4.676,4.676,0,0,0,.466-.985l.062-.165.527-1.449Zm3.747-1.5h-3.293l1.812-5.124,1.481,5.123Z"
                    transform="translate(-3327.144 15329)" />
                </svg>
              </span>
          </p>
          <textarea v-model="questionData.askAbout.six" placeholder="请输入内容" rows="4"
          <textarea v-model="questionData.askAbout.four" placeholder="请输入内容" rows="4"
                class="fz-15 textarea-box" @change="setBookQuestion"></textarea>
          <div v-show ="askAnswerFour">
            <p>参考答案如下。</p>
            <img class="img-a" alt="" src="../../assets/images/answerfour.png" /></p>
          </div>
          <p><img class="rwmb-1" alt="" src="../../assets/images/ysyd.png" /></p>
          <p>
            本书编写组：《0—3岁婴幼儿托育机构实用指南》，南京，江苏凤凰教育出版社，2019。
@@ -911,10 +1028,10 @@
    </div>

    <!-- P21 -->
    <div class="page-box" page="30">
      <div v-if="showPageList.indexOf(30) > -1">
    <div class="page-box" page="31">
      <div v-if="showPageList.indexOf(31) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">21</li>
        </ul>
@@ -965,12 +1082,18 @@
            <tr class="tr">
              <td class="td1">学习运用</td>
              <td class="td">
                你觉得在哪些工作场景中可以运用到本学习任务所学内容?
                <p>你觉得在哪些工作场景中可以运用到本学习任务所学内容?</p>
                <textarea v-model="questionData.taskData.five" placeholder="请输入内容" rows="6"
                class="fz-15 textarea-box1" @change="setBookQuestion"></textarea>
              </td>
            </tr>
            <tr class="tr">
              <td class="td1">学习反思</td>
              <td class="td">请记录你在学习过程中的思考。</td>
              <td class="td">
                <p>请记录你在学习过程中的思考。</p>
                <textarea v-model="questionData.taskData.six" placeholder="请输入内容" rows="6"
                class="fz-15 textarea-box1" @change="setBookQuestion"></textarea>
              </td>
            </tr>
          </table>
        </div>
@@ -978,11 +1101,11 @@
    </div>

    <!-- P22 -->
    <div class="page-box" page="31">
      <div v-if="showPageList.indexOf(31) > -1">
    <div class="page-box" page="32">
      <div v-if="showPageList.indexOf(32) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">22</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p><img class="rwmb-2" alt="" src="../../assets/images/aldr.png" /></p>
@@ -1020,10 +1143,10 @@
    </div>

    <!-- P23 -->
    <div class="page-box" page="32">
      <div v-if="showPageList.indexOf(32) > -1">
    <div class="page-box" page="33">
      <div v-if="showPageList.indexOf(33) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">23</li>
        </ul>
@@ -1073,11 +1196,11 @@
      </div>
    </div>
    <!-- P24 -->
    <div class="page-box" page="33">
      <div v-if="showPageList.indexOf(33) > -1">
    <div class="page-box" page="34">
      <div v-if="showPageList.indexOf(34) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">24</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
@@ -1112,10 +1235,10 @@
    </div>

    <!-- P25 -->
    <div class="page-box" page="34">
      <div v-if="showPageList.indexOf(34) > -1">
    <div class="page-box" page="35">
      <div v-if="showPageList.indexOf(35) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">25</li>
        </ul>
@@ -1159,11 +1282,11 @@
    </div>

    <!-- P26 -->
    <div class="page-box" page="35">
      <div v-if="showPageList.indexOf(35) > -1">
    <div class="page-box" page="36">
      <div v-if="showPageList.indexOf(36) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">26</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <h5 id="e024">1.托育机构区域材料</h5>
@@ -1186,10 +1309,25 @@
              <img class="img-0" alt="" src="../../assets/images/0037-1.jpg" />
            </p>
          </div>
          <p class="center">
            <img class="img-g" alt="" src="../../assets/images/0037-2.jpg" />
          </p>
          <p class="img">视频资源：婴幼儿益智类玩具——配对游戏</p>
          <div class="video-box">
            <p class="center text td-0">
              <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
                x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
                controlslist="nodownload" class="w100 video" style="border-radius: 10px"></video>
            </p>
            <p class="center videoname">
              <span>视频：婴幼儿益智类玩具——配对游戏</span>
              <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
                placement="top-start">
                <img :src="collectResourceList.findIndex(
                  (item) => item.id == '016175AFC879C8DD70F3D5C5E04D3680'
                ) > -1
                    ? collectCheck
                    : collectImg
                  " alt="" class="collect-btn" @click="handleCollect('video-01')" />
              </el-tooltip>
            </p>
          </div>
          <p>
            开发婴幼儿智力、提高婴幼儿操作探索能力和促进婴幼儿精细动作发展是益智区的主要目标。托育机构可以提供的材料包括拼图、图形玩具、串珠、分类玩具、套桶、打结绳、配对玩具、容器、瓶盖等。
          </p>
@@ -1201,10 +1339,10 @@
    </div>

    <!-- P27 -->
    <div class="page-box" page="36">
      <div v-if="showPageList.indexOf(36) > -1">
    <div class="page-box" page="37">
      <div v-if="showPageList.indexOf(37) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">27</li>
        </ul>
@@ -1258,11 +1396,11 @@
    </div>

    <!-- P28-->
    <div class="page-box" page="37">
      <div v-if="showPageList.indexOf(37) > -1">
    <div class="page-box" page="38">
      <div v-if="showPageList.indexOf(38) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">28</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p class="td-0">
@@ -1316,10 +1454,10 @@
    </div>

    <!-- P29 -->
    <div class="page-box" page="38">
      <div v-if="showPageList.indexOf(38) > -1">
    <div class="page-box" page="39">
      <div v-if="showPageList.indexOf(39) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">29</li>
        </ul>
@@ -1348,11 +1486,11 @@
    </div>

    <!-- P30-->
    <div class="page-box" page="39">
      <div v-if="showPageList.indexOf(39) > -1">
    <div class="page-box" page="40">
      <div v-if="showPageList.indexOf(40) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">30</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p class='td-0'>
@@ -1392,10 +1530,10 @@
    </div>

    <!-- P31 -->
    <div class="page-box" page="40">
      <div v-if="showPageList.indexOf(40) > -1">
    <div class="page-box" page="41">
      <div v-if="showPageList.indexOf(41) > -1">
        <ul class="fl al-c jc-fe fc">
          <li class="br">模块一</li>
          <li class="br1">模块一</li>
          <li>托育机构管理实务</li>
          <li class="br-r">31</li>
        </ul>
@@ -1419,11 +1557,11 @@
    </div>

    <!-- P32-->
    <div class="page-box" page="41">
      <div v-if="showPageList.indexOf(41) > -1">
    <div class="page-box" page="42">
      <div v-if="showPageList.indexOf(42) > -1">
        <ul class="fl al-c  fc ml-9">
          <li class="br">32</li>
          <li>托育机构管理实务</li>
          <li class="lh">托育机构管理实务</li>
        </ul>
        <div class="bodystyle">
          <p><img class="rwmb-1" alt="" src="../../assets/images/xxxgjc.png" /></p>
@@ -1453,9 +1591,22 @@
        </div>
      </div>
    </div>
    <preView :isClear="dialogVisible" :md5="p_md5" :pdfTitle="pdfTitle" ref="pdfDialogRef"></preView>
    <el-dialog :visible.sync="mindMapDialog"  width="80%" top="2vh" append-to-body>
      <div class="wendabox">
        <iframe src="https://www.iodraw.com/mind" frameborder="0"></iframe>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { getResourcePath,uploadFilePath } from "@/assets/methods/resources";
import {
  getCollectResource,
  setCollectResource,
} from "@/assets/methods/resources";
import preView from '@/components/pdfview/index.vue'
import tool from '@/assets/js/toolClass.js'
export default {
  name: "chapterOne",
  props: {
@@ -1463,12 +1614,29 @@
      type: Array,
    },
  },
  components: {
    preView,
  },
  data() {
    return {
      dialogVisible: false,
      pdfTitle: '',
      p_md5: '',
      pdfDialogRef: "",
      mindMapDialog: false,
      collectImg: require("../../assets/images/icon/heart.png"),
      collectCheck: require("../../assets/images/icon/heart-check.png"),
      videoPathOne: "",
      collectResourceList: [],
      chapterData: {
        isCollectVideo: false,
      },
      questionData: {
        taskData:{
          one:"",
          two:"",
          three:"",
          four:"",
        },
        askAbout: {
          one: "",
@@ -1479,12 +1647,28 @@
          six:"",
          seven:"",
          eight:""
        },
        practiceData:{
          one:"",
          two:""
        }
      },
      askAnswerOne: false,
      askAnswerTwo: false,
      askAnswerThree: false,
      askAnswerFour: false,
      pdfMd5: {
          1: {
            md5: '0107C87C520689110F980461151A7DDE',
            name: '马背上的摇篮',
          },
          2: {
            md5: '4F277404C357505B6B316C7CEEB3F431',
            name: '《托儿所、幼儿园建筑设计规范》',
          }
         
        },
      questionDataImg:""
    };
  },
  async mounted() {
@@ -1494,9 +1678,32 @@
    );
    if (bookQuestion) {
      this.questionData = JSON.parse(bookQuestion);
      this.questionDataImg = getResourcePath(this.questionData.askAbout.one);
    }
    this.getVidoePath();
    this.collectResourceList = await getCollectResource(
      this.config.activeBook.bookId
    );
    
  },
  methods: {
    async getVidoePath() {
      this.videoPathOne = await getResourcePath(
        "016175AFC879C8DD70F3D5C5E04D3680"
      );
      console.log(this.videoPathOne,111)
    },
    closeDialog() {
      this.dialogVisible = false
    },
    toUrl(val) {
      if (val) {
        this.dialogVisible = true
        this.p_md5 = this.pdfMd5[val].md5
        this.pdfTitle = this.pdfMd5[val].name
        this.$refs.pdfDialogRef.openDialog();
      }
    },
    setBookQuestion() {
      localStorage.setItem(
        "childcareInstitutionsManagement-book-chapter01-question",
@@ -1504,6 +1711,109 @@
      );
    },

    handleCollect(e) {
      if (e == "video-01") {
        this.handleCollectResource(
          "016175AFC879C8DD70F3D5C5E04D3680",
          "016175AFC879C8DD70F3D5C5E04D3680",
          "",
          "视频",
          "bits",
          "视频：婴幼儿益智类玩具——配对游戏"
        );
        this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
      }
      this.handleChapterData();
    },

    handleChapterData() {
      localStorage.setItem(
        "childcareInstitutionsManagement-book-chapter01-Data",
        JSON.stringify(this.chapterData)
      );
    },

    //打开思维导图
    showMindMapDialog(){
      this.mindMapDialog = true

    },

    //上传图片
    fileUpload(file){
      return new Promise((resolve, reject) => {
      const isJPG = file.file.type === 'image/jpeg' || file.file.type === 'image/png'
      if (!isJPG) {
        ElMessage.error('上传文件只能是 jpg/png 格式!')
        return reject()
      }
      const FileName = file.file.name.split('.')[0]
      const Extension = file.file.name.split('.')[1]
      const FileType = file.file.type
      let size = 1024
      tool
        .getFileMd5(file.file, size * 1024)
        .then(async(e) => {
          if (!(this.questionData.askAbout.one == e)) {
            const imgData = new FormData()
            imgData.append('Md5', e)
            imgData.append('FileName', FileName)
            imgData.append('Extension', Extension)
            imgData.append('FileType', FileType)
            imgData.append('MetaData', null)
            imgData.append('file', file.file)
            let rData = await uploadFilePath(imgData);
            if (rData){
              this.questionData.askAbout.one = e
              this.questionDataImg = await getResourcePath(e);
            }
          } else {
            ElMessage.error('当前文件已上传，请勿重复操作！')
          }
        })
        .catch((e) => {
          console.error(e)
        })
      })

    },
    //删除
    delFile(){
      this.questionData.askAbout.one = ''
      this.questionDataImg = ''
    },
    //资源收藏事件
    // 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
      );
    },

  }
};
</script>