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

闫增涛

2024-06-24 94397fef956e5181bd3f905e844d61dcb96814e3

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

 src/App.vue

@@ -65,7 +65,7 @@
        process.env.VUE_APP_RESOURCE_CTX +
          (process.env.VUE_APP_ENV == "product"
            ? process.env.VUE_APP_BOOK_ID
            : "mathBook")
            : "artAndDrama")
      );
      // 测试试读30页
      // this.activeBook.tryPageCount = 10;

 src/assets/images/crying-face.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718283143947" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="110219" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F9DF1E" p-id="110220"></path><path d="M704.984615 433.230769h-7.876923c-27.569231-7.876923-106.338462-47.261538-86.646154-90.584615 11.815385-35.446154 110.276923-59.076923 165.415385-70.892308 11.815385-3.938462 19.692308 3.938462 23.630769 15.753846 3.938462 11.815385-3.938462 19.692308-15.753846 23.63077-66.953846 11.815385-129.969231 35.446154-137.846154 47.261538 3.938462 7.876923 35.446154 27.569231 63.015385 39.384615 11.815385 3.938462 15.753846 15.753846 11.815385 27.569231-3.938462 3.938462-7.876923 7.876923-15.753847 7.876923z" fill="#542913" p-id="110221"></path><path d="M797.198342 462.421106a78.769231 39.384615 56.995 1 0 66.057691-42.906563 78.769231 39.384615 56.995 1 0-66.057691 42.906563Z" fill="#4DCEFF" p-id="110222"></path><path d="M512 707.465846m-157.538462 0a157.538462 157.538462 0 1 0 315.076924 0 157.538462 157.538462 0 1 0-315.076924 0Z" fill="#542913" p-id="110223"></path><path d="M393.846154 809.865846v-11.815384c7.876923-59.076923 59.076923-98.461538 118.153846-94.523077 59.076923-3.938462 110.276923 35.446154 118.153846 94.523077v11.815384c-59.076923 63.015385-157.538462 70.892308-220.553846 11.815385-7.876923 0-11.815385-3.938462-15.753846-11.815385z" fill="#EA3B3B" p-id="110224"></path><path d="M319.015385 433.230769c-7.876923 0-15.753846-3.938462-19.692308-11.815384-3.938462-11.815385 0-19.692308 11.815385-23.63077 31.507692-11.815385 63.015385-35.446154 63.015384-43.323077-7.876923-11.815385-70.892308-31.507692-137.846154-43.323076-11.815385-3.938462-15.753846-15.753846-15.753846-23.63077 3.938462-11.815385 11.815385-19.692308 23.630769-15.753846 55.138462 11.815385 153.6 35.446154 165.415385 70.892308 15.753846 47.261538-63.015385 82.707692-86.646154 90.584615h-3.938461z" fill="#542913" p-id="110225"></path><path d="M145.776323 508.859333a39.384615 78.769231 33.005 1 0 85.813125-132.115383 39.384615 78.769231 33.005 1 0-85.813125 132.115383Z" fill="#4DCEFF" p-id="110226"></path></svg>

 src/assets/images/hollow-cloud.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718282816195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="87529" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="170"><path d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z" fill="rgb(245, 130, 32)" p-id="87530"></path></svg>

 src/assets/images/smiling-face.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718283080456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="97920" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1005.038 514.114c0 271.97-220.503 492.457-492.48 492.457-271.962 0-492.449-220.487-492.449-492.457 0-271.984 220.487-492.464 492.449-492.464 271.977 0 492.48 220.48 492.48 492.464z" fill="#F5CB2B" p-id="97921"></path><path d="M288.394 516.789c-19.68 0-35.773-16.094-35.773-35.773v-85.854c0-19.673 16.093-35.773 35.773-35.773 19.68 0 35.773 16.101 35.773 35.773v85.854c0 19.679-16.093 35.773-35.773 35.773zM736.752 516.789c-19.68 0-35.773-16.094-35.773-35.773v-85.854c0-19.673 16.094-35.773 35.773-35.773 19.681 0 35.773 16.101 35.773 35.773v85.854c0 19.679-16.092 35.773-35.773 35.773z" fill="#3E3417" p-id="97922"></path><path d="M511.79 702.128c-154.229 0-196.709-88.296-198.441-92.056-5.787-12.56-0.302-27.433 12.266-33.227 12.567-5.778 27.425-0.294 33.227 12.259 1.115 2.253 32.73 62.942 152.949 62.942 120.521 0 153.476-61.549 154.816-64.163 5.967-12.484 20.825-17.616 33.303-11.656 12.492 5.961 17.69 21.067 11.738 33.544-1.809 3.775-45.885 92.357-199.858 92.357z" fill="#3E3417" p-id="97923"></path><path d="M259.703 569.793c0 39.579-32.096 71.652-71.667 71.652-39.586 0-71.653-32.073-71.653-71.652 0-39.586 32.066-71.659 71.653-71.659 39.571 0 71.667 32.073 71.667 71.659zM949.298 569.793c0 39.579-32.082 71.652-71.652 71.652-39.586 0-71.651-32.073-71.651-71.652 0-39.586 32.065-71.659 71.651-71.659 39.57 0 71.652 32.073 71.652 71.659z" fill="#EC7184" p-id="97924"></path></svg>

 src/assets/images/solid-cloud.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718282810750" class="icon" viewBox="0 0 1355 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="87382" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="170"><path d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z" fill="rgb(245, 130, 32)" p-id="87383"></path></svg>

 src/books/artAndDrama/assets/images/icon/crying-face.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718283143947" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="110219" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M512 512m-512 0a512 512 0 1 0 1024 0 512 512 0 1 0-1024 0Z" fill="#F9DF1E" p-id="110220"></path><path d="M704.984615 433.230769h-7.876923c-27.569231-7.876923-106.338462-47.261538-86.646154-90.584615 11.815385-35.446154 110.276923-59.076923 165.415385-70.892308 11.815385-3.938462 19.692308 3.938462 23.630769 15.753846 3.938462 11.815385-3.938462 19.692308-15.753846 23.63077-66.953846 11.815385-129.969231 35.446154-137.846154 47.261538 3.938462 7.876923 35.446154 27.569231 63.015385 39.384615 11.815385 3.938462 15.753846 15.753846 11.815385 27.569231-3.938462 3.938462-7.876923 7.876923-15.753847 7.876923z" fill="#542913" p-id="110221"></path><path d="M797.198342 462.421106a78.769231 39.384615 56.995 1 0 66.057691-42.906563 78.769231 39.384615 56.995 1 0-66.057691 42.906563Z" fill="#4DCEFF" p-id="110222"></path><path d="M512 707.465846m-157.538462 0a157.538462 157.538462 0 1 0 315.076924 0 157.538462 157.538462 0 1 0-315.076924 0Z" fill="#542913" p-id="110223"></path><path d="M393.846154 809.865846v-11.815384c7.876923-59.076923 59.076923-98.461538 118.153846-94.523077 59.076923-3.938462 110.276923 35.446154 118.153846 94.523077v11.815384c-59.076923 63.015385-157.538462 70.892308-220.553846 11.815385-7.876923 0-11.815385-3.938462-15.753846-11.815385z" fill="#EA3B3B" p-id="110224"></path><path d="M319.015385 433.230769c-7.876923 0-15.753846-3.938462-19.692308-11.815384-3.938462-11.815385 0-19.692308 11.815385-23.63077 31.507692-11.815385 63.015385-35.446154 63.015384-43.323077-7.876923-11.815385-70.892308-31.507692-137.846154-43.323076-11.815385-3.938462-15.753846-15.753846-15.753846-23.63077 3.938462-11.815385 11.815385-19.692308 23.630769-15.753846 55.138462 11.815385 153.6 35.446154 165.415385 70.892308 15.753846 47.261538-63.015385 82.707692-86.646154 90.584615h-3.938461z" fill="#542913" p-id="110225"></path><path d="M145.776323 508.859333a39.384615 78.769231 33.005 1 0 85.813125-132.115383 39.384615 78.769231 33.005 1 0-85.813125 132.115383Z" fill="#4DCEFF" p-id="110226"></path></svg>

 src/books/artAndDrama/assets/images/icon/folder.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg t="1718768741713" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6990" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="170"> <path d="M1003.153333 404.96a52.933333 52.933333 0 0 0-42.38-20.96H896V266.666667a53.393333 53.393333 0 0 0-53.333333-53.333334H461.253333a10.573333 10.573333 0 0 1-7.54-3.126666L344.46 100.953333A52.986667 52.986667 0 0 0 306.746667 85.333333H53.333333a53.393333 53.393333 0 0 0-53.333333 53.333334v704a53.393333 53.393333 0 0 0 53.333333 53.333333h796.893334a53.453333 53.453333 0 0 0 51.453333-39.333333l110.546667-405.333334a52.953333 52.953333 0 0 0-9.073334-46.373333zM53.333333 128h253.413334a10.573333 10.573333 0 0 1 7.54 3.126667l109.253333 109.253333A52.986667 52.986667 0 0 0 461.253333 256H842.666667a10.666667 10.666667 0 0 1 10.666666 10.666667v117.333333H173.773333a53.453333 53.453333 0 0 0-51.453333 39.333333L42.666667 715.366667V138.666667a10.666667 10.666667 0 0 1 10.666666-10.666667z m917.726667 312.14l-110.546667 405.333333a10.666667 10.666667 0 0 1-10.286666 7.86H63.226667a10.666667 10.666667 0 0 1-10.286667-13.473333l110.546667-405.333333A10.666667 10.666667 0 0 1 173.773333 426.666667h787a10.666667 10.666667 0 0 1 10.286667 13.473333z" fill="rgb(245, 130, 32)" p-id="6991"></path></svg>

 src/books/artAndDrama/assets/images/icon/hollow-cloud.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718282816195" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="87529" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="170"><path d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z" fill="rgb(245, 130, 32)" p-id="87530"></path></svg>

 src/books/artAndDrama/assets/images/icon/smiling-face.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718283080456" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="97920" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M1005.038 514.114c0 271.97-220.503 492.457-492.48 492.457-271.962 0-492.449-220.487-492.449-492.457 0-271.984 220.487-492.464 492.449-492.464 271.977 0 492.48 220.48 492.48 492.464z" fill="#F5CB2B" p-id="97921"></path><path d="M288.394 516.789c-19.68 0-35.773-16.094-35.773-35.773v-85.854c0-19.673 16.093-35.773 35.773-35.773 19.68 0 35.773 16.101 35.773 35.773v85.854c0 19.679-16.093 35.773-35.773 35.773zM736.752 516.789c-19.68 0-35.773-16.094-35.773-35.773v-85.854c0-19.673 16.094-35.773 35.773-35.773 19.681 0 35.773 16.101 35.773 35.773v85.854c0 19.679-16.092 35.773-35.773 35.773z" fill="#3E3417" p-id="97922"></path><path d="M511.79 702.128c-154.229 0-196.709-88.296-198.441-92.056-5.787-12.56-0.302-27.433 12.266-33.227 12.567-5.778 27.425-0.294 33.227 12.259 1.115 2.253 32.73 62.942 152.949 62.942 120.521 0 153.476-61.549 154.816-64.163 5.967-12.484 20.825-17.616 33.303-11.656 12.492 5.961 17.69 21.067 11.738 33.544-1.809 3.775-45.885 92.357-199.858 92.357z" fill="#3E3417" p-id="97923"></path><path d="M259.703 569.793c0 39.579-32.096 71.652-71.667 71.652-39.586 0-71.653-32.073-71.653-71.652 0-39.586 32.066-71.659 71.653-71.659 39.571 0 71.667 32.073 71.667 71.659zM949.298 569.793c0 39.579-32.082 71.652-71.652 71.652-39.586 0-71.651-32.073-71.651-71.652 0-39.586 32.065-71.659 71.651-71.659 39.57 0 71.652 32.073 71.652 71.659z" fill="#EC7184" p-id="97924"></path></svg>

 src/books/artAndDrama/assets/images/icon/solid-cloud.svg

New file
@@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1718282810750" class="icon" viewBox="0 0 1355 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="87382" xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="170"><path d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z" fill="rgb(245, 130, 32)" p-id="87383"></path></svg>

 src/books/artAndDrama/assets/main.less

@@ -48,7 +48,7 @@
div.bodystyle {
  font-size:18px;
  text-align:justify;
  margin:5% 12%;
  margin:0 12%;
  line-height:30px;

}
@@ -409,7 +409,6 @@
  font-size:1.1em;
  padding-left: 1em;
}

 // 自定义
 .page-box {
    position: relative;
@@ -425,6 +424,25 @@
  //   font-weight: bold;
  //   font-size: 18px;
  // }
  
  .folder{
    color: brown;
    font-size: 18px;
    display: flex;
    align-items: center;
    margin-right: 7%;
  }
  .folder>img{
    color: brown;
    height: 20px;
    width: auto;
    margin-top: 1px;
  }
  .Options{
    display: flex;
    flex-direction: row;
    cursor: pointer;
  }
  .text{
  margin: 0 8%;
  font-family: "STkaiti";
@@ -435,6 +453,12 @@
  font-family: "STkaiti";
  font-size: 22px;
  }
  .text2{
    margin: 0 8%;
    font-family: "STkaiti";
    font-size: 19px;
    text-align: left;
  }
  //底部参考文献的样式
  .references{
    font-family: "STkaiti";

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

@@ -66,36 +66,19 @@
          <p class="center openImgBox">
            <img class="img-e" alt="" src="../../assets/images/1-2蚂蚁举大树.gif" />
          </p>
          <p class="text">蚂蚁是典型的（　　）昆虫。（多选）</p>
          <p class="text">A.群居</p>
          <p class="text">B.社会性</p>
          <p class="text">C.独居</p>
          <p class="text">蚂蚁内部有（　　）分工。（多选）</p>
          <p class="text">A.明确的</p>
          <p class="text">B.奇怪的</p>
          <p class="text">C.有序的</p>
          <p class="text">一个（　　）群体少不了默契的配合。（多选）</p>
          <p class="text">A.团结的</p>
          <p class="text">B.优秀的</p>
          <p class="text">C.松散的</p>
          <choice class="text" :questions="questions" :primaryColor="accentColor"  hoverBackgroundColor="#F58200" hoverColor="white"></choice>
          <p class="center text">
          <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"  @play="videoPlay"
            style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
          </p>
            <p class="center videoname">
            <span>视频：我们是一家人 </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start">
              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
                @click="handleCollect('video')" />
            </el-tooltip>
          </p>
        </div>
@@ -212,12 +195,15 @@
            <img class="img-e" alt="" src="../../assets/images/1-4.gif" style="height: auto; width: 50%" />
          </h1>
          <p class="text">
            <span class="hs1">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
            <span
              class="hs1">◇</span>生活中，我们总会遇到各种各样的诱惑。面对诱惑时，我们的内心常常会有两个不同的声音出现：一个声音要求我们严于律己，另一个声音要求我们随心所欲。请你分析一下，当蚂蚁队长面对掉落的奶酪渣的诱惑时，他内心的两个声音会说些什么呢？
          </p>
          <p class="text">正义队长：“
            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60"  @change="setBookQuestion" />。”
            <input v-model="questionData.warnUp.one" class="input-bottom-border input-w-60"
              @change="setBookQuestion" />。”
          </p>
          <p class="text">黑暗队长：“ <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-60" @change="setBookQuestion" />。”
          <p class="text">黑暗队长：“ <input v-model="questionData.warnUp.two" class="input-bottom-border input-w-60"
              @change="setBookQuestion" />。”
          </p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
@@ -354,7 +340,7 @@
          <p class="text">
            孔融四岁就懂礼貌、知谦让，是我们学习的好榜样，让我们运用本单元的戏剧知识，把他的故事表演出来吧！
          </p>
          <p class="center">
          <p class="center text">
            <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"  @play="videoPlay"
@@ -362,18 +348,10 @@
          </p>
          <p class="center videoname">
            <span>视频：我们是一家人 </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start">
              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
                @click="handleCollect('video')" />
            </el-tooltip>
          </p>
        </div>
@@ -389,18 +367,18 @@

<script>
import matching from "@/components/matching/matching.vue";
import choice from "@/components/choice/choice.vue"
import { getResourcePath } from "@/assets/methods/resources";
export default {
  name: "chapterOne",
  components: { matching },
  components: {
    matching,
    choice,
  },
  props: {
    showPageList: {
      type: Array,
    },
    primaryColor: {
      type: String,
      default: "red",
    }
  },
  //在这里对调用的方法进行挂载
  mounted() {
@@ -470,30 +448,46 @@
        answer: [
          {
            id: "FB34",
            linkValue: "<span class='un1'>我</span>请你吃苹果吧！",
            value: "强调请客的人是“我”",
            linkValue: "强调请客的人是“我”",
            value: "<span class='un1'>我</span>请你吃苹果吧！",
          },
          {
            id: "64D6",
            linkValue: "我<span class='un1'>请</span>你吃苹果吧！",
            value: "强调是请客",
            linkValue: "强调是请客",
            value: "我<span class='un1'>请</span>你吃苹果吧！",
          },  
          {
            id: "2ED4",
            linkValue: "我请<span class='un1'>你</span>吃苹果吧！",
            value: "强调请的是“你”",
            linkValue: "强调请的是“你”",
            value: "我请<span class='un1'>你</span>吃苹果吧！",
          },
          {
            id: "44DE",
            linkValue: "我请你吃<span class='un1'>苹果</span>吧！",
            value: "强调吃的东西是“苹果”",
            linkValue: "强调吃的东西是“苹果”",
            value: "我请你吃<span class='un1'>苹果</span>吧！",
          },
        ],
        optionStyle: undefined,
        id: 489306,
        options: {
          linkValues: [
          linkValues: [{
            oldId: "64D6",
            txt: "强调是请客",
          },
          {
            oldId: "2ED4",
            txt: "强调请的是“你”",
          },
          {
            oldId: "44DE",
            txt: "强调吃的东西是“苹果”",
          },
          {
            oldId: "FB34",
            txt: "强调请客的人是“我”",
          },
          ],
          values: [{
            oldId: "FB34",
            txt: "<span class='un1'>我</span>请你吃苹果吧！",

@@ -511,24 +505,6 @@
            txt: "我请你吃<span class='un1'>苹果</span>吧！",
          },
          ],
          values: [
          {
            oldId: "64D6",
            txt: "强调是请客",
          },
          {
            oldId: "2ED4",
            txt: "强调请的是“你”",
          },
          {
            oldId: "44DE",
            txt: "强调吃的东西是“苹果”",
          },
          {
            oldId: "FB34",
            txt: "强调请客的人是“我”",
          },
          ],
        },
        questionType: "matching",
        stem: {
@@ -540,6 +516,134 @@
        value: [],
        answerImg: require("../../assets/images/matching-one.png"),
      },
      questions: [
        {
          analysisCon: "undefined",
          answer: ['A', 'B'],
          difficulty: 0,
          id: 47772,
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "群居",
              "value": "A"
            },
            {
              "img": "",
              "index": "73EE",
              "txt": "社会性",
              "value": "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "独居",
              "value": "C"
            },
          ],
          optionStyle: "Image",
          questionType: "singleChoice",
          score: 2,
          stem: {
            "stemTxt": "1、蚂蚁是典型的(  )昆虫。(多选)"
          },
          stemStyle: "Txt",
          userAnswer: "",
          // 单选题这里的字段内容就是"单选题"
          type: 'multi'
        },
        {
          analysisCon: "undefined",
          answer: ['A', 'C'],
          difficulty: 0,
          id: 47773,
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "明确的",
              "value": "A"
            },
            {
              "img": "",
              "index": "73EE",
              "txt": "奇怪的",
              "value": "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "有序的",
              "value": "C"
            },
          ],
          optionStyle: "Image",
          questionType: "singleChoice",
          score: 2,
          stem: {
            "stemTxt": "2、蚂蚁内部又(  )分工。(多选)"
          },
          stemStyle: "Txt",
          userAnswer: "",
          // 单选题这里的字段内容就是"单选题"
          type: 'multi'
        },
        {
          analysisCon: "undefined",
          answer: ['A', 'B'],
          difficulty: 0,
          id: 47774,
          isCollect: false,
          isComplete: false,
          isRight: null,
          isUnfold: "",
          isUserAnswer: false,
          number: 1,
          options: [
            {
              "img": "",
              "index": "3CA6",
              "txt": "团结的",
              "value": "A"
            },
            {
              "img": "",
              "index": "73EE",
              "txt": "优秀的",
              "value": "B"
            },
            {
              "img": "",
              "index": "6AEF",
              "txt": "松散的",
              "value": "C"
            },
          ],
          optionStyle: "Image",
          questionType: "singleChoice",
          score: 2,
          stem: {
            "stemTxt": "3、一个(  )群体少不了默契的配合。(多选)"
          },
          stemStyle: "Txt",
          userAnswer: "",
          // 单选题这里的字段内容就是"单选题"
          type: 'multi'
        },
      ],
      questionData: {
        warnUp: {
          one: "",

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

@@ -82,25 +82,23 @@
          <p class="text">黄色：柠檬、<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.four"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">红色：鞭炮、<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18" @change="setBookQuestion"
              style="width: 15%" />、<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">红色：鞭炮、<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.six"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">绿色：叶子、<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.eight"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">黑色：黑板、<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18" @change="setBookQuestion"
              style="width: 15%" />、<input v-model="questionData.warnUp.ten" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">黑色：黑板、<input v-model="questionData.warnUp.nine" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.ten"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <p class="text">蓝色：大海、<input v-model="questionData.warnUp.eleven" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 15%" />、<input v-model="questionData.warnUp.twelve"
              class="input-bottom-border fz-18" @change="setBookQuestion" style="width: 15%" />。</p>
          <h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <h3 class="lefth3" id="c014" style="margin-top: 7%;"><img class="img-gn1" alt=""
              src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>阅读下面的文字，为小蚂蚁选择一种性格吧。</p>
          <choice class="text" :questions="questions"  :primaryColor="accentColor"  hoverBackgroundColor="green" hoverColor="white"></choice>
          <p class="center  openImgBox"><img class="img-e" alt="" src="../../assets/images/2-2.gif" /></p>
          <p class="text">蚂蚁队长走路昂首挺胸、步伐坚定，它是一只（　　）蚂蚁；小蚂蚁走起路来小心翼翼，眼神飘忽不定，它是一只（　　）蚂蚁；蚂蚁小妹面带微笑，时刻愿意帮助大家，它是一只（　　）蚂蚁。</p>
          <p class="text">A.胆小的</p>
          <p class="text">B.善良的</p>
          <p class="text">C.沉稳的</p>
        </div>
        <!-- 此次为页脚部分（需要设置页码） -->
        <div class="page-footer">
@@ -120,12 +118,13 @@
          <h3 class="lefth3" id="c015"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
          <p class="text">常言道：良言一句三冬暖，恶语伤人六月寒。语言在人与人的交往中起着重要的作用，有着无穷的力量。</p>
          <p class="text"><span class="hs1">◇</span>如果朋友心情不好，你该怎么安慰他/她呢？</p>
          <p class="text">“<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18" @change="setBookQuestion"
              style="width: 80%" />。”</p>
          <p class="text">“<input v-model="questionData.warnUp.thirteen" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 80%" />。”</p>
          <p class="text"><span class="hs1">◇</span>如果你邀请好朋友来家里做客，你该说什么来欢迎他/她呢？</p>
          <p class="text">“<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18" @change="setBookQuestion"
              style="width: 80%" />。”</p>
          <h3 class="lefth3" id="c016" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <p class="text">“<input v-model="questionData.warnUp.fourteen" class="input-bottom-border fz-18"
              @change="setBookQuestion" style="width: 80%" />。”</p>
          <h3 class="lefth3" id="c016" style="margin-top: 7%;"><img class="img-gn1" alt=""
              src="../../assets/images/czysj.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>请根据提示读出句子，注意声音和语气的变化。</p>
          <p class="text"><span class="hs">这一大块奶酪都是我的了！</span>（一只狡猾的蚂蚁，想要把奶酪偷偷地占为己有）</p>
          <p class="text"><span class="hs">这一大块奶酪都是我的了！</span>（一只善良的蚂蚁，在帮助他人后得到了奖励）</p>
@@ -166,13 +165,17 @@
          <p class="text">待人接物有礼有节、谦卑恭敬，在让他人感到如沐春风的同时，也会让自己受到他人的尊重和理解。请说一说，在下面这些场景中你应该如何做？</p>
          <p class="text"><span class="hs1">◇</span>你看到妈妈的水杯没水了。</p>
          <p class="text"><span class="hs1">◇</span>电梯里，你站在最前排，后面的人需要下电梯。</p>
          <h3 class="lefth3" id="c018" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
          <h3 class="lefth3" id="c018" style="margin-top: 7%;"><img class="img-gn1" alt=""
              src="../../assets/images/czysj.jpg" /></h3>
          <div style="display: flex; justify-content: flex-start; ">
             <p class="text" style="width: 50%;">你知道吗？无实物训练是一种训练演员的有效方法，不仅能够培养演员良好的想象能力，更能够培养其行动的逻辑性和情景适应性，最终提高其塑造人物形象的能力。</p>
          <div class="openImgBox" style="width: 50%"><img class="img-e" alt="" src="../../assets/images/2-4.gif" /></div>
            <p class="text" style="width: 50%;">
              你知道吗？无实物训练是一种训练演员的有效方法，不仅能够培养演员良好的想象能力，更能够培养其行动的逻辑性和情景适应性，最终提高其塑造人物形象的能力。</p>
            <div class="openImgBox" style="width: 50%"><img class="img-e" alt="" src="../../assets/images/2-4.gif" />
            </div>
          </div>
          <p class="text"><span class="hs1">◇</span>请试着用无实物表演的方式把下面的情景表演出来吧！</p>
          <p class="center text"><img class="img-0" style="width: 100%; height: auto;" lt="" src="../../assets/images/0020-2.jpg" /></p>
          <p class="center text"><img class="img-0" style="width: 100%; height: auto;" lt=""
              src="../../assets/images/0020-2.jpg" /></p>
        </div>
        <!-- 此处为页脚部分（需要设置页码） -->
        <div class="page-footer">
@@ -191,7 +194,8 @@
          <h2 id="b010" class="problem">单元活动任务</h2>
          <h3 class="lefth3" id="c019"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>吹纸练习</p>
          <p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" /></p>
          <p class="center text" style="margin: 4% 0"><img class="img-e" alt="" src="../../assets/images/0021-1.jpg" />
          </p>
          <p class="text">找一张纸巾，将它按在墙上。移开双手，努力用气息将纸“钉”在墙面上，不要让它向下滑落。</p>
          <p class="text"><span class="hs1">◇</span>吹笔练习</p>
          <p class="text">将一支笔立于桌面，看看你能不能用一口气将它吹倒。</p>
@@ -214,7 +218,8 @@
        <div class="bodystyle" style="margin-top: 3%;" >
          <p class="text"><span class="hs1">◇</span>吹乒乓球练习</p>
          <p class="text">用气息将桌面上的乒乓球从“起点”运送至“终点”，运送过程中避免乒乓球触碰障碍物。</p>
          <h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
          <h3 class="lefth3" id="c020" style="margin-top: 7%"><img class="img-gn1" alt=""
              src="../../assets/images/tzyys.jpg" /></h3>
          <p class="text"><span class="hs1">◇</span>请走进剧场观看不同剧种的现场演出，感受戏剧的魅力吧！</p>
          <p class="center text">
            <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
@@ -224,18 +229,10 @@
          </p>
          <p class="center videoname">
            <span>视频：惟妙惟肖的人物 </span>
            <el-tooltip
              class="item"
              effect="dark"
              :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start"
            >
              <img
                :src="chapterData.isCollectVideo ? collectCheck : collectImg"
                alt=""
                class="collect-btn"
                @click="handleCollect('video')"
              />
            <el-tooltip class="item" effect="dark" :content="chapterData.isCollectVideo ? '点击取消' : '点击收藏'"
              placement="top-start">
              <img :src="chapterData.isCollectVideo ? collectCheck : collectImg" alt="" class="collect-btn"
                @click="handleCollect('video')" />
            </el-tooltip>
          </p>
        </div>
@@ -252,8 +249,10 @@
<script>

import { getResourcePath } from "@/assets/methods/resources";
import choice from "@/components/choice/choice.vue"
export default {
  name: "chapterTwo",
  components: { choice },
  props: {
    showPageList: {
      type: Array,
@@ -312,6 +311,51 @@
          nine: "",
        },
      },
      questions: [
                {
                    analysisCon: "undefined",
                    answer: ['C', 'A', 'B'],
                    difficulty: 0,
                    id: 47775,
                    isCollect: false,
                    isComplete: false,
                    isRight: null,
                    isUnfold: "",
                    isUserAnswer: false,
                    number: 1,
                    options: [
                        {
                            "img": "",
                            "index": "3CA6",
                            "txt": "胆小的",
                            "value": "A"
                        },
                        {
                            "img": "",
                            "index": "73EE",
                            "txt": "善良的",
                            "value": "B"
                        },
                        {
                            "img": "",
                            "index": "6AEF",
                            "txt": "沉稳的",
                            "value": "C"
                        },
                    ],
                    optionStyle: "Image",
                    questionType: "singleChoice",
                    score: 2,
                    stem: {
                        "stemTxt": "蚂蚁队长走路昂首挺胸、步伐坚定，它是一只（　　）蚂蚁；小蚂蚁走起路来小心翼翼，眼神飘忽不定，它是一只（　　）蚂蚁；蚂蚁小妹面带微笑，时刻愿意帮助大家，它是一只（　　）蚂蚁。"
                    },
                    stemStyle: "Txt",
                    userAnswer: "",
                    // 单选题这里的字段内容就是"单选题"
                    type: 'sort'
                },
            ],
      accentColor:'green',
    };
  },
  methods: {

 src/books/artAndDrama/view/components/chapter003.vue

@@ -31,7 +31,6 @@
                </h1>
                <img class="headerimg" src="../../assets/images/page5.png" alt="" />
                <div class="bodystyle" style="margin-top: 3%">

                    <h2 id="b011" class="problem">第一课　吹响劳动的集结号</h2>
                    <h3 class="lefth3" id="c021"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text">寒来暑往，秋收冬藏。一年四季，劳碌奔忙。</p>
@@ -44,11 +43,15 @@
                    <p class="text"><span class="hs1">◇</span>邀请小伙伴分角色朗诵附录中的剧本选段1～2，重读加点文字。</p>
                     <p class="block3" style=""><span class="hs">剧本</span></p>
                    <p class="center1 text" style="font-size: 25px; margin: 3% 0;"><span class="hs">一块奶酪</span></p>
                    <p class="center text"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
                     <i class="el-icon-folder-opened text" style="color: brown;">选段1</i>
                     <i class="el-icon-folder-opened text" style="color: brown;">选段2</i>
                    <!-- 此处为附录资源处 -->
                    <div class="Options text">
                        <span class="folder" v-for="(segment, index) in segments" :key="index"
                            @click="showContent(index)"><img src="../../assets/images/icon/folder.svg" alt="">选段{{
                                segment }}</span>
                </div>
                <p><br /></p>
                    <div v-if="activeIndex !== null" class="content-wrapper text" v-html="activeContent"></div>
                    <p class="center text"><img class="img-e" alt="" src="../../assets/images/0024-1.jpg" /></p>
                </div>
                <!-- 此次为页脚部分（需要设置页码） -->
                <div class="page-footer">
                    <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
@@ -113,17 +116,17 @@
                    <h2 id="b014" class="problem">第四课　皆大欢喜</h2>
                    <h3 class="lefth3" id="c027"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>请按照事件六要素的结构给大家分享一件快乐的事吧！</p>
                    <p class="text">时间：<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
                    <p class="text2">时间：<input v-model="questionData.warnUp.two" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">地点：<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
                    <p class="text2">地点：<input v-model="questionData.warnUp.three" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">人物：<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
                    <p class="text2">人物：<input v-model="questionData.warnUp.four" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">起因：<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
                    <p class="text2">起因：<input v-model="questionData.warnUp.five" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">经过：<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
                    <p class="text2">经过：<input v-model="questionData.warnUp.six" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text">结果：<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
                    <p class="text2">结果：<input v-model="questionData.warnUp.seven" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 70%" /></p>
                    <p class="text" style="margin-top: 7%;"><span class="hs1">◇</span>你有烦恼吗？说一说是什么，你是怎么处理它的？</p>
                    <p><input v-model="questionData.warnUp.enight" class="input-bottom-border fz-18"
@@ -230,7 +233,6 @@
            default: "red",
        }
    },
    //在这里对调用的方法进行挂载
    mounted() {
        this.getVidoePath();
        const bookQuestion = localStorage.getItem("artAndDrama-book-question-three");
@@ -244,6 +246,16 @@
            collectCheck: require("../../assets/images/icon/heart-check.png"),
            videoPathOne: "",
            auidoPathOne: "",
            segments: [1, 2, 3, 4, 5],
            activeIndex: null, // 用于追踪当前活动的按钮索引  
            contents: [ // 对应选段的内容，这里用字符串作为示例  
                ' <p class="block text">【起光，蚂蚁队长上场】</p><p class="block text">咻咻—</p><p class="block text">【蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形】</p><p class="block text">蚂蚁队长：<span class="un1">我宣布</span>！今天搬运粮食，只许<span class="un1">出力</span>，不许<span class="un1">偷嘴</span>。谁偷嘴就<span class="un1">罚谁</span>！</p><p class="block text">蚂蚁们：收到！</p><p class="block text">小蚂蚁：（嘀咕）要是偷嘴的<span class="un1">是您呢</span>？</p><p class="block text">蚂蚁队长：（义正词严）<span class="un1">照样受罚</span>！</p><p class="block text">【蚂蚁们鼓掌】</p><p class="block text">蚂蚁队长：稍息！立正！寻找食物！出发！</p><p class="block text">【蚂蚁们争先恐后四处寻食】</p><p class="block text">大头蚂蚁：（突然）<span class="un1">报告</span>！</p><p class="block text">蚂蚁队长：怎么了？</p><p class="block text">大头蚂蚁：（指着）这里有一块大奶酪！</p><p class="block text">【一块奶酪（演员）趴在角落处】</p><p class="block text">蚂蚁队长：（兴奋）哦？</p><p class="block text">【蚂蚁队长被奶酪的香味迷住，转起了圈圈】</p><p class="block text">【音乐起，蚂蚁队长和奶酪人跳起了舞蹈】</p><p class="block text">蚂蚁队长：（陶醉）奶酪……奶酪……填饱肚子不再呱呱叫。奶酪……奶酪……吃下一口一声美妙……</p><p class="block text">【蚂蚁们停下手里的搬运工作，看着队长】</p><p class="block text">大头蚂蚁：（大喊）队长！</p><p class="block text">【蚂蚁队长被吓醒，奶酪人趴在地上】</p><p class="block text">小眼镜蚂蚁：队长！队长！<span class="un1">快点搬运吧</span>！这么<span class="un1">热</span>的天，再不出发，奶酪就<span class="un1">化</span>啦！</p><p class="block text">蚂蚁队长：说得对！我现在就<span class="un1">搬</span>！</p><p class="block text">【蚂蚁队长走到奶酪面前使劲抬】</p><p class="block text">蚂蚁队长：哎哟，哎哟，哎哟哟。</p><p class="block text">【蚂蚁队长一次也没抬起来】</p>',
                ' <p class="block text">蚂蚁队长：（起身）<span class="un1">我决定了</span>！大家<span class="un1">一起搬</span>！这块奶酪以我为首，搬运的路上<span class="un1">不许偷吃</span>！</p><p class="block text">蚂蚁们：<span class="un1">是</span>！</p><p class="block text">【蚂蚁们迅速围成一圈，蚂蚁队长站在奶酪最前面】</p><p class="block text">蚂蚁队长：听我口令！3！2！1！抬！</p>                  <p class="block text">【奶酪被抬起】</p><p class="block text">大头蚂蚁：哇！这块奶酪<span class="un1">好香噢</span>！</p><p class="block text">小眼镜蚂蚁：我想<span class="un1">咬</span>一口！</p><p class="block text">小蚂蚁：如果能<span class="un1">舔一下</span>就好了！</p><p class="block text">蚂蚁小妹：我的口水流出来了！</p><p class="block text">蚂蚁队长：不许瞎想！不许偷吃！<span class="un1">出发</span>！</p><p class="block text">【音乐起，蚂蚁们抬着奶酪向前走着】</p><p class="block text">蚂蚁们：奶酪！奶酪！我们的奶酪！奶酪！奶酪！我们一起分享。</p><p class="block text">【蚂蚁们陶醉中】</p>',
                ' <p class="block text">嘭—</p><p class="block text">【蚂蚁们用劲过猛，奶酪的一个角掉了】</p><p class="block text">蚂蚁小妹：<span class="un1">啊</span>！队长！奶酪的角<span class="un1">掉了</span>！</p> <p class="block text">【大家看到掉在地上的奶酪】</p><p class="block text">蚂蚁们：哇哦！</p><p class="block text">蚂蚁队长：等等！</p><p class="block text">【舞台变光，演员动作定格】</p><p class="block text">蚂蚁队长：掉了<span class="un1">一个角</span>，这该<span class="un1">怎么办</span>！<span class="un1">丢掉</span>，实在<span class="un1">太可惜</span>！<span class="un1">趁机吃掉</span>，又要犯不许偷嘴的禁令。怎么办呢？有个办法！我要是<span class="un1">偷嘴</span>谁也<span class="un1">看不见</span>，<span class="un1">这样</span>不就行啦！大家听好啦！</p>',
                ' <p class="block text">【舞台变光，演员立正站好】</p><p class="block text">蚂蚁队长：休息一会儿！</p><p class="block text">蚂蚁小妹：<span class="un1">为什么</span>要休息呀？</p><p class="block text">小眼镜蚂蚁：队长！这块掉在地上的奶酪<span class="un1">怎么办呀</span>？</p><p class="block text">大头蚂蚁：我们要不把它<span class="un1">分了吧</span>！</p><p class="block text">蚂蚁队长：听我说！<span class="un1">休息</span>！<span class="un1">立刻休息</span>！大家搬运太辛苦啦！分散开，哪里凉快就到哪里休息！</p><p class="block text">【大家依旧不动】</p><p class="block text">蚂蚁队长：全体都有！稍息！立正！向后—转！齐步—走！</p><p class="block text">蚂蚁队长：立—定！原地休息！</p><p class="block text">【蚂蚁们跟随口令消失在草丛里】</p>', 
                ' <p class="block text">【蚂蚁队长向草丛里望去，确定没有声响】</p><p class="block text">蚂蚁队长：（小声）嘿嘿嘿，吃掉后就说被风刮走或者就说被老鹰吃掉就好啦！</p><p class="block text">【蚂蚁队长低下头，嗅了一下奶酪】</p><p class="block text">蚂蚁队长：味道<span class="un1">真</span>香！</p><p class="block text">【蚂蚁队长的手伸向奶酪渣，突然，奶酪人站了起来】</p><p class="block text">【变光】</p><p class="block text">奶酪人：不许吃！</p><p class="block text">蚂蚁队长：（吓了一跳）你你你！你怎么<span class="un1">站</span>起来啦！</p><p class="block text">奶酪人：我<span class="un1">实在</span>看不下去啦！</p><p class="block text">蚂蚁队长：（害怕）救命哇！奶酪<span class="un1">活</span>啦！</p><p class="block text">【蚂蚁队长跑】</p><p class="block text">奶酪人：<span class="un1">站住</span>！</p><p class="block text">蚂蚁队长：你要干什么？</p><p class="block text">奶酪人：<span class="un1">这块</span>，<span class="un1">你不能吃</span>！</p><p class="block text">蚂蚁队长：为什么？</p><p class="block text">奶酪人：<span class="un1">第一</span>！<span class="un1">你</span>定的规矩，今天搬运中，<span class="un1">不许偷吃</span>！如果<span class="un1">你</span>做不到，你就<span class="un1">不能要求别人</span>！<span class="un1">第二</span>！你是<span class="un1">蚂蚁队长</span>，大家选你当队长，是对你的<span class="un1">信任</span>和<span class="un1">尊重</span>！你却背着大家<span class="un1">偷吃</span>！<span class="un1">第三</span>！<span class="un1">诚实守信</span>是美德，你吃掉奶酪要<span class="un1">撒谎</span>，撒了<span class="un1">一个</span>谎就要用<span class="un1">无数</span>的谎来圆第一个谎，最后<span class="un1">还是</span>会被发现！</p><p class="block text">蚂蚁队长：（低头）我不吃了，我知道<span class="un1">错了</span>……可是，这掉在地上的奶酪怎么办呢？</p><p class="block text">奶酪人：（想了想）<span class="un1">有办法</span>！你可以选择大家<span class="un1">一起分</span>，也可以选择给年龄最小的蚂蚁吃！</p><p class="block text">蚂蚁队长：<span class="un1">好主意</span>！我这就问问大家，谢谢你！</p><p class="block text">【变光，奶酪慢慢地躺在地上】</p><p class="block text">蚂蚁队长：（喊）<span class="un1">注意啦</span>！全体都有！稍息！立正！</p><p class="block text">向后转！齐步走！</p><p class="block text">【蚂蚁们由四面八方走回来】</p><p class="block text">蚂蚁队长：大家休息好啦！我有一个<span class="un1">决定</span>！</p><p class="block text">蚂蚁们：什么决定？</p><p class="block text">蚂蚁队长：这点儿奶酪渣是刚才弄掉的，丢了可惜，（指向小蚂蚁）你是我们中年龄最小的，<span class="un1">你</span>吃掉它吧！</p><p class="block text">【蚂蚁们鼓掌】</p><p class="block text">【音乐起，大家劲儿比刚才更足，抬起奶酪向山洞走去】</p><p class="block text">【收光】</p>'
            ],
            activeContent: '', // 当前显示的HTML内容 
            chapterData: {
                isCollectImg: false,
                isCollectVideo: false,
@@ -286,38 +298,24 @@
                answer: [
                    {
                        id: "FB34",
                        linkValue: "“掉了一个角，这该怎么办！”",
                        value: "好可惜啊，这么美味的奶酪！",
                        linkValue: "好可惜啊，这么美味的奶酪！",
                        value: "“掉了一个角，这该怎么办！”",
                    },
                    {
                        id: "64D6",
                        linkValue: "“丢掉，实在太可惜！”",
                        value: "不能丢掉啊，如果能给我吃就太好了！",
                        linkValue: "不能丢掉啊，如果能给我吃就太好了！",
                        value: "“丢掉，实在太可惜！”",
                    },
                    {
                        id: "2ED4",
                        linkValue: "“我要是偷嘴谁也看不见。”",
                        value: "要不我把奶酪偷偷吃了吧。",
                        linkValue: "要不我把奶酪偷偷吃了吧。",
                        value: "“我要是偷嘴谁也看不见。”",
                    },
                ],
                optionStyle: undefined,
                id: 489306,
                options: {
                    linkValues: [
                        {
                            oldId: "FB34",
                            txt: "“掉了一个角，这该怎么办！”",
                        },
                        {
                            oldId: "64D6",
                            txt: "“丢掉，实在太可惜！”",
                        },
                        {
                            oldId: "2ED4",
                            txt: "“我要是偷嘴谁也看不见。”",
                        },
                    ],
                    values: [
                        {
                            oldId: "64D6",
                            txt: "不能丢掉啊，如果能给我吃就太好了！",
@@ -329,6 +327,19 @@
                        {
                            oldId: "FB34",
                            txt: "好可惜啊，这么美味的奶酪！",
                        },],
                    values: [
                        {
                            oldId: "FB34",
                            txt: "“掉了一个角，这该怎么办！”",
                        },
                        {
                            oldId: "64D6",
                            txt: "“丢掉，实在太可惜！”",
                        },
                        {
                            oldId: "2ED4",
                            txt: "“我要是偷嘴谁也看不见。”",
                        },
                    ],
                },
@@ -411,6 +422,17 @@
            }
            this.handleChapterData();
        },
        showContent(index) {
            // 如果当前激活的索引和点击的索引相同，则隐藏内容  
            if (this.activeIndex === index) {
                this.activeIndex = null;
                this.activeContent = '';
            } else {
                // 否则显示对应索引的内容  
                this.activeIndex = index;
                this.activeContent = this.contents[index];
            }
        }
    },
};
</script>
@@ -445,4 +467,8 @@
    padding: 3% 0;
    margin: 0% 8%;
}
.content-wrapper{
    border: 1px solid black;
    border-radius: 10px;
}
</style>

 src/books/artAndDrama/view/components/chapter004.vue

