diff --git a/package.json b/package.json index 5184906..8397026 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "path": "^0.12.7", "pinia": "^2.1.4", "qs": "^6.11.2", + "typeit": "^8.7.1", "responsive-storage": "^2.2.0", "sortablejs": "^1.15.0", "vue": "^3.3.4", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 99d737b..ca51920 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -65,6 +65,9 @@ dependencies: sortablejs: specifier: ^1.15.0 version: 1.15.0 + typeit: + specifier: ^8.7.1 + version: 8.7.1 vue: specifier: ^3.3.4 version: 3.3.4 @@ -8831,6 +8834,14 @@ packages: engines: { node: ">=8" } dev: true + /typeit@8.7.1: + resolution: + { + integrity: sha512-Bx/O4NMz10NWh9FWYtVwV4XwGHF9UDJfpCZPJRtw2/oUcahFAStU8J0t19aroPfTV6s1UlS5ICoqilOqmEnh2Q== + } + requiresBuild: true + dev: false + /typescript@5.0.4: resolution: { diff --git a/src/assets/home/abnormal.png b/src/assets/home/abnormal.png new file mode 100644 index 0000000..dd44eed Binary files /dev/null and b/src/assets/home/abnormal.png differ diff --git a/src/assets/home/abnormal.svg b/src/assets/home/abnormal.svg new file mode 100644 index 0000000..63d796a --- /dev/null +++ b/src/assets/home/abnormal.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/assets/home/analysis.png b/src/assets/home/analysis.png new file mode 100644 index 0000000..ba494b4 Binary files /dev/null and b/src/assets/home/analysis.png differ diff --git a/src/assets/home/analysis.svg b/src/assets/home/analysis.svg new file mode 100644 index 0000000..8e7c0a4 --- /dev/null +++ b/src/assets/home/analysis.svg @@ -0,0 +1,22 @@ + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/home/resource.png b/src/assets/home/resource.png new file mode 100644 index 0000000..7742be9 Binary files /dev/null and b/src/assets/home/resource.png differ diff --git a/src/assets/home/resource.svg b/src/assets/home/resource.svg new file mode 100644 index 0000000..86b07b3 --- /dev/null +++ b/src/assets/home/resource.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/login/bg.png b/src/assets/login/bg.png index 8cdd300..98b2354 100644 Binary files a/src/assets/login/bg.png and b/src/assets/login/bg.png differ diff --git a/src/assets/login/bg_cz.png b/src/assets/login/bg_cz.png new file mode 100644 index 0000000..d6e82be Binary files /dev/null and b/src/assets/login/bg_cz.png differ diff --git a/src/assets/login/leftLogo.svg b/src/assets/login/leftLogo.svg new file mode 100644 index 0000000..b261251 --- /dev/null +++ b/src/assets/login/leftLogo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/login/leftLogo_cz.svg b/src/assets/login/leftLogo_cz.svg new file mode 100644 index 0000000..621c8ec --- /dev/null +++ b/src/assets/login/leftLogo_cz.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/assets/login/mapBg.png b/src/assets/login/mapBg.png new file mode 100644 index 0000000..ec65549 Binary files /dev/null and b/src/assets/login/mapBg.png differ diff --git a/src/assets/login/mapBg_cz.png b/src/assets/login/mapBg_cz.png new file mode 100644 index 0000000..718e7f2 Binary files /dev/null and b/src/assets/login/mapBg_cz.png differ diff --git a/src/assets/login/right_cz.png b/src/assets/login/right_cz.png new file mode 100644 index 0000000..a307a96 Binary files /dev/null and b/src/assets/login/right_cz.png differ diff --git a/src/components/ReTypeit/index.ts b/src/components/ReTypeit/index.ts new file mode 100644 index 0000000..4c34bae --- /dev/null +++ b/src/components/ReTypeit/index.ts @@ -0,0 +1,44 @@ +import { h, defineComponent } from "vue"; +import TypeIt from "typeit"; + +// 打字机效果组件（只是简单的封装下，更多配置项参考 https://www.typeitjs.com/docs/vanilla/usage#options） +export default defineComponent({ + name: "TypeIt", + props: { + /** 打字速度，以每一步之间的毫秒数为单位，默认`200` */ + speed: { + type: Number, + default: 200 + }, + values: { + type: Array, + defalut: [] + }, + className: { + type: String, + default: "type-it" + }, + cursor: { + type: Boolean, + default: true + } + }, + render() { + return h( + "span", + { + class: this.className + }, + { + default: () => [] + } + ); + }, + mounted() { + new TypeIt(`.${this.className}`, { + strings: this.values, + speed: this.speed, + cursor: this.cursor + }).go(); + } +}); diff --git a/src/main.ts b/src/main.ts index 60db439..50ae3bb 100644 --- a/src/main.ts +++ b/src/main.ts @@ -5,11 +5,11 @@ import ElementPlus from "element-plus"; import { getServerConfig } from "./config"; import { createApp, Directive } from "vue"; import { MotionPlugin } from "@vueuse/motion"; -// import { useEcharts } from "@/plugins/echarts"; +import { useEcharts } from "@/plugins/echarts"; import { injectResponsiveStorage } from "@/utils/responsive"; -// import Table from "@pureadmin/table"; -// import PureDescriptions from "@pureadmin/descriptions"; +import Table from "@pureadmin/table"; +import PureDescriptions from "@pureadmin/descriptions"; // 引入重置样式 import "./style/reset.scss"; @@ -49,9 +49,11 @@ getServerConfig(app).then(async config => { await router.isReady(); injectResponsiveStorage(app, config); setupStore(app); - app.use(MotionPlugin).use(ElementPlus); - // .use(useEcharts); - // .use(Table); - // .use(PureDescriptions); + app + .use(MotionPlugin) + .use(ElementPlus) + .use(useEcharts) + .use(Table) + .use(PureDescriptions); app.mount("#app"); }); diff --git a/src/plugins/echarts/index.ts b/src/plugins/echarts/index.ts index b209ead..7057200 100644 --- a/src/plugins/echarts/index.ts +++ b/src/plugins/echarts/index.ts @@ -1,7 +1,7 @@ import type { App } from "vue"; import * as echarts from "echarts/core"; import { CanvasRenderer } from "echarts/renderers"; -import { PieChart, BarChart, LineChart } from "echarts/charts"; +import { PieChart, BarChart, LineChart, RadarChart } from "echarts/charts"; import { GridComponent, TitleComponent, @@ -19,6 +19,7 @@ use([ PieChart, BarChart, LineChart, + RadarChart, CanvasRenderer, GridComponent, TitleComponent, diff --git a/src/router/modules/videoParse.ts b/src/router/modules/videoParse.ts index 2c112dc..dca39eb 100644 --- a/src/router/modules/videoParse.ts +++ b/src/router/modules/videoParse.ts @@ -13,7 +13,8 @@ export default { name: "VideoListPage", component: () => import("@/views/videoList/index.vue"), meta: { - title: "视频分析" + title: "视频分析", + keepAlive: true } }, { @@ -23,7 +24,7 @@ export default { meta: { showLink: false, activePath: "/videoList/index", - title: "视频分析" + title: "视频详情" } } ] diff --git a/src/style/login.css b/src/style/login.css index 7f86094..b13231c 100644 --- a/src/style/login.css +++ b/src/style/login.css @@ -1,40 +1,106 @@ .wave { + position: absolute; + width: 100%; + height: 100%; + left: 0; + bottom: 0; + z-index: 1; +} +.image_bg { position: fixed; + width: 100%; height: 100%; left: 0; bottom: 0; - z-index: -1; + z-index: -2; + background: rgb(5, 40, 96); +} +.logo-small { + position: fixed; + /* width: 100%; + height: 100%; */ + left: 10%; + top: 10%; } .login-container { width: 100vw; height: 100vh; - display: grid; - /* grid-template-columns: repeat(2, 1fr); */ - align-items: center; - justify-content: center; + /* display: grid; + grid-template-columns: repeat(2, 1fr); grid-gap: 18rem; - padding: 0 2rem; + align-items: start; */ + display: flex; + justify-content: center; + align-items: center; + /* padding: 0 2rem; */ + /* justify-content: end; */ } .img { + width: 35%; + /* height: 60vh; */ + height: 556px; display: flex; - justify-content: flex-end; + /* justify-content: flex-end; */ + flex-direction: column; + justify-content: center; align-items: center; + /* background-image: url("../assets/login/login-bg.png"); + background-repeat: no-repeat; + background-size: cover; + background-position: left center; */ + /* width: 500px; */ + /* height: 380px; */ + /* background: rgba( 224, 237, 255, 1); */ + /* background-image: url('../assets/login/mapBg.png'); */ + background-image: url("../assets/login/mapBg_cz.png"); + border-radius: 16px 0 0 16px; } - -.img img { - width: 500px; +.describe { + /* margin: 32px 0 64px; */ + /* width: 480px; */ + /* font-family: PingFang SC; */ + /* font-size: 48px; */ + /* font-weight: 400; */ + height: 54px; + /* letter-spacing: 0em; */ + text-align: left; + font-family: Open Sans; + font-size: 40px; + font-weight: 700; + line-height: 54px; + color: #fff; +} +.platform-logo { + width: 464px; + height: 68px; + /* text-align: left; */ } +/* .img img { + width: 500px; +} */ .login-box { + padding: 25px 0 24px; + width: 43%; + /* height: 60vh; */ + height: 556px; display: flex; + flex-direction: column; + justify-content: center; align-items: center; text-align: center; + background: rgb(255, 255, 255); + background-image: url("../assets/login/right_cz.png"); + background-position: 100% 100%; + background-repeat: no-repeat; + border-radius: 0 16px 16px 0; } .login-form { - width: 360px; + margin-bottom: 130px; + width: 80%; } .avatar { @@ -45,8 +111,31 @@ .login-form h2 { text-transform: uppercase; margin: 15px 0; + /* color: #999; + font: bold 200% Consolas, Monaco, monospace; */ + /* font-family: "PingFang SC"; + font-size: 32px; + font-weight: 400; + line-height: 45px; + letter-spacing: 0em; + text-align: left; */ + height: 45px; + font-family: PingFang SC; + font-size: 32px; + font-weight: bold; + line-height: 45px; + text-align: left; + color: #333; +} + +.login-form-footer { + font-family: PingFang SC; + font-size: 14px; + font-weight: 400; + line-height: 20px; + letter-spacing: 0em; color: #999; - font: bold 200% Consolas, Monaco, monospace; + text-align: left; } @media screen and (max-width: 1180px) { diff --git a/src/views/login/index.vue b/src/views/login/index.vue index bf3cd5b..f46644e 100644 --- a/src/views/login/index.vue +++ b/src/views/login/index.vue @@ -3,20 +3,30 @@ import Motion from "./utils/motion"; import { useRouter } from "vue-router"; import { message } from "@/utils/message"; import { loginRules } from "./utils/rule"; -import { useNav } from "@/layout/hooks/useNav"; +// import { useNav } from "@/layout/hooks/useNav"; import type { FormInstance } from "element-plus"; import { useLayout } from "@/layout/hooks/useLayout"; import { useUserStoreHook } from "@/store/modules/user"; import { initRouter, getTopMenu } from "@/router/utils"; -import { logo } from "./utils/static"; +import { bg_cz, leftLogo_cz } from "./utils/static"; import { useRenderIcon } from "@/components/ReIcon/src/hooks"; -import { ref, reactive, onMounted, onBeforeUnmount } from "vue"; -import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; +// import update from "./components/update.vue"; +import { + ref, + reactive, + onMounted, + onBeforeUnmount, + toRaw, + nextTick +} from "vue"; +// import { useDataThemeChange } from "@/layout/hooks/useDataThemeChange"; -import dayIcon from "@/assets/svg/day.svg?component"; -import darkIcon from "@/assets/svg/dark.svg?component"; -import Lock from "@iconify-icons/ri/lock-fill"; -import User from "@iconify-icons/ri/user-3-fill"; +// import dayIcon from "@/assets/svg/day.svg?component"; +// import darkIcon from "@/assets/svg/dark.svg?component"; +import Lock from "@iconify-icons/icon-park-outline/lock"; +import User from "@iconify-icons/icon-park-outline/user"; +import PreviewClose from "@iconify-icons/icon-park-outline/preview-close"; +import PreviewOpen from "@iconify-icons/icon-park-outline/preview-open"; defineOptions({ name: "Login" @@ -24,13 +34,17 @@ defineOptions({ const router = useRouter(); const loading = ref(false); const ruleFormRef = ref(); +// const checked = ref(false); +// const currentPage = computed(() => { +// return useUserStoreHook().currentPage; +// }); const { initStorage } = useLayout(); initStorage(); -const { dataTheme, dataThemeChange } = useDataThemeChange(); -dataThemeChange(); -const { title } = useNav(); +// const { dataTheme, dataThemeChange } = useDataThemeChange(); +// dataThemeChange(); +// const { title } = useNav(); const ruleForm = reactive({ username: "admin", @@ -55,9 +69,12 @@ const onLogin = async (formEl: FormInstance | undefined) => { message("登录成功", { type: "success" }); }); } else { - loading.value = false; - return fields; + message("登录失败", { type: "error" }); } + }) + .catch(() => { + loading.value = false; + message("登录失败", { type: "error" }); }); } else { loading.value = false; @@ -65,7 +82,8 @@ const onLogin = async (formEl: FormInstance | undefined) => { } }); }; - +const passwordType = ref("password"); +const refInput = ref(); /** 使用公共函数，避免`removeEventListener`失效 */ function onkeypress({ code }: KeyboardEvent) { if (code === "Enter") { @@ -73,9 +91,19 @@ function onkeypress({ code }: KeyboardEvent) { } } +function showPass() { + if (passwordType.value === "password") { + passwordType.value = "text"; + } else { + passwordType.value = "password"; + } + nextTick(() => { + refInput.value.focus(); + }); +} + onMounted(() => { window.document.addEventListener("keypress", onkeypress); - console.log(logo); }); onBeforeUnmount(() => { @@ -85,26 +113,43 @@ onBeforeUnmount(() => {