🎨 refactor code & change style
This commit is contained in:
landaiqing
14
components.d.ts
vendored
14
components.d.ts
vendored
@@ -8,6 +8,7 @@ export {}
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
AAvatar: typeof import('ant-design-vue/es')['Avatar']
|
||||
AAvatarGroup: typeof import('ant-design-vue/es')['AvatarGroup']
|
||||
ABadge: typeof import('ant-design-vue/es')['Badge']
|
||||
AButton: typeof import('ant-design-vue/es')['Button']
|
||||
ACard: typeof import('ant-design-vue/es')['Card']
|
||||
@@ -29,11 +30,14 @@ declare module 'vue' {
|
||||
AMenu: typeof import('ant-design-vue/es')['Menu']
|
||||
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
|
||||
AModal: typeof import('ant-design-vue/es')['Modal']
|
||||
AnimatedNature: typeof import('./src/components/AnimatedNature/AnimatedNature.vue')['default']
|
||||
AntDesignOutlined: typeof import('@ant-design/icons-vue')['AntDesignOutlined']
|
||||
APagination: typeof import('ant-design-vue/es')['Pagination']
|
||||
APopover: typeof import('ant-design-vue/es')['Popover']
|
||||
AQrcode: typeof import('ant-design-vue/es')['QRCode']
|
||||
ARadio: typeof import('ant-design-vue/es')['Radio']
|
||||
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
|
||||
ARate: typeof import('ant-design-vue/es')['Rate']
|
||||
ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
|
||||
ASpace: typeof import('ant-design-vue/es')['Space']
|
||||
ASpin: typeof import('ant-design-vue/es')['Spin']
|
||||
@@ -54,12 +58,15 @@ declare module 'vue' {
|
||||
Carousel: typeof import('./src/components/MyUI/Carousel/Carousel.vue')['default']
|
||||
Cascader: typeof import('./src/components/MyUI/Cascader/Cascader.vue')['default']
|
||||
Checkbox: typeof import('./src/components/MyUI/Checkbox/Checkbox.vue')['default']
|
||||
CheckOutlined: typeof import('@ant-design/icons-vue')['CheckOutlined']
|
||||
CloseCircleOutlined: typeof import('@ant-design/icons-vue')['CloseCircleOutlined']
|
||||
Clouds: typeof import('./src/components/Clouds/Clouds.vue')['default']
|
||||
CloudServerOutlined: typeof import('@ant-design/icons-vue')['CloudServerOutlined']
|
||||
Col: typeof import('./src/components/MyUI/Grid/Col.vue')['default']
|
||||
Collapse: typeof import('./src/components/MyUI/Collapse/Collapse.vue')['default']
|
||||
CommentInput: typeof import('./src/components/CommentReply/src/CommentInput/CommentInput.vue')['default']
|
||||
CommentList: typeof import('./src/components/CommentReply/src/CommentList/CommentList.vue')['default']
|
||||
CommentOutlined: typeof import('@ant-design/icons-vue')['CommentOutlined']
|
||||
CommentReply: typeof import('./src/components/CommentReply/index.vue')['default']
|
||||
Countdown: typeof import('./src/components/MyUI/Countdown/Countdown.vue')['default']
|
||||
DatePicker: typeof import('./src/components/MyUI/DatePicker/DatePicker.vue')['default']
|
||||
@@ -72,13 +79,17 @@ declare module 'vue' {
|
||||
Ellipsis: typeof import('./src/components/MyUI/Ellipsis/Ellipsis.vue')['default']
|
||||
Empty: typeof import('./src/components/MyUI/Empty/Empty.vue')['default']
|
||||
EyeOutlined: typeof import('@ant-design/icons-vue')['EyeOutlined']
|
||||
FileImageOutlined: typeof import('@ant-design/icons-vue')['FileImageOutlined']
|
||||
Flex: typeof import('./src/components/MyUI/Flex/Flex.vue')['default']
|
||||
FloatButton: typeof import('./src/components/MyUI/FloatButton/FloatButton.vue')['default']
|
||||
ForgetPage: typeof import('./src/views/Forget/ForgetPage.vue')['default']
|
||||
GaugeChart: typeof import('./src/components/MyUI/GaugeChart/GaugeChart.vue')['default']
|
||||
GiteeOutlined: typeof import('@ant-design/icons-vue')['GiteeOutlined']
|
||||
GithubOutlined: typeof import('@ant-design/icons-vue')['GithubOutlined']
|
||||
GradientText: typeof import('./src/components/MyUI/GradientText/GradientText.vue')['default']
|
||||
Image: typeof import('./src/components/MyUI/Image/Image.vue')['default']
|
||||
ImageHoverEffect: typeof import('./src/components/ImageHoverEffect/imageHoverEffect.vue')['default']
|
||||
ImageOverlaySlider: typeof import('./src/components/ImageOverlaySlider/imageOverlaySlider.vue')['default']
|
||||
Input: typeof import('./src/components/MyUI/Input/Input.vue')['default']
|
||||
InputSearch: typeof import('./src/components/MyUI/InputSearch/InputSearch.vue')['default']
|
||||
LandingPage: typeof import('./src/views/Landing/LandingPage.vue')['default']
|
||||
@@ -95,6 +106,7 @@ declare module 'vue' {
|
||||
Notification: typeof import('./src/components/MyUI/Notification/Notification.vue')['default']
|
||||
NumberAnimation: typeof import('./src/components/MyUI/NumberAnimation/NumberAnimation.vue')['default']
|
||||
Pagination: typeof import('./src/components/MyUI/Pagination/Pagination.vue')['default']
|
||||
PictureOutlined: typeof import('@ant-design/icons-vue')['PictureOutlined']
|
||||
PlusOutlined: typeof import('@ant-design/icons-vue')['PlusOutlined']
|
||||
Popconfirm: typeof import('./src/components/MyUI/Popconfirm/Popconfirm.vue')['default']
|
||||
Popover: typeof import('./src/components/MyUI/Popover/Popover.vue')['default']
|
||||
@@ -123,6 +135,7 @@ declare module 'vue' {
|
||||
Spin: typeof import('./src/components/MyUI/Spin/Spin.vue')['default']
|
||||
Statistic: typeof import('./src/components/MyUI/Statistic/Statistic.vue')['default']
|
||||
Steps: typeof import('./src/components/MyUI/Steps/Steps.vue')['default']
|
||||
SwapOutlined: typeof import('@ant-design/icons-vue')['SwapOutlined']
|
||||
Swiper: typeof import('./src/components/MyUI/Swiper/Swiper.vue')['default']
|
||||
Switch: typeof import('./src/components/MyUI/Switch/Switch.vue')['default']
|
||||
Table: typeof import('./src/components/MyUI/Table/Table.vue')['default']
|
||||
@@ -134,6 +147,7 @@ declare module 'vue' {
|
||||
Timeline: typeof import('./src/components/MyUI/Timeline/Timeline.vue')['default']
|
||||
Tooltip: typeof import('./src/components/MyUI/Tooltip/Tooltip.vue')['default']
|
||||
TreeChart: typeof import('./src/components/MyUI/TreeChart/TreeChart.vue')['default']
|
||||
UngroupOutlined: typeof import('@ant-design/icons-vue')['UngroupOutlined']
|
||||
Upload: typeof import('./src/components/MyUI/Upload/Upload.vue')['default']
|
||||
UserInfoCard: typeof import('./src/components/CommentReply/src/UserInfoCard/UserInfoCard.vue')['default']
|
||||
UserOutlined: typeof import('@ant-design/icons-vue')['UserOutlined']
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/schisandra.svg"/>
|
||||
<link rel="icon" type="image/svg+xml" href="/logo.svg"/>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
|
||||
<title><%- title %></title>
|
||||
</head>
|
||||
|
||||
52
package.json
52
package.json
@@ -5,64 +5,64 @@
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"dev": "vite --mode development --host",
|
||||
"build": "vue-tsc -b && vite build --mode production",
|
||||
"build": "vue-tsc -b --noEmit && vite build --mode production",
|
||||
"preview": "vite preview",
|
||||
"docker-build": "docker build -t schisandra/schisandra-cloud-album-front ."
|
||||
},
|
||||
"dependencies": {
|
||||
"@alova/adapter-axios": "^2.0.9",
|
||||
"@alova/adapter-axios": "^2.0.10",
|
||||
"@ant-design/icons-vue": "^7.0.1",
|
||||
"@tensorflow/tfjs": "^4.22.0",
|
||||
"@types/animejs": "^3.1.12",
|
||||
"@types/crypto-js": "^4.2.2",
|
||||
"@types/json-stringify-safe": "^5.0.3",
|
||||
"@types/node": "^22.8.6",
|
||||
"@types/node": "^22.10.0",
|
||||
"@types/nprogress": "^0.2.3",
|
||||
"@vuepic/vue-datepicker": "^10.0.0",
|
||||
"@vueuse/core": "^11.2.0",
|
||||
"@vueuse/integrations": "^11.2.0",
|
||||
"alova": "^3.1.1",
|
||||
"@vueuse/core": "^11.3.0",
|
||||
"@vueuse/integrations": "^11.3.0",
|
||||
"alova": "^3.2.4",
|
||||
"animejs": "^3.2.2",
|
||||
"ant-design-vue": "^4.2.5",
|
||||
"ant-design-vue": "^4.2.6",
|
||||
"axios": "^1.7.7",
|
||||
"browser-image-compression": "^2.0.2",
|
||||
"buffer": "^6.0.3",
|
||||
"crypto-js": "^4.2.0",
|
||||
"echarts": "^5.5.1",
|
||||
"eslint": "9.13.0",
|
||||
"go-captcha-vue": "^2",
|
||||
"eslint": "9.15.0",
|
||||
"go-captcha-vue": "^2.0.4",
|
||||
"jsencrypt": "^3.3.2",
|
||||
"json-stringify-safe": "^5.0.1",
|
||||
"less": "^4.2.0",
|
||||
"localforage": "^1.10.0",
|
||||
"nprogress": "^0.2.0",
|
||||
"nsfwjs": "^4.2.0",
|
||||
"pinia": "^2.2.5",
|
||||
"pinia-plugin-persistedstate": "^4.1.2",
|
||||
"nsfwjs": "^4.2.1",
|
||||
"pinia": "^2.2.6",
|
||||
"pinia-plugin-persistedstate": "^4.1.3",
|
||||
"qrcode": "^1",
|
||||
"seedrandom": "^3.0.5",
|
||||
"swiper": "^11.1.14",
|
||||
"unplugin-auto-import": "^0.18.3",
|
||||
"swiper": "^11.1.15",
|
||||
"unplugin-auto-import": "^0.18.5",
|
||||
"vite-plugin-compression": "^0.5.1",
|
||||
"vite-plugin-html": "^3.2.2",
|
||||
"vite-plugin-node-polyfills": "^0.22.0",
|
||||
"vue": "^3.5.12",
|
||||
"vue-dompurify-html": "^5.1.0",
|
||||
"vue": "^3.5.13",
|
||||
"vue-dompurify-html": "^5.2.0",
|
||||
"vue-i18n": "^10.0.4",
|
||||
"vue-router": "^4.4.5",
|
||||
"vue-router": "^4.5.0",
|
||||
"ws": "^8.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/js": "^9.13.0",
|
||||
"@vitejs/plugin-vue": "^5.1.4",
|
||||
"eslint-plugin-vue": "^9.30.0",
|
||||
"globals": "^15.11.0",
|
||||
"sass": "^1.80.5",
|
||||
"typescript": "^5.6.3",
|
||||
"typescript-eslint": "^8.12.2",
|
||||
"@eslint/js": "^9.15.0",
|
||||
"@vitejs/plugin-vue": "^5.2.0",
|
||||
"eslint-plugin-vue": "^9.31.0",
|
||||
"globals": "^15.12.0",
|
||||
"sass": "^1.81.0",
|
||||
"typescript": "^5.7.2",
|
||||
"typescript-eslint": "^8.15.0",
|
||||
"unplugin-vue-components": "^0.27.4",
|
||||
"vite": "^5.4.10",
|
||||
"vite-plugin-bundle-obfuscator": "1.2.1",
|
||||
"vite": "^6.0.0",
|
||||
"vite-plugin-bundle-obfuscator": "1.3.1",
|
||||
"vite-plugin-chunk-split": "^0.5.0",
|
||||
"vue-tsc": "^2.1.10"
|
||||
}
|
||||
|
||||
1
public/logo.svg
Normal file
1
public/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1732507570486" class="icon" viewBox="0 0 1086 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10030" width="200" height="200"><path d="M289.190083 761.776309l460.870523 207.44022 306.06281-602.239119-376.480441-171.552617" fill="#FFFEED" p-id="10031"></path><path d="M750.051791 986.851791c-2.424242 0-4.879339-0.502479-7.228651-1.560331l-300.068319-135.065565a17.626446 17.626446 0 0 1-8.841873-23.312396 17.613223 17.613223 0 0 1 23.312396-8.841874l284.738292 128.158678 290.106887-570.842975L767.735537 254.942149a17.630854 17.630854 0 0 1 14.620386-32.088155l281.07989 128.079339a17.630854 17.630854 0 0 1 8.405509 24.030854l-306.06281 602.239119a17.630854 17.630854 0 0 1-15.726721 9.648485z" fill="#E4E4F5" p-id="10032"></path><path d="M97.85124 69.804959h548.055096v657.062259H97.85124z" fill="#DBEAFF" p-id="10033"></path><path d="M645.906336 744.498072H97.85124a17.630854 17.630854 0 0 1-17.630854-17.630854V69.804959a17.630854 17.630854 0 0 1 17.630854-17.630854h548.055096a17.630854 17.630854 0 0 1 17.630854 17.630854v657.062259a17.630854 17.630854 0 0 1-17.630854 17.630854z m-530.424242-35.261708h512.793388V87.435813H115.482094v621.800551z" fill="#6E6E96" p-id="10034"></path><path d="M645.906336 726.86281L272.141047 353.097521 97.85124 527.391736v199.471074z" fill="#DFE2E8" p-id="10035"></path><path d="M455.920661 260.817631m-75.534986 0a75.534986 75.534986 0 1 0 151.069972 0 75.534986 75.534986 0 1 0-151.069972 0Z" fill="#FFCFCF" p-id="10036"></path><path d="M455.920661 353.983471c-51.371901 0-93.170248-41.793939-93.170248-93.16584 0-51.371901 41.793939-93.16584 93.170248-93.16584 51.371901 0 93.16584 41.793939 93.16584 93.16584 0 51.371901-41.793939 93.16584-93.16584 93.16584z m0-151.069972c-31.929477 0-57.90854 25.974656-57.90854 57.904132s25.979063 57.904132 57.90854 57.904132 57.904132-25.979063 57.904132-57.904132-25.974656-57.904132-57.904132-57.904132z" fill="#6E6E96" p-id="10037"></path><path d="M280.418733 365.518457l-174.294215 264.070524v-89.780717z" fill="#FFFFFF" opacity=".52" p-id="10038"></path><path d="M272.141047 353.097521l190.585124 366.188429h183.180165z" fill="#6E6E96" opacity=".15" p-id="10039"></path><path d="M645.906336 744.493664H97.85124a17.630854 17.630854 0 0 1-17.630854-17.630854v-199.471074c0-4.676584 1.855647-9.159229 5.161432-12.465014L259.671625 340.628099a17.630854 17.630854 0 0 1 24.938843 0l373.760882 373.769697a17.617631 17.617631 0 0 1 3.821487 19.208816 17.622039 17.622039 0 0 1-16.286501 10.887052z m-530.424242-35.261708h487.858953L272.141047 378.031956 115.482094 534.699725v174.532231z" fill="#6E6E96" p-id="10040"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
@@ -1,77 +0,0 @@
|
||||
<svg t="1710925923326" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8087"
|
||||
width="200" height="200">
|
||||
<path
|
||||
d="M481.866 554.39C307.518 329.956 137.124 467.312 87.72 516.212c-8.342 8.258-4.326 23.352 8.838 33.298 79.538 60.1 340.138 238.074 393.422 34.128 2.33-8.918-0.66-19.652-8.114-29.248z"
|
||||
fill="#CCC033" p-id="8088"></path>
|
||||
<path
|
||||
d="M481.866 554.388C307.518 329.956 137.124 467.312 87.72 516.212c-5.48 5.424-5.598 13.796-1.32 21.726 78.098-41.21 195.85-57.526 315.466 96.452 7.456 9.598 10.446 20.33 8.116 29.25a207.5 207.5 0 0 1-3.572 12.14c38.236-8.552 68.836-35.732 83.572-92.14 2.328-8.92-0.662-19.654-8.116-29.252z"
|
||||
fill="#99AF17"></path>
|
||||
<path
|
||||
d="M608.99 589.628c107.374 263.132 308.492 176.808 369.252 143.04 10.26-5.702 10.462-21.32 0.468-34.448-60.388-79.32-263.344-320.97-369.648-138.946-4.648 7.96-4.662 19.102-0.072 30.354z"
|
||||
fill="#EACF32" p-id="8090"></path>
|
||||
<path
|
||||
d="M820.558 537.238c-74.148-52.542-155.996-73-211.496 22.036-4.648 7.96-4.664 19.102-0.072 30.354 46.838 114.78 111.512 163.062 174.594 178.224-25.672-20.84-50.152-50.102-71.994-90.258 15.608-16.372 25.21-38.522 25.21-62.93a90.812 90.812 0 0 0-17.646-53.916 135.364 135.364 0 0 0-7.852 7.886c32.054-34.944 70.066-41.51 109.256-31.396z m-128.932 98.73z m17.05 36.168z m-16.4-34.654z m2.712 6.244z m2.65 5.892z m2.686 5.77z m2.722 5.648z m2.786 5.59z m1.73-93.752z m-18.5 26.4z m4.286-6.992z m3.516-5.332z m3.498-4.94z m3.564-4.688z"
|
||||
fill="#CCC033" p-id="8091"></path>
|
||||
<path
|
||||
d="M65.508 873.848C533.44 700.74 756.58 451.128 824.804 362c13.046-17.044 7.766-41.7-11.132-51.876l-0.006-0.004c-15.116-8.14-33.912-4.076-44.27 9.616-55.86 73.84-256.384 304.032-719.526 516.368-10.962 5.026-15.234 18.396-9.188 28.83 4.996 8.622 15.482 12.37 24.826 8.914z"
|
||||
fill="#A56021" p-id="8092"></path>
|
||||
<path d="M494.452 523.422m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF4B34"
|
||||
p-id="8093"></path>
|
||||
<path d="M469.542 645.53m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||
p-id="8094"></path>
|
||||
<path
|
||||
d="M61.034 874.934c455.172-210.888 652.954-437.954 708.36-511.196 10.358-13.692 29.154-17.756 44.27-9.616l0.006 0.004a34.662 34.662 0 0 1 10.486 8.712l0.646-0.838c13.046-17.044 7.766-41.698-11.132-51.876l-0.006-0.004c-15.116-8.14-33.912-4.076-44.27 9.616-55.86 73.84-256.384 304.032-719.526 516.368-10.962 5.026-15.234 18.396-9.188 28.832 4.21 7.262 12.316 11.046 20.354 9.998z"
|
||||
fill="#8C4C17" p-id="8095"></path>
|
||||
<path
|
||||
d="M528.2 528.198c-243.476-146.586-127.232-332.026-84.516-386.866 7.214-9.26 22.676-7.056 34.11 4.84 69.084 71.874 276.624 309.598 80.41 386.626-8.58 3.368-19.592 1.668-30.004-4.6z"
|
||||
fill="#CCC033" p-id="8096"></path>
|
||||
<path d="M479.496 727.3m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||
p-id="8097"></path>
|
||||
<path
|
||||
d="M456.826 708.832c24.952-30.628 65.664-40.844 100.914-28.496a91.066 91.066 0 0 0-20.616-23.774c-39.068-31.828-96.538-25.958-128.366 13.11-31.826 39.068-25.958 96.54 13.11 128.366a91.02 91.02 0 0 0 27.452 15.384c-19.22-32.026-17.446-73.962 7.506-104.59z"
|
||||
fill="#FF4B34" p-id="8098"></path>
|
||||
<path
|
||||
d="M490.916 794.086a12.004 12.004 0 0 1-11.27-7.88 11.998 11.998 0 0 1 7.148-15.392c17.892-6.544 29.342-15.336 34.034-26.128 4.95-11.388 0.736-21.612 0.554-22.042-2.728-6.04-0.014-13.084 6.026-15.812 6.04-2.73 13.176 0.02 15.904 6.06 0.896 1.986 8.51 20.002-0.222 40.774-7.29 17.338-23.456 30.692-48.05 39.688a12.046 12.046 0 0 1-4.124 0.732z"
|
||||
fill="#FF9079" p-id="8099"></path>
|
||||
<path d="M403.212 559.58m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||
p-id="8100"></path>
|
||||
<path
|
||||
d="M375.942 570.134c-14.258-36.844-2.978-77.274 25.202-101.786a91.07 91.07 0 0 0-30.864 6.142c-46.994 18.188-70.348 71.026-52.16 118.022 18.188 46.994 71.028 70.348 118.022 52.16a91.034 91.034 0 0 0 26.958-16.234c-37.34 0.842-72.9-21.462-87.158-58.304z"
|
||||
fill="#FF4B34" p-id="8101"></path>
|
||||
<path
|
||||
d="M456.478 588.782a12 12 0 0 1-11.846-14c3.204-18.978 1.164-33.372-6.064-42.784-7.416-9.656-18.42-11.092-18.528-11.102a12 12 0 0 1 2.246-23.894c2.168 0.204 21.592 2.508 35.316 20.378 11.456 14.916 15.054 35.574 10.694 61.398a12.004 12.004 0 0 1-11.818 10.004z"
|
||||
fill="#FF9079" p-id="8102"></path>
|
||||
<path
|
||||
d="M491.586 160.806a1040.528 1040.528 0 0 0-13.792-14.636c-11.434-11.896-26.898-14.1-34.11-4.838-42.716 54.84-158.958 240.28 84.516 386.866 10.412 6.268 21.424 7.968 30.004 4.6 8.192-3.216 15.664-6.718 22.486-10.47-208.196-131.322-136.172-291.618-89.104-361.522z"
|
||||
fill="#99AF17" p-id="8103"></path>
|
||||
<path d="M605.562 614.662m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||
p-id="8104"></path>
|
||||
<path
|
||||
d="M576.32 614.664c0-39.506 25.112-73.14 60.24-85.83a91.062 91.062 0 0 0-31-5.41c-50.39 0-91.24 40.85-91.24 91.24 0 50.39 40.85 91.24 91.24 91.24 10.886 0 21.322-1.914 31-5.412-35.128-12.69-60.24-46.324-60.24-85.828z"
|
||||
fill="#FF4B34" p-id="8105"></path>
|
||||
<path
|
||||
d="M649.002 661.926a12 12 0 0 1-10.302-18.136c9.74-16.376 13.064-30.422 9.884-41.752-3.356-11.954-13.08-17.222-13.492-17.44-5.93-2.96-8.276-10.134-5.316-16.064 2.958-5.93 10.224-8.306 16.158-5.346 1.95 0.974 19.232 10.132 25.582 31.75 5.3 18.046 1.2 38.61-12.188 61.12a11.992 11.992 0 0 1-10.326 5.868z"
|
||||
fill="#FF9079" p-id="8106"></path>
|
||||
<path d="M378.3 797.142m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||
p-id="8107"></path>
|
||||
<path
|
||||
d="M349.704 791.034c8.252-38.634 39.836-66.28 76.842-71.352a91.028 91.028 0 0 0-29.186-11.768c-49.28-10.526-97.762 20.888-108.288 70.168-10.526 49.278 20.888 97.762 70.168 108.288a91.04 91.04 0 0 0 31.446 1.184c-31.702-19.75-49.234-57.886-40.982-96.52z"
|
||||
fill="#FF4B34" p-id="8108"></path>
|
||||
<path
|
||||
d="M413.426 852.702a12 12 0 0 1-8.802-20.152c12.944-13.98 19.13-27.022 18.388-38.766-0.784-12.392-9.194-19.574-9.55-19.874-5.18-4.134-5.976-11.64-1.842-16.822 4.134-5.18 11.736-5.986 16.918-1.854 1.704 1.358 16.69 13.926 18.384 36.396 1.414 18.756-6.892 38.008-24.686 57.224a11.968 11.968 0 0 1-8.81 3.848z"
|
||||
fill="#FF9079" p-id="8109"></path>
|
||||
<path d="M277.996 678.872m-91.24 0a91.24 91.24 0 1 0 182.48 0 91.24 91.24 0 1 0-182.48 0Z" fill="#FF624B"
|
||||
p-id="8110"></path>
|
||||
<path
|
||||
d="M248.754 678.872c0-39.506 25.112-73.14 60.24-85.83a91.062 91.062 0 0 0-31-5.41c-50.39 0-91.24 40.85-91.24 91.24 0 50.39 40.85 91.24 91.24 91.24 10.886 0 21.322-1.914 31-5.412-35.128-12.688-60.24-46.322-60.24-85.828z"
|
||||
fill="#FF4B34" p-id="8111"></path>
|
||||
<path
|
||||
d="M321.438 726.136a12 12 0 0 1-10.302-18.136c9.738-16.374 13.064-30.422 9.884-41.752-3.356-11.956-13.08-17.222-13.492-17.44-5.93-2.96-8.276-10.136-5.316-16.064 2.96-5.93 10.226-8.306 16.158-5.346 1.95 0.974 19.232 10.132 25.582 31.752 5.3 18.046 1.2 38.61-12.186 61.12a12.006 12.006 0 0 1-10.328 5.866z"
|
||||
fill="#FF9079" p-id="8112"></path>
|
||||
<path d="M557.74 439.404m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" fill="#99AF17" p-id="8113"></path>
|
||||
<path d="M494.478 368.528m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" fill="#99AF17" p-id="8114"></path>
|
||||
<path d="M785.856 674.864m-30 0a30 30 0 1 0 60 0 30 30 0 1 0-60 0Z" fill="#CCC033" p-id="8115"></path>
|
||||
<path
|
||||
d="M927.274 710.09a11.966 11.966 0 0 1-8.664-3.696l-65.998-68.844a12 12 0 0 1 17.324-16.608l65.998 68.844a12 12 0 0 1-8.66 20.304z"
|
||||
fill="#FCE575" p-id="8116"></path>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 7.2 KiB |
BIN
src/assets/images/1.png
Normal file
BIN
src/assets/images/1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 95 KiB |
BIN
src/assets/images/2.png
Normal file
BIN
src/assets/images/2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 85 KiB |
BIN
src/assets/images/3.png
Normal file
BIN
src/assets/images/3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
BIN
src/assets/images/landing_image1.png
Normal file
BIN
src/assets/images/landing_image1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 181 KiB |
BIN
src/assets/images/landing_image2.png
Normal file
BIN
src/assets/images/landing_image2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 150 KiB |
@@ -3,7 +3,7 @@ $orange: #FA541C;
|
||||
$yellow: #FAAD14;
|
||||
$cyan: #13C2C2;
|
||||
$green: #52C41A;
|
||||
$blue: #2F54EB;
|
||||
$blue: rgba(96,165,250,.9);
|
||||
$purple: #722ED1;
|
||||
|
||||
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
--background-color: #ffffff;
|
||||
--text-color: #000000;
|
||||
// 着陆页背景颜色
|
||||
--landing-background-color-main: #b9f187;
|
||||
--landing-background-color-main: rgba(147,197,253,.2);
|
||||
// 评论文字颜色
|
||||
--comment-text-color: #767779;
|
||||
// 评论子评论背景颜色
|
||||
@@ -14,7 +14,7 @@
|
||||
// 举报弹窗文字颜色
|
||||
--comment-report-text-color: rgba(15, 15, 16, 0.58);
|
||||
// 评论框边框颜色
|
||||
--comment-child-box-border-color: #90d952;
|
||||
--comment-child-box-border-color: rgba(147,197,253,.2);
|
||||
|
||||
// 白色
|
||||
--white-color: #ffffff;
|
||||
|
||||
1
src/assets/svgs/icon-qq.svg
Normal file
1
src/assets/svgs/icon-qq.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1732615091180" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6418" width="200" height="200"><path d="M824.8 613.2c-16-51.4-34.4-94.6-62.7-165.3C766.5 262.2 689.3 112 511.5 112 331.7 112 256.2 265.2 261 447.9c-28.4 70.8-46.7 113.7-62.7 165.3-34 109.5-23 154.8-14.6 155.8 18 2.2 70.1-82.4 70.1-82.4 0 49 25.2 112.9 79.8 159-26.4 8.1-85.7 29.9-71.6 53.8 11.4 19.3 196.2 12.3 249.5 6.3 53.3 6 238.1 13 249.5-6.3 14.1-23.8-45.3-45.7-71.6-53.8 54.6-46.2 79.8-110.1 79.8-159 0 0 52.1 84.6 70.1 82.4 8.5-1.1 19.5-46.4-14.5-155.8z" fill="#1296DB" p-id="6419"></path></svg>
|
||||
|
After Width: | Height: | Size: 618 B |
1
src/assets/svgs/icon-wechat.svg
Normal file
1
src/assets/svgs/icon-wechat.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1732615123149" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8670" width="200" height="200"><path d="M352.814545 385.396364m-33.512727 0a33.512727 33.512727 0 1 0 67.025455 0 33.512727 33.512727 0 1 0-67.025455 0Z" fill="#50B674" p-id="8671"></path><path d="M502.690909 384.465455m-33.512727 0a33.512727 33.512727 0 1 0 67.025454 0 33.512727 33.512727 0 1 0-67.025454 0Z" fill="#50B674" p-id="8672"></path><path d="M576.232727 534.341818m-23.272727 0a23.272727 23.272727 0 1 0 46.545455 0 23.272727 23.272727 0 1 0-46.545455 0Z" fill="#50B674" p-id="8673"></path><path d="M694.458182 536.203636m-23.272727 0a23.272727 23.272727 0 1 0 46.545454 0 23.272727 23.272727 0 1 0-46.545454 0Z" fill="#50B674" p-id="8674"></path><path d="M512 0C229.003636 0 0 229.003636 0 512s229.003636 512 512 512 512-229.003636 512-512S794.996364 0 512 0z m-87.505455 630.225455c-26.996364 0-48.407273-5.585455-75.403636-11.17091l-75.403636 37.236364 21.410909-64.232727c-53.992727-37.236364-85.643636-85.643636-85.643637-145.221818 0-102.4 96.814545-182.458182 215.04-182.458182 105.192727 0 198.283636 64.232727 216.901819 150.807273-6.516364-0.930909-13.963636-0.930909-20.48-0.93091-102.4 0-182.458182 76.334545-182.458182 170.356364 0 15.825455 2.792727 30.72 6.516363 44.683636-7.447273 0-13.963636 0.930909-20.48 0.93091z m314.647273 75.403636l15.825455 53.992727-58.647273-32.581818c-21.410909 5.585455-42.821818 11.170909-64.232727 11.170909-102.4 0-182.458182-69.818182-182.458182-155.461818s80.058182-155.461818 182.458182-155.461818c96.814545 0 182.458182 69.818182 182.458182 155.461818 0 47.476364-31.650909 90.298182-75.403637 122.88z" fill="#50B674" p-id="8675"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.7 KiB |
1
src/assets/svgs/logo-album.svg
Normal file
1
src/assets/svgs/logo-album.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg t="1732507570486" class="icon" viewBox="0 0 1086 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10030" width="200" height="200"><path d="M289.190083 761.776309l460.870523 207.44022 306.06281-602.239119-376.480441-171.552617" fill="#FFFEED" p-id="10031"></path><path d="M750.051791 986.851791c-2.424242 0-4.879339-0.502479-7.228651-1.560331l-300.068319-135.065565a17.626446 17.626446 0 0 1-8.841873-23.312396 17.613223 17.613223 0 0 1 23.312396-8.841874l284.738292 128.158678 290.106887-570.842975L767.735537 254.942149a17.630854 17.630854 0 0 1 14.620386-32.088155l281.07989 128.079339a17.630854 17.630854 0 0 1 8.405509 24.030854l-306.06281 602.239119a17.630854 17.630854 0 0 1-15.726721 9.648485z" fill="#E4E4F5" p-id="10032"></path><path d="M97.85124 69.804959h548.055096v657.062259H97.85124z" fill="#DBEAFF" p-id="10033"></path><path d="M645.906336 744.498072H97.85124a17.630854 17.630854 0 0 1-17.630854-17.630854V69.804959a17.630854 17.630854 0 0 1 17.630854-17.630854h548.055096a17.630854 17.630854 0 0 1 17.630854 17.630854v657.062259a17.630854 17.630854 0 0 1-17.630854 17.630854z m-530.424242-35.261708h512.793388V87.435813H115.482094v621.800551z" fill="#6E6E96" p-id="10034"></path><path d="M645.906336 726.86281L272.141047 353.097521 97.85124 527.391736v199.471074z" fill="#DFE2E8" p-id="10035"></path><path d="M455.920661 260.817631m-75.534986 0a75.534986 75.534986 0 1 0 151.069972 0 75.534986 75.534986 0 1 0-151.069972 0Z" fill="#FFCFCF" p-id="10036"></path><path d="M455.920661 353.983471c-51.371901 0-93.170248-41.793939-93.170248-93.16584 0-51.371901 41.793939-93.16584 93.170248-93.16584 51.371901 0 93.16584 41.793939 93.16584 93.16584 0 51.371901-41.793939 93.16584-93.16584 93.16584z m0-151.069972c-31.929477 0-57.90854 25.974656-57.90854 57.904132s25.979063 57.904132 57.90854 57.904132 57.904132-25.979063 57.904132-57.904132-25.974656-57.904132-57.904132-57.904132z" fill="#6E6E96" p-id="10037"></path><path d="M280.418733 365.518457l-174.294215 264.070524v-89.780717z" fill="#FFFFFF" opacity=".52" p-id="10038"></path><path d="M272.141047 353.097521l190.585124 366.188429h183.180165z" fill="#6E6E96" opacity=".15" p-id="10039"></path><path d="M645.906336 744.493664H97.85124a17.630854 17.630854 0 0 1-17.630854-17.630854v-199.471074c0-4.676584 1.855647-9.159229 5.161432-12.465014L259.671625 340.628099a17.630854 17.630854 0 0 1 24.938843 0l373.760882 373.769697a17.617631 17.617631 0 0 1 3.821487 19.208816 17.622039 17.622039 0 0 1-16.286501 10.887052z m-530.424242-35.261708h487.858953L272.141047 378.031956 115.482094 534.699725v174.532231z" fill="#6E6E96" p-id="10040"></path></svg>
|
||||
|
After Width: | Height: | Size: 2.6 KiB |
364
src/components/AnimatedNature/AnimatedNature.vue
Normal file
364
src/components/AnimatedNature/AnimatedNature.vue
Normal file
@@ -0,0 +1,364 @@
|
||||
<template>
|
||||
<div class="section-center">
|
||||
<div class="section-up">
|
||||
<div class="sun">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="cloud-left">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="cloud-middle">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="cloud-right">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="bird-wrapper">
|
||||
<div class="left-wing">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="right-wing">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bird-wrapper snd">
|
||||
<div class="left-wing">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="right-wing">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bird-wrapper trd">
|
||||
<div class="left-wing">
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="right-wing">
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="building-left">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="building-right">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span><span></span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="left-tree">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="right-tree">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="hill">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="hill snd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="hill trd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="hill frt">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="section-down">
|
||||
<div class="ship-wrapper">
|
||||
<div class="ship">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-big-wrapper">
|
||||
<div class="water-big-wrap">
|
||||
<div class="water-big">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water-big snd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water-big trd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-lines-wrapper">
|
||||
<div class="water-lines">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-lines-wrapper right">
|
||||
<div class="water-lines">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fish-wrapper">
|
||||
<div class="fish-wrap">
|
||||
<div class="fish">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="fish-wrapper right">
|
||||
<div class="fish-wrap">
|
||||
<div class="fish">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-wrapper top">
|
||||
<div class="water-wrap">
|
||||
<div class="water">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water snd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water trd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-wrapper">
|
||||
<div class="water-wrap">
|
||||
<div class="water">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water snd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water trd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-wrapper top right">
|
||||
<div class="water-wrap">
|
||||
<div class="water">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water snd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water trd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="water-wrapper right">
|
||||
<div class="water-wrap">
|
||||
<div class="water">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water snd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
<div class="water trd">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
</script>
|
||||
<style scoped lang="scss" src="./index.scss">
|
||||
|
||||
</style>
|
||||
1624
src/components/AnimatedNature/index.scss
Normal file
1624
src/components/AnimatedNature/index.scss
Normal file
File diff suppressed because it is too large
Load Diff
@@ -12,7 +12,9 @@
|
||||
<div class="card-content">
|
||||
<h1>{{ t("landing.title") }}</h1>
|
||||
<p>{{ t("landing.description") }}</p>
|
||||
<AButton class="button-text" type="primary">{{ t("landing.learnMore") }}</AButton>
|
||||
<AButton href="/login" type="primary" size="large" style="width: 150px;border-radius: 30px">
|
||||
{{ t("landing.learnMore") }}
|
||||
</AButton>
|
||||
</div>
|
||||
<div class="background-container"></div>
|
||||
</section>
|
||||
|
||||
@@ -1,49 +1,3 @@
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #55B4FB;
|
||||
border-radius: 30px;
|
||||
border: 2px solid #55B4FB;
|
||||
height: 44px;
|
||||
width: 165px;
|
||||
color: white;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
|
||||
transition: box-shadow 0.25s;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
|
||||
background: #46adfb;
|
||||
}
|
||||
|
||||
button i {
|
||||
background: #75C2FB;
|
||||
padding: 10px;
|
||||
border-radius: 50px;
|
||||
position: absolute;
|
||||
border: 1px solid white;
|
||||
right: 2px;
|
||||
top: 50%;
|
||||
transform: translate(0%, -50%);
|
||||
}
|
||||
|
||||
button .button-text {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(0%, -50%);
|
||||
left: 25px;
|
||||
}
|
||||
|
||||
body {
|
||||
background: #F4F5F8;
|
||||
padding: 0 30px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
z-index: 10;
|
||||
width: 80%;
|
||||
|
||||
@@ -1,16 +1,213 @@
|
||||
<template>
|
||||
<div class="landing-content">
|
||||
<div class="landing-content-title">
|
||||
<span class="landing-content-title-text">{{ t('landing.title') }}</span>
|
||||
<div class="landing-content-first">
|
||||
<AFlex class="landing-content-first-container">
|
||||
<div class="landing-content-first-left">
|
||||
<GradientText>
|
||||
<span class="landing-content-first-title">S.Album</span>
|
||||
</GradientText>
|
||||
<h1 class="landing-content-first-subtitle">
|
||||
{{ t('landing.firstTitle') }}
|
||||
</h1>
|
||||
<span style="width: 500px;line-height:200%;font-size: 14px;">
|
||||
{{ t('landing.firstDesc') }}
|
||||
</span>
|
||||
<AFlex :vertical="false" justify="space-between" align="center" style="width: 350px">
|
||||
<AButton type="primary" size="large" href="/login" :style="{width: '150px'}">{{
|
||||
t('landing.immediatelyUse')
|
||||
}}
|
||||
</AButton>
|
||||
<AButton type="default" size="large" :style="{width: '150px'}">{{ t('landing.learnMore') }}</AButton>
|
||||
</AFlex>
|
||||
<AFlex :vertical="false" justify="space-between" align="center" style="width: 300px">
|
||||
<a-avatar-group size="large">
|
||||
<a-avatar :src="avatar1"/>
|
||||
<a-avatar :src="avatar2"/>
|
||||
<a-avatar :src="avatar3"/>
|
||||
<a-avatar style="background-color: #87d068">
|
||||
<template #icon>
|
||||
99+
|
||||
</template>
|
||||
</a-avatar>
|
||||
</a-avatar-group>
|
||||
<AFlex :vertical="true">
|
||||
<Rate :value="5" disabled :size="12"/>
|
||||
<span style="font-size: 13px;">
|
||||
from 99+ happy users
|
||||
</span>
|
||||
</AFlex>
|
||||
</AFlex>
|
||||
</div>
|
||||
<div class="landing-content-first-right">
|
||||
<AnimatedNature/>
|
||||
</div>
|
||||
</AFlex>
|
||||
</div>
|
||||
<div class="landing-content-second">
|
||||
<div class="landing-content-second-container">
|
||||
<div class="landing-content-second-left">
|
||||
<ACard :hoverable="true">
|
||||
<img style="border-radius: 10px;" src="@/assets/images/landing_image1.png" :width="450" :height="450"
|
||||
alt=""/>
|
||||
</ACard>
|
||||
</div>
|
||||
<div class="landing-content-second-right">
|
||||
<AFlex :vertical="true" justify="space-between" align="flex-start">
|
||||
<h1 style="font-size: 2.5rem;">{{ t('landing.secondTitle') }}</h1>
|
||||
<p style="font-size: 16px; line-height: 2">{{ t('landing.secondDesc') }}</p>
|
||||
</AFlex>
|
||||
<AFlex class="landing-content-second-right-item" :vertical="true" justify="flex-start" align="flex-start">
|
||||
<div>
|
||||
<div style="font-size: 16px;">
|
||||
<CheckOutlined class="landing-content-second-icon"/>
|
||||
<span class="landing-content-second-icon-text">{{ t('landing.secondFeature1') }}</span>
|
||||
{{ t('landing.secondFeature1Desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 16px;">
|
||||
<CheckOutlined class="landing-content-second-icon"/>
|
||||
<span class="landing-content-second-icon-text">{{ t('landing.secondFeature2') }}</span>
|
||||
{{ t('landing.secondFeature2Desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 16px;">
|
||||
<CheckOutlined class="landing-content-second-icon"/>
|
||||
<span class="landing-content-second-icon-text">{{ t('landing.secondFeature3') }}</span>
|
||||
{{ t('landing.secondFeature3Desc') }}
|
||||
</div>
|
||||
</div>
|
||||
</AFlex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing-content-third">
|
||||
<div class="landing-content-third-container">
|
||||
<div class="landing-content-third-left">
|
||||
<AFlex :vertical="true" justify="space-between" align="flex-start">
|
||||
<h1 style="font-size: 2.5rem;">{{ t('landing.thirdTitle') }}</h1>
|
||||
<p style="font-size: 16px;">{{ t('landing.thirdDesc') }}</p>
|
||||
</AFlex>
|
||||
<AFlex class="landing-content-third-right-item" :vertical="true" justify="flex-start" align="flex-start">
|
||||
<div>
|
||||
<div style="font-size: 16px;">
|
||||
<CheckOutlined class="landing-content-third-icon"/>
|
||||
<span class="landing-content-third-icon-text">{{ t('landing.thirdFeature1') }}</span>
|
||||
{{ t('landing.thirdFeature1Desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 16px;">
|
||||
<CheckOutlined class="landing-content-third-icon"/>
|
||||
<span class="landing-content-third-icon-text">{{ t('landing.thirdFeature2') }}</span>
|
||||
{{ t('landing.thirdFeature2Desc') }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div style="font-size: 16px;">
|
||||
<CheckOutlined class="landing-content-third-icon"/>
|
||||
<span class="landing-content-third-icon-text">{{ t('landing.thirdFeature3') }}</span>
|
||||
{{ t('landing.thirdFeature3Desc') }}
|
||||
</div>
|
||||
</div>
|
||||
</AFlex>
|
||||
</div>
|
||||
<div class="landing-content-third-right">
|
||||
<ACard :hoverable="true">
|
||||
<img style="border-radius: 10px;" src="@/assets/images/landing_image2.png" :width="450" :height="450"
|
||||
alt=""/>
|
||||
</ACard>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing-content-fourth">
|
||||
<div class="landing-content-fourth-container">
|
||||
<div class="landing-content-fourth-top">
|
||||
<h1 style="font-size: 3rem;">{{ t('landing.fourthTitle') }}</h1>
|
||||
</div>
|
||||
<div class="landing-content-fourth-bottom">
|
||||
<div class="landing-content-fourth-bottom-item">
|
||||
<ACard class="landing-content-fourth-bottom-item-card" :hoverable="true">
|
||||
<UngroupOutlined class="landing-content-fourth-bottom-item-icon"/>
|
||||
</ACard>
|
||||
<span class="landing-content-fourth-bottom-item-title">
|
||||
{{ t('landing.fourthFeature1') }}
|
||||
</span>
|
||||
<p>
|
||||
自动识别和分类您的照片，让查找和管理变得更智能。
|
||||
</p>
|
||||
</div>
|
||||
<div class="landing-content-fourth-bottom-item">
|
||||
<ACard class="landing-content-fourth-bottom-item-card" :hoverable="true">
|
||||
<LockOutlined class="landing-content-fourth-bottom-item-icon"/>
|
||||
</ACard>
|
||||
<span class="landing-content-fourth-bottom-item-title">
|
||||
隐私加密
|
||||
</span>
|
||||
<p>
|
||||
确保您的数据安全，通过先进的隐私保护技术保障用户隐私。
|
||||
</p>
|
||||
</div>
|
||||
<div class="landing-content-fourth-bottom-item">
|
||||
<ACard class="landing-content-fourth-bottom-item-card" :hoverable="true">
|
||||
<CloudServerOutlined class="landing-content-fourth-bottom-item-icon"/>
|
||||
</ACard>
|
||||
<span class="landing-content-fourth-bottom-item-title">
|
||||
云存储服务
|
||||
</span>
|
||||
<p>
|
||||
安全存储您的照片，实现随时随地访问与管理。
|
||||
</p>
|
||||
</div>
|
||||
<div class="landing-content-fourth-bottom-item">
|
||||
<ACard class="landing-content-fourth-bottom-item-card" :hoverable="true">
|
||||
<CommentOutlined class="landing-content-fourth-bottom-item-icon"/>
|
||||
</ACard>
|
||||
<span class="landing-content-fourth-bottom-item-title">
|
||||
社区分享
|
||||
</span>
|
||||
<p>
|
||||
简单快速地与朋友分享您的照片，享受社交乐趣。
|
||||
</p>
|
||||
</div>
|
||||
<div class="landing-content-fourth-bottom-item">
|
||||
<ACard class="landing-content-fourth-bottom-item-card" :hoverable="true">
|
||||
<PictureOutlined class="landing-content-fourth-bottom-item-icon"/>
|
||||
</ACard>
|
||||
<span class="landing-content-fourth-bottom-item-title">
|
||||
照片增强工具
|
||||
</span>
|
||||
<p>
|
||||
多种编辑功能帮助您提升照片质量，展现最佳效果。
|
||||
</p>
|
||||
</div>
|
||||
<div class="landing-content-fourth-bottom-item">
|
||||
<ACard class="landing-content-fourth-bottom-item-card" :hoverable="true">
|
||||
<SwapOutlined class="landing-content-fourth-bottom-item-icon"/>
|
||||
</ACard>
|
||||
<span class="landing-content-fourth-bottom-item-title">
|
||||
多端同步
|
||||
</span>
|
||||
<p>
|
||||
轻松管理您的照片，随时随地访问，无缝同步。
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Card3D/>
|
||||
<Clouds/>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
|
||||
import Card3D from "@/components/Card3D/Card3D.vue";
|
||||
import Clouds from "@/components/Clouds/Clouds.vue";
|
||||
import AnimatedNature from "@/components/AnimatedNature/AnimatedNature.vue";
|
||||
import GradientText from "@/components/MyUI/GradientText/GradientText.vue";
|
||||
import Rate from "@/components/MyUI/Rate/Rate.vue";
|
||||
import avatar1 from "@/assets/images/1.png";
|
||||
import avatar2 from "@/assets/images/2.png";
|
||||
import avatar3 from "@/assets/images/3.png";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const {t} = useI18n();
|
||||
|
||||
@@ -5,14 +5,223 @@
|
||||
align-items: center;
|
||||
gap: 20px;
|
||||
|
||||
.landing-content-title {
|
||||
height: 100px;
|
||||
margin-top: 50px;
|
||||
|
||||
.landing-content-title-text {
|
||||
font-size: 50px;
|
||||
font-weight: bold;
|
||||
color: var(--text-color);
|
||||
.landing-content-first {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 1100px;
|
||||
max-width: 1200px;
|
||||
height: 600px;
|
||||
|
||||
.landing-content-first-container {
|
||||
|
||||
.landing-content-first-left {
|
||||
width: 550px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
|
||||
.landing-content-first-title {
|
||||
font-size: 30px;
|
||||
font-weight: bold;
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
}
|
||||
|
||||
.landing-content-first-subtitle {
|
||||
font-size: 4rem;
|
||||
line-height: 0.5;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
.landing-content-first-right {
|
||||
width: 550px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.landing-content-second {
|
||||
height: 600px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
|
||||
.landing-content-second-container {
|
||||
width: 1200px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.landing-content-second-left {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.landing-content-second-right {
|
||||
width: 600px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
|
||||
.landing-content-second-right-item {
|
||||
height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
|
||||
.landing-content-second-icon {
|
||||
font-size: 1.5rem;
|
||||
color: #7acc35;
|
||||
}
|
||||
|
||||
.landing-content-second-icon-text {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
.landing-content-third {
|
||||
height: 600px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.landing-content-third-container {
|
||||
width: 1200px;
|
||||
height: 600px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.landing-content-third-left {
|
||||
width: 600px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
|
||||
.landing-content-third-right-item {
|
||||
height: 400px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
|
||||
.landing-content-third-icon {
|
||||
font-size: 1.5rem;
|
||||
color: #7acc35;
|
||||
}
|
||||
|
||||
.landing-content-third-icon-text {
|
||||
font-size: 1.2rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.landing-content-third-right {
|
||||
width: 600px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.landing-content-fourth {
|
||||
height: 600px;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background-color: white;
|
||||
|
||||
.landing-content-fourth-container {
|
||||
height: 600px;
|
||||
width: 1200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.landing-content-fourth-top {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: inline-flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.landing-content-fourth-bottom {
|
||||
width: 100%;
|
||||
height: 500px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.landing-content-fourth-bottom-item {
|
||||
width: 400px;
|
||||
height: 250px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
|
||||
.landing-content-fourth-bottom-item-card {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: rgba(147, 197, 253, .3);
|
||||
border: 2px solid rgba(147, 197, 253, .3);
|
||||
|
||||
.landing-content-fourth-bottom-item-icon {
|
||||
font-size: 3rem;
|
||||
color: #505051;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-content-fourth-bottom-item-title {
|
||||
font-size: 1.5rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
@@ -2,39 +2,44 @@
|
||||
<div class="landing-footer">
|
||||
<div class="landing-footer-content">
|
||||
<div class="landing-footer-content-left">
|
||||
<div class="landing-footer-content-left-top">
|
||||
<a href="#" class="landing-footer-content-a">{{t('landing.userAgreement')}}</a>
|
||||
<AFlex align="center">
|
||||
<img src="@/assets/svgs/logo-album.svg" :width="50" alt="" class="landing-logo">
|
||||
<span class="landing-footer-title">S.Album</span>
|
||||
</AFlex>
|
||||
<p class="landing-footer-text">
|
||||
S.Album ，{{ t('landing.footerDesc')}}
|
||||
</p>
|
||||
|
||||
<a class="landing-footer-content-a">{{t('landing.privacyPolicy')}}</a>
|
||||
|
||||
<a class="landing-footer-content-a">{{t('landing.termsOfService')}}</a>
|
||||
|
||||
<a class="landing-footer-content-a">{{t('landing.contactUs')}}</a>
|
||||
|
||||
<a class="landing-footer-content-a">{{t('landing.friends')}}</a>
|
||||
|
||||
<a class="landing-footer-content-a">{{ t('landing.helpCenter')}}</a>
|
||||
</div>
|
||||
<div class="landing-footer-content-left-bottom">
|
||||
<p class="landing-footer-content-p">{{t('landing.copyright')}}</p>
|
||||
<p class="landing-footer-content-p">京ICP备19053963号-1</p>
|
||||
<p class="landing-footer-content-p">京公网安备11010502037888号</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="landing-footer-content-right">
|
||||
<div style="width: 200px; display: flex; justify-content: space-between; align-items: center;">
|
||||
<GithubOutlined class="landing-footer-content-icon"/>
|
||||
<QqOutlined class="landing-footer-content-icon"/>
|
||||
<WechatOutlined class="landing-footer-content-icon"/>
|
||||
<div class="landing-footer-content-right-left">
|
||||
<AQrcode :value="'https://git.landaiqing.cn'" :size="120" :bordered="false"
|
||||
:icon="qq"
|
||||
:iconSize="20"
|
||||
/>
|
||||
<AQrcode :value="'https://git.landaiqing.cn'" :size="120" :bordered="false" :icon="wechat" :iconSize="20"/>
|
||||
</div>
|
||||
<div class="landing-footer-content-right-right">
|
||||
<AFlex :vertical="true" style="width: 300px;height: 150px;" align="flex-start" justify="space-evenly">
|
||||
<span class="landing-footer-text">
|
||||
京ICP备19053591号-1
|
||||
</span>
|
||||
<span class="landing-footer-text">
|
||||
京ICP备19053591号-1
|
||||
</span>
|
||||
©2024 Schisandra All Rights Reserved
|
||||
</AFlex>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import qq from "@/assets/svgs/icon-qq.svg";
|
||||
import wechat from "@/assets/svgs/icon-wechat.svg";
|
||||
import {useI18n} from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
const {t} = useI18n();
|
||||
</script>
|
||||
<style src="./index.scss" scoped>
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
.landing-footer {
|
||||
width: 100%;
|
||||
height: 200px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
background-color: white;
|
||||
color: #505051;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
@@ -10,58 +10,67 @@
|
||||
.landing-footer-content {
|
||||
display: flex;
|
||||
height: 100%;
|
||||
max-width: 1200px;
|
||||
min-width: 1200px;
|
||||
width: 1200px;
|
||||
max-width: 1000px;
|
||||
min-width: 1000px;
|
||||
width: 1000px;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.landing-footer-content-left {
|
||||
width: 300px;
|
||||
height: 150px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 800px;
|
||||
justify-content: space-evenly;
|
||||
align-items: flex-start;
|
||||
|
||||
.landing-footer-content-left-top {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
justify-content: space-between;
|
||||
font-size: 15px;
|
||||
font-weight: bold;
|
||||
|
||||
.landing-footer-content-a {
|
||||
color: #fff !important;
|
||||
|
||||
}
|
||||
.landing-footer-title {
|
||||
font-size: 1.8rem;
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
|
||||
.landing-footer-content-left-bottom {
|
||||
width: 100%;
|
||||
height: 100px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: space-around;
|
||||
color: #777777;
|
||||
font-size: 15px;
|
||||
|
||||
|
||||
.landing-footer-text {
|
||||
font-size: 16px;
|
||||
color: #707072;
|
||||
}
|
||||
}
|
||||
|
||||
.landing-footer-content-right {
|
||||
width: 700px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 400px;
|
||||
|
||||
.landing-footer-content-icon {
|
||||
font-size: 40px;
|
||||
color: #777777;
|
||||
.landing-footer-content-right-left {
|
||||
width: 400px;
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.landing-footer-content-right-right {
|
||||
width: 300px;
|
||||
height: 200px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
.landing-footer-icon {
|
||||
font-size: 1.8rem;
|
||||
color: #505051;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.landing-footer-text {
|
||||
font-size: 16px;
|
||||
color: #707072;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,41 +1,45 @@
|
||||
<template>
|
||||
<div class="landing-header">
|
||||
<div
|
||||
style="display: flex; align-items: center;justify-content: space-between; width: 1200px;min-width: 1200px; max-width: 1200px;">
|
||||
class="landing-header-content">
|
||||
<AFlex :vertical="false" align-items="center" justify-content="space-between">
|
||||
<div class="logo" style="display: flex; align-items: center;justify-content: center;cursor: pointer;">
|
||||
<img class="landing-header-logo" src="@/assets/svgs/logo-schisandra.svg" alt="logo">
|
||||
<img style="width: 200px;" src="@/assets/images/logo.png" alt="logo">
|
||||
<div class="logo" @click="router.push('/')">
|
||||
<img class="landing-header-logo" src="@/assets/svgs/logo-album.svg" alt="logo">
|
||||
<span class="landing-header-logo-text">S.Album</span>
|
||||
</div>
|
||||
</AFlex>
|
||||
<AFlex :vertical="false" justify="space-between">
|
||||
<div style="display: flex; align-items: center;justify-content: center;">
|
||||
<div class="toggle-box" style="margin-top: 20px;margin-right: 20px;">
|
||||
<input @click="toggleTheme" v-model="isDarkMode" type="checkbox" name="checkbox1"
|
||||
id="toggle-box-checkbox">
|
||||
<label for="toggle-box-checkbox" class="toggle-box-label-left"></label>
|
||||
<label for="toggle-box-checkbox" class="toggle-box-label"></label>
|
||||
</div>
|
||||
<div style="margin-right: 20px;">
|
||||
<ADropdown>
|
||||
<template #overlay>
|
||||
<AMenu @click="(e: any)=>{
|
||||
changeLang(e.key)
|
||||
}">
|
||||
<AMenuItem key="zh">{{ t("landing.chinese") }}</AMenuItem>
|
||||
<AMenuItem key="en">{{ t("landing.english") }}</AMenuItem>
|
||||
</AMenu>
|
||||
</template>
|
||||
<AButton type="text" size="large" :icon="h(TranslationOutlined)">
|
||||
</AButton>
|
||||
</ADropdown>
|
||||
|
||||
</div>
|
||||
|
||||
<AButton @click="router.push('/login')" type="primary" size="large" style="margin-right: 10px;">
|
||||
<AFlex :vertical="false" justify="space-between" class="landing-header-menu">
|
||||
<!-- <div class="toggle-box" style="margin-top: 20px;margin-right: 20px;">-->
|
||||
<!-- <input @click="toggleTheme" v-model="isDarkMode" type="checkbox" name="checkbox1"-->
|
||||
<!-- id="toggle-box-checkbox">-->
|
||||
<!-- <label for="toggle-box-checkbox" class="toggle-box-label-left"></label>-->
|
||||
<!-- <label for="toggle-box-checkbox" class="toggle-box-label"></label>-->
|
||||
<!-- </div>-->
|
||||
<!-- <div style="margin-right: 20px;">-->
|
||||
<!-- <ADropdown>-->
|
||||
<!-- <template #overlay>-->
|
||||
<!-- <AMenu @click="(e: any)=>{-->
|
||||
<!-- changeLang(e.key)-->
|
||||
<!-- }">-->
|
||||
<!-- <AMenuItem key="zh">{{ t("landing.chinese") }}</AMenuItem>-->
|
||||
<!-- <AMenuItem key="en">{{ t("landing.english") }}</AMenuItem>-->
|
||||
<!-- </AMenu>-->
|
||||
<!-- </template>-->
|
||||
<!-- <AButton type="text" size="large" :icon="h(TranslationOutlined)">-->
|
||||
<!-- </AButton>-->
|
||||
<!-- </ADropdown>-->
|
||||
<!-- </div>-->
|
||||
<AFlex :vertical="false" justify="space-around" style="padding: 0 20px; ">
|
||||
<AButton type="text" size="large">{{ t('landing.home') }}</AButton>
|
||||
<AButton type="text" size="large">{{ t('landing.community') }}</AButton>
|
||||
<AButton type="text" size="large">{{ t('landing.help') }}</AButton>
|
||||
<AButton type="text" size="large">{{ t('landing.development') }}</AButton>
|
||||
</AFlex>
|
||||
<AButton href="/login" type="primary" size="large" style="margin-right: 10px;">
|
||||
{{ t("landing.immediately") }}
|
||||
</AButton>
|
||||
</div>
|
||||
</AFlex>
|
||||
</AFlex>
|
||||
</div>
|
||||
</div>
|
||||
@@ -43,62 +47,58 @@
|
||||
<script setup lang="ts">
|
||||
|
||||
|
||||
import useStore from "@/store/index.ts";
|
||||
import {h, ref} from "vue";
|
||||
import {TranslationOutlined} from '@ant-design/icons-vue';
|
||||
import {useI18n} from "vue-i18n";
|
||||
import {useRouter} from "vue-router";
|
||||
|
||||
const {t, locale} = useI18n();
|
||||
const {t} = useI18n();
|
||||
const router = useRouter();
|
||||
const lang = useStore().lang;
|
||||
// const lang = useStore().lang;
|
||||
|
||||
async function changeLang(language: any) {
|
||||
lang.lang = language;
|
||||
locale.value = language;
|
||||
}
|
||||
|
||||
|
||||
const app = useStore().theme;
|
||||
const isDarkMode = ref<boolean>(app.darkMode === "dark");
|
||||
|
||||
const toggleTheme = (event: any) => {
|
||||
const x = event.clientX;
|
||||
const y = event.clientY;
|
||||
const endRadius = Math.hypot(
|
||||
Math.max(x, innerWidth - x),
|
||||
Math.max(y, innerHeight - y)
|
||||
);
|
||||
|
||||
// 兼容性处理
|
||||
if (!document.startViewTransition) {
|
||||
app.toggleDarkMode();
|
||||
return;
|
||||
}
|
||||
|
||||
const transition = document.startViewTransition(async () => {
|
||||
app.toggleDarkMode();
|
||||
});
|
||||
|
||||
transition.ready.then(() => {
|
||||
const clipPath = [
|
||||
`circle(0px at ${x}px ${y}px)`,
|
||||
`circle(${endRadius}px at ${x}px ${y}px)`,
|
||||
];
|
||||
document.documentElement.animate(
|
||||
{
|
||||
clipPath: app.darkMode === "dark" ? [...clipPath].reverse() : clipPath,
|
||||
},
|
||||
{
|
||||
duration: 400,
|
||||
easing: "ease-in",
|
||||
pseudoElement: app.darkMode === "dark"
|
||||
? "::view-transition-old(root)"
|
||||
: "::view-transition-new(root)",
|
||||
}
|
||||
);
|
||||
});
|
||||
};
|
||||
// async function changeLang(language: any) {
|
||||
// lang.lang = language;
|
||||
// locale.value = language;
|
||||
// }
|
||||
//
|
||||
//
|
||||
// const app = useStore().theme;
|
||||
// const isDarkMode = ref<boolean>(app.darkMode === "dark");
|
||||
//
|
||||
// const toggleTheme = (event: any) => {
|
||||
// const x = event.clientX;
|
||||
// const y = event.clientY;
|
||||
// const endRadius = Math.hypot(
|
||||
// Math.max(x, innerWidth - x),
|
||||
// Math.max(y, innerHeight - y)
|
||||
// );
|
||||
//
|
||||
// // 兼容性处理
|
||||
// if (!document.startViewTransition) {
|
||||
// app.toggleDarkMode();
|
||||
// return;
|
||||
// }
|
||||
//
|
||||
// const transition = document.startViewTransition(async () => {
|
||||
// app.toggleDarkMode();
|
||||
// });
|
||||
//
|
||||
// transition.ready.then(() => {
|
||||
// const clipPath = [
|
||||
// `circle(0px at ${x}px ${y}px)`,
|
||||
// `circle(${endRadius}px at ${x}px ${y}px)`,
|
||||
// ];
|
||||
// document.documentElement.animate(
|
||||
// {
|
||||
// clipPath: app.darkMode === "dark" ? [...clipPath].reverse() : clipPath,
|
||||
// },
|
||||
// {
|
||||
// duration: 400,
|
||||
// easing: "ease-in",
|
||||
// pseudoElement: app.darkMode === "dark"
|
||||
// ? "::view-transition-old(root)"
|
||||
// : "::view-transition-new(root)",
|
||||
// }
|
||||
// );
|
||||
// });
|
||||
// };
|
||||
|
||||
</script>
|
||||
<style src="./index.scss" lang="scss" scoped>
|
||||
|
||||
@@ -1,23 +1,45 @@
|
||||
.landing-header {
|
||||
height: 100px;
|
||||
height: 88px;
|
||||
width: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.38);
|
||||
backdrop-filter: blur(20px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: background-color 0.3s;
|
||||
z-index: 3;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
|
||||
|
||||
.landing-header-logo {
|
||||
display: inline-block;
|
||||
margin-right: 1rem;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
padding: 1rem;
|
||||
.landing-header-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 1200px;
|
||||
max-width: 1200px;
|
||||
|
||||
.logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.landing-header-logo {
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.landing-header-logo-text {
|
||||
font-size: 25px;
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
.landing-header-menu {
|
||||
//width: 50%;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// 黑暗切换按钮
|
||||
.toggle-box-label-left:empty {
|
||||
margin-left: -10px;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<AFlex :vertical="true" align="center" justify-content="center" v-cloak>
|
||||
<Header style="position: fixed;"/>
|
||||
<Content style="margin-top: 100px;z-index: 2;"/>
|
||||
<Header />
|
||||
<Content/>
|
||||
<Footer/>
|
||||
<div class="area">
|
||||
<ul class="circles">
|
||||
|
||||
@@ -42,7 +42,19 @@ export default {
|
||||
resetPasswordSuccess: "reset password success！",
|
||||
resetPasswordError: "reset password failed！",
|
||||
pleaseLogin: "please login！",
|
||||
|
||||
fourthTitle: "S.Album Features",
|
||||
fourthFeature1: 'Intelligent Image Recognition',
|
||||
fourthFeature1Desc: 'Automatically recognizes and categorizes your photos, making finding and managing them smarter.',
|
||||
fourthFeature2: 'Privacy Encryption',
|
||||
fourthFeature2Desc: 'Ensure the security of your data and safeguard user privacy with advanced privacy protection technology.',
|
||||
fourthFeature3: 'Cloud Storage Service',
|
||||
fourthFeature3Desc: 'Securely store your photos for anytime, anywhere access and management.',
|
||||
fourthFeature4: 'Community Sharing',
|
||||
fourthFeature4Desc: 'Quickly and easily share your photos with friends and enjoy socializing.',
|
||||
fourthFeature5: 'Photo Enhancement Tools',
|
||||
fourthFeature5Desc: 'A variety of editing features help you improve the quality of your photos and show the best results.',
|
||||
fourthFeature6: 'Multi-synchronization',
|
||||
fourthFeature6Desc: 'Easily manage your photos, access them anywhere and synchronize them seamlessly.',
|
||||
},
|
||||
landing: {
|
||||
immediately: 'Immediately',
|
||||
@@ -51,13 +63,30 @@ export default {
|
||||
learnMore: 'Learn More',
|
||||
title: 'Schisandra Cloud Album',
|
||||
description: 'Schisandra Cloud Album is a cloud storage service that allows users to store and manage their digital assets in the cloud. It provides a simple and easy-to-use interface, and supports multiple file formats, including images, videos, documents, and audio files.',
|
||||
userAgreement: 'user agreement',
|
||||
privacyPolicy: 'privacy policy',
|
||||
termsOfService: 'terms of service',
|
||||
contactUs: 'contact us',
|
||||
friends: 'friends',
|
||||
helpCenter: 'help center',
|
||||
copyright: '© 2021 Schisandra Cloud Album. All rights reserved.',
|
||||
home: 'Home',
|
||||
community: 'Community',
|
||||
help: 'Help',
|
||||
development: 'Development platform',
|
||||
footerDesc: 'A photo management website that utilizes artificial intelligence technology',
|
||||
firstTitle: 'Smart AI Cloud Album',
|
||||
firstDesc: 'Schisandra Cloud Album is a photo management app that utilizes artificial intelligence technology, aiming to provide users with a convenient photo storage and sharing experience, and is dedicated to helping users better treasure and remember the beautiful moments in their lives.',
|
||||
immediatelyUse: 'Immediately use',
|
||||
secondTitle: 'What is S.Album?',
|
||||
secondDesc: 'S.Album is a photo management website based on artificial intelligence technology, dedicated to providing users with safe and convenient cloud photo storage and sharing services.',
|
||||
secondFeature1: 'Intelligent picking and sorting.',
|
||||
secondFeature1Desc: 'Automatically categorize and retrieve your photos with AI technology, saving time and effort.',
|
||||
secondFeature2: 'Provides a high level of security and privacy protection for your data with support for cloud storage features.',
|
||||
secondFeature2Desc: 'Secure Cloud Storage. ',
|
||||
secondFeature3: 'Community Sharing Features.',
|
||||
secondFeature3Desc: 'Share your photos with friends and family to promote social interaction and enhance the sense of community.',
|
||||
thirdTitle: 'Why S.Album?',
|
||||
thirdDesc: 'S.Album ensures that users are able to efficiently utilize image resources through its unique features and design.',
|
||||
thirdFeature1: 'Intelligent Image Processing .',
|
||||
thirdFeature1Desc: 'Use artificial intelligence to automatically optimize image quality and improve the visual effect of your photos.',
|
||||
thirdFeature2: 'Easy to use. ',
|
||||
thirdFeature2Desc: 'The intuitive interface and operating procedures allow you to get started without having to learn complicated tools.',
|
||||
thirdFeature3: 'Efficient Management. ',
|
||||
thirdFeature3Desc: 'Quickly find and manage your thousands of photos with a single click, dramatically increasing efficiency.',
|
||||
},
|
||||
error: {
|
||||
networkError: 'Network error, please try again later',
|
||||
|
||||
@@ -51,13 +51,45 @@ export default {
|
||||
learnMore: '了解更多',
|
||||
title: '五味子云相册',
|
||||
description: '在这个瞬息万变的世界里，我们用镜头捕捉每一个精彩瞬间。五味子云相册，为您提供一个安全、便捷的云端空间，让您的照片随时随地触手可及。 无需担心存储空间不足，无需担心照片丢失。五味子云相册，让您的每一张照片都得到妥善保管，让美好的记忆永不褪色。',
|
||||
userAgreement: '用户协议',
|
||||
privacyPolicy: '隐私政策',
|
||||
termsOfService: '服务条款',
|
||||
contactUs: '联系我们',
|
||||
friends: '友情链接',
|
||||
helpCenter: '帮助中心',
|
||||
copyright: '版权所有 © 2021 五味子云相册',
|
||||
home: '首页',
|
||||
community: '社 区',
|
||||
help: '帮助',
|
||||
development: '开发平台',
|
||||
footerDesc: '一款利用人工智能技术的照片管理网站',
|
||||
firstTitle: '智能AI云相册',
|
||||
firstDesc: '五味子云相册是一款利用人工智能技术的照片管理应用，旨在为用户提供便捷的照片存储和分享体验，致力于帮助用户更好地珍藏和回忆生活中的美好瞬间。',
|
||||
immediatelyUse: '立即使用',
|
||||
secondTitle: 'S.Album 是什么？',
|
||||
secondDesc: 'S.Album 是一款基于人工智能技术的照片管理网站，致力于为用户提供安全、便捷的云端照片存储和分享服务。',
|
||||
secondFeature1: '智能分拣与分类.',
|
||||
secondFeature1Desc: '利用AI技术自动分类和检索您的照片，节省时间和精力。',
|
||||
secondFeature2: '安全的云存储. ',
|
||||
secondFeature2Desc: '为您的数据提供高水平的安全性和隐私保护，支持云存储功能。',
|
||||
secondFeature3: '社区分享功能. ',
|
||||
secondFeature3Desc: '与朋友和家人分享您的照片，促进社交互动，增强社区感。',
|
||||
thirdTitle: '为什么选择 S.Album？',
|
||||
thirdDesc: 'S.Album通过独特的功能和设计，确保用户能够高效利用图像资源。',
|
||||
thirdFeature1: '智能图像处理. ',
|
||||
thirdFeature1Desc: '使用人工智能自动优化图像质量，提高您的照片视觉效果。',
|
||||
thirdFeature2: '简单易用. ',
|
||||
thirdFeature2Desc: '直观的界面和操作流程，使您无需学习复杂的工具即可上手。',
|
||||
thirdFeature3: '高效管理. ',
|
||||
thirdFeature3Desc: '一键快速查找和管理您的数以千计的照片，显著提升效率。',
|
||||
fourthTitle: 'S.Album 特点',
|
||||
fourthFeature1: '智能图像识别',
|
||||
fourthFeature1Desc: '自动识别和分类您的照片，让查找和管理变得更智能。',
|
||||
fourthFeature2: '隐私加密',
|
||||
fourthFeature2Desc: '确保您的数据安全，通过先进的隐私保护技术保障用户隐私。',
|
||||
fourthFeature3: '云存储服务',
|
||||
fourthFeature3Desc: '安全存储您的照片，实现随时随地访问与管理。',
|
||||
forthFeature4: '社区分享',
|
||||
forthFeature4Desc: '简单快速地与朋友分享您的照片，享受社交乐趣。',
|
||||
forthFeature5: '照片增强工具',
|
||||
forthFeature5Desc: '多种编辑功能帮助您提升照片质量，展现最佳效果。',
|
||||
forthFeature6: '多端同步',
|
||||
forthFeature6Desc: '轻松管理您的照片，随时随地访问，无缝同步。',
|
||||
|
||||
|
||||
},
|
||||
error: {
|
||||
networkError: '网络连接失败！',
|
||||
@@ -103,7 +135,7 @@ export default {
|
||||
loadingMore: '加载更多',
|
||||
noMore: '没有更多了',
|
||||
reportSeletion: '请选择举报原因',
|
||||
view : '查看',
|
||||
view: '查看',
|
||||
replies: '条回复',
|
||||
}
|
||||
|
||||
|
||||
@@ -9,7 +9,7 @@ import variables from '@/assets/styles/colors.module.scss';
|
||||
export const useThemeStore = defineStore(
|
||||
'theme',
|
||||
() => {
|
||||
const themeName = ref<string>('green'); // 主题名称
|
||||
const themeName = ref<string>('blue'); // 主题名称
|
||||
const darkMode = ref<string>('light'); // 颜色模式
|
||||
const themeConfig = computed(() => {
|
||||
document.documentElement.setAttribute('data-theme', themeName.value);
|
||||
@@ -17,12 +17,12 @@ export const useThemeStore = defineStore(
|
||||
// 主题配置
|
||||
return {
|
||||
token: {
|
||||
colorPrimary: variables[themeName.value] || '#27ba9b',
|
||||
colorPrimary: variables[themeName.value] || 'rgba(96,165,250,.9)',
|
||||
borderRadius: 10,
|
||||
colorSuccess: '#1dc779',
|
||||
colorWarning: '#ffb302',
|
||||
colorError: '#cf4444',
|
||||
colorInfo: variables[themeName.value] || '#27ba9b',
|
||||
colorInfo: variables[themeName.value] || 'rgba(96,165,250,.9)',
|
||||
wireframe: true
|
||||
},
|
||||
algorithm: darkMode.value === 'light' ? theme.defaultAlgorithm : theme.darkAlgorithm
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="forget-main">
|
||||
<div class="forget-left">
|
||||
<AFlex style="margin-left: 20px;" :vertical="false" align="center" justify="flex-start">
|
||||
<img class="forget-header-logo" src="@/assets/svgs/logo-album.svg" alt="logo" @click="router.push('/')">
|
||||
<span class="forget-header-logo-text" @click="router.push('/')">S.Album</span>
|
||||
</AFlex>
|
||||
<BoxDog/>
|
||||
</div>
|
||||
<div class="forget-right">
|
||||
|
||||
@@ -18,6 +18,25 @@
|
||||
|
||||
.forget-left {
|
||||
width: 50%;
|
||||
background: transparent;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.forget-header-logo {
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.forget-header-logo-text {
|
||||
font-size: 25px;
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
font-weight: bolder;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.forget-right {
|
||||
@@ -76,7 +95,7 @@
|
||||
background-repeat: no-repeat;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-image: url(data:image/png;base64,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);
|
||||
background-image: url("data:image/png;base64,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");
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -100,7 +119,6 @@
|
||||
}
|
||||
|
||||
|
||||
|
||||
.area {
|
||||
background: var(--landing-background-color-main);
|
||||
// background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
|
||||
|
||||
@@ -2,14 +2,15 @@
|
||||
<a-spin :spinning="loginLoading" tip="Login..." size="large">
|
||||
<div class="login-main">
|
||||
<div class="login-left">
|
||||
<AFlex style="margin-left: 20px;" :vertical="false" align="center" justify="flex-start">
|
||||
<img class="login-header-logo" src="@/assets/svgs/logo-album.svg" alt="logo" @click="router.push('/')">
|
||||
<span class="login-header-logo-text" @click="router.push('/')">S.Album</span>
|
||||
</AFlex>
|
||||
<BoxDog/>
|
||||
</div>
|
||||
<div class="login-right">
|
||||
|
||||
<span class="login-right-title">
|
||||
<img src="@/assets/images/logo-schisandra.png" @click="()=>{
|
||||
router.push('/')
|
||||
}" style="width: 30px; height: 30px;cursor: pointer;" alt="">
|
||||
{{ t("login.title") }}
|
||||
</span>
|
||||
<ACard class="login-card" bordered :hoverable="false">
|
||||
|
||||
@@ -18,8 +18,26 @@
|
||||
|
||||
|
||||
.login-left {
|
||||
width: 50%;
|
||||
width: 50vw;
|
||||
background: transparent;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.login-header-logo {
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.login-header-logo-text {
|
||||
font-size: 25px;
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
font-weight: bolder;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.login-right {
|
||||
@@ -27,14 +45,15 @@
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 50%;
|
||||
height: 100%;
|
||||
width: 50vw;;
|
||||
height: 100vh;
|
||||
|
||||
.login-right-title {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
margin-bottom: 32px;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -75,7 +94,7 @@
|
||||
background-repeat: no-repeat;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-image: url(data:image/png;base64,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);
|
||||
background-image: url("data:image/png;base64,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");
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
<template>
|
||||
<div class="qrlogin-main">
|
||||
<div class="qrlogin-left">
|
||||
<AFlex style="margin-left: 20px;" :vertical="false" align="center" justify="flex-start">
|
||||
<img class="qrlogin-header-logo" src="@/assets/svgs/logo-album.svg" alt="logo" @click="router.push('/')">
|
||||
<span class="qrlogin-header-logo-text" @click="router.push('/')">S.Album</span>
|
||||
</AFlex>
|
||||
<BoxDog/>
|
||||
</div>
|
||||
<div class="qrlogin-right">
|
||||
|
||||
@@ -18,6 +18,25 @@
|
||||
|
||||
.qrlogin-left {
|
||||
width: 50%;
|
||||
background: transparent;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.qrlogin-header-logo {
|
||||
display: inline-block;
|
||||
width: 45px;
|
||||
height: 45px;
|
||||
padding: 1rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.qrlogin-header-logo-text {
|
||||
font-size: 25px;
|
||||
font-family: "Comic Sans MS", cursive;
|
||||
font-weight: bolder;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.qrlogin-right {
|
||||
@@ -84,7 +103,7 @@
|
||||
background-repeat: no-repeat;
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
background-image: url(data:image/png;base64,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);
|
||||
background-image: url("data:image/png;base64,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");
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
|
||||
@@ -42,5 +42,6 @@
|
||||
"src/**/*.ts",
|
||||
"src/**/*.tsx",
|
||||
"src/**/*.vue",
|
||||
"auto-import.d.ts"
|
||||
]
|
||||
}
|
||||
|
||||
@@ -60,6 +60,10 @@ export default defineConfig(({mode}: { mode: string }): object => {
|
||||
'@': path.resolve(__dirname, 'src')
|
||||
}
|
||||
},
|
||||
optimizeDeps: {
|
||||
exclude: ["vite"],
|
||||
force: true,
|
||||
},
|
||||
plugins: [
|
||||
vue(),
|
||||
vitePluginBundleObfuscator(defaultObfuscatorConfig),
|
||||
|
||||
Reference in New Issue
Block a user