Mobile device adaptation
cast1e
parent
d86bbd5cdc
commit
fbeb3820f8
69
src/App.vue
69
src/App.vue
|
|
@ -5,17 +5,17 @@
|
|||
<script>
|
||||
|
||||
window.htmlClasses = [];
|
||||
window.addHtmlclasses = (classname)=>{
|
||||
window.addHtmlclasses = (classname) => {
|
||||
let index = window.htmlClasses.indexOf(classname);
|
||||
if(index===-1){
|
||||
if (index === -1) {
|
||||
window.htmlClasses.push(classname);
|
||||
document.getElementsByTagName("html")[0].className = window.htmlClasses.join(" ");
|
||||
}
|
||||
}
|
||||
window.delHtmlclasses = (classname)=>{
|
||||
window.delHtmlclasses = (classname) => {
|
||||
let index = window.htmlClasses.indexOf(classname);
|
||||
if(index!=-1){
|
||||
window.htmlClasses.splice(index,1);
|
||||
if (index != -1) {
|
||||
window.htmlClasses.splice(index, 1);
|
||||
document.getElementsByTagName("html")[0].className = window.htmlClasses.join(" ");
|
||||
}
|
||||
}
|
||||
|
|
@ -38,13 +38,13 @@ export default {
|
|||
window.wordsets = JSON.parse(wordsets);
|
||||
} else window.wordsets = {};
|
||||
let res = localStorage.getItem("bgimg");
|
||||
if(res){
|
||||
if (res) {
|
||||
document.body.style.backgroundImage = `url("${res}")`;
|
||||
document.body.style.backgroundSize = "cover";
|
||||
window.addHtmlclasses("bgimged");
|
||||
}
|
||||
const isDarkTheme = window.matchMedia("(prefers-color-scheme: dark)");
|
||||
if(isDarkTheme.matches) window.addHtmlclasses("dark");
|
||||
if (isDarkTheme.matches) window.addHtmlclasses("dark");
|
||||
isDarkTheme.addEventListener('change', (event) => {
|
||||
if (event.matches) {
|
||||
window.addHtmlclasses("dark");
|
||||
|
|
@ -57,18 +57,30 @@ export default {
|
|||
</script>
|
||||
|
||||
<style>
|
||||
@media screen and (max-width: 500px) {
|
||||
.pconly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
html {
|
||||
--bg-color: #ffffffae;
|
||||
--text-color: #464646;
|
||||
@keyframes enter {
|
||||
0% {
|
||||
translate: 100px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--bg-color: #2a2a2aae;
|
||||
--text-color: #c0c0c0;
|
||||
}
|
||||
@media screen and (min-width: 500px) {
|
||||
.mbonly {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes enter {
|
||||
@keyframes enter {
|
||||
0% {
|
||||
translate: 100px 0;
|
||||
opacity: 0;
|
||||
|
|
@ -80,8 +92,21 @@ html.dark {
|
|||
opacity: 1;
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
html {
|
||||
--bg-color: #ffffffae;
|
||||
--text-color: #464646;
|
||||
}
|
||||
|
||||
html.dark {
|
||||
--bg-color: #2a2a2aae;
|
||||
--text-color: #c0c0c0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.container {
|
||||
height: calc(100%-20px);
|
||||
width: calc(100%-20px);
|
||||
|
|
@ -107,23 +132,11 @@ html.dark {
|
|||
color: var(--text-color);
|
||||
}
|
||||
|
||||
html.bgimged .card{
|
||||
html.bgimged .card {
|
||||
background-color: var(--bg-color);
|
||||
backdrop-filter: blur(15px);
|
||||
}
|
||||
|
||||
|
||||
.wordset {
|
||||
border-radius: 13px;
|
||||
padding: 20px;
|
||||
height: 220px;
|
||||
width: 170px;
|
||||
box-shadow: var(--el-box-shadow);
|
||||
margin: 20px;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.btn {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div id="ball"></div>
|
||||
<div class="container">
|
||||
<div id="main">
|
||||
<div id="title">WordIn</div>
|
||||
<div id="title"> WordIn</div>
|
||||
<div class="colbox">
|
||||
<router-link to="/recite" class="button">
|
||||
背诵
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
<div id="setting">
|
||||
<box-icon class="btn" color="var(--text-color)" name='cog' @click="open_setting_dialog"></box-icon>
|
||||
</div>
|
||||
<el-dialog v-model="settingVisible" title="设置">
|
||||
<el-dialog v-model="settingVisible" title="设置" width="75%">
|
||||
<div class="title">更换自定义背景</div>
|
||||
<div class="colbox" style="margin: 10px;">
|
||||
<el-input v-model="img_url"></el-input>
|
||||
|
|
@ -55,7 +55,7 @@ export default {
|
|||
}
|
||||
},
|
||||
created() {
|
||||
if (document.getElementsByTagName("html")[0].className.indexOf("dark")!=-1) {
|
||||
if (document.getElementsByTagName("html")[0].className.indexOf("dark") != -1) {
|
||||
this.isdark = true;
|
||||
}
|
||||
}
|
||||
|
|
@ -63,7 +63,51 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
@media screen and (max-width: 500px) {
|
||||
#title {
|
||||
font-size: 80px;
|
||||
color: var(--text-color);
|
||||
text-shadow: #00000057 5px 5px 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
font-size: 15px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin: 10px;
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
.colbox {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin-top: 30px;
|
||||
}
|
||||
#ball{
|
||||
width: 750px;
|
||||
height: 750px;
|
||||
top: -20%;
|
||||
right: -90%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
#title {
|
||||
font-size: 180px;
|
||||
color: var(--text-color);
|
||||
text-shadow: #00000057 5px 5px 20px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
font-size: 35px;
|
||||
|
|
@ -71,8 +115,24 @@ export default {
|
|||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
#main {
|
||||
margin: 80px;
|
||||
}
|
||||
|
||||
.button {
|
||||
margin: 30px;
|
||||
}
|
||||
#ball{
|
||||
width: 1350px;
|
||||
height: 1350px;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#setting {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
|
@ -80,12 +140,6 @@ export default {
|
|||
margin: 20px;
|
||||
}
|
||||
|
||||
#title {
|
||||
font-size: 180px;
|
||||
color: var(--text-color);
|
||||
text-shadow: #00000057 5px 5px 20px ;
|
||||
}
|
||||
|
||||
.button {
|
||||
width: 200px;
|
||||
height: 100px;
|
||||
|
|
@ -102,7 +156,6 @@ export default {
|
|||
backdrop-filter: blur(20px);
|
||||
cursor: pointer;
|
||||
transition: .5s;
|
||||
margin: 30px;
|
||||
color: var(--text-color);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
@ -119,22 +172,13 @@ html.dark .button {
|
|||
|
||||
#ball {
|
||||
background-image: linear-gradient(120deg, #e0c3fcca 0%, #8ec5fcc4 100%);
|
||||
width: 1350px;
|
||||
height: 1350px;
|
||||
border-radius: 100%;
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -10%;
|
||||
animation: enter .8s ease-out;
|
||||
box-shadow:#e0c3fcca 0px 0px 50px 10px;
|
||||
box-shadow: #e0c3fcca 0px 0px 50px 10px;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
html.bgimged #ball{
|
||||
html.bgimged #ball {
|
||||
backdrop-filter: blur(20px);
|
||||
}
|
||||
|
||||
#main {
|
||||
margin: 80px;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
|
@ -4,9 +4,11 @@
|
|||
<span class="text-large font-600 mr-3"> 编辑单词本 </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div id="container">
|
||||
<router-view>
|
||||
|
||||
</router-view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -28,5 +30,8 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
#container{
|
||||
height: calc(100% - 64px);
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,12 @@
|
|||
</template>
|
||||
</el-page-header>
|
||||
<div v-if="mode === 0" id="range" class="container colbox">
|
||||
<div id="rangeselect" class="card item">
|
||||
<div class="rowbox item">
|
||||
<div id="lastrecite" class="card">
|
||||
<el-button style="margin-bottom: 20px;" class="tbtn" type="primary" @click="init">开始背诵</el-button><br />
|
||||
<el-button style="margin:0;" class="tbtn" type="success" @click="last_recite">继续上一次的背诵</el-button>
|
||||
</div>
|
||||
<div id="online-set-container" class="card">
|
||||
<div class="title">选择测验范围：</div>
|
||||
<el-checkbox v-model="local.checkAll" :indeterminate="local.isIndeterminate"
|
||||
@change="(res) => { handleCheckAllChange(local, res) }" size="large">全选</el-checkbox>
|
||||
|
|
@ -21,12 +26,8 @@
|
|||
</div>
|
||||
</el-checkbox-group>
|
||||
</div>
|
||||
<div class="rowbox item">
|
||||
<div id="lastrecite" class="card">
|
||||
<el-button style="margin-bottom: 20px;width: 50%;" type="primary" @click="init">开始背诵</el-button><br />
|
||||
<el-button style="margin:0;width: 50%;" type="success" @click="last_recite">继续上一次的背诵</el-button>
|
||||
</div>
|
||||
<div id="online-set-container" class="card">
|
||||
<div id="rangeselect" class="card item">
|
||||
<div class="title" style="font-size: 35px;">在线词库</div>
|
||||
<el-checkbox v-model="online.checkAll" :indeterminate="online.isIndeterminate"
|
||||
@change="(res) => { handleCheckAllChange(online, res) }" size="large">全选</el-checkbox>
|
||||
|
|
@ -46,7 +47,6 @@
|
|||
</el-checkbox-group>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="test" class="colbox" v-if="mode === 1">
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
</textarea>
|
||||
<div v-if="current < answered" class="answer">{{ word.word }}</div>
|
||||
</div>
|
||||
<p id="explain">
|
||||
<div id="explain">
|
||||
<el-button v-if="current > 0" @click="prev">上一个</el-button>
|
||||
<el-button v-if="current < answered" @click="next">下一个</el-button>
|
||||
<el-button v-if="current === answered" @click="showAnswer">显示答案</el-button>
|
||||
|
|
@ -64,11 +64,11 @@
|
|||
<el-button @click="terminate" type="danger">停止背诵</el-button>
|
||||
<box-icon color="var(--text-color)" class="btn" style="margin-left: 10px;translate: 0 4px;"
|
||||
@click="audio_play" name='volume-full'></box-icon>
|
||||
</p>
|
||||
</div>
|
||||
<div id="trans">{{ word.type }} {{ word.trans }}</div>
|
||||
</div>
|
||||
<div id="add-to-box" class="card">
|
||||
<el-text class="mx-1" style="font-size: 35px;font-weight: 800;">加入至</el-text>
|
||||
<el-text class="mx-1 title">加入至</el-text>
|
||||
<div class="colbox para">
|
||||
<div class="mid-text">分组:</div>
|
||||
<el-select v-model="set_class" class="m-2" placeholder="Select">
|
||||
|
|
@ -409,16 +409,123 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
@media screen and (max-width: 500px) {
|
||||
#range {
|
||||
max-height: calc(100% - 104px);
|
||||
flex-direction: column;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
#rangeselect {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 20px;
|
||||
/* background-color: var(--bg-color); */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 30px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#test {
|
||||
flex-direction: column;
|
||||
animation: enter .5s ease-out;
|
||||
}
|
||||
|
||||
#trans {
|
||||
font-size: 25px;
|
||||
transition: .5s;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
#add-to-box {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#explain {
|
||||
font-size: 18px;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.el-button {
|
||||
width: 55px;
|
||||
height: 28px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.tbtn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.answer {
|
||||
font-size: 55px;
|
||||
letter-spacing: 15px;
|
||||
min-height: 50px;
|
||||
height: 55px;
|
||||
}
|
||||
.card{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
#range {
|
||||
max-height: calc(100% - 64px);
|
||||
}
|
||||
|
||||
#rangeselect {
|
||||
max-height: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.item {
|
||||
margin-bottom: 20px;
|
||||
/* background-color: var(--bg-color); */
|
||||
width: 50%;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
.tbtn {
|
||||
width: 50%;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 50px;
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#test {
|
||||
padding: 50px;
|
||||
animation: enter .5s ease-out;
|
||||
}
|
||||
|
||||
#trans {
|
||||
font-size: 50px;
|
||||
transition: .5s;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
#add-to-box {
|
||||
width: 30%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
#explain {
|
||||
font-size: 25px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.answer {
|
||||
font-size: 70px;
|
||||
letter-spacing: 30px;
|
||||
min-height: 100px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
|
|
@ -442,31 +549,12 @@ export default {
|
|||
border-radius: 8px;
|
||||
background-color: var(--bg-color);
|
||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
|
||||
font-size: 70px;
|
||||
letter-spacing: 30px;
|
||||
border: none;
|
||||
outline-style: none;
|
||||
height: 100px;
|
||||
padding: 0;
|
||||
transition: .5s;
|
||||
resize: vertical;
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
}
|
||||
|
||||
#test {
|
||||
padding: 50px;
|
||||
animation: enter .5s ease-out;
|
||||
}
|
||||
|
||||
#explain {
|
||||
font-size: 25px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
#trans {
|
||||
font-size: 50px;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.set_radios {
|
||||
|
|
@ -479,26 +567,11 @@ export default {
|
|||
color: var(--text-color);
|
||||
}
|
||||
|
||||
#add-to-box {
|
||||
width: 30%;
|
||||
min-width: 200px;
|
||||
}
|
||||
|
||||
#lastrecite {
|
||||
max-height: 150px;
|
||||
}
|
||||
|
||||
#range {
|
||||
max-height: 85%;
|
||||
}
|
||||
|
||||
#rangeselect {
|
||||
max-height: 100%;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
#online-set-container {
|
||||
height: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
}</style>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<template>
|
||||
<div class="container" style="overflow: auto;">
|
||||
<el-page-header @back="$router.push('/manage')">
|
||||
<el-page-header @back="$router.push('/manage')" class="pconly">
|
||||
<template #content>
|
||||
<span class="text-large font-600 mr-3"> {{ editing.name }} ({{ editing.id }}) </span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
<div class="colbox" style="margin-top: 20px;">
|
||||
<div class="colbox" id="main">
|
||||
<div class="rowbox">
|
||||
<div class="card" style="margin-bottom: 20px;">
|
||||
<div class="card">
|
||||
<div class="title">添加单词</div>
|
||||
<el-input ref="input1" autofocus @change="focusnext($refs.input2)" v-model="new_word.word"></el-input>
|
||||
<div class="colbox">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
<el-button @click="change_name()" type="primary">更改名称</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 100%;" class="card">
|
||||
<div style="flex-grow: 1;" class="card">
|
||||
<el-table :data="table" style="max-height: 550px;overflow: auto;border-radius: 10px;">
|
||||
<el-table-column type="index" />
|
||||
<el-table-column prop="word" label="单词" />
|
||||
|
|
@ -51,7 +51,7 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<el-dialog v-model="word_editing">
|
||||
<el-dialog v-model="word_editing" width="80%">
|
||||
<div class="title">修改单词</div>
|
||||
<el-input v-model="editing_word.word"></el-input>
|
||||
<div class="colbox">
|
||||
|
|
@ -76,7 +76,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
editing: window.editing.set,
|
||||
editingClass:window.editing.set_class_name,
|
||||
editingClass: window.editing.set_class_name,
|
||||
wordsets: window.wordsets,
|
||||
new_word: {
|
||||
word: "",
|
||||
|
|
@ -92,7 +92,7 @@ export default {
|
|||
options: [{ label: "adjective(adj.)", value: "adj." }, { label: "verb(v.)", value: "v." }, { label: "noun(n.)", value: "n." }, { label: "adverb(adv.)", value: "adv." }, { label: "prepositions(prep.)", value: "prep." }, { label: "phrase(phr.)", value: "phr." },],
|
||||
table: [],
|
||||
word_editing: false,
|
||||
new_name:"",
|
||||
new_name: "",
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
|
@ -179,6 +179,30 @@ export default {
|
|||
</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;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#main-container {
|
||||
height: 87%;
|
||||
}
|
||||
|
|
@ -186,12 +210,10 @@ export default {
|
|||
.title {
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
font-size: 35px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
|
||||
|
|
@ -209,8 +231,8 @@ export default {
|
|||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.el-table{
|
||||
--el-table-bg-color:#FFFFFF00;
|
||||
--el-table-tr-bg-color:#FFFFFF00;
|
||||
.el-table {
|
||||
--el-table-bg-color: #FFFFFF00;
|
||||
--el-table-tr-bg-color: #FFFFFF00;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -60,10 +60,23 @@ export default {
|
|||
</script>
|
||||
|
||||
<style scoped>
|
||||
@media screen and (max-width: 500px) {
|
||||
.colbox {
|
||||
flex-direction: column;
|
||||
}
|
||||
.colbox * {
|
||||
margin-top: 15px;
|
||||
}
|
||||
.card{
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 87%;
|
||||
}
|
||||
.colbox{
|
||||
|
||||
.colbox {
|
||||
margin-top: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,30 +1,41 @@
|
|||
<template>
|
||||
<el-container id="main-container" class="container card">
|
||||
<el-header id="header" class="colbox">
|
||||
<div class="no">共有{{ Object.keys(wordsets).length }}个单词集合</div>
|
||||
<el-container id="main-container">
|
||||
<el-header id="header" style="text-align: right;">
|
||||
<div>
|
||||
<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"><box-icon color="white" name='export'
|
||||
<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'
|
||||
size="18px"></box-icon>导出</el-button>
|
||||
<el-button @click="import_set" type="warning"><box-icon color="white" name='import'
|
||||
<el-button @click="import_set" type="warning" class="pconly"><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>
|
||||
<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">
|
||||
|本地
|
||||
</div>
|
||||
<div v-for="(set_class, class_name) in wordsets" :title="class_name" :key="class_name"
|
||||
@click="view(class_name)" class="sidebar-item">
|
||||
{{ class_name }}
|
||||
</div>
|
||||
<div class="sidebar-title">
|
||||
|在线
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main id="wordsets-container">
|
||||
<div class="colbox" if="sets-container">
|
||||
<el-collapse accordion v-model="active_set_class" style="width: 100%;border: none;">
|
||||
<el-collapse-item v-for="(set_class, class_name) in wordsets" :title="class_name" :key="class_name"
|
||||
:name="class_name">
|
||||
<div id="sets-container">
|
||||
<div class="colbox wordclass">
|
||||
<div v-for="(wordset, index) in set_class" :key="index" class="wordset rowbox">
|
||||
<div v-for="(wordset, index) in wordsets[view_class]" :key="index" class="wordset rowbox">
|
||||
<div class="no">
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="title">
|
||||
{{ wordset.name }}
|
||||
</div>
|
||||
<div style="font-size: 17px;font-weight: 200;">
|
||||
<div class="created-date">
|
||||
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
|
||||
</div>
|
||||
<div class="option">
|
||||
|
|
@ -35,11 +46,13 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-collapse-item>
|
||||
</el-collapse>
|
||||
</div>
|
||||
<div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
|
||||
<box-icon name='list-ul' color="var(--text-color)"></box-icon>
|
||||
</div>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -49,13 +62,21 @@ export default {
|
|||
name: "SetList",
|
||||
data() {
|
||||
return {
|
||||
wordsets:window.wordsets,
|
||||
active_set_class: "",
|
||||
wordsets: window.wordsets,
|
||||
view_class: "",
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
manage_online_wordsets(){
|
||||
window.location.href='/dashboard';
|
||||
methods: {
|
||||
view(classname) {
|
||||
this.view_class = classname;
|
||||
let node = document.getElementById("wordsets-container").style;
|
||||
node.animation = "";
|
||||
setTimeout(() => {
|
||||
node.animation = "enter ease-out .6s backwards";
|
||||
}, 0);
|
||||
},
|
||||
manage_online_wordsets() {
|
||||
window.location.href = '/dashboard';
|
||||
},
|
||||
del(set_class_name, id, index) {
|
||||
ElMessageBox.confirm("确定要删除吗？")
|
||||
|
|
@ -70,9 +91,9 @@ export default {
|
|||
});
|
||||
},
|
||||
edit(set, set_class_name) {
|
||||
window.editing = {set,set_class_name};
|
||||
window.editing = { set, set_class_name };
|
||||
this.$router.push({
|
||||
path:"/manage/edit",
|
||||
path: "/manage/edit",
|
||||
})
|
||||
},
|
||||
async export_set() {
|
||||
|
|
@ -130,16 +151,143 @@ export default {
|
|||
title: "添加成功",
|
||||
message: `已添加 ${cnt} 本单词本`
|
||||
});
|
||||
},
|
||||
taggle_sidebar(){
|
||||
let node = document.getElementById("sidebar");
|
||||
if(node.style.width === "180px") node.style.width = "0";
|
||||
else node.style.width = "180px";
|
||||
return;
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.active_set_class = Object.keys(this.wordsets)[0];
|
||||
let first_set = Object.keys(this.wordsets)[0];
|
||||
if (first_set) {
|
||||
setTimeout(() => {
|
||||
this.view(first_set);
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.title {
|
||||
@media screen and (max-width: 500px) {
|
||||
@keyframes sidebar-enter {
|
||||
0% {
|
||||
translate: -100px 0;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 0;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.wordset {
|
||||
border-radius: 13px;
|
||||
padding: 10px;
|
||||
height: 180px;
|
||||
width: 40%;
|
||||
box-shadow: var(--el-box-shadow);
|
||||
margin: 5px;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.no {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
font-size: 30px;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.created-date {
|
||||
font-size: 12px;
|
||||
font-weight: 200;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.wordset .option {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#show-sidebar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 100%;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
left: 20px;
|
||||
color: var(--text-color);
|
||||
box-shadow: var(--el-box-shadow);
|
||||
background-color: var(--bg-color);
|
||||
cursor: pointer;
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
#wordsets-container{
|
||||
width: 100%;
|
||||
display: flex;
|
||||
}
|
||||
#sets-container{
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
@keyframes sidebar-enter {
|
||||
0% {
|
||||
translate: -100px 0;
|
||||
opacity: 0;
|
||||
filter: blur(20px);
|
||||
}
|
||||
|
||||
100% {
|
||||
translate: 0 0;
|
||||
opacity: 1;
|
||||
filter: blur(0px);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar {
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.wordset {
|
||||
border-radius: 13px;
|
||||
padding: 20px;
|
||||
height: 220px;
|
||||
width: 170px;
|
||||
box-shadow: var(--el-box-shadow);
|
||||
margin: 20px;
|
||||
background-color: var(--bg-color);
|
||||
color: var(--text-color);
|
||||
}
|
||||
|
||||
.no {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: 800;
|
||||
color: var(--text-color);
|
||||
font-size: 35px;
|
||||
|
|
@ -148,7 +296,59 @@ export default {
|
|||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.created-date {
|
||||
font-size: 17px;
|
||||
font-weight: 200;
|
||||
}
|
||||
|
||||
.wordset:hover .option {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
#sidebar {
|
||||
background-color: var(--bg-color);
|
||||
border-radius: 0 5px 5px 0;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
animation: sidebar-enter ease-out .6s backwards;
|
||||
}
|
||||
|
||||
.sidebar-title {
|
||||
width: 100%;
|
||||
font-size: 25px;
|
||||
line-height: 60px;
|
||||
padding-left: 5px;
|
||||
font-weight: 800;
|
||||
letter-spacing: 3px;
|
||||
}
|
||||
|
||||
html.bgimged #sidebar {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
html.bgimged .wordset {
|
||||
backdrop-filter: blur(10px);
|
||||
}
|
||||
|
||||
.sidebar-item {
|
||||
margin-left: 10px;
|
||||
width: 100%;
|
||||
font-size: 20px;
|
||||
line-height: 50px;
|
||||
padding-left: 5px;
|
||||
cursor: pointer;
|
||||
transition: .5s;
|
||||
}
|
||||
|
||||
.sidebar-item:hover {
|
||||
background-color: #00000033;
|
||||
}
|
||||
|
||||
.option {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
|
|
@ -156,28 +356,21 @@ export default {
|
|||
transition: .5s;
|
||||
}
|
||||
|
||||
.wordset:hover .option{
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
#header {
|
||||
/* border-bottom: solid 1px #bcbcbc; */
|
||||
justify-content: space-between;
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
.no {
|
||||
font-size: 20px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
#wordsets-container {
|
||||
overflow-x: auto;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#main-container {
|
||||
height: 87%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.wordclass {
|
||||
|
|
|
|||
|
|
@ -3,6 +3,6 @@ module.exports = defineConfig({
|
|||
transpileDependencies: true,
|
||||
publicPath:"./",
|
||||
devServer: {
|
||||
proxy: 'http://localhost:3000'
|
||||
proxy: 'https://localhost:443'
|
||||
}
|
||||
})
|
||||
|
|
|
|||
Loading…
Reference in New Issue