testbookLayout.git

			@@ -5,14 +5,14 @@
			<h1 id="a004">
			<!-- 这里的动图有问题，没有背景图片 -->
			<img class="img-0" alt="" src="../../assets/images/dy4.jpg" />
			<audio :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
			<audio style="margin-top: 1em;" :src="audioPathOne" controls controlslist="noplaybackrate nodownload" class="audio"></audio>
			</h1>
			<div class="bodystyle">
			<div class="bk">
			<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 class="block mar-block">
			在戏剧演出中，除了舞台上的演员，导演、灯光、造型等幕后人员也发挥着重要的作用。本单元让我们从台前走进幕后，向默默奉献的工作人员致敬！</p>
			</div>
			</div>
			@@ -33,14 +33,16 @@
			<div class="bodystyle" style="margin-top: 3%">
			<h2 id="b016" class="problem">第一课　一模一样</h2>
			<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 t-l"><span class="hs1">◇</span>说一说：快速站起来的秘诀是什么？
			<textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
			style="margin-left: 40px; width: 92%" class="fz-16 fm-son" @change="setBookQuestion">
			<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>以小组为单位围成一圈，面朝圈外蹲下，相邻两人互挎手臂，组员同时站起来，看看哪个组最快！</p>
			<p class="text t-l rhombusFather"><span class="hs1 rhombus">◇</span>说一说：快速站起来的秘诀是什么？
			<textarea v-model="questionData.reading.one" placeholder="请输入内容" rows="6"
			class="w90 ma-l-40 fz-16 fm-son" @change="setBookQuestion"
			:class="{ 'textarea-focused': isFocused === 'one' }" @focus="handleFocus('one')"
			@blur="handleBlur('one')">
			</textarea>
			</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 rhombusFather"><span class="hs1 rhombus">◇</span>以小组为单位，表演以下场景，注意保持动作一致哦。</p>
			<p class="text">蚂蚁队长吹响集合号，蚂蚁们迅速跑上场站好队形。</p>
			<p class="text">蚂蚁们抬着奶酪向前走着。</p>
			<p class="text">蚂蚁们跟随蚂蚁队长的口令消失在草丛里。</p>
			@@ -64,11 +66,14 @@
			<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 rhombusFather"><span
			class="hs1 rhombus">◇</span>春天来了，春风吹过，柳树发芽了，迎春花开了，小燕子在天空自由地飞翔。一切都是那么生机勃勃。请为“春天”涂上你喜欢的颜色。</p>
			<!-- 图片缺失 -->
			<!-- <p class="center"><img class="img-e" alt="" src="./../assets/images/0033-1.jpg" /></p> -->
			<graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :imgWidth="596" :imgHeight="500" />
			<!-- <graffiti :page="32" :bcImg="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'"
			:imgWidth="596" :imgHeight="500" /> -->
			<paint :imgUrl="this.config.activeBook.resourceUrl + '/image/0033-1.jpg'" :page="32"
			/>
			</div>
			<!-- 此次为页脚部分（需要设置页码） -->
			<div class="page-footer">
			@@ -85,7 +90,7 @@
			<img class="headerimg" src="../../assets/images/page5.png" alt="" />
			<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="text rhombusFather"><span class="hs1 rhombus">◇</span>动动手，为《一块奶酪》中的蚂蚁角色设计简单的服装吧！</p>
			<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
			</div>
			<!-- 此次为页脚部分（需要设置页码） -->
			@@ -103,10 +108,17 @@
			<div class="bodystyle" style="margin-top: 3%">
			<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>
			<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>以小组为单位，头顶纸杯，腿夹报纸，进行夹纸运杯游戏！</p>
			<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="text rhombusFather"><span class="hs1 rhombus">◇</span>请根据《一块奶酪》的剧本，列出演出中需要的道具清单，请按照清单，利用你收集的旧物制作道具吧！</p>
			<p class="text">
			<textarea v-model="questionData.reading.two" placeholder="请输入内容" rows="6"
			style="margin: 1em 0; width: 92%" class="fz-16 fm-son" @change="setBookQuestion"
			:class="{ 'textarea-focused': isFocused === 'two' }" @focus="handleFocus('two')"
			@blur="handleBlur('two')">
			</textarea>
			</p>
			<p class="center"><img class="img-e" alt="" src="../../assets/images/0035-1.jpg" /></p>
			</div>
			<!-- 此次为页脚部分（需要设置页码） -->
			@@ -125,12 +137,12 @@
			<div class="bodystyle" style="margin-top: 3%;">
			<h2 id="b019" class="problem">第四课　奇妙的舞台</h2>
			<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="text rhombusFather"><span class="hs1 rhombus">◇</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>
			<p class="text"><span class="hs1">◇</span>邀请同伴共同完成《一块奶酪》的展演吧！</p>
			<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/4-2.gif" /></p>
			<p class="text rhombusFather"><span class="hs1 rhombus">◇</span>邀请同伴共同完成《一块奶酪》的展演吧！</p>
			<p class="center openImgBox"><img class="img-e" alt="" src="../../assets/images/0036-2.jpg" /></p>
			</div>
			<!-- 此次为页脚部分（需要设置页码） -->
			<div class="page-footer">
			@@ -148,8 +160,8 @@
			<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>
			<p class="text ends">
			<span><span class="hs1">◇</span>头部运动</span>
			<p class="text ends rhombusFather">
			<span><span class="hs1 rhombus">◇</span>头部运动</span>
			<span> <audio :src="audioPathTwo" controls controlslist="noplaybackrate nodownload"
			class="audio"></audio> </span>
			</p>
			@@ -157,16 +169,16 @@
			<p class="text">第2个八拍：左手越过头顶摸右耳，向左轻轻压头部。</p>
			<p class="text">第3个八拍：头部顺时针转一圈。</p>
			<p class="text">第4个八拍：头部逆时针转一圈。</p>
			<p class="text ends">
			<span><span class="hs1">◇</span>开肩练习</span>
			<p class="text ends rhombusFather">
			<span><span class="hs1 rhombus">◇</span>开肩练习</span>
			<span> <audio :src="audioPathThree" controls controlslist="noplaybackrate nodownload"
			class="audio"></audio> </span>
			</p>
			<p class="text">平视前方，肩膀放松，双手自然下垂，双脚打开，与肩同宽。</p>
			<p class="text">第1个八拍：第1-4拍手肘内侧向外转动，带动双肩打开；第5-8拍手肘内侧向内收回，后背拱起，带动双肩内扣。</p>
			<p class="text">第2至第4个八拍：重复第1个八拍的动作。</p>
			<p class="text ends">
			<span><span class="hs1">◇</span>提沉肩运动</span>
			<p class="text ends rhombusFather">
			<span><span class="hs1 rhombus">◇</span>提沉肩运动</span>
			<span> <audio :src="audioPathFour" controls controlslist="noplaybackrate nodownload"
			class="audio"></audio> </span>
			</p>
			@@ -188,8 +200,8 @@
			<div class="bodystyle" style="margin-top: 3%;">
			<p class="text">第1至第2个八拍：双手下垂，手心向下，双肩上提再沉下，两拍一动。</p>
			<p class="text">第3至第4个八拍：双手下垂，手心向下，左右肩膀依次上提再沉下，一拍一动。</p>
			<p class="text ends">
			<span><span class="hs1">◇</span>伸展运动</span>
			<p class="text ends rhombusFather">
			<span><span class="hs1 rhombus">◇</span>伸展运动</span>
			<span> <audio :src="audioPathFive" controls controlslist="noplaybackrate nodownload"
			class="audio"></audio> </span>
			</p>
			@@ -198,7 +210,7 @@
			<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>
			<p class="text"><span class="hs1">◇</span>写一篇排演总结，分享学习经验和感受！</p>
			<p class="text rhombusFather"><span class="hs1 rhombus">◇</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
			@@ -209,8 +221,8 @@
			<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')" />
			<img :src="collectResourceList.findIndex(item => item.id == '691cbd2c13198d04afc7800d0f2cafb0') > -1 ? collectCheck : collectImg"
			alt="" class="collect-btn" @click="handleCollect('video')" />
			</el-tooltip>
			</p>
			</div>
			@@ -225,7 +237,8 @@
			</template>
			<script>
			import { getResourcePath } from "@/assets/methods/resources";
			import graffiti from '@/components/graffiti/index.vue'
			import paint from '@/components/paint/index.vue'
			import { getCollectResource, setCollectResource } from "@/assets/methods/resources";
			export default {
			name: "chapterFour",
			props: {
			@@ -233,14 +246,22 @@
			type: Array,
			},
			},
			components: { graffiti },
			components: {
			paint
			},
			//在这里对调用的方法进行挂载
			mounted() {
			async mounted() {
			this.getVidoePath();
			const bookQuestion = localStorage.getItem("artAndDrama-book-question-four");
			if (bookQuestion) {
			this.questionData = JSON.parse(bookQuestion);
			}

			const data = localStorage.getItem("artAndDrama-chapter04-Data");
			if (data) {
			this.chapterData = JSON.parse(data);
			}
			this.collectResourceList = await getCollectResource(this.config.activeBook.bookId)
			},
			data() {
			return {
			@@ -252,6 +273,8 @@
			audioPathThree: "",
			audioPathFour: "",
			audioPathFive: "",
			isFocused: null, // 用于跟踪textarea的聚焦状态
			collectResourceList: [],
			chapterData: {
			isCollectImg: false,
			isCollectVideo: false,
			@@ -264,6 +287,7 @@
			},
			reading: {
			one: "",
			two: "",
			},
			table: {
			one: "",
			@@ -308,8 +332,13 @@
			"7abb747bd16745afb83715fcbb3579ab"
			);
			},
			handleFocus(id) {
			this.isFocused = id; // 当textarea聚焦时，设置为true
			},
			handleBlur(id) {
			this.isFocused = null; // 当textarea失去焦点时，设置为false
			},
			setBookQuestion() {
			console.log("保存");
			localStorage.setItem(
			"artAndDrama-book-question-four",
			JSON.stringify(this.questionData)
			@@ -317,18 +346,34 @@
			},
			handleChapterData() {
			localStorage.setItem(
			"math-chapterData",
			"artAndDrama-chapter04-Data",
			JSON.stringify(this.chapterData)
			);
			},
			handleCollect(type) {
			if (type == "img") {
			this.chapterData.isCollectImg = !this.chapterData.isCollectImg;
			} else if (type == "video") {
			this.chapterData.isCollectVideo = !this.chapterData.isCollectVideo;
			if (type == "video") {
			this.handleCollectResource("09de7704eeaaf3a210b8c6af0a94d545", "09de7704eeaaf3a210b8c6af0a94d545", '', "视频", "bits", '视频：团结就是力量')
			}
			this.handleChapterData();
			},
			//资源收藏事件
			handleCollectResource(id, md5, resourcePath, resourceType, source, resourceName) {
			let list = this.collectResourceList
			if (list.findIndex(item => item.id == id) > -1) {
			list = list.filter(item => item.id != id)
			} else {
			list.push({
			id,
			md5,
			resourcePath,
			resourceType,
			source,
			resourceName,
			})
			}
			this.collectResourceList = list
			setCollectResource(this.config.activeBook.bookId, this.collectResourceList)
			}
			},
			};
			</script>