From f8f2a2f15a44cc4decc771cf5a057452001ef52f Mon Sep 17 00:00:00 2001 From: Gimmy <975402925@qq.com> Date: Tue, 5 Nov 2024 11:22:53 +0800 Subject: [PATCH 1/3] docs(site): add common footer --- .../sites/public/static/css/design-common.css | 265 ++++++++++++++++++ .../sites/public/static/js/design-common.js | 112 +++++++- 2 files changed, 376 insertions(+), 1 deletion(-) diff --git a/examples/sites/public/static/css/design-common.css b/examples/sites/public/static/css/design-common.css index a3fb6c60c4..fd7e1e023f 100644 --- a/examples/sites/public/static/css/design-common.css +++ b/examples/sites/public/static/css/design-common.css @@ -553,3 +553,268 @@ height: 3.33333333vw; } } + +.tinyui-design-footer { + font-size: 16px; + color: #2c2e30; + background-color: #fafafa; + overflow: hidden; +} +.tinyui-design-footer .footer-content { + display: flex; + margin: 0 auto; + padding: 10vh 0 6.8vh; + justify-content: center; + width: 70%; + box-sizing: border-box; +} +.tinyui-design-footer .footer-content .contact { + width: fit-content; +} +.tinyui-design-footer .footer-content .contact .group-code { + margin: 30px 0; +} +.tinyui-design-footer .footer-content .contact .group-code > img { + width: 150px; + border: solid 0.55vw #f2f6f9; +} +.tinyui-design-footer .footer-content .links { + display: grid; + grid-template-columns: repeat(4, auto); + justify-content: space-between; + flex: 1 1 auto; +} +.tinyui-design-footer .footer-content .links .link-item .list-item { + width: 100%; + display: block; + text-decoration: none; + color: #2c2e30; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +} +.tinyui-design-footer .footer-content .links .link-item .list-item:hover { + color: #2f5bea; +} +.tinyui-design-footer .footer-text-list { + font-size: 14px; + line-height: 39px; + white-space: nowrap; +} +.tinyui-design-footer .footer-title { + display: inline-block; + height: 22px; + line-height: 22px; + margin-left: 3px; + font-size: 16px; + font-weight: 600; + vertical-align: middle; +} +.tinyui-design-footer .footer-title-container { + margin-bottom: 17px; +} +.tinyui-design-footer .copyright { + height: 86px; + line-height: 1.8; + text-align: center; + font-size: 14px; + color: #fff; + background-color: #3e4345; + width: 100%; + display: flex; + flex-direction: column; + justify-content: center; +} +.tinyui-design-footer .copyright p { + margin: 0; +} +.footer-logo-container { + position: relative; + padding-right: 4.7%; + margin-right: 4.7%; + box-sizing: border-box; +} +.footer-logo-container::after { + content: ''; + position: absolute; + display: block; + height: 135px; + border-right: 1px solid #979797; + opacity: 0.28; + top: 60px; + right: 0; +} +.footer-promotional-container { + margin: 10px 0; + padding-left: 1.05vw; +} +.footer-logo-link { + display: inline-block; + text-decoration: none; + cursor: pointer; + height: 38px; +} +.footer-logo-link-list { + height: 26px; + margin-right: 30px; +} +.footer-logo-link-list:last-child { + margin-right: 0; +} +.footer-logo-link-list img { + height: 100%; +} +.footer-promotional-label { + font-size: 14px; + height: 40px; + line-height: 40px; + white-space: nowrap; +} +.footer-logo-title { + display: inline-block; + height: 38px; + font-size: 21px; + font-weight: 700; + color: #242424; + margin-left: 0.53vw; +} +.footer-logo { + vertical-align: middle; + width: 53px; +} +.footer-logo-s { + vertical-align: middle; + width: 16px; +} +.footer-logolist-container { + margin-top: 10px; +} +.footer-logo-list { + margin-right: 1.46vw; +} +.icon-arrow { + display: none; + position: absolute; + top: 4px; + right: 0; + width: 16px; + height: 16px; + transform: rotate(0deg); + transition: all 0.3s ease-out; + transform-origin: center center; + background: url(assets/icon-arrow.png) no-repeat; + background-size: 100% 100%; +} +@media screen and (max-width: 1339px) { + .tinyui-design-footer .footer-content { + width: 84%; + } + .tinyui-design-footer .footer-content .contact .group-code > img { + width: 85px; + } +} +@media screen and (max-width: 1279px) { + .tinyui-design-footer .footer-content { + width: 96%; + } + .tinyui-design-footer .footer-logo-container { + padding-right: 2%; + margin-right: 2%; + } +} +@media screen and (max-width: 1023px) { + .tinyui-design-footer .footer-logo-container { + display: flex; + padding-right: 0; + margin-right: 0; + margin-bottom: 20px; + align-items: center; + flex-direction: column; + justify-content: center; + padding-bottom: 40px; + border-bottom: 1px solid #e5e6ea; + } + .tinyui-design-footer .footer-logo-container::after { + display: none; + } + .tinyui-design-footer .footer-logo-container .footer-logolist-container { + padding-left: 0; + } + .tinyui-design-footer .footer-logo-container .footer-promotional-container { + padding: 0; + margin-left: 0; + width: 100%; + text-align: center; + } + .tinyui-design-footer .footer-content { + flex-direction: column; + width: 100%; + padding: 50px 30px 20px; + } + .tinyui-design-footer .footer-content .links { + display: flex; + flex-direction: column; + align-items: center; + } + .tinyui-design-footer .footer-content .links .link-item { + text-align: center; + width: 100%; + border-bottom: 1px solid #e5e6ea; + } + .tinyui-design-footer .footer-content .links .link-item .list-item { + width: 100%; + } + .tinyui-design-footer .footer-content .links .link-item div { + width: 100%; + text-align: left; + } + .tinyui-design-footer .footer-content .contact { + width: 100%; + text-align: center; + display: flex; + flex-direction: column-reverse; + } + .tinyui-design-footer .footer-content .contact .group-code { + margin-left: 0; + margin: 30px auto 12px; + } + .tinyui-design-footer .footer-content .contact .footer-logo-s { + display: none; + } + .tinyui-design-footer .footer-content .contact .footer-title { + font-size: 16px; + color: #2c2e30; + line-height: 22px; + } + .tinyui-design-footer .footer-content .footer-text-list { + padding-left: 23px; + height: 0; + overflow: hidden; + transition: all 0.5s ease-out; + } + .tinyui-design-footer .footer-content .footer-text-list.current { + height: fit-content; + } + .tinyui-design-footer .footer-content .footer-title-container { + margin: 19px 0; + position: relative; + text-align: left; + } + .tinyui-design-footer .footer-content .footer-title-container .icon-arrow { + display: block; + } + .tinyui-design-footer .footer-content .footer-title-container.current .icon-arrow { + transform: rotate(180deg); + } + .tinyui-design-footer .copyright { + background: transparent; + border-top: 1px solid #e5e6ea; + } + .tinyui-design-footer .copyright p { + font-size: 12px; + text-align: center; + color: #2c2e30; + line-height: 21px; + margin: 0; + } +} diff --git a/examples/sites/public/static/js/design-common.js b/examples/sites/public/static/js/design-common.js index 07036fbdc2..cc8e73a837 100644 --- a/examples/sites/public/static/js/design-common.js +++ b/examples/sites/public/static/js/design-common.js @@ -31,6 +31,116 @@ const headerHtml = ` ` +const footerHtml = `
` + class DesignCommon { renderHeader() { document.getElementById('header').innerHTML = headerHtml @@ -40,7 +150,7 @@ class DesignCommon { document.head.append(link) } renderFooter() { - // 空方法,用于给官网执行,解决报错 + document.getElementById('footer').innerHTML = footerHtml } } window.TDCommon = DesignCommon From 01127fec0427ad56d7eb67f769ec6829b43923cc Mon Sep 17 00:00:00 2001 From: Gimmy <975402925@qq.com> Date: Tue, 5 Nov 2024 11:31:33 +0800 Subject: [PATCH 2/3] docs(site): optimize demos scroll behavior --- .../sites/src/views/components/components.vue | 2 +- .../src/views/components/float-settings.vue | 16 +++------------- examples/sites/src/views/layout/layout.vue | 11 ----------- 3 files changed, 4 insertions(+), 25 deletions(-) diff --git a/examples/sites/src/views/components/components.vue b/examples/sites/src/views/components/components.vue index 1baa584124..ffe6be37ee 100644 --- a/examples/sites/src/views/components/components.vue +++ b/examples/sites/src/views/components/components.vue @@ -493,7 +493,7 @@ export default defineComponent({ }) } } - }, 600) + }, 0) } // 在singleDemo情况时,才需要滚动示例区域到顶 diff --git a/examples/sites/src/views/components/float-settings.vue b/examples/sites/src/views/components/float-settings.vue index cc88309477..c73b4af60b 100644 --- a/examples/sites/src/views/components/float-settings.vue +++ b/examples/sites/src/views/components/float-settings.vue @@ -200,17 +200,11 @@ export default defineComponent({ const nav = document.querySelector('.nav') if (docLayout) { docLayout.onscroll = debounce(100, false, () => { - const { - scrollTop: layoutScrollTop, - scrollHeight: layoutScrollHeight, - clientHeight: layoutHeight - } = docLayout + const { scrollTop: layoutScrollTop } = docLayout const headerHeight = docLayout.querySelector('header')?.clientHeight || 0 - const footerHeight = docLayout.querySelector('#footer')?.clientHeight || 0 const footerTop = footer.getBoundingClientRect().top const navHeight = nav?.clientHeight || 0 const currSettingsBottom = parseInt(window.getComputedStyle(floatSettings.value).getPropertyValue('bottom')) - const footerVisibleHeight = footerHeight - (layoutScrollHeight - layoutScrollTop - layoutHeight) state.showBackTop = layoutScrollTop > 500 state.showSettings = footerTop - navHeight - headerHeight > 220 @@ -218,11 +212,6 @@ export default defineComponent({ if (!state.initBottomVal) { state.initBottomVal = currSettingsBottom } - if (footerVisibleHeight > state.initBottomVal - 40) { - state.settingsStyle.bottom = `${footerVisibleHeight + 20}px` - } else { - state.settingsStyle.bottom = DEFAULT_BOTTOM_VAL - } }) } }) @@ -297,9 +286,10 @@ export default defineComponent({ border-radius: 12px; background-color: #fff; cursor: pointer; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16); &:hover { - box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.15); + box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.16); .settings-icon { color: #191919; diff --git a/examples/sites/src/views/layout/layout.vue b/examples/sites/src/views/layout/layout.vue index 4b0f120a90..40c8c54d8f 100644 --- a/examples/sites/src/views/layout/layout.vue +++ b/examples/sites/src/views/layout/layout.vue @@ -153,17 +153,6 @@ export default defineComponent({ ) onMounted(async () => { - // 每次切换路由,有锚点则跳转到锚点,否则导航到顶部 - routerCbDestroy = router.afterEach((to) => { - if (to.hash) { - const el = document.querySelector(to.hash) - if (el) { - return el.scrollIntoView() - } - } - state.contentRef.scrollTo({ top: 0, behavior: 'auto' }) - }) - // 刷新后,高亮相应的菜单 const cmpId = router.currentRoute.value?.params?.cmpId if (cmpId) { From 75aeaccca7a84eb59c63f2a3bb2e5842ebb28c8d Mon Sep 17 00:00:00 2001 From: Gimmy <975402925@qq.com> Date: Tue, 5 Nov 2024 11:40:58 +0800 Subject: [PATCH 3/3] docs(site): replace footer images --- .../sites/public/static/images/footer/cli.svg | 17 ++++++++++++++++ .../public/static/images/footer/code-open.png | Bin 0 -> 34542 bytes .../images/footer/footer-title-community.svg | 13 ++++++++++++ .../images/footer/footer-title-help.svg | 16 +++++++++++++++ .../images/footer/footer-title-human.svg | 15 ++++++++++++++ .../images/footer/footer-title-resource.svg | 16 +++++++++++++++ .../sites/public/static/images/footer/pro.svg | 15 ++++++++++++++ .../public/static/images/footer/theme.svg | 16 +++++++++++++++ .../sites/public/static/js/design-common.js | 19 +++++++++--------- 9 files changed, 117 insertions(+), 10 deletions(-) create mode 100644 examples/sites/public/static/images/footer/cli.svg create mode 100644 examples/sites/public/static/images/footer/code-open.png create mode 100644 examples/sites/public/static/images/footer/footer-title-community.svg create mode 100644 examples/sites/public/static/images/footer/footer-title-help.svg create mode 100644 examples/sites/public/static/images/footer/footer-title-human.svg create mode 100644 examples/sites/public/static/images/footer/footer-title-resource.svg create mode 100644 examples/sites/public/static/images/footer/pro.svg create mode 100644 examples/sites/public/static/images/footer/theme.svg diff --git a/examples/sites/public/static/images/footer/cli.svg b/examples/sites/public/static/images/footer/cli.svg new file mode 100644 index 0000000000..62082bfdf9 --- /dev/null +++ b/examples/sites/public/static/images/footer/cli.svg @@ -0,0 +1,17 @@ + + \ No newline at end of file diff --git a/examples/sites/public/static/images/footer/code-open.png b/examples/sites/public/static/images/footer/code-open.png new file mode 100644 index 0000000000000000000000000000000000000000..2ca3d1067cb53b8a9f75741eea31f792598652d8 GIT binary patch literal 34542 zcmV)XK&`)tP)0!J=<7+_Uy^M7i(3O5Zd!wUwpArz|O(_8~A&b
zj*gDQq;k2m8gh}fT=s(Y`EYVsKI7?qtQ{ehmRO#+kdZv*U=OqpTOvFAhNT#KK|p%l
zQ&7ULQ_@02xa?OFeZT{k9GA}qCHzR<-Dpq_h)RJFE_Zz-5X`z}e =(#A(w~(DnkvziGGCX`1+#iyhB*_kjb}?o_AC
z^o(NP(a|#1Y%C;iFV`fQ%|<9a7mgRnQc7C^h;4gmMW|-yJpD^94UM^8xF^;}4sU6l
z#njw1N&ssi_Vo@ofYWMh_KyI#W|=9B`bIF3;09F<`%VX*9;Ojd$G)tMOpZeVI5z$YwoUN%NEQx?J?_B
z`eokY6^j?oUp&7;D;5ACQjNd`KksB<5)Bj{>E#zG2H4T^9?`fQKECVtv32W?&z*ZX
zI1f>gQHKK^LP2Lr}Oi7y{5e|>|JNl$u;SmKUM1~oee<{7e*Mq
zt=3^$&yVu-be`Y#g+*W-=K0{a-_EA_%@2O)Iw;cL@3g2tnM^wCK`tBXlk>cwp7M{m
z^$P<`f%y{#l%iF}AX6}n9}|ceYRYXde`?zOY&A%f|6}8z#>K08R}_zYoXESlJmmQ;
zGBHYHKFxAr8S1j-i^8OOuA?tgCaeH5wehjr%ox(FK?!tVJXxHN?BA>ICw@v8^OST#
z>)Tu=(%4TJ>6>|6v@$@TpCYkvts+>Yem~^|BgZBJ@m_nRtG~D6jvHL0416D9teimI
z(rrXBGS{O~$Fp1%K-On9`QXpG1^0%6P#aGkx_943+6