SCHISANDRA/schisandra-cloud-album-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

🚧 update sidebar

Browse Source
This commit is contained in:
landaiqing
2024-12-06 00:16:23 +08:00
parent 2a1bb215ac
commit dbdfd835bd
54 changed files with 1544 additions and 1525 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
components.d.ts vendored
View File

@@ -13,33 +13,44 @@ declare module 'vue' {
AButton: typeof import('ant-design-vue/es')['Button']
ACard: typeof import('ant-design-vue/es')['Card']
ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
ACol: typeof import('ant-design-vue/es')['Col']
AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
ADivider: typeof import('ant-design-vue/es')['Divider']
ADropdown: typeof import('ant-design-vue/es')['Dropdown']
AEmpty: typeof import('ant-design-vue/es')['Empty']
AFlex: typeof import('ant-design-vue/es')['Flex']
AFloatButton: typeof import('ant-design-vue/es')['FloatButton']
AFloatButtonGroup: typeof import('ant-design-vue/es')['FloatButtonGroup']
AForm: typeof import('ant-design-vue/es')['Form']
AFormItem: typeof import('ant-design-vue/es')['FormItem']
AImage: typeof import('ant-design-vue/es')['Image']
AImagePreviewGroup: typeof import('ant-design-vue/es')['ImagePreviewGroup']
AInput: typeof import('ant-design-vue/es')['Input']
AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
ALayout: typeof import('ant-design-vue/es')['Layout']
ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
Alert: typeof import('./src/components/MyUI/Alert/Alert.vue')['default']
AlertOutlined: typeof import('@ant-design/icons-vue')['AlertOutlined']
AList: typeof import('ant-design-vue/es')['List']
AListItem: typeof import('ant-design-vue/es')['ListItem']
AllPhoto: typeof import('./src/views/Photograph/AllPhoto/AllPhoto.vue')['default']
AMenu: typeof import('ant-design-vue/es')['Menu']
AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
AMenuItemGroup: typeof import('ant-design-vue/es')['MenuItemGroup']
AModal: typeof import('ant-design-vue/es')['Modal']
AnimatedNature: typeof import('./src/components/AnimatedNature/AnimatedNature.vue')['default']
AnimatedSvgIllustration: typeof import('./src/components/AnimatedSvgIllustration/AnimatedSvgIllustration.vue')['default']
APagination: typeof import('ant-design-vue/es')['Pagination']
APopover: typeof import('ant-design-vue/es')['Popover']
AProgress: typeof import('ant-design-vue/es')['Progress']
AQrcode: typeof import('ant-design-vue/es')['QRCode']
ARadio: typeof import('ant-design-vue/es')['Radio']
ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
ARow: typeof import('ant-design-vue/es')['Row']
ASkeleton: typeof import('ant-design-vue/es')['Skeleton']
ASpace: typeof import('ant-design-vue/es')['Space']
ASpin: typeof import('ant-design-vue/es')['Spin']
ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
ATabPane: typeof import('ant-design-vue/es')['TabPane']
ATabs: typeof import('ant-design-vue/es')['Tabs']
ATag: typeof import('ant-design-vue/es')['Tag']
@@ -47,8 +58,10 @@ declare module 'vue' {
ATooltip: typeof import('ant-design-vue/es')['Tooltip']
AUpload: typeof import('ant-design-vue/es')['Upload']
Avatar: typeof import('./src/components/MyUI/Avatar/Avatar.vue')['default']
BackgroundAnimation: typeof import('./src/components/BackgroundAnimation/BackgroundAnimation.vue')['default']
BackTop: typeof import('./src/components/MyUI/BackTop/BackTop.vue')['default']
Badge: typeof import('./src/components/MyUI/Badge/Badge.vue')['default']
BarsOutlined: typeof import('@ant-design/icons-vue')['BarsOutlined']
BoxDog: typeof import('./src/components/BoxDog/BoxDog.vue')['default']
Breadcrumb: typeof import('./src/components/MyUI/Breadcrumb/Breadcrumb.vue')['default']
Button: typeof import('./src/components/MyUI/Button/Button.vue')['default']
@@ -68,6 +81,7 @@ declare module 'vue' {
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']
CustomerServiceOutlined: typeof import('@ant-design/icons-vue')['CustomerServiceOutlined']
DatePicker: typeof import('./src/components/MyUI/DatePicker/DatePicker.vue')['default']
Descriptions: typeof import('./src/components/MyUI/Descriptions/Descriptions.vue')['default']
Dialog: typeof import('./src/components/MyUI/Dialog/Dialog.vue')['default']
@@ -77,9 +91,11 @@ declare module 'vue' {
EffectsCard: typeof import('./src/components/EffectsCard/EffectsCard.vue')['default']
Ellipsis: typeof import('./src/components/MyUI/Ellipsis/Ellipsis.vue')['default']
Empty: typeof import('./src/components/MyUI/Empty/Empty.vue')['default']
EnterOutlined: typeof import('@ant-design/icons-vue')['EnterOutlined']
EyeOutlined: typeof import('@ant-design/icons-vue')['EyeOutlined']
Flex: typeof import('./src/components/MyUI/Flex/Flex.vue')['default']
FloatButton: typeof import('./src/components/MyUI/FloatButton/FloatButton.vue')['default']
Folder: typeof import('./src/components/Folder/Folder.vue')['default']
ForgetPage: typeof import('./src/views/Forget/ForgetPage.vue')['default']
GaugeChart: typeof import('./src/components/MyUI/GaugeChart/GaugeChart.vue')['default']
GradientText: typeof import('./src/components/MyUI/GradientText/GradientText.vue')['default']
@@ -87,6 +103,7 @@ declare module 'vue' {
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']
LikeOutlined: typeof import('@ant-design/icons-vue')['LikeOutlined']
List: typeof import('./src/components/MyUI/List/List.vue')['default']
LoadingBar: typeof import('./src/components/MyUI/LoadingBar/LoadingBar.vue')['default']
LocationAlbum: typeof import('./src/views/Album/LocationAlbum/LocationAlbum.vue')['default']
@@ -99,6 +116,7 @@ declare module 'vue' {
Modal: typeof import('./src/components/MyUI/Modal/Modal.vue')['default']
NotFound: typeof import('./src/views/404/NotFound.vue')['default']
Notification: typeof import('./src/components/MyUI/Notification/Notification.vue')['default']
NotificationOutlined: typeof import('@ant-design/icons-vue')['NotificationOutlined']
NumberAnimation: typeof import('./src/components/MyUI/NumberAnimation/NumberAnimation.vue')['default']
Pagination: typeof import('./src/components/MyUI/Pagination/Pagination.vue')['default']
PeopleAlbum: typeof import('./src/views/Album/PeopleAlbum/PeopleAlbum.vue')['default']
@@ -128,10 +146,12 @@ declare module 'vue' {
Segmented: typeof import('./src/components/MyUI/Segmented/Segmented.vue')['default']
Select: typeof import('./src/components/MyUI/Select/Select.vue')['default']
SendOutlined: typeof import('@ant-design/icons-vue')['SendOutlined']
SettingOutlined: typeof import('@ant-design/icons-vue')['SettingOutlined']
Skeleton: typeof import('./src/components/MyUI/Skeleton/Skeleton.vue')['default']
Slider: typeof import('./src/components/MyUI/Slider/Slider.vue')['default']
Space: typeof import('./src/components/MyUI/Space/Space.vue')['default']
Spin: typeof import('./src/components/MyUI/Spin/Spin.vue')['default']
StarButton: typeof import('./src/components/StarButton/StarButton.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']
@@ -146,6 +166,7 @@ declare module 'vue' {
ThingAlbum: typeof import('./src/views/Album/ThingAlbum/ThingAlbum.vue')['default']
Timeline: typeof import('./src/components/MyUI/Timeline/Timeline.vue')['default']
Tooltip: typeof import('./src/components/MyUI/Tooltip/Tooltip.vue')['default']
TranslationOutlined: typeof import('@ant-design/icons-vue')['TranslationOutlined']
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']

15
package.json
View File

@@ -25,20 +25,21 @@
"animejs": "^3.2.2",
"ant-design-vue": "^4.2.6",
"autofit.js": "^3.2.2",
"axios": "^1.7.7",
"axios": "^1.7.9",
"browser-image-compression": "^2.0.2",
"buffer": "^6.0.3",
"crypto-js": "^4.2.0",
"echarts": "^5.5.1",
"eslint": "9.16.0",
"go-captcha-vue": "^2.0.4",
"go-captcha-vue": "^2.0.5",
"gsap": "^3.12.5",
"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.1",
"pinia": "^2.2.8",
"pinia": "^2.3.0",
"pinia-plugin-persistedstate": "^4.1.3",
"qrcode": "^1",
"seedrandom": "^3.0.5",
@@ -58,12 +59,12 @@
"@vitejs/plugin-vue": "^5.2.1",
"eslint-plugin-vue": "^9.32.0",
"globals": "^15.13.0",
"sass": "^1.81.0",
"sass": "^1.82.0",
"typescript": "^5.7.2",
"typescript-eslint": "^8.15.0",
"typescript-eslint": "^8.17.0",
"unplugin-vue-components": "^0.27.5",
"vite": "^6.0.1",
"vite-plugin-bundle-obfuscator": "1.3.1",
"vite": "^6.0.2",
"vite-plugin-bundle-obfuscator": "1.3.2",
"vite-plugin-chunk-split": "^0.5.0",
"vue-tsc": "^2.1.10"
}

30
src/assets/styles/theme.scss
View File

@@ -2,7 +2,7 @@
--background-color: #ffffff;
--text-color: #000000;
// 着陆页背景颜色
--landing-background-color-main: rgba(147,197,253,.2);
--landing-background-color-main: rgba(147, 197, 253, .2);
// 评论文字颜色
--comment-text-color: #767779;
// 评论子评论背景颜色
@@ -14,11 +14,25 @@
// 举报弹窗文字颜色
--comment-report-text-color: rgba(15, 15, 16, 0.58);
// 评论框边框颜色
--comment-child-box-border-color: rgba(147,197,253,.2);
--comment-child-box-border-color: rgba(147, 197, 253, .2);
// 白色
--white-color: #ffffff;
// 主页文件动图
--size: 80px;
--size-folder-back: var(--size);
--size-page-1: calc(var(--size) * 0.55);
--size-page-2: calc(var(--size) * 0.65);
--size-folder-front: var(--size);
--ratio-page-1: 0.95;
--ratio-page-2: 1.05;
--ratio-page-2-height: 0.5;
--ratio-page-2-offset: 0;
--scale-folder: 1;
--scale-pages: 0.7;
--opacity-page-2: 1;
}
[data-dark="dark"] {
@@ -52,13 +66,13 @@
overflow-x: hidden;
}
#nprogress .bar {
background: #48c453 !important; //自定义颜色
html {
font-size: 16px;
}
#nprogress .peg {
box-shadow: 0 0 10px cyan, 0 0 5px cyan !important;
@media (max-width: 768px) {
html {
font-size: 14px;
}
}

1
src/assets/svgs/ai.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733414666431" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="18408" width="200" height="200"><path d="M969.847188 775.053748c-16.029492 87.336174-110.2743 181.576923-197.610474 197.610474-167.775892 27.533058-335.555843 27.533058-503.331735 0-87.336174-16.029492-181.580982-110.2743-197.606415-197.610474-27.537117-167.775892-27.537117-335.555843 0-503.331735 16.029492-87.336174 110.2743-181.580982 197.606415-197.606415 167.775892-27.537117 335.555843-27.537117 503.331735 0 87.336174 16.029492 181.576923 110.270241 197.610474 197.606415 27.533058 167.779951 27.533058 335.555843 0 503.331735z" fill="#B1C24C" p-id="18409"></path><path d="M845.719088 463.288448c-1.944322 50.994811-15.213608 92.203067-69.362361 115.299499-52.143544 23.985381-145.178732 29.858937-260.29963 30.719472-115.124957-0.860535-208.156086-6.734092-260.29963-30.719472-54.152812-23.096432-67.418039-64.304688-69.358301-115.299499 1.940263-50.994811 15.209548-92.203067 69.358301-115.2995 52.143544-23.98944 145.174673-29.862997 260.29963-30.723531 115.120898 0.860535 208.156086 6.734092 260.29963 30.719472 54.148753 23.100491 67.422098 64.308747 69.362361 115.303559z" fill="#6A7622" p-id="18410"></path><path d="M428.432725 474.227795c1.412576 38.776839-13.833504 54.018861-52.606284 52.606284-38.77278 1.412576-54.018861-13.829445-52.606285-52.606284-1.412576-38.77278 13.833504-54.018861 52.606285-52.606285 38.77278-1.412576 54.018861 13.833504 52.606284 52.606285zM720.884699 474.227795c1.412576 38.776839-13.833504 54.018861-52.606284 52.606284-38.77278 1.412576-54.018861-13.829445-52.606285-52.606284-1.412576-38.77278 13.833504-54.018861 52.606285-52.606285 38.768721-1.412576 54.014802 13.833504 52.606284 52.606285z" fill="#FFFFFF" p-id="18411"></path><path d="M595.214131 751.486457c-0.426208 11.300609-3.369075 20.437704-15.371914 25.556263-11.560393 5.317456-32.180758 6.620436-57.700488 6.811215-25.515672-0.190779-46.136036-1.493759-57.692371-6.811215-12.002838-5.118559-14.945705-14.255654-15.375973-25.556263 0.430267-11.304668 3.373134-20.437704 15.375973-25.560322 11.556334-5.317456 32.176699-6.616377 57.692371-6.807156 25.519731 0.190779 46.140095 1.4897 57.700488 6.807156 11.998779 5.122618 14.941646 14.255654 15.371914 25.560322z" fill="#6A7622" p-id="18412"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

1
src/assets/svgs/album.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733286825999" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="27851" width="200" height="200"><path d="M349.658537 187.317073C435.874341 187.317073 505.756098 257.198829 505.756098 343.414634V499.512195H349.658537C263.442732 499.512195 193.560976 429.630439 193.560976 343.414634S263.442732 187.317073 349.658537 187.317073z" fill="#5B7DFE" p-id="27852"></path><path d="M673.442341 187.317073c86.203317 0 156.097561 69.881756 156.097561 156.097561S759.633171 499.512195 673.442341 499.512195h-156.097561V343.414634c0-86.215805 69.881756-156.097561 156.097561-156.097561z" fill="#FFB154" p-id="27853"></path><path d="M517.34478 510.763707h156.097561c86.203317 0 156.097561 69.894244 156.097561 156.097561 0 86.215805-69.894244 156.097561-156.097561 156.097561-86.215805 0-156.097561-69.881756-156.097561-156.097561v-156.097561z" fill="#00D5AC" p-id="27854"></path><path d="M349.658537 510.763707H505.756098v156.097561c0 86.215805-69.881756 156.097561-156.097561 156.097561S193.560976 753.077073 193.560976 666.861268c0-86.203317 69.881756-156.097561 156.097561-156.097561z" fill="#FF607C" p-id="27855"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

1
src/assets/svgs/all-photo.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733287432470" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="66563" width="200" height="200"><path d="M512 512m-470.373984 0a470.373984 470.373984 0 1 0 940.747968 0 470.373984 470.373984 0 1 0-940.747968 0Z" fill="#A3D9FF" p-id="66564"></path><path d="M592.055154 294.166894m-79.08943 0a79.089431 79.089431 0 1 0 158.178861 0 79.089431 79.089431 0 1 0-158.178861 0Z" fill="#FFED7F" p-id="66565"></path><path d="M592.055154 389.906732c-52.794276 0-95.739837-42.949724-95.739837-95.739838s42.949724-95.739837 95.739837-95.739837 95.739837 42.949724 95.739838 95.739837-42.945561 95.739837-95.739838 95.739838z m0-158.178862c-34.428878 0-62.443187 28.010146-62.443187 62.439024s28.010146 62.439024 62.443187 62.439025 62.439024-28.010146 62.439025-62.439025-28.005984-62.439024-62.439025-62.439024z" fill="#6E6E96" p-id="66566"></path><path d="M107.153691 751.557724C189.090341 889.726959 339.714081 982.373984 512 982.373984c117.464455 0 224.86374-43.066276 307.291577-114.250927v-1.219642l-413.745951-413.741789-298.391935 298.396098zM602.461659 650.073496l216.829918 216.829919 1.128065 0.245593C919.643577 780.904065 982.373984 653.782374 982.373984 512c0-68.528911-14.664846-133.627837-41.018277-192.345496l-7.813203-0.661854-331.080845 331.080846z" fill="#C1F0CE" p-id="66567"></path><path d="M516.162602 1003.186992C247.61652 1003.186992 29.138211 784.708683 29.138211 516.162602 29.138211 247.61652 247.61652 29.138211 516.162602 29.138211c268.546081 0 487.02439 218.478309 487.02439 487.024391 0 268.546081-218.478309 487.02439-487.02439 487.02439z m0-940.747968C265.977756 62.439024 62.439024 265.977756 62.439024 516.162602s203.538732 453.723577 453.723578 453.723577 453.723577-203.538732 453.723577-453.723577S766.347447 62.439024 516.162602 62.439024z" fill="#6E6E96" p-id="66568"></path><path d="M516.162602 1003.186992c-86.086764 0-170.695805-22.773593-244.681887-65.85652a490.017301 490.017301 0 0 1-174.483772-173.118439 16.637919 16.637919 0 0 1 2.547512-20.263545l298.391935-298.396098a16.650407 16.650407 0 0 1 23.547838 0l413.745951 413.741789a16.654569 16.654569 0 0 1 4.878569 11.771837v1.219643a16.646244 16.646244 0 0 1-5.769366 12.600195A486.924488 486.924488 0 0 1 516.162602 1003.186992z m-383.79187-244.973268C215.15239 889.110894 361.014114 969.886179 516.162602 969.886179c103.145106 0 203.068358-35.13652 283.277528-99.290537l-389.731902-389.723577L132.370732 758.213724z" fill="#6E6E96" p-id="66569"></path><path d="M824.582244 887.957854a16.650407 16.650407 0 0 1-3.525724-0.378797l-1.128065-0.245594a16.617106 16.617106 0 0 1-8.246114-4.499772l-216.829918-216.829919a16.650407 16.650407 0 1 1 23.543675-23.543674l206.331837 206.331837A453.698602 453.698602 0 0 0 969.886179 516.162602c0-58.596943-10.94348-115.387317-32.555707-169.080716l-252.107968 252.103805a16.650407 16.650407 0 1 1-23.543675-23.543675l264.258602-264.262764a16.633756 16.633756 0 0 1 13.178797-4.81613l7.813203 0.661854a16.658732 16.658732 0 0 1 13.786536 9.773788C988.892618 379.80826 1003.186992 446.813659 1003.186992 516.162602a487.053528 487.053528 0 0 1-167.682081 367.711739 16.625431 16.625431 0 0 1-10.922667 4.083513z" fill="#6E6E96" p-id="66570"></path><path d="M512 37.463415c-36.16052 0-71.363642 4.091837-105.180618 11.817626A445.539902 445.539902 0 0 1 489.105691 41.626016C733.941593 41.626016 932.422764 240.107187 932.422764 484.943089S733.941593 928.260163 489.105691 928.260163 45.788618 729.778992 45.788618 484.943089c0-28.118374 2.647415-55.61652 7.655024-82.286309A471.789268 471.789268 0 0 0 41.626016 507.837398c0 259.779642 210.594341 470.373984 470.373984 470.373984s470.373984-210.594341 470.373984-470.373984S771.779642 37.463415 512 37.463415z" fill="#6E6E96" opacity=".15" p-id="66571"></path><path d="M400.217496 466.819122l321.735805 395.409691 41.717593-29.221463z" fill="#6E6E96" opacity=".15" p-id="66572"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.8 KiB

1
src/assets/svgs/community.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733334490578" class="icon" viewBox="0 0 1534 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="62583" width="200" height="200"><path d="M298.303766 512.138854a469.206883 469.206883 0 1 0 938.413767 0 469.206883 469.206883 0 1 0-938.413767 0z" fill="#FFC100" p-id="62584"></path><path d="M1309.742558 505.569122v6.398739c0 280.094588-237.738314 511.861146-527.601504 511.861146a530.118402 530.118402 0 0 1-396.201858-175.183863l-7.635689 1.321946a1097.985266 1097.985266 0 0 1-140.014295 9.661607c-120.50209 0-205.19364-28.96282-231.234579-96.593065-41.951291-111.628452 111.095474-235.840391 250.10881-319.550981l0.660973-5.609771A524.444633 524.444633 0 0 1 778.899186 0.021719a518.536874 518.536874 0 0 1 335.440333 119.115147c1.279948 1.022958 2.409902 2.131913 3.68985 3.155872 169.255104-28.919822 367.580024-35.254564 409.809304 77.333849 39.242401 103.118799-94.353156 215.792208-218.096115 305.943535z m-527.601504 424.972686a425.84765 425.84765 0 0 0 424.674698-361.075289 2755.777724 2755.777724 0 0 1-346.508883 155.030683 2719.265211 2719.265211 0 0 1-355.63751 104.099759 426.999603 426.999603 0 0 0 277.471695 101.945847z m654.60733-695.405668c-6.525734-19.323213-74.901948-45.065164-234.603442-25.76395a714.366895 714.366895 0 0 0-42.975249-48.925007 743.45771 743.45771 0 0 1 39.733381 45.704138 500.621604 500.621604 0 0 1 91.176285 186.744392c-19.537204 12.796479-39.072408 28.96282-61.85048 41.845295a181.88159 181.88159 0 0 1-26.061938 16.102344A423.757735 423.757735 0 0 0 778.814189 99.917649c-237.738314 0-429.899485 186.723392-429.899485 415.313079a409.489317 409.489317 0 0 0 68.397214 225.367818c-35.83054 6.397739-71.66008 9.661606-104.227754 12.796479a492.346941 492.346941 0 0 1-57.904641-191.351204C127.215737 651.215188 94.947052 714.856595 101.407788 730.852943c6.398739 22.543082 84.67055 38.645426 214.939243 25.762951 29.304806-3.219869 65.134346-6.397739 104.227754-12.796479a2411.102766 2411.102766 0 0 0 403.816548-112.695408 2365.973605 2365.973605 0 0 0 374.53374-173.839918c3.241868 0 3.241868-3.219869 6.504735-3.219869 9.767602-6.399739 16.272337-9.662606 26.061938-16.103343 22.778072-16.102344 42.335275-28.983819 61.85048-41.844296 120.607086-86.931458 149.910892-144.878097 143.406158-160.980441z" fill="#2E2E2E" p-id="62585"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 2.3 KiB

1
src/assets/svgs/dinosaur-comfort.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 75 KiB

1
src/assets/svgs/dinosaur-contemplation.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 66 KiB

1
src/assets/svgs/dinosaur-excited.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 91 KiB

1
src/assets/svgs/dinosaur-glad.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 67 KiB

352
src/assets/svgs/dinosaur-greet.svg
View File

@@ -1,352 +0,0 @@
<svg xml:space="preserve" style="enable-background:new 0 0 1024 1024;" viewBox="0 0 1024 1024" y="0px" x="0px" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" id="图层_1" version="1.1">
<style type="text/css">
.st0{fill:#FFC156;}
.st1{fill:#FFD9BF;}
.st2{fill:#FFA246;}
.st3{fill:#FE6048;}
.st4{fill:#DF615D;}
.st5{fill:#F4C5A9;}
.st6{fill:#F88B79;}
.st7{fill:#B14F59;}
.st8{fill:#A7343F;}
.st9{fill:#63344A;}
.st10{fill:#760906;}
.st11{fill:#C33935;}
.st12{fill:#CF4847;}
.st13{fill:#FFA490;}
.st14{fill:#FFBCA9;}
.st15{fill:#6C3D4F;}
.st16{fill:#FEF2E1;}
.st17{fill:#E54A3E;}
.st18{fill:#FEE09C;}
.st19{fill:#7D434D;}
.st20{fill:#FF8F53;}
.st21{fill:#FF8044;}
.st22{fill:#958A9C;}
.st23{fill:#E2917E;}
.st24{fill:#F6F7F9;}
.st25{fill:#F0D1CD;}
.st26{fill:#FBB2B1;}
</style>
<title>8</title>
<g>
<path d="M621.9,280.8c0.3,3.4-1.6,6.5-5,7.8c-0.3,0-0.3,0.3-0.3,0.5c0,0.3,0,0.5,0,0.8c0,0.5,0.5,0.8,0.8,0.8h0.3
c1.8-0.5,3.6-1,5.5-1.8c1.6-0.5,3.4-1,5.2-1c13.6-0.8,26.8-2.6,39.9-5.5c2.6-0.8,5.5,0.8,6.5,3.4c0.8,8.3-0.8,16.7-4.4,24.2
c-6,12-13.6,23.5-22.4,33.6c-0.5,0.5-0.5,1.3,0.3,1.8c0.3,0.3,0.5,0.3,0.8,0.3l2.1,0.3l-26.3,13.6L596.9,377c-0.8,0.3-1,1-0.5,1.8
v0.3c0.3,0.3,0.5,0.8,1,0.8c-0.3,0.3-0.5,0.8-0.5,1.3c0,0.8-0.3,1-1,0.5L553.7,347c0.5-0.3,0.8-0.3,1.3-0.3c0.8,0,1-0.5,1-1
c0-0.5-0.3-1-0.8-1.3c-13-10.7-27.1-20.1-42-27.9c-24.8-12.3-52.1-18.8-79.8-19c-10.4-0.3-20.6-0.5-30.2-0.5
c-2.3,0-4.7,0.5-6.8,1.6c-3.9,1.8-5,0.8-3.4-3.1c2.6-5.7,6-11.2,10.4-15.9c3.6-4.2,3.6-14.1,4.4-18c2.6-10.9,8.3-20.9,16.4-28.7
c2.1-1.8,5.2-2.1,7.3-0.3c3.9,3.4,8.1,6.8,12,9.9c8.3,6.8,17.7,10.7,27.4,15.9c12.3,6.5,18.2,14.1,26.1,25.5c0.5,1,1.6,1.6,2.6,2.1
c0.5,0.3,1,0,1.3-0.8c0-0.3,0-0.3,0-0.5c-0.3-1.8-0.5-3.6,0-5.5c0.3-1.3,0.8-1.6,1.8-0.5c3.6,2.9,4.2,8.3,1.3,12
c-0.5,0.8-0.3,1.8,0.5,2.1c0.3,0,0.3,0.3,0.5,0.3l0.8,0.3c0.5,0,0.8,0,1-0.5c3.9-8.3,9.4-20.1,16.2-26.1c0.8-0.5,1.6-0.5,2.3,0
c4.4,3.1,7.8,7.3,10.4,12c0.3,0.5,1,0.8,1.6,0.5c0.3,0,0.5-0.3,0.5-0.5c5.2-10.2,14.3-19.5,25.5-21.6c7-1.3,13.6-3.6,19.8-7
c2.9-1.6,6.3-0.5,7.8,2.3c2.9,5.5,3.9,11.5,3.4,17.7c0,1,0.5,1.8,1.6,2.1c2.9,0.8,5.7,1,8.6,0.8
C611.5,271.9,619.3,273.5,621.9,280.8z" class="st0"></path>
<path d="M350.3,313.4c-1-0.3-1.8,0.3-2.6,0.8c-0.5,0.5-1,1.6-1,2.3c-0.3,1.6-1,3.1-1.6,4.7l-7,4.4
c-9.6,4.7-18.5,11.2-26.1,19c-0.3-0.3-0.3-0.8-0.5-1c0-0.5-0.5-1-1-1l0,0h-1l13.3-15.4c0.5-0.5,1-1,1.6-1c1.6-0.5,2.9-1.8,3.4-3.4
c0.3-1,0-1.6-1-1.6h-5.2c-0.5,0-1-0.3-1.6-0.5c-3.9-3.1-8.3-6-12.8-8.6c-4.2-2.6-8.3-5.7-12-8.9c-2.9-2.6-7.6-3.6-9.6-8.3
c-0.3-0.8-1-1-1.8-0.8c-0.5,0.3-0.8,0.5-0.8,0.8c-0.3,1-0.5,2.1-0.5,3.1c-1-6.5-0.8-13.3,0.5-19.8c0.3-1.6,1.6-2.9,3.4-2.9
c9.9,0,19.8,2.1,29.2,6c2.1,0.8,4.4,0,5.2-2.1c0.3-0.3,0.3-0.8,0.3-1c0.5-7.3,7-12.8,14.6-12.3c0.5,0,1.3,0.3,1.8,0.3
c7.8,1.8,15.1,4.7,22.2,8.3c9.6,5.2,16.4,14.3,22.4,23.5c1,1.6,0.5,3.4-0.8,4.4c-0.3,0.3-0.8,0.5-1,0.5
C369.9,305.5,360,308.9,350.3,313.4z" class="st0"></path>
<path d="M674.9,285.7c-0.8-2.6-3.6-4.2-6.5-3.4c-13,2.9-26.6,4.7-39.9,5.5c-1.8,0-3.6,0.5-5.2,1
c-1.8,0.8-3.6,1.3-5.5,1.8c-0.5,0.3-1,0-1-0.5v-0.3c0-0.3,0-0.5,0-0.8s0.3-0.5,0.3-0.5c3.1-1.3,5-4.4,5-7.8c1,3.1,2.9,3.9,5.5,2.6
c13.3-6,28.2-7,42-2.9C673,281.3,674.9,283.1,674.9,285.7z" class="st1"></path>
<path d="M309.7,342.5c-1.8,1.3-3.4,3.1-4.7,5c-0.8,1-2.1,1-3.6-0.3c-9.9-14.6-16.2-31.5-18.2-49.3c0-1,0-2.1,0.5-3.1
c0.3-0.8,1-1,1.8-0.8c0.5,0.3,0.8,0.5,0.8,0.8c2.1,4.7,6.8,5.7,9.6,8.3c3.6,3.4,7.8,6.3,12,8.9c4.4,2.6,8.6,5.5,12.8,8.6
c0.5,0.3,1,0.5,1.6,0.5h5.2c1,0,1.3,0.5,1,1.6c-0.5,1.6-1.8,2.9-3.4,3.4c-0.8,0.3-1.3,0.5-1.6,1L309.7,342.5z" class="st2"></path>
<path d="M575,690.3l2.1,0.3C576.3,690.5,575.8,690.3,575,690.3z" class="st3"></path>
<path d="M685.8,640c-0.8,0-1.8,0-2.3-0.5c-6.5-3.9-12-9.6-15.9-16.2c-1.3-2.3-1-5.2,0.5-7.3l9.9-13.3
c2.3-3.9,3.1-6.8,2.6-8.6c-0.3-0.5-0.3-1.3,0-1.8c0.5-1.3,0.5-2.9-0.3-4.2c-6.5,2.1-12.8,5.2-18,9.6c-0.5,0.3-1,0.3-1.6,0
c-0.3-0.3-0.3-0.5-0.3-0.8c0-0.3,0-0.5,0.3-0.8c5.5-7.8,11.5-14.9,18.5-21.4c0.5-0.5,1.3-0.5,1.6,0l8.9,7.6
c0.5,0.5,0.8,1.3,0.8,2.1c0,0.5-0.3,0.8-0.5,1.3c1.3-0.3,2.6-1,3.4-2.1c0.8-0.8,0.8-1.8,0-2.6l0,0c-0.3-0.3-0.3-0.8,0-1l0,0
c0.8-0.8,1-1.8,0.8-2.9c-1-4.7-2.1-9.6-2.9-14.9c-0.3-0.8-0.5-1.8-1-2.3c-2.1-2.9-3.4-6.5-3.1-10.2c0-0.8-0.3-1.6-1-1.8l-0.8-0.5
c-1-0.3-1.6-0.8-2.1-1.8c-2.6-5.5-4.4-11.2-5.7-16.9c-2.6-12.3-7.6-23.7-14.3-34.1c-0.5-1-1.8-3.1-3.6-6.5
c-1.6-3.4-3.9-5.2-5.5-8.3c-2.1-4.4-5-8.3-8.6-11.5c-2.9-3.6-5.2-7.6-7-12c-7.3-22.2-17.5-43.3-30.2-62.8c-3.1-4.4-7-8.6-11.2-12.3
c-0.3,0.3-0.5,0.8-0.5,1.3c0,0.8-0.3,1-1,0.5l-42.2-34.7c-11.5-8.6-23.5-16.4-36.2-23.2c-21.4-11.5-44.6-18.2-68.8-20.1l-33.9-2.6
c-0.5,0-1.3,0.3-1.6,0.8c0.3,0.5,0.3,1,0,1.6c-0.3,0.8-0.3,1.6,0.3,2.3c0.8,1.8,0.5,3.9-0.8,5.5c-0.5,0.8-1.3,1.3-2.1,1.6
c-1,0.3-1.8,0.8-2.6,1.6c-0.5,0.5-1.3,1-2.1,1.3l-7.3,1.8c-2.9,0.8-5.7-1-6.3-3.6c0-0.3,0-0.5-0.3-0.8c-0.3-1.8-0.8-3.4-2.1-4.4
c-0.8-0.8-1-0.5-1,0.5c0,0.8,0.3,1.6,0.8,2.3c0.5,0.8,0.8,1.6,0.8,2.3v9.1c0,0.8,0.3,1.6,0.8,2.1c3.9,4.4,9.4,7,15.1,7.3
c2.3,0.3,4.7-0.8,6.3-2.3c0.5-0.5,1-0.5,1.6-0.3c0.8,0.3,1.6,0.3,2.1-0.5c1.8-1.8,4.2-3.6,6.3-5.2c1.6-1,3.9-1,5.5,0
c2.9,2.1,5.5,2.3,7.6,1l5-10.7c1.3-2.9,5-4.2,8.1-2.9c0,0,0,0,0.3,0c3.6,1.6,6.5,4.4,8.3,7.8c0.5,1,0.3,2.3-0.8,3.1
c-0.3,0-0.3,0.3-0.5,0.3c-2.9,0.3-5.2,1.8-7,4.2c10.9,12.8,18,29.7,21.6,50.8c4.4,26.6,4.4,53.4,0,80c-0.5,3.6-1,7.3-1.3,10.7
c1.3,0,2.1,0.3,2.3,0.5c0.5,1,0.5,2.3-0.5,3.4c-15.4,13-35.4,12-53.7,6.8c-1-0.3-2.1,0.3-2.6,1.3c-2.6,6.3-5,13.6-7.6,21.4
c-1.3,4.4-3.4,8.9-5.7,13c-7.6,12.5-22.2,17.7-35.2,9.1c-9.9-6.5-15.9-16.4-18-29.7c0-0.8-0.8-1.3-1.6-1.3
c-5.5,0.5-20.6-0.5-23.2-6.5c-0.8-0.5-1.6-1.6-2.1-2.3c-1.8-4.4-3.6-8.9-5.5-13c-1-2.1-1.6-4.4-2.1-6.8c-0.3-3.1-1-6.3-1.8-9.1
c-1.6-4.2-2.9-8.3-3.4-12.8c-2.6-24.5-1-49,4.4-73c1.6-5.7,3.9-11.2,7-16.2c0.8-1.6,1.8-3.1,3.1-4.4c1-1.3,1.8-2.9,2.6-4.2
c1.3-2.6,5-5.7,10.9-9.1c3.1-1.6,3.9-5,2.6-9.6c-9.6,4.7-18.5,11.2-26.1,19c-10.2,11.7-16.2,19.3-18.2,22.7
c-10.7,19.3-19.5,39.6-25.8,60.7c-2.9,10.2-7.6,20.9-10.4,31.5c-1,4.2-3.1,8.1-5.5,11.7c-5.2,7.8-9.9,16.2-13.8,24.8
c-1,2.3-1.8,5-2.3,7.6c-0.3,4.2-1.6,4.4-3.4,0.8c-2.9-5.7-0.3-1.3-0.3-3.9c-0.3,0.5-0.8,0.8-1.3,1l3.9,15.9c0.3-1.3,1-1.3,2.1,0
c0.5,0.5,0.8,1,1,1.6c6.3,14.9,16.2,27.9,28.7,38.1c0.5,0.5,0.5,1.3,0.3,1.8l-0.3,0.3c-0.8,0.3-1.6,0.3-2.3,0
c1.8,1.3,3.4,2.6,4.7,4.4c2.1,2.9,1.3,3.6-1.8,2.3c-1.8-1-4.2-1.6-6.3-1.6c-8.3,1-16.9,1.8-25.3,2.6c-2.6,0.3-5.2,0.8-7.8,1.8
c-2.3,1-5,1.8-7.6,2.9c-1.6,2.6-3.4,5.2-5.5,7.8c-10.9,14.1-14.9,29.5-9.1,46.9c5.2,15.6,15.6,33.9,29.7,44.3
c7.6,5.5,13,3.1,21.4,0.8c0.5,0,0.8,0,0.8,0.5c1,12,3.6,24,7.3,35.7c3.9,7,7,14.6,9.9,22.2c1,3.4,2.6,6.8,4.7,9.6
c1.8,2.9,3.6,6,5.5,9.1c1,1.6,2.1,2.9,3.4,3.9c1.3,1.3,2.6,2.6,3.4,4.2c0.5,0.8,1,1.3,1.8,1.6c1.8,0.5,3.9,0.8,5.7,0.5
c5.2-0.5,10.2-2.1,15.1-4.2c0.8-0.3,1.8-0.5,2.6-0.5c4.7,0,7.6-2.9,8.9-8.3c-9.9-6.5-18.8-14.3-26.1-23.7
c-9.6-11.5-16.9-24.5-21.6-38.6c-2.3-6.8-3.4-13.8-3.1-20.9c0.3-7.6,6-11.2,10.7-15.9c6.5-6.8,9.4-15.6,8.1-26.6
c0-0.8,0-1.6,0.5-2.3c5.5-9.1,5.5-20.3,0-29.5c-0.5-1-0.5-2.3-0.3-3.4c10.2-22.2,24.8-30,49.5-33.9c41.4-6.8,83.2-11.2,125.1-13.8
c14.9-1.3,30,1.6,43.5,8.1c11.2,6.3,21.1,14.9,29.2,24.8c1.6-3.4,2.6-7,3.1-10.9c0.3-5,0.8-9.9,2.1-14.9c0.3-0.8,0.8-1.6,1.6-1.8
c3.4-1.3,5.2-1,6,0.8c3.6-1.3,7.6-1.6,11.5-0.5c2.3,0.5,3.6,2.9,3.1,5.2c0,0.3-0.3,0.8-0.5,1c-5,8.6-12.5,6.5-19,1.6
c-1.8,8.6-1.8,17.5-0.3,26.1l14.1-0.5c0.8,0,1.6,0.3,2.3,0.5l2.1,1c0.3-2.1,1.6-1.8,3.4,0.3c0.8,0.8,1.3,1.6,1.6,2.6
c2.9,7,3.9,12.8,13,15.6c9.6,3.4,20.3,2.3,29.5-2.6c1-0.5,2.3-0.5,3.1,0.5c2.1,2.1,3.1,5,3.1,7.8c0,0.8,0.5,1.6,1.6,1.6
c0.3,0,0.5,0,0.8-0.3c3.4-2.1,6.5-4.7,9.1-7.6c0.8-0.8,1.6-1.3,2.6-1.3c1-0.3,2.1,0.5,2.3,1.6c0.3,0.5,0,1.3-0.5,1.8
c-10.2,11.7-21.1,18.8-33.1,21.4c-7.3,3.1-15.4,3.9-23.2,2.6c-3.4-1-6.5-2.6-9.4-4.7c-3.1-2.1-6.5-3.6-9.9-4.4l1,36.8
c0,0.8-0.3,1.6-1,2.1c-1.6,1.3-3.9,2.9-6.8,5c-1.8,1.3-3.1,3.1-3.4,5.5c-1.8,9.9,1,19,9.1,27.1c2.9,1.3,5.5,3.1,7.8,5.5
c1.8,0,3.6,0.3,5.2,1c-0.8-2.6-0.5-4.2,1-4.4c-9.4-1.6-15.4-6.8-17.5-15.6c-5.2-7.6-5-17.7,6.3-19.3c4.4-1,9.1,1,11.5,5
c2.9,4.2,4.7,8.9,5.2,13.8c1-2.1,1.3-4.2,1.3-6.5c0-0.3,0-0.5,0.3,0c1.3,3.4,3.1,4.4,5.5,3.4c7.6-0.8,13.3,1.3,17.5,6.3
c2.3,2.6,4.4,5.7,6,8.9c0.5-0.3,0.8-1.3,0.8-3.1c0-1,0.3-1,0.8-0.3c0.5,0.8,0.5,1.8,0,2.6c-0.3,0.5-0.3,1,0,1.6
c0,0.3,0.3,0.5,0.5,0.3l0,0c1-0.5,2.1,0,2.6,1c0.3,0.3,0.3,0.8,0.3,1c-0.3,2.6-1.6,5-3.6,6.5c-0.8,0.5-1.3,1.3-1.6,2.3
c-0.5,2.3-2.3,3.9-4.7,3.9c-0.8,0-1.6,0.5-2.3,1c-2.1,2.1-3.6,5-4.4,7.8c-0.3,1-1,1.8-1.8,2.1c-2.3,0.8-4.4,2.6-5.5,4.7
c-0.3,0.5-0.3,0.8,0.5,0.5c0.5-0.3,0.8,0,1.3,0.3c0.3,0,0.5,0.5,0.5,1c0,0.3-0.3,0.3-0.3,0.3c-0.8,1-1.3,2.1-1.6,3.1
c-0.3,0.8,0,1.3,1,1l6-1.3c1-0.3,1.6,0.3,1.6,1.3c0,0.3,0,0.8-0.3,1c-0.5,0.8-0.3,1,0.5,0.8l13.8-2.3c0.8,0,1.3-0.5,1.6-1.3
l3.1-6.3c0.3-0.8,1-1.3,1.8-1.8l7.8-3.1c0.8-0.3,1.3-0.8,1.3-1.6c0.3-1.3,0.5-2.3,1-3.6c2.3-5.5,5-10.7,7.8-15.9
c0.5-0.8,0.3-1.8-0.3-2.3c0,0-0.3,0-0.3-0.3c-0.5-0.3-1-0.8-1.3-1.6c-0.5-0.8-0.5-1.6,0.3-2.3c1.3-1.3,2.9-1.8,4.7-1.6
c15.9-6.8,30.8-15.6,44.1-26.8c4.2-3.9,8.3-8.1,12-12.5C694.7,640.5,690.2,639.4,685.8,640z M262.8,501c-5.7-5.5-5.2-15.4,1-21.9
c6.3-6.5,16.2-7.6,21.9-2.3c5.7,5.5,5.2,15.4-1,21.9C278.4,505.2,268.5,506.5,262.8,501z M281,644.4c-0.8,0.5-1.6,0.8-2.6,0.5
c-3.1-0.5-6.3-1.8-8.6-3.9c-6-5.7-2.3-13.8,2.9-18.2c0.8-0.5,1.6-0.8,2.3-1l12-0.8c0.8,0,1.3,0.3,1.6,1
C292.7,630.6,287.8,639.4,281,644.4z M286.7,613.9c-3.1,2.1-7.3,1-9.1-2.1c-0.5-1-1-2.1-1-3.1c-0.3-0.8,0-1.8,0.3-2.3
c2.1-3.9,3.1-8.3,3.9-12.5c-2.9-1-5.5-2.3-8.3-3.6c-1.6-0.5-2.3-2.3-1.6-3.9c0-0.3,0.3-0.5,0.5-0.8c0.5-0.8,1.3-1,2.1-0.8
c3.4,0.5,6.5,2.1,9.1,4.4c0.5,0.5,1.3,0.8,2.3,0.5c5-1,7.6,0.8,8.1,5.2C295.1,604,293.3,610.2,286.7,613.9L286.7,613.9z
M295.3,459.6c-0.3,2.9-2.9,4.7-5.5,4.4c-5.7-0.5-11.2,0-16.9,1.6c-3.9,1-7,3.9-10.2,5c-4.4,1.3-5.7-0.3-3.9-5
c1-2.3,2.9-4.2,5.2-5.2c2.1-1,4.2-1.6,6.5-1.6c3.1,0,6-1.8,7.6-4.4c0.5-0.8,1.3-1,2.1-1.3c3.1-0.5,6.5-0.5,9.9,0
C294,453.6,295.9,455.9,295.3,459.6L295.3,459.6z M559.6,471.1c-3.1,14.1-16.2,19.5-29.7,17.2c-8.9-1.6-14.3-7.3-16.2-16.9
c-0.5-2.6,0.8-5.5,3.1-6.8c7.6-4.7,15.9-7.6,24.8-8.3c0.8,0,1.6-0.5,2.3-1l5-4.2c0.5-0.5,1.6-0.8,2.3-0.8c1.3,0,2.6,0.8,3.4,1.8
c0.5,0.5,1,1,1.6,1.3C561.2,456.2,560.7,466.4,559.6,471.1L559.6,471.1z M588.6,514.8c3.6-7.6,9.1-14.3,15.9-19.5
c7.3-5.5,16.7-0.3,20.3,6.8c0.3,0.5,0.5,1,0.3,1.6c-0.3,1-0.8,1-1.6,0.5c-2.6-2.6-6.5-3.1-9.6-1.3c-4.7,2.3-8.9,5-13,8.1
c-3.4,2.3-7,4.2-10.9,5.2c-0.5,0.3-1.3-0.3-1.3-0.8C588.3,515.4,588.3,515.1,588.6,514.8L588.6,514.8z M643.8,569.8l-1.3,0.3
c-2.6,0.5-5.2-1.3-5.7-3.9l0,0c-1-5.7-3.1-11.2-6.3-16.2c-0.5-0.8-1.3-0.8-2.1-0.3c-0.3,0.3-0.5,0.5-0.5,0.8
c-1.3,4.2-3.9,7.8-7.6,10.4c-3.4,2.3-7.6,3.4-11.7,2.9c-9.6-1-15.9-6.8-19-16.4c-1.3-3.1-0.5-7,2.1-9.1c3.6-3.4,8.9-4.2,13.3-2.1
c0.8,0.3,1.6,0.3,2.3,0c3.9-1.8,7-4.2,9.9-7.3c1.8-1.8,2.9-4.4,2.3-7c-0.5-2.3-1.3-4.4-2.6-6.5c-0.5-1-0.3-2.3,0.8-2.9
c0.5-0.3,1-0.3,1.3-0.3l8.1,1.6c1,0.3,2.1-0.3,2.6-1c0.8-0.8,1-2.1,1-3.1c0-2.6,0.8-2.9,2.1-0.5l10.2,19.8
c4.2,8.3,6.8,19.3,7.3,33.1c0.5,3.9-2.1,7.3-6,7.8C644.1,569.8,643.8,570.1,643.8,569.8L643.8,569.8z" class="st3"></path>
<path d="M412.9,302.1c0.3,0.5,0.3,1,0,1.6c-0.3,0.8-0.3,1.6,0.3,2.3c0.8,1.8,0.5,3.9-0.8,5.5c-0.5,0.8-1.3,1.3-2.1,1.6
c-1,0.3-1.8,0.8-2.6,1.6c-0.5,0.5-1.3,1-2.1,1.3l-7.3,1.8c-2.9,0.8-5.7-1-6.3-3.6c0-0.3,0-0.5-0.3-0.8c-0.3-1.8-0.8-3.4-2.1-4.4
c-0.8-0.8-1-0.5-1,0.5c0,0.8,0.3,1.6,0.8,2.3c0.5,0.8,0.8,1.6,0.8,2.3v9.1c0,0.8,0.3,1.6,0.8,2.1c3.9,4.4,9.4,7,15.1,7.3
c2.3,0.3,4.7-0.8,6.3-2.3c0.5-0.5,1-0.5,1.6-0.3c0.8,0.3,1.6,0.3,2.1-0.5c1.8-1.8,4.2-3.6,6.3-5.2c1.6-1,3.9-1,5.5,0
c2.9,2.1,5.5,2.3,7.6,1c3.6,2.9,8.6,3.4,13,1.8c10.9,12.8,18,29.7,21.6,50.8c4.4,26.6,4.4,53.4,0,80c-0.5,3.6-1,7.3-1.3,10.7
c-15.4,16.4-42.7,11.7-61.3,3.1c-7.3-3.4-15.9-2.9-22.7,1.3c-11.7,6.8-23.5,15.6-37.5,15.9c-7.8,0.5-15.4-0.8-22.7-3.9
c-0.5-0.3-1,0-1.6,0.3c-0.3,0.3-0.3,0.8-0.3,1c-0.8-0.5-1.6-1.6-2.1-2.3c-1.8-4.4-3.6-8.9-5.5-13c-1-2.1-1.6-4.4-2.1-6.8
c-0.3-3.1-1-6.3-1.8-9.1c-1.6-4.2-2.9-8.3-3.4-12.8c-2.6-24.5-1-49,4.4-73c1.6-5.7,3.9-11.2,7-16.2c0.8-1.6,1.8-3.1,3.1-4.4
c1-1.3,1.8-2.9,2.6-4.2c1.3-2.6,5-5.7,10.9-9.1c3.1-1.6,3.9-5,2.6-9.6l6.8-4.4c1,0.3,1.3,1,1,1.8c-1.8,4.7-0.8,7.8,3.9,9.4
c1,0.3,2.1,0.3,3.1,0c4.4-1.6,9.1-1.6,13.3-0.3c1,0.3,2.1,0.3,2.9-0.3c3.6-2.1,7-5,5.7-9.9c-0.8-3.4-2.9-6-5.7-7.6
c-0.8-0.3-1-1.3-1-2.1c0.3-0.8,0.5-1.6,1-2.3l15.9-4.4l6.5,0.8c0.8,0,1.6,0.5,2.1,1.3c0.8,1.3,1.3,2.6,1.6,4.2
c0.3,2.1,2.1,3.6,4.2,3.6c0.3,0,0.5,0,1-0.3c6.5-2.1,9.6-5.5,9.9-10.2L412.9,302.1z M365.7,446.8c0-1.3-2.1-2.3-4.4-2.3
s-4.4,1-4.4,2.3c0,1.3,2.1,2.3,4.4,2.3S365.7,448.1,365.7,446.8L365.7,446.8z" class="st4"></path>
<path d="M410.6,305.5c-0.3,4.7-3.4,7.8-9.9,10.2c-2.1,0.8-4.2-0.3-5-2.3c0-0.3-0.3-0.5-0.3-1c-0.3-1.6-0.8-2.9-1.6-4.2
c-0.5-0.8-1.3-1.3-2.1-1.3l-6.5-0.8c2.1-1.8,5-2.1,7.3-1c0.8,0.3,1.6,0.5,2.3,0.3c3.1-0.8,6.5-0.3,9.4,1.3
C406.6,307.6,409.2,307.1,410.6,305.5z" class="st5"></path>
<path d="M369.4,310.5c-0.5,0.5-1,1.3-1,2.3c-0.3,0.8,0.3,1.6,1,2.1c2.9,1.6,5.2,4.4,5.7,7.6c1,5-2.1,7.8-5.7,9.9
c-0.8,0.5-2.1,0.5-2.9,0.3c-4.4-1.6-9.1-1.6-13.3,0.3c-1,0.3-2.1,0.3-3.1,0c-4.4-1.8-5.7-5-3.9-9.4c0.3-0.8,0-1.3-1-1.8
c0.5-1.6,1-2.9,1.3-4.4c0.3-0.8,0.5-1.6,1-2.3c0.8-0.8,1.6-1,2.6-0.8c-1.3,2.1-0.3,3.1,3.4,2.9c1.3-0.3,2.6-0.5,3.6-1.3
C361.3,313.1,365.5,311.5,369.4,310.5z" class="st6"></path>
<path d="M448.3,326.9c-4.4,1.6-9.4,1-13-1.8l5-10.7c1.3-2.9,5-4.2,8.1-2.9c0,0,0,0,0.3,0c3.6,1.6,6.5,4.4,8.3,7.8
c0.5,1,0.3,2.3-0.8,3.1c-0.3,0-0.3,0.3-0.5,0.3C452.5,323.3,449.9,324.6,448.3,326.9z" class="st6"></path>
<path d="M682.9,339.7c-3.6,2.3-8.1,3.6-12.5,3.9c-5.2,0-10.7,0.5-16.7,1c7.8-3.6,15.9-6.3,24-8.1
c1-0.3,2.1-0.3,3.1,0.3C682.4,337.1,682.9,338.4,682.9,339.7z" class="st6"></path>
<path d="M682.9,339.7c1,2.3,1.8,5,2.3,7.6c-5,0.5-9.9,2.3-14.3,5c-0.8,0.3-1,1-0.8,1.8l3.6,10.9
c0.5,1.8-0.5,3.4-2.1,4.2c-0.5,0.3-1,0.3-1.6,0c-2.9-0.5-5.7-1-8.6-1.3c-6.8-0.8-14.1-5.7-20.3-8.3c-0.5-0.3-1-0.3-1.6-0.3
l-14.9,0.8l26.3-13.6c0.8-0.8,1.8-1.3,2.9-1.6c5.7-0.5,11.2-0.8,16.7-1C674.9,343.3,679.3,342,682.9,339.7z" class="st7"></path>
<path d="M309.7,342.5h1c0.5,0,1,0.3,1,0.8l0,0c0,0.5,0.3,0.8,0.5,1c-10.2,11.7-16.2,19.3-18.2,22.7
c-10.7,19.3-19.5,39.6-25.8,60.7c-2.9,10.2-7.6,20.9-10.4,31.5c-1,4.2-3.1,8.1-5.5,11.7c-5.2,7.8-9.9,16.2-13.8,24.8
c-1,2.3-1.8,5-2.3,7.6c-0.3,4.2-1.6,4.4-3.4,0.8c-2.9-5.7-0.3-1.3-0.3-3.9c4.4-10.7,10.7-21.4,14.9-31.3c3.1-7.8,6.3-15.6,9.1-23.5
c2.6-7,5-14.3,6.5-21.4c3.9-14.6,8.6-28.7,14.3-42.7c0.5-1.3,0.3-2.9-0.8-3.6c-4.4-4.4-9.4-8.1-14.9-10.9
c-12-5.7-23.5-13-33.9-21.4c2.6,0,5.2,1,7.3,2.6s4.2,2.9,6.3,4.2c12.5,5.7,24.5,12.5,35.7,20.3c1.6,1,3.9,0.8,5.2-0.8l18.8-24.5
c1.6,1.3,2.9,1.3,3.6,0.3C306.3,345.7,307.9,343.8,309.7,342.5z" class="st1"></path>
<path d="M227.8,345.7c10.4,8.3,21.9,15.6,33.9,21.4c5.5,2.9,10.4,6.5,14.9,10.9c1,1,1.3,2.3,0.8,3.6
c-5.7,13.8-10.7,28.2-14.3,42.5c-1.8,7.3-3.9,14.6-6.5,21.4c-3.1,8.1-6,15.9-9.1,23.5c-3.9,9.9-10.2,20.6-14.9,31.3
c-0.3,0.5-0.8,0.8-1.3,1c-3.1-6-5-12.5-5.2-19.3c-0.3-3.1,1.8-6.3,6-8.9l9.4-31.3c0.3-0.8,0.8-1.6,1.3-2.1c2.3-2.3,3.4-5.2,3.6-8.3
c0-1,0.3-1.8,0.8-2.6c3.1-4.7,4.7-10.2,4.4-15.9c0-1.3-0.8-2.1-2.1-2.3c-11.5-2.1-15.6-13-6-20.3c6-4.7,13.8-6.3,20.9-4.2
c0.8,0.3,1.6,0,2.1-0.5l4.4-5.5c1.3-1.6,1-3.6-0.5-4.7c-0.8-0.5-1.6-0.8-2.6-0.8c-5.5,0.8-8.9-2.3-13.6-2.6
c-5.2-0.3-10.7,0.5-15.6,2.3c-0.8,0.3-1.3,0.3-2.1,0.3c-0.8-0.3-1.6,0-2.3,0.3c-2.9,2.1-6.5,3.4-10.2,3.6c-0.8,0-1.6,0.3-2.3,0.8
l-5.7,4.2c-0.8,0.5-1,1.3-1.3,2.1c-0.8,3.6-2.9,6.8-6,8.9C212.4,377.5,219,361.1,227.8,345.7z M247.9,439.3
c2.1-2.3,3.4-5.2,3.6-8.3c0-1.3,0-1.3-0.8-0.3l-4.7,9.6c-0.5,1-0.3,1.3,0.8,0.8C247.6,440.8,247.9,440,247.9,439.3L247.9,439.3z" class="st8"></path>
<path d="M685.3,347.2c3.6,16.2,7,34.4,9.6,55c1.3,7.6,0.5,15.4-2.6,22.7c-2.1,5-3.6,9.9-5.2,15.1
c-0.3,0.5,0.3,1,0.8,1.3c0.3,0,0.3,0,0.5,0c9.6-2.3,19.5-2.3,29.2,0c4.2,0.8,7,4.2,6.8,8.3c0.8,15.6-0.5,31.5-4.2,46.9
c-3.9,10.9-7.6,22.7-10.9,35.2c-3.1,11.7-10.9,16.7-23.7,14.9c-1-0.3-1.6-0.8-2.1-1.8c-2.6-5.5-4.4-11.2-5.7-16.9
c0.3-7-1.6-14.1-5-20.3c-0.8-1.3-0.3-2.9,0.8-3.6c0.5-0.3,1-0.3,1.6-0.3c8.6-0.3,13.6-5.5,14.3-14.9c0.5-6.8-1-16.2-10.2-15.4
c-3.6,0.3-7,1.3-10.4,2.6c-4.7,2.1-8.3,0.8-10.7-3.4c-0.3-0.5-0.8-0.8-1.3-0.8s-1-0.3-1.3-1.3c0-0.3,0-0.8,0.3-1
c1.6-2.1,3.4-3.9,5.2-5.7c6-4.7,5.2-7.3-2.3-8.1c-4.7-0.5-11.5-0.5-19.8-0.5c-7.3-22.2-17.5-43.3-30.2-62.8
c-3.1-4.4-7-8.6-11.2-12.3c-0.5-0.3-0.8-0.5-1-0.8c-0.5-0.5-0.3-1.6,0.3-1.8h0.3l27.9-17.5l14.9-0.8c0.5,0,1,0,1.6,0.3
c6.3,2.6,13.6,7.6,20.3,8.3c2.9,0.3,5.7,0.8,8.6,1.3c1.8,0.3,3.4-0.8,3.9-2.6c0-0.5,0-1,0-1.6l-3.6-10.9c-0.3-0.8,0-1.6,0.8-1.8
C675.4,349.3,680.1,347.8,685.3,347.2z M642.8,385.6c-0.5-0.5-1-1-1.8-1.3l-17.7-4.4c-1.8-0.5-3.6,0.8-4.2,2.3
c-0.3,0.8,0,1.6,0.3,2.1l12.3,27.1c0.8,1.6,2.9,2.3,4.4,1.6c0.3,0,0.5-0.3,0.5-0.3l14.9-10.7c1.6-1,1.8-3.1,0.8-4.7l0,0
L642.8,385.6z" class="st9"></path>
<path d="M231.7,473.7c-3.1-0.5-6.3-1.3-9.4-2.3c-6.3-1.6-10.9-6.8-12-13.3c-1.3-6.8-2.6-13.3-3.9-20.1
c-1.3-6.5-2.1-13.3-1.8-20.1c0.5-7.8,1.8-15.6,3.6-23.2c2.9-2.1,5.2-5.2,6-8.9c0.3-0.8,0.8-1.6,1.3-2.1l5.7-4.2
c0.8-0.5,1.6-0.8,2.3-0.8c3.6-0.3,7.3-1.6,10.2-3.6c0.8-0.3,1.6-0.5,2.3-0.3c0.8,0,1.3,0,2.1-0.3c5-1.8,10.4-2.6,15.6-2.3
c4.7,0.3,8.1,3.4,13.6,2.6c1.8-0.3,3.6,1,3.9,2.9c0,1-0.3,1.8-0.8,2.6l-4.4,5.5c-0.5,0.5-1.3,0.8-2.1,0.5
c-7.3-2.1-15.1-0.5-21.1,4.2c-9.4,7.3-5.2,18.2,6,20.3c1.3,0,2.1,1,2.1,2.3c0.3,5.7-1.3,11.2-4.4,15.9c-0.5,0.8-0.8,1.6-0.8,2.6
c0,3.1-1.3,6.3-3.6,8.3c-0.5,0.5-1,1.3-1.3,2.1L231.7,473.7z" class="st9"></path>
<path d="M642.8,385.6l9.1,12c1,1.6,0.8,3.6-0.5,4.7l0,0l-14.9,10.7c-1.6,1-3.6,0.8-4.7-0.8c-0.3-0.3-0.3-0.5-0.3-0.5
l-12.3-27.1c-0.8-1.6,0-3.6,1.6-4.4c0.8-0.3,1.6-0.3,2.1-0.3l17.7,4.4C641.8,384.5,642.3,385,642.8,385.6z" class="st7"></path>
<path d="M503.1,410.1c9.9,4.7,15.6,26.3,14.9,37.3c0,2.3-1.8,3.9-4.2,3.9c-3.1,0-6-2.1-6.8-5.2
c-2.9-11.2-5-22.7-6.3-34.1c-0.3-0.8,0.3-1.6,1.3-1.8C502.3,409.8,502.8,409.8,503.1,410.1z" class="st10"></path>
<path d="M247.9,439.3c0,0.8-0.3,1.6-1,1.8c-1,0.5-1.3,0.3-0.8-0.8l5-9.6c0.5-1,0.8-1,0.8,0.3
C251.3,434,250,436.9,247.9,439.3z" class="st11"></path>
<ellipse ry="4.4" rx="2.3" cy="446.9" cx="361.2" class="st8" transform="matrix(1.745299e-03 -1 1 1.745299e-03 -86.2693 807.2921)"></ellipse>
<path d="M555.7,453.3c5.5,2.6,5,12.8,3.6,18c-3.1,14.1-16.2,19.5-29.7,17.2c-8.9-1.6-14.3-7.3-16.2-16.9
c-0.5-2.6,0.5-5.5,3.1-6.8c7.6-4.7,15.9-7.6,24.8-8.3c0.8,0,1.6-0.5,2.3-1l5-4.2c0.5-0.5,1.6-0.8,2.3-0.8c1.3,0,2.6,0.8,3.4,1.8
C554.7,452.5,555.2,453.1,555.7,453.3z" class="st6"></path>
<path d="M258.8,465.6c1-2.3,2.9-4.2,5.2-5.2c2.1-1,4.2-1.6,6.5-1.6c3.1,0,6-1.8,7.6-4.4c0.5-0.8,1.3-1,2.1-1.3
c3.1-0.5,6.5-0.5,9.9,0c4.2,0.8,6,3.1,5.5,6.8c-0.3,2.9-2.9,4.7-5.5,4.4c-5.7-0.5-11.2,0-16.9,1.6c-3.9,1-7,3.9-10.2,5
C258.3,471.8,257,470.3,258.8,465.6z" class="st10"></path>
<path d="M677.5,527.6c-2.6-12.3-7.6-23.7-14.3-34.1c-0.5-1-1.8-3.1-3.6-6.5c-1.6-3.4-3.9-5.2-5.5-8.3
c-2.1-4.4-5-8.3-8.6-11.5c-2.9-3.6-5.2-7.6-7-12c8.3,0,15.1,0.3,19.8,0.5c7.6,0.8,8.3,3.4,2.3,8.1c-1.8,1.8-3.6,3.6-5.2,5.7
c-0.3,0.3-0.3,0.8-0.3,1c0.3,0.8,0.5,1.3,1.3,1.3c0.5,0,1,0.3,1.3,0.8c2.3,4.2,6,5.2,10.7,3.1c3.4-1.3,6.8-2.3,10.4-2.6
c9.1-0.8,10.9,8.6,10.2,15.4c-1,9.4-5.7,14.6-14.3,14.9c-1.6,0-2.6,1-2.6,2.6c0,0.5,0,1,0.3,1.6
C676.2,513.5,677.7,520.6,677.5,527.6z" class="st12"></path>
<path d="M468.4,468.4c1.3,0,2.1,0.3,2.3,0.5c0.5,1,0.5,2.3-0.5,3.4c-15.4,13-35.4,12-53.7,6.8c-1-0.3-2.1,0.3-2.6,1.3
c-2.6,6.3-5,13.6-7.6,21.4c-1.3,4.4-3.4,8.9-5.7,13c-7.6,12.5-22.2,17.7-35.2,9.1c-9.9-6.5-15.9-16.4-18-29.7
c0-0.8-0.8-1.3-1.6-1.3c-5.5,0.5-20.6-0.5-23.2-6.5c-0.3-0.3,0-0.5,0.3-1c0.5-0.5,1-0.5,1.6-0.3c7,3.1,14.9,4.4,22.7,3.9
c14.1-0.3,25.8-9.4,37.5-15.9c6.8-4.2,15.4-4.7,22.7-1.3C425.4,480.2,452.8,485.1,468.4,468.4z M387.4,476
c-10.4,5.5-20.9,12.8-32.3,16.9c-2.3,0.5-3.6,2.9-3.1,5c0,0,0,0,0,0.3c4.7,27.4,35.7,40.4,48.7,8.6c3.4-8.6,6.8-17.7,10.2-27.4
c0.5-1,0-2.6-1-3.1c0,0,0,0-0.3,0C402.5,472.4,394.1,472.4,387.4,476z" class="st11"></path>
<path d="M354.8,492.9c11.5-3.9,21.9-11.2,32.3-16.7c6.8-3.6,15.1-3.6,22.2,0c1.3,0.5,1.8,1.8,1.3,2.9c0,0,0,0,0,0.3
c-3.1,9.6-6.5,18.8-10.2,27.4c-13,31.8-43.8,18.8-48.7-8.6C351.1,495.8,352.4,493.5,354.8,492.9L354.8,492.9z" class="st13"></path>
<ellipse ry="14.3" rx="16.7" cy="489" cx="274.3" class="st13" transform="matrix(0.6871 -0.7266 0.7266 0.6871 -269.4631 352.3323)"></ellipse>
<path d="M600.6,511.2c-3.4,2.3-7,4.2-10.9,5.2c-0.5,0.3-1.3-0.3-1.3-0.8c0-0.3,0-0.5,0-0.8
c3.6-7.6,9.1-14.3,15.9-19.5c7.3-5.5,16.7-0.3,20.3,6.8c0.3,0.5,0.5,1,0.3,1.6c-0.3,1-0.8,1-1.6,0.5c-2.6-2.6-6.5-3.1-9.6-1.3
C609.2,505.2,604.7,508.1,600.6,511.2z" class="st14"></path>
<path d="M720,496.3c4.2,3.9,7.6,8.6,10.4,13.6c19.5,36.8,13.8,84.2-5.5,119.9c-6.3,10.4-13.6,20.1-21.6,28.9
c-3.4,3.9-6.3,8.6-7.8,13.6c-1.8,6-3.4,11.5-4.7,16.7c-0.3,1-0.8,2.1-1.8,2.9c-2.9,0-3.9-2.1-3.6-5.5c1.3-10.9,5-21.1,11.2-30.2
c0.3-0.5,0.3-1,0.3-1.3c-0.3-0.5-0.3-1,0-1.6c0.5-1.6,0-1.8-1.3-1c-1.8,0.8-3.4,2.3-4.4,4.2c-2.3,5.2-6.8,9.1-12.3,10.7
c-1,0.3-1.8,0.8-2.3,1.6c-1.8,1.6-3.9,2.9-6.3,3.6c-6.5,3.6-13.3,6.8-20.1,9.6c-2.9,1.3-6,2.1-9.4,2.3c-1.3,0.3-1.6-0.3-0.3-1
c0.5-0.3,1-0.8,1.3-1.6c15.9-6.8,30.8-15.6,44.1-26.8c4.2-3.9,8.3-8.1,12-12.5c0.3,1.6,0,3.4-0.8,5c-0.3,0.3,0,0.8,0.3,1
c0.3,0.3,0.5,0.3,0.5,0.5c0.5,0.3,1.3,0,1.8-0.5c4.7-6,7.3-13.6,7.3-21.4c0.3-12.5-2.3-25-8.1-36.2c-0.8-1.6-2.6-2.1-4.2-1.6
c-0.3,0-0.3,0.3-0.5,0.3l-16.7,12.5c2.3-3.9,3.1-6.8,2.6-8.6c-0.3-0.5-0.3-1.3,0-1.8c0.5-1.3,0.5-2.9-0.3-4.2l9.4-2.6
c1.3-0.3,2.6-1,3.4-2.1c0.8-0.8,0.8-1.8,0-2.6l0,0c-0.3-0.3-0.3-0.8,0-1l0,0c0.8-0.8,1-1.8,0.8-2.9c-1-4.7-2.1-9.6-2.9-14.9
c-0.3-0.8-0.5-1.8-1-2.3c-2.1-2.9-3.4-6.5-3.1-10.2c0-0.8-0.3-1.6-1-1.8l-0.8-0.5c12.8,1.8,20.6-3.1,23.7-14.9
C712.4,519,716,507.3,720,496.3z M720.7,553.4c2.3-2.6,2.6-6.5,0.8-9.6c-0.5-0.8-1.3-1.3-2.3-1.3l-7.8-0.3c-1,0-1.8,0.5-2.3,1.3
c-1.8,4.2,0,9.4,4.2,11.2c0.8,0.3,1.6,0.5,2.1,0.5C717.6,556.3,719.7,555.2,720.7,553.4z" class="st11"></path>
<path d="M591.4,538c3.6-3.4,8.9-4.2,13.3-2.1c0.8,0.3,1.6,0.3,2.3,0c3.9-1.8,7-4.2,9.9-7.3c1.8-1.8,2.9-4.4,2.3-7
c-0.5-2.3-1.3-4.4-2.6-6.5c-0.5-1-0.3-2.3,0.8-2.9c0.5-0.3,1-0.3,1.3-0.3l8.1,1.6c1,0.3,2.1-0.3,2.6-1c0.8-0.8,1-2.1,1-3.1
c0-2.6,0.8-2.9,2.1-0.5l10.2,19.8c4.2,8.3,6.8,19.3,7.3,33.1c0.5,3.9-2.3,7.3-6,7.8c0,0,0,0-0.3,0l-1.3,0.3
c-2.6,0.5-5.2-1.3-5.7-3.9l0,0c-1-5.7-3.1-11.2-6.3-16.2c-0.5-0.8-1.3-0.8-2.1-0.3c-0.3,0.3-0.5,0.5-0.5,0.8
c-1.3,4.2-3.9,7.8-7.6,10.4c-3.4,2.3-7.6,3.4-11.7,2.9c-9.6-1-15.9-6.8-19-16.4C588.3,544,589.1,540.4,591.4,538z" class="st15"></path>
<path d="M264.6,559.7l-3.9-3.4c-10.2-9.9-22.4-24.5-25.8-38.6c0.3-1.3,1-1.3,2.1,0c0.5,0.5,0.8,1,1,1.6
c6.3,14.9,16.2,27.9,28.7,38.1c0.5,0.5,0.5,1.3,0.3,1.8l-0.3,0.3C265.9,559.9,265.1,559.9,264.6,559.7z" class="st11"></path>
<path d="M541.1,570.1c2.3,5.5,3.9,10.9,5,16.9c2.1,9.9,7.6,19,15.6,25.3l1,36.8c0,0.8-0.3,1.6-1,2.1
c-1.6,1.3-3.9,2.9-6.8,5c-1.8,1.3-3.1,3.1-3.4,5.5c-1.8,9.9,1,19,9.1,27.1c-7,6.3-17.7,11.2-31.8,14.3
c-62.3,14.6-120.9,21.9-175.9,22.2c-18,0-35.7-0.8-53.4-2.9c-9.6-11.5-16.9-24.5-21.6-38.6c-2.3-6.8-3.4-13.8-3.1-20.9
c0.3-7.6,6-11.2,10.7-15.9c6.5-6.8,9.4-15.6,8.1-26.6c0-0.8,0-1.6,0.5-2.3c5.5-9.1,5.5-20.3,0-29.5c-0.5-1-0.5-2.3-0.3-3.4
c10.2-22.2,24.8-30,49.5-33.9c41.4-6.8,83.2-11.2,125.1-13.8c14.9-1.3,30,1.6,43.5,8.1C523.2,551.6,533.1,559.9,541.1,570.1z
M432.7,595.4c3.6-9.4-1.8-20.3-12-24.2c-10.2-3.9-21.4,0.5-25,9.9c-3.6,9.4,1.8,20.3,12,24.2C417.8,609.2,429.1,604.8,432.7,595.4
z M389.7,643.9c10.4,13.6,26.3,28.4,42,15.6c1.8-1.6,3.4-3.4,4.7-5.5c5.2-7.6,9.6-12.3,12.8-21.1c0.8-2.1,2.9-3.4,5-3.1
c16.7,1.8,31-3.1,35.7-20.6c0.3-0.5,0.8-0.8,1.3-0.8h0.3c13.8,8.3,24.5,5.7,32.3-7.8c2.1-2.9,2.6-6.8,1-10.2c-2.6-5.2-4.2-5-5,0.8
s-6,14.3-12.8,15.1c-6.8,0.8-15.6-4.7-21.4-7.6c-0.5-0.3-1.6,0-1.8,0.5c0,0.3-0.3,0.3-0.3,0.5c-1,9.4-4.7,22.7-16.2,23.2
c-6.8,0.5-13.6-1.3-19-5.5c-0.8-0.5-1.8-0.3-2.3,0.5c-0.3,0.3-0.3,0.5-0.3,0.8c-0.8,13.6-7.8,25.3-20.9,29.7c-6.3,2.1-13,2.1-19,0
c-6.3-2.1-9.6-7-13-12c-0.8-1-2.3-1.3-3.4-0.5c-0.3,0.3-0.3,0.3-0.5,0.5c-0.5,0.5-0.8,1.3-0.8,2.1
C387.9,640.2,388.4,642.3,389.7,643.9z M351.4,625.1c-2.9-0.3-5.7-0.8-8.6-1c-10.2-1-16.4-7-17.7-17.2c0-1-0.5-1.3-1.6-0.8
c-0.5,0.3-0.8,0.8-0.8,1.3c-0.5,6.8,2.6,19.8,10.7,22.2c2.1,0.5,6.8,1.6,13.8,2.6c1.3,0.3,2.9-0.3,3.9-1c0.5-0.5,1.6-0.5,2.1,0
c1.3,0.8,2.6,1,3.9,0.5c9.9,7.6,19.3,9.1,28.2,4.2c2.9-1.6,5-3.6,6.5-6.5s2.9-6,3.9-8.9c0.3-0.8,0.3-1.8,0-2.6
c-5-12.3-14.1-20.9-27.6-20.1C353.2,598.3,348.5,612.6,351.4,625.1z" class="st16"></path>
<path d="M554.2,543.3c-3.4,0.5-5.7,3.6-5.2,7l0,0c-1.8,8.6-1.8,17.5-0.3,26.1c-0.3,7.6,2.1,15.1,6.8,21.1
c1.6,5,4.7,9.4,9.1,12.3c3.4,2.1,7.3,3.9,10.9,5.7c3.4,1.6,7.3,2.1,10.9,1.8c6-0.3,11.7,0.3,17.7,1.3c-7.3,3.1-15.4,3.9-23.2,2.6
c-3.4-1-6.5-2.6-9.4-4.7c-3.1-2.1-6.5-3.6-9.9-4.4c-8.1-6.3-13.8-15.1-15.6-25.3c-1-5.7-2.6-11.5-5-16.9c1.6-3.4,2.6-7,3.1-10.9
c0.3-5,0.8-9.9,2.1-14.9c0.3-0.8,0.8-1.6,1.6-1.8C551.6,541.2,553.4,541.4,554.2,543.3z" class="st11"></path>
<path d="M549.2,550.6c-0.5-3.4,1.8-6.5,5.2-7l0,0c3.6-1.3,7.6-1.6,11.5-0.5c2.3,0.5,3.6,2.9,3.1,5.2
c0,0.3-0.3,0.8-0.5,1C563.3,557.3,555.7,555.5,549.2,550.6z" class="st0"></path>
<path d="M720.7,553.4c-1,1.8-3.1,2.9-5.2,2.1c-4.7-0.8-7.8-5-7-9.6c0-0.8,0.3-1.6,0.5-2.1c0.3-1,1.3-1.6,2.3-1.3
l7.8,0.3c1,0,1.8,0.5,2.3,1.3C723.3,546.9,723.1,550.8,720.7,553.4z" class="st8"></path>
<path d="M260.7,556.3l3.9,3.4c1.8,1.3,3.4,2.6,4.7,4.4c2.1,2.9,1.3,3.6-1.8,2.3c-1.8-1-4.2-1.6-6.3-1.6
c-8.3,1-16.9,1.8-25.3,2.6c-2.6,0.3-5.2,0.8-7.8,1.8c-2.3,1-5,1.8-7.6,2.9c3.4-6.5,9.1-11.2,15.9-13.3c7.3-1.8,14.9-1.6,22.2,0.5
c0.8,0.3,1.6,0,2.1-0.8C260.9,557.8,260.9,556.8,260.7,556.3z" class="st5"></path>
<ellipse ry="19.8" rx="18.2" cy="588.3" cx="414.3" class="st3" transform="matrix(0.3584 -0.9336 0.9336 0.3584 -283.446 764.2116)"></ellipse>
<path d="M690,585l-9.4,2.6c-6.5,2.1-12.8,5.2-18,9.6c-0.5,0.3-1,0.3-1.6,0c-0.3-0.3-0.3-0.5-0.3-0.8
c0-0.3,0-0.5,0.3-0.8c5.5-7.8,11.5-14.9,18.5-21.4c0.5-0.5,1.3-0.5,1.6,0l8.9,7.6c0.5,0.5,0.8,1.3,0.8,2.1
C690.5,584.4,690.2,584.7,690,585z" class="st13"></path>
<path d="M567.5,577.4c1.6,11.2-2.3,17.7-11.7,20.1c-4.7-6-7-13.6-6.8-21.1l14.1-0.5c0.8,0,1.6,0.3,2.3,0.5L567.5,577.4
z" class="st2"></path>
<path d="M604.2,618.6c-5.7-1-11.7-1.3-17.7-1.3c-3.6,0.3-7.6-0.5-10.9-1.8c-3.6-1.6-7.6-3.4-10.9-5.7
c-4.4-2.9-7.6-7.3-9.1-12.3c9.4-2.3,13.3-8.9,11.7-20.1c0.3-2.1,1.6-1.8,3.4,0.3c0.8,0.8,1.3,1.6,1.6,2.6c2.9,7,3.9,12.8,13,15.6
c9.6,3.4,20.3,2.3,29.5-2.6c1-0.5,2.3-0.5,3.1,0.5c2.1,2.1,3.1,5,3.1,7.8c0,0.8,0.5,1.6,1.6,1.6c0.3,0,0.5,0,0.8-0.3
c3.4-2.1,6.5-4.7,9.1-7.6c0.8-0.8,1.6-1.3,2.6-1.3c1-0.3,2.1,0.5,2.3,1.6c0.3,0.5,0,1.3-0.5,1.8C627.4,608.9,616.2,616,604.2,618.6
z" class="st17"></path>
<path d="M292.7,594.9c-0.8,6.5-4.7,6.3-12-1c-2.9-1-5.5-2.3-8.3-3.6c-1.6-0.5-2.3-2.3-1.6-3.9c0-0.3,0.3-0.5,0.5-0.8
c0.5-0.8,1.3-1,2.1-0.8c3.4,0.5,6.5,2.1,9.1,4.4c0.5,0.5,1.3,0.8,2.3,0.5C289.3,588.6,292.2,590.4,292.7,594.9z" class="st18"></path>
<path d="M389.7,643.9c-1.3-1.6-1.8-3.4-1.6-5.5c0-0.8,0.3-1.3,0.8-2.1c0.8-1,2.3-1.3,3.4-0.5c0.3,0.3,0.3,0.3,0.5,0.5
c3.6,5,6.8,9.9,13,12c6.3,2.1,13,2.1,19,0c13.3-4.4,20.1-15.9,20.9-29.7c0-1,1-1.6,1.8-1.6c0.3,0,0.5,0,0.8,0.3
c5.5,4.2,12.3,6.3,19,5.5c11.5-0.5,15.1-13.8,16.2-23.2c0-0.8,0.8-1.3,1.6-1c0.3,0,0.3,0,0.5,0.3c5.5,2.9,14.9,8.3,21.4,7.6
c6.5-0.8,12-9.6,12.8-15.1s2.3-6,5-0.8c1.6,3.4,1,7.3-1,10.2c-7.8,13.6-18.5,16.2-32.3,7.8c-0.5-0.3-1-0.3-1.3,0.3v0.3
c-4.7,17.5-19,22.4-35.7,20.6c-2.1-0.3-4.2,1-5,3.1c-3.1,8.9-7.3,13.6-12.8,21.1c-1.3,2.1-2.9,3.9-4.7,5.5
C415.8,672.3,400.1,657.2,389.7,643.9z" class="st5"></path>
<path d="M698.1,642.8c-3.6-2.1-8.1-3.1-12.3-2.9c-0.8,0-1.8,0-2.3-0.5c-6.5-3.9-12-9.6-15.9-16.2
c-1.3-2.3-1-5.2,0.5-7.3l9.9-13.3l16.7-12.5c1.3-1,3.4-0.8,4.4,0.5c0,0.3,0.3,0.3,0.3,0.5c5.5,11.2,8.3,23.7,8.1,36.2
c0,7.8-2.6,15.4-7.3,21.4c-0.3,0.5-1,0.8-1.8,0.5c-0.3,0-0.5-0.3-0.5-0.5c-0.3-0.3-0.3-0.5-0.3-1
C698.1,646.2,698.3,644.4,698.1,642.8z" class="st19"></path>
<path d="M280.7,593.8c7.3,7,11.5,7.6,12,1c2.3,9.1,0.3,15.6-6,19c-3.1,2.1-7.3,1-9.1-2.1c-0.5-1-1-2.1-1-3.1
c-0.3-0.8,0-1.8,0.3-2.3C278.9,602.4,280.2,598,280.7,593.8z" class="st20"></path>
<path d="M357.1,631.4l-5.7-6.3c-2.9-12.5,1.6-26.8,16.7-27.6c13.6-0.8,22.9,7.8,27.6,20.1c0.3,0.8,0.3,1.8,0,2.6
c-1.3,2.9-2.6,6-3.9,8.9c-1.3,2.9-3.6,5.2-6.5,6.5C376.4,640.5,367,639.2,357.1,631.4z" class="st3"></path>
<path d="M351.4,625.1l5.7,6.3c-1.3,0.5-2.9,0.3-3.9-0.5c-0.5-0.5-1.6-0.5-2.1,0c-1,0.8-2.3,1.3-3.9,1
c-7-1-11.5-2.1-13.8-2.6c-8.1-2.3-11.5-15.4-10.7-22.2c0-0.5,0.3-1,0.8-1.3c0.8-0.5,1.3-0.3,1.6,0.8c1.3,10.2,7.8,16.4,17.7,17.2
C345.6,624.3,348.5,624.8,351.4,625.1z" class="st5"></path>
<path d="M269.8,641.3c-6-5.7-2.3-13.8,2.9-18.2c0.8-0.5,1.6-0.8,2.3-1l12-0.8c0.8,0,1.3,0.3,1.6,1
c3.9,8.3-1.3,17.2-7.8,22.4c-0.8,0.5-1.6,0.8-2.6,0.5C275.3,644.9,272.1,643.3,269.8,641.3z" class="st2"></path>
<path d="M689.2,692.1c0.3,0.3,0,1-0.8,1.8c-2.3-1-3.9-0.8-4.7,0.8c-2.1,4.2-3.4,8.6-3.9,13c0.5-5-2.9-5.7-9.9-2.3
c-7.3,3.4-14.3,7.3-20.9,12c-3.6,2.6-11.2,5.5-22.4,9.1c-5.7,1.8-11.5,3.9-17.2,6.5s-11.2,5-16.7,7.3c-5.2,2.1-12,2.6-17.2,5.5
s-8.3,4.4-9.9,5c-3.4,1.3-6.8,2.6-9.6,4.2c-4.4,1.6-9.1,2.3-13.6,2.1c8.9-18.2,17.5-37.3,25.3-56.6c1-2.1,1.6-4.4,1.6-7
c1.8,0,3.6,0.3,5.2,1c11.5,1.6,28.4,0.3,36.8-8.6c0.5-0.3,0.8-1.3,0.8-3.1c0-1,0.3-1,0.8-0.3c0.5,0.8,0.5,1.8,0,2.6
c-0.3,0.5-0.3,1,0,1.6c0,0.3,0.3,0.5,0.5,0.3l0,0c1-0.5,2.1,0,2.6,1c0.3,0.3,0.3,0.8,0.3,1c-0.3,2.6-1.6,5-3.6,6.5
c-0.8,0.5-1.3,1.3-1.6,2.3c-0.5,2.3-2.3,3.9-4.7,3.9c-0.8,0-1.6,0.5-2.3,1c-2.1,2.1-3.6,5-4.4,7.8c-0.3,1-1,1.8-1.8,2.1
c-2.3,0.8-4.4,2.6-5.5,4.7c-0.3,0.5-0.3,0.8,0.5,0.5c0.5-0.3,0.8,0,1.3,0.3c0.3,0,0.5,0.5,0.5,1c0,0.3-0.3,0.3-0.3,0.3
c-0.8,1-1.3,2.1-1.6,3.1c-0.3,0.8,0,1.3,1,1l6-1.3c1-0.3,1.6,0.3,1.6,1.3c0,0.3,0,0.8-0.3,1c-0.5,0.8-0.3,1,0.5,0.8l13.8-2.3
c0.8,0,1.3-0.5,1.6-1.3l3.1-6.3c0.3-0.8,1-1.3,1.8-1.8l7.8-3.1c0.8-0.3,1.3-0.8,1.3-1.6c0.3-1.3,0.5-2.3,1-3.6
c2.3-5.5,5-10.7,7.8-15.9c0.5-0.8,0.3-1.8-0.3-2.3c0,0-0.3,0-0.3-0.3c-0.5-0.3-1-0.8-1.3-1.6c-0.5-0.8-0.5-1.6,0.3-2.3
c1.3-1.3,2.9-1.8,4.7-1.6c-0.3,0.5-0.8,1-1.3,1.6c-1.3,0.8-1,1,0.3,1c3.1-0.3,6.3-1,9.4-2.3c7-2.6,13.6-6,20.1-9.6
c2.3-0.8,4.4-2.1,6.3-3.6c0.5-0.8,1.6-1.3,2.3-1.6c5.5-1.6,9.9-5.5,12.3-10.7c1-1.8,2.6-3.1,4.4-4.2c1.3-0.8,1.8-0.5,1.3,1
c-0.3,0.5-0.3,1,0,1.6s0.3,1-0.3,1.6c-6,9.1-9.9,19.3-11.2,30.2C685.3,690,686.6,691.8,689.2,692.1z" class="st17"></path>
<path d="M580.2,674.4c-2.1,3.1-5.7,4.7-9.4,4.2c-4.4-0.8-9.1-1.8-13.3-3.6c-5.2-7.6-5-17.7,6.3-19.3
c4.4-1,9.1,1,11.5,5C577.9,664.7,579.7,669.4,580.2,674.4z" class="st21"></path>
<path d="M587.5,671l-10.4,19.5c-10.7-1-17.2-6.5-19.5-15.9c4.2,1.8,8.6,3.1,13.3,3.6c3.6,0.3,7.3-1.3,9.4-4.2
c1-2.1,1.3-4.2,1.3-6.5c0-0.3,0-0.5,0.3,0C583.1,671.2,584.9,672.3,587.5,671z" class="st17"></path>
<path d="M611,686.1c-8.3,8.9-25.5,10.2-36.8,8.6c-1-3.6,0-5.2,2.9-4.2l10.4-19.5c7.6-0.8,13.3,1.3,17.5,6.3
C607.3,679.8,609.4,683,611,686.1z" class="st19"></path>
<path d="M561,688.2c2.9,1.3,5.5,3.1,7.8,5.5c-0.3,2.3-0.8,4.7-1.6,7c-7.8,19.3-16.2,38.3-25.3,56.6
c-2.9,6.5-7,12-12.8,16.2c-2.1-0.8-4.4-1-6.8-1c-16.2,1.3-32.3,2.6-48.5,3.9c-6.3,0.5-13.6,0.8-21.4,0.8c-7,0-14.3,0-21.4,0.3
c-28.9-1.3-56-10.2-83.2-19.8c-7.8-2.9-15.4-6.8-22.2-11.7c-9.9-6.5-18.8-14.3-26.1-23.7c17.7,1.8,35.7,2.9,53.4,2.9
c55-0.3,113.6-7.6,175.9-22.2C543.2,699.4,553.9,694.7,561,688.2z" class="st5"></path>
<path d="M688.4,693.9c-0.3,4.4-1.3,8.6-3.4,12.3c-0.5,0.8-0.5,1.6-0.5,2.3v3.9c-0.3-1-1-1.6-2.1-1.6
c-0.8,0-1.6-0.5-1.8-1.3l-1-2.1c0.5-4.4,1.8-8.9,3.9-13C684.5,693.1,686.1,692.9,688.4,693.9z" class="st13"></path>
<path d="M679.8,707.7l1,2.1c0.3,0.8,1,1.3,1.8,1.3c1,0,1.8,0.5,2.1,1.6c-0.3,1-0.3,1.6,0,1.8
c-1.3-1.3-2.1-1.6-2.9-0.8c-6.5,10.2-13,20.1-19.8,29.7c-2.9,4.2-5.2,8.6-7,13.3c-1.6,5-4.2,9.4-7.6,13c-5,5.5-9.9,10.7-14.9,16.2
c-0.5,0.5-1.3,1-2.1,1c-1.6,0.3-2.9,0.8-4.2,1.6c-0.8,0.5-0.8,1,0,1.8c2.1,1.8,5,1.6,8.9-0.8c-1.3,1.3-2.9,2.3-4.7,2.6l-30.2,0.3
c-3.1-7.3-8.6-10.4-15.9-9.6c-6,0.8-6.8,5.5-9.4,9.9h-22.4c-1.6,0-3.1-0.3-4.7-0.5l-4.7-0.8l-3.1-4.4l-11.5-10.7c0-1,0.5-1.8,1-2.6
c5.5-4.2,9.9-9.6,12.8-16.2c4.7,0.3,9.4-0.5,13.6-2.1c2.9-1.3,6.3-2.9,9.6-4.2c1.3-0.5,4.7-2.1,9.9-5c5.2-2.9,12-3.4,17.2-5.5
c5.2-2.1,11.2-5,16.7-7.3c5.5-2.6,11.2-4.7,17.2-6.5c11.5-3.6,19-6.8,22.4-9.1c6.5-4.7,13.6-8.6,20.9-12
C676.9,702,680.3,702.8,679.8,707.7z M657.4,747.3c1.8-4.7,2.1-9.9,0.5-14.6c-0.8-2.1-2.9-3.4-5-2.6c-8.9,2.6-16.2,8.9-20.1,17.2
c-1.3,2.9,0,6.3,2.9,7.6c0.3,0,0.3,0.3,0.5,0.3C646.2,758.8,653.5,756,657.4,747.3z" class="st11"></path>
<path d="M264.6,708c3.9,7,7,14.6,9.9,22.2c1,3.4,2.6,6.8,4.7,9.6c1.8,2.9,3.6,6,5.5,9.1c1,1.6,2.1,2.9,3.4,3.9
c1.3,1.3,2.6,2.6,3.4,4.2c0.5,0.8,1,1.3,1.8,1.6c1.8,0.5,3.9,0.8,5.7,0.5c5.2-0.5,10.2-2.1,15.1-4.2c0.8-0.3,1.8-0.5,2.6-0.5
c4.7,0,7.6-2.9,8.9-8.3c6.8,5,14.3,8.9,22.2,11.7c27.1,9.6,54.5,18.5,83.2,19.8c0.8,0,0.8,0.8,0,2.3l-11.2,8.3l-13.3,2.9l-32.3,1.6
c-9.4-5.5-16.2-8.6-20.6-9.4c-5.2-1.6-10.4,1.6-12,6.8c0,0.3,0,0.3,0,0.5c-0.8,2.1-2.3,2.6-4.7,2.1c-8.1,0.3-13.8-0.5-16.4-2.6
C294.3,771.1,269.3,740.8,264.6,708z" class="st11"></path>
<path d="M684.5,714.2c-2.6,9.6-5.2,19.5-7.8,29.5c-4.4,17.2-6,28.7-22.9,32.6c-2.9,0.5-5.5,1.6-7.8,3.1
c-2.3,1.8-4.7,3.6-6.8,5.5l-4.7,4.4c-3.6,2.3-6.8,2.6-8.9,0.8c-0.8-0.5-0.8-1.3,0-1.8c1.3-0.8,2.6-1.3,4.2-1.6c0.8,0,1.6-0.5,2.1-1
c4.7-5.2,9.6-10.7,14.9-16.2c3.4-3.9,6-8.3,7.6-13c1.8-4.7,4.2-9.1,7-13.3c6.8-9.6,13.6-19.3,19.8-29.7
C682.4,712.7,683.5,712.9,684.5,714.2z M666.8,745.3L653,769.8c0,0.3,0,0.5,0.3,0.5l0,0c3.9,2.1,10.2-1.6,14.1-8.1l0.5-0.8
c3.9-6.8,3.9-14.1,0-16.2l0,0C667.3,745,667,745,666.8,745.3L666.8,745.3z" class="st8"></path>
<path d="M657.4,747.3c-3.9,8.6-11.2,11.2-21.4,7.8c-3.1-1-4.7-4.2-3.6-7.3c0-0.3,0.3-0.3,0.3-0.5
c3.9-8.3,11.2-14.6,20.1-17.2c2.1-0.8,4.4,0.5,5,2.6C659.5,737.4,659.2,742.7,657.4,747.3z" class="st4"></path>
<path d="M666.8,745.3c0-0.3,0.3-0.3,0.5,0l0,0c3.9,2.3,3.9,9.4,0,16.2l-0.5,0.8c-3.9,6.8-10.2,10.4-14.1,8.1l0,0
c-0.3,0-0.3-0.3-0.3-0.5L666.8,745.3z" class="st11"></path>
<path d="M752.3,790.4c0.3-0.3,0.3,0.5-0.5,2.1l-54.7-0.5c-6.8,0.5-9.9-0.5-9.4-3.4c8.3-10.9,20.3-19,33.6-22.7
c4.4-1.3,8.6-2.3,12.5,1c7.3,6.3,11.5,10.4,12.5,12.8C748.1,783.1,750.2,786.7,752.3,790.4z" class="st22"></path>
<path d="M529.4,773.4c-0.5,0.8-0.8,1.6-1,2.6c-15.1,0.8-30.2,1.6-45.4,2.6c-15.4,1-31.3,1-46.9,1.3
c-0.5,0-1.3,0.3-1.8,0.3c-1,0.3-2.1,0-3.1-0.8c0.5-1.3,0.5-2.1,0-2.3c7.3-0.3,14.3-0.3,21.4-0.3c7.8,0,15.1-0.3,21.4-0.8
c16.2-1.3,32.3-2.6,48.5-3.9C524.7,772.4,527.1,772.6,529.4,773.4z" class="st23"></path>
<path d="M528.4,776l11.5,10.7c0,0.3,0,0.5,0,1c0,0.5-0.5,1-1.3,1L419.9,788l11.2-8.3c0.8,0.5,2.1,0.8,3.1,0.8
c0.8-0.3,1.6-0.3,2.1-0.5c15.6-0.5,31.5-0.5,46.9-1.3S513.2,776.8,528.4,776z" class="st24"></path>
<path d="M600,792.2l-25.3,0.3c2.6-4.4,3.4-9.1,9.4-9.9C591.4,781.8,596.7,784.9,600,792.2z" class="st21"></path>
<path d="M374.3,792.4l-37.3-0.3c2.6,0.5,3.9,0,4.7-2.1c1.3-5.2,6.3-8.3,11.5-7.3c0.3,0,0.3,0,0.5,0
C358.2,783.8,364.9,787,374.3,792.4z" class="st4"></path>
<path d="M639.4,784.9c0,1.6,0.3,2.3,0.5,2.3c10.4,0.8,25.3,1.6,44.3,1.8c1.3,0.3,2.6,0,3.6-0.5
c-0.5,2.9,2.6,3.9,9.4,3.4l-67,0.3c1.8-0.3,3.4-1.3,4.7-2.6L639.4,784.9z" class="st25"></path>
<path d="M539.6,787l3.1,4.4l-136.1-0.3l13.3-2.9l118.6,0.8c0.5,0,1-0.5,1.3-1C539.8,787.5,539.8,787.2,539.6,787z" class="st26"></path>
<path d="M820.6,788.5c-0.5,1.3-0.8,2.9-0.5,4.2l-68.3-0.5c0.5-1.6,0.8-2.3,0.5-2.1L820.6,788.5z" class="st25"></path>
<path d="M217.7,791.4c0.8-0.8,1-1.6,0.8-1.8l97.7-0.8c0.8,0,1,0.3,0.8,1v0.8c-0.3,0.8-0.8,1.6-1.8,1.6L217.7,791.4z" class="st25"></path>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 35 KiB

1
src/assets/svgs/dinosaur-happy.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

1
src/assets/svgs/dinosaur-joy.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 80 KiB

1
src/assets/svgs/dinosaur-play.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 96 KiB

1
src/assets/svgs/dinosaur-pleasure.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 70 KiB

1
src/assets/svgs/dinosaur-rouse.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 68 KiB

1
src/assets/svgs/dinosaur-satisfy.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 78 KiB

1
src/assets/svgs/dinosaur-tongue.svg
View File

File diff suppressed because one or more lines are too long
Side by Side

Before

Width:  |  Height:  |  Size: 72 KiB

1
src/assets/svgs/file.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733393188492" class="icon" viewBox="0 0 1089 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="28883" width="200" height="200"><path d="M32.628594 863.170688C16.851704 625.805116 30.306304 391.05104 79.527611 158.550188c14.563947-54.20689 67.726238-104.222436 115.596472-109.587873 184.237813-19.506365 368.475627-23.965333 552.71344-13.376903 47.883184 2.917969 96.116007 52.786754 105.543292 109.337514a2391.284402 2391.284402 0 0 1-9.535198 112.225269" fill="#F2C84B" p-id="28884"></path><path d="M626.86698 252.343905c116.835315 1.044598 233.670629 4.584147 350.505944 10.610013 56.870184 3.306456 98.951962 49.454398 89.244103 103.005176-29.352353 157.389043-82.488745 322.711855-144.888395 493.123847-21.440167 58.19104-92.377898 110.904413-156.193366 114.146121-213.957071 10.756774-427.914142 5.244575-641.871213-16.540914-63.828418-6.923702-103.18647-57.064427-84.8283-110.68427 52.670208-155.040855 118.971993-317.49318 186.400391-483.398722 23.861736-57.737805 77.891649-106.812349 119.977743-107.956228 42.457315-1.083447 77.196688-1.58848 77.196688-1.592796" fill="#FFE287" p-id="28885"></path><path d="M540.53653 511.784174m-80.42113 0a80.421131 80.421131 0 1 0 160.842261 0 80.421131 80.421131 0 1 0-160.842261 0Z" opacity=".4" p-id="28886"></path><path d="M683.163067 873.206603c55.229905 0 114.957627-36.781088 132.737383-81.73767l88.903098-224.813125c17.771123-44.952265-2.874804-57.370901-45.888951-27.578262l-203.019003 140.580504c-43.005514 29.784005-99.931812 33.478949-126.495692 8.201393-26.559563-25.277556-81.767886-19.868953-122.684202 12.038781l-147.871112 115.298633c-40.916317 31.903418-29.196958 58.001113 26.037264 58.001113l398.281215 0.008633z" opacity=".4" p-id="28887"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
src/assets/svgs/location-album.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733287135901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="42758" width="200" height="200"><path d="M886.458182 251.112727L352.581818 547.607273 478.952727 837.818182l312.785455-445.905455 94.72-140.8z" fill="#598CC9" p-id="42759"></path><path d="M531.083636 623.476364L478.952727 837.818182l387.723637-514.56-335.592728 300.218182z" fill="#D2A154" p-id="42760"></path><path d="M352.581818 547.607273l-204.101818-73.076364 737.978182-223.418182-533.876364 296.494546z" fill="#9FC9EB" p-id="42761"></path><path d="M886.458182 251.112727l-40.96 505.949091-314.414546-133.585454 355.374546-372.363637z" fill="#9FC9EB" p-id="42762"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 698 B

1
src/assets/svgs/notice.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733333351214" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7095" width="200" height="200"><path d="M322.37312 204.1344l165.1712-120.32 175.104 36.7104L784.81152 273.92l87.9616 334.7456 8.3968 33.6384a461.0048 461.0048 0 0 1-98.1504 10.496c-249.9072 0-453.376-199.68-460.5952-448.6656z" fill="#20C997" p-id="7096"></path><path d="M266.05312 734.3104h1.8944c35.1744 0 63.6928 28.5696 63.6928 63.8976a63.7952 63.7952 0 0 1-67.4304 63.7952H212.70272a136.5504 136.5504 0 0 1-120.32-71.168 131.7376 131.7376 0 0 1 5.12-135.8848l5.12-8.0384a511.0272 511.0272 0 0 0 81.7152-278.1696V364.544a32.4608 32.4608 0 0 1-0.1024-2.7136V351.5904a39.936 39.936 0 0 1 0.3584-4.7616 330.3424 330.3424 0 0 1 102.2976-224.0512A340.6336 340.6336 0 0 1 524.15232 27.2896c88.9344 0 173.2096 33.8944 237.2608 95.488a330.3424 330.3424 0 0 1 102.2976 224.0512 40.2432 40.2432 0 0 1 0.3072 4.7616v8.8064c0.1024 1.536 0.0512 3.072-0.0512 4.5568v3.7376a510.976 510.976 0 0 0 81.664 278.2208l5.12 8.0384c26.8288 41.6256 28.7744 92.416 5.12 135.8848a136.5504 136.5504 0 0 1-120.32 71.168H527.07072A63.7952 63.7952 0 0 1 454.21312 798.72c0-34.9184 27.904-63.2832 62.5152-63.8976v-0.3584h260.7616c22.1696 0 41.5744-11.4688 51.9168-30.6176a55.7056 55.7056 0 0 0-2.1504-57.2416l-4.1984-6.5536a472.2688 472.2688 0 0 1-74.752-267.0592c-2.9696-118.784-103.424-215.3472-224.1536-215.3472s-221.184 96.5632-224.1024 215.3472v10.8544a472.2688 472.2688 0 0 1-74.8032 256.2048l-4.1984 6.5536c-11.264 17.5616-12.0832 38.912-2.2016 57.2416 9.6256 17.8176 27.0336 28.928 47.2064 30.464zM358.31552 921.6h307.2a51.2 51.2 0 0 1 0 102.4H358.31552a51.2 51.2 0 0 1 0-102.4z" fill="#2C6DD2" p-id="7097"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
src/assets/svgs/people-album.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 6.6 KiB

1
src/assets/svgs/recent-upload.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733287400901" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="64135" width="200" height="200"><path d="M1022.293364 470.409918a511.990827 511.990827 0 1 0-551.883445 551.883446 513.484133 513.484133 0 0 0 551.883445-551.883446z m-279.24833 2.559955a53.332378 53.332378 0 0 1-75.305317 6.186555l-14.506407-12.373111a53.332378 53.332378 0 0 0-87.891759 40.745936v185.810005A53.332378 53.332378 0 0 1 512.009173 746.671635a53.332378 53.332378 0 0 1-53.332377-53.332377v-185.810005a53.332378 53.332378 0 0 0-87.891759-40.745936l-14.506407 12.586441a53.545707 53.545707 0 0 1-75.305317-6.399885 53.332378 53.332378 0 0 1 6.186556-75.091988l155.943872-132.050968a106.664756 106.664756 0 0 1 137.810865 0l155.943872 132.050968a53.332378 53.332378 0 0 1 6.186556 75.091988z" fill="#54CAD9" p-id="64136"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 862 B

1
src/assets/svgs/recyclingbin.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733290267453" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="71598" width="200" height="200"><path d="M192 320h640v512a128 128 0 0 1-128 128H320a128 128 0 0 1-128-128V320z" fill="#3EBF87" fill-opacity=".15" p-id="71599"></path><path d="M53.312 298.688a32 32 0 0 1 32-32h853.376a32 32 0 0 1 0 64H85.312a32 32 0 0 1-32-32z m310.016-221.504A471.424 471.424 0 0 1 512 53.312c50.88 0 101.376 8.064 148.672 23.872a409.728 409.728 0 0 1 127.36 68.544 32 32 0 0 1-40.128 49.92c-32.128-25.472-63.232 7.616-107.52 7.616-51.2 0-84.8-0.832-128.384-0.768-44.16 0-86.272 0.768-128.448 0.768-46.592 0-75.392-33.152-107.52-7.68a32 32 0 1 1-40.064-49.856 409.664 409.664 0 0 1 127.36-68.544z" fill="#3EBF87" p-id="71600"></path><path d="M138.688 266.688h746.624V599.68c0 78.4 0 140.48-6.528 189.12-6.72 50.048-20.864 90.496-52.8 122.432-32 31.936-72.448 46.08-122.432 52.8-48.64 6.592-110.72 6.592-189.12 6.592h-4.864c-78.4 0-140.48 0-189.12-6.528-49.984-6.72-90.496-20.928-122.432-52.864l22.656-22.592 22.592-22.656c18.048 18.048 42.816 28.864 85.76 34.624 43.84 5.952 101.632 6.016 182.976 6.016s139.136-0.064 183.04-6.016c42.88-5.76 67.648-16.576 85.696-34.624 18.048-18.048 28.864-42.752 34.624-85.76 5.888-43.776 5.952-101.632 5.952-182.976V330.688H202.688v266.624c0 81.344 0 139.2 5.952 183.04 5.76 42.88 16.64 67.648 34.624 85.696l-22.592 22.656-22.656 22.592c-31.936-31.936-46.08-72.384-52.8-122.432-6.528-48.64-6.528-110.72-6.528-189.12V266.688z" fill="#3EBF87" p-id="71601"></path><path d="M352 810.688a32 32 0 0 1 32-32h256a32 32 0 0 1 0 64H384a32 32 0 0 1-32-32z" fill="#3EBF87" p-id="71602"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

1
src/assets/svgs/search.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733334941458" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="75998" width="200" height="200"><path d="M511.744 510.72m-450.816 0a450.816 450.816 0 1 0 901.632 0 450.816 450.816 0 1 0-901.632 0Z" fill="#59ADF8" p-id="75999"></path><path d="M818.6368 766.208l-89.4976-92.7232c39.424-51.3024 62.9248-115.5072 62.9248-185.2416 0-168.0896-136.2432-304.3328-304.3328-304.3328S183.3984 320.1536 183.3984 488.2432s136.2432 304.3328 304.3328 304.3328c72.4992 0 139.008-25.4464 191.2832-67.7888l88.0128 91.2384a35.74784 35.74784 0 0 0 25.8048 10.9568c8.96 0 17.92-3.328 24.8832-10.0352 14.2336-13.824 14.6432-36.5056 0.9216-50.7392z m-329.0624-79.9232h-1.1776c-117.76 0-175.2576-89.6-189.2352-137.1136a30.7712 30.7712 0 0 1 20.8384-38.144c16.2304-4.7616 33.2288 4.5056 38.0928 20.6848 1.28 4.1472 29.9008 93.1328 130.304 93.1328h1.024c16.896 0 30.6176 13.6704 30.72 30.5664 0.1024 16.9472-13.6192 30.7712-30.5664 30.8736z" fill="#FFFFFF" p-id="76000"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 1009 B

1
src/assets/svgs/thing-album.svg Normal file
View File

@@ -0,0 +1 @@
<svg t="1733287302357" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="59233" width="200" height="200"><path d="M512 1024C76.96384 1024 0 947.022507 0 512S76.96384 0 512 0 1024 76.96384 1024 512 947.022507 1024 512 1024z m0-998.4C98.727253 25.6 25.6 98.7136 25.6 512S98.727253 998.4 512 998.4 998.4 925.272747 998.4 512 925.272747 25.6 512 25.6z" fill="#EAC1B2" p-id="59234"></path><path d="M279.893333 785.066667c-101.034667 0-177.793707-5.270187-236.05248-21.149014C30.26944 698.69568 25.6 616.174933 25.6 512 25.6 98.7136 98.727253 25.6 512 25.6c31.402667 0 60.648107 0.49152 88.255147 1.447253C671.45728 83.367253 689.493333 187.665067 689.493333 375.466667c0 348.023467-61.576533 409.6-409.6 409.6z" fill="#EAC1B2" opacity=".2" p-id="59235"></path><path d="M483.751253 466.944a7.168 7.168 0 0 1-7.181653 7.195307h-173.397333a7.181653 7.181653 0 0 1-7.181654-7.195307V293.669547a7.168 7.168 0 0 1 7.181654-7.181654H476.501333a7.168 7.168 0 0 1 7.195307 7.181654V466.944z m0 314.026667a7.168 7.168 0 0 1-7.181653 7.195306h-173.397333a7.181653 7.181653 0 0 1-7.181654-7.195306V607.696213a7.168 7.168 0 0 1 7.181654-7.181653H476.501333a7.181653 7.181653 0 0 1 7.195307 7.181653V780.970667z m327.68 0a7.181653 7.181653 0 0 1-7.181653 7.195306h-173.397333a7.168 7.168 0 0 1-7.181654-7.195306V607.696213a7.168 7.168 0 0 1 7.181654-7.181653H804.181333a7.168 7.168 0 0 1 7.181654 7.181653V780.970667z" fill="#EAC1B2" p-id="59236"></path><path d="M462.015147 217.33376H267.38688a40.564053 40.564053 0 0 0-40.536747 40.5504v194.573653a40.564053 40.564053 0 0 0 40.536747 40.5504h194.56a40.564053 40.564053 0 0 0 40.536747-40.5504V257.88416a40.42752 40.42752 0 0 0-40.46848-40.5504z m8.06912 235.124053a8.055467 8.055467 0 0 1-8.06912 8.06912H267.38688a8.055467 8.055467 0 0 1-8.06912-8.06912V257.88416a8.055467 8.055467 0 0 1 8.06912-8.06912h194.56a8.055467 8.055467 0 0 1 8.06912 8.06912v194.573653z m193.713493-230.249813l-110.05952 110.05952a32.453973 32.453973 0 0 0 0 45.8752l110.073173 110.073173a32.453973 32.453973 0 0 0 45.8752 0l110.045867-110.01856a32.453973 32.453973 0 0 0 0-45.8752l-110.073173-110.073173a32.413013 32.413013 0 0 0-45.861547 0zM462.015147 534.418773H267.38688a40.564053 40.564053 0 0 0-40.536747 40.5504v194.587307a40.564053 40.564053 0 0 0 40.536747 40.5504h194.56a40.564053 40.564053 0 0 0 40.536747-40.5504V574.969173a40.42752 40.42752 0 0 0-40.46848-40.5504z m8.06912 235.137707a8.055467 8.055467 0 0 1-8.06912 8.06912H267.38688a8.055467 8.055467 0 0 1-8.06912-8.06912V574.969173a8.055467 8.055467 0 0 1 8.06912-8.06912h194.56a8.055467 8.055467 0 0 1 8.06912 8.06912v194.587307z m314.026666-235.137707H589.509973a40.564053 40.564053 0 0 0-40.536746 40.5504v194.587307a40.564053 40.564053 0 0 0 40.536746 40.5504h194.56a40.564053 40.564053 0 0 0 40.536747-40.5504V574.969173a40.523093 40.523093 0 0 0-40.536747-40.5504z m0 243.206827H589.509973a8.055467 8.055467 0 0 1-8.06912-8.06912V574.969173a8.055467 8.055467 0 0 1 8.06912-8.06912h194.56a8.055467 8.055467 0 0 1 8.06912 8.06912v194.587307a8.055467 8.055467 0 0 1-8.06912 8.06912z m0 0" fill="#9B3A18" p-id="59237"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.1 KiB

459
src/components/AnimatedSvgIllustration/AnimatedSvgIllustration.vue Normal file
View File

@@ -0,0 +1,459 @@
<script setup lang="ts">
import anime from 'animejs/lib/anime.es.js';
const planesCard = anime.timeline({
direction: 'forwards',
loop: true
});
planesCard.add({
targets: '#card2 .card_text',
scaleX: [0, 1],
delay: function (_target, index) {
return index * 300;
},
easing: [0.17, 0.17, 0.35, 1.00],
duration: 300,
offset: 0
}).add({
targets: '#plane1',
opacity: {
value: [0, 1],
duration: 100,
delay: 84
},
translateX: {
value: ['-199', '+888']
},
translateY: {
value: ['-36', '+404']
},
rotate: {
value: -12
},
scale: {
value: 0,
duration: 200,
delay: 300
},
easing: [0.17, 0.17, 0.79, 1.00],
duration: 541,
offset: 250
}).add({
targets: '#card1',
opacity: 0,
loop: true,
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 708
}).add({
targets: '#card3_bg-white',
easing: [0.17, 0.11, 0.40, 1.26],
duration: 666,
offset: 625,
scale: [0, 1]
}).add({
targets: '#cards',
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 708,
translateY: ['-=257']
}).add({
targets: '#card3_icon',
translateX: ['+=35', 0],
translateY: ['+=35', 0],
scale: [0, 1],
loop: true,
easing: [0.41, 1.9, 0.59, 0.94],
duration: 708,
offset: 780
}).add({
targets: '#card3 .card_text',
scaleX: [0, 1],
delay: function (_target, index) {
return index * 300;
},
easing: [0.17, 0.17, 0.35, 1.00],
duration: 300,
offset: 989
}).add({
targets: '#plane2',
opacity: {
value: [0, 1],
duration: 167,
delay: 84
},
scaleX: {
value: -1,
duration: 0
},
translateX: {
value: [-1620, -180]
},
translateY: {
value: [-78, 320]
},
rotate: {
value: -12,
duration: 500,
delay: 100
},
scale: {
value: 0,
duration: 250,
delay: 285
},
easing: [0.17, 0.17, 0.79, 1.00],
duration: 600,
offset: 1380
}).add({
targets: '#card2',
opacity: 0,
loop: true,
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 1875
}).add({
targets: '#card4_bg-white',
easing: [0.17, 0.11, 0.40, 1.26],
duration: 666,
offset: 1793,
scale: [0, 1]
}).add({
targets: '#cards',
easing: [0.68, 0.00, 0.33, 1.00],
duration: 750,
offset: 1875,
translateY: ['-=257']
}).add({
targets: '#card4_icon',
translateX: ['+=35', 0],
translateY: ['+=35', 0],
scale: [0, 1],
loop: true,
easing: [0.41, 1.9, 0.59, 0.94],
duration: 708,
offset: 1957
});
</script>
<template>
<svg viewBox="0 0 2579 1132" version="1.1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<title>hello@zajno.com</title>
<defs>
<linearGradient x1="118.314446%" y1="48.8841826%" x2="-30.2984871%" y2="51.1919321%" id="linearGradient-1">
<stop stop-color="#7F9BFC" offset="0%"></stop>
<stop stop-color="#839FFC" stop-opacity="0.9563" offset="5.509039%"></stop>
<stop stop-color="#849FFC" stop-opacity="0.9533" offset="5.884359%"></stop>
<stop stop-color="#8AA4FC" stop-opacity="0.8154" offset="23.03%"></stop>
<stop stop-color="#9CB1FD" stop-opacity="0.6239" offset="46.86%"></stop>
<stop stop-color="#BAC7FD" stop-opacity="0.4019" offset="74.47%"></stop>
<stop stop-color="#D3DAFE" stop-opacity="0.2445" offset="94.06%"></stop>
<stop stop-color="#F0F0FF" stop-opacity="0" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0334507%" y1="-143.800704%" x2="50.0334507%" y2="63.3151408%" id="linearGradient-2">
<stop stop-color="#FFF33B" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#FFDE46" stop-opacity="0.1416" offset="15.24%"></stop>
<stop stop-color="#FFA764" stop-opacity="0.4337" offset="46.69%"></stop>
<stop stop-color="#FF916F" stop-opacity="0.5396" offset="58.08%"></stop>
<stop stop-color="#FF5782" offset="100%"></stop>
</linearGradient>
<linearGradient x1="49.8485923%" y1="72.7804172%" x2="49.8485923%" y2="-43.2541461%" id="linearGradient-3">
<stop stop-color="#F7CF83" offset="0%"></stop>
<stop stop-color="#FFFFFF" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0154912%" y1="-52.011784%" x2="50.0154912%" y2="71.9581815%" id="linearGradient-4">
<stop stop-color="#FDFDFE" offset="0%"></stop>
<stop stop-color="#86DD87" offset="100%"></stop>
</linearGradient>
<linearGradient x1="50.0074976%" y1="99.049164%" x2="50.0074976%" y2="-16.925746%" id="linearGradient-5">
<stop stop-color="#FFF33B" stop-opacity="0" offset="0%"></stop>
<stop stop-color="#FF57B0" offset="100%"></stop>
</linearGradient>
<rect id="path-6" x="0" y="0" width="615" height="851"></rect>
<linearGradient x1="50.0327206%" y1="79.0175551%" x2="50.0327206%" y2="-44.8815257%" id="linearGradient-8">
<stop stop-color="#FE5E85" offset="21.81%"></stop>
<stop stop-color="#E94B96" offset="40.49%"></stop>
<stop stop-color="#B21CC1" offset="79.01%"></stop>
<stop stop-color="#9100DB" offset="99.97%"></stop>
</linearGradient>
<linearGradient x1="50.0327206%" y1="79.0175551%" x2="50.0327206%" y2="-57.9189338%" id="linearGradient-9">
<stop stop-color="#FE5E85" offset="21.81%"></stop>
<stop stop-color="#E94B96" offset="40.49%"></stop>
<stop stop-color="#B21CC1" offset="79.01%"></stop>
<stop stop-color="#9100DB" offset="99.97%"></stop>
</linearGradient>
<linearGradient x1="50.0078125%" y1="-14.3794118%" x2="50.0078125%" y2="84.3210478%" id="linearGradient-10">
<stop stop-color="#0025FF" offset="0%"></stop>
<stop stop-color="#00FFD7" offset="100%"></stop>
</linearGradient>
<linearGradient x1="92.6689445%" y1="127.3586%" x2="11.4142528%" y2="14.4674737%" id="linearGradient-11">
<stop stop-color="#0025FF" offset="3.619557%"></stop>
<stop stop-color="#0025FF" stop-opacity="0.8587" offset="16.82%"></stop>
<stop stop-color="#0025FF" stop-opacity="0" offset="97.01%"></stop>
</linearGradient>
<linearGradient x1="114.073989%" y1="198.165562%" x2="-10.8913485%" y2="-38.4110424%" id="linearGradient-12">
<stop stop-color="#7F9BFC" offset="0%"></stop>
<stop stop-color="#C9D3FE" offset="62.89%"></stop>
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
</linearGradient>
<linearGradient x1="140.812842%" y1="110.913212%" x2="45.1242839%" y2="33.8259447%" id="linearGradient-13">
<stop stop-color="#CFCFF6" offset="0%"></stop>
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
</linearGradient>
<linearGradient x1="101.805599%" y1="153.92944%" x2="40.0355701%" y2="46.5605817%" id="linearGradient-14">
<stop stop-color="#CFCFF6" offset="0%"></stop>
<stop stop-color="#F0F0FF" offset="99.91%"></stop>
</linearGradient>
</defs>
<g id="planes" transform="translate(-6.000000, -47.000000)">
<g id="bg" transform="translate(1013.000000, 123.000000)" fill-rule="nonzero">
<g id="board-header">
<path
d="M615.5,94.5 L0.8,94.5 L0.8,12.8 C0.8,5.9 6.4,0.3 13.3,0.3 L603,0.3 C609.9,0.3 615.5,5.9 615.5,12.8 L615.5,94.5 Z"
id="header-bg" fill="url(#linearGradient-1)"></path>
<g id="buttons" transform="translate(38.000000, 33.000000)">
<circle id="Oval" fill="url(#linearGradient-2)" cx="14.7" cy="14.3" r="14.2"></circle>
<circle id="Oval" fill="url(#linearGradient-3)" cx="63.2" cy="14.3" r="14.2"></circle>
<circle id="Oval" fill="url(#linearGradient-4)" cx="111.6" cy="14.3" r="14.2"></circle>
</g>
</g>
<path
d="M603.586617,1065 L12.5121604,1065 C5.60544785,1065 -5.68434189e-14,1059.4 -5.68434189e-14,1052.5 L-5.68434189e-14,120 L616,120 L615.99868,1052.6 C616.098777,1059.4 610.493329,1065 603.586617,1065 Z"
id="board-bg" fill="url(#linearGradient-5)"></path>
</g>
<g id="cards-wrap" transform="translate(1013.000000, 243.000000)" mask="url(#mask-7)">
<mask id="mask-7" fill="white">
<use xlink:href="#path-6"></use>
</mask>
<g id="Rectangle"></g>
<g id="cards" style="transform: translateY(-248.817px);">
<g id="card1" style="opacity: 0.0318414;">
<g transform="translate(38.000000, 97.000000)">
<g id="card1_bg">
<g id="Group" opacity="0.15">
<g></g>
</g>
<g id="Group"></g>
<path
d="M519.7,159.304348 L20.2,159.304348 C9.1,159.304348 0,150.360248 0,139.229814 L0,20.7701863 C0,9.73913043 9,0.695652174 20.2,0.695652174 L519.7,0.695652174 C530.8,0.695652174 539.9,9.63975155 539.9,20.7701863 L539.9,139.229814 C539.9,150.360248 530.8,159.304348 519.7,159.304348 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card1_bg-white"
d="M519.796259,0.695652174 L20.2037414,0.695652174 C9.1016855,0.695652174 0,9.66216784 0,20.8204985 L0,139.577017 C0,150.63572 9.00166698,159.701863 20.2037414,159.701863 L519.796259,159.701863 C530.898315,159.701863 540,150.735348 540,139.577017 L540,20.8204985 C540,9.76179579 530.898315,0.695652174 519.796259,0.695652174 Z"
fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="card1_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" fill="#7F9BFC"
fill-rule="nonzero"></rect>
</g>
<g id="card1-icon-wrap" transform="translate(45.000000, 25.838509)">
<g id="card1_icon">
<g id="Group" fill-rule="nonzero">
<ellipse id="Oval" fill="url(#linearGradient-8)" cx="54.8" cy="54.1614907" rx="54.4"
ry="54.0621118"></ellipse>
<g transform="translate(5.000000, 16.894410)" fill="#FFFFFF">
<path
d="M81.6,30.5093168 C77.9,25.9378882 70.8,25.8385093 67,30.5093168 L45.8,56.3478261 L28.2,43.6273292 C24.6,41.0434783 19.6,41.3416149 16.3,44.3229814 L-5.68434189e-14,59.2298137 C8.5,78.2111801 27.6,91.4285714 49.8,91.4285714 C73.7,91.4285714 94,76.1242236 101.3,54.8571429 L81.6,30.5093168 Z"></path>
<ellipse id="Oval" cx="37.7" cy="8.2484472" rx="7.5" ry="7.45341615"></ellipse>
</g>
</g>
<ellipse id="Oval" fill="url(#linearGradient-9)" fill-rule="nonzero" opacity="0.2" cx="54.8"
cy="54.1614907" rx="54.4" ry="54.0621118"></ellipse>
</g>
</g>
</g>
</g>
<g id="card2" style="opacity: 1;">
<g transform="translate(38.000000, 354.000000)">
<g id="card2_bg">
<path
d="M519.796259,159.304348 L20.2037414,159.304348 C9.1016855,159.304348 0,150.337832 0,139.179502 L0,20.4229829 C0,9.36428027 9.00166698,0.298136646 20.2037414,0.298136646 L519.796259,0.298136646 C530.898315,0.298136646 540,9.26465231 540,20.4229829 L540,139.179502 C540,150.238204 530.898315,159.304348 519.796259,159.304348 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card2_bg-white"
d="M519.796259,159.304348 L20.2037414,159.304348 C9.1016855,159.304348 0,150.337832 0,139.179502 L0,20.4229829 C0,9.36428027 9.00166698,0.298136646 20.2037414,0.298136646 L519.796259,0.298136646 C530.898315,0.298136646 540,9.26465231 540,20.4229829 L540,139.179502 C540,150.238204 530.898315,159.304348 519.796259,159.304348 Z"
fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="card2-icon-wrap" transform="translate(42.000000, 24.844720)">
<g id="card2_icon">
<ellipse id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="54.757764"
rx="54.4" ry="54.0621118"></ellipse>
<g id="Group" transform="translate(5.000000, 17.888199)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M81.6,30.1118012 C77.9,25.5403727 70.8,25.4409938 67,30.1118012 L45.8,55.9503106 L28.2,43.2298137 C24.6,40.6459627 19.6,40.9440994 16.3,43.9254658 L-5.68434189e-14,58.8322981 C8.5,77.8136646 27.6,91.0310559 49.8,91.0310559 C73.7,91.0310559 94,75.7267081 101.3,54.4596273 L81.6,30.1118012 Z"></path>
<ellipse id="Oval" cx="37.7" cy="7.85093168" rx="7.5" ry="7.45341615"></ellipse>
</g>
<ellipse id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8"
cy="54.757764" rx="54.4" ry="54.0621118"></ellipse>
</g>
</g>
<g id="card2_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" fill="#7F9BFC" fill-rule="nonzero"
style="transform: scaleX(1);"></rect>
</g>
</g>
</g>
<g id="card3">
<g transform="translate(38.000000, 611.000000)">
<g id="card3_bg">
<path
d="M519.796259,159.701863 L20.2037414,159.701863 C9.1016855,159.701863 0,150.735348 0,139.577017 L0,20.8204985 C0,9.76179579 9.00166698,0.695652174 20.2037414,0.695652174 L519.796259,0.695652174 C530.898315,0.695652174 540,9.66216784 540,20.8204985 L540,139.577017 C540,150.735348 530.898315,159.701863 519.796259,159.701863 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card3_bg-white"
d="M519.796259,0.695652174 L20.2037414,0.695652174 C9.1016855,0.695652174 0,9.66216784 0,20.8204985 L0,139.577017 C0,150.63572 9.00166698,159.701863 20.2037414,159.701863 L519.796259,159.701863 C530.898315,159.701863 540,150.735348 540,139.577017 L540,20.8204985 C540,9.76179579 530.898315,0.695652174 519.796259,0.695652174 Z"
fill="#FFFFFF" fill-rule="nonzero" style="transform: scale(1);"></path>
</g>
<g id="card3_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(1);"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(0.170117);"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(0);"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero" style="transform: scaleX(0);"></rect>
</g>
<g id="card3-icon-wrap" transform="translate(45.000000, 25.838509)">
<g id="card3_icon" transform="scale(0)"
style="transform: translateX(-2.21467px) translateY(-2.21467px) scale(1.06328);">
<g id="Group" fill-rule="nonzero">
<ellipse id="Oval" fill="url(#linearGradient-8)" cx="54.8" cy="54.1614907" rx="54.4"
ry="54.0621118"></ellipse>
<g transform="translate(5.000000, 16.894410)" fill="#FFFFFF">
<path
d="M81.6,30.5093168 C77.9,25.9378882 70.8,25.8385093 67,30.5093168 L45.8,56.3478261 L28.2,43.6273292 C24.6,41.0434783 19.6,41.3416149 16.3,44.3229814 L-5.68434189e-14,59.2298137 C8.5,78.2111801 27.6,91.4285714 49.8,91.4285714 C73.7,91.4285714 94,76.1242236 101.3,54.8571429 L81.6,30.5093168 Z"></path>
<ellipse id="Oval" cx="37.7" cy="8.2484472" rx="7.5" ry="7.45341615"></ellipse>
</g>
</g>
<ellipse id="Oval" fill="url(#linearGradient-9)" fill-rule="nonzero" opacity="0.2" cx="54.8"
cy="54.1614907" rx="54.4" ry="54.0621118"></ellipse>
</g>
</g>
</g>
</g>
<g id="card4">
<g transform="translate(38.000000, 868.000000)">
<g id="card4_bg">
<path
d="M519.796259,160 L20.2037414,160 C9.1016855,160 0,150.977444 0,139.749373 L0,20.2506266 C0,9.12280702 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,9.02255639 540,20.2506266 L540,139.749373 C540,150.877193 530.898315,160 519.796259,160 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card4_bg-white"
d="M519.796259,159.006211 L20.2037414,159.006211 C9.1016855,159.006211 0,150.039696 0,138.881365 L0,20.1248463 C0,9.06614362 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,8.96651567 540,20.1248463 L540,138.881365 C540,149.940068 530.898315,159.006211 519.796259,159.006211 Z"
fill="#FFFFFF" fill-rule="nonzero" style="transform: scale(0);"></path>
</g>
<g id="card4-icon-wrap" transform="translate(42.000000, 25.000000)">
<g id="card4_icon" transform="scale(0)" style="transform: translateX(35px) translateY(35px) scale(0);">
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="55.1"
r="54.4"></circle>
<g id="Group" transform="translate(5.000000, 18.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M81.6,30.3 C77.9,25.7 70.8,25.6 67,30.3 L45.8,56.3 L28.2,43.5 C24.6,40.9 19.6,41.2 16.3,44.2 L-5.68434189e-14,59.2 C8.5,78.3 27.6,91.6 49.8,91.6 C73.7,91.6 94,76.2 101.3,54.8 L81.6,30.3 Z"></path>
<circle id="Oval" cx="37.7" cy="7.9" r="7.5"></circle>
</g>
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8" cy="55.1"
r="54.4"></circle>
</g>
</g>
<g id="card4_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
</g>
</g>
</g>
<g id="card5">
<g transform="translate(38.000000, 1125.000000)">
<g id="card5_bg">
<path
d="M519.796259,160 L20.2037414,160 C9.1016855,160 0,150.977444 0,139.749373 L0,20.2506266 C0,9.12280702 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,9.02255639 540,20.2506266 L540,139.749373 C540,150.877193 530.898315,160 519.796259,160 Z"
fill="#FCDFCE" fill-rule="nonzero"></path>
<path id="card5_bg-white"
d="M519.796259,159.006211 L20.2037414,159.006211 C9.1016855,159.006211 0,150.039696 0,138.881365 L0,20.1248463 C0,9.06614362 9.00166698,1.58206781e-13 20.2037414,1.58206781e-13 L519.796259,1.58206781e-13 C530.898315,1.58206781e-13 540,8.96651567 540,20.1248463 L540,138.881365 C540,149.940068 530.898315,159.006211 519.796259,159.006211 Z"
fill="#FFFFFF" fill-rule="nonzero"></path>
</g>
<g id="card5-icon-wrap" transform="translate(42.000000, 25.000000)">
<g id="card5_icon" transform="scale(0)">
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" cx="54.8" cy="55.1"
r="54.4"></circle>
<g id="Group" transform="translate(5.000000, 18.000000)" fill="#FFFFFF" fill-rule="nonzero">
<path
d="M81.6,30.3 C77.9,25.7 70.8,25.6 67,30.3 L45.8,56.3 L28.2,43.5 C24.6,40.9 19.6,41.2 16.3,44.2 L-5.68434189e-14,59.2 C8.5,78.3 27.6,91.6 49.8,91.6 C73.7,91.6 94,76.2 101.3,54.8 L81.6,30.3 Z"></path>
<circle id="Oval" cx="37.7" cy="7.9" r="7.5"></circle>
</g>
<circle id="Oval" fill="url(#linearGradient-10)" fill-rule="nonzero" opacity="0.2" cx="54.8" cy="55.1"
r="54.4"></circle>
</g>
</g>
<g id="card5_text" opacity="0.25000" transform="translate(191.000000, 30.00000)">
<rect class="card_text" x="30" y="0" width="270" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="30" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="56" width="303" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
<rect class="card_text" x="0" y="82" width="122" height="16" rx="8" transform="scale(0)" fill="#7F9BFC"
fill-rule="nonzero"></rect>
</g>
</g>
</g>
</g>
</g>
<g id="plane2-wrap" transform="translate(320.000000, 30.00000)">
<g id="plane2" fill-rule="nonzero"
style="opacity: 0; transform: scaleX(-1) translateX(-1620px) translateY(-78px) rotate(0deg) scale(1);">
<path
d="M832.927808,725.921924 L342.327808,31.8219235 C250.027808,-98.7780765 -111.072192,339.321924 46.3278083,403.821924 L832.927808,725.921924 Z"
fill="url(#linearGradient-11)" opacity="0.0458220109"
transform="translate(420.019183, 366.784851) rotate(1.000000) translate(-420.019183, -366.784851) "></path>
<polygon fill="url(#linearGradient-12)" points="832.3 734.9 680.2 679.8 697.9 616"></polygon>
<polygon fill="url(#linearGradient-13)" points="832.3 734.9 697.9 616 738.8 591.3"></polygon>
<polygon fill="url(#linearGradient-14)" points="832.3 734.9 624.1 660.4 671.7 631.8"></polygon>
</g>
</g>
z
<g id="plane1-wrap" transform="translate(-320.000000, -30.00000)">
<g id="plane1" fill-rule="nonzero"
style="opacity: 1; transform: translateX(888px) translateY(404px) rotate(-12deg) scale(0);">
<path d="M826.3,718.9 L335.7,24.8 C243.4,-105.8 -117.7,332.3 39.7,396.8 L826.3,718.9 Z"
fill="url(#linearGradient-11)" opacity="0.0536345109"></path>
<polygon fill="url(#linearGradient-12)" points="826.3 718.9 674.2 663.8 691.9 600"></polygon>
<polygon fill="url(#linearGradient-13)" points="826.3 718.9 691.9 600 732.8 575.3"></polygon>
<polygon fill="url(#linearGradient-14)" points="826.3 718.9 618.1 644.4 665.7 615.8"></polygon>
</g>
</g>
</g>
</svg>
</template>
<style scoped lang="scss" src="./index.scss">
</style>

24
src/components/AnimatedSvgIllustration/index.scss Normal file
View File

@@ -0,0 +1,24 @@
svg {
width: 100%;
height: auto;
}
#card1_bg-white, #card2_bg-white, #card3_bg-white, #card4_bg-white {
transform-origin: 2% 8%;
transform-style: preserve-3D;
}
#card3_bg-white,
#card4_bg-white,
#card5_bg-white {
transform: scale(0);
}
#plane1 {
transform-origin: 620px 580px;
}
#plane2 {
transform: scaleX(-1) translate(-1500px, -150px);
transform-origin: 500px 650px;
}

148
src/components/BackgroundAnimation/BackgroundAnimation.vue Normal file
View File

@@ -0,0 +1,148 @@
<script setup lang="ts">
</script>
<template>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</template>
<style scoped lang="scss">
.area {
background: var(--landing-background-color-main);
//background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
width: 100%;
height: 100vh;
z-index: -1;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
</style>

2
src/components/BoxDog/index.scss
View File

@@ -1,4 +1,4 @@
.container {
.container {
position: relative;
top: 50%;
left: 50%;

2
src/components/Clouds/index.scss
View File

@@ -1,6 +1,6 @@
.card-content {
z-index: 10;
width: 80%;
width: 800px;
position: absolute;
top: 50%;
left: 50%;

217
src/components/Folder/Folder.vue Normal file
View File

@@ -0,0 +1,217 @@
<template>
<div class="folder-wrapper" @click="handleClick">
<div class="download" style="--scale-pages: 1; --scale-folder: 1;">
<svg class="folder-back" viewBox="0 0 48 48">
<path d="
M 3.50 7.50
C 3.50 5.29 5.28 3.50 7.49 3.50
C 13.17 3.50 23.18 3.50 26.00 3.50
C 30.00 3.50 28.00 6.00 32.00 6.00
C 34.21 6.00 37.87 6.00 40.71 6.00
C 42.93 6.00 44.73 7.82 44.71 10.04
L 44.54 25.04
C 44.52 27.24 42.74 29.00 40.54 29.00
H 7.50
C 5.29 29.00 3.50 27.21 3.50 25.00
V 7.50
Z
" fill="#32AF75"></path>
</svg>
<div class="page-1"></div>
<div class="page-2"></div>
<svg class="folder-front" viewBox="0 0 48 48">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#47DB99;stop-opacity:1"></stop>
<stop offset="100%" style="stop-color:#2EA16D;stop-opacity:1"></stop>
</linearGradient>
</defs>
<path d="
M 2.36 24.31
C 2.17 23.09 3.11 22.00 4.34 22.00
H 40.90
C 41.80 22.00 42.33 23.00 41.83 23.75
L 41.40 24.40
C 41.16 24.76 41.16 25.24 41.40 25.60
V 25.60
C 41.73 26.10 42.40 26.23 42.90 25.90
L 43.50 25.50
V 25.50
C 44.75 24.88 46.17 25.93 45.94 27.31
L 43.57 41.17
C 43.24 43.09 41.57 44.50 39.63 44.50
H 8.93
C 6.95 44.50 5.28 43.06 4.97 41.11
L 2.36 24.31
Z
" fill="url(#gradient)"></path>
</svg>
</div>
</div>
</template>
<script setup lang="ts">
import {gsap} from 'gsap';
import {onMounted, ref} from 'vue';
const download = ref<Element | null>(null);
const folderFront = ref<Element | null>(null);
const playspeed = 1;
const keyframes = [
/* 0 */0.00, //s
/* 1 */0.20, //s
/* 2 */0.27, //s
/* 3 */0.35, //s
/* 4 */0.55, //s
/* 5 */2.00 //s
];
const timespan = (start, end) => ({
delay: keyframes[start] * (1 / playspeed),
duration: (keyframes[end] - keyframes[start]) * (1 / playspeed)
});
const handleClick = () => {
const page = document.createElement('div');
page.classList.add('page-2');
if (download.value) {
download.value.insertBefore(page, folderFront.value);
}
/* Page */
// Fall
gsap.fromTo(page, {
'--ratio-page-2-offset': 1,
'--ratio-page-2-height': 1
},
{
'--ratio-page-2-offset': 0.5,
...timespan(0, 2),
onComplete: () => {
page.remove();
}
});
// Fade in
gsap.fromTo(page, {
'--opacity-page-2': 0
},
{
'--opacity-page-2': 1,
...timespan(0, 1)
});
// Height
gsap.to(page, {
'--ratio-page-2-height': 0.5,
...timespan(2, 3)
});
/* Pages */
// Scale
gsap.fromTo(download.value, {
'--scale-pages': 1
},
{
'--scale-pages': 0.8,
...timespan(3, 4)
});
gsap.to(download.value, {
'--scale-pages': 1,
ease: 'elastic',
...timespan(4, 5)
});
/* Folder */
// Scale
gsap.fromTo(download.value, {
'--scale-folder': 1
},
{
'--scale-folder': 1.12,
...timespan(3, 4)
});
gsap.to(download.value, {
'--scale-folder': 1,
ease: 'elastic',
...timespan(4, 5)
});
};
onMounted(() => {
download.value = document.querySelector('.download');
folderFront.value = document.querySelector('.folder-front');
});
</script>
<style lang="scss">
.folder-wrapper {
width: var(--size);
height: var(--size);
//display: flex;
//justify-content: center;
//align-items: center;
}
.download,
.folder-back,
.page-1,
.page-2,
.folder-front {
position: absolute;
cursor: pointer;
}
.download {
width: var(--size);
height: var(--size);
cursor: pointer;
filter: drop-shadow(rgba(0, 0, 0, 0.09) 4px 8px 12px) drop-shadow(rgba(0, 0, 0, 0.06) 2px 4px 6px) drop-shadow(rgba(0, 0, 0, 0.03) 1px 2px 3px);
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}
.folder-back {
width: var(--size-folder-back);
height: var(--size-folder-back);
transform-origin: 50% 100%;
transform: translate(0%, 0%) scaleY(var(--scale-folder));
}
.page-1 {
width: calc(var(--size-page-1) * var(--ratio-page-1));
height: calc(var(--size-page-1) / var(--ratio-page-1));
border-radius: 8px;
background-color: #F2EEF7;
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
transform-origin: 50% 90%;
transform: translate(50%, 30%) translateY(calc((1 - var(--scale-pages)) * -65%)) scale(var(--scale-pages));
}
.page-2 {
width: calc(var(--size-page-2) * var(--ratio-page-2));
height: calc((var(--size-page-2) * var(--ratio-page-2-height)) / var(--ratio-page-2));
border-radius: 10px;
background-color: #FFFEFF;
opacity: var(--opacity-page-2);
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
transform: translate(25%, 110%) translateY(17%) translateY(calc((1 - var(--scale-pages)) * -85%)) translateY(calc(var(--size) * -1.2 * var(--ratio-page-2-offset))) translateY(calc((1 - var(--ratio-page-2-height)) * -65%)) scale(var(--scale-pages));
background-image: url('data:image/svg+xml;charset=utf-8;base64,PHN2ZyB0PSIxNzMzNDEyMzc1MTMzIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9Ijg5ODgiIHdpZHRoPSIyMDAiIGhlaWdodD0iMjAwIj48cGF0aCBkPSJNMzM4LjU4NTYgMjYyLjE5NTJsLTI4OC4zNTg0IDUwNi44OGMtMjkuMzg4OCA1MS42MDk2IDcuOTM2IDExNS43NjMyIDY3LjMyOCAxMTUuNzYzMkg2OTQuMjcyYzU5LjM5MiAwIDk2LjcxNjgtNjQuMTAyNCA2Ny4zMjgtMTE1Ljc2MzJsLTI4OC4zNTg0LTUwNi44OGMtMjkuNjk2LTUyLjIyNC0xMDQuOTYtNTIuMjI0LTEzNC42NTYgMHoiIGZpbGw9IiM0QkUyQUMiIHAtaWQ9Ijg5ODkiPjwvcGF0aD48cGF0aCBkPSJNNzQ4Ljk1MzYgNTQ3LjEyMzJsLTE1My45MDcyIDI3MC41NDA4Yy0xNy4wNDk2IDI5Ljk1MiA0LjYwOCA2Ny4xNzQ0IDM5LjA2NTYgNjcuMTc0NGgzMDcuODE0NGMzNC40NTc2IDAgNTYuMTE1Mi0zNy4yMjI0IDM5LjA2NTYtNjcuMTc0NGwtMTUzLjkwNzItMjcwLjU0MDhjLTE3LjI1NDQtMzAuMzEwNC02MC45MjgtMzAuMzEwNC03OC4xMzEyIDB6IiBmaWxsPSIjNEJFMkFDIiBwLWlkPSI4OTkwIj48L3BhdGg+PHBhdGggZD0iTTc1OS45MTA0IDc2Ni4xNTY4bC02Ny43ODg4LTExOS4xOTM2LTk2LjEwMjQgMTY4Ljk2Yy0xNy40MDggMzAuNjE3NiA0LjM1MiA2OC44NjQgMzkuMTY4IDY4Ljg2NGg1Ny4yNDE2YzYwLjAwNjQgMC4wNTEyIDk3LjQ4NDgtNjUuODk0NCA2Ny40ODE2LTExOC42MzA0eiIgZmlsbD0iIzA2Q0M3NiIgcC1pZD0iODk5MSI+PC9wYXRoPjxwYXRoIGQ9Ik03MDcuNTMyOCAyOTQuNzU4NGE4Mi41ODU2IDgxLjM1NjggOTAgMSAwIDE2Mi43MTM2IDAgODIuNTg1NiA4MS4zNTY4IDkwIDEgMC0xNjIuNzEzNiAwWiIgZmlsbD0iIzRCRTJBQyIgcC1pZD0iODk5MiI+PC9wYXRoPjxwYXRoIGQ9Ik0yMTcuNzAyNCA3NzEuOTQyNGMtNi43NTg0IDAtMTMuNTY4LTEuNjg5Ni0xOS44NjU2LTUuMTcxMi0xOS43NjMyLTExLjAwOC0yNi44OC0zNS45NDI0LTE1Ljg3Mi01NS43MDU2bDk1LjU5MDQtMTcxLjcyNDhjMTEuMDA4LTE5Ljc2MzIgMzUuOTQyNC0yNi44OCA1NS43MDU2LTE1Ljg3MiAxOS43NjMyIDExLjAwOCAyNi44OCAzNS45NDI0IDE1Ljg3MiA1NS43MDU2bC05NS41OTA0IDE3MS43MjQ4YTQwLjkyOTI4IDQwLjkyOTI4IDAgMCAxLTM1Ljg0IDIxLjA0MzJ6IiBmaWxsPSIjRkZGRkZGIiBwLWlkPSI4OTkzIj48L3BhdGg+PC9zdmc+'); /* 设置背景图片 */
background-size: cover; /* 确保图片覆盖整个div */
background-repeat: no-repeat; /* 防止图片重复 */
}
.folder-front {
width: var(--size-folder-front);
height: var(--size-folder-front);
transform-origin: 50% 100%;
filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.1));
transform: translate(0%, 0%) scaleY(calc(var(--scale-folder) * var(--scale-folder)));
}
</style>

214
src/components/StarButton/StarButton.vue Normal file
View File

@@ -0,0 +1,214 @@
<script setup lang="ts">
</script>
<template>
<button>Button
<div class="star-1">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-2">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-3">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-4">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-5">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
<div class="star-6">
<svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 784.11 815.53"
style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd"
version="1.1" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><defs></defs>
<g id="Layer_x0020_1"><metadata id="CorelCorpID_0Corel-Layer"></metadata>
<path
d="M392.05 0c-20.9,210.08 -184.06,378.41 -392.05,407.78 207.96,29.37 371.12,197.68 392.05,407.74 20.93,-210.06 184.09,-378.37 392.05,-407.74 -207.98,-29.38 -371.16,-197.69 -392.06,-407.78z"
class="fil0"></path></g></svg>
</div>
</button>
</template>
<style scoped lang="scss">
button {
position: relative;
padding: 12px 35px;
background: #FFFFFF;
font-size: 17px;
font-weight: 500;
color: #000000;
border: 3px solid #0e3a3a;
border-radius: 8px;
box-shadow: 0 0 0 #fec1958c;
transition: all .3s ease-in-out;
}
.star-1 {
position: absolute;
top: 20%;
left: 20%;
width: 25px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96);
}
.star-2 {
position: absolute;
top: 45%;
left: 45%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-3 {
position: absolute;
top: 40%;
left: 40%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all 1s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-4 {
position: absolute;
top: 20%;
left: 40%;
width: 8px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all .8s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-5 {
position: absolute;
top: 25%;
left: 45%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all .6s cubic-bezier(0, 0.4, 0, 1.01);
}
.star-6 {
position: absolute;
top: 5%;
left: 50%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 0 #fffdef);
z-index: -5;
transition: all .8s ease;
}
button:hover {
background: #0e3a3a;
color: #FFFFFF;
box-shadow: 0 0 25px #0e3a3a;
border: 3px solid #FFF;
}
button:hover .star-1 {
position: absolute;
top: -80%;
left: -30%;
width: 25px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-2 {
position: absolute;
top: -25%;
left: 10%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-3 {
position: absolute;
top: 55%;
left: 25%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-4 {
position: absolute;
top: 30%;
left: 80%;
width: 8px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-5 {
position: absolute;
top: 25%;
left: 115%;
width: 15px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
button:hover .star-6 {
position: absolute;
top: 5%;
left: 60%;
width: 5px;
height: auto;
filter: drop-shadow(0 0 10px #fffdef);
z-index: 2;
}
.fil0 {
fill: #FFFDEF
}
</style>

153
src/layout/Landing/Content/Content.vue
View File

@@ -43,159 +43,6 @@
</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>
<Clouds/>
</div>
</template>

182
src/layout/Landing/Content/index.scss
View File

@@ -3,6 +3,7 @@
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
@@ -11,8 +12,9 @@
flex-direction: column;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 1100px;
max-width: 1200px;
max-width: 1100px;
height: 600px;
.landing-content-first-container {
@@ -46,182 +48,4 @@
}
}
.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;
}
}
}
}
}
}

102
src/layout/Landing/Header/Header.vue
View File

@@ -1,49 +1,22 @@
<template>
<div class="landing-header">
<div
class="landing-header-content">
<AFlex :vertical="false" align-items="center" justify-content="space-between">
<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">
<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>
</AFlex>
</AFlex>
<div class="landing-header-content">
<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>
<div class="menu">
<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>
<AButton href="/login" type="primary" size="large">
{{ t("landing.immediately") }}
</AButton>
</div>
</div>
</div>
</template>
<script setup lang="ts">
@@ -51,54 +24,7 @@ import {useI18n} from "vue-i18n";
const {t} = useI18n();
const router = useRouter();
// 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)",
// }
// );
// });
// };
</script>
<style src="./index.scss" lang="scss" scoped>

149
src/layout/Landing/Header/index.scss
View File

@@ -11,13 +11,14 @@
align-items: center;
justify-content: space-between;
width: 1200px;
max-width: 1200px;
flex-wrap: wrap;
.logo {
display: flex;
align-items: center;
justify-content: center;
justify-content: flex-start;
cursor: pointer;
flex: 1 1 auto; // 使 logo 可缩放
}
.landing-header-logo {
@@ -28,119 +29,47 @@
}
.landing-header-logo-text {
font-size: 25px;
font-size: 1.5rem;
font-family: "Comic Sans MS", cursive;
font-weight: bolder;
}
.landing-header-menu {
//width: 50%;
.menu {
display: flex;
align-items: center;
flex: 2 1 auto; // 使菜单可缩放
justify-content: flex-end;
padding: 0 20px;
gap: 20px;
AButton {
margin: 0 5px;
}
}
@media (max-width: 768px) {
.landing-header-content {
flex-direction: column; // 在小屏幕上垂直排列
align-items: flex-start; // 左对齐
}
.logo {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
flex: 1 1 auto; // 使 logo 可缩放
}
.menu {
justify-content: center; // 中心对齐
width: 100%;
gap: 0;
}
.landing-header-logo-text {
font-size: 20px; // 调整字体大小
}
}
}
// 黑暗切换按钮
.toggle-box-label-left:empty {
margin-left: -10px;
}
.toggle-box-label-left:before,
.toggle-box-label-left:after {
box-sizing: border-box;
margin: 0;
padding: 0;
/*transition*/
-webkit-transition: 0.25s ease-in-out;
-moz-transition: 0.25s ease-in-out;
-o-transition: 0.25s ease-in-out;
transition: 0.25s ease-in-out;
outline: none;
}
.toggle-box input[type=checkbox],
.toggle-box input[type=checkbox]:active {
position: absolute;
top: -5000px;
height: 0;
width: 0;
opacity: 0;
border: none;
outline: none;
}
.toggle-box label {
display: inline-block;
position: relative;
padding: 0px;
margin-bottom: 20px;
font-size: 14px;
line-height: 16px;
cursor: pointer;
color: rgba(149, 149, 149, 0.51);
font-weight: normal;
}
.toggle-box-label-left:before {
content: '';
display: block;
position: absolute;
z-index: 1;
line-height: 34px;
text-indent: 40px;
height: 16px;
width: 16px;
margin: 4px;
/*border-radius*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
border-radius: 100%;
right: 26px;
bottom: 0px;
background: #FFB200;
transform: rotate(-45deg);
box-shadow: 0 0 10px white;
}
.toggle-box-label-left:after {
content: "";
display: inline-block;
width: 40px;
height: 24px;
/*border-radius*/
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
background: rgba(255, 255, 255, 0.15);
vertical-align: middle;
margin: 0 10px;
border: 2px solid #FFB200;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:before {
right: 17px;
box-shadow: 5px 5px 0 0 #eee;
background: transparent;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left:after {
background: rgba(0, 0, 0, 0.15);
border: 2px solid white;
}
.toggle-box input[type=checkbox] + .toggle-box-label-left {
color: rgba(250, 250, 250, 0.51);
font-weight: bold;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left {
color: rgba(149, 149, 149, 0.51);
font-weight: normal;
}
.toggle-box input[type=checkbox]:checked + .toggle-box-label-left + .toggle-box-label {
color: rgba(250, 250, 250, 0.51);
font-weight: bold;
}
}

124
src/layout/Landing/index.scss
View File

@@ -1,125 +1 @@
.area {
background: var(--landing-background-color-main) !important;
color: var(--text-color);
width: 100%;
height: 100vh;
z-index: -1;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}

18
src/layout/Landing/index.vue
View File

@@ -1,28 +1,16 @@
<template>
<AFlex :vertical="true" align="center" justify-content="center" v-cloak>
<Header />
<Header/>
<Content/>
<Footer/>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<BackgroundAnimation/>
</AFlex>
</template>
<script setup lang="ts">
import Header from "@/layout/Landing/Header/Header.vue";
import Footer from "@/layout/Landing/Footer/Footer.vue";
import Content from "@/layout/Landing/Content/Content.vue";
import BackgroundAnimation from "@/components/BackgroundAnimation/BackgroundAnimation.vue";
</script>
<style src="./index.scss" scoped lang="scss">

144
src/layout/default/Header/Header.vue
View File

@@ -2,17 +2,35 @@
<header class="header-main">
<div class="header-container">
<AFlex :vertical="false" align="center" justify="flex-start" class="header-logo-container">
<AAvatar :size="50" shape="square" :src="logo" @click="router.push('/')"/>
<APopover placement="bottomRight" trigger="click" :arrow="false">
<template #content>
<div style="width: 500px;height: 300px">
888
</div>
</template>
<ACard :body-style="{ padding: '0px' }" :hoverable="true"
@focus="handleCardFocus"
@blur="handleCardBlur"
tabindex="0"
:style="cardStyle"
>
<AAvatar :size="50" shape="square" :src="logo"/>
</ACard>
</APopover>
<span class="header-logo-text" @click="router.push('/')">S.Album</span>
</AFlex>
<AFlex class="header-search-container" :vertical="false" align="center" justify="center">
<APopover :arrow="false" :overlayInnerStyle="{width: '28vw'}"
trigger="click">
<AInput size="large" class="header-search-input" placeholder="Search">
<AInput size="large" class="header-search-input"
@focus="handleInputFocus"
@blur="handleInputBlur"
:style="{borderRadius: borderRadius, boxShadow: boxShadow}"
>
<template #suffix>
<AButton size="small" type="text" shape="circle" @click.prevent>
<template #icon>
<SearchOutlined style="font-size: 16px"/>
<AAvatar size="small" shape="circle" :src="search"/>
</template>
</AButton>
</template>
@@ -34,26 +52,63 @@
</APopover>
</AFlex>
<AFlex :vertical="false" align="center" justify="flex-end" class="header-menu-container">
<AFlex :vertical="false" align="center" justify="flex-start" class="header-menu-item">
<ABadge count="5" :numberStyle="{marginTop: '10px', marginRight: '5px'}">
<AButton type="text" shape="circle" size="large" class="header-menu-item-btn"
:icon="h(BellOutlined)"/>
<AFlex :vertical="false" align="center" justify="flex-start" class="header-menu-item" gap="large">
<AButton type="text" shape="circle" size="large" class="header-menu-item-btn">
<template #icon>
<AAvatar size="default" shape="circle" :src="community"/>
</template>
</AButton>
<ABadge :dot="true" :numberStyle="{
marginTop: '10px',
marginRight: '5px',
backgroundColor: 'rgba(77,167,255,0.89)',
}">
<div class="button-wrapper">
<ADropdown :trigger="['click']">
<AButton type="text" shape="circle" size="large" class="header-menu-item-btn bouncing-button">
<template #icon>
<AAvatar size="small" shape="circle" :src="notice"/>
</template>
</AButton>
<template #overlay>
<AMenu>
<AMenuItem key="reply">
<template #icon>
<EnterOutlined/>
</template>
<span>回复我的</span>
</AMenuItem>
<AMenuItem key="like">
<template #icon>
<LikeOutlined/>
</template>
<span>收到的赞</span>
</AMenuItem>
<AMenuItem key="message">
<template #icon>
<NotificationOutlined/>
</template>
<span>系统消息</span>
</AMenuItem>
</AMenu>
</template>
</ADropdown>
</div>
</ABadge>
</AFlex>
<!-- <AFlex :vertical="false" align="center" justify="flex-start" class="header-menu-item">-->
<!-- <ADropdown>-->
<!-- <template #overlay>-->
<!-- <AMenu @click="changeLang">-->
<!-- <AMenuItem key="zh">{{ t("landing.chinese") }}</AMenuItem>-->
<!-- <AMenuItem key="en">{{ t("landing.english") }}</AMenuItem>-->
<!-- </AMenu>-->
<!-- </template>-->
<!-- <AButton type="text" shape="circle" size="large" :icon="h(TranslationOutlined)">-->
<!-- </AButton>-->
<!-- </ADropdown>-->
<!-- </AFlex>-->
<AFlex :vertical="false" align="center" justify="flex-start" class="header-user-container">
<AAvatar :size="40" class="header-user-avatar" :src="user.user.avatar"/>
<ADropdown :trigger="['click']">
<div class="avatar-wrapper">
<AAvatar :size="40" class="header-user-avatar" :src="user.user.avatar"/>
</div>
<template #overlay>
<ACard style="width: 300px;height: 500px;background-color: white;"></ACard>
</template>
</ADropdown>
</AFlex>
</AFlex>
</div>
@@ -62,22 +117,45 @@
<script lang="ts" setup>
import logo from "@/assets/svgs/logo-album.svg";
import useStore from "@/store";
import {BellOutlined} from "@ant-design/icons-vue";
import {h} from "vue";
import notice from '@/assets/svgs/notice.svg';
import community from '@/assets/svgs/community.svg';
import search from '@/assets/svgs/search.svg';
const user = useStore().user;
// const lang = useStore().lang;
const router = useRouter();
const borderRadius = ref('20px');
const boxShadow = ref('none');
const cardShadow = ref('none');
/**
* 监听输入框聚焦事件
*/
const handleInputFocus = () => {
borderRadius.value = '10px'; // 聚焦时圆角变为0
boxShadow.value = '0 0 10px rgba(0, 123, 255, 0.5)'; // 聚焦时增加阴影
};
/**
* 监听输入框失焦事件
*/
const handleInputBlur = () => {
borderRadius.value = '20px'; // 失去焦点时圆角恢复
boxShadow.value = 'none'; // 失去焦点时阴影消失
};
/**
* 监听卡片聚焦事件
*/
const handleCardFocus = () => {
cardShadow.value = '0 0 10px rgba(0, 123, 255, 0.5)'; // 卡片的阴影
};
/**
* 监听卡片失焦事件
*/
const handleCardBlur = () => {
cardShadow.value = 'none'; // 失去焦点时阴影消失
};
// /**
// * 切换语言
// * @param language
// */
// async function changeLang(language: any) {
// lang.lang = language.key;
// locale.value = language.key;
// }
// 将卡片样式作为计算属性
const cardStyle = computed(() => ({
boxShadow: cardShadow.value,
}));
</script>
<style scoped lang="scss" src="./index.scss">

77
src/layout/default/Header/index.scss
View File

@@ -8,14 +8,9 @@
transition: background-color 0.3s;
z-index: 3;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
//border-radius: 20px;
//position: fixed;
.header-container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 100%;
height: 100%;
@@ -25,57 +20,101 @@
min-width: 30%;
cursor: pointer;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-start;
.header-logo-text {
margin-left: 2%;
font-size: 200%;
font-size: 1.8rem;
font-family: "Comic Sans MS", cursive;
font-weight: bolder;
font-weight: bold;
}
}
.header-search-container {
width: 30%;
.header-search-input {
border-radius: 20px;
}
.header-search-content-body {
margin-top: 10px;
}
}
.header-menu-container {
width: 30%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
.header-menu-item {
width: 85%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
.header-menu-item-btn {
display: block;
}
.button-wrapper {
position: relative;
display: inline-block;
border-radius: 50%;
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.button-wrapper:hover {
transform: scale(1.1);
//border: 2px solid #707072;
}
@keyframes bounce {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(-10deg);
}
/* 向左倾斜 */
50% {
transform: rotate(10deg);
}
/* 向右倾斜 */
75% {
transform: rotate(-10deg);
}
/* 向左倾斜 */
100% {
transform: rotate(0deg);
}
}
.bouncing-button:hover {
animation: bounce 0.5s ease infinite; /* 鼠标悬浮时左右摇摆 */
}
}
.header-user-container {
.header-user-avatar {
display: block;
cursor: pointer;
}
.avatar-wrapper {
display: inline-block;
border-radius: 50%;
overflow: hidden;
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.avatar-wrapper:hover {
//border: 2px solid #707072; /* 鼠标悬浮时的边框颜色 */
transform: scale(1.1);
}
}
}
}
}

154
src/layout/default/Sidebar/Sidebar.vue
View File

@@ -1,77 +1,105 @@
<template>
<div>
<AMenu
v-model:selectedKeys="state.selectedKeys"
class="sidebar"
:selectable="true"
:multiple="false"
mode="vertical"
v-model:openKeys="state.openKeys"
:inlineIndent="30"
:inlineCollapsed="false"
:items="items"
@click="handleClick"
>
</AMenu>
<div class="sidebar">
<AMenu
:selectedKeys="[router.currentRoute.value.path.split('/').slice(-2).join('/')]"
:selectable="true"
:multiple="false"
mode="vertical"
:inlineIndent="24"
:inlineCollapsed="false"
@select="handleClick"
>
<AMenuItemGroup :title="t('album.photo')" type="group" key="photo">
<AMenuItem :title="t('album.allAlbums')" key="photo/all">
<template #icon>
<AAvatar shape="square" size="small" :src="allPhoto"/>
</template>
<span class="ant-menu-item-title">{{ t('album.allAlbums') }}</span>
</AMenuItem>
<AMenuItem :title="t('album.recentUploads')" key="photo/recent">
<template #icon>
<AAvatar shape="square" size="small" :src="recentUpload"/>
</template>
<span class="ant-menu-item-title">{{ t('album.recentUploads') }}</span>
</AMenuItem>
</AMenuItemGroup>
<AMenuItemGroup :title="t('album.albums')" key="album">
<AMenuItem :title="t('album.albums')" key="album/albums">
<template #icon>
<AAvatar shape="square" size="small" :src="album"/>
</template>
<span class="ant-menu-item-title">{{ t('album.albums') }}</span>
</AMenuItem>
<AMenuItem :title="t('album.peopleAlbums')" key="album/people">
<template #icon>
<AAvatar shape="square" size="small" :src="peopleAlbum"/>
</template>
<span class="ant-menu-item-title">{{ t('album.peopleAlbums') }}</span>
</AMenuItem>
<AMenuItem :title="t('album.locationAlbums')" key="album/location">
<template #icon>
<AAvatar shape="square" size="small" :src="loactionAlbum"/>
</template>
<span class="ant-menu-item-title">{{ t('album.locationAlbums') }}</span>
</AMenuItem>
<AMenuItem :title="t('album.thingsAlbums')" key="album/thing">
<template #icon>
<AAvatar shape="square" size="small" :src="thingAlbum"/>
</template>
<span class="ant-menu-item-title">{{ t('album.thingsAlbums') }}</span>
</AMenuItem>
</AMenuItemGroup>
<ADivider/>
<AMenuItem :title="t('album.recyclingBin')" key="photo/recycling">
<template #icon>
<AAvatar shape="square" size="small" :src="recyclingbin"/>
</template>
<span class="ant-menu-item-title">{{ t('album.recyclingBin') }}</span>
</AMenuItem>
<AMenuItem :title="t('album.recyclingBin')" key="photo/ai">
<template #icon>
<AAvatar shape="square" size="small" :src="ai"/>
</template>
<span class="ant-menu-item-title">图像增强</span>
</AMenuItem>
</AMenu>
</div>
<div class="sidebar-bottom">
<ACard :bordered="false" style="box-shadow: none">
<Folder/>
<span class="sidebar-folder-text-title">30% In-used</span>
<AProgress :percent="30" size="small" :showInfo="false" style="width: 150px"/>
<AFlex :vertical="false" align="center" justify="space-between" style="width: 150px">
<span class="sidebar-folder-info-text1">500G</span>
<span class="sidebar-folder-info-text2">500G</span>
</AFlex>
</ACard>
</div>
</div>
</template>
<script lang="ts" setup>
import {VueElement, h, reactive} from 'vue';
import {
PictureOutlined,
TagsOutlined,
AppstoreOutlined,
UploadOutlined,
RestOutlined,
TagOutlined,
SmileOutlined,
EnvironmentOutlined,
AppstoreAddOutlined
} from '@ant-design/icons-vue';
import {ItemType} from 'ant-design-vue';
import {useI18n} from 'vue-i18n';
import allPhoto from '@/assets/svgs/all-photo.svg';
import recentUpload from '@/assets/svgs/recent-upload.svg';
import album from '@/assets/svgs/album.svg';
import peopleAlbum from '@/assets/svgs/people-album.svg';
import loactionAlbum from '@/assets/svgs/location-album.svg';
import thingAlbum from '@/assets/svgs/thing-album.svg';
import recyclingbin from '@/assets/svgs/recyclingbin.svg';
import Folder from "@/components/Folder/Folder.vue";
import ai from '@/assets/svgs/ai.svg';
const {t} = useI18n();
const router = useRouter();
const state = reactive({
openKeys: [router.currentRoute.value.path.split('/').slice(-1)],
selectedKeys: [router.currentRoute.value.path.split('/').slice(-1)],
});
function getItem(
label: VueElement | string,
key: string,
icon?: any,
children?: ItemType[],
type?: 'group',
): ItemType {
return {
key,
icon,
children,
label,
type,
} as ItemType;
}
const items: ItemType[] = reactive([
getItem(t('album.photo'), 'photo', () => h(AppstoreOutlined), [
getItem(t('album.allAlbums'), 'all', () => h(PictureOutlined)),
getItem(t('album.recentUploads'), 'recent', () => h(UploadOutlined)),
]),
getItem(t('album.albums'), 'album', () => h(TagsOutlined), [
getItem(t('album.albums'), 'albums', () => h(TagOutlined)),
getItem(t('album.peopleAlbums'), 'people', () => h(SmileOutlined)),
getItem(t('album.locationAlbums'), 'location', () => h(EnvironmentOutlined)),
getItem(t('album.thingsAlbums'), 'thing', () => h(AppstoreAddOutlined)),
]),
getItem(t('album.recyclingBin'), 'recycling', () => h(RestOutlined)),
getItem('网盘导入', '10'),
]);
function handleClick({keyPath}) {
const path = keyPath.join('/');
router.push(`/main/${path}`);
/**
* handle click event of menu item
* @param key
*/
function handleClick({key}) {
router.push(`/main/${key}`);
}
</script>

42
src/layout/default/Sidebar/index.scss
View File

@@ -1,6 +1,44 @@
.sidebar {
width: 15vw;
height: calc(100vh - 70px);
width: 220px;
height: calc(100vh - 275px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
overflow-y: scroll;
overflow-x: hidden;
background-color: #fff;
.ant-menu-item-title {
font-size: 15px;
margin-left: 10px;
font-weight: bold;
}
}
.sidebar-bottom {
width: 220px;
height: 200px;
background-color: #fff;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
border-top: 1px solid #e8e8e8;
.sidebar-folder-text-title {
font-family: "Comic Sans MS", cursive;
}
.sidebar-folder-info-text1 {
font-family: "Comic Sans MS", cursive;
font-size: 12px;
font-weight: bold;
color: #3e3e42;
}
.sidebar-folder-info-text2 {
font-family: "Comic Sans MS", cursive;
font-size: 12px;
color: rgba(112, 112, 114, 0.82);
font-weight: bold;
}
}

16
src/locales/language/en.ts
View File

@@ -71,22 +71,6 @@ export default {
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',

35
src/locales/language/zh.ts
View File

@@ -54,42 +54,11 @@ export default {
home: '首页',
community: '社 区',
help: '帮助',
development: '开发平台',
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: '网络连接失败！',
@@ -140,7 +109,7 @@ export default {
},
album: {
photo: '照片',
allAlbums: '所有相册',
allAlbums: '所有照片',
recentUploads: '最近上传',
albums: '相册',
peopleAlbums: '人物',

2
src/router/modules/recycling_bin.ts
View File

@@ -2,7 +2,7 @@ import RecyclingBin from "@/views/RecyclingBin/RecyclingBin.vue";
export default [
{
path: '/main/recycling',
path: '/main/photo/recycling',
name: 'recycling',
component: RecyclingBin,
meta: {

2
src/router/router.ts
View File

@@ -36,7 +36,7 @@ router.beforeEach((to, _from, next) => {
if (to.path === '/login' || to.path === '/qrlogin' || to.path === '/resetpass') {
if (isLoggedIn) {
// 如果用户已登录，重定向到主页或其他页面
next({path: '/main'});
next({path: '/main/photo/all'});
} else {
next();
}

17
src/views/Login/LoginPage.vue
View File

@@ -171,21 +171,7 @@
:ref="accountLoginRotateRef"
/>
</AModal>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<BackgroundAnimation/>
</div>
</a-spin>
</template>
@@ -202,6 +188,7 @@ import {message} from "ant-design-vue";
import {accountLoginApi, phoneLoginApi, sendMessage} from "@/api/user";
import useStore from "@/store";
import {useDebounceFn, useThrottleFn} from "@vueuse/core";
import BackgroundAnimation from "@/components/BackgroundAnimation/BackgroundAnimation.vue";
const router = useRouter();
const {t} = useI18n();

126
src/views/Login/index.scss
View File

@@ -107,130 +107,4 @@
}
}
// 背景图动画
.area {
background: var(--landing-background-color-main);
//background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
width: 100%;
height: 100vh;
z-index: -1;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
}

75
src/views/Main/MainPage.vue
View File

@@ -5,44 +5,67 @@
</div>
<div class="main-content">
<Sidebar/>
<div class="main-content-container">
<!-- <ACard class="main-container-card">-->
<router-view/>
<!-- </ACard>-->
<router-view/>
</div>
</div>
<AFloatButtonGroup trigger="click" type="primary">
<template #icon>
<BarsOutlined/>
</template>
<AFloatButton @click="changeLanguage">
<template #icon>
<TranslationOutlined/>
</template>
</AFloatButton>
<AFloatButton>
<template #icon>
<AlertOutlined/>
</template>
</AFloatButton>
</AFloatButtonGroup>
</div>
</template>
<script setup lang="ts">
import useStore from "@/store";
import {h, onMounted, onUnmounted} from "vue";
// import {h, onMounted, onUnmounted} from "vue";
import Header from "@/layout/default/Header/Header.vue";
import {notification} from "ant-design-vue";
import {SmileOutlined} from "@ant-design/icons-vue";
// import {notification} from "ant-design-vue";
// import {SmileOutlined} from "@ant-design/icons-vue";
import Sidebar from "@/layout/default/Sidebar/Sidebar.vue";
import {useI18n} from "vue-i18n";
// const websocket = useStore().websocket;
// const userInfo = useStore().user;
const lang = useStore().lang;
const {locale} = useI18n();
const websocket = useStore().websocket;
const userInfo = useStore().user;
const wsOptions = {
url: import.meta.env.VITE_MESSAGE_SOCKET_URL + "?user_id=" + userInfo.user.uid + "&token=" + userInfo.user.access_token,
};
/**
* 切换语言
*/
async function changeLanguage() {
lang.lang = lang.lang === 'en' ? 'zh' : 'en';
locale.value = lang.lang;
}
onMounted(() => {
websocket.initialize(wsOptions);
websocket.on("message", async (data: any) => {
notification.open({
message: '消息来了',
description:
data,
icon: () => h(SmileOutlined, {style: 'color: #108ee9'}),
});
});
});
onUnmounted(() => {
websocket.close(false);
});
// const wsOptions = {
// url: import.meta.env.VITE_MESSAGE_SOCKET_URL + "?user_id=" + userInfo.user.uid + "&token=" + userInfo.user.access_token,
// };
//
// onMounted(() => {
// websocket.initialize(wsOptions);
// websocket.on("message", async (data: any) => {
// notification.open({
// message: '消息来了',
// description:
// data,
// icon: () => h(SmileOutlined, {style: 'color: #108ee9'}),
// });
// });
// });
// onUnmounted(() => {
// websocket.close(false);
// });
</script>
<style scoped lang="less" src="./index.scss">

1
src/views/Photograph/AllPhoto/AllPhoto.vue
View File

@@ -5,6 +5,7 @@
<template>
<div>
<p>AllPhoto</p>
<!-- <Folder/>-->
</div>
</template>

16
src/views/QRLogin/QRLogin.vue
View File

@@ -38,20 +38,7 @@
</ATooltip>
</ACard>
</div>
<div class="area">
<ul class="circles">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<BackgroundAnimation/>
</div>
</template>
<script setup lang="ts">
@@ -66,6 +53,7 @@ import logo from "@/assets/svgs/logo-album.svg";
import useStore from "@/store";
import {message} from "ant-design-vue";
import {getUserDevice} from "@/api/user";
import BackgroundAnimation from "@/components/BackgroundAnimation/BackgroundAnimation.vue";
const {t} = useI18n();

127
src/views/QRLogin/index.scss
View File

@@ -115,131 +115,4 @@
color: #999ba1 !important;
}
}
.area {
background: var(--landing-background-color-main);
//background: -webkit-linear-gradient(to left, #b9f187, #90d952, #70c13a, #52a82e) !important;
width: 100%;
height: 100vh;
z-index: -1;
overflow: hidden;
position: fixed;
top: 0;
left: 0;
}
.circles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.circles li {
position: absolute;
display: block;
list-style: none;
width: 20px;
height: 20px;
background: rgba(255, 255, 255, 0.5);
animation: animate 25s linear infinite;
bottom: -150px;
}
.circles li:nth-child(1) {
left: 25%;
width: 80px;
height: 80px;
animation-delay: 0s;
}
.circles li:nth-child(2) {
left: 10%;
width: 20px;
height: 20px;
animation-delay: 2s;
animation-duration: 12s;
}
.circles li:nth-child(3) {
left: 70%;
width: 20px;
height: 20px;
animation-delay: 4s;
}
.circles li:nth-child(4) {
left: 40%;
width: 60px;
height: 60px;
animation-delay: 0s;
animation-duration: 18s;
}
.circles li:nth-child(5) {
left: 65%;
width: 20px;
height: 20px;
animation-delay: 0s;
}
.circles li:nth-child(6) {
left: 75%;
width: 110px;
height: 110px;
animation-delay: 3s;
}
.circles li:nth-child(7) {
left: 35%;
width: 150px;
height: 150px;
animation-delay: 7s;
}
.circles li:nth-child(8) {
left: 50%;
width: 25px;
height: 25px;
animation-delay: 15s;
animation-duration: 45s;
}
.circles li:nth-child(9) {
left: 20%;
width: 15px;
height: 15px;
animation-delay: 2s;
animation-duration: 35s;
}
.circles li:nth-child(10) {
left: 85%;
width: 150px;
height: 150px;
animation-delay: 0s;
animation-duration: 11s;
}
@keyframes animate {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
border-radius: 0;
}
100% {
transform: translateY(-1000px) rotate(720deg);
opacity: 0;
border-radius: 50%;
}
}
}