From f71bf0f027802e2b5d08bd4a578b64ed2e51b640 Mon Sep 17 00:00:00 2001 From: "1152958806@qq.com" <17683872107czx> Date: Wed, 5 Jul 2023 16:40:26 +0800 Subject: [PATCH] =?UTF-8?q?=E5=88=86=E7=B1=BB=E6=B7=BB=E5=8A=A0=E6=A0=B7?= =?UTF-8?q?=E5=BC=8F=E9=80=89=E6=8B=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- settings.yaml | 12 +++ templates/assets/libs/no3d/no3d.css | 148 ++++++++++++++++++++++++++ templates/assets/libs/no3d/no3d.js | 79 ++++++++++++++ templates/assets/libs/no3d/vue.min.js | 6 ++ templates/categories.html | 32 ++++-- 5 files changed, 269 insertions(+), 8 deletions(-) create mode 100644 templates/assets/libs/no3d/no3d.css create mode 100644 templates/assets/libs/no3d/no3d.js create mode 100644 templates/assets/libs/no3d/vue.min.js diff --git a/settings.yaml b/settings.yaml index 633af1c3..132cacd1 100644 --- a/settings.yaml +++ b/settings.yaml @@ -750,6 +750,18 @@ spec: label: 版权声明 placeholder: '本文是原创文章,采用 CC BY-NC-ND 4.0 协议,完整转载请注明来自 程序员小航' help: "版权声明内容,支持填入 HTML 标签" + - group: categories + label: 分类 + formSchema: + - $formkit: select + name: use + label: 样式选择 + value: default + options: + - label: 默认 + value: default + - label: 3D + value: 3D - group: aiDescription label: 文章ai摘要 formSchema: diff --git a/templates/assets/libs/no3d/no3d.css b/templates/assets/libs/no3d/no3d.css new file mode 100644 index 00000000..610893c8 --- /dev/null +++ b/templates/assets/libs/no3d/no3d.css @@ -0,0 +1,148 @@ +#libCategories { + margin: 40px 0; + font-size: 14px; + font-weight: 500; + -webkit-font-smoothing: antialiased; +} + +#libCategories * { + box-sizing: inherit!important; +} + +#libCategories .title { + font-size: 24px; + font-weight: 700; + color: #fff; + text-align: center; +} + +#libCategories p { + line-height: 1.5em; +} + +#libCategories h1 + p, #libCategories p + p { + margin-top: 10px; +} + +#libCategories .container { + padding: 20px 20px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +#libCategories .card-wrap { + margin: 10px; + transform: perspective(1200px); + transform-style: preserve-3d; + cursor: pointer; +} + +#libCategories .card-wrap:hover .card-info { + transform: translateY(0); +} + +#libCategories .card-wrap:hover .card-info p { + opacity: 1; +} + +#libCategories .card-wrap:hover .card-info, #libCategories .card-wrap:hover .card-info p { + transition: 0.6s cubic-bezier(0.23, 1, 0.32, 1); +} + +#libCategories .card-wrap:hover .card-info:after { + transition: 3s cubic-bezier(0.23, 1, 0.32, 1); + opacity: 1; + transform: translateY(0); +} + +#libCategories .card-wrap:hover .card-bg { + transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1), opacity 4s cubic-bezier(0.23, 1, 0.32, 1); + opacity: 0.8; +} + +#libCategories .card-wrap:hover .card { + transition: 0.5s cubic-bezier(0.23, 1, 0.32, 1); + box-shadow: none; +} + +#libCategories a{ + border:none!important; + background:none!important; +} + +#libCategories .card { + position: relative; + flex: 0 0 240px; + width: 320px; + height: 320px; + background-color: #000; + overflow: hidden; + box-shadow: rgba(0, 0, 0, 0.66) 0 30px 60px 0, inset #333 0 0 0 5px, inset rgba(255, 255, 255, 0.4) 0 0 0 6px; + transition: 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95); + border-radius: 12px; +} + +#libCategories .card-bg { + opacity: 0.5; + position: absolute; + top: -30px; + left: -30px; + width: 120%; + height: 120%; + padding: 20px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + transition: 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95), opacity 4s 0.8s cubic-bezier(0.445, 0.05, 0.55, 0.95); + pointer-events: none; +} + +#libCategories .card-info { + padding: 20px; + position: absolute; + bottom: 0; + color: #fff; + transform: translateY(40%); + transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); +} + +#libCategories .card-info p { + opacity: 0; + text-shadow: black 0 0.2px 0.5px; + transition: 0.6s 1.6s cubic-bezier(0.215, 0.61, 0.355, 1); +} + +#libCategories .card-info * { + position: relative; + z-index: 1; + box-sizing: inherit; +} + +#libCategories .card-info:after { + content: ''; + position: absolute; + top: 0; + left: 0; + z-index: 0; + width: 100%; + height: 100%; + background-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.6) 100%); + background-blend-mode: overlay; + opacity: 0; + transform: translateY(100%); + transition: 5s 1s cubic-bezier(0.445, 0.05, 0.55, 0.95); +} + +#libCategories .card-info h1 { + font-size: 36px; + font-weight: 700; + text-shadow: rgba(0, 0, 0, 0.1) 0 10px 10px; + padding-left: 0; + line-height: 1.2; + color: var(--heo-white); +} + +#libCategories .card-info h1:before { + display: none; +} \ No newline at end of file diff --git a/templates/assets/libs/no3d/no3d.js b/templates/assets/libs/no3d/no3d.js new file mode 100644 index 00000000..327bf4b0 --- /dev/null +++ b/templates/assets/libs/no3d/no3d.js @@ -0,0 +1,79 @@ +Vue.config.devtools = true; + +Vue.component("card", { + template: ` +