From ea9138a6eb9b54c46369a2805be40e65a43a55e3 Mon Sep 17 00:00:00 2001
From: 闫增涛 <1829501689@qq.com>
Date: 星期四, 23 五月 2024 11:01:29 +0800
Subject: [PATCH] 英语
---
src/assets/js/config.js | 2
src/books/English/view/components/chapter001.vue | 166 ++++++++++++++++++++++++++++-------------
src/books/English/view/components/header.vue | 6
src/books/English/assets/main.less | 52 +++++++++++-
4 files changed, 163 insertions(+), 63 deletions(-)
diff --git a/src/assets/js/config.js b/src/assets/js/config.js
index e67698c..f925e4c 100644
--- a/src/assets/js/config.js
+++ b/src/assets/js/config.js
@@ -1,5 +1,5 @@
import axios from "axios";
-export const resourceCtx = "http://182.92.203.7:3007/books/resource/2"; // 璧勬簮璇锋眰鍦板潃
+export const resourceCtx = "http://182.92.203.7:3007/books/resource/4"; // 璧勬簮璇锋眰鍦板潃
export let activeBook = {}; // 璧勬簮璇锋眰鍦板潃
export let goodsStore = "";
// 璇锋眰鏁欐潗閰嶇疆淇℃伅
diff --git a/src/books/English/assets/main.less b/src/books/English/assets/main.less
index f8b5f1a..6fddb40 100644
--- a/src/books/English/assets/main.less
+++ b/src/books/English/assets/main.less
@@ -685,6 +685,12 @@
.fz-14 {
font-size: 14px;
}
+ .fz-18 {
+ font-size: 18px;
+ }
+ .fw-bl {
+ font-weight: bold;
+ }
.m0 {
margin: 0 !important;
}
@@ -706,6 +712,9 @@
.t0 {
text-indent: 0;
}
+ .w100 {
+ width: 100%;
+ }
.pd-20 {
padding: 0 20px;
}
@@ -719,10 +728,10 @@
background: linear-gradient(to right, #639bc2, #fff);
}
.event-header-text-bc {
- background-color:#bbd4ec ;
+ background-color: #bbd4ec;
}
.event-text-color {
- color:#639bc2 ;
+ color: #639bc2;
}
.y-bc {
background-color: #f3e3c7;
@@ -744,6 +753,7 @@
font-weight: bold;
}
}
+ // 椤电爜
.preface-bottom {
height: 104px;
display: flex;
@@ -754,19 +764,47 @@
width: 30px;
height: 30px;
line-height: 30px;
- color:#11ad8a ;
+ color: #11ad8a;
font-weight: bold;
text-align: center;
border: 1px solid #11ad8a;
border-radius: 20px;
}
.contet-num-box {
- width: 50px;
- height: 30px;
- line-height: 40px;
+ width: 56px;
+ height: 36px;
+ line-height: 36px;
text-align: center;
background-color: #e6e7e9;
- border-radius: 35px;
+ border-radius: 50%;
+ font-weight: bold;
}
}
+ .input-bottom-border {
+ border: 0;
+ border-bottom: 1px solid #000000;
+ width: 86%;
+ &:focus {
+ outline: none;
+ }
+ }
+ .parimary-btn {
+ cursor: pointer;
+ margin-left: 5px;
+ background-color: #0bab87;
+ border-color: #0bab87;
+ color: #fff;
+ border-radius: 6px;
+ font-size: 16px;
+ &:hover {
+ background-color: #a1afc8;
+ border-color: #a1afc8;
+ }
+ }
+ .correct-icon {
+ color: green;
+ }
+ .error-icon {
+ color: red;
+ }
}
diff --git a/src/books/English/view/components/chapter001.vue b/src/books/English/view/components/chapter001.vue
index 0033da7..b0b8cf5 100644
--- a/src/books/English/view/components/chapter001.vue
+++ b/src/books/English/view/components/chapter001.vue
@@ -24,7 +24,7 @@
<div class="page-box" page="7">
<div class="w100 mb-20" style="padding-right: 20px">
<div
- class="w100 event-header-bc fl al-end"
+ class="event-header-bc fl al-end"
style="height: 100px; padding-left: 40px"
>
<div class="preface-header-box event-header-text-bc">
@@ -46,75 +46,94 @@
>
</p>
<div class="fl ju-bt">
- <div class="left" style="width:48%">
+ <div class="left" style="width: 48%">
<p class="center">
- <el-image
- :src="imgOne"
- :preview-src-list="[imgOne]"
- class="w100"
- />
+ <el-image :src="imgOne" :preview-src-list="[imgOne]" />
</p>
- <p class="center">1._____________________</p>
+ <p class="center">
+ 1.<input
+ v-model="questionData.warnUp.one.value"
+ class="input-bottom-border fz-18"
+ @blur="handleQuestion('one')"
+ />
+ <i
+ class="el-icon-check correct-icon"
+ v-if="questionData.warnUp.one.isRight"
+ ></i>
+ <i class="el-icon-close error-icon" v-if="questionData.warnUp.one.isRight == false"></i>
+ </p>
</div>
- <div class="right" style="width:48%">
+ <div class="right" style="width: 48%">
<p class="center">
<el-image
- :src="imgTwo"
- :preview-src-list="[imgTwo]"
- class="w100"
- />
+ :src="imgTwo"
+ :preview-src-list="[imgTwo]"
+ style="width: 96%"
+ />
</p>
- <p class="center">2._____________________</p>
+ <p class="center">
+ 2.<input class="input-bottom-border fz-18" />
+ </p>
</div>
</div>
<div class="fl ju-bt">
- <div class="left" style="width:48%">
+ <div class="left" style="width: 48%">
<p class="center">
- <el-image
- :src="imgThree"
- :preview-src-list="[imgThree]"
- class="w100"
- />
+ <el-image :src="imgThree" :preview-src-list="[imgThree]" />
</p>
- <p class="center">3._____________________</p>
+ <p class="center">
+ 3.<input class="input-bottom-border fz-18" />
+ </p>
</div>
- <div class="right" style="width:48%">
+ <div class="right" style="width: 48%">
<p class="center">
<el-image
- :src="imgFour"
- :preview-src-list="[imgFour]"
- class="w100"
- />
+ :src="imgFour"
+ :preview-src-list="[imgFour]"
+ style="width: 94%"
+ />
</p>
- <p class="center">4._____________________</p>
+ <p class="center">
+ 4.<input class="input-bottom-border fz-18" />
+ </p>
</div>
</div>
<div class="fl ju-bt">
- <div class="left" style="width:48%">
+ <div class="left" style="width: 48%">
<p class="center">
- <el-image
- :src="imgFive"
- :preview-src-list="[imgFive]"
- class="w100"
- />
+ <el-image :src="imgFive" :preview-src-list="[imgFive]" />
</p>
- <p class="center">5._____________________</p>
+ <p class="center">
+ 5.<input class="input-bottom-border fz-18" />
+ </p>
</div>
- <div class="right" style="width:48%">
+ <div class="right" style="width: 48%">
<p class="center">
<el-image
- :src="imgSix"
- :preview-src-list="[imgSix]"
- class="w100"
- />
+ :src="imgSix"
+ :preview-src-list="[imgSix]"
+ style="width: 94%"
+ />
</p>
- <p class="center">6._____________________</p>
+ <p class="center">
+ 6.<input class="input-bottom-border fz-18" />
+ </p>
</div>
</div>
- <p><b>鈪�.What other symbols can you think of?</b></p>
- <p>_________________________________________</p>
+ <p>
+ <b>鈪�.What other symbols can you think of?</b>
+ <button class="parimary-btn" @click="showAnswer('seven')">
+ 鏄剧ず绛旀
+ </button>
+ </p>
+ <p>
+ <input
+ v-model="questionData.warnUp.seven"
+ class="input-bottom-border w100 fz-18"
+ />
+ </p>
</div>
</div>
<div class="preface-bottom">
@@ -443,16 +462,59 @@
name: "chapter-one",
data() {
return {
- imgOne:require("../../assets/images/0012-1.jpg"),
- imgTwo:require("../../assets/images/0012-2.jpg"),
- imgThree:require("../../assets/images/0012-3.jpg"),
- imgFour:require("../../assets/images/0012-4.jpg"),
- imgFive:require("../../assets/images/0012-5.jpg"),
- imgSix:require("../../assets/images/0012-6.jpg"),
- }
- }
+ imgOne: require("../../assets/images/0012-1.jpg"),
+ imgTwo: require("../../assets/images/0012-2.jpg"),
+ imgThree: require("../../assets/images/0012-3.jpg"),
+ imgFour: require("../../assets/images/0012-4.jpg"),
+ imgFive: require("../../assets/images/0012-5.jpg"),
+ imgSix: require("../../assets/images/0012-6.jpg"),
+ questionData: {
+ warnUp: {
+ one: {
+ value: "",
+ isRight:null,
+ },
+ two:{
+ value:"",
+ isRight:null,
+ },
+ three:{
+ value: "",
+ isRight:null,
+ },
+ four:{
+ value: "",
+ isRight:null,
+ },
+ five:{
+ value: "",
+ isRight:null,
+ },
+ six:{
+ value: "",
+ isRight:null,
+ },
+ seven:{
+ value: "",
+ isRight:null,
+ },
+ },
+ },
+ };
+ },
+ methods: {
+ showAnswer(type) {
+ if (type == "seven") {
+ this.questionData.warnUp.seven = "This is a good idear.";
+ }
+ },
+ handleQuestion(type) {
+ if (type == "one") {
+ return this.questionData.warnUp.one.value ? this.questionData.warnUp.one.isRight = this.questionData.warnUp.one.value == "浣犲ソ" : this.questionData.warnUp.one.isRight = null
+ }
+ },
+ },
};
</script>
-<style lang="less" scoped>
-</style>
+<style lang="less" scoped></style>
diff --git a/src/books/English/view/components/header.vue b/src/books/English/view/components/header.vue
index 0db7ebc..63a297b 100644
--- a/src/books/English/view/components/header.vue
+++ b/src/books/English/view/components/header.vue
@@ -67,7 +67,7 @@
</div>
<!-- 3 -->
<div class="page-box " page="3">
- <div class="w100 pd-20 ">
+ <div class="pd-20 ">
<div class="preface w100 fl al-end ju-cn">
<h1 id="a003" class="front preface-text">鍓嶈█</h1>
</div>
@@ -95,8 +95,8 @@
</div>
<!-- 4 -->
<div class="page-box">
- <div class="w100 mb-20" style="padding-right: 20px;">
- <div class="w100 primary-bc fl al-end" style="height: 100px;padding-left: 40px;">
+ <div class="mb-20" style="padding-right: 20px;">
+ <div class="primary-bc fl al-end" style="height: 100px;padding-left: 40px;">
<div class="preface-header-box y-bc">
<span class="l-text">鏂版爣鍑嗛�氱敤鑱屽満鑻辫</span>
<span class="g-text g-color">鍩虹妯″潡涓�</span>
--
Gitblit v1.9.1