@@ -12,7 +12,8 @@
                        <div class="bj1">
                            <p class="left"><img class="img-gn" alt="" src="../../assets/images/dydd.jpg" /></p>
                        </div>
                        <p class="block" style="margin:  8% 5% 5% 7%">在戏剧演出中，除了舞台上的演员，导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后，向默默奉献的工作人员致敬！</p>
                        <p class="block" style="margin:  8% 5% 5% 7%">
                            在戏剧演出中，除了舞台上的演员，导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后，向默默奉献的工作人员致敬！</p>
                    </div>
                </div>
                <p><br /></p>
@@ -34,7 +35,8 @@
                    <h3 class="lefth3" id="c031"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>以小组为单位围成一圈，面朝圈外蹲下，相邻两人互挎手臂，组员同时站起来，看看哪个组最快！</p>
                    <p class="text"><span class="hs1">◇</span>说一说：快速站起来的秘诀是什么？</p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18" @change="setBookQuestion"  style="width: 90%"/></p>
                    <p><input v-model="questionData.warnUp.one" class="input-bottom-border fz-18"
                            @change="setBookQuestion" style="width: 90%" /></p>
                    <h3 class="lefth3" id="c032"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>以小组为单位，表演以下场景，注意保持动作一致哦。</p>
                    <p class="text">蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形。</p>
