css bug fixes
cast1e
parent
aa6c1bf9f9
commit
36891a901a
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<router-view></router-view>
|
||||
<router-view style="margin-top: 10px;"></router-view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -1,9 +1,4 @@
|
|||
<template>
|
||||
<el-page-header style="margin:20px" @back="back_home">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 编辑单词本 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div id="container">
|
||||
<router-view>
|
||||
|
||||
|
|
@ -15,23 +10,13 @@
|
|||
|
||||
export default {
|
||||
name: "SetManage",
|
||||
data() {
|
||||
return {
|
||||
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
back_home() {
|
||||
this.$router.push("/");
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
#container{
|
||||
height: calc(100% - 64px);
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
<template>
|
||||
<el-page-header style="margin:20px" @back="back_home">
|
||||
<div v-if="mode === 0" class="wrapper">
|
||||
<el-page-header style="margin-top:20px;margin-left:20px" @back="back_home">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 背诵 </span>
|
||||
<span class="text-large font-600 mr-3"> 选择范围 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div v-if="mode === 0" id="range" class="container colbox">
|
||||
<div id="range" class="container colbox">
|
||||
<div class="rowbox item">
|
||||
<div id="lastrecite" class="card">
|
||||
<el-button style="margin-bottom: 20px;" class="tbtn" type="primary" @click="init">开始背诵</el-button><br />
|
||||
|
|
@ -17,8 +18,8 @@
|
|||
<el-checkbox-group v-model="local.checkedSets" @change="(res) => { handleChange(local, res) }">
|
||||
<div class="set_radios" v-for="(set_class, set_class_name) in wordsets" :key="set_class_name">
|
||||
<p>{{ set_class_name }}</p>
|
||||
<el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id" size="large"
|
||||
border>
|
||||
<el-checkbox class="checkbox" v-for="set in set_class" :key="set.id" :label="set.id"
|
||||
size="large" border>
|
||||
<div style="font-size: 18px;font-weight: 500;">
|
||||
{{ set.name }}
|
||||
</div>
|
||||
|
|
@ -29,7 +30,7 @@
|
|||
</div>
|
||||
<div class="rowbox item">
|
||||
<div id="rangeselect" class="card">
|
||||
<div class="title" style="font-size: 35px;">在线词库</div>
|
||||
<div class="title">在线词库</div>
|
||||
<el-checkbox v-model="online.checkAll" :indeterminate="online.isIndeterminate"
|
||||
@change="(res) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox>
|
||||
<el-checkbox-group v-model="online.checkedSets" @change="(res) => { handleChange(online, res) }">
|
||||
|
|
@ -37,8 +38,8 @@
|
|||
<div class="subtitle">{{ set_name }}</div>
|
||||
<div v-for="(book, book_name) in set" :key="book_name">
|
||||
<p>{{ book_name }}</p>
|
||||
<el-checkbox class="checkbox" v-for="(config, id) in book" :key="id" :label="id" size="large"
|
||||
border>
|
||||
<el-checkbox class="checkbox" v-for="(config, id) in book" :key="id" :label="id"
|
||||
size="large" border>
|
||||
<div style="font-size: 18px;font-weight: 500;">
|
||||
{{ config.name }}
|
||||
</div>
|
||||
|
|
@ -49,7 +50,14 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="test" class="colbox" v-if="mode === 1">
|
||||
</div>
|
||||
<div v-if="mode === 1">
|
||||
<el-page-header style="margin-top:20px;margin-left:20px" @back="mode = 0">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 背诵 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div id="test" class="colbox">
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
|
||||
<div>
|
||||
|
|
@ -86,6 +94,7 @@
|
|||
<el-button @click="add_to" type="primary">添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -291,6 +300,8 @@ export default {
|
|||
title: "Congratulations!",
|
||||
type: "success"
|
||||
})
|
||||
localStorage.removeItem("lastrecite");
|
||||
localStorage.removeItem("lastcurrent");
|
||||
return;
|
||||
}
|
||||
nextTick(() => {
|
||||
|
|
@ -331,7 +342,10 @@ export default {
|
|||
let e = document.getElementById("input");
|
||||
e.value = "_".repeat(this.word.word.length);
|
||||
e.setSelectionRange(0, 0);
|
||||
e.style.height = "0";
|
||||
setTimeout(() => {
|
||||
e.style.height = `${e.scrollHeight}px`;
|
||||
}, 200);
|
||||
}
|
||||
},
|
||||
change() {
|
||||
|
|
@ -353,17 +367,22 @@ export default {
|
|||
title: "Error",
|
||||
message: "错误",
|
||||
type: "error"
|
||||
}),
|
||||
});
|
||||
o = "_".repeat(this.word.word.length);
|
||||
n = 0;
|
||||
e.style.height = "0";
|
||||
setTimeout(() => {
|
||||
e.style.height = `${e.scrollHeight}px`;
|
||||
}, 200);
|
||||
} else
|
||||
n == -1 ? o = "_".repeat(this.word.word.length) : (o = t.substring(0, n),
|
||||
o += "_".repeat(this.word.word.length - n));
|
||||
e.value = o;
|
||||
e.setSelectionRange(n, n);
|
||||
e.style.height = 0;
|
||||
setTimeout(() => {
|
||||
if (parseInt(e.style.height) < e.scrollHeight) {
|
||||
e.style.height = `${e.scrollHeight}px`;
|
||||
}
|
||||
},0);
|
||||
e.focus();
|
||||
},
|
||||
|
|
@ -450,7 +469,7 @@ export default {
|
|||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#range {
|
||||
max-height: calc(100% - 104px);
|
||||
max-height: calc(100% - 40px);
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
|
@ -460,7 +479,6 @@ export default {
|
|||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 20px;
|
||||
/* background-color: var(--bg-color); */
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -482,10 +500,6 @@ export default {
|
|||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#add-to-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#explain {
|
||||
font-size: 18px;
|
||||
margin-top: 15px;
|
||||
|
|
@ -521,7 +535,7 @@ export default {
|
|||
|
||||
@media screen and (min-width: 500px) {
|
||||
#range {
|
||||
max-height: calc(100% - 64px);
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#rangeselect {
|
||||
|
|
@ -540,18 +554,18 @@ export default {
|
|||
}
|
||||
|
||||
.title {
|
||||
font-size: 50px;
|
||||
font-size: 35px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#test {
|
||||
padding: 50px;
|
||||
padding: 30px;
|
||||
animation: enter .5s ease-out;
|
||||
}
|
||||
|
||||
#trans {
|
||||
font-size: 50px;
|
||||
font-size: 43px;
|
||||
transition: .5s;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
|
@ -579,6 +593,15 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
height: calc(100% - 10px);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 23px;
|
||||
line-height: 35px;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,89 @@
|
|||
<template>
|
||||
<div class="container" style="overflow: auto;">
|
||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> {{ set }} : {{ book }} ({{ id }}) </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div class="colbox" id="main">
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<el-table :data="table" style="height:calc(100% - 10px);overflow: auto;border-radius: 10px;">
|
||||
<el-table-column type="index" />
|
||||
<el-table-column prop="word" label="单词" />
|
||||
<el-table-column prop="type" label="词性" />
|
||||
<el-table-column prop="trans" label="翻译" />
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: "NoteEditor",
|
||||
data() {
|
||||
return {
|
||||
table: [],
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.set = this.$route.query.set;
|
||||
this.book = this.$route.query.book;
|
||||
this.id = this.$route.query.id;
|
||||
if (this.set && this.book && this.id) {
|
||||
axios.get("./wordset/detail", {
|
||||
params:{
|
||||
set: this.set, book: this.book, id: this.id
|
||||
}
|
||||
}).then(
|
||||
(res) => {
|
||||
this.table = res.data;
|
||||
}
|
||||
);
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
#main {
|
||||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 25px;
|
||||
min-height: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.title {
|
||||
font-size: 35px;
|
||||
min-height: 60px;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 10px;
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
#main{
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
.el-table {
|
||||
--el-table-bg-color: #FFFFFF00;
|
||||
--el-table-tr-bg-color: #FFFFFF00;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,9 +1,10 @@
|
|||
<template>
|
||||
<div class="container" style="overflow: auto;">
|
||||
<div class="colbox" style="justify-content: space-between;margin: 0 20px 0 20px;">
|
||||
<div>{{ editing.name }} ({{ editing.id }}) </div>
|
||||
<box-icon name="x" color="var(--text-color)" style="cursor: pointer;" @click="$router.push('/manage')"></box-icon>
|
||||
</div>
|
||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/manage');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div class="colbox" id="main">
|
||||
<div class="rowbox">
|
||||
<div class="card">
|
||||
|
|
@ -170,10 +171,10 @@ export default {
|
|||
|
||||
},
|
||||
created() {
|
||||
this.editing = this.$store.state.editing.set;
|
||||
this.editingClass = this.$store.state.editing.set_class_name;
|
||||
if(this.editing && this.editingClass){
|
||||
this.table = JSON.parse(localStorage.getItem(this.editing.id));
|
||||
this.name = this.$route.query.name;
|
||||
this.id = this.$route.query.id;
|
||||
if(this.name && this.id){
|
||||
this.table = JSON.parse(localStorage.getItem(this.id));
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -185,10 +186,7 @@ export default {
|
|||
flex-direction: column;
|
||||
overflow: scroll;
|
||||
}
|
||||
.container{
|
||||
padding: 10px;
|
||||
height: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.title{
|
||||
font-size: 25px;
|
||||
min-height: 50px;
|
||||
|
|
@ -200,9 +198,16 @@ export default {
|
|||
font-size: 35px;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.container{
|
||||
padding: 10px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#main{
|
||||
height: calc(100% - 50px);
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 87%;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
<template>
|
||||
<el-container id="main-container" class="container card">
|
||||
<div style="overflow: auto;">
|
||||
<el-page-header @back="$router.push('/manage')">
|
||||
<el-page-header style="margin: 20px;" @back="$router.push('/manage')">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 新建单词本 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<el-container id="main-container" class="container card">
|
||||
<div style="overflow: auto;">
|
||||
<div class="colbox">
|
||||
<div class="mid-text">名称:</div>
|
||||
<el-input v-model="set_name"></el-input>
|
||||
|
|
@ -64,16 +64,19 @@ export default {
|
|||
.colbox {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.colbox * {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.card {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 87%;
|
||||
height: calc(100% - 80px);
|
||||
width: calc(100% - 20px);
|
||||
}
|
||||
|
||||
.colbox {
|
||||
|
|
|
|||
|
|
@ -1,18 +1,30 @@
|
|||
<template>
|
||||
<el-container id="main-container">
|
||||
<el-header id="header" style="text-align: right;">
|
||||
<div>
|
||||
<el-header id="header" style="">
|
||||
<el-page-header style="margin: 10px;" @back="this.$router.push('/');">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> 编辑单词本 </span>
|
||||
</template>
|
||||
<template #extra>
|
||||
<div class="pconly">
|
||||
<el-button @click="manage_online_wordsets" type="primary"><box-icon color="white" name='world'
|
||||
size="20px"></box-icon>管理在线单词本</el-button>
|
||||
<el-button @click="export_set" type="success" class="pconly"><box-icon color="white" name='export'
|
||||
<el-button @click="export_set" type="success"><box-icon color="white" name='export'
|
||||
size="18px"></box-icon>导出</el-button>
|
||||
<el-button @click="import_set" type="warning" class="pconly"><box-icon color="white" name='import'
|
||||
<el-button @click="import_set" type="warning"><box-icon color="white" name='import'
|
||||
size="18px"></box-icon>导入</el-button>
|
||||
<el-button @click="$router.push('/manage/new')" type="primary"><box-icon color="white"
|
||||
name='plus'></box-icon>新建单词本</el-button>
|
||||
</div>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div class="mbonly">
|
||||
<el-button @click="$router.push('/manage/new')" type="primary"><box-icon color="white"
|
||||
name='plus'></box-icon>新建单词本</el-button>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-container style="height:calc(100% - 40px);">
|
||||
|
||||
<el-aside id="sidebar">
|
||||
<div class="sidebar-title">
|
||||
|本地
|
||||
|
|
@ -24,11 +36,17 @@
|
|||
<div class="sidebar-title">
|
||||
|在线
|
||||
</div>
|
||||
<div v-for="set in Object.keys(online_wordsets)" :key="set">
|
||||
<div v-for="(set_class, class_name) in online_wordsets[set]" :title="class_name" :key="class_name"
|
||||
@click="view_online(set, class_name)" class="sidebar-item">
|
||||
{{ class_name }}
|
||||
</div>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main id="wordsets-container">
|
||||
<div id="sets-container">
|
||||
<div class="colbox wordclass">
|
||||
<div v-for="(wordset, index) in wordsets[view_class]" :key="index" class="wordset rowbox">
|
||||
<div v-if="mode === 0" class="colbox wordclass">
|
||||
<div v-for="(wordset, index) in view_wordsets" :key="index" class="wordset rowbox">
|
||||
<div class="no">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
|
|
@ -40,12 +58,26 @@
|
|||
</div>
|
||||
<div class="option">
|
||||
<box-icon class="btn" name='edit' color="var(--text-color)"
|
||||
@click="edit(wordset, view_class)"></box-icon>
|
||||
@click="edit(wordset.id, wordset.name)"></box-icon>
|
||||
<box-icon class="btn" name='trash' color="var(--text-color)"
|
||||
@click="del(view_class, wordset.id, index)"></box-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="mode === 1" class="colbox wordclass">
|
||||
<div v-for="(wordset, index) in online_wordsets[viewing.set][viewing.book]" :key="index"
|
||||
class="wordset rowbox">
|
||||
<div class="title">
|
||||
{{ wordset.name }}
|
||||
</div>
|
||||
<div class="created-date">
|
||||
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
|
||||
</div>
|
||||
<div class="option">
|
||||
<box-icon class="btn" name='show' color="var(--text-color)" @click="show(index)"></box-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
|
||||
<box-icon name='list-ul' color="var(--text-color)"></box-icon>
|
||||
|
|
@ -57,18 +89,35 @@
|
|||
|
||||
<script>
|
||||
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
|
||||
import axios from 'axios';
|
||||
|
||||
export default {
|
||||
name: "SetList",
|
||||
data() {
|
||||
return {
|
||||
wordsets: window.wordsets,
|
||||
view_class: "",
|
||||
view_wordsets: [],
|
||||
viewing: {
|
||||
set: "",
|
||||
book: "",
|
||||
},
|
||||
online_wordsets: [],
|
||||
mode: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
view(classname) {
|
||||
this.view_class = classname;
|
||||
this.mode = 0;
|
||||
this.view_wordsets = this.wordsets[classname];
|
||||
let node = document.getElementById("wordsets-container").style;
|
||||
node.animation = "";
|
||||
setTimeout(() => {
|
||||
node.animation = "enter ease-out .6s backwards";
|
||||
}, 0);
|
||||
},
|
||||
view_online(set_name, class_name) {
|
||||
this.mode = 1;
|
||||
this.viewing = { set: set_name, book: class_name };
|
||||
let node = document.getElementById("wordsets-container").style;
|
||||
node.animation = "";
|
||||
setTimeout(() => {
|
||||
|
|
@ -90,10 +139,16 @@ export default {
|
|||
ElMessage(`已经删除 ${set_class_name} `);
|
||||
});
|
||||
},
|
||||
edit(set, set_class_name) {
|
||||
this.$store.state.editing = {set, set_class_name};
|
||||
edit(id, name) {
|
||||
this.$router.push({
|
||||
path: "/manage/edit",
|
||||
path: "./manage/edit",
|
||||
query: { id, name }
|
||||
})
|
||||
},
|
||||
show(id) {
|
||||
this.$router.push({
|
||||
path: "./manage/show",
|
||||
query: { set: this.viewing.set, book: this.viewing.book, id }
|
||||
})
|
||||
},
|
||||
async export_set() {
|
||||
|
|
@ -166,6 +221,11 @@ export default {
|
|||
this.view(first_set);
|
||||
}, 0);
|
||||
}
|
||||
axios.get("/wordset/list").then(
|
||||
(res) => {
|
||||
this.online_wordsets = res.data;
|
||||
}
|
||||
);
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -184,6 +244,10 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
#header{
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 0;
|
||||
transition: .5s;
|
||||
|
|
@ -243,10 +307,12 @@ export default {
|
|||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
#wordsets-container {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
#sets-container {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
@ -267,6 +333,10 @@ export default {
|
|||
}
|
||||
}
|
||||
|
||||
#header{
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 180px;
|
||||
}
|
||||
|
|
@ -359,7 +429,7 @@ html.bgimged .wordset {
|
|||
#header {
|
||||
/* border-bottom: solid 1px #bcbcbc; */
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
animation: enter ease-out .6s backwards;
|
||||
}
|
||||
|
||||
#wordsets-container {
|
||||
|
|
|
|||
|
|
@ -5,6 +5,7 @@ const home = ()=>import("./components/Home.vue");
|
|||
const recite = ()=>import('./components/Recite.vue');
|
||||
const setlist = ()=>import('./components/manage/SetList.vue');
|
||||
const newset = ()=>import('./components/manage/NewSet.vue');
|
||||
const display = ()=>import('./components/manage/Display.vue');
|
||||
|
||||
const routes = [
|
||||
{ path: '/', component: home },
|
||||
|
|
@ -13,7 +14,8 @@ const routes = [
|
|||
children:[
|
||||
{path: '',component:setlist},
|
||||
{path: 'new',component:newset},
|
||||
{path: 'edit',component:editor}
|
||||
{path: 'edit',component:editor},
|
||||
{path: 'show',component:display}
|
||||
]},
|
||||
]
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue