cast1e/wordIn
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

adjust animation

Browse Source
This commit is contained in:
cast1e
2025-03-07 21:24:27 +08:00
parent 4cf4fdce17
commit 02d0402c15
16 changed files with 256 additions and 334 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+19 -7
View File
@@ -1,6 +1,6 @@
<template>
<div class="pconly">
<div id="navibar">
<div class="pconly main-navibar">
<div class="main-navibar">
<div class="navi-item"><el-link @click="go('/')" id="logo">wordIn</el-link></div>
<div class="navi-item"><el-link @click="go('/select')" class="link">背诵</el-link></div>
<div class="navi-item"><el-link @click="go('/manage')" class="link">编辑单词本</el-link></div>
@@ -8,9 +8,11 @@
<div class="navi-item"><el-link @click="go('/about')" class="link">关于</el-link></div>
</div>
</div>
<router-view style=""></router-view>
<div class="main-app-view">
<router-view></router-view>
</div>
<div class="mbonly">
<div id="navibar">
<div class="main-navibar">
<div class="navi-item"><v-icon @click="$router.push('/')">mdi-home</v-icon> <div>主页</div></div>
<div class="navi-item"><v-icon @click="$router.push('/select')">mdi-book</v-icon> <div>背诵</div></div>
<div class="navi-item"><v-icon @click="$router.push('/manage')">mdi-folder</v-icon><div>浏览</div></div>
@@ -32,8 +34,8 @@ const go = (path: string) => {
<style scoped>
@media screen and (max-width: 500px) {
#navibar {
height: 55px;
.main-navibar {
height: 60px;
border-top: solid 1px var(--bd-color);
display: flex;
flex-direction: row;
@@ -58,7 +60,7 @@ const go = (path: string) => {
}
@media screen and (min-width: 500px) {
#navibar {
.main-navibar {
height: 60px;
border-bottom: solid 1px var(--bd-color);
display: flex;
@@ -86,4 +88,14 @@ const go = (path: string) => {
.link {
font-size: 18px;
}
</style>
<style>
.main-app-view{
height: calc(100% - 60px);
width: 100%;
}
.main-navibar{
background-color: var(--bg-color-solid);
}
</style>
src/components/DynamicBackground.vue
+3 -3
View File
@@ -48,7 +48,7 @@ html.dark .dynamic-bg-wrapper::after {
.dynamic-bg-container {
margin: 0;
padding: 0;
height: fit-content;
height:max-content;
width: 100%;
/* Soft pastel gradient background */
display: flex;
@@ -116,8 +116,8 @@ html.dark .dynamic-bg-wrapper::after {
.dynamic-bg-content {
width: 100%;
height: fit-content;
padding: 10px;
height: max-content;
margin-bottom: 10px;
z-index: 10;
}
</style>
src/md/about.md
+8
View File
@@ -21,6 +21,14 @@ wordIn 的前端代码已经开源 [Git Repository](https://git.zjueva.net/cast1
## 3.更新日志
### 1.03
1. 更新内容
- 使用 anime.js 构建动画效果
- 修复显示 bug
- 主页视觉效果更新
### 1.02
1. 更新内容
src/styles/global.css
+5 -32
View File
@@ -1,6 +1,7 @@
html{
height: 100%;
width: 100%;
overflow: hidden !important;
}
body {
@@ -8,7 +9,7 @@ body {
padding: 0;
height: 100%;
width: 100%;
overflow: hidden;
overflow: hidden !important;
font-family:
'MiSans',
-apple-system, /* macOS, iOS */
@@ -32,38 +33,12 @@ body {
.pconly {
display: none;
}
@keyframes enter {
0% {
translate: 100px 0;
opacity: 0;
}
100% {
translate: 0 0;
opacity: 1;
}
}
}
@media screen and (min-width: 500px) {
.mbonly {
display: none;
}
@keyframes enter {
0% {
translate: 100px 0;
opacity: 0;
/* filter: blur(20px); */
}
100% {
translate: 0 0;
opacity: 1;
/* filter: blur(0px); */
}
}
}
#app {
@@ -88,10 +63,9 @@ html.dark {
}
.container {
height: calc(100% - 20px);
width: calc(100% - 20px);
/* padding: 20px; */
animation: enter ease-out 0.6s backwards;
height: 100%;
width: 100%;
box-sizing: border-box;
}
.colbox {
@@ -110,7 +84,6 @@ html.dark {
padding: 20px;
margin: 10px;
color: var(--text-color);
transition: 0.5s;
}
.card:hover {
src/types/vite-env.d.ts
Vendored
+2
View File
@@ -0,0 +1,2 @@
declare const __BUILD_TIME__: string;
declare const __APP_VERSION__: string;
src/views/HomeView.vue
+5 -6
View File
@@ -6,7 +6,7 @@
<div style="flex-grow: 2;margin:30px;" class="rowbox">
<div style="font-size: 25px;color: var(--text-color);font-weight: 600;">欢迎使用</div>
<div id="title">wordIn</div>
<div>当前版本: 1.03 beta1 <br /> 更新时间:2025年3月7日 12:03</div>
<div>当前版本: {{ appVersion }} <br /> 更新时间: {{ buildTime }}</div>
</div>
<div class="colbox card home-view-option-wrapper">
<router-link to="/select" class="button">
@@ -50,6 +50,9 @@ import { useRouter } from 'vue-router';
import DynamicBackground from '@/components/DynamicBackground.vue';
import animejs from 'animejs';
const appVersion = __APP_VERSION__;
const buildTime = __BUILD_TIME__;
const store = useMainStore();
const router = useRouter();
const img_url = ref("");
@@ -124,10 +127,6 @@ onMounted(()=>{
}
@media screen and (min-width: 500px) {
.home-view-container{
display: flex;
flex-direction: column;
}
#title {
font-size: 100px;
color: var(--text-color);
@@ -216,7 +215,7 @@ html.dark .button {
}
.home-view-container{
height: calc(100% - 65px);
height: 100%;
align-items: center;
width: 100%;
overflow: auto;
src/views/manage/EditorView.vue
+38 -21
View File
@@ -1,6 +1,6 @@
<template>
<div class="container" style="overflow: auto;">
<el-page-header style="margin: 10px;" @back="router.push('/manage');">
<div class="container editor-container">
<el-page-header class="editor-header editor-animation-el" @back="router.push('/manage');">
<template #content>
<span class="text-large font-600 mr-3"> {{ name }} ({{ id }}) </span>
</template>
@@ -11,10 +11,9 @@
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="del_set"><box-icon color="var(--text-color)" name='trash'
size="20px"></box-icon>删除</el-dropdown-item>
<el-dropdown-item @click="addTo"><box-icon color="var(--text-color)" name='plus'
size="18px"></box-icon>添加到</el-dropdown-item>
<el-dropdown-item @click="del_set"><v-icon size="20px">mdi-delete</v-icon>删除</el-dropdown-item>
<el-dropdown-item @click="addTo"><v-icon
size="18px">mdi-plus</v-icon>添加到</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -22,7 +21,7 @@
</el-page-header>
<div class="colbox" id="main">
<div class="rowbox">
<div class="card">
<div class="card editor-animation-el">
<div class="title">添加单词</div>
<el-input ref="input1" autofocus @change="focusnext($refs.input2)"
v-model="new_word.word"></el-input>
@@ -39,7 +38,7 @@
</div>
<el-button @click="add_word()" type="primary">添加</el-button>
</div>
<div class="card">
<div class="card editor-animation-el">
<div class="title">更改名称</div>
<div class="colbox">
<el-text class="mx-1" style="width: 60px;">新名称:</el-text>
@@ -48,7 +47,7 @@
<el-button @click="change_name()" type="primary">更改名称</el-button>
</div>
</div>
<div style="flex-grow: 1;" class="card">
<div class="card editor-wordlist editor-animation-el">
<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="单词" />
@@ -57,10 +56,9 @@
<el-table-column width="100px" fixed="right" label="操作">
<template #default="scope">
<div style="display: flex;flex-direction: row;justify-content: space-around;">
<box-icon color="var(--text-color)" size="14px" class="btn" name='trash'
@click="del_word(scope.$index)"></box-icon>
<box-icon color="var(--text-color)" size="14px" class="btn" name='edit-alt'
@click="edit_word(scope.$index)"></box-icon>
<v-icon size="14px" class="btn" @click="del_word(scope.$index)">mdi-delete</v-icon>
<v-icon size="14px" class="btn" name='edit-alt'
@click="edit_word(scope.$index)">mdi-invoice-text-edit</v-icon>
</div>
</template>
</el-table-column>
@@ -112,6 +110,7 @@ import { useRouter, useRoute } from 'vue-router'
import { useMainStore } from '@/store'
import { ElMessage, ElMessageBox } from 'element-plus'
import CDialog from '@/components/UI/CDialog.vue'
import anime from 'animejs'
const router = useRouter()
const route = useRoute()
@@ -276,9 +275,33 @@ onMounted(() => {
}
table.value = wordsets.value.getSet(id.value)
}
anime({
targets: '.editor-animation-el',
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50),
});
})
</script>
<style>
.editor-container{
height: 100%;
width: 100%;
padding: 10px;
overflow: hidden;
padding-top: 0;
box-sizing: border-box;
}
.editor-wordlist{
flex-grow: 1;
height: calc(100% - 60px);
}
.editor-header{
margin: 10px;
}
</style>
<style scoped>
@media screen and (max-width: 500px) {
#main {
@@ -297,20 +320,14 @@ onMounted(() => {
font-size: 35px;
min-height: 60px;
}
.container {
padding: 10px;
height: calc(100% - 70px);
padding-top: 0;
}
}
#main {
height: calc(100% - 50px);
height: 100%;
}
#main-container {
height: 87%;
height: 100%;
}
.title {
src/views/manage/NewSetView.vue
+18 -3
View File
@@ -1,10 +1,10 @@
<template>
<el-page-header style="margin: 20px;" @back="$router.push('/manage')">
<el-page-header class="new-set-header new-set-animation-el"@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">
<el-container id="main-container" class="container card new-set-animation-el">
<div style="overflow: auto;">
<div class="colbox">
<div class="mid-text">名称:</div>
@@ -20,10 +20,11 @@
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { onMounted, ref } from 'vue'
import { useMainStore } from '@/store'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import anime from 'animejs'
const store = useMainStore()
const router = useRouter()
@@ -42,8 +43,22 @@ const new_wordset = () => {
store.wordsets.addSet(new_set_class.value, set_name.value)
router.push('/manage')
}
onMounted(() => {
anime({
targets: '.new-set-animation-el',
translateY: [-50, 0],
opacity: [0, 1],
})
})
</script>
<style>
.new-set-header {
margin: 20px;
}
</style>
<style scoped>
@media screen and (max-width: 500px) {
.colbox {
src/views/manage/SetListView.vue
+81 -91
View File
@@ -1,27 +1,27 @@
<template>
<el-container id="main-container">
<el-header id="header" style="">
<el-header class="list-view-header" style="">
<el-page-header style="margin: 10px;" @back="router.push('/');">
<template #content>
<span class="text-large font-600 mr-3"> 编辑单词本 </span>
</template>
<template #extra>
<div class="colbox">
<el-button @click="$router.push('/manage/new')" type="success"><box-icon color="white"
name='plus'></box-icon>新建单词本</el-button>
<el-button @click="$router.push('/manage/new')"
type="success"><v-icon>mdi-plus</v-icon>新建单词本</el-button>
<div class="pconly">
<el-dropdown trigger="click" style="margin-left: 20px;">
<el-button type="primary">
更多<box-icon color="white" name='chevron-down' size="20px"></box-icon>
更多<v-icon size="20px">mdi-chevron-down</v-icon>
</el-button>
<template #dropdown>
<el-dropdown-menu>
<el-dropdown-item @click="manage_online_wordsets"><box-icon color="white"
name='world' size="20px"></box-icon>管理在线单词本</el-dropdown-item>
<el-dropdown-item @click="export_set"><box-icon color="white" name='export'
size="18px"></box-icon>导出</el-dropdown-item>
<el-dropdown-item @click="import_set"><box-icon color="white" name='import'
size="18px"></box-icon>导入</el-dropdown-item>
<el-dropdown-item @click="manage_online_wordsets"><v-icon
size="20px">mdi-earth</v-icon>管理在线单词本</el-dropdown-item>
<el-dropdown-item @click="export_set"><v-icon
size="18px">mdi-export</v-icon>导出</el-dropdown-item>
<el-dropdown-item @click="import_set"><v-icon color="white" name=''
size="18px">mdi-import</v-icon>导入</el-dropdown-item>
</el-dropdown-menu>
</template>
</el-dropdown>
@@ -30,8 +30,8 @@
</template>
</el-page-header>
</el-header>
<el-container style="height:calc(100% - 200px);position: relative;">
<el-aside id="aside">
<el-container style="height:calc(100% - 60px);position: relative;">
<el-aside class="list-view-aside">
<div id="sidebar" class="sidebar-hidden">
<div id="sidebar-content">
<div class="sidebar-title">
@@ -52,7 +52,7 @@
</div>
</div>
<div class="mbonly" id="show-sidebar" @click="taggle_sidebar">
<box-icon name='list-ul' color="var(--text-color)"></box-icon>
<v-icon>list</v-icon>
</div>
</div>
</el-aside>
@@ -71,10 +71,8 @@
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
</div>
<div class="option">
<box-icon class="btn" name='edit' color="var(--text-color)"
@click="edit(wordset.id)"></box-icon>
<box-icon class="btn" name='trash' color="var(--text-color)"
@click="del(view_wordsets, wordset.id, index)"></box-icon>
<v-icon class="btn" @click="edit(wordset.id)">mdi-book-edit</v-icon>
<v-icon class="btn" @click="del(view_wordsets, wordset.id, index)">mdi-delete</v-icon>
</div>
</div>
</div>
@@ -88,8 +86,7 @@
创建日期：{{ (new Date(wordset.created)).toLocaleString() }}
</div>
<div class="option">
<box-icon class="btn" name='show' color="var(--text-color)"
@click="show(String(index), wordset.name)"></box-icon>
<v-icon class="btn" @click="show(String(index), wordset.name)">mdi-eye</v-icon>
</div>
</div>
</div>
@@ -100,11 +97,12 @@
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue';
import { ref, reactive, onMounted,nextTick } from 'vue';
import { ElNotification, ElMessage, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import axios from 'axios';
import anime from 'animejs';
interface WordSet {
id: string;
@@ -115,7 +113,7 @@ interface WordSet {
interface OnlineWordSets {
[set: string]: {
[book: string]: {
[id:string]:WordSet
[id: string]: WordSet
}
}
}
@@ -124,41 +122,43 @@ const router = useRouter();
const store = useMainStore();
// Convert data properties to refs/reactive
const view_wordsets = ref < string > ("");
const viewing = reactive < {
const view_wordsets = ref<string>("");
const viewing = reactive<{
set: string;
book: string;
} > ({
}>({
set: "",
book: "",
});
const online_wordsets = ref < OnlineWordSets > ({});
const mode = ref < number > (0);
const online_wordsets = ref<OnlineWordSets>({});
const mode = ref<number>(0);
// Convert methods to functions
const view = (classname: string): void => {
mode.value = 0;
view_wordsets.value = classname;
let node = document.getElementById("wordsets-container")?.style;
if (node) {
node.animation = "";
setTimeout(() => {
node.animation = "enter ease-out .6s backwards";
}, 0);
}
nextTick(() => {
anime({
targets: ".wordset",
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50, { grid: [6, 6] })
})
})
};
const view_online = (set_name: string, class_name: string): void => {
mode.value = 1;
viewing.set = set_name;
viewing.book = class_name;
let node = document.getElementById("wordsets-container")?.style;
if (node) {
node.animation = "";
setTimeout(() => {
node.animation = "enter ease-out .6s backwards";
}, 0);
}
nextTick(() => {
anime({
targets: ".wordset",
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50, { grid: [6, 6] })
})
})
};
const manage_online_wordsets = (): void => {
@@ -220,14 +220,22 @@ const taggle_sidebar = (): void => {
// Convert created lifecycle hook to onMounted
onMounted(() => {
anime({
targets: ".list-view-header",
translateY: [-50, 0],
opacity: [0, 1],
});
anime({
targets: ".list-view-aside",
translateX: [-50, 0],
opacity: [0, 1],
});
let first_set = store.wordsets._firstClass;
if (first_set) {
setTimeout(() => {
view(first_set);
}, 0);
view(first_set);
}
axios.get < OnlineWordSets > ("wordset/list").then(
axios.get<OnlineWordSets>("wordset/list").then(
(res) => {
online_wordsets.value = res.data;
}
@@ -235,29 +243,34 @@ onMounted(() => {
});
</script>
<style scoped>
<style>
@media screen and (max-width: 500px) {
@keyframes sidebar-enter {
0% {
translate: -100px 0;
opacity: 0;
}
100% {
translate: 0 0;
opacity: 1;
}
}
#header {
.list-view-header{
height: 70px;
}
#aside {
.list-view-aside{
width: 0;
position: relative;
}
}
@media screen and (max-width: 500px) {
.list-view-header{
height: 60px;
}
.list-view-aside{
width: 180px;
}
}
.list-view-header{
justify-content: space-between;
animation: enter ease-out .6s backwards;
}
</style>
<style scoped>
@media screen and (max-width: 500px) {
#sidebar {
position: absolute;
width: 180px;
@@ -334,29 +347,8 @@ onMounted(() => {
}
@media screen and (min-width: 500px) {
@keyframes sidebar-enter {
0% {
translate: -100px 0;
opacity: 0;
}
100% {
translate: 0 0;
opacity: 1;
}
}
#header {
height: 60px;
}
#aside {
width: 180px;
}
#sidebar {
width: 180px;
animation: sidebar-enter ease-out .6s backwards;
padding-left: 10px;
margin: 10px;
}
@@ -364,7 +356,7 @@ onMounted(() => {
.wordset {
border-radius: 13px;
padding: 20px;
height: 220px;
height: 230px;
width: 170px;
margin: 20px;
}
@@ -398,8 +390,8 @@ onMounted(() => {
.wordset {
background-color: var(--bg-color);
color: var(--text-color);
transition: .5s;
border: solid 1px var(--bd-color);
opacity: 0;
}
.wordset:hover {
@@ -409,7 +401,8 @@ onMounted(() => {
#sidebar {
background-color: var(--bg-color-solid);
border-radius: 5px;
height: calc(100% - 100px);
height: calc(100% - 20px);
box-sizing: border-box;
border: 1px solid var(--bd-color);
transition: .5s;
}
@@ -457,17 +450,14 @@ html.bgimged .wordset {
justify-content: space-around;
opacity: 0;
transition: .5s;
}
#header {
/* border-bottom: solid 1px #bcbcbc; */
justify-content: space-between;
animation: enter ease-out .6s backwards;
margin: 10px;
}
#wordsets-container {
overflow-x: auto;
height: calc(100% - 60px);
height: 100%;
box-sizing: border-box;
padding-bottom: 20px;
position: relative;
}
src/views/post/AboutView.vue
+13 -1
View File
@@ -7,6 +7,16 @@
<script setup lang="ts">
import Post from '@/md/about.md';
import '@/styles/markdown.css';
import anime from 'animejs';
import { onMounted } from 'vue';
onMounted(() => {
anime({
targets: '#post',
translateY: [-50, 0],
opacity: [0, 1],
});
});
</script>
<style scoped>
@@ -23,7 +33,9 @@ import '@/styles/markdown.css';
}
#wrapper {
height:calc(100% - 80px);
height: 100%;
box-sizing: border-box;
padding-bottom: 20px;
width: 100%;
align-items: center;
overflow: auto;
src/views/post/ManualView.vue
+13 -1
View File
@@ -7,6 +7,16 @@
<script setup lang="ts">
import Post from '@/md/manual.md';
import '@/styles/markdown.css';
import anime from 'animejs';
import { onMounted } from 'vue';
onMounted(() => {
anime({
targets: '#post',
translateY: [-50, 0],
opacity: [0, 1],
});
});
</script>
<style scoped>
@@ -23,7 +33,9 @@ import '@/styles/markdown.css';
}
#wrapper {
height:calc(100% - 90px);
height: 100%;
box-sizing: border-box;
padding-bottom: 20px;
width: 100%;
align-items: center;
overflow: auto;
src/views/recite/ReciteView.vue
+19 -5
View File
@@ -1,12 +1,12 @@
<template>
<div>
<el-page-header style="margin-top:20px;margin-left:20px" @back="$router.push('/')">
<el-page-header class="recite-view-header recite-view-animation-el" @back="$router.push('/')">
<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 style="flex-grow: 1;" class="card recite-view-animation-el">
<div id="status">背诵进度: {{ current + 1 }}/{{ total }}</div>
<div>
<textarea autofocus id="input" ref="inputAreaRef" v-if="current === answered" @input="change"
@@ -20,12 +20,12 @@
<el-button v-if="current === answered" @click="showAnswer">显示答案</el-button>
<el-button v-if="current === answered" type="warning" @click="skip">跳过</el-button>
<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>
<v-icon style="margin-left: 10px;translate: 0 4px;"
@click="audio_play">mdi-volume-high</v-icon>
</div>
<div id="trans">{{ word.type }} {{ word.trans }}</div>
</div>
<div id="add-to-box" class="card">
<div id="add-to-box" class="card recite-view-animation-el">
<el-text class="mx-1 title">加入至</el-text>
<div class="colbox para">
<div class="mid-text">分组:</div>
@@ -52,6 +52,7 @@ import { useRouter, useRoute } from 'vue-router';
import { ElMessage, ElNotification, ElMessageBox } from 'element-plus';
import { useMainStore } from '@/store';
import { WordItem } from '@/types';
import anime from 'animejs';
const router = useRouter();
const route = useRoute();
@@ -303,6 +304,12 @@ onMounted(() => {
});
router.push('/select');
});
anime({
targets: '.recite-view-animation-el',
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50),
});
});
onBeforeUnmount(() => {
@@ -310,6 +317,13 @@ onBeforeUnmount(() => {
});
</script>
<style>
.recite-view-header {
margin-top:20px;
margin-left:20px
}
</style>
<style scoped>
@media screen and (max-width: 500px) {
src/views/recite/SelectView.vue
+18 -6
View File
@@ -1,16 +1,15 @@
<template>
<div class="container" id="page">
<el-page-header @back="router.push('/');"
style="width: calc(100% - 30px);margin-left: 30px;margin-top: 5px;">
<el-page-header class="recite-select-animation-el recite-select-header" @back="router.push('/');">
<template #content>
<span class="text-large font-600 mr-3">开始新背诵</span>
</template>
</el-page-header>
<el-steps style="width: 100%;" align-center :active="step">
<el-steps class="recite-select-animation-el" style="width: 100%;" align-center :active="step">
<el-step title="选择单词本" description="选择在线或本地单词本以开始背诵"></el-step>
<el-step title="自定义背诵" description="您可以在此处更改背诵设置"></el-step>
</el-steps>
<div id="main" class="card" style="overflow: hidden;">
<div id="main" class="card recite-select-animation-el">
<div class="item" id="select-area" v-show="step === 1">
<el-tabs style="height: calc(100% - 40px);position: relative;overflow: hidden;">
<el-tab-pane label="本地">
@@ -91,6 +90,7 @@ import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { useMainStore } from '@/store';
import axios from '@/scripts/request';
import anime from 'animejs';
const router = useRouter();
const store = useMainStore();
@@ -214,6 +214,12 @@ onMounted(() => {
type: "error"
});
});
anime({
targets: ".recite-select-animation-el",
translateY: [-50, 0],
opacity: [0, 1],
delay: anime.stagger(50),
})
});
</script>
@@ -239,7 +245,6 @@ onMounted(() => {
align-items: center;
display: flex;
flex-direction: column;
margin-top: 10px;
}
.subtitle {
@@ -261,8 +266,9 @@ onMounted(() => {
#main {
margin-top: 10px;
height: calc(100% - 250px);
height: calc(100% - 60px);
width: 90%;
overflow: hidden;
}
.item {
@@ -298,6 +304,12 @@ onMounted(() => {
height: calc(100% - 50px);
}
.recite-select-header {
width: calc(100% - 30px);
margin-left: 30px;
margin-top: 15px;
}
@keyframes exitLeft {
0% {
opacity: 1;