|
|
@@ -23,7 +23,7 @@
|
|
|
<el-tab-pane label="简体"> </el-tab-pane>
|
|
|
<el-tab-pane label="繁体"> </el-tab-pane>
|
|
|
</el-tabs>
|
|
|
- <div class="tab-box">
|
|
|
+ <div class="tab-box" :class="[isPhone ? 'tab-box-phone' : '']">
|
|
|
<div class="tab-box_0" :class="[isShow == '0' ? 'z-top' : '']">
|
|
|
<div class="left-content">
|
|
|
<div class="strockplay">
|
|
|
@@ -105,10 +105,9 @@
|
|
|
@saveWriteAnswer="saveWriteAnswer"
|
|
|
/>
|
|
|
<div class="footer">
|
|
|
- <div class="pen-colors">
|
|
|
- <a @click="resetHuahua(index)" class="clean-btn"></a>
|
|
|
- </div>
|
|
|
+ <div class="pen-colors"></div>
|
|
|
</div>
|
|
|
+ <a @click="resetHuahua(index)" class="clean-btn"></a>
|
|
|
</template>
|
|
|
</div>
|
|
|
|
|
|
@@ -198,10 +197,9 @@
|
|
|
@saveWriteAnswer="saveWriteAnswer"
|
|
|
/>
|
|
|
<div class="footer">
|
|
|
- <div class="pen-colors">
|
|
|
- <a @click="resetHuahua(index)" class="clean-btn"></a>
|
|
|
- </div>
|
|
|
+ <div class="pen-colors"></div>
|
|
|
</div>
|
|
|
+ <a @click="resetHuahua(index)" class="clean-btn"></a>
|
|
|
</template>
|
|
|
</div>
|
|
|
|
|
|
@@ -269,7 +267,8 @@ export default {
|
|
|
thickpen: require("../../../../assets/common/thick-pen.png"),
|
|
|
thickpenActive: require("../../../../assets/common/thick-pen-active.png"),
|
|
|
isShow: 0,
|
|
|
- collFlag: false
|
|
|
+ collFlag: false,
|
|
|
+ isPhone: false
|
|
|
};
|
|
|
},
|
|
|
computed: {},
|
|
|
@@ -372,8 +371,6 @@ export default {
|
|
|
handleClick(tab, event) {
|
|
|
let _this = this;
|
|
|
_this.isShow = tab.index;
|
|
|
- console.log(_this.isShow);
|
|
|
- console.log(_this.$refs.freewrite[_this.isShow]);
|
|
|
if (_this.TaskModel == "ANSWER") {
|
|
|
_this.$refs.freewrite[_this.isShow].getStuImgList(_this.isShow);
|
|
|
} else {
|
|
|
@@ -387,7 +384,6 @@ export default {
|
|
|
handleClick2(index) {
|
|
|
let _this = this;
|
|
|
_this.isShow = index;
|
|
|
- console.log(_this.$refs.freewrite);
|
|
|
if (_this.TaskModel == "ANSWER") {
|
|
|
_this.$refs.freewrite[_this.isShow].getStuImgList(_this.isShow);
|
|
|
} else {
|
|
|
@@ -411,6 +407,8 @@ export default {
|
|
|
_this.hanzicolor = color;
|
|
|
_this.hanziweight = 6;
|
|
|
_this.checkCollStatus();
|
|
|
+ const regExp = /Android|webOS|iPhone|BlackBerry|IEMobile|Opera Mini/i;
|
|
|
+ this.isPhone = regExp.test(navigator.userAgent);
|
|
|
},
|
|
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
mounted() {
|
|
|
@@ -435,9 +433,9 @@ export default {
|
|
|
</script>
|
|
|
<style lang="scss" scoped>
|
|
|
.practice {
|
|
|
- width: 504px;
|
|
|
+ width: 100%;
|
|
|
// max-height: 434px;
|
|
|
- overflow: auto;
|
|
|
+ overflow: hidden;
|
|
|
margin: 0 auto;
|
|
|
background: #f3f3f3;
|
|
|
box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.15);
|
|
|
@@ -446,6 +444,9 @@ export default {
|
|
|
width: 16px;
|
|
|
height: 16px;
|
|
|
margin: 0 4px;
|
|
|
+ position: absolute;
|
|
|
+ right: 8px;
|
|
|
+ bottom: 8px;
|
|
|
cursor: pointer;
|
|
|
background: url("../../../../assets/icon/Undo-16-disable-Black.png") center
|
|
|
no-repeat;
|
|
|
@@ -539,6 +540,7 @@ export default {
|
|
|
.right-strockred {
|
|
|
width: 256px;
|
|
|
height: 256px;
|
|
|
+ position: relative;
|
|
|
}
|
|
|
.footer {
|
|
|
position: absolute;
|
|
|
@@ -635,6 +637,7 @@ export default {
|
|
|
border-radius: 8px;
|
|
|
box-sizing: border-box;
|
|
|
overflow: hidden;
|
|
|
+ flex-shrink: 0;
|
|
|
.strockplayRedInner {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
@@ -694,6 +697,7 @@ export default {
|
|
|
padding: 24px;
|
|
|
position: relative;
|
|
|
height: 428px;
|
|
|
+
|
|
|
> div {
|
|
|
display: flex;
|
|
|
box-sizing: border-box;
|
|
|
@@ -707,6 +711,42 @@ export default {
|
|
|
z-index: 2;
|
|
|
}
|
|
|
}
|
|
|
+ &-phone {
|
|
|
+ height: 460px;
|
|
|
+ > div {
|
|
|
+ display: block;
|
|
|
+ width: calc(100% - 48px);
|
|
|
+ .left-content {
|
|
|
+ width: 100%;
|
|
|
+ align-items: flex-start;
|
|
|
+ flex-direction: row;
|
|
|
+ }
|
|
|
+ .left-content-pra {
|
|
|
+ height: 40px !important;
|
|
|
+ width: 220px;
|
|
|
+ }
|
|
|
+ .strockplay {
|
|
|
+ width: 88px;
|
|
|
+ height: 88px;
|
|
|
+ }
|
|
|
+ .right-content {
|
|
|
+ width: 290px;
|
|
|
+ height: 290px;
|
|
|
+ margin: 10px auto 0 auto;
|
|
|
+ padding: 4px 16px;
|
|
|
+ .right-strockred {
|
|
|
+ width: 200px;
|
|
|
+ height: 200px;
|
|
|
+ :deep .character-target-div {
|
|
|
+ height: 180px;
|
|
|
+ }
|
|
|
+ :deep .strockred {
|
|
|
+ height: 180px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
.NPC-Big-Book-preview-green {
|
|
|
.practice {
|
|
|
@@ -737,3 +777,13 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
+<style lang="scss">
|
|
|
+.tab-box-phone {
|
|
|
+ .freewrite .strockred {
|
|
|
+ height: 200px;
|
|
|
+ .character-target-div {
|
|
|
+ height: 200px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha