diff --git a/components.d.ts b/components.d.ts index e610a0e..f3f37be 100644 --- a/components.d.ts +++ b/components.d.ts @@ -9,16 +9,32 @@ declare module 'vue' { export interface GlobalComponents { AButton: typeof import('ant-design-vue/es')['Button'] AButtonGroup: typeof import('ant-design-vue/es')['ButtonGroup'] + ACard: typeof import('ant-design-vue/es')['Card'] + ACheckbox: typeof import('ant-design-vue/es')['Checkbox'] AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider'] ADatePicker: typeof import('ant-design-vue/es')['DatePicker'] - ARadioButton: typeof import('ant-design-vue/es')['RadioButton'] - ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup'] + ADivider: typeof import('ant-design-vue/es')['Divider'] + AFlex: typeof import('ant-design-vue/es')['Flex'] + AForm: typeof import('ant-design-vue/es')['Form'] + AFormItem: typeof import('ant-design-vue/es')['FormItem'] + AInput: typeof import('ant-design-vue/es')['Input'] + AInputPassword: typeof import('ant-design-vue/es')['InputPassword'] ASelect: typeof import('ant-design-vue/es')['Select'] ASelectOption: typeof import('ant-design-vue/es')['SelectOption'] + ATabPane: typeof import('ant-design-vue/es')['TabPane'] + ATabs: typeof import('ant-design-vue/es')['Tabs'] ATimePicker: typeof import('ant-design-vue/es')['TimePicker'] + ATooltip: typeof import('ant-design-vue/es')['Tooltip'] + BoxDog: typeof import('./src/components/BoxDog/BoxDog.vue')['default'] + DynamicTitle: typeof import('./src/components/DynamicTitle/DynamicTitle.vue')['default'] LoginPage: typeof import('./src/views/Login/LoginPage.vue')['default'] + RegisterPage: typeof import('./src/views/Register/RegisterPage.vue')['default'] RouterLink: typeof import('vue-router')['RouterLink'] RouterView: typeof import('vue-router')['RouterView'] + SafetyOutlined: typeof import('@ant-design/icons-vue')['SafetyOutlined'] + TabletOutlined: typeof import('@ant-design/icons-vue')['TabletOutlined'] + TestI18n: typeof import('./src/views/TestI18n.vue')['default'] TestTheme: typeof import('./src/views/TestTheme.vue')['default'] + UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined'] } } diff --git a/package.json b/package.json index 906c6d4..7bc1bf6 100644 --- a/package.json +++ b/package.json @@ -13,29 +13,31 @@ "@ant-design/icons-vue": "^7.0.1", "@types/crypto-js": "^4.2.2", "@types/json-stringify-safe": "^5.0.3", - "@types/node": "^22.1.0", + "@types/node": "^22.2.0", "@types/nprogress": "^0.2.3", - "alova": "^3.0.5", + "alova": "^3.0.6", "ant-design-vue": "^4.2.3", "axios": "^1.7.3", "crypto-js": "^4.2.0", - "eslint": "9.x", + "eslint": "9.9.0", "json-stringify-safe": "^5.0.1", "less": "^4.2.0", "localforage": "^1.10.0", "nprogress": "^0.2.0", "pinia": "^2.2.1", - "pinia-plugin-persistedstate-2": "^2.0.23", + "pinia-plugin-persistedstate": "^3.2.1", "unplugin-auto-import": "^0.18.2", "vite-plugin-compression": "^0.5.1", "vite-plugin-html": "^3.2.2", "vite-plugin-node-polyfills": "^0.22.0", - "vue": "^3.4.31", + "vue": "^3.4.37", "vue-i18n": "^10.0.0-beta.5", - "vue-router": "^4.4.3" + "vue-router": "^4.4.3", + "zipson": "^0.2.12" }, "devDependencies": { - "@eslint/js": "^9.8.0", + "@eslint/js": "^9.9.0", + "@intlify/unplugin-vue-i18n": "^4.0.0", "@vitejs/plugin-vue": "^5.0.5", "eslint-plugin-vue": "^9.27.0", "globals": "^15.9.0", @@ -43,7 +45,7 @@ "typescript": "^5.2.2", "typescript-eslint": "^8.0.1", "unplugin-vue-components": "^0.27.3", - "vite": "^5.3.4", + "vite": "^5.4.0", "vue-tsc": "^2.0.24" } } diff --git a/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4 (1).woff2 b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4 (1).woff2 new file mode 100644 index 0000000..652f855 Binary files /dev/null and b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4 (1).woff2 differ diff --git a/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4 (2).woff2 b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4 (2).woff2 new file mode 100644 index 0000000..652f855 Binary files /dev/null and b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4 (2).woff2 differ diff --git a/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2 b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2 new file mode 100644 index 0000000..652f855 Binary files /dev/null and b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2 differ diff --git a/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA (1).woff2 b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA (1).woff2 new file mode 100644 index 0000000..6cc139f Binary files /dev/null and b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA (1).woff2 differ diff --git a/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA (2).woff2 b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA (2).woff2 new file mode 100644 index 0000000..6cc139f Binary files /dev/null and b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA (2).woff2 differ diff --git a/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA.woff2 b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA.woff2 new file mode 100644 index 0000000..6cc139f Binary files /dev/null and b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA.woff2 differ diff --git a/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA (1).woff2 b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA (1).woff2 new file mode 100644 index 0000000..acf3ef2 Binary files /dev/null and b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA (1).woff2 differ diff --git a/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA (2).woff2 b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA (2).woff2 new file mode 100644 index 0000000..acf3ef2 Binary files /dev/null and b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA (2).woff2 differ diff --git a/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA.woff2 b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA.woff2 new file mode 100644 index 0000000..acf3ef2 Binary files /dev/null and b/src/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA.woff2 differ diff --git a/src/assets/images/login-back.png b/src/assets/images/login-back.png new file mode 100644 index 0000000..ee5814e Binary files /dev/null and b/src/assets/images/login-back.png differ diff --git a/src/assets/styles/global.scss b/src/assets/styles/global.scss index 3e8b625..32cd7c8 100644 --- a/src/assets/styles/global.scss +++ b/src/assets/styles/global.scss @@ -4,12 +4,30 @@ body { position: relative; transition: background-color 0.3s, color 0.3s; + width: 100vw; + height: 100vh; @include useTheme { - background-color: getModeVar('bgColor'); - color: getModeVar('infoColor'); + background-color: getModeVar('bgColor') !important; + color: getModeVar('infoColor') !important; } } +#app { + @include useTheme { + background-color: getModeVar('bgColor') !important; + color: getModeVar('infoColor') !important; + } +} + +* { + margin: 0; + padding: 0; + border: 0; + outline: 0; + font-size: 100%; + vertical-align: baseline; +} + #nprogress .bar { background: #48c453 !important; //自定义颜色 } diff --git a/src/assets/svgs/dinosaur-comfort.svg b/src/assets/svgs/dinosaur-comfort.svg new file mode 100644 index 0000000..1c9add5 --- /dev/null +++ b/src/assets/svgs/dinosaur-comfort.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/dinosaur-contemplation.svg b/src/assets/svgs/dinosaur-contemplation.svg new file mode 100644 index 0000000..678a711 --- /dev/null +++ b/src/assets/svgs/dinosaur-contemplation.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/dinosaur-excited.svg b/src/assets/svgs/dinosaur-excited.svg new file mode 100644 index 0000000..ae4a01a --- /dev/null +++ b/src/assets/svgs/dinosaur-excited.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-glad.svg b/src/assets/svgs/dinosaur-glad.svg new file mode 100644 index 0000000..6748594 --- /dev/null +++ b/src/assets/svgs/dinosaur-glad.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/dinosaur-greet.svg b/src/assets/svgs/dinosaur-greet.svg new file mode 100644 index 0000000..760a22b --- /dev/null +++ b/src/assets/svgs/dinosaur-greet.svg @@ -0,0 +1,352 @@ + + + 8 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/assets/svgs/dinosaur-happy.svg b/src/assets/svgs/dinosaur-happy.svg new file mode 100644 index 0000000..82a9f5b --- /dev/null +++ b/src/assets/svgs/dinosaur-happy.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/dinosaur-joy.svg b/src/assets/svgs/dinosaur-joy.svg new file mode 100644 index 0000000..6c5b724 --- /dev/null +++ b/src/assets/svgs/dinosaur-joy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-play.svg b/src/assets/svgs/dinosaur-play.svg new file mode 100644 index 0000000..c027654 --- /dev/null +++ b/src/assets/svgs/dinosaur-play.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-pleasure.svg b/src/assets/svgs/dinosaur-pleasure.svg new file mode 100644 index 0000000..fc43be3 --- /dev/null +++ b/src/assets/svgs/dinosaur-pleasure.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-rouse.svg b/src/assets/svgs/dinosaur-rouse.svg new file mode 100644 index 0000000..beb3462 --- /dev/null +++ b/src/assets/svgs/dinosaur-rouse.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/dinosaur-satisfy.svg b/src/assets/svgs/dinosaur-satisfy.svg new file mode 100644 index 0000000..f9bc570 --- /dev/null +++ b/src/assets/svgs/dinosaur-satisfy.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-tongue.svg b/src/assets/svgs/dinosaur-tongue.svg new file mode 100644 index 0000000..f8e750c --- /dev/null +++ b/src/assets/svgs/dinosaur-tongue.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/BoxDog/BoxDog.vue b/src/components/BoxDog/BoxDog.vue new file mode 100644 index 0000000..0923b01 --- /dev/null +++ b/src/components/BoxDog/BoxDog.vue @@ -0,0 +1,99 @@ + + + + + diff --git a/src/components/BoxDog/index.scss b/src/components/BoxDog/index.scss new file mode 100644 index 0000000..99e4e2b --- /dev/null +++ b/src/components/BoxDog/index.scss @@ -0,0 +1,1173 @@ + +html, +body { + height: 100%; + width: 100%; + overflow: hidden; +} + +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +body { + position: relative; + background: transparent; + padding: 0; + margin: 0; + z-index: 999; +} + +.container { + position: relative; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + display: flex; + align-items: center; + justify-content: center; + width: 600px; + height: 420px; +} + +* { + position: absolute; +} + +* *:before, +* *:after { + content: ""; + position: absolute; +} + +.box { + background-color: #d1585d; + width: 50%; + height: 45%; + left: 25%; + bottom: 0; + border-radius: 20px; + transform-origin: center bottom; + -webkit-animation: bigBox 8s linear infinite; + animation: bigBox 8s linear infinite; +} + +.box:before { + background-color: #f79568; + width: 70%; + height: 100%; + bottom: 0; + border-radius: 20px; +} + +.box:after { + background-color: #ffbd31; + height: 100%; + width: 11%; + right: 10%; +} + +.box .sign { + width: 36px; + height: 36px; + border-radius: 6px; + border: 3px solid #d1585d; + left: 150px; + top: 10%; +} + +.box .sign:after { + width: 3px; + height: 20px; + left: 13px; + top: 6px; + background-color: #d1585d; +} + +.box .sign:before { + width: 9px; + height: 9px; + left: 10px; + top: 6px; + border: 3px solid #d1585d; + border-left: 0; + border-bottom: 0; + transform: rotate(-45deg); +} + +.dog { + bottom: 45%; + height: 45%; + width: 45%; + -webkit-animation: dog-bounce 8s linear infinite; + animation: dog-bounce 8s linear infinite; + transform-origin: center bottom; +} + +.dog-group { + width: 100%; + height: 100%; + top: 0; + left: 0; + -webkit-animation: dog-jump 8s linear infinite; + animation: dog-jump 8s linear infinite; + transform-origin: center bottom; +} + +.body-group { + z-index: 2; + width: 52%; + height: 38%; + bottom: 0; + left: 25%; +} + +.body-group .dog-box { + width: 100%; + height: 100%; + border-radius: 0px 7px 7px; + overflow: hidden; + z-index: 3; + background: #f79568; + background: linear-gradient(90deg, #f79568 0%, #f79568 67%, #d1585d 67%, #d1585d 100%); +} + +.body-group .dog-box .dog-box-sign { + width: 30px; + height: 30px; + border-radius: 6px; + border: 3px solid #d1585d; + left: 35%; + top: 15%; +} + +.body-group .dog-box .dog-box-sign:after { + width: 70%; + height: 3px; + border-radius: 10px; + background-color: #d1585d; + left: 15%; + top: 5px; + box-shadow: 0px 6px #d1585d; +} + +.body-group .dog-box .dog-box-sign:before { + width: 45%; + height: 3px; + border-radius: 10px; + background-color: #d1585d; + left: 39%; + top: 17px; +} + +.body-group .dog-box .bottom-shadow { + width: 100%; + height: 20px; + background-color: #a53942; + bottom: -13px; + transform: rotate(-2deg); + -webkit-animation: shadows 8s linear infinite; + animation: shadows 8s linear infinite; +} + +.body-group .dog-box .top-left-shadow { + height: 40px; + width: 60px; + background-color: #a53942; + transform: rotate(-15deg); + top: -32px; + left: -10px; + -webkit-animation: shadows 8s linear infinite; + animation: shadows 8s linear infinite; +} + +.body-group .dog-shape { + border-radius: 50%; + background-color: #39cede; + width: 50px; + height: 50px; + right: 18%; + top: -40%; + z-index: 2; + box-shadow: 6px 10px 0 #a53942; + -webkit-animation: blue-shape 8s linear infinite; + animation: blue-shape 8s linear infinite; + transform-origin: center bottom; +} + +.body-group .tail-group { + right: 0px; + top: -65%; + height: 70px; + width: 24px; + z-index: 1; + transform: rotate(25deg); + -webkit-animation: tailGroup 8s linear infinite; + animation: tailGroup 8s linear infinite; + transform-origin: center; +} + +.body-group .tail-group .tail { + bottom: 0; + background-color: #ff4a50; + height: 22px; + width: 22px; + border-radius: 0 0 20px 20px; + z-index: 1; + -webkit-animation: tail 8s linear infinite; + animation: tail 8s linear infinite; + transform-origin: center center; +} + +.body-group .tail-group .tail .tail { + bottom: 40%; +} + +.body-group .tail-group .tail.last { + border-radius: 20px; +} + +.head-group { + bottom: 38%; + width: 45%; + height: 38%; + left: 10%; + -webkit-animation: dog-head 8s linear infinite; + animation: dog-head 8s linear infinite; + transform-origin: center bottom; +} + +.head-group .head { + width: 100%; + height: 100%; + border-radius: 0 0 3px 3px; + overflow: hidden; + background: #f79568; + background: linear-gradient(90deg, #f79568 0%, #f79568 67%, #d1585d 67%, #d1585d 100%); +} + +.head-group .head:after { + background-color: #a53942; + width: 50px; + height: 50px; + border-radius: 50%; + right: -25px; + bottom: -25px; +} + +.head-group .ear { + height: 30px; + width: 50%; + bottom: 100%; + transform: perspective(3000px); +} + +.head-group .ear.right { + right: -20px; +} + +.head-group .ear .ear-container { + width: 95%; + height: 100%; + left: -9px; + transform-style: preserve-3d; + transform-origin: center bottom; + transform: rotateY(45deg); +} + +.head-group .ear .ear-left, .head-group .ear .ear-right { + background-color: #cb444a; + height: 100%; + width: 100%; + transform-style: preserve-3d; + border-radius: 4px 4px 0 0; + transform-origin: center bottom; +} + +.head-group .ear .ear-left { + transform: rotateX(50deg); + -webkit-animation: earLeft 8s linear infinite; + animation: earLeft 8s linear infinite; +} + +.head-group .ear .ear-right { + transform: rotateX(-50deg); + -webkit-animation: earRight 8s linear infinite; + animation: earRight 8s linear infinite; +} + +.head-group .face { + width: 67%; + height: 100%; +} + +.head-group .face .muzzle { + width: 34px; + height: 34px; + border-radius: 50%; + background-color: #d1585d; + left: 29%; + bottom: 8%; + z-index: 2; +} + +.head-group .face .eyes { + width: 100%; + height: 50%; + top: 17%; + z-index: 1; +} + +.head-group .face .eyes .eye-left, .head-group .face .eyes .eye-right { + width: 32px; + height: 32px; + border-radius: 50%; + background-color: #fff; + bottom: 0; + transform-origin: center top; + -webkit-animation: eyeWink 8s linear infinite; + animation: eyeWink 8s linear infinite; +} + +.head-group .face .eyes .eye-left .pupil, .head-group .face .eyes .eye-right .pupil { + background-color: #421163; + border-radius: 50%; + width: 76%; + height: 76%; + top: 12%; + left: 14%; + -webkit-animation: eyeMove 8s linear infinite; + animation: eyeMove 8s linear infinite; +} + +.head-group .face .eyes .eye-left .pupil:after, .head-group .face .eyes .eye-right .pupil:after { + background-color: #fff; + border-radius: 50%; + width: 10px; + height: 10px; + top: 3px; + left: -1px; + transform-origin: center bottom; + -webkit-animation: eyeWink2 8s linear infinite; + animation: eyeWink2 8s linear infinite; +} + +.head-group .face .eyes .eye-left { + left: 4px; +} + +.head-group .face .eyes .eye-right { + right: 4px; +} + +.head-group .face .nose { + background-color: #421163; + width: 12px; + height: 8px; + left: 9px; + top: 6px; + border-radius: 40%; + -webkit-animation: nose 8s linear infinite; + animation: nose 8s linear infinite; +} + +.head-group .face .nose:after { + width: 4px; + height: 6px; + background-color: #421163; + left: 4px; + top: 8px; +} + +.head-group .face .mouth-close { + width: 100%; + height: 8px; + top: 12px; + -webkit-animation: mouthClose 8s linear infinite; + animation: mouthClose 8s linear infinite; +} + +.head-group .face .mouth-close:after, .head-group .face .mouth-close:before { + width: 12px; + height: 8px; + border: 3px solid #421163; + border-radius: 0 0 8px 8px; + border-top: 0; + top: 4px; + left: 4px; +} + +.head-group .face .mouth-close:before { + left: 14px; +} + +.head-group .face .mouth-barks { + background-color: #421163; + width: 20px; + height: 20px; + bottom: 2px; + left: 6px; + border-radius: 50%; + overflow: hidden; + opacity: 0; + -webkit-animation: mouthBarks 8s linear infinite; + animation: mouthBarks 8s linear infinite; +} + +.head-group .face .mouth-barks:after { + width: 80%; + height: 80%; + background-color: #ff4a50; + left: 40%; + top: 40%; + border-radius: 50%; +} + +.head-group .face .mouth-open { + opacity: 0; + background-color: #421163; + width: 24px; + height: 12px; + bottom: 3px; + left: 4px; + border-radius: 0px 0px 22px 22px; + -webkit-animation: mouthOpen 8s linear infinite; + animation: mouthOpen 8s linear infinite; +} + +.head-group .face .mouth-open .teeth { + width: 0; + height: 0; + left: 3px; + top: 0px; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 5px solid #fff; +} + +.head-group .face .mouth-open .teeth:after { + width: 0; + height: 0; + left: 9px; + top: -5px; + border-left: 3px solid transparent; + border-right: 3px solid transparent; + border-top: 5px solid #fff; +} + +.head-group .face .mouth-open .tongue-open { + background-color: #ff4a50; + width: 12px; + height: 9px; + left: 6px; + top: 3px; + border-radius: 40%; + -webkit-animation: tongue 8s linear infinite; + animation: tongue 8s linear infinite; + transform-origin: center top; +} + +.tongue-open { + z-index: 99; + background-color: #ff4a50; + width: 12px; + height: 9px; + left: 61px; + top: 100px; + border-radius: 40%; + -webkit-animation: tongue 8s linear infinite; + animation: tongue 8s linear infinite; + transform-origin: center top; +} + +.plant-group { + width: 32%; + height: 45%; + bottom: 0; + right: 0; +} + +.plant-group:before { + background-color: #a53942; + left: 13%; + bottom: 30%; + height: 60px; + width: 16px; +} + +.plant-group .pot { + background-color: #a53942; + left: 0%; + bottom: 0; + height: 60px; + width: 60px; + z-index: 2; +} + +.plant-group .pot:after { + background-color: #ff4a50; + left: 0; + bottom: 0; + height: 100%; + width: 200%; + border-radius: 0 0 120px 120px; +} + +.plant-group .plant { + bottom: 60px; + left: 0%; + height: 50px; + width: 120px; +} + +.plant-group .plant .stem { + width: 8px; + height: 110%; + background-color: #421163; + left: 56px; + top: -4px; +} + +.plant-group .plant .leaf { + background-color: #421163; + width: 6px; + height: 16px; + left: -6px; + border-radius: 50px; +} + +.plant-group .plant .leaf:after { + background-color: #39cede; + width: 20px; + height: 38px; + border-radius: 50%; + left: -7px; + bottom: 70%; +} + +.plant-group .plant .leaf:nth-of-type(1), +.plant-group .plant .leaf:nth-of-type(2) { + transform: rotate(-45deg); +} + +.plant-group .plant .leaf:nth-of-type(4), +.plant-group .plant .leaf:nth-of-type(5) { + transform: rotate(45deg); + left: 8px; +} + +.plant-group .plant .leaf:nth-of-type(1), +.plant-group .plant .leaf:nth-of-type(5) { + bottom: -3px; +} + +.plant-group .plant .leaf:nth-of-type(3) { + top: -2px; + left: 1px; +} + +.plant-group .plant .leaf:nth-of-type(2), +.plant-group .plant .leaf:nth-of-type(4) { + bottom: 25px; +} + +.shapes { + width: 50%; + height: 45%; + bottom: 0; + left: 0; +} + +.shapes:before { + background-color: #a53942; + width: 52%; + height: 50%; + bottom: 0; + right: -1px; + border-radius: 0 30px 0 0; + transform: skewX(5deg); +} + +.shapes .red-shape { + background-color: #ff4a50; + right: 0; + bottom: 0; + height: 120px; + width: 120px; + border-radius: 100%; +} + +.shapes .blue-shape { + left: 24%; + bottom: 0; + width: 120px; + height: 50px; + background-color: #39cede; + border-radius: 50px; +} + +.shapes .yellow-shape { + left: 35%; + bottom: 77px; + width: 120px; + height: 40px; + background-color: #ffbd31; + border-radius: 50px; + transform: rotate(-45deg); +} + +@-webkit-keyframes bigBox { + 6.3%, 11.6%, 14.4%, 16%, 48%, 52.4%, 55.6%, 57.2%, 62.4%, 67.2%, 70.8%, 72.4% { + transform: scaleX(1) scaleY(1); + } + 8.8%, 50.4%, 65.6% { + transform: scaleX(1.02) scaleY(0.98); + } + 14.8%, 56%, 71.2% { + transform: scaleX(1.05) scaleY(0.95); + } +} + +@keyframes bigBox { + 6.3%, 11.6%, 14.4%, 16%, 48%, 52.4%, 55.6%, 57.2%, 62.4%, 67.2%, 70.8%, 72.4% { + transform: scaleX(1) scaleY(1); + } + 8.8%, 50.4%, 65.6% { + transform: scaleX(1.02) scaleY(0.98); + } + 14.8%, 56%, 71.2% { + transform: scaleX(1.05) scaleY(0.95); + } +} + +@-webkit-keyframes dog-bounce { + 6.3%, 11.2%, 14.4%, 16%, 48%, 52.4%, 55.6%, 57.2%, 62.8%, 67.2%, 70.8%, 72.4% { + transform: scaleX(1) scaleY(1); + } + 8.8%, 50.4%, 65.6% { + transform: scaleX(1.15) scaleY(0.85) translateY(5px); + } + 14.8%, 56%, 71.2% { + transform: scaleX(1.1) scaleY(0.9) translateY(10px); + } + 16.4%, 72.8% { + transform: scaleX(0.95) scaleY(1.05); + } + 18.4%, 22%, 26%, 30%, 34%, 74.4%, 78.4%, 82.4%, 86.4%, 90.4% { + transform: scaleX(1.04) scaleY(0.96); + } + 20%, 24%, 28%, 32%, 36%, 40%, 76.4%, 80.4%, 84.4%, 88.4%, 92.4%, 96.4% { + transform: scaleX(1) scaleY(1); + } + 38%, 94.4% { + transform: scaleX(1.08) scaleY(0.92); + } +} + +@keyframes dog-bounce { + 6.3%, 11.2%, 14.4%, 16%, 48%, 52.4%, 55.6%, 57.2%, 62.8%, 67.2%, 70.8%, 72.4% { + transform: scaleX(1) scaleY(1); + } + 8.8%, 50.4%, 65.6% { + transform: scaleX(1.15) scaleY(0.85) translateY(5px); + } + 14.8%, 56%, 71.2% { + transform: scaleX(1.1) scaleY(0.9) translateY(10px); + } + 16.4%, 72.8% { + transform: scaleX(0.95) scaleY(1.05); + } + 18.4%, 22%, 26%, 30%, 34%, 74.4%, 78.4%, 82.4%, 86.4%, 90.4% { + transform: scaleX(1.04) scaleY(0.96); + } + 20%, 24%, 28%, 32%, 36%, 40%, 76.4%, 80.4%, 84.4%, 88.4%, 92.4%, 96.4% { + transform: scaleX(1) scaleY(1); + } + 38%, 94.4% { + transform: scaleX(1.08) scaleY(0.92); + } +} + +@-webkit-keyframes dog-jump { + 10.4%, 71.2% { + transform: translateX(0px) translateY(0px); + } + 10.8%, 70.4% { + transform: translateY(-15px); + } + 11.2%, 69.6% { + transform: translateX(-4px) translateY(-22px); + } + 11.6%, 69.2% { + transform: translateX(-8px) translateY(-28px); + } + 12%, 68.8% { + transform: translateX(-12px) translateY(-30px); + } + 12.4%, 68.4% { + transform: translateX(-16px) translateY(-28px); + } + 12.8%, 68% { + transform: translateX(-20px) translateY(-25px); + } + 13.2%, 67.6% { + transform: translateX(-24px) translateY(-20px); + } + 13.6%, 67.2% { + transform: translateX(-28px) translateY(-10px); + } + 14.8%, 51.6%, 55.2%, 66.8% { + transform: translateX(-32px) translateY(0px); + } + 52%, 53.6% { + transform: translateX(-32px) translateY(-10px); + } +} + +@keyframes dog-jump { + 10.4%, 71.2% { + transform: translateX(0px) translateY(0px); + } + 10.8%, 70.4% { + transform: translateY(-15px); + } + 11.2%, 69.6% { + transform: translateX(-4px) translateY(-22px); + } + 11.6%, 69.2% { + transform: translateX(-8px) translateY(-28px); + } + 12%, 68.8% { + transform: translateX(-12px) translateY(-30px); + } + 12.4%, 68.4% { + transform: translateX(-16px) translateY(-28px); + } + 12.8%, 68% { + transform: translateX(-20px) translateY(-25px); + } + 13.2%, 67.6% { + transform: translateX(-24px) translateY(-20px); + } + 13.6%, 67.2% { + transform: translateX(-28px) translateY(-10px); + } + 14.8%, 51.6%, 55.2%, 66.8% { + transform: translateX(-32px) translateY(0px); + } + 52%, 53.6% { + transform: translateX(-32px) translateY(-10px); + } +} + +@-webkit-keyframes dog-head { + 10.4%, 51.2%, 71.2% { + transform: translateX(0px) translateY(0px); + } + 11.6%, 13.6%, 70.4% { + transform: translateY(-15px); + } + 14.8%, 55.6%, 66.8% { + transform: translateY(0px); + } + 53.2%, 54.4% { + transform: translateY(-15px); + } +} + +@keyframes dog-head { + 10.4%, 51.2%, 71.2% { + transform: translateX(0px) translateY(0px); + } + 11.6%, 13.6%, 70.4% { + transform: translateY(-15px); + } + 14.8%, 55.6%, 66.8% { + transform: translateY(0px); + } + 53.2%, 54.4% { + transform: translateY(-15px); + } +} + +@-webkit-keyframes blue-shape { + 10.4%, 51.2%, 71.2% { + transform: translateX(0px) translateY(0px); + } + 11.6%, 13.6%, 70.4% { + transform: translateY(-15px); + } + 14.8%, 55.6%, 66.8% { + transform: translateY(0px); + } + 53.2%, 54.4% { + transform: translateY(-15px); + } +} + +@keyframes blue-shape { + 10.4%, 51.2%, 71.2% { + transform: translateX(0px) translateY(0px); + } + 11.6%, 13.6%, 70.4% { + transform: translateY(-15px); + } + 14.8%, 55.6%, 66.8% { + transform: translateY(0px); + } + 53.2%, 54.4% { + transform: translateY(-15px); + } +} + +@-webkit-keyframes eyeMove { + 0%, 10.4%, 14%, 18.4%, 25.2%, 30.4%, 37.6%, 51.2%, 57.2%, 66.8%, 71.2%, 74.8%, 81.6%, 86.8%, 96% { + transform: translate(0px, 0px) rotate(0deg) scale(1); + } + 10.8%, 13.6%, 67.2%, 70.4% { + transform: translate(0px, -2px); + } + 18.8%, 24.8%, 30.8%, 37%, 75.2%, 81.2%, 87.2%, 94% { + transform: translate(2px, 0px) rotate(2deg); + } + 51.6%, 56.8% { + transform: scale(1.1); + } +} + +@keyframes eyeMove { + 0%, 10.4%, 14%, 18.4%, 25.2%, 30.4%, 37.6%, 51.2%, 57.2%, 66.8%, 71.2%, 74.8%, 81.6%, 86.8%, 96% { + transform: translate(0px, 0px) rotate(0deg) scale(1); + } + 10.8%, 13.6%, 67.2%, 70.4% { + transform: translate(0px, -2px); + } + 18.8%, 24.8%, 30.8%, 37%, 75.2%, 81.2%, 87.2%, 94% { + transform: translate(2px, 0px) rotate(2deg); + } + 51.6%, 56.8% { + transform: scale(1.1); + } +} + +@-webkit-keyframes eyeWink { + 0%, 8.4%, 10.8%, 13.2%, 16.4%, 36.4%, 42%, 52%, 56.4%, 64.4%, 67.2%, 69.2%, 72.8%, 93.2%, 98% { + width: 32px; + height: 32px; + border-radius: 50%; + background-color: #fff; + bottom: 0; + } + 8.8%, 9.6%, 14.8%, 15.2%, 36.7%, 40.4%, 53.2%, 54.8%, 65.2%, 66.2%, 71%, 72%, 94%, 96.8% { + height: 3px; + width: 27px; + border-radius: 2px; + background-color: #421163; + bottom: 35%; + } +} + +@keyframes eyeWink { + 0%, 8.4%, 10.8%, 13.2%, 16.4%, 36.4%, 42%, 52%, 56.4%, 64.4%, 67.2%, 69.2%, 72.8%, 93.2%, 98% { + width: 32px; + height: 32px; + border-radius: 50%; + background-color: #fff; + bottom: 0; + } + 8.8%, 9.6%, 14.8%, 15.2%, 36.7%, 40.4%, 53.2%, 54.8%, 65.2%, 66.2%, 71%, 72%, 94%, 96.8% { + height: 3px; + width: 27px; + border-radius: 2px; + background-color: #421163; + bottom: 35%; + } +} + +@-webkit-keyframes eyeWink2 { + 0%, 8%, 10.4%, 12.8%, 16%, 36%, 41.6%, 51.6%, 56%, 64%, 66.8%, 68.8%, 72.4%, 92.8%, 97.6% { + opacity: 1; + } + 8.4%, 9.6%, 14.4%, 15.2%, 36.7%, 40.4%, 53.2%, 54.8%, 65.2%, 66.2%, 71%, 72%, 94%, 96.8% { + opacity: 0; + } +} + +@keyframes eyeWink2 { + 0%, 8%, 10.4%, 12.8%, 16%, 36%, 41.6%, 51.6%, 56%, 64%, 66.8%, 68.8%, 72.4%, 92.8%, 97.6% { + opacity: 1; + } + 8.4%, 9.6%, 14.4%, 15.2%, 36.7%, 40.4%, 53.2%, 54.8%, 65.2%, 66.2%, 71%, 72%, 94%, 96.8% { + opacity: 0; + } +} + +@-webkit-keyframes earLeft { + 10.8%, 17.2%, 20.8%, 24.4%, 25.2%, 28.4%, 29.2%, 32.4%, 33.2%, 36.4%, 52.4%, 58.4%, 59.2%, 62%, 67.6%, 73.6%, 76.8%, 77.2%, 80.8%, 81.2%, 84.8%, 85.2%, 88.8%, 89.2%, 92.8% { + transform: rotateX(50deg); + } + 14.4%, 54.4%, 55.6%, 68.8%, 70.8% { + transform: rotateX(-20deg) scaleY(0.8); + } + 14.8%, 15.6%, 56%, 56.8%, 71.2%, 72% { + transform: rotateX(130deg); + } + 18.8%, 22.8%, 26.8%, 30.8%, 34.8%, 60%, 75.2%, 79.2%, 83.2%, 87.2%, 91.2% { + transform: rotateX(70deg); + } +} + +@keyframes earLeft { + 10.8%, 17.2%, 20.8%, 24.4%, 25.2%, 28.4%, 29.2%, 32.4%, 33.2%, 36.4%, 52.4%, 58.4%, 59.2%, 62%, 67.6%, 73.6%, 76.8%, 77.2%, 80.8%, 81.2%, 84.8%, 85.2%, 88.8%, 89.2%, 92.8% { + transform: rotateX(50deg); + } + 14.4%, 54.4%, 55.6%, 68.8%, 70.8% { + transform: rotateX(-20deg) scaleY(0.8); + } + 14.8%, 15.6%, 56%, 56.8%, 71.2%, 72% { + transform: rotateX(130deg); + } + 18.8%, 22.8%, 26.8%, 30.8%, 34.8%, 60%, 75.2%, 79.2%, 83.2%, 87.2%, 91.2% { + transform: rotateX(70deg); + } +} + +@-webkit-keyframes earRight { + 10.8%, 17.2%, 20.8%, 24.4%, 25.2%, 28.4%, 29.2%, 32.4%, 33.2%, 36.4%, 52.4%, 58.4%, 59.2%, 62%, 67.6%, 73.6%, 76.8%, 77.2%, 80.8%, 81.2%, 84.8%, 85.2%, 88.8%, 89.2%, 92.8% { + transform: rotateX(-50deg); + } + 14.4%, 54.4%, 55.6%, 68.8%, 70.8% { + transform: rotateX(20deg) scaleY(0.8); + } + 14.8%, 15.6%, 56%, 56.8%, 71.2%, 72% { + transform: rotateX(-130deg); + } + 18.8%, 22.8%, 26.8%, 30.8%, 34.8%, 60%, 75.2%, 79.2%, 83.2%, 87.2%, 91.2% { + transform: rotateX(-70deg); + } +} + +@keyframes earRight { + 10.8%, 17.2%, 20.8%, 24.4%, 25.2%, 28.4%, 29.2%, 32.4%, 33.2%, 36.4%, 52.4%, 58.4%, 59.2%, 62%, 67.6%, 73.6%, 76.8%, 77.2%, 80.8%, 81.2%, 84.8%, 85.2%, 88.8%, 89.2%, 92.8% { + transform: rotateX(-50deg); + } + 14.4%, 54.4%, 55.6%, 68.8%, 70.8% { + transform: rotateX(20deg) scaleY(0.8); + } + 14.8%, 15.6%, 56%, 56.8%, 71.2%, 72% { + transform: rotateX(-130deg); + } + 18.8%, 22.8%, 26.8%, 30.8%, 34.8%, 60%, 75.2%, 79.2%, 83.2%, 87.2%, 91.2% { + transform: rotateX(-70deg); + } +} + +@-webkit-keyframes shadows { + 10.4%, 14.8%, 51.6%, 55.6%, 66.8%, 71.2% { + opacity: 1; + } + 10.8%, 14.4%, 52%, 54.8%, 67.2%, 70.8% { + opacity: 0; + } +} + +@keyframes shadows { + 10.4%, 14.8%, 51.6%, 55.6%, 66.8%, 71.2% { + opacity: 1; + } + 10.8%, 14.4%, 52%, 54.8%, 67.2%, 70.8% { + opacity: 0; + } +} + +@-webkit-keyframes mouthClose { + 17.2%, 37.2%, 50%, 56.2%, 73.6%, 93.6% { + opacity: 1; + } + 17.6%, 36.8%, 52.4%, 55.8%, 74%, 93.2% { + opacity: 0; + } +} + +@keyframes mouthClose { + 17.2%, 37.2%, 50%, 56.2%, 73.6%, 93.6% { + opacity: 1; + } + 17.6%, 36.8%, 52.4%, 55.8%, 74%, 93.2% { + opacity: 0; + } +} + +@-webkit-keyframes mouthBarks { + 50%, 57.2% { + opacity: 0; + } + 50.4%, 56.8% { + opacity: 1; + transform: scale(0); + } + 53%, 54.2% { + opacity: 1; + transform: scale(1.1); + } +} + +@keyframes mouthBarks { + 50%, 57.2% { + opacity: 0; + } + 50.4%, 56.8% { + opacity: 1; + transform: scale(0); + } + 53%, 54.2% { + opacity: 1; + transform: scale(1.1); + } +} + +@-webkit-keyframes nose { + 50%, 57.2% { + transform: translateY(0px); + } + 53% { + transform: translateY(-4px); + } +} + +@keyframes nose { + 50%, 57.2% { + transform: translateY(0px); + } + 53% { + transform: translateY(-4px); + } +} + +@-webkit-keyframes mouthOpen { + 17.2%, 37.2%, 73.6%, 93.6% { + opacity: 0; + } + 17.6%, 36.8%, 74%, 93.2% { + opacity: 1; + } +} + +@keyframes mouthOpen { + 17.2%, 37.2%, 73.6%, 93.6% { + opacity: 0; + } + 17.6%, 36.8%, 74%, 93.2% { + opacity: 1; + } +} + +@-webkit-keyframes tongue { + 0%, 17.2%, 37.2%, 73.6%, 93.6%, 100% { + opacity: 0; + } + 17.6%, 36.8% { + opacity: 1; + } + 19.2%, 22%, 24%, 26.4%, 28.4%, 30.8%, 32.8%, 35.6%, 75.6%, 78.4%, 80.4%, 82.8%, 84.8%, 87.2%, 89.2%, 92% { + transform: scaleY(2.7); + } + 20.8%, 23.2%, 25.2%, 27.6%, 29.6%, 32%, 34%, 74.8%, 77.2%, 79.6%, 81.6%, 84%, 86%, 88.4%, 90.4% { + transform: scaleY(1.7); + } + 74%, 93.2% { + opacity: 1; + } +} + +@keyframes tongue { + 0%, 17.2%, 37.2%, 73.6%, 93.6%, 100% { + opacity: 0; + } + 17.6%, 36.8% { + opacity: 1; + } + 19.2%, 22%, 24%, 26.4%, 28.4%, 30.8%, 32.8%, 35.6%, 75.6%, 78.4%, 80.4%, 82.8%, 84.8%, 87.2%, 89.2%, 92% { + transform: scaleY(2.7); + } + 20.8%, 23.2%, 25.2%, 27.6%, 29.6%, 32%, 34%, 74.8%, 77.2%, 79.6%, 81.6%, 84%, 86%, 88.4%, 90.4% { + transform: scaleY(1.7); + } + 74%, 93.2% { + opacity: 1; + } +} + +@-webkit-keyframes tail { + 17.2%, 38.4%, 73.6%, 94.8% { + transform: rotate(0deg); + } + 18.8%, 22.8%, 24.8%, 26.4%, 28.4%, 30.4%, 32.4%, 34.4%, 36.4%, 75.2%, 78.8%, 80.8%, 82.8%, 84.8%, 86.8%, 88.8%, 90.8%, 92.8% { + transform: rotate(12deg); + } + 21.2%, 21.6%, 23.6%, 25.6%, 27.2%, 29.6%, 31.6%, 33.6%, 35.6%, 37.6%, 77.6%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94% { + transform: rotate(-12deg); + } +} + +@keyframes tail { + 17.2%, 38.4%, 73.6%, 94.8% { + transform: rotate(0deg); + } + 18.8%, 22.8%, 24.8%, 26.4%, 28.4%, 30.4%, 32.4%, 34.4%, 36.4%, 75.2%, 78.8%, 80.8%, 82.8%, 84.8%, 86.8%, 88.8%, 90.8%, 92.8% { + transform: rotate(12deg); + } + 21.2%, 21.6%, 23.6%, 25.6%, 27.2%, 29.6%, 31.6%, 33.6%, 35.6%, 37.6%, 77.6%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94% { + transform: rotate(-12deg); + } +} + +@-webkit-keyframes tailGroup { + 10.4%, 14.4%, 17.2%, 38.4%, 51.2%, 55.6%, 66.8%, 70.8%, 73.6%, 94.8% { + transform: rotate(25deg) translateX(0px) translateY(0px); + } + 18.8%, 22.8%, 24.8%, 26.4%, 28.4%, 30.4%, 32.4%, 34.4%, 36.4%, 75.2%, 78.8%, 80.8%, 82.8%, 84.8%, 86.8%, 88.8%, 90.8%, 92.8% { + transform: rotate(-10deg) translateX(-15px); + } + 21.2%, 21.6%, 23.6%, 25.6%, 27.2%, 29.6%, 31.6%, 33.6%, 35.6%, 37.6%, 77.6%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94% { + transform: rotate(50deg) translateX(15px); + } + 13.2%, 54%, 69.2% { + transform: rotate(5deg) translateY(-30px) translateX(-5px); + } +} + +@keyframes tailGroup { + 10.4%, 14.4%, 17.2%, 38.4%, 51.2%, 55.6%, 66.8%, 70.8%, 73.6%, 94.8% { + transform: rotate(25deg) translateX(0px) translateY(0px); + } + 18.8%, 22.8%, 24.8%, 26.4%, 28.4%, 30.4%, 32.4%, 34.4%, 36.4%, 75.2%, 78.8%, 80.8%, 82.8%, 84.8%, 86.8%, 88.8%, 90.8%, 92.8% { + transform: rotate(-10deg) translateX(-15px); + } + 21.2%, 21.6%, 23.6%, 25.6%, 27.2%, 29.6%, 31.6%, 33.6%, 35.6%, 37.6%, 77.6%, 78%, 80%, 82%, 84%, 86%, 88%, 90%, 92%, 94% { + transform: rotate(50deg) translateX(15px); + } + 13.2%, 54%, 69.2% { + transform: rotate(5deg) translateY(-30px) translateX(-5px); + } +} + +@keyframes blue-shape { + 10.4%, 14.8%, 38%, 51.2%, 55.6%, 66.8%, 71.2%, 94.4% { + transform: translateX(0px) translateY(0px); + box-shadow: 6px 10px 0 #a53942; + } + 11.6%, 13.6%, 53.2%, 54.4%, 70.4% { + transform: translateY(-15px); + box-shadow: none; + } + 18.8%, 37.6%, 75.2%, 94% { + box-shadow: none; + } +} diff --git a/src/components/DynamicTitle/DynamicTitle.vue b/src/components/DynamicTitle/DynamicTitle.vue new file mode 100644 index 0000000..c1a1d8b --- /dev/null +++ b/src/components/DynamicTitle/DynamicTitle.vue @@ -0,0 +1,19 @@ + + + + + diff --git a/src/components/DynamicTitle/fonts.scss b/src/components/DynamicTitle/fonts.scss new file mode 100644 index 0000000..4d8f888 --- /dev/null +++ b/src/components/DynamicTitle/fonts.scss @@ -0,0 +1,80 @@ +/* vietnamese */ +@font-face { + font-family: 'Signika'; + font-style: normal; + font-weight: 300; + src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA.woff2") format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'Signika'; + font-style: normal; + font-weight: 300; + src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA.woff2") format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'Signika'; + font-style: normal; + font-weight: 300; + src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2") format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* vietnamese */ +@font-face { + font-family: 'Signika'; + font-style: normal; + font-weight: 600; + src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA.woff2") format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'Signika'; + font-style: normal; + font-weight: 600; + src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA.woff2") format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'Signika'; + font-style: normal; + font-weight: 600; + src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2") format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} + +/* vietnamese */ +@font-face { + font-family: 'Signika'; + font-style: normal; + font-weight: 700; + src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bOjM7sfA.woff2") format('woff2'); + unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; +} + +/* latin-ext */ +@font-face { + font-family: 'Signika'; + font-style: normal; + font-weight: 700; + src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bPjM7sfA.woff2") format('woff2'); + unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; +} + +/* latin */ +@font-face { + font-family: 'Signika'; + font-style: normal; + font-weight: 700; + src: url("@/assets/fonts/vEFO2_JTCgwQ5ejvMV0Ox_Kg1UwJ0tKfX6bBjM4.woff2") format('woff2'); + unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; +} diff --git a/src/components/DynamicTitle/index.scss b/src/components/DynamicTitle/index.scss new file mode 100644 index 0000000..a8f5b15 --- /dev/null +++ b/src/components/DynamicTitle/index.scss @@ -0,0 +1,155 @@ +@import url("fonts.scss"); + + +h1 { + font-size: 5em; + font: bold 2.5vw/1.6 'Signika', sans-serif; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +h1 span { + display: inline-block; + -webkit-animation: float .2s ease-in-out infinite; + animation: float .2s ease-in-out infinite; +} + +@-webkit-keyframes float { + 0%, 100% { + transform: none; + } + 33% { + transform: translateY(-1px) rotate(-2deg); + } + 66% { + transform: translateY(1px) rotate(2deg); + } +} + +@keyframes float { + 0%, 100% { + transform: none; + } + 33% { + transform: translateY(-1px) rotate(-2deg); + } + 66% { + transform: translateY(1px) rotate(2deg); + } +} + +body:hover span { + -webkit-animation: bounce .6s; + animation: bounce .6s; +} + +@-webkit-keyframes bounce { + 0%, 100% { + transform: translate(0); + } + 25% { + transform: rotateX(20deg) translateY(2px) rotate(-3deg); + } + 50% { + transform: translateY(-20px) rotate(3deg) scale(1.1); + } +} + +@keyframes bounce { + 0%, 100% { + transform: translate(0); + } + 25% { + transform: rotateX(20deg) translateY(2px) rotate(-3deg); + } + 50% { + transform: translateY(-20px) rotate(3deg) scale(1.1); + } +} + +span:nth-child(4n) { + color: hsl(50, 75%, 55%); + text-shadow: 1px 1px hsl(50, 75%, 45%), 2px 2px hsl(50, 45%, 45%), 3px 3px hsl(50, 45%, 45%), 4px 4px hsl(50, 75%, 45%); +} + +span:nth-child(4n-1) { + color: hsl(135, 35%, 55%); + text-shadow: 1px 1px hsl(135, 35%, 45%), 2px 2px hsl(135, 35%, 45%), 3px 3px hsl(135, 35%, 45%), 4px 4px hsl(135, 35%, 45%); +} + +span:nth-child(4n-2) { + color: hsl(155, 35%, 60%); + text-shadow: 1px 1px hsl(155, 25%, 50%), 2px 2px hsl(155, 25%, 50%), 3px 3px hsl(155, 25%, 50%), 4px 4px hsl(140, 25%, 50%); +} + +span:nth-child(4n-3) { + color: hsl(30, 65%, 60%); + text-shadow: 1px 1px hsl(30, 45%, 50%), 2px 2px hsl(30, 45%, 50%), 3px 3px hsl(30, 45%, 50%), 4px 4px hsl(30, 45%, 50%); +} + +h1 span:nth-child(2) { + -webkit-animation-delay: .05s; + animation-delay: .05s; +} + +h1 span:nth-child(3) { + -webkit-animation-delay: .1s; + animation-delay: .1s; +} + +h1 span:nth-child(4) { + -webkit-animation-delay: .15s; + animation-delay: .15s; +} + +h1 span:nth-child(5) { + -webkit-animation-delay: .2s; + animation-delay: .2s; +} + +h1 span:nth-child(6) { + -webkit-animation-delay: .25s; + animation-delay: .25s; +} + +h1 span:nth-child(7) { + -webkit-animation-delay: .3s; + animation-delay: .3s; +} + +h1 span:nth-child(8) { + -webkit-animation-delay: .35s; + animation-delay: .35s; +} + +h1 span:nth-child(9) { + -webkit-animation-delay: .4s; + animation-delay: .4s; +} + +h1 span:nth-child(10) { + -webkit-animation-delay: .45s; + animation-delay: .45s; +} + +h1 span:nth-child(11) { + -webkit-animation-delay: .5s; + animation-delay: .5s; +} + +h1 span:nth-child(12) { + -webkit-animation-delay: .55s; + animation-delay: .55s; +} + +h1 span:nth-child(13) { + -webkit-animation-delay: .6s; + animation-delay: .6s; +} + +h1 span:nth-child(14) { + -webkit-animation-delay: .65s; + animation-delay: .65s; +} diff --git a/src/locales/index.ts b/src/locales/index.ts index d13c2cd..aeb9b67 100644 --- a/src/locales/index.ts +++ b/src/locales/index.ts @@ -2,6 +2,7 @@ import {createI18n} from 'vue-i18n'; import zh from './language/zh.ts'; import en from './language/en.ts'; +import {parse} from "zipson/lib"; const messages = { en, @@ -9,12 +10,14 @@ const messages = { }; -const language = (navigator.language || 'en').toLocaleLowerCase(); // 这是获取浏览器的语言 -const i18n = createI18n({ +const language: string = (navigator.language || 'en').toLocaleLowerCase(); // 获取浏览器的语言 +const lang: string = localStorage.getItem("lang") as string; +const i18n: any = createI18n({ legacy: false, + compositionOnly: false, globalInjection: true, silentTranslationWarn: true, - locale: JSON.parse(localStorage.getItem("lang") as string).lang || language.split('-')[0] || 'zh', // 首先从缓存里拿，没有的话就用浏览器语言， + locale: parse(lang).lang || language.split('-')[0] || 'zh', // 首先从缓存里拿，没有的话就用浏览器语言， silentFallbackWarn: true, missingWarn: true, fallbackWarn: false, diff --git a/src/locales/language/en.ts b/src/locales/language/en.ts index 47d51ec..db59b39 100644 --- a/src/locales/language/en.ts +++ b/src/locales/language/en.ts @@ -1,6 +1,40 @@ // en.ts export default { login: { - test: 'login', + title: 'Schisandra Cloud Album', + accountLogin: 'account login', + account: 'account', + accountValidate: "please enter your phone/account/email", + password: 'password', + passwordValidate: "please enter password", + autoLogin: "auto login", + forgotPassword: "forgot password", + loginAndRegister: "login/Register", + qrLogin: "QR login", + phoneLogin: "phone login", + phone: "phone number", + phoneValidate: 'please enter a valid phone number', + captchaValidate: 'please enter captcha number', + phoneCaptcha: "captcha", + sendCaptcha: "send captcha", + login: "login", + register: "register", + reSendCaptcha: " re-send", + passwordRule: "The password must be 6~18 characters and must contain letters, numbers and special symbols!" + }, + error: { + networkError: 'Network error, please try again later', + 400: 'request error (400)', + 401: 'request unauthorized (401)', + 403: 'request forbidden (403)', + 404: 'request not found (404)', + 408: 'request timeout (408)', + 500: 'server error (500)', + 501: 'not implemented (501)', + 502: 'bad gateway (502)', + 503: 'service unavailable (503)', + 504: 'gateway timeout (504)', + 505: 'http version not supported (505)', + other: 'connect error', } }; diff --git a/src/locales/language/zh.ts b/src/locales/language/zh.ts index 485f3df..8dc8002 100644 --- a/src/locales/language/zh.ts +++ b/src/locales/language/zh.ts @@ -1,9 +1,41 @@ // zh.ts export default { - login: { - test: '登录', + title: '五味子云存储', + accountLogin: '账号登录', + account: '账号', + accountValidate: '请输入手机号/账号/邮箱', + password: "密码", + passwordValidate: "请输入密码", + autoLogin: "自动登录", + forgotPassword: "忘记密码", + loginAndRegister: "登录", + qrLogin: "扫码登录", + phoneLogin: "短信登录", + phone: "手机号", + phoneValidate: '请输入正确的手机号', + captchaValidate: '请输入验证码', + phoneCaptcha: "验证码", + sendCaptcha: "发送验证码", + login: "登录", + register: "注册", + reSendCaptcha: "重新发送", + passwordRule: "密码要6~18位字符，且必须包含字母、数字和特殊符号！" + }, + error: { + networkError: '网络连接失败！', + 400: '请求错误(400)', + 401: '未授权，请重新登录(401)', + 403: '拒绝访问(403)', + 404: '请求出错(404)', + 408: '请求超时(408)', + 500: '服务器错误(500)', + 501: '服务未实现(501)', + 502: '网关错误(502)', + 503: '服务不可用(503)', + 504: '网关超时(504)', + 505: 'HTTP版本不受支持(505)', + other: '连接出错', + } - - }; diff --git a/src/router/modules/login.ts b/src/router/modules/login.ts index 8c6abe2..a760cf9 100644 --- a/src/router/modules/login.ts +++ b/src/router/modules/login.ts @@ -1,6 +1,6 @@ export default [ { - path: '/', + path: '/login', name: 'login', component: () => import('@/views/Login/LoginPage.vue'), meta: { diff --git a/src/router/modules/register.ts b/src/router/modules/register.ts new file mode 100644 index 0000000..c3748da --- /dev/null +++ b/src/router/modules/register.ts @@ -0,0 +1,11 @@ +export default [ + { + path: '/register', + name: 'register', + component: () => import('@/views/Register/RegisterPage.vue'), + meta: { + requiresAuth: false, + title: '注册页' + } + } +]; diff --git a/src/router/modules/testI18n.ts b/src/router/modules/testI18n.ts new file mode 100644 index 0000000..3d3cf07 --- /dev/null +++ b/src/router/modules/testI18n.ts @@ -0,0 +1,11 @@ +export default [ + { + path: '/test2', + name: 'test2', + component: () => import('@/views/TestI18n.vue'), + meta: { + requiresAuth: false, + title: '测试' + } + } +]; diff --git a/src/router/router.ts b/src/router/router.ts index 3bb1834..280d33a 100644 --- a/src/router/router.ts +++ b/src/router/router.ts @@ -3,15 +3,18 @@ import {createRouter, createWebHistory, Router, RouteRecordRaw} from 'vue-router'; import login from './modules/login'; import test from "@/router/modules/test.ts"; +import test2 from "@/router/modules/testI18n.ts"; import useStore from "@/store"; import {message} from "ant-design-vue"; import {close, start} from '@/utils/nprogress/nprogress.ts'; +import register from "@/router/modules/register.ts"; const routes: Array = [ ...login, - ...test - + ...register, + ...test, + ...test2, ]; const router: Router = createRouter({ diff --git a/src/store/modules/langStore.ts b/src/store/modules/langStore.ts index 2c4e002..fa5748f 100644 --- a/src/store/modules/langStore.ts +++ b/src/store/modules/langStore.ts @@ -1,11 +1,12 @@ import {defineStore} from 'pinia'; import {ref} from 'vue'; import pinia from "@/store/pinia.ts"; +import {parse, stringify} from "zipson/lib"; export const langStore = defineStore( 'lang', () => { - const lang = ref(''); + const lang = ref('zh'); function setLang(value: string) { lang.value = value; @@ -23,11 +24,14 @@ export const langStore = defineStore( }, { // 开启数据持久化 - persistedState: { + persist: { key: 'lang', storage: localStorage, - includePaths: ["lang"], - overwrite: true, + paths: ["lang"], + serializer: { + deserialize: parse, + serialize: stringify, + }, } } ); diff --git a/src/store/modules/themeStore.ts b/src/store/modules/themeStore.ts index 677e29d..b4edcbf 100644 --- a/src/store/modules/themeStore.ts +++ b/src/store/modules/themeStore.ts @@ -2,6 +2,7 @@ import {defineStore} from 'pinia'; import {computed, ref} from 'vue'; import {theme} from 'ant-design-vue'; import variables from '@/assets/styles/colors.module.scss'; +import {parse, stringify} from "zipson/lib"; /** * theme 配置 开启持久化 @@ -21,6 +22,7 @@ export const useThemeStore = defineStore( return { token: { colorPrimary: variables[themeName.value] || '#27ba9b', + borderRadius: 10, colorSuccess: '#1dc779', colorWarning: '#ffb302', colorError: '#cf4444', @@ -39,11 +41,14 @@ export const useThemeStore = defineStore( return {themeName, themeConfig, darkMode, darkModeComp, setThemeName, toggleDarkMode}; }, { - persistedState: { + persist: { key: 'theme', storage: localStorage, - includePaths: ["themeName", "darkMode"], - overwrite: true, + paths: ["themeName", "darkMode"], + serializer: { + deserialize: parse, + serialize: stringify, + }, } } ); diff --git a/src/store/modules/userStore.ts b/src/store/modules/userStore.ts index 425169e..a9503e2 100644 --- a/src/store/modules/userStore.ts +++ b/src/store/modules/userStore.ts @@ -1,6 +1,7 @@ import {defineStore} from 'pinia'; import {ref} from 'vue'; import {User} from "@/types/user"; +import {parse, stringify} from "zipson/lib"; export const useAuthStore = defineStore( @@ -29,11 +30,14 @@ export const useAuthStore = defineStore( }, { // 开启数据持久化 - persistedState: { + persist: { key: 'user', storage: localStorage, - includePaths: ["user"], - overwrite: true, + paths: ["user"], + serializer: { + deserialize: parse, + serialize: stringify, + }, } } ); diff --git a/src/store/pinia.ts b/src/store/pinia.ts index 36181fa..73aa41e 100644 --- a/src/store/pinia.ts +++ b/src/store/pinia.ts @@ -1,14 +1,9 @@ import {createPinia, Pinia} from "pinia"; -import {createPersistedStatePlugin} from "pinia-plugin-persistedstate-2"; -import stringify from 'json-stringify-safe'; +import piniaPluginPersistedstate from 'pinia-plugin-persistedstate' import {App} from "vue"; const pinia: Pinia = createPinia(); -const installPersistedStatePlugin = createPersistedStatePlugin({ - serialize: (value) => stringify(value), - deserialize: (value) => JSON.parse(value), -}); -pinia.use((context) => installPersistedStatePlugin(context)); +pinia.use(piniaPluginPersistedstate) export function setupStore(app: App) { app.use(pinia); diff --git a/src/types/user.d.ts b/src/types/user.d.ts index f01c3a0..90c5698 100644 --- a/src/types/user.d.ts +++ b/src/types/user.d.ts @@ -1,6 +1,14 @@ - export interface User { token?: string userId?: string } + +export interface AccountLogin { + account?: string + password?: string; +} +export interface PhoneLogin { + phone?: string + captcha?: string; +} diff --git a/src/utils/alova/service.ts b/src/utils/alova/service.ts index 56d6840..12a0507 100644 --- a/src/utils/alova/service.ts +++ b/src/utils/alova/service.ts @@ -7,7 +7,7 @@ import {AxiosError, AxiosResponse} from "axios"; import {message} from "ant-design-vue"; import {localforageStorageAdapter} from "@/utils/alova/adapter/localforageStorageAdapter.ts"; import {handleCode} from "@/utils/errorCode/errorCodeHandler.ts"; - +import i18n from "@/locales"; export const service = createAlova({ timeout: 5000, @@ -19,7 +19,7 @@ export const service = createAlova({ cacheFor: { GET: { mode: 'restore', - expire: 60 * 10 * 1000 + expire: 10 * 1000 }, }, cacheLogger: import.meta.env.VITE_NODE_ENV === 'development', @@ -29,6 +29,8 @@ export const service = createAlova({ const user = useStore().user; method.config.headers.token = user.getUser()?.token; } + const lang = useStore().lang; + method.config.headers['Accept-Language'] = lang.getLang(); }, // 响应拦截器 @@ -46,7 +48,7 @@ export const service = createAlova({ handleCode(response.status); } if (!window.navigator.onLine) { - message.error("网络连接失败").then(); + message.error(i18n.global.t('error.networkError')).then(); return Promise.reject(error); } } diff --git a/src/utils/errorCode/errorCodeHandler.ts b/src/utils/errorCode/errorCodeHandler.ts index 68637b7..7e0cfcd 100644 --- a/src/utils/errorCode/errorCodeHandler.ts +++ b/src/utils/errorCode/errorCodeHandler.ts @@ -1,11 +1,11 @@ import {message} from "ant-design-vue"; - +import i18n from "@/locales"; export function handleCode(code: number): void { switch (code) { case 400: message .open({ - content: "请求错误(400)", + content: i18n.global.t("error.400"), type: "error", }) .then(); @@ -13,7 +13,7 @@ export function handleCode(code: number): void { case 401: message .open({ - content: "未授权，请重新登录(401)", + content: i18n.global.t("error.401"), type: "error", }) .then(); @@ -21,7 +21,7 @@ export function handleCode(code: number): void { case 403: message .open({ - content: "拒绝访问(403)", + content: i18n.global.t("error.403"), type: "error", }) .then(); @@ -29,7 +29,7 @@ export function handleCode(code: number): void { case 404: message .open({ - content: "请求出错(404)", + content: i18n.global.t("error.404"), type: "error", }) .then(); @@ -37,7 +37,7 @@ export function handleCode(code: number): void { case 408: message .open({ - content: "请求超时(408)", + content: i18n.global.t("error.408"), type: "error", }) .then(); @@ -45,7 +45,7 @@ export function handleCode(code: number): void { case 500: message .open({ - content: "服务器错误(500)", + content: i18n.global.t("error.500"), type: "error", }) .then(); @@ -53,7 +53,7 @@ export function handleCode(code: number): void { case 501: message .open({ - content: "服务未实现(501)", + content: i18n.global.t("error.501"), type: "error", }) .then(); @@ -61,7 +61,7 @@ export function handleCode(code: number): void { case 502: message .open({ - content: "网络错误(502)", + content: i18n.global.t("error.502"), type: "error", }) .then(); @@ -69,7 +69,7 @@ export function handleCode(code: number): void { case 503: message .open({ - content: "服务不可用(503)", + content: i18n.global.t("error.503"), type: "error", }) .then(); @@ -77,7 +77,7 @@ export function handleCode(code: number): void { case 504: message .open({ - content: "网络超时(504)", + content: i18n.global.t("error.504"), type: "error", }) .then(); @@ -85,7 +85,7 @@ export function handleCode(code: number): void { case 505: message .open({ - content: "HTTP版本不受支持(505)", + content: i18n.global.t("error.505"), type: "error", }) .then(); @@ -93,7 +93,7 @@ export function handleCode(code: number): void { default: message .open({ - content: `连接出错(${code})!`, + content: i18n.global.t("error.other") + `(${code})`, type: "error", }) .then(); diff --git a/src/views/Login/LoginPage.vue b/src/views/Login/LoginPage.vue index edd893e..18f117d 100644 --- a/src/views/Login/LoginPage.vue +++ b/src/views/Login/LoginPage.vue @@ -1,36 +1,280 @@ diff --git a/src/views/Login/index.scss b/src/views/Login/index.scss index e69de29..3a621a7 100644 --- a/src/views/Login/index.scss +++ b/src/views/Login/index.scss @@ -0,0 +1,91 @@ +.login-main { + display: flex; + flex-direction: row; + //background-color: rgb(238, 255, 238); + width: 100vw; + height: 100vh; + /* 加载背景图 */ + background-image: url("@/assets/images/login-back.png"); + /* 背景图垂直、水平均居中 */ + background-position: center center; + /* 背景图不平铺 */ + background-repeat: no-repeat; + /* 当内容高度大于图片高度时，背景图像的位置相对于viewport固定 */ + background-attachment: fixed; + /* 让背景图基于容器大小伸缩 */ + background-size: cover; + + .login-left { + width: 50%; + } + + .login-right { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + width: 50%; + height: 100%; + + .login-right-title { + font-size: 32px; + font-weight: 600; + margin-bottom: 32px; + } + } + + .login-card { + width: 440px; + height: 490px; + border-radius: 15px; + box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .08); + + .login-card-span { + color: #999ba1; + font-size: 12px; + } + + .login-tab-span { + font-weight: bolder; + font-size: large + } + + .login-form-input { + + } + + .login-form-item { + height: 70px; + } + + .login-form-button { + width: 100%; + } + + .login-right-qrcode { + position: absolute; + right: 0; + top: 0; + background-position: 50%; + background-size: cover; + background-repeat: no-repeat; + width: 72px; + height: 72px; + background-image: url(data:image/png;base64,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); + cursor: pointer; + } + + .login-right-qrcode:hover { + opacity: 0.9; + } + + .login-form-bottom-button { + color: #999ba1; + } + + .login-form-bottom-button:hover { + color: rgba(15, 15, 16, 0.3); + } + } + +} diff --git a/src/views/Register/RegisterPage.vue b/src/views/Register/RegisterPage.vue new file mode 100644 index 0000000..340660c --- /dev/null +++ b/src/views/Register/RegisterPage.vue @@ -0,0 +1,17 @@ + + + + + diff --git a/src/views/Register/index.scss b/src/views/Register/index.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/views/TestI18n.vue b/src/views/TestI18n.vue new file mode 100644 index 0000000..1518489 --- /dev/null +++ b/src/views/TestI18n.vue @@ -0,0 +1,36 @@ + + + diff --git a/src/views/TestTheme.vue b/src/views/TestTheme.vue index d989dc4..e17d435 100644 --- a/src/views/TestTheme.vue +++ b/src/views/TestTheme.vue @@ -17,12 +17,14 @@
test
+