diff --git a/components.d.ts b/components.d.ts index 93bc2c1..d09096d 100644 --- a/components.d.ts +++ b/components.d.ts @@ -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'] diff --git a/package.json b/package.json index 4247008..a762ce9 100644 --- a/package.json +++ b/package.json @@ -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" } diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss index 282f60f..2f15667 100644 --- a/src/assets/styles/theme.scss +++ b/src/assets/styles/theme.scss @@ -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; + } } - diff --git a/src/assets/svgs/ai.svg b/src/assets/svgs/ai.svg new file mode 100644 index 0000000..6c3f47f --- /dev/null +++ b/src/assets/svgs/ai.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/album.svg b/src/assets/svgs/album.svg new file mode 100644 index 0000000..68a660d --- /dev/null +++ b/src/assets/svgs/album.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/all-photo.svg b/src/assets/svgs/all-photo.svg new file mode 100644 index 0000000..5e9735f --- /dev/null +++ b/src/assets/svgs/all-photo.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/community.svg b/src/assets/svgs/community.svg new file mode 100644 index 0000000..250f843 --- /dev/null +++ b/src/assets/svgs/community.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/dinosaur-comfort.svg b/src/assets/svgs/dinosaur-comfort.svg deleted file mode 100644 index 1c9add5..0000000 --- a/src/assets/svgs/dinosaur-comfort.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/svgs/dinosaur-contemplation.svg b/src/assets/svgs/dinosaur-contemplation.svg deleted file mode 100644 index 678a711..0000000 --- a/src/assets/svgs/dinosaur-contemplation.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/svgs/dinosaur-excited.svg b/src/assets/svgs/dinosaur-excited.svg deleted file mode 100644 index ae4a01a..0000000 --- a/src/assets/svgs/dinosaur-excited.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-glad.svg b/src/assets/svgs/dinosaur-glad.svg deleted file mode 100644 index 6748594..0000000 --- a/src/assets/svgs/dinosaur-glad.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/svgs/dinosaur-greet.svg b/src/assets/svgs/dinosaur-greet.svg deleted file mode 100644 index 760a22b..0000000 --- a/src/assets/svgs/dinosaur-greet.svg +++ /dev/null @@ -1,352 +0,0 @@ - - - 8 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/src/assets/svgs/dinosaur-happy.svg b/src/assets/svgs/dinosaur-happy.svg deleted file mode 100644 index 82a9f5b..0000000 --- a/src/assets/svgs/dinosaur-happy.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/svgs/dinosaur-joy.svg b/src/assets/svgs/dinosaur-joy.svg deleted file mode 100644 index 6c5b724..0000000 --- a/src/assets/svgs/dinosaur-joy.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-play.svg b/src/assets/svgs/dinosaur-play.svg deleted file mode 100644 index c027654..0000000 --- a/src/assets/svgs/dinosaur-play.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-pleasure.svg b/src/assets/svgs/dinosaur-pleasure.svg deleted file mode 100644 index fc43be3..0000000 --- a/src/assets/svgs/dinosaur-pleasure.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-rouse.svg b/src/assets/svgs/dinosaur-rouse.svg deleted file mode 100644 index beb3462..0000000 --- a/src/assets/svgs/dinosaur-rouse.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/assets/svgs/dinosaur-satisfy.svg b/src/assets/svgs/dinosaur-satisfy.svg deleted file mode 100644 index f9bc570..0000000 --- a/src/assets/svgs/dinosaur-satisfy.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svgs/dinosaur-tongue.svg b/src/assets/svgs/dinosaur-tongue.svg deleted file mode 100644 index f8e750c..0000000 --- a/src/assets/svgs/dinosaur-tongue.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svgs/file.svg b/src/assets/svgs/file.svg new file mode 100644 index 0000000..3101494 --- /dev/null +++ b/src/assets/svgs/file.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/location-album.svg b/src/assets/svgs/location-album.svg new file mode 100644 index 0000000..79a6aa0 --- /dev/null +++ b/src/assets/svgs/location-album.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/notice.svg b/src/assets/svgs/notice.svg new file mode 100644 index 0000000..7b5b29a --- /dev/null +++ b/src/assets/svgs/notice.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/people-album.svg b/src/assets/svgs/people-album.svg new file mode 100644 index 0000000..dee742f --- /dev/null +++ b/src/assets/svgs/people-album.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/recent-upload.svg b/src/assets/svgs/recent-upload.svg new file mode 100644 index 0000000..9f180f1 --- /dev/null +++ b/src/assets/svgs/recent-upload.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/recyclingbin.svg b/src/assets/svgs/recyclingbin.svg new file mode 100644 index 0000000..02a1c55 --- /dev/null +++ b/src/assets/svgs/recyclingbin.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/search.svg b/src/assets/svgs/search.svg new file mode 100644 index 0000000..41e9f47 --- /dev/null +++ b/src/assets/svgs/search.svg @@ -0,0 +1 @@ + diff --git a/src/assets/svgs/thing-album.svg b/src/assets/svgs/thing-album.svg new file mode 100644 index 0000000..cb3befe --- /dev/null +++ b/src/assets/svgs/thing-album.svg @@ -0,0 +1 @@ + diff --git a/src/components/AnimatedSvgIllustration/AnimatedSvgIllustration.vue b/src/components/AnimatedSvgIllustration/AnimatedSvgIllustration.vue new file mode 100644 index 0000000..1e7cf79 --- /dev/null +++ b/src/components/AnimatedSvgIllustration/AnimatedSvgIllustration.vue @@ -0,0 +1,459 @@ + + + + + diff --git a/src/components/AnimatedSvgIllustration/index.scss b/src/components/AnimatedSvgIllustration/index.scss new file mode 100644 index 0000000..a41a211 --- /dev/null +++ b/src/components/AnimatedSvgIllustration/index.scss @@ -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; +} diff --git a/src/components/BackgroundAnimation/BackgroundAnimation.vue b/src/components/BackgroundAnimation/BackgroundAnimation.vue new file mode 100644 index 0000000..10db15c --- /dev/null +++ b/src/components/BackgroundAnimation/BackgroundAnimation.vue @@ -0,0 +1,148 @@ + + + + + diff --git a/src/components/BoxDog/index.scss b/src/components/BoxDog/index.scss index 7567058..10ec875 100644 --- a/src/components/BoxDog/index.scss +++ b/src/components/BoxDog/index.scss @@ -1,4 +1,4 @@ -.container { + .container { position: relative; top: 50%; left: 50%; diff --git a/src/components/Clouds/index.scss b/src/components/Clouds/index.scss index 96e33cc..69d9974 100644 --- a/src/components/Clouds/index.scss +++ b/src/components/Clouds/index.scss @@ -1,6 +1,6 @@ .card-content { z-index: 10; - width: 80%; + width: 800px; position: absolute; top: 50%; left: 50%; diff --git a/src/components/Folder/Folder.vue b/src/components/Folder/Folder.vue new file mode 100644 index 0000000..2d0ed2c --- /dev/null +++ b/src/components/Folder/Folder.vue @@ -0,0 +1,217 @@ + + + diff --git a/src/components/StarButton/StarButton.vue b/src/components/StarButton/StarButton.vue new file mode 100644 index 0000000..60e5724 --- /dev/null +++ b/src/components/StarButton/StarButton.vue @@ -0,0 +1,214 @@ + + + + + diff --git a/src/layout/Landing/Content/Content.vue b/src/layout/Landing/Content/Content.vue index fcca080..37c1544 100644 --- a/src/layout/Landing/Content/Content.vue +++ b/src/layout/Landing/Content/Content.vue @@ -43,159 +43,6 @@ -
-
-
- - - -
-
- -

