From e466f6eb8ba044755318ba7db654772fb7a8fa2b Mon Sep 17 00:00:00 2001
From: unknown <qq1940665526@163.com>
Date: 星期二, 04 六月 2024 15:41:16 +0800
Subject: [PATCH] Merge branch 'master' of http://182.92.203.7:2001/r/testbookLayout
---
.env.product | 3
src/assets/js/config.js | 2
src/books/English/assets/images/matching-one.png | 0
src/books/English/view/components/chapter001.vue | 35 ++++--
src/books/childHealth/assets/images/chapterOne/0036-1.png | 0
src/components/matching/matching.vue | 250 +++++++++++++++++++++++++++++++++++++++----------
src/App.vue | 2
src/books/English/assets/main.less | 4
src/books/childHealth/view/content/components/chapter001.vue | 2
src/books/childHealth/view/content/index.vue | 2
10 files changed, 228 insertions(+), 72 deletions(-)
diff --git a/.env.product b/.env.product
index 923d230..4df5688 100644
--- a/.env.product
+++ b/.env.product
@@ -1,3 +1,4 @@
VUE_APP_ENV = 'product'
VUE_APP_API_URL = "https://jsek.bnuic.com"
-PUBLIC_PATH = 'http://182.92.203.7:3007/books/book'
\ No newline at end of file
+PUBLIC_PATH = 'http://182.92.203.7:3007/books/book'
+# PUBLIC_PATH = 'https://jsek.bnuic.com/books/book'
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index eff2cc5..57de654 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -40,6 +40,8 @@
initTestBook: async (bookId, tryPageCount) => {
// this.activeBook = await this.config.getBookConfig(this.config.resourceCtx + bookId);
if (
+ // "http://182.92.203.7:3007/books/resource/"
+ // "https://jsek.bnuic.com/books/resource/"
this.config.resourceCtx ==
"http://182.92.203.7:3007/books/resource/"
) {
diff --git a/src/assets/js/config.js b/src/assets/js/config.js
index 8dd3eda..889a5ea 100644
--- a/src/assets/js/config.js
+++ b/src/assets/js/config.js
@@ -1,5 +1,7 @@
import axios from "axios";
export const resourceCtx = "http://182.92.203.7:3007/books/resource/"; // 璧勬簮璇锋眰鍦板潃
+// export const resourceCtx = "https://jsek.bnuic.com/books/resource/"; // 璧勬簮璇锋眰鍦板潃
+
export let activeBook = {}; // 璧勬簮璇锋眰鍦板潃
export let goodsStore = "";
// 璇锋眰鏁欐潗閰嶇疆淇℃伅
diff --git a/src/books/English/assets/images/matching-one.png b/src/books/English/assets/images/matching-one.png
new file mode 100644
index 0000000..f450b64
--- /dev/null
+++ b/src/books/English/assets/images/matching-one.png
Binary files differ
diff --git a/src/books/English/assets/main.less b/src/books/English/assets/main.less
index 7e7ed49..b36e506 100644
--- a/src/books/English/assets/main.less
+++ b/src/books/English/assets/main.less
@@ -725,7 +725,9 @@
.wh-nr {
white-space: nowrap;
}
-
+ .tl-le {
+ text-align: left;
+ }
.pb-104 {
padding-bottom: 104px;
}
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 4a537d1..11382cc 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -517,9 +517,13 @@
<p class="center">
<img class="img-0" alt="" src="../../assets/images/0013-3.jpg" />
</p>
- <!-- <div>
- <matching :rawData="rawData" :item="question" :value="value"></matching>
- </div> -->
+ <div>
+ <ul class="fl ju-bt">
+ <li>Speakers銆�Chinese Cultural Symbols</li>
+ <li style="width:40%;text-align:center">Descriptions</li>
+ </ul>
+ <matching :rawData="rawData" :item="question"></matching>
+ </div>
<h3 id="c003" class="fl al-cn">
<span class="bjh3">Reading</span>
<audio :src="resource.readingOne" controls></audio>
@@ -2331,19 +2335,19 @@
left: [
{
oldId: "FB34",
- txt: "Silk",
+ txt: "Martin銆�銆�銆�銆�Silk",
},
{
oldId: "64D6",
- txt: "The Great Wall",
+ txt: "Jessica銆�銆�The Great Wall",
},
{
oldId: "2ED4",
- txt: "Chinese Food",
+ txt: "Soren銆�銆�Chinese Food",
},
{
oldId: "44DE",
- txt: "Chinese Tea",
+ txt: "Chinese銆�銆�銆�銆�Tea",
},
],
right: [
@@ -2382,12 +2386,12 @@
},
{
id: "2ED4",
- linkValue: "C",
+ linkValue: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
value: "Chinese Food",
},
{
id: "44DE",
- linkValue: "D",
+ linkValue: "It was first discovered and drank in China and my favorileLongjing tca is praduced near the West Lake in Hangzhou.",
value: "Chinese Tea",
},
],
@@ -2400,6 +2404,10 @@
txt: "It is one of China's must-see sights for visitors, which shows thewisdom of Chinese people.",
},
{
+ oldId: "44DE",
+ txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
+ },
+ {
oldId: "FB34",
txt: "The clothing material is quite popular among Roman women inancient times.",
},
@@ -2407,15 +2415,12 @@
oldId: "2ED4",
txt: "It is very delicious and I like the hot and spicy Sichuan lavor hest.",
},
- {
- oldId: "44DE",
- txt: "It was first discovered and drank in China and my favoriteLongjing tea is produced near the West Lake in Hangzhou.",
- },
+
],
values: [
{
oldId: "FB34",
- txt: "Silk",
+ txt: "Martin Silk",
},
{
oldId: "64D6",
@@ -2439,6 +2444,7 @@
titleDescription: "1",
userChoise: [],
value: [],
+ answerImg:require("@/books/English/assets/images/matching-one.png")
},
questionData: {
warnUp: {
@@ -2794,4 +2800,5 @@
select {
height: 24px;
}
+
</style>
diff --git a/src/books/childHealth/assets/images/chapterOne/0036-1.png b/src/books/childHealth/assets/images/chapterOne/0036-1.png
new file mode 100644
index 0000000..73ba71b
--- /dev/null
+++ b/src/books/childHealth/assets/images/chapterOne/0036-1.png
Binary files differ
diff --git a/src/books/childHealth/view/content/components/chapter001.vue b/src/books/childHealth/view/content/components/chapter001.vue
index e7ec406..4722135 100644
--- a/src/books/childHealth/view/content/components/chapter001.vue
+++ b/src/books/childHealth/view/content/components/chapter001.vue
@@ -2641,7 +2641,7 @@
<div class="fl">
<div class="left" style="width: 50%">
<p class="center openImgBox">
- <img src="../../../assets/images/chapterOne/0036-1.jpg" alt="" class="w100">
+ <img src="../../../assets/images/chapterOne/0036-1.png" alt="" class="w100">
</p>
<p class="img">鍥�1-11 鐢锋�х敓娈栫郴缁熺ず鎰忓浘</p>
</div>
diff --git a/src/books/childHealth/view/content/index.vue b/src/books/childHealth/view/content/index.vue
index 663fc02..cfac6ed 100644
--- a/src/books/childHealth/view/content/index.vue
+++ b/src/books/childHealth/view/content/index.vue
@@ -171,7 +171,7 @@
},
mounted() {
// 榛樿鍔犺浇绔犺妭
- this.showCatalogList = [1];
+ this.showCatalogList = [3];
// 婊氬姩鐩戝惉鑺傛祦
this.throttledScrollHandler = _.throttle(
this.scrollFun,
diff --git a/src/components/matching/matching.vue b/src/components/matching/matching.vue
index 2ceb837..85cb98d 100644
--- a/src/components/matching/matching.vue
+++ b/src/components/matching/matching.vue
@@ -1,41 +1,67 @@
<template>
- <div class="connect" id="connect" ref="connect" @mousemove="mousemove" @mouseup="(e) => touchend(e)">
- <div class="answer" >
- <div class="answer-box">
- <div
- class="answer-box-item"
- v-for="(item, index) in leftArr"
- :key="index"
- ref="left"
- @mousedown="(e) => touchstart(e, item, index)"
-
- >
- {{ item.label.txt }}
+ <div class="matching">
+ <div
+ class="connect"
+ id="connect"
+ ref="connect"
+ @mousemove="mousemove"
+ @mouseup="(e) => touchend(e)"
+ >
+ <div class="answer">
+ <div class="answer-box">
+ <div
+ class="answer-box-item"
+ v-for="(item, index) in leftArr"
+ :key="index"
+ ref="left"
+ @mousedown="(e) => touchstart(e, item, index)"
+ :style="{backgroundColor:bc}"
+ >
+ {{ item.label.txt }}
+ </div>
+ </div>
+ <div class="answer-box">
+ <div
+ class="answer-box-item tl-le"
+ v-for="(item, index) in rightArr"
+ :key="index"
+ ref="right"
+ :style="{backgroundColor:bc}"
+ >
+ {{ item.label.txt }}
+ </div>
</div>
</div>
- <div class="answer-box">
- <div
- class="answer-box-item"
- v-for="(item, index) in rightArr"
- :key="index"
- ref="right"
- >
- {{ item.label.txt }}
- </div>
- </div>
+ <canvas
+ class="connect-canvasA"
+ :width="clientWidth"
+ :height="clientHeight"
+ ref="canvasA"
+ ></canvas>
+ <canvas
+ class="connect-canvasB"
+ :width="clientWidth"
+ :height="clientHeight"
+ ref="canvasB"
+ ></canvas>
</div>
- <canvas
- class="connect-canvasA"
- :width="clientWidth"
- :height="clientHeight"
- ref="canvasA"
- ></canvas>
- <canvas
- class="connect-canvasB"
- :width="clientWidth"
- :height="clientHeight"
- ref="canvasB"
- ></canvas>
+ <!-- 鎸夐挳 -->
+ <div class="btn-bottom">
+ <el-button @click="submitData">鎻愪氦</el-button>
+ <el-button @click="saveData">淇濆瓨</el-button>
+ <el-button @click="redo">閲嶅仛</el-button>
+ <el-button @click="handleAnswer">鏌ョ湅绛旀</el-button>
+ </div>
+ <!-- 瑙ｆ瀽 -->
+ <ul class="show-answer" v-if="isShowAnswer">
+ <li>绛旀缁撴灉锛�</li>
+ <li class="show-answer-box">
+ <div>绛旀:</div>
+ <div>
+ <img :src="item.answerImg" alt="" class="w100">
+ </div>
+ </li>
+ </ul>
</div>
</template>
@@ -56,7 +82,11 @@
scrollTop: 0,
debounce: false,
checkItem: null,
- checkItemIndex:null
+ checkItemIndex: null,
+ isShowAnswer: false,
+ isRight: null,
+ value:[{left:0,right:0}],
+ pageNum:null
};
},
props: {
@@ -69,18 +99,16 @@
};
},
},
- value: {
- type: Array,
- default: () => {
- return [];
- },
- },
item: {
type: Object,
default: () => {
return [];
},
},
+ bc:{
+ type:String,
+ default:"#0bab87"
+ }
},
watch: {
rawData: {
@@ -91,6 +119,8 @@
},
},
mounted() {
+ // 鑾峰彇褰撳墠椤电爜锛岀敤浜庡尮閰嶆湰娆″瓨鍌ㄩ鐩暟鎹�
+ this.pageNum = this.handlePage()
// 娣诲姞婊氬姩浜嬩欢 鐩戝惉 瑙ｅ喅鍥犱负婊氬姩寮曡捣鐨勬嫋鍔ㄧ嚎涓嶅鐨勯棶棰�
window.addEventListener(
"scroll",
@@ -112,6 +142,7 @@
this.$nextTick(() => {
this.drawing();
});
+ this.getAnswer()
},
methods: {
init() {
@@ -150,7 +181,7 @@
},
// 瑙︽懜缁撴潫
touchend(e, index) {
- console.log("鎶捣", e,this.checkItem);
+ console.log("鎶捣", e, this.checkItem);
this.isDragging = false;
if (this.item.showAnswer) {
return false;
@@ -187,16 +218,16 @@
};
})
.filter((r) => r.right !== undefined);
- // this.$emit("input", model);
+ this.$emit("input", model);
this.item.userChoise = model;
- // console.log(JSON.stringify(model));
+ console.log(JSON.stringify(model));
},
// 瑙︽懜寮�濮�
- touchstart(e, item,index) {
+ touchstart(e, item, index) {
this.isDragging = true;
console.log("鎸変笅", e);
- this.checkItem = item
- this.checkItemIndex = index
+ this.checkItem = item;
+ this.checkItemIndex = index;
e.stopPropagation();
// let event = e.targetTouches[0];
item.line = [
@@ -223,7 +254,7 @@
if (this.item.showAnswer) {
return false;
}
- console.log('绉诲姩',e);
+ // console.log('绉诲姩',e);
this.checkItem.line[2] = e.pageX;
this.checkItem.line[3] =
e.pageY - this.$refs.connect.getBoundingClientRect().y + this.scrollTop;
@@ -272,10 +303,98 @@
let rightY = rightEvent.offsetTop + rightEvent.clientHeight / 2;
return [leftX, leftY, rightX, rightY];
},
- mouseup() {
- console.log("澶х洅瀛愭姮璧�", this.isDragging);
- this.isDragging = false;
+ areArraysEqual(array1, array2) {
+ // 濡傛灉涓や釜鏁扮粍闀垮害涓嶅悓锛屽垯瀹冧滑涓嶇瓑
+ if (array1.length !== array2.length) {
+ return false;
+ }
+
+ // 閬嶅巻鏁扮粍骞舵瘮杈冩瘡涓璞＄殑灞炴��
+ for (let i = 0; i < array1.length; i++) {
+ const obj1 = array1[i];
+ const obj2 = array2[i];
+
+ // 濡傛灉瀵硅薄鐨刲eft鎴杛ight灞炴�т笉鐩哥瓑锛屽垯鏁扮粍涓嶇瓑
+ if (obj1.left !== obj2.left || obj1.right !== obj2.right) {
+ return false;
+ }
+ }
+
+ // 濡傛灉鎵�鏈夊璞￠兘鍖归厤锛屽垯鏁扮粍鐩哥瓑
+ return true;
},
+ // 鏌ョ湅绛旀
+ handleAnswer() {
+ this.isShowAnswer = !this.isShowAnswer;
+ },
+ // 鎻愪氦
+ submitData() {
+ const answerArr = [];
+ const values = this.item.options.values;
+ for (let index = 0; index < values.length; index++) {
+ const item = values[index];
+ const rightIndex = this.item.options.linkValues.findIndex(
+ (citem) => citem.oldId == item.oldId
+ );
+ debugger;
+ answerArr.push({
+ left: index,
+ right: rightIndex,
+ });
+ }
+ this.isRight = this.areArraysEqual(this.item.userChoise,answerArr)
+ console.log(
+ "绛旀",
+ answerArr,
+ this.item.userChoise,
+ this.isRight
+ );
+ },
+ // 鑾峰彇褰撳墠椤电爜
+ handlePage() {
+ let pageNum = null
+ const element = document.getElementsByClassName("matching")[0];
+ if (element) {
+ pageNum = this.getParentWithClass(
+ element,
+ "page-box"
+ ).getAttribute("page");
+ }
+ return pageNum
+ },
+ getParentWithClass(element, className) {
+ while (element.parentElement) {
+ element = element.parentElement;
+ if (element.classList.contains(className)) {
+ return element;
+ }
+ }
+ },
+ // 鑾峰彇鏈湴瀛樺偍棰樼洰绛旀
+ getAnswer() {
+ const data = localStorage.getItem(this.config.activeBook.name + '-matching-' + this.pageNum)
+ if(data) {
+ this.value = JSON.parse(data)
+ }
+ },
+ // 淇濆瓨
+ saveData() {
+ if(this.item.userChoise.length)
+ localStorage.setItem(this.config.activeBook.name + '-matching-' + this.pageNum,JSON.stringify(this.item.userChoise))
+ console.log('淇濆瓨鎴愬姛',this.config.activeBook.name,this.pageNum);
+ },
+ // 閲嶅仛
+ redo() {
+ localStorage.removeItem(this.config.activeBook.name + '-matching-' + this.pageNum)
+ this.value = []
+ for (let index = 0; index < this.leftArr.length; index++) {
+ const item = this.leftArr[index];
+ item.value = []
+ item.line = []
+ }
+ this.leftArr
+ this.drawing()
+ }
},
};
</script>
@@ -313,14 +432,14 @@
text-align: center;
&-item {
+ cursor: pointer;
z-index: 2;
- // display: inline-flex;
padding: 10px;
border-radius: 4px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
line-height: 40px;
- padding: 20px 0;
+ padding: 6px;
}
&-item:last-child {
@@ -328,11 +447,34 @@
}
}
}
-
+.tl-le {
+ text-align: left;
+}
.connect {
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* 鏍囧噯璇硶 */
}
+.show-answer {
+ margin: 30px auto;
+ width: 100%;
+ height: min-content;
+ // background-color: pink;
+ box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+ .show-answer-box {
+ padding: 10px;
+ }
+}
+.btn-bottom {
+ width: 70%;
+ margin: 70px auto 0 auto;
+ display: flex;
+ justify-content: space-evenly;
+}
+.el-button {
+ height:30px;
+ padding:9px;
+ min-width: 78px
+}
</style>
--
Gitblit v1.9.1