From 5b07f649010c3db7b3eb95d64d2d40560637b496 Mon Sep 17 00:00:00 2001
From: user1 <10901603+no-distractions1@user.noreply.gitee.com>
Date: 星期五, 21 六月 2024 18:43:29 +0800
Subject: [PATCH] 艺术戏剧（选择题完成版）
---
src/books/artAndDrama/assets/images/icon/solid-cloud.svg | 1
src/books/artAndDrama/view/components/chapter003.vue | 78 ++-
src/books/artAndDrama/assets/images/icon/folder.svg | 1
src/components/choice/choice.vue | 424 +++++++++++++++++
src/books/artAndDrama/assets/images/icon/hollow-cloud.svg | 1
src/assets/images/hollow-cloud.svg | 1
src/assets/images/smiling-face.svg | 1
src/books/artAndDrama/view/components/chapter004.vue | 176 +++++-
/dev/null | 257 ----------
src/books/artAndDrama/assets/main.less | 20
src/books/artAndDrama/assets/images/icon/smiling-face.svg | 1
src/books/artAndDrama/view/components/chapter002.vue | 113 +++-
src/books/artAndDrama/view/components/chapter001.vue | 332 +++++++++----
src/books/artAndDrama/assets/images/icon/crying-face.svg | 1
src/assets/images/solid-cloud.svg | 1
src/assets/images/crying-face.svg | 1
src/books/artAndDrama/view/components/index.vue | 12
17 files changed, 942 insertions(+), 479 deletions(-)
diff --git a/src/assets/images/crying-face.svg b/src/assets/images/crying-face.svg
new file mode 100644
index 0000000..afc44a4
--- /dev/null
+++ b/src/assets/images/crying-face.svg
@@ -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>
\ No newline at end of file
diff --git a/src/assets/images/hollow-cloud.svg b/src/assets/images/hollow-cloud.svg
new file mode 100644
index 0000000..d68dc72
--- /dev/null
+++ b/src/assets/images/hollow-cloud.svg
@@ -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>
\ No newline at end of file
diff --git a/src/assets/images/smiling-face.svg b/src/assets/images/smiling-face.svg
new file mode 100644
index 0000000..37ef2af
--- /dev/null
+++ b/src/assets/images/smiling-face.svg
@@ -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>
\ No newline at end of file
diff --git a/src/assets/images/solid-cloud.svg b/src/assets/images/solid-cloud.svg
new file mode 100644
index 0000000..dc136ea
--- /dev/null
+++ b/src/assets/images/solid-cloud.svg
@@ -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>
\ No newline at end of file
diff --git a/src/books/artAndDrama/assets/images/icon/crying-face.svg b/src/books/artAndDrama/assets/images/icon/crying-face.svg
new file mode 100644
index 0000000..afc44a4
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/icon/crying-face.svg
@@ -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>
\ No newline at end of file
diff --git a/src/books/artAndDrama/assets/images/icon/folder.svg b/src/books/artAndDrama/assets/images/icon/folder.svg
new file mode 100644
index 0000000..459f592
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/icon/folder.svg
@@ -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>
\ No newline at end of file
diff --git a/src/books/artAndDrama/assets/images/icon/hollow-cloud.svg b/src/books/artAndDrama/assets/images/icon/hollow-cloud.svg
new file mode 100644
index 0000000..d68dc72
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/icon/hollow-cloud.svg
@@ -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>
\ No newline at end of file
diff --git a/src/books/artAndDrama/assets/images/icon/smiling-face.svg b/src/books/artAndDrama/assets/images/icon/smiling-face.svg
new file mode 100644
index 0000000..37ef2af
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/icon/smiling-face.svg
@@ -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>
\ No newline at end of file
diff --git a/src/books/artAndDrama/assets/images/icon/solid-cloud.svg b/src/books/artAndDrama/assets/images/icon/solid-cloud.svg
new file mode 100644
index 0000000..dc136ea
--- /dev/null
+++ b/src/books/artAndDrama/assets/images/icon/solid-cloud.svg
@@ -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>
\ No newline at end of file
diff --git a/src/books/artAndDrama/assets/main.less b/src/books/artAndDrama/assets/main.less
index 2b241da..7449260 100644
--- a/src/books/artAndDrama/assets/main.less
+++ b/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;
}
@@ -425,6 +425,24 @@
// 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";
diff --git a/src/books/artAndDrama/view/components/chapter001.vue b/src/books/artAndDrama/view/components/chapter001.vue
index 68b2c5b..bb34338 100644
--- a/src/books/artAndDrama/view/components/chapter001.vue
+++ b/src/books/artAndDrama/view/components/chapter001.vue
@@ -59,43 +59,26 @@
</div>
<div class="page-box" page="6">
<div v-if="showPageList.indexOf(6) > -1">
- <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
+ <img src="../../assets/images/page6-header-green.png" alt="" style="height: auto; width: 100%" />
<div class="bodystyle">
<h3 class="lefth3" id="c001"><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/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>
- <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 class="center videoname">
+ <choice class="text" :questions="questions"></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>
@@ -191,12 +174,12 @@
涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
</p>
</div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">5</div>
- </div>
- </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">5</div>
+ </div>
+ </div>
</div>
<div class="page-box" page="9">
<div v-if="showPageList.indexOf(9) > -1">
@@ -212,20 +195,23 @@
<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>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-left">6</div>
- </div>
- </div>
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">6</div>
+ </div>
+ </div>
</div>
<div class="page-box" page="10">
<div v-if="showPageList.indexOf(10) > -1">
@@ -277,12 +263,12 @@
涓冨勾绾т笂鍐屻�嬶紝2椤碉紝鍖椾含锛屼汉姘戞暀鑲插嚭鐗堢ぞ锛�2016銆�
</p>
</div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">7</div>
- </div>
- </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">7</div>
+ </div>
+ </div>
</div>
<div class="page-box" page="11">
<div v-if="showPageList.indexOf(11) > -1">
@@ -299,12 +285,12 @@
<span class="hs1">鈼�</span>铓傝殎闃熼暱鎶婂ザ閰福鐣欑粰浜嗗勾榫勬渶灏忕殑铓傝殎锛岃耽寰椾簡澶у鐨勮鍙�傚湪鐢熸椿涓紝浣犳浘缁忓儚鈥滆殏铓侀槦闀库�濅竴鏍风埍鎶ゅ急灏忓悧锛熸垨鑰呭儚鈥滃皬铓傝殎鈥濅竴鏍峰緱鍒拌繃鍝ュ摜濮愬浠殑鍏崇埍鍚楋紵
</p>
</div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-left">8</div>
- </div>
- </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">8</div>
+ </div>
+ </div>
</div>
<div class="page-box" page="12">
<div v-if="showPageList.indexOf(12) > -1">
@@ -333,12 +319,12 @@
鎯宠薄鑷繁绔欏湪涓�搴ч珮灞变笂锛屽ソ鏈嬪弸鈥滈樋姣涒�濈珯鍦ㄥ闈㈢殑楂樺北涓婏紝浣犺濡備綍鍠婁粬鍛紵
</p>
</div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">9</div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">9</div>
+ </div>
</div>
- </div>
</div>
<div class="page-box" page="13">
<div v-if="showPageList.indexOf(13) > -1">
@@ -354,53 +340,45 @@
<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"
+ 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>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-left">10</div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">10</div>
+ </div>
</div>
- </div>
</div>
</div>
</template>
<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: "",
@@ -596,7 +700,7 @@
this.$emit('closeAudio', e.srcElement.currentSrc)
},
videoPlay(e) {
- this.$emit('closeVideo',e.srcElement.currentSrc)
+ this.$emit('closeVideo', e.srcElement.currentSrc)
},
handleChapterData() {
localStorage.setItem(
diff --git a/src/books/artAndDrama/view/components/chapter002.vue b/src/books/artAndDrama/view/components/chapter002.vue
index ebd4afe..49800fa 100644
--- a/src/books/artAndDrama/view/components/chapter002.vue
+++ b/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"></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>
@@ -211,10 +215,11 @@
<img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
- <div class="bodystyle" style="margin-top: 3%;" >
+ <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,50 @@
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'
+ },
+ ],
};
},
methods: {
diff --git a/src/books/artAndDrama/view/components/chapter003.vue b/src/books/artAndDrama/view/components/chapter003.vue
index 5ccfa2e..cd6c46f 100644
--- a/src/books/artAndDrama/view/components/chapter003.vue
+++ b/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>
@@ -42,13 +41,17 @@
<h3 class="lefth3" id="c022" style="margin-top: 7%"><img class="img-gn1" alt=""
src="../../assets/images/czysj.jpg" /></h3>
<p class="text"><span class="hs1">鈼�</span>閭�璇峰皬浼欎即鍒嗚鑹叉湕璇甸檮褰曚腑鐨勫墽鏈�夋1锝�2锛岄噸璇诲姞鐐规枃瀛椼��</p>
- <p class="block3" style=""><span class="hs">鍓ф湰</span></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>
+ <!-- 姝ゅ涓洪檮褰曡祫婧愬 -->
+ <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>
+ <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>
- <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>
- <p><br /></p>
<!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
<div class="page-footer">
<img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
@@ -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: '', // 褰撳墠鏄剧ず鐨凥TML鍐呭
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>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/chapter004.vue b/src/books/artAndDrama/view/components/chapter004.vue
index 7d95fff..80f7f08 100644
--- a/src/books/artAndDrama/view/components/chapter004.vue
+++ b/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>
@@ -57,10 +59,11 @@
<h1>
<img src="../../assets/images/unit4-header-img.png" alt="" style="height: auto; width: 100%" />
</h1>
- <div class="bodystyle" style="margin-top: 3%;" >
+ <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>
@@ -77,7 +80,7 @@
<img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
</h1>
<img class="headerimg" src="../../assets/images/page5.png" alt="" />
- <div class="bodystyle" style="margin-top: 3%;" >
+ <div class="bodystyle" style="margin-top: 3%;">
<h3 class="lefth3" id="c034"><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>
@@ -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,23 +124,24 @@
<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>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-left">32</div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">32</div>
+ </div>
</div>
- </div>
</div>
<div class="page-box" page="36">
<div v-if="showPageList.indexOf(36) > -1">
<h1>
<img src="../../assets/images/unit4-header-img.png" alt="" style="width: 100%; height: auto" />
</h1>
- <div class="bodystyle" style="margin-top: 3%;" >
+ <div class="bodystyle" style="margin-top: 3%;">
<h2 id="b020" class="problem">鍗曞厓娲诲姩浠诲姟</h2>
<h3 class="lefth3" id="c039"><img class="img-gn1" alt="" src="../../assets/images/xsyty.jpg" /></h3>
<p class="center text1"><span class="hs">褰綋鎿嶇粌涔�</span></p>
@@ -152,13 +157,13 @@
<p class="text"><span class="hs1">鈼�</span>鎻愭矇鑲╄繍鍔�</p>
<p class="text">骞宠鍓嶆柟锛岃偐鑶�鏀炬澗锛屽弻鎵嬭嚜鐒朵笅鍨傦紝鍙岃剼鎵撳紑锛屼笌鑲╁悓瀹姐��</p>
</div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">33</div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-right">33</div>
+ </div>
</div>
- </div>
-
+
</div>
<div class="page-box" page="37">
<div v-if="showPageList.indexOf(37) > -1">
@@ -173,12 +178,13 @@
<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"
x5-video-orientation="h5" x5-video-player-fullscreen="true" x5-playsinline="" controls
- controlslist="nodownload" class="w100 video" @play="videoPlay"
+ controlslist="nodownload" class="w100 video" @play="videoPlay"
style="margin-top: 40px; border-radius: 10px; border: 2px solid green;"></video>
</p>
<p class="center videoname">
@@ -189,17 +195,16 @@
class="collect-btn" @click="handleCollect('video')" />
</el-tooltip>
</p>
- </div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-left">34</div>
+ </div>
+ <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
+ <div class="page-footer">
+ <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
+ <div class="page-footer-number-left">34</div>
+ </div>
</div>
- </div>
</div>
</div>
</template>
-
<script>
import { getResourcePath } from "@/assets/methods/resources";
export default {
@@ -208,7 +213,6 @@
showPageList: {
type: Array,
},
-
},
//鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
mounted() {
@@ -233,7 +237,7 @@
questionData: {
warnUp: {
one: "",
-
+
},
reading: {
one: "",
@@ -253,6 +257,13 @@
},
};
},
+ //娴嬭瘯
+ computed: {
+ currentQuestion() {
+ return this.questions[this.currentIndex];
+ },
+ },
+ //娴嬭瘯缁撴潫
methods: {
//瑙嗛鍜岄煶棰戠殑MD5鍦板潃
async getVidoePath() {
@@ -269,14 +280,14 @@
"artAndDrama-book-question-four",
JSON.stringify(this.questionData)
);
- },
+ },
audioPlay(e) {
- this.$emit('closeAudio',e.srcElement.currentSrc)
- },
- videoPlay(e) {
- this.$emit('closeVideo',e.srcElement.currentSrc)
- },
- handleChapterData() {
+ this.$emit('closeAudio', e.srcElement.currentSrc)
+ },
+ videoPlay(e) {
+ this.$emit('closeVideo', e.srcElement.currentSrc)
+ },
+ handleChapterData() {
localStorage.setItem(
"math-chapterData",
JSON.stringify(this.chapterData)
@@ -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%;
}
diff --git a/src/books/artAndDrama/view/components/chapter005.vue b/src/books/artAndDrama/view/components/chapter005.vue
deleted file mode 100644
index e85a5da..0000000
--- a/src/books/artAndDrama/view/components/chapter005.vue
+++ /dev/null
@@ -1,257 +0,0 @@
-<template>
- <div class="chapter" num="6">
- <div class="page-box" page="38">
- <div v-if="showPageList.indexOf(38) > -1">
- <h1>
- <img src="../../assets/images/unit5-header-img.png" alt="" style="width: 100%; height: auto" />
- </h1>
- <div class="bodystyle" style="margin-top: 3%">
- <h1 id="a008" class="problem" style="color: black; font-weight: 500; margin-bottom: 10%">闄勩��褰�</h1>
- <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="block text">婕斿憳琛細铓傝殎闃熼暱銆佸皬铓傝殎銆佸ぇ澶磋殏铓併�佸皬鐪奸暅铓傝殎銆佽殏铓佸皬濡广�佸ザ閰汉</p>
- <p class="block3 text" style="margin-top: 4%"><span class="hs">閫夋1</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>銆傝皝鍋峰槾灏�<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>
- </div>
- <p><br /></p>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">35</div>
- </div>
- </div>
- </div>
- <div class="page-box" page="39">
- <div v-if="showPageList.indexOf(39) > -1">
- <h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
- </h1>
- <img class="headerimg" src="../../assets/images/page5.png" alt="" />
- <div class="bodystyle" style="margin-top: 3%">
- <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="block3 text" style="margin-top: 4%"><span class="hs">閫夋2</span></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>
- </div>
- <p><br /></p>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-left">36</div>
- </div>
- </div>
- </div>
- <div class="page-box" page="40">
- <div v-if="showPageList.indexOf(40) > -1">
- <h1>
- <img src="../../assets/images/unit5-header-img.png" alt="" style="height: auto; width: 100%" />
- </h1>
- <div class="bodystyle" style="margin-top: 3%">
- <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="block3 text" style="margin-top: 4%"><span class="hs">閫夋3</span></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>
- </div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">37</div>
- </div>
- </div>
- </div>
- <div class="page-box" page="41">
- <div v-if="showPageList.indexOf(41) > -1">
- <h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
- </h1>
- <img class="headerimg" src="../../assets/images/page5.png" alt="" />
- <div class="bodystyle" style="margin-top: 3%;">
- <p class="block3 text" style="margin-top: 4%;"><span class="hs">閫夋4</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="block3 text" style="margin-top: 4%;"><span class="hs">閫夋5</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>
- </div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-left">38</div>
- </div>
- </div>
- </div>
- <div class="page-box" page="42">
- <div v-if="showPageList.indexOf(42) > -1">
- <h1>
- <img src="../../assets/images/unit5-header-img.png" alt="" style="width: 100%; height: auto" />
- </h1>
- <img class="headerimg" src="../../assets/images/page5.png" alt="" />
- <div class="bodystyle" style="margin-top: 3%">
- <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>
- </div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-right">39</div>
- </div>
- </div>
- </div>
- <div class="page-box" page="43">
- <div v-if="showPageList.indexOf(43) > -1">
- <h1>
- <img src="../../assets/images/header-green.png" alt="" style="width: 100%; height: auto" />
- </h1>
- <img class="headerimg" src="../../assets/images/page5.png" alt="" />
- <div class="bodystyle" style="margin-top: 3%">
- <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>
- </div>
- <!-- 姝ゆ涓洪〉鑴氶儴鍒嗭紙闇�瑕佽缃〉鐮侊級 -->
- <div class="page-footer">
- <img class="page-footer-image" src="../../assets/images/ym.jpg" alt="Page Image" />
- <div class="page-footer-number-left">40</div>
- </div>
- </div>
- </div>
- </div>
-</template>
-
-<script>
-export default {
- name: "chapterFive",
- props: {
- showPageList: {
- type: Array,
- },
-
- },
- //鍦ㄨ繖閲屽璋冪敤鐨勬柟娉曡繘琛屾寕杞�
- mounted() {
- },
- data() {
- return {
- };
- },
- methods: {
-
- },
-};
-</script>
-
-<style lang="less" scoped>
-.w70 {
- width: 78%;
-}
-
-.fw-400 {
- font-weight: 400 !important;
-}
-
-.fz-26 {
- font-size: 26px !important;
-}
-
-.cover-img {
- position: absolute;
- top: 33%;
- left: 23%;
-}
-
-.division-line {
- width: 2px;
- height: 100%;
- background-color: red;
-}
-
-.macthing {
- background-color: rgb(188, 220, 164);
- padding: 5% 0%;
-}
-</style>
\ No newline at end of file
diff --git a/src/books/artAndDrama/view/components/index.vue b/src/books/artAndDrama/view/components/index.vue
index 7d6476a..0dc4326 100644
--- a/src/books/artAndDrama/view/components/index.vue
+++ b/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, // 鑺傛祦闃堝��
@@ -157,8 +155,8 @@
}, 500);
// 娴嬭瘯椤甸潰璺宠浆
- //setTimeout(() => {
- //this.gotoPage(2,4);
+ setTimeout(() => {
+ this.gotoPage(3,16);
// setTimeout(() => {
// this.renderSign("Highlight", {
// id: "2ACA9359",
@@ -186,7 +184,7 @@
// txt: " 杩愬姩绯荤粺鏄敱楠ㄣ�侀杩炵粨鍜岄楠艰倢涓夐儴鍒嗙粍鎴愮殑銆傚叏韬殑楠ㄩ�氳繃楠ㄨ繛缁撶粍鎴愪汉浣撻楠硷紙瑙佸浘1-1锛夈�傞楠兼槸浜轰綋鐨勬敮鏋讹紝鍏锋湁淇濇姢鍐呰剰鍣ㄥ畼銆佷緵鑲岃倝闄勭潃鍜屼綔涓鸿倢鑲夎繍鍔ㄧ殑鏉犳潌绛変綔鐢ㄣ�傚湪绁炵粡绯荤粺鐨勬敮閰嶄笅锛岃倢鑲夋敹缂╃壍鍔ㄦ墍闄勭潃鐨勯缁曠潃鍏宠妭杞姩锛屼娇韬綋浜х敓鍚勭鍔ㄤ綔銆傛墍浠ワ紝杩愬姩绯荤粺鍏锋湁杩愬姩銆佹敮鎸佸拰淇濇姢绛夊姛鑳斤紝骞煎勾鏃舵湡鐨勯楠艰繕鍏锋湁閫犺鍔熻兘銆� ",
// txtIndex: 57
// });
- // }, 500);
+ }, 500);
},
methods: {
// setZoom1() {
@@ -714,7 +712,6 @@
chapterTwo,
chapterThree,
chapterFour,
- chapterFive,
};
// 閬嶅巻鎵�鏈夌珷鑺傛枃浠�
for (const key in pageData) {
@@ -901,7 +898,6 @@
miniAudio,
chapterThree,
chapterFour,
- chapterFive,
},
};
</script>
diff --git a/src/components/choice/choice.vue b/src/components/choice/choice.vue
new file mode 100644
index 0000000..9e45271
--- /dev/null
+++ b/src/components/choice/choice.vue
@@ -0,0 +1,424 @@
+<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)" 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)" 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">涓婁竴棰�</button>
+ <button v-if="currentIndex < questions.length - 1" @click="nextQuestion">涓嬩竴棰�</button>
+ <button @click="resetQuestion">閲嶅仛</button>
+ <button @click="submitQuestion">鎻愪氦</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,
+ },
+ };
+ },
+ props: {
+ questions: {
+ type: Array,
+ required: true
+ },
+ },
+ computed: {
+ currentQuestion() {
+ return this.questions[this.currentIndex];
+ },
+ },
+ 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);
+ }
+
+ }
+ },
+ 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;
+ }
+ // 濡傛灉涓や釜鏁扮粍鐨勯暱搴︿笉涓�鏍凤紝鍒欑洿鎺ヨ繑鍥瀎alse
+ if (selectedValues.length !== correctAnswers.length) {
+ // 寮瑰嚭鎻愮ず淇℃伅锛堝彲閫夛級
+ // alert('鎮ㄩ�夋嫨鐨勯�夐」鏁伴噺涓嶆纭紒');
+ return false;
+ }
+ // 浣跨敤JSON.stringify灏嗘暟缁勮浆鎹负瀛楃涓诧紝鐒跺悗姣旇緝瀛楃涓叉槸鍚︾浉绛�
+ // 娉ㄦ剰锛氳繖绉嶆柟娉曞彧閫傜敤浜庢暟缁勫厓绱犻兘鏄熀鏈被鍨嬶紙濡傚瓧绗︿覆銆佹暟瀛楋級鐨勬儏鍐�
+ // 濡傛灉鏁扮粍鍖呭惈瀵硅薄鎴栧鏉傜殑鏁版嵁缁撴瀯锛屽彲鑳介渶瑕佷娇鐢ㄦ洿澶嶆潅鐨勬瘮杈冩柟娉�
+ if (JSON.stringify(selectedValues) !== JSON.stringify(correctAnswers)) {
+ // 寮瑰嚭鎻愮ず淇℃伅锛堝彲閫夛級
+ // alert('鎮ㄩ�夋嫨鐨勯�夐」涓嶆纭紒');
+ return false;
+ }
+ // 濡傛灉浠ヤ笂鎵�鏈夋潯浠堕兘閫氳繃锛岄偅涔堝彲浠ヨ涓洪�夋嫨鏄纭殑
+ return true;
+ } else {
+ // 瀵逛簬澶氶�夛紝闇�瑕佹瘮杈冧袱涓暟缁勬槸鍚︾浉绛夛紙鎴栧寘鍚浉鍚屽厓绱狅紝鍏蜂綋鍙栧喅浜庨渶姹傦級
+ // 杩欓噷闇�瑕佸皢鐢ㄦ埛閫夋嫨鐨勭储寮曡浆鍖栦负鍏蜂綋鐨剉alue鍊�
+ const selectedValues = this.getSelectedOptions();
+ const correctSet = new Set(this.currentQuestion.answer);
+ // 濡傛灉selectedValues涓虹┖鏁扮粍锛屽垯鐩存帴杩斿洖false锛屽洜涓烘病鏈変换浣曢�夐」琚�変腑
+ if (selectedValues.length === 0) {
+ // alert('鎮ㄨ繕鏈�夋嫨浠讳綍閫夐」锛�')
+ return false;
+ }
+ // 濡傛灉涓や釜鏁扮粍鐨勯暱搴︿笉涓�鏍凤紝鍒欑洿鎺ヨ繑鍥瀎alse锛屽洜涓烘病鏈変换浣曢�夐」琚�変腑
+ 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;
+ /* 榧犳爣鎮仠鏃跺瓧浣撻鑹插彉涓虹櫧鑹� */
+ /* 鍏朵粬浣犳兂瑕佺殑鎮仠鏍峰紡... */
+}
+
+.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>
\ No newline at end of file
--
Gitblit v1.9.1