Hero组件增加图标
This commit is contained in:
parent
2b453785da
commit
b7f2a4204f
@ -166,9 +166,7 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
|
|||||||
<div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
|
<div className="card-body flex-[1_1_auto] p-[40px] xl:!p-[2rem_2.5rem_1.25rem] lg:!p-[2rem_2.5rem_1.25rem] md:!p-[2rem_2.5rem_1.25rem] max-md:pb-4">
|
||||||
<div className="post-header !mb-[.9rem]">
|
<div className="post-header !mb-[.9rem]">
|
||||||
<div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
|
<div className="inline-flex !mb-[.4rem] uppercase !tracking-[0.02rem] text-[0.7rem] font-bold !text-[#aab0bc] relative align-top !pl-[1.4rem] before:content-[''] before:absolute before:inline-block before:translate-y-[-60%] before:w-3 before:h-[0.05rem] before:left-0 before:top-2/4 before:bg-[#3f78e0]">
|
||||||
<a href={`/${category_slug}`} className="hover" rel="category">
|
{post.additional_title}
|
||||||
{post.category || ""}
|
|
||||||
</a>
|
|
||||||
</div>
|
</div>
|
||||||
<h2 className="post-title !mt-1 !leading-[1.35] !mb-0">
|
<h2 className="post-title !mt-1 !leading-[1.35] !mb-0">
|
||||||
<Link
|
<Link
|
||||||
@ -183,37 +181,6 @@ export default function CategoryItems({ pagetype = "", category = "", category_s
|
|||||||
<p>{getSummary(post.subtitle)}</p>
|
<p>{getSummary(post.subtitle)}</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{/* 底部信息 */}
|
|
||||||
<div className="card-footer xl:!p-[1.25rem_2.5rem_1.25rem] lg:!p-[1.25rem_2.5rem_1.25rem] md:!p-[1.25rem_2.5rem_1.25rem] p-[18px_40px]">
|
|
||||||
<ul className="!text-[0.7rem] !text-[#aab0bc] m-0 p-0 list-none flex !mb-0">
|
|
||||||
<li className="post-date inline-block">
|
|
||||||
<i className="uil uil-calendar-alt pr-[0.2rem] align-[-.05rem] before:content-['\\e9ba']" />
|
|
||||||
<span>{formatDate(post.creation)}</span>
|
|
||||||
</li>
|
|
||||||
{post.author && (
|
|
||||||
<li className="post-author inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
|
|
||||||
<i className="uil uil-user pr-[0.2rem] align-[-.05rem] before:content-['\\ed6f']" />
|
|
||||||
<span>{post.author}</span>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
{typeof post.comments === 'number' && (
|
|
||||||
<li className="post-comments inline-block before:content-[''] before:inline-block before:w-[0.2rem] before:h-[0.2rem] before:opacity-50 before:m-[0_.6rem_0] before:rounded-[100%] before:align-[.15rem] before:bg-[#aab0bc]">
|
|
||||||
<a className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#">
|
|
||||||
<i className="uil uil-comment pr-[0.2rem] align-[-.05rem] before:content-['\\ea54']" />
|
|
||||||
{post.comments}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
{typeof post.likes === 'number' && (
|
|
||||||
<li className="post-likes !ml-auto inline-block">
|
|
||||||
<a className="!text-[#aab0bc] hover:!text-[#3f78e0] hover:!border-[#3f78e0]" href="#">
|
|
||||||
<i className="uil uil-heart-alt pr-[0.2rem] align-[-.05rem] before:content-['\\eb60']" />
|
|
||||||
{post.likes}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
)}
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</article>
|
</article>
|
||||||
))
|
))
|
||||||
|
|||||||
@ -61,72 +61,85 @@ export default function Hero() {
|
|||||||
<div className="flex flex-wrap mx-[-15px] !relative">
|
<div className="flex flex-wrap mx-[-15px] !relative">
|
||||||
<div className="lg:w-8/12 xl:w-8/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
<div className="lg:w-8/12 xl:w-8/12 xxl:w-8/12 w-full flex-[0_0_auto] !px-[15px] max-w-full !mx-auto !relative">
|
||||||
<div
|
<div
|
||||||
className="absolute shape grape w-5 hidden xl:block lg:block"
|
className="absolute shape grape w-12 hidden xl:block lg:block"
|
||||||
style={{ top: "-5%", left: "-15%" }}
|
style={{ top: "-7%", left: "-13%" }}
|
||||||
>
|
>
|
||||||
<svg
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<g fill="none" stroke="#6366f1" strokeWidth="2.5">
|
||||||
viewBox="0 0 219.5 219.5"
|
<rect x="16" y="16" width="32" height="32" rx="8"/>
|
||||||
className="svg-inject icon-svg !w-full !h-full"
|
<rect x="26" y="26" width="12" height="12" rx="3"/>
|
||||||
>
|
<path d="M32 6v8M32 50v8M6 32h8M50 32h8M12 12l4 4M48 48l4 4M12 52l4-4M48 16l4-4"/>
|
||||||
<path
|
|
||||||
className="svg-fill"
|
|
||||||
d="M219.5 219.5H0c0-58.19 23.14-114.06 64.29-155.21A219.561 219.561 0 01219.5 0v219.5z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="absolute shape violet !w-[2.5rem] hidden xl:block lg:block"
|
|
||||||
style={{ bottom: "30%", left: "-20%" }}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 457.71 446.45"
|
|
||||||
className="svg-inject icon-svg !w-full !h-full"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
className="svg-fill"
|
|
||||||
d="M205.62 442.54c-.51-.41-.99-.84-1.46-1.31-10.4-10.39-3.61-27.12 11.63-52.5 11.72-19.51 28.48-43.74 46.22-69.39 17.53-25.34 35.66-51.54 49.01-73.47 14.73-24.19 18.57-35.01 19.51-39.48-3.86-.28-13.15.3-33.78 6.52-19.71 5.94-43.09 14.92-65.7 23.6-63.8 24.49-85.35 31.41-96.51 19.5-3.21-3.43-7.62-11.04-1.12-23.54 2.49-4.79 6.64-10.51 12.68-17.5 10.4-12.03 25.04-26.34 40.55-41.49 14.02-13.7 28.53-27.87 39.53-40.11 9.93-11.04 14.15-17.43 15.94-20.82-3.43-.75-10.24-1.51-23.25-.92-14.99.68-33.44 2.89-51.28 5.02-46.92 5.61-74.09 8.33-86.81-.99-4.78-3.5-7.67-8.42-8.41-14.24-1.97-15.58 12.45-33.15 29.14-53.5 5.31-6.47 13.31-16.22 17.36-22.68-4.51-.38-12.43-.4-25.97 1.1-16.54 1.82-35.62 5.22-50.95 7.96-12.62 2.25-22.6 4.03-28.48 4.49C6.6 39.3.58 34.17.04 27.28c-.54-6.88 4.6-12.9 11.48-13.44 4.66-.37 14.58-2.13 26.06-4.18C54.56 6.63 75.7 2.86 94 1.07c26.41-2.6 40.16-.54 47.48 7.13 7.01 7.34 6.45 17.66-1.68 30.66-4.72 7.55-11.63 15.98-18.95 24.9-6.18 7.53-12.57 15.31-17.24 22.19-3.35 4.92-4.95 8.13-5.71 10.07 3 .54 9.09 1.08 20.87.43 13.21-.73 29.07-2.63 45.86-4.64 59.99-7.17 94.33-10.22 102.49 10.62 7.4 18.93-16.51 43.51-62.99 88.92-12.69 12.4-24.68 24.11-34.04 34.28-3.17 3.45-5.68 6.34-7.67 8.75 15.88-4.42 41.18-14.13 59.67-21.22 62.4-23.96 101.69-37.87 121.09-29.14 5.38 2.42 9.26 6.47 11.23 11.72 7.48 19.95-16.15 57.31-71.83 137.82-15.49 22.39-30.12 43.55-41.18 61.25-7.13 11.4-11.3 19.11-13.75 24.25 8.97-3.3 25.58-11 55.73-28.8 32.68-19.29 70.61-44.04 101.09-63.94 24.62-16.07 44.07-28.76 54.65-34.68 6.03-3.37 13.64-1.22 17.01 4.81 3.37 6.03 1.22 13.64-4.81 17.01-9.83 5.5-29.92 18.61-53.18 33.79-33.46 21.84-75.1 49.01-110.05 69.21-49.35 28.51-70.85 35.44-82.46 26.07z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div
|
|
||||||
className="absolute shape fuchsia w-6 hidden xl:block lg:block"
|
|
||||||
style={{
|
|
||||||
top: "0%",
|
|
||||||
right: "-25%",
|
|
||||||
transform: "rotate(70deg)",
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
viewBox="0 0 411.42 329.24"
|
|
||||||
className="svg-inject icon-svg !w-full !h-full"
|
|
||||||
>
|
|
||||||
<g data-name="Layer 2">
|
|
||||||
<path
|
|
||||||
className="svg-fill"
|
|
||||||
d="M164.34 21.92L8.72 251.15c-22.54 33.2 1.24 78.09 41.37 78.09h311.24c40.13 0 63.91-44.89 41.37-78.09L247.08 21.92a50 50 0 00-82.74 0z"
|
|
||||||
data-name="Layer 1"
|
|
||||||
/>
|
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
className="absolute shape yellow w-6 hidden xl:block lg:block"
|
className="absolute shape violet !w-[4rem] hidden xl:block lg:block"
|
||||||
style={{ bottom: "25%", right: "-17%" }}
|
style={{ bottom: "28%", left: "-18%" }}
|
||||||
>
|
>
|
||||||
<svg
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<g fill="none" stroke="#38bdf8" strokeWidth="2.5">
|
||||||
viewBox="0 0 500 500"
|
<ellipse cx="32" cy="28" rx="16" ry="18"/>
|
||||||
className="svg-inject icon-svg !w-full !h-full"
|
<path d="M32 46v8M28 54h8"/>
|
||||||
>
|
<path d="M24 46h16"/>
|
||||||
<g data-name="Layer 2">
|
<circle cx="32" cy="36" r="3"/>
|
||||||
<path
|
</g>
|
||||||
className="svg-fill"
|
</svg>
|
||||||
d="M250 0C111.93 0 0 111.93 0 250s111.93 250 250 250 250-111.93 250-250S388.07 0 250 0zm0 425a175 175 0 11175-175 175 175 0 01-175 175z"
|
</div>
|
||||||
data-name="Layer 1"
|
<div
|
||||||
/>
|
className="absolute shape fuchsia w-14 hidden xl:block lg:block"
|
||||||
|
style={{
|
||||||
|
top: "-2%",
|
||||||
|
right: "-22%",
|
||||||
|
transform: "rotate(70deg)",
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
||||||
|
<g fill="none" stroke="#a78bfa" strokeWidth="2.5">
|
||||||
|
<circle cx="32" cy="32" r="18"/>
|
||||||
|
<ellipse cx="32" cy="32" rx="26" ry="7"/>
|
||||||
|
<circle cx="44" cy="24" r="3" fill="#a78bfa"/>
|
||||||
|
<circle cx="24" cy="40" r="1.5" fill="#a78bfa"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="absolute shape yellow w-14 hidden xl:block lg:block"
|
||||||
|
style={{ bottom: "23%", right: "-15%" }}
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
||||||
|
<g fill="none" stroke="#f472b6" strokeWidth="2.5">
|
||||||
|
<path d="M32 10c8 8 8 22 0 30-8-8-8-22 0-30z"/>
|
||||||
|
<path d="M32 40v12"/>
|
||||||
|
<circle cx="32" cy="32" r="3" fill="#f472b6"/>
|
||||||
|
<path d="M40 8l2 4 4 2-4 2-2 4-2-4-4-2 4-2z"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="absolute shape top-helper w-10 hidden xl:block lg:block opacity-50"
|
||||||
|
style={{ top: "-50%", left: "30%" }}
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
||||||
|
<g fill="none" stroke="#7f9cf5" strokeWidth="2">
|
||||||
|
<circle cx="32" cy="32" r="10"/>
|
||||||
|
<circle cx="32" cy="12" r="2"/>
|
||||||
|
<circle cx="32" cy="52" r="2"/>
|
||||||
|
<circle cx="12" cy="32" r="2"/>
|
||||||
|
<circle cx="52" cy="32" r="2"/>
|
||||||
|
<path d="M32 22V14M32 50v-8M22 32h-8M50 32h-8"/>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
className="absolute shape bottom-helper w-10 hidden xl:block lg:block opacity-50"
|
||||||
|
style={{ bottom: "-50%", left: "70%" }}
|
||||||
|
>
|
||||||
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" className="svg-inject icon-svg !w-full !h-full">
|
||||||
|
<g fill="none" stroke="#38bdf8" strokeWidth="2">
|
||||||
|
<rect x="28" y="36" width="8" height="16" rx="2"/>
|
||||||
|
<rect x="20" y="28" width="24" height="8" rx="2"/>
|
||||||
|
<circle cx="32" cy="32" r="4"/>
|
||||||
|
<path d="M32 28v-8M32 44v8"/>
|
||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user