@@ -60,7 +62,8 @@
                <div class="bodystyle" style="margin-top: 3%;" >
                    <h2 id="b017" class="problem">第二课　造型变变变</h2>
                    <h3 class="lefth3" id="c033"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <p class="text"><span
                            class="hs1">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
                    <!-- 图片缺失 -->
                    <!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
                </div>
@@ -98,7 +101,8 @@
                    <h2 id="b018" class="problem">第三课　变废为宝</h2>
                    <h3 class="lefth3" id="c035"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>以小组为单位，头顶纸杯，腿夹报纸，进行夹纸运杯游戏！</p>
                    <h3 class="lefth3" id="c036" style="margin-top: 7%"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <h3 class="lefth3" id="c036" style="margin-top: 7%"><img class="img-gn1" alt=""
                            src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>请根据《一块奶酪》的剧本，列出演出中需要的道具清单，请按照清单，利用你收集的旧物制作道具吧！</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
                </div>
@@ -120,7 +124,8 @@
                    <h3 class="lefth3" id="c037"><img class="img-gn1" alt="" src="../../assets/images/rhybx.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>请你试着模拟演员候场、谢幕，舞台美术工作人员进行幕后准备的场景。</p>
                    <p class="center"><img class="img-e" alt="" src="../../assets/images/0036-1.jpg" /></p>
                    <h3 class="lefth3" id="c038" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/czysj.jpg" /></h3>
                    <h3 class="lefth3" id="c038" style="margin-top: 7%;"><img class="img-gn1" alt=""
                            src="../../assets/images/czysj.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>邀请同伴共同完成《一块奶酪》的展演吧！</p>
                    <p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
                </div>
