diff --git a/client/package.json b/client/package.json index 39abd62..7018dc3 100644 --- a/client/package.json +++ b/client/package.json @@ -1,5 +1,5 @@ { - "name": "anime_client", + "name": "client", "private": true, "version": "0.0.0", "type": "module", @@ -13,7 +13,8 @@ "@element-plus/icons-vue": "^2.1.0", "axios": "^1.3.4", "element-plus": "^2.3.2", - "vue": "^3.2.47" + "vue": "^3.2.47", + "vue3-video-play": "^1.3.1-beta.6" }, "devDependencies": { "@vitejs/plugin-vue": "^4.1.0", diff --git a/client/src/components/Header.vue b/client/src/components/Header.vue index 7ecc45d..47d824a 100644 --- a/client/src/components/Header.vue +++ b/client/src/components/Header.vue @@ -5,7 +5,7 @@ Boat
- +
diff --git a/client/src/components/RelateList.vue b/client/src/components/RelateList.vue index 8de0661..2d9d1be 100644 --- a/client/src/components/RelateList.vue +++ b/client/src/components/RelateList.vue @@ -41,11 +41,11 @@ defineProps({ display: flex; flex-direction: row; flex-flow: wrap; - justify-content: space-between; + justify-content: start; } .container .item { - width: calc(14% - 18px); - margin-bottom: 18px; + width: calc(14% - 20px); + margin: 2px 10px 16px 10px; } .cus_content_link { border-radius: 5px; @@ -102,11 +102,11 @@ defineProps({ display: flex; flex-direction: row; flex-flow: wrap; - justify-content: space-between; + justify-content: start; } .container .item { - width: calc(33% - 5px); - margin-bottom: 18px; + width: calc(33% - 8px); + margin: 2px 4px 16px 4px; } .cus_content_link { border-radius: 5px; diff --git a/client/src/main.ts b/client/src/main.ts index c65e8fe..544ad7e 100644 --- a/client/src/main.ts +++ b/client/src/main.ts @@ -7,6 +7,7 @@ import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' + const app = createApp(App) @@ -15,6 +16,8 @@ app.use(ElementPlus) app.use(router) + + app.mount('#app') diff --git a/client/src/utils/request.ts b/client/src/utils/request.ts index e7e2d4a..cb92051 100644 --- a/client/src/utils/request.ts +++ b/client/src/utils/request.ts @@ -1,21 +1,19 @@ import axios from "axios"; import {ElMessage, ElLoading } from "element-plus"; -// 定义加载动画对象 -let loading:any +// 创建loading加载动画对象 const startLoading = ()=>{ - loading = ElLoading.service({ + return ElLoading.service({ lock: true, - text: `请求发送中...`, - background: `rgba(255,255,255,0.5)`, + text: `加载中...`, + background: `rgba(0,0,0,0.5)`, // target: document.querySelector(`.content`) }) } -const closeLoading = ()=>{ - loading.close() -} const http = (options: any) => { + // 开启loading动画 + let loading:any = startLoading() return new Promise((resolve, reject) => { // create an axios instance const service = axios.create({ @@ -28,8 +26,7 @@ const http = (options: any) => { // request interceptor service.interceptors.request.use( (config: any) => { - // 开启loading动画 - startLoading() + // let token: string = ""; //此处换成自己获取回来的token,通常存在在cookie或者store里面 // if (token) { // // 让每个请求携带token-- ['X-Token']为自定义key 请根据实际情况自行修改 @@ -48,12 +45,10 @@ const http = (options: any) => { // response interceptor service.interceptors.response.use( (response) => { - closeLoading() - + loading.close() return response.data; }, (error) => { - closeLoading() if (error.response.status == 403) { ElMessage.error("请求异常: ", error) } else { @@ -61,6 +56,7 @@ const http = (options: any) => { } return Promise.reject(error); } + ); // 请求处理 service(options) @@ -70,6 +66,7 @@ const http = (options: any) => { .catch((error) => { reject(error); }); + }); }; diff --git a/client/src/views/index/CategoryFilm.vue b/client/src/views/index/CategoryFilm.vue index 64fc877..3a9e2a9 100644 --- a/client/src/views/index/CategoryFilm.vue +++ b/client/src/views/index/CategoryFilm.vue @@ -5,6 +5,7 @@
{{ c.name }} +
@@ -69,10 +70,10 @@ const changeCurrent = (currentVal: number) => { } // 点击分类事件 -const changeCategory = (cid: any) => { +const changeCategory = (cid?: any) => { let params = new URLSearchParams(location.search) // location.href = `/categoryFilm?pid=${params.get('pid')}&cid=${cid}¤t=${params.get('current')?params.get('current'):1}` - location.href = `/categoryFilm?pid=${params.get('pid')}&cid=${cid}¤t=1` + location.href = cid?`/categoryFilm?pid=${params.get('pid')}&cid=${cid}¤t=1`:`/categoryFilm?pid=${params.get('pid')}` } @@ -105,7 +106,7 @@ onMounted(() => { /*顶部内容区域*/ .header { width: 100%; - margin-bottom: 150px; + margin-bottom: 100px; background: none!important; } .header p { @@ -177,14 +178,13 @@ onMounted(() => { width: 100%; display: flex; flex-flow: wrap; - justify-content: space-between; + justify-content: start; } .c_content .item { - flex-basis: calc(33% - 5px); + flex-basis: calc(33% - 6px); max-width: 33%; - margin-bottom: 20px; - /*width: 100px;*/ + margin: 0 3px 20px 3px; box-sizing: border-box; overflow: hidden; } @@ -305,13 +305,12 @@ onMounted(() => { width: 100%; display: flex; flex-flow: wrap; - justify-content: space-between; + justify-content: start; } .c_content .item { flex-basis: calc(14% - 16px); - max-width: 14%; - margin-bottom: 20px; + margin: 0 8px 20px 8px; /*width: 100px;*/ box-sizing: border-box; overflow: hidden; diff --git a/client/src/views/index/FilmDetails.vue b/client/src/views/index/FilmDetails.vue index bcadc8e..8c1abcd 100644 --- a/client/src/views/index/FilmDetails.vue +++ b/client/src/views/index/FilmDetails.vue @@ -1,5 +1,5 @@