|
|
@@ -11,128 +11,121 @@
|
|
|
class="close-icon"
|
|
|
src="../../../../assets/NPC/close-icon-red.png"
|
|
|
/>
|
|
|
- <div class="left-content">
|
|
|
- <Audio :mp3="item.mp3_url" :pinyin="item.pinyin" />
|
|
|
+ <el-tabs type="border-card">
|
|
|
+ <el-tab-pane label="简体">
|
|
|
+ <div class="left-content">
|
|
|
+ <div class="strockplay">
|
|
|
+ <Strockplayredline
|
|
|
+ :playStorkes="true"
|
|
|
+ :wordNum="item.con.length"
|
|
|
+ :Book_text="item.con"
|
|
|
+ :targetDiv="'pra' + item.con + index"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="left-content-pra"> </div>
|
|
|
+ <div class="footer">
|
|
|
+ <div @click="collectFlag = !collectFlag" class="bg-box">
|
|
|
+ <img
|
|
|
+ :src="
|
|
|
+ collectFlag
|
|
|
+ ? require('../../../../assets/NPC/icon-collect-red.png')
|
|
|
+ : require('../../../../assets/NPC/icon-collect-red.png')
|
|
|
+ "
|
|
|
+ class="practice-icon"
|
|
|
+ />
|
|
|
+ 收藏
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <template>
|
|
|
+ <div class="right-content">
|
|
|
+ <div class="right-strockred">
|
|
|
+ <template v-if="navIndex == 0">
|
|
|
+ <Strockred
|
|
|
+ :Book_text="cur.stem[0].con"
|
|
|
+ :hanzicolor="hanzicolor"
|
|
|
+ :playStorkes="playStorkes"
|
|
|
+ :targetDiv="'write-pra' + cur.stem[0].con"
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <Freewrite
|
|
|
+ :cur="cur"
|
|
|
+ :lineColor="hanzicolor"
|
|
|
+ :lineWidth="hanziweight"
|
|
|
+ ref="freewrite"
|
|
|
+ />
|
|
|
+ <div class="footer">
|
|
|
+ <div class="pen-colors">
|
|
|
+ <!-- <img
|
|
|
+ class="write-icon-3"
|
|
|
+ src="../../assets/common/write-icon-3.png"
|
|
|
+ /> -->
|
|
|
+ <ul class="colors-list">
|
|
|
+ <li
|
|
|
+ :class="
|
|
|
+ colorIndex == index ? 'color-item-active' + index : ''
|
|
|
+ "
|
|
|
+ :key="'color' + index"
|
|
|
+ @click="changeColor(index)"
|
|
|
+ v-for="(item, index) in 5"
|
|
|
+ >
|
|
|
+ <span :class="'color-item' + index"></span>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ <img
|
|
|
+ @click="resetHuahua(index)"
|
|
|
+ class="clean-btn"
|
|
|
+ src="../../../../assets/common/icon-clean.png"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="pen" v-if="navIndex == 1">
|
|
|
+ <img
|
|
|
+ :src="penIndex == 0 ? thinpenActive : thinpen"
|
|
|
+ @click="changePen(0)"
|
|
|
+ class="pen-img"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ :src="penIndex == 1 ? thickpenActive : thickpen"
|
|
|
+ @click="changePen(1)"
|
|
|
+ class="pen-img"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
|
|
|
- <div class="strockplay">
|
|
|
- <Strockplay
|
|
|
- :Book_text="item.con"
|
|
|
- :playStorkes="cur.playStorkes"
|
|
|
- :targetDiv="'pra' + item.con + index"
|
|
|
- />
|
|
|
- </div>
|
|
|
- <div class="footer">
|
|
|
- <!-- <div @click="collectFlag = !collectFlag" class="bg-box">
|
|
|
- <img
|
|
|
- :src="
|
|
|
- collectFlag
|
|
|
- ? require('../../assets/common/coll-icon-1.png')
|
|
|
- : require('../../assets/common/coll-icon.png')
|
|
|
- "
|
|
|
- class="practice-icon"
|
|
|
- />
|
|
|
- </div> -->
|
|
|
- <div @click="changeLearnMode(1)" class="bg-box">
|
|
|
- <!-- <img
|
|
|
- class="practice-icon"
|
|
|
- src="../../assets/common/dict-icon.png"
|
|
|
- /> -->
|
|
|
- </div>
|
|
|
- <div @click="changeLearnMode(2)" class="bg-box">
|
|
|
- <!-- <img
|
|
|
- class="practice-icon"
|
|
|
- src="../../assets/common/write-icon-1.png"
|
|
|
- /> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <template v-if="learn_mode == 2">
|
|
|
- <div class="right-content">
|
|
|
- <ul class="nav-list">
|
|
|
- <li :class="navIndex == 0 ? 'active' : ''" @click="changeNav(0)">
|
|
|
- 描红模式
|
|
|
- </li>
|
|
|
- <li :class="navIndex == 1 ? 'active' : ''" @click="changeNav(1)">
|
|
|
- 自由书写
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
-
|
|
|
- <div class="right-strockred">
|
|
|
- <template v-if="navIndex == 0">
|
|
|
- <Strockred
|
|
|
- :Book_text="cur.stem[0].con"
|
|
|
- :hanzicolor="hanzicolor"
|
|
|
- :playStorkes="playStorkes"
|
|
|
- :targetDiv="'write-pra' + cur.stem[0].con"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <Freewrite
|
|
|
- :cur="cur"
|
|
|
- :lineColor="hanzicolor"
|
|
|
- :lineWidth="hanziweight"
|
|
|
- ref="freewrite"
|
|
|
- />
|
|
|
- </template>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="footer">
|
|
|
- <div class="pen-colors">
|
|
|
- <!-- <img
|
|
|
- class="write-icon-3"
|
|
|
- src="../../assets/common/write-icon-3.png"
|
|
|
- /> -->
|
|
|
- <ul class="colors-list">
|
|
|
- <li
|
|
|
- :class="
|
|
|
- colorIndex == index ? 'color-item-active' + index : ''
|
|
|
- "
|
|
|
- :key="'color' + index"
|
|
|
- @click="changeColor(index)"
|
|
|
- v-for="(item, index) in 5"
|
|
|
- >
|
|
|
- <span :class="'color-item' + index"></span>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <!-- <img
|
|
|
- @click="resetHuahua(index)"
|
|
|
- class="clean-btn"
|
|
|
- src="../../assets/common/icon-clean.png"
|
|
|
- /> -->
|
|
|
- </div>
|
|
|
- <div class="pen" v-if="navIndex == 1">
|
|
|
- <img
|
|
|
- :src="penIndex == 0 ? thinpenActive : thinpen"
|
|
|
- @click="changePen(0)"
|
|
|
- class="pen-img"
|
|
|
- />
|
|
|
- <img
|
|
|
- :src="penIndex == 1 ? thickpenActive : thickpen"
|
|
|
- @click="changePen(1)"
|
|
|
- class="pen-img"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <ChinaDict :cur="cur" />
|
|
|
- </template>
|
|
|
+ <ul class="nav-list">
|
|
|
+ <li :class="navIndex == 0 ? 'active' : ''" @click="changeNav(0)">
|
|
|
+ 描红模式
|
|
|
+ </li>
|
|
|
+ <li :class="navIndex == 1 ? 'active' : ''" @click="changeNav(1)">
|
|
|
+ 自由书写
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="繁体">
|
|
|
+
|
|
|
+ </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import Strockplay from "./Strockplay.vue";
|
|
|
-// import Strockred from "./Strockred";
|
|
|
-// import Freewrite from "./Freewrite";
|
|
|
+import Strockplayredline from "./Strockplayredline.vue";
|
|
|
+import Strockred from "./Strockred.vue";
|
|
|
+import Freewrite from "./Freewrite.vue";
|
|
|
// import ChinaDict from "./ChinaDict";
|
|
|
// import Audio from "./AudioRed.vue";
|
|
|
export default {
|
|
|
components: {
|
|
|
- Strockplay,
|
|
|
- // Strockred,
|
|
|
- // Freewrite,
|
|
|
+ Strockplayredline,
|
|
|
+ Strockred,
|
|
|
+ Freewrite,
|
|
|
// ChinaDict,
|
|
|
// Audio,
|
|
|
},
|
|
|
@@ -140,19 +133,19 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
// learn_mode: "",
|
|
|
- // playStorkes: false,
|
|
|
- // navIndex: 0,
|
|
|
- // colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
|
|
|
- // weightList: [6, 10],
|
|
|
- // colorIndex: 0,
|
|
|
- // penIndex: 0,
|
|
|
- // hanzicolor: "",
|
|
|
- // hanziweight: "",
|
|
|
- // thinpen: require("../../assets/common/thin-pen.png"), //细笔
|
|
|
- // thinpenActive: require("../../assets/common/thin-pen-active.png"),
|
|
|
- // thickpen: require("../../assets/common/thick-pen.png"),
|
|
|
- // thickpenActive: require("../../assets/common/thick-pen-active.png"),
|
|
|
- // collectFlag: false, // 是否收藏
|
|
|
+ playStorkes: false,
|
|
|
+ navIndex: 0,
|
|
|
+ colorsList: ["#404040", "#f65d4d", "#19b068", "#52a1ea", "#ff8c49"],
|
|
|
+ weightList: [6, 10],
|
|
|
+ colorIndex: 0,
|
|
|
+ penIndex: 0,
|
|
|
+ hanzicolor: "",
|
|
|
+ hanziweight: "",
|
|
|
+ thinpen: require("../../../../assets/common/thin-pen.png"), //细笔
|
|
|
+ thinpenActive: require("../../../../assets/common/thin-pen-active.png"),
|
|
|
+ thickpen: require("../../../../assets/common/thick-pen.png"),
|
|
|
+ thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
|
|
|
+ collectFlag: false, // 是否收藏
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
@@ -184,13 +177,10 @@ export default {
|
|
|
//生命周期 - 创建完成（可以访问当前this实例）
|
|
|
created() {
|
|
|
// console.log(this.cur);
|
|
|
- // let _this = this;
|
|
|
- // let color = _this.colorsList[_this.colorIndex];
|
|
|
- // _this.hanzicolor = color;
|
|
|
- // _this.hanziweight = 6;
|
|
|
- // if (_this.cur) {
|
|
|
- // _this.learn_mode = _this.cur.learn_mode ? _this.cur.learn_mode : 2;
|
|
|
- // }
|
|
|
+ let _this = this;
|
|
|
+ let color = _this.colorsList[_this.colorIndex];
|
|
|
+ _this.hanzicolor = color;
|
|
|
+ _this.hanziweight = 6;
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {},
|
|
|
@@ -209,28 +199,28 @@ export default {
|
|
|
max-height: 434px;
|
|
|
overflow: auto;
|
|
|
margin: 0 auto;
|
|
|
-// background: #21ba71;
|
|
|
-// box-shadow: inset 0px 4px 0px rgba(255, 255, 255, 0.25);
|
|
|
- border-radius: 40px;
|
|
|
+ background: #F3F3F3;
|
|
|
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
|
|
+ border-radius: 8px;
|
|
|
.clean-btn {
|
|
|
- width: 34px;
|
|
|
- margin: 0 16px;
|
|
|
+ width: 24px;
|
|
|
+ margin: 0 4px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
.close-icon {
|
|
|
position: absolute;
|
|
|
- top: 18px;
|
|
|
- right: 18px;
|
|
|
- width: 84px;
|
|
|
- height: 84px;
|
|
|
+ top: 8px;
|
|
|
+ right: 8px;
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
cursor: pointer;
|
|
|
+ z-index: 2;
|
|
|
}
|
|
|
.Book_content {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
display: flex;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 72px 48px 48px;
|
|
|
position: relative;
|
|
|
align-items: flex-start;
|
|
|
}
|
|
|
@@ -238,57 +228,60 @@ export default {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: center;
|
|
|
+ width: 144px;
|
|
|
+ .left-content-pra{
|
|
|
+ height: 162px;
|
|
|
+ }
|
|
|
}
|
|
|
.right-content {
|
|
|
position: relative;
|
|
|
- width: 720px;
|
|
|
- height: 720px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 6px 0px rgba(0, 149, 78, 0.4);
|
|
|
- border-radius: 24px;
|
|
|
+ width: 288px;
|
|
|
+ height: 338px;
|
|
|
+ background: #F3F3F3;
|
|
|
+ border-radius: 16px;
|
|
|
box-sizing: border-box;
|
|
|
- padding: 42px 40px 24px 40px;
|
|
|
+ padding: 16px;
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
- margin-left: 64px;
|
|
|
+ margin-left: 24px;
|
|
|
.nav-list {
|
|
|
- width: 312px;
|
|
|
- height: 44px;
|
|
|
- background: rgba(49, 212, 134, 0.2);
|
|
|
- border-radius: 240px;
|
|
|
+ width: 100%;
|
|
|
+ height: 34px;
|
|
|
display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
+ justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 0;
|
|
|
- margin-bottom: 44px;
|
|
|
list-style: none;
|
|
|
+ margin-top: 16px;
|
|
|
> li {
|
|
|
- height: 52px;
|
|
|
- width: 156px;
|
|
|
+ height: 34px;
|
|
|
+ width: 124px;
|
|
|
text-align: center;
|
|
|
font-style: normal;
|
|
|
font-weight: bold;
|
|
|
- font-size: 28px;
|
|
|
- line-height: 52px;
|
|
|
- color: #19b068;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 34px;
|
|
|
+ color: #FF5757;
|
|
|
cursor: pointer;
|
|
|
+ background: #FFE6E6;
|
|
|
+ border-radius: 8px;
|
|
|
&.active {
|
|
|
- background: #19b068;
|
|
|
- border-radius: 240px;
|
|
|
+ background: #FF5757;
|
|
|
color: #ffffff;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.right-strockred {
|
|
|
- width: 448px;
|
|
|
- height: 448px;
|
|
|
+ width: 256px;
|
|
|
+ height: 256px;
|
|
|
}
|
|
|
.footer {
|
|
|
position: absolute;
|
|
|
- bottom: 24px;
|
|
|
- width: 640px;
|
|
|
+ bottom: 80px;
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 40px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
@@ -297,9 +290,9 @@ export default {
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
.write-icon-3 {
|
|
|
- width: 25px;
|
|
|
- height: 37px;
|
|
|
- margin-right: 26px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 12px;
|
|
|
}
|
|
|
.colors-list {
|
|
|
display: flex;
|
|
|
@@ -308,20 +301,20 @@ export default {
|
|
|
margin: 0;
|
|
|
padding: 0;
|
|
|
> li {
|
|
|
- width: 34px;
|
|
|
- height: 34px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
border: 2px solid #fff;
|
|
|
box-sizing: border-box;
|
|
|
background: #fff;
|
|
|
- margin: 0 8px;
|
|
|
+ margin: 0 4px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- border-radius: 100%;
|
|
|
+ border-radius: 50%;
|
|
|
cursor: pointer;
|
|
|
> span {
|
|
|
- width: 26px;
|
|
|
- height: 26px;
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
border-radius: 100%;
|
|
|
&.color-item0 {
|
|
|
background: #404040;
|
|
|
@@ -363,9 +356,9 @@ export default {
|
|
|
justify-content: flex-start;
|
|
|
align-items: center;
|
|
|
> img {
|
|
|
- width: 42px;
|
|
|
- height: 38px;
|
|
|
- margin-left: 9px;
|
|
|
+ width: 21px;
|
|
|
+ height: 19px;
|
|
|
+ margin-left: 4px;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
@@ -373,35 +366,46 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.strockplay {
|
|
|
- margin-bottom: 41px;
|
|
|
- width: 444px;
|
|
|
- height: 444px;
|
|
|
- border-radius: 24px;
|
|
|
- box-shadow: 0px 6px 0px rgba(0, 149, 78, 0.4);
|
|
|
+ width: 144px;
|
|
|
+ height: 144px;
|
|
|
+ border: 2px solid #DE4444;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ .strockplayRedInner{
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
-.footer {
|
|
|
+.left-content .footer {
|
|
|
width: 100%;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
align-items: center;
|
|
|
cursor: pointer;
|
|
|
-// .bg-box {
|
|
|
-// width: 124px;
|
|
|
-// height: 72px;
|
|
|
-// background: url("../../assets/common/bg-green.png") center no-repeat;
|
|
|
-// background-size: 100% 100%;
|
|
|
-// text-align: center;
|
|
|
-// &:nth-child(2) {
|
|
|
-// margin: 0 24px;
|
|
|
-// }
|
|
|
-// }
|
|
|
-// .bg-box:active {
|
|
|
-// background: url("../../assets/common/bg-green-click.png") center no-repeat;
|
|
|
-// background-size: 100% 100%;
|
|
|
-// .practice-icon {
|
|
|
-// margin-top: 15px;
|
|
|
-// }
|
|
|
-// }
|
|
|
+ .bg-box {
|
|
|
+ width: 76px;
|
|
|
+ height: 32px;
|
|
|
+ text-align: center;
|
|
|
+ padding: 4px 8px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000;
|
|
|
+ // &:nth-child(2) {
|
|
|
+ // margin: 0 24px;
|
|
|
+ // }
|
|
|
+ img{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
.practice-icon {
|
|
|
height: 36px;
|
|
|
margin-top: 12px;
|
|
|
@@ -419,13 +423,42 @@ export default {
|
|
|
color: #ba7d21;
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
+.el-tabs{
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
</style>
|
|
|
<style lang="scss">
|
|
|
.practiceSingle {
|
|
|
- .strock-play-box {
|
|
|
- width: 84px !important;
|
|
|
- height: 84px !important;
|
|
|
- }
|
|
|
+ .strock-play-box {
|
|
|
+ width: 24px !important;
|
|
|
+ height: 24px !important;
|
|
|
+ }
|
|
|
+ .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active{
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .el-tabs--border-card>.el-tabs__header .el-tabs__item:not(.is-disabled):hover {
|
|
|
+ color: #000;
|
|
|
+ }
|
|
|
+ .el-tabs__item,.el-tabs--border-card>.el-tabs__header .el-tabs__item{
|
|
|
+ color: #000;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ line-height: 48px;
|
|
|
+ height: 48px;
|
|
|
+ width: 80px;
|
|
|
+ text-align: center;
|
|
|
+ font-weight: normal;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-tabs--border-card>.el-tabs__header{
|
|
|
+ background: #F3F3F3;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ .el-tabs--border-card>.el-tabs__content{
|
|
|
+ padding: 24px;
|
|
|
+ }
|
|
|
+ .el-tab-pane{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
natasha