@@ -173,7 +178,8 @@
                    <p class="text">身体放松，膝盖微屈，上身自然弯曲下沉，手臂自然下垂。</p>
                    <p class="text">第1个八拍：第1-7拍身体直起，双臂举起，踮起脚尖；第8拍还原初始状态。</p>
                    <p class="text">第2至第4个八拍：重复第1个八拍的动作。</p>
                    <h3 class="lefth3" id="c040" style="margin-top: 7%;"><img class="img-gn1" alt="" src="../../assets/images/tzyys.jpg" /></h3>
                    <h3 class="lefth3" id="c040" style="margin-top: 7%;"><img class="img-gn1" alt=""
                            src="../../assets/images/tzyys.jpg" /></h3>
                    <p class="text"><span class="hs1">◇</span>写一篇排演总结，分享学习经验和感受！</p>
                    <p class="center text">
                        <video :src="videoPathOne" webkit-playsinline="true" x-webkit-airplay="true" playsinline="true"
@@ -199,7 +205,6 @@
        </div>
    </div>
</template>

<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
@@ -208,7 +213,6 @@
        showPageList: {
            type: Array,
        },

    },
    //在这里对调用的方法进行挂载
    mounted() {
@@ -253,6 +257,13 @@
            },
        };
    },
    //测试
    computed: {
        currentQuestion() {
            return this.questions[this.currentIndex];
        },
    },
    //测试结束
    methods: {
        //视频和音频的MD5地址
        async getVidoePath() {
@@ -291,11 +302,100 @@
            this.handleChapterData();
        },
    },

};
</script>

