|
|
@@ -0,0 +1,410 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="practice practiceSingle">
|
|
|
+ <div
|
|
|
+ :key="item.con + index"
|
|
|
+ class="Book_content"
|
|
|
+ v-for="(item, index) in cur.stem"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ @click="changePraShow()"
|
|
|
+ class="close-icon"
|
|
|
+ src="../../../../assets/NPC/close-icon-red.png"
|
|
|
+ />
|
|
|
+ <el-tabs type="border-card">
|
|
|
+ <el-tab-pane label="简体">
|
|
|
+ <div class="right-content">
|
|
|
+ <div class="right-strockred">
|
|
|
+ <Freewrite
|
|
|
+ :cur="cur"
|
|
|
+ :lineColor="hanzicolor"
|
|
|
+ :lineWidth="hanziweight"
|
|
|
+ ref="freewrite"
|
|
|
+ />
|
|
|
+ <div class="footer">
|
|
|
+ <div class="pen-colors">
|
|
|
+ <a @click="resetHuahua(index)" class="clean-btn"></a>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <ul class="nav-list">
|
|
|
+ <li
|
|
|
+ :class="navIndex == 0 ? 'active' : ''"
|
|
|
+ @click="changeNav(0)"
|
|
|
+ >
|
|
|
+
|
|
|
+ </li>
|
|
|
+ <li
|
|
|
+ :class="navIndex == 1 ? 'active' : ''"
|
|
|
+ @click="changeNav(1)"
|
|
|
+ >
|
|
|
+ 默写
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="繁体"> </el-tab-pane>
|
|
|
+ </el-tabs>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+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: {
|
|
|
+ Strockplayredline,
|
|
|
+ Strockred,
|
|
|
+ Freewrite,
|
|
|
+ // ChinaDict,
|
|
|
+ // Audio,
|
|
|
+ },
|
|
|
+ props: ["cur", "changePraShow"],
|
|
|
+ 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, // 是否收藏
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ changeNav(index) {
|
|
|
+ this.navIndex = index;
|
|
|
+ },
|
|
|
+ changeColor(index) {
|
|
|
+ let _this = this;
|
|
|
+ _this.colorIndex = index;
|
|
|
+ let color = _this.colorsList[index];
|
|
|
+ _this.hanzicolor = color;
|
|
|
+ },
|
|
|
+ changePen(index) {
|
|
|
+ let _this = this;
|
|
|
+ _this.penIndex = index;
|
|
|
+ _this.hanziweight = _this.weightList[_this.penIndex];
|
|
|
+ },
|
|
|
+ changeLearnMode(mode) {
|
|
|
+ this.learn_mode = mode;
|
|
|
+ },
|
|
|
+ resetHuahua(index) {
|
|
|
+ console.log(this.$refs.freewrite);
|
|
|
+ this.$refs.freewrite[index].handelReset();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ // console.log(this.cur);
|
|
|
+ let _this = this;
|
|
|
+ let color = _this.colorsList[_this.colorIndex];
|
|
|
+ _this.hanzicolor = color;
|
|
|
+ _this.hanziweight = 6;
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+.practice {
|
|
|
+ width: 504px;
|
|
|
+ max-height: 434px;
|
|
|
+ overflow: auto;
|
|
|
+ margin: 0 auto;
|
|
|
+ background: #f3f3f3;
|
|
|
+ box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
|
|
+ border-radius: 8px;
|
|
|
+ .clean-btn {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 0 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: url('../../../../assets/icon/Undo-16-disable-Black.png') center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ display: block;
|
|
|
+ &:hover{
|
|
|
+ background: url('../../../../assets/icon/Undo-16-normal-Black.png') center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .close-icon {
|
|
|
+ position: absolute;
|
|
|
+ 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;
|
|
|
+ position: relative;
|
|
|
+ align-items: flex-start;
|
|
|
+ }
|
|
|
+ .left-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ width: 144px;
|
|
|
+ .left-content-pra {
|
|
|
+ height: 162px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-content {
|
|
|
+ position: relative;
|
|
|
+ width: 288px;
|
|
|
+ height: 338px;
|
|
|
+ background: #f3f3f3;
|
|
|
+ border-radius: 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 16px;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin-left: 24px;
|
|
|
+ .nav-list {
|
|
|
+ width: 100%;
|
|
|
+ height: 34px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ margin-top: 16px;
|
|
|
+ > li {
|
|
|
+ height: 34px;
|
|
|
+ width: 124px;
|
|
|
+ text-align: center;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 34px;
|
|
|
+ color: #ff5757;
|
|
|
+ cursor: pointer;
|
|
|
+ background: #ffe6e6;
|
|
|
+ border-radius: 8px;
|
|
|
+ &.active {
|
|
|
+ background: #ff5757;
|
|
|
+ color: #ffffff;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .right-strockred {
|
|
|
+ width: 256px;
|
|
|
+ height: 256px;
|
|
|
+ }
|
|
|
+ .footer {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 80px;
|
|
|
+ width: 100%;
|
|
|
+ padding-right: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-end;
|
|
|
+ align-items: center;
|
|
|
+ .pen-colors {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ .write-icon-3 {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ margin-right: 12px;
|
|
|
+ }
|
|
|
+ .colors-list {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ > li {
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ border: 2px solid #fff;
|
|
|
+ box-sizing: border-box;
|
|
|
+ background: #fff;
|
|
|
+ margin: 0 4px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ border-radius: 50%;
|
|
|
+ cursor: pointer;
|
|
|
+ > span {
|
|
|
+ width: 14px;
|
|
|
+ height: 14px;
|
|
|
+ border-radius: 100%;
|
|
|
+ &.color-item0 {
|
|
|
+ background: #404040;
|
|
|
+ }
|
|
|
+ &.color-item1 {
|
|
|
+ background: #f65d4d;
|
|
|
+ }
|
|
|
+ &.color-item2 {
|
|
|
+ background: #19b068;
|
|
|
+ }
|
|
|
+ &.color-item3 {
|
|
|
+ background: #52a1ea;
|
|
|
+ }
|
|
|
+ &.color-item4 {
|
|
|
+ background: #ff8c49;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &.color-item-active0 {
|
|
|
+ border: 2px solid #404040;
|
|
|
+ }
|
|
|
+ &.color-item-active1 {
|
|
|
+ border: 2px solid #f65d4d;
|
|
|
+ }
|
|
|
+ &.color-item-active2 {
|
|
|
+ border: 2px solid #19b068;
|
|
|
+ }
|
|
|
+ &.color-item-active3 {
|
|
|
+ border: 2px solid #52a1ea;
|
|
|
+ }
|
|
|
+ &.color-item-active4 {
|
|
|
+ border: 2px solid #ff8c49;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pen {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ > img {
|
|
|
+ width: 21px;
|
|
|
+ height: 19px;
|
|
|
+ margin-left: 4px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.strockplay {
|
|
|
+ width: 144px;
|
|
|
+ height: 144px;
|
|
|
+ border: 2px solid #de4444;
|
|
|
+ border-radius: 8px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ overflow: hidden;
|
|
|
+ .strockplayRedInner {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+}
|
|
|
+.left-content .footer {
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ cursor: pointer;
|
|
|
+ .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;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ margin-bottom: 9px;
|
|
|
+ font-weight: 600;
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 34px;
|
|
|
+ /* identical to box height */
|
|
|
+
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+ color: #ba7d21;
|
|
|
+ }
|
|
|
+}
|
|
|
+.el-tabs {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.practiceSingle {
|
|
|
+ .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