{{ t('landing.secondTitle') }}

-

{{ t('landing.secondDesc') }}

- - -
-
- - {{ t('landing.secondFeature1') }} - {{ t('landing.secondFeature1Desc') }} -
-
-
-
- - {{ t('landing.secondFeature2') }} - {{ t('landing.secondFeature2Desc') }} -
-
-
-
- - {{ t('landing.secondFeature3') }} - {{ t('landing.secondFeature3Desc') }} -
-
- -
-
-
-
-
-
- -

{{ t('landing.thirdTitle') }}

-

{{ t('landing.thirdDesc') }}

- - -
-
- - {{ t('landing.thirdFeature1') }} - {{ t('landing.thirdFeature1Desc') }} -
-
-
-
- - {{ t('landing.thirdFeature2') }} - {{ t('landing.thirdFeature2Desc') }} -
-
-
-
- - {{ t('landing.thirdFeature3') }} - {{ t('landing.thirdFeature3Desc') }} -
-
- -
-
- - - -
-
-
-
-
-
-

{{ t('landing.fourthTitle') }}

-
-
-
- - - - - {{ t('landing.fourthFeature1') }} - -

- 自动识别和分类您的照片，让查找和管理变得更智能。 -

-
-
- - - - - 隐私加密 - -

- 确保您的数据安全，通过先进的隐私保护技术保障用户隐私。 -

-
-
- - - - - 云存储服务 - -

- 安全存储您的照片，实现随时随地访问与管理。 -

-
-
- - - - - 社区分享 - -

- 简单快速地与朋友分享您的照片，享受社交乐趣。 -

-
-
- - - - - 照片增强工具 - -

- 多种编辑功能帮助您提升照片质量，展现最佳效果。 -

-
-
- - - - - 多端同步 - -

- 轻松管理您的照片，随时随地访问，无缝同步。 -

-
-
-
-
diff --git a/src/layout/Landing/Content/index.scss b/src/layout/Landing/Content/index.scss index f693697..101e637 100644 --- a/src/layout/Landing/Content/index.scss +++ b/src/layout/Landing/Content/index.scss @@ -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; - } - } - } - } - - } - } diff --git a/src/layout/Landing/Header/Header.vue b/src/layout/Landing/Header/Header.vue index bf6ffe5..82af509 100644 --- a/src/layout/Landing/Header/Header.vue +++ b/src/layout/Landing/Header/Header.vue @@ -1,49 +1,22 @@ +