<style lang="less" scoped>
//测试
.all-options {
    display: flex;
    justify-content: space-between;
    margin-left: 10%;
}

.option {
    position: relative;
    /* 设置为相对定位容器 */
    display: inline-flex;
    /* 使用 Flexbox 以便更好地控制布局和对齐 */
    align-items: center;
    /* 垂直居中对齐 */

}

.option-img {
    width: 80%;
    height: auto;
    // z-index: -1;
}

.option-text {
    position: absolute;
    z-index: 1;
    left: 29px;
    top: 64px;
}

.cloud-icon {
    fill: rgb(245, 130, 32);
}

.btn-button {
    width: 70%;
    margin: 10px auto 0 auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.btn-button>button {
    width: 80px;
    height: 30px;
    margin-top: 10px;
    border: 1px solid rgb(245, 130, 32);
    background-color: transparent;
    border-radius: 5px;
    cursor: pointer;
}

.btn-button>button:hover {
    background-color: rgb(245, 130, 32);
    /* 鼠标悬停时背景色变为红色 */
    color: white;
    /* 鼠标悬停时字体颜色变为白色 */
    /* 其他你想要的悬停样式... */
}

.active {
    color: white;
    transition: color 0.3s;
}

.key {
    display: flex;
    justify-content: space-around;
}

.right-key {
    color: green;
}

.correct-answer {
    color: green;
    /* 正确答案的字体颜色 */
}

.incorrect-answer {
    color: red;
    /* 错误答案的字体颜色 */
}

.face {
    width: 15%;
    height: auto;
}

//测试结束
.w70 {
    width: 78%;
}

 src/books/artAndDrama/view/components/chapter005.vue

File was deleted

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

@@ -13,7 +13,6 @@
      <chapterTwo v-if="showCatalogList.indexOf(3) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"  @closeVideo="closeVideo"></chapterTwo>
      <chapterThree v-if="showCatalogList.indexOf(4) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"  @closeVideo="closeVideo"></chapterThree>
      <chapterFour v-if="showCatalogList.indexOf(5) > -1" :showPageList="loadPageList" @closeAudio="closeAudio"  @closeVideo="closeVideo"></chapterFour>
      <chapterFive v-if="showCatalogList.indexOf(6) > -1" :showPageList="loadPageList"></chapterFive>
    </div>
    <!-- 音频小窗播放组件 -->
    <miniAudio :path="audioPath" :currentTime="currentTime" @closeMiniAudio="closeMiniAudio" ref="audioPlayer">
@@ -27,7 +26,6 @@
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 miniAudio from "@/components/miniAudio/index.vue";
import _ from "lodash";
@@ -38,7 +36,7 @@
export default {
  data() {
    return {
      catalogLength: 6, // 总章节数
      catalogLength: 5, // 总章节数
      showCatalogList: [], // 显示的章节
      loadThreshold: 300, // 触发加载阈值
      throttleThreshold: 100, // 节流阈值
@@ -158,7 +156,7 @@

    // 测试页面跳转
    //setTimeout(() => {
    //this.gotoPage(2,4);
    //this.gotoPage(3,16);
    //   setTimeout(() => {
    //     this.renderSign("Highlight", {
    //       id: "2ACA9359",
@@ -714,7 +712,6 @@
        chapterTwo,
        chapterThree,
        chapterFour,
        chapterFive,
      };
      // 遍历所有章节文件
      for (const key in pageData) {
@@ -901,7 +898,6 @@
    miniAudio,
    chapterThree,
    chapterFour,
    chapterFive,
  },
};
</script>

 src/components/choice/choice.vue

New file
@@ -0,0 +1,455 @@
<template>
    <div class="choice-question ">
        <!-- 题目内容及选项部分 -->
        <div class="question-content">
            <p>{{ currentQuestion.stem.stemTxt }}</p>
            <div class="all-options">
                <span v-for="(option, index) in currentQuestion.options" :key="index" class="option"
                    :class="{ 'selected': selectedOptions.includes(index) }"
                    @click="!isSubmitted && toggleOption(index)">
                    <svg v-if="selectedOptions.includes(index)" t="1718282810750" class="icon" viewBox="0 0 1355 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="87382"
                        xmlns:xlink="http://www.w3.org/1999/xlink" width="170" height="170">
                        <path
                            d="M1299.772238 471.021724a366.045786 366.045786 0 0 0-97.270943-99.189942 379.484778 379.484778 0 0 0-29.436982-123.509928 398.682766 398.682766 0 0 0-89.591948-127.986925 405.722762 405.722762 0 0 0-133.107922-91.511946A409.56176 409.56176 0 0 0 794.859534 0.026 401.242765 401.242765 0 0 0 568.319667 67.85896a411.481759 411.481759 0 0 0-97.909943 91.511947 261.735847 261.735847 0 0 0-63.994962-7.679996 247.656855 247.656855 0 0 0-176.623897 71.033958 245.736856 245.736856 0 0 0-72.312957 202.860882 325.729809 325.729809 0 0 0-84.471951 72.953957A309.731819 309.731819 0 0 0 0.053 703.959588a311.010818 311.010818 0 0 0 97.269943 229.099865 323.80981 323.80981 0 0 0 231.659864 90.871947h660.418613a360.926789 360.926789 0 0 0 255.97585-104.949938 360.926789 360.926789 0 0 0 81.272953-116.469932 355.166792 355.166792 0 0 0 27.516984-138.866919 345.567798 345.567798 0 0 0-54.394969-192.622887z"
                            fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87383"></path>
                    </svg>
                    <svg v-else t="1718282816195" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="87529" xmlns:xlink="http://www.w3.org/1999/xlink"
                        width="170" height="170">
                        <path
                            d="M829.248 420.576C815.264 274.56 693.696 160 544 160c-115.808 0-214.944 68.736-260.672 167.36A142.72 142.72 0 0 0 240.032 320a144.032 144.032 0 0 0-144 144c0 15.808 3.168 30.752 7.872 44.928C42.048 544.992 0.032 611.168 0.032 687.936a208 208 0 0 0 208 208V896H784v-0.064c132.576 0 240-107.424 240-240 0-116.992-83.872-214.176-194.752-235.36zM784 831.936V832H208.032a144.256 144.256 0 0 1-144-144.064c0-51.2 26.976-97.44 72.128-123.744 43.872-25.184 46.88-30.176 28.48-75.424a78.56 78.56 0 0 1-4.608-24.736c0-44.128 35.872-80 80-80 0 0 20.992-1.504 43.296 7.36 36.704 14.624 40.704 0.64 58.048-37.088C378.08 275.168 457.6 224 544 224c115.2 0 210.432 87.136 221.568 202.688 3.936 45.824 3.936 45.824 51.68 56.736A175.872 175.872 0 0 1 960 655.936c0 97.056-78.944 176-176 176z"
                            fill="rgb(245, 130, 32)" :style="{ fill: primaryColor }" p-id="87530"></path>
                    </svg>
                    <span class="option-text">{{ option.value }}、{{ option.txt }}</span>
                </span>
            </div>
        </div>
        <!-- 答案部分 -->
        <div v-if="showResult">
            <div style="display: flex;align-items: center; flex-direction: column;">
                <img class="face" :src="choiceData.isCorrect ? correctImg : incorrectImg" alt="Result" />
                <div>
                    <p class="center" v-if="choiceData.isCorrect">恭喜您：答对了</p>
                    <p class="center" v-else>答错了，加油哦</p>
                </div>
            </div>
            <div class="key">
                <p class="right-key">正确答案：{{ formatAnswer(currentQuestion.answer) }}</p>
                <p :class="{ 'correct-answer': isCorrectAnswer(), 'incorrect-answer': !isCorrectAnswer() }">
                    您的答案：{{ formatAnswer(getSelectedOptions()) }}</p>
            </div>
        </div>
        <!-- 题目按钮部分 -->
        <div class="btn-button">
            <button v-if="currentIndex > 0" @click="prevQuestion" :style="mergedStyles">上一题</button>
            <button v-if="currentIndex < questions.length - 1" @click="nextQuestion" :style="mergedStyles">下一题</button>
            <button @click="resetQuestion" :style="mergedStyles">重做</button>
            <button @click="submitQuestion" :style="mergedStyles">提交</button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            cloudaImg: require("../../assets/images/solid-cloud.svg"),
            cloudbImg: require("../../assets/images/hollow-cloud.svg"),
            correctImg: require("../../assets/images/smiling-face.svg"),
            incorrectImg: require("../../assets/images/crying-face.svg"),
            isActive: false, // 初始状态
            isSubmitted: false,
            // questions: [
            //     {
            //         analysisCon: "undefined",
            //         answer: ['A', 'C'],
            //         difficulty: 0,
            //         id: 47772,
            //         isCollect: false,
            //         isComplete: false,
            //         isRight: null,
            //         isUnfold: "",
            //         isUserAnswer: false,
            //         number: 1,
            //         options: [
            //             {
            //                 "img": "",
            //                 "index": "3CA6",
            //                 "txt": "群居",
            //                 "value": "A"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "73EE",
            //                 "txt": "社会性",
            //                 "value": "B"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "6AEF",
            //                 "txt": "独居",
            //                 "value": "C"
            //             },
            //         ],
            //         optionStyle: "Image",
            //         questionType: "singleChoice",
            //         score: 2,
            //         stem: {
            //             "stemTxt": "1、蚂蚁是典型的(  )昆虫。(多选)"
            //         },
            //         stemStyle: "Txt",
            //         userAnswer: "",
            //         // 单选题这里的字段内容就是"单选题"
            //         type: 'multi'
            //     },
            //     {
            //         analysisCon: "undefined",
            //         answer: ['A', 'B'],
            //         difficulty: 0,
            //         id: 47773,
            //         isCollect: false,
            //         isComplete: false,
            //         isRight: null,
            //         isUnfold: "",
            //         isUserAnswer: false,
            //         number: 1,
            //         options: [
            //             {
            //                 "img": "",
            //                 "index": "3CA6",
            //                 "txt": "明确的",
            //                 "value": "A"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "73EE",
            //                 "txt": "奇怪的",
            //                 "value": "B"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "6AEF",
            //                 "txt": "有序的",
            //                 "value": "C"
            //             },
            //         ],
            //         optionStyle: "Image",
            //         questionType: "singleChoice",
            //         score: 2,
            //         stem: {
            //             "stemTxt": "2、蚂蚁内部又(  )分工。(多选)"
            //         },
            //         stemStyle: "Txt",
            //         userAnswer: "",
            //         // 单选题这里的字段内容就是"单选题"
            //         type: 'multi'
            //     },
            //     {
            //         analysisCon: "undefined",
            //         answer: ['A', 'B'],
            //         difficulty: 0,
            //         id: 47774,
            //         isCollect: false,
            //         isComplete: false,
            //         isRight: null,
            //         isUnfold: "",
            //         isUserAnswer: false,
            //         number: 1,
            //         options: [
            //             {
            //                 "img": "",
            //                 "index": "3CA6",
            //                 "txt": "团结的",
            //                 "value": "A"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "73EE",
            //                 "txt": "优秀的",
            //                 "value": "B"
            //             },
            //             {
            //                 "img": "",
            //                 "index": "6AEF",
            //                 "txt": "松散的",
            //                 "value": "C"
            //             },
            //         ],
            //         optionStyle: "Image",
            //         questionType: "singleChoice",
            //         score: 2,
            //         stem: {
            //             "stemTxt": "3、一个(  )群体少不了默契的配合。(多选)"
            //         },
            //         stemStyle: "Txt",
            //         userAnswer: "",
            //         // 单选题这里的字段内容就是"单选题"
            //         type: 'multi'
            //     },
            // ],
            currentIndex: 0, // 当前题目的索引  
            selectedOption: null, // 选中的选项索引  
            selectedOptions: [],
            showResult: false, // 是否显示结果 
            tips: false,
            // 是否回答正确  
            choiceData: {
                isCorrect: false,
            },
            isPrimary: true,
        };
    },
    props: {
        questions: {
            type: Array,
            required: true
        },
        primaryColor: {
            type: String,
            default: "#F58220",
        },
        hoverBackgroundColor: {
            type: String,
            default: 'rgb(245, 130, 32)' // 默认值  
        },
        hoverColor: {
            type: String,
            default: 'white' // 默认值  
        }
    },
    computed: {
        currentQuestion() {
            return this.questions[this.currentIndex];
        },
        setHoverStyles() {
            return {
                '--hover-bg-color': this.hoverBackgroundColor,
                '--hover-color': this.hoverColor
            };
        },
        mergedStyles() {
            // 合并直接样式和计算属性样式  
            return {
                borderColor: this.primaryColor,
                ...this.setHoverStyles
            };
        }
    },
    methods: {
        toggleOption(index) {
            if (this.currentQuestion.type === 'single') {
                this.selectedOptions = [index]; // 单选时只选中一个  
            } else {
                // 多选时切换选中状态 
                console.log(this.selectedOptions, index)
                const isAlreadySelected = this.selectedOptions.includes(index);
                if (isAlreadySelected) {
                    this.selectedOptions = this.selectedOptions.filter(i => i !== index);
                } else {
                    this.selectedOptions.push(index);
                }

            }
        },
        getOptionColor(index) {
            // 根据选项是否被选中返回相应的颜色  
            return this.optionColors[index] || this.defaultColor; // 如果没有设置颜色，则返回默认颜色  
        },
        getSelectedOptions() {
            return this.selectedOptions.map(index => {
                const selectedOption = this.currentQuestion.options[index];
                // 返回选项的文本（这里假设每个选项对象有一个 'value' 属性）  
                return selectedOption.value;
            }
            );
        },
        formatAnswer(answer) {
            // 格式化答案以便显示（例如，将索引转换为选项文本）  
            if (Array.isArray(answer)) {
                return answer.join(', ');
            }
            return answer;
        },
        prevQuestion() {
            if (this.currentIndex > 0) {
                this.currentIndex--;
                this.resetQuestion();
            }
            this.isSubmitted = false;
        },
        nextQuestion() {
            if (this.currentIndex < this.questions.length - 1) {
                this.currentIndex++;
                this.resetQuestion();
            }
            this.isSubmitted = false;
        },
        resetQuestion() {
            this.selectedOptions = [];
            this.showResult = false;
            this.isSubmitted = false;
        },
        submitQuestion() {
            const isCorrectAnswer = this.isCorrectAnswer();
            console.log(isCorrectAnswer)
            this.isCorrect = this.isCorrectAnswer();
            this.showResult = true;
            this.choiceData.isCorrect = this.isCorrect;
            // 播放音频的逻辑（如果需要）  
            if (isCorrectAnswer) {
                // 播放“恭喜你，答对了”的音频  
            } else {
                // 播放“答错了，加油哦”的音频  
            }
            this.isSubmitted = true;
        },
        isCorrectAnswer() {
            // 检查答案是否正确  
            if (this.currentQuestion.type === 'single') {
                return this.selectedOptions.length === 1 && this.selectedOptions[0] === this.currentQuestion.answer;
            } else if (this.currentQuestion.type === 'sort') {
                // 对于多选，需要比较两个数组是否相等（包含相同元素，并且顺序一致）  
                const selectedValues = this.getSelectedOptions();
                const correctAnswers = this.currentQuestion.answer;
                // 如果selectedValues为空数组，则直接返回false，因为没有任何选项被选中  
                if (selectedValues.length === 0) {
                    // alert('您还未选择任何选项！')  
                    return false;
                }
                // 如果两个数组的长度不一样，则直接返回false  
                if (selectedValues.length !== correctAnswers.length) {
                    // 弹出提示信息（可选）  
                    // alert('您选择的选项数量不正确！');  
                    return false;
                }
                // 使用JSON.stringify将数组转换为字符串，然后比较字符串是否相等  
                // 注意：这种方法只适用于数组元素都是基本类型（如字符串、数字）的情况  
                // 如果数组包含对象或复杂的数据结构，可能需要使用更复杂的比较方法  
                if (JSON.stringify(selectedValues) !== JSON.stringify(correctAnswers)) {
                    // 弹出提示信息（可选）  
                    // alert('您选择的选项不正确！');  
                    return false;
                }
                // 如果以上所有条件都通过，那么可以认为选择是正确的  
                return true;
            } else {
                // 对于多选，需要比较两个数组是否相等（或包含相同元素，具体取决于需求）
                //  这里需要将用户选择的索引转化为具体的value值  
                const selectedValues = this.getSelectedOptions();
                const correctSet = new Set(this.currentQuestion.answer);
                // 如果selectedValues为空数组，则直接返回false，因为没有任何选项被选中  
                if (selectedValues.length === 0) {
                    // alert('您还未选择任何选项！')
                    return false;
                }
                // 如果两个数组的长度不一样，则直接返回false，因为没有任何选项被选中  
                if (selectedValues.length !== correctSet.size) {
                    // 弹出提示信息（可选）  
                    // alert('您选择的选项数量不正确！');  
                    return false;
                }
                return selectedValues.every(value => correctSet.has(value));
            }
        },
    },
};  
</script>

<style lang="less" scoped>
.all-options {
    display: flex;
    justify-content: space-between;
    margin-left: 10%;
}

.option {
    position: relative;
    /* 设置为相对定位容器 */
    display: flex;
    flex-wrap: wrap;
    /* 使用 Flexbox 以便更好地控制布局和对齐 */
    align-items: center;
    /* 垂直居中对齐 */


}

.icon {
    width: 80%;
    height: auto;
    min-width: 120px;
}

.option-text {
    position: absolute;
    z-index: 1;
    left: 10%;
    top: 52%;
}

.option-text.selected {
    /* 当被选中时的样式 */
    color: white;
}

.cloud-icon {
    fill: rgb(245, 130, 32);
}

.btn-button {
    width: 70%;
    margin: 10px auto 0 auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}

.btn-button>button {
    width: 80px;
    height: 30px;
    margin-top: 10px;
    border: 1px solid rgb(245, 130, 32);
    background-color: transparent;
    border-radius: 5px;
    cursor: pointer;
}

.btn-button>button:hover {
    // background-color: rgb(245, 130, 32);
    // /* 鼠标悬停时背景色变为红色 */
    // color: white;
    // /* 鼠标悬停时字体颜色变为白色 */
    // /* 其他你想要的悬停样式... */
    background-color: var(--hover-bg-color);
    color: var(--hover-color);
}

.active {
    color: white;
    transition: color 0.3s;
}

.key {
    display: flex;
    justify-content: space-around;
}

.right-key {
    color: green;
}

.correct-answer {
    color: green;
    /* 正确答案的字体颜色 */
}

.incorrect-answer {
    color: red;
    /* 错误答案的字体颜色 */
}

.face {
    width: 15%;
    height: auto;
}
</style>