Skip to content

Commit

Permalink
Merge pull request #8 from stayreal-w/develop-astro-ons
Browse files Browse the repository at this point in the history
Develop astro ons
  • Loading branch information
huyikun authored Jul 25, 2024
2 parents e8a2e1b + d96e7ab commit d1bbcfd
Show file tree
Hide file tree
Showing 13 changed files with 176 additions and 136 deletions.
34 changes: 32 additions & 2 deletions src/components/common/Footer.astro
Original file line number Diff line number Diff line change
Expand Up @@ -77,9 +77,39 @@ import { SITE } from "@utils/config";
</div>
<!-- TODO: 底部水印 -->
<div
class="bottom_watermark text-[.875rem] text-info leading-6 text-center tracking-normal lg:pb-1 lg:pt-8"
class="bottom_watermark flex text-[.875rem] text-why justify-center items-center tracking-normal lg:pb-1 lg:pt-8"
>
Copyright © 2023 RocketMQ
<a
rel="noreferrer"
href="http://idinfo.zjamr.zj.gov.cn/bscx.do?method=lzxx&id=3301843301000000126540"
target="_blank"
class="flex items-center"
>
<img
src="https://img.alicdn.com/imgextra/i1/O1CN01NhyZOt1ZEF2xEFUQu_!!6000000003162-1-tps-65-70.gif"
class="w-[25px] h-[25px]"
/>
</a>
<div class="mr-1 ml-2 flex items-center">
<img
src="https://img.alicdn.com/imgextra/i2/O1CN01mW5nke1nsSReBsHQw_!!6000000005145-2-tps-20-20.png"
class="w-[20px] h-[20px]"
/>
</div>
<div class="mr-2">
<a
rel="noreferrer"
href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=33011002017055"
target="_blank"
>
浙公网安备 33011002017055号
</a>
</div>
<div>
<a rel="noreferrer" target="_blank" href="https://beian.miit.gov.cn/">
浙ICP备12022327号-1120
</a>
</div>
</div>
</footer-layout>

Expand Down
109 changes: 57 additions & 52 deletions src/components/common/Header/index.astro
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@ let height,
---

<span class="header-wrapper">
<Alert />
<!-- <Alert /> -->
<my-layout
style={`position: ${position}; height: ${height}`}
class="w-full backdrop-blur-md top-0 z-[10] bg-base-header flex justify-center"
Expand All @@ -62,15 +62,15 @@ let height,
<!-- <LanguageToggle id="pc-toggle" lang={lang.toLowerCase()} theme="error"/> -->
<!-- <SearchComp /> -->
<LinkButton
href={SITE.githubUrl}
text="GITHUB"
theme="gray-02"
textTheme="title"
classes={{
container: "rounded-3xl bg-footer xl:h-[2.5rem] xl:min-h-[2.5rem]",
title: "text-header font-normal"
}}
/>
href={SITE.githubUrl}
text="GITHUB"
theme="gray-02"
textTheme="title"
classes={{
container: "rounded-3xl bg-footer xl:h-[2.5rem] xl:min-h-[2.5rem]",
title: "text-header font-normal",
}}
/>
</div>
</div>
</my-layout>
Expand Down Expand Up @@ -184,46 +184,51 @@ let height,
</style>

<script>
// function addCopilot() {
// const copilotJSScript = document.createElement("script");
// copilotJSScript.type = "text/javascript";
// copilotJSScript.src =
// "https://g.alicdn.com/cm-design/copilot-booter/0.0.26/copilot-booter.js";
// copilotJSScript.addEventListener("load", function () {
// if (window.CNPilot) {
// window.CNPilot.mounted({
// CNPilot_OPEN_SOURCE: ["sca.aliyun.com"],
// CNPilot_OPEN_SOURCE_API: "https://ai.nacos.io",
// CNPilot_OPEN_SOURCE_PRODUCT_NAME: "sca",
// showFloatICON: true,
// globalStyle: {
// top: "0",
// height: "100vh",
// },
// entryIconProps: {
// "position-type": "updown",
// "icon-hover-text": "专家答疑",
// "icon-style": {
// color: "red",
// background: "white",
// border: "2px solid red",
// borderRadius: "20px",
// },
// },
// headerProps: {
// closeIcon: { show: true },
// titleText: "AI答疑专家",
// },
// });
// }
// });
// document.body.append(copilotJSScript);
// }

// addCopilot();

// document.addEventListener("astro:page-load", function () {
// if (window.CNPilot) window.CNPilot.unmounted();
// addCopilot();
// });
function addCopilot() {
const copilotJSScript = document.createElement("script");
copilotJSScript.type = "text/javascript";
copilotJSScript.src =
"//g.alicdn.com/cm-design/copilot-booter/0.0.26/copilot-booter.js";
copilotJSScript.addEventListener("load", function () {
if (window.CNPilot) {
window.CNPilot.mounted({
CNPilot_OPEN_SOURCE: [
"rocketmq-learning-ui.oss-cn-hangzhou.aliyuncs.com",
], // 需要展示的开源网站
CNPilot_OPEN_SOURCE_API: "https://ai.nacos.io", // 需要使用的后端地址
CNPilot_OPEN_SOURCE_PRODUCT_NAME:
"rocketmq-learning-ui.oss-cn-hangzhou.aliyuncs.com",
showFloatICON: true, // 展示 icon 浮窗
globalStyle: {
// 弹窗外层样式(react style 写法)
top: "0px", // 默认置于浏览器顶部
height: "100vh", // 高度设置为浏览器可视最大高度
},
entryIconProps: {
// 入口 ICON 配置
"position-type": "updown",
"icon-hover-text": "专家答疑",
"icon-style": {
color: "red", // 配置文字颜色
background: "white", // 配置背景色
border: "2px solid red", // 配置边框
borderRadius: "20px", // 配置圆角
},
},
headerProps: {
titleText: "无疑 AI答疑专家", // 自定义 header 文字
closeIcon: { show: true }, // 展示 header 部分右边关闭按钮
},
});
}
});
document.body.append(copilotJSScript);
}

addCopilot();

document.addEventListener("astro:page-load", function () {
if (window.CNPilot) window.CNPilot.unmounted();
addCopilot();
});
</script>
2 changes: 1 addition & 1 deletion src/components/home/Carousel.astro
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const { duration = 5000, useduration = "disabled" } = Astro.props as Props;
</div>
<div class="carousel-item bg-[#1B1B1B]">
<div
class="intro-pic bg-[url('https://img.alicdn.com/imgextra/i4/O1CN01WwanIZ28DnUnPBcrp_!!6000000007899-0-tps-2880-792.jpg')]"
class="intro-pic bg-[url('https://img.alicdn.com/imgextra/i1/O1CN01LgWjcp1LDPzuluiYp_!!6000000001265-0-tps-2880-792.jpg')]"
>
<slot name="next" />
</div>
Expand Down
4 changes: 2 additions & 2 deletions src/components/home/PracticeList.astro
Original file line number Diff line number Diff line change
Expand Up @@ -89,7 +89,7 @@ let currentScreen = 0;
height: 16.375rem;
border-radius: 16px;
opacity: 1;
padding: 0 24px 32px 24px;
padding: 0 1.5rem 1.5rem 1.5rem;

.hotTutorial-header {
height: 5rem;
Expand All @@ -109,7 +109,7 @@ let currentScreen = 0;
margin-right: 1.5rem;

.item-content-top {
height: 70%;
height: 72%;
img {
border-radius: 8px;
width: 100%;
Expand Down
56 changes: 24 additions & 32 deletions src/components/home/TutorialList.astro
Original file line number Diff line number Diff line change
Expand Up @@ -9,31 +9,27 @@ const itemsPerPage = 3; // 每屏显示的元素个数
let currentScreen = 0;
---

<SliderCards
className={"hotTutorial-box"}
prevId={"prevtutorial"}
nextId={"nexttutorial"}
title={t("learning.base.data")}
>
<div class="hotTutorial-box bg-card">
<h2 class="follow-header text-title">基础学习资料</h2>
<div class="hotTutorial-content" id="hotTutorial-content">
{
BASE_LEARNDATA.slice(
currentScreen * itemsPerPage,
(currentScreen + 1) * itemsPerPage
).map((item) => (
<div class="item-content">
<div class="item-content-left">
<img src="/img/home/tutorial.svg" />
<a class="item-content" href={item.href}>
<div class="item-content-top">
<img src={item.img} />
</div>
<div class="item-content-right">
<div class="right-title text-model">{item.title}</div>
<div class="item-content-bottom">
<div class="content-bottom-title text-title">{item.title}</div>
{/* <a class="arrow" /> */}
</div>
</div>
</a>
))
}
</div>
</SliderCards>
</div>

<script>
import { BASE_LEARNDATA } from "@/constant";
Expand All @@ -51,15 +47,14 @@ let currentScreen = 0;
);
content.innerHTML = "";
newData.forEach((item, idx) => {
const html = `<div class="item-content">
<div class="item-content-left">
const html = `<a class="item-content">
<div class="item-content-top">
<img src='/img/home/tutorial.svg'/>
</div>
<div class="item-content-right">
<div class="right-title text-model">${item.title}</div>
<a class="arrow"></a>
<div class="item-content-bottom">
<div class="content-bottom-title text-title">${item.title}</div>
</div>
</div>`;
</a>`;
content.innerHTML += html;
});
}
Expand Down Expand Up @@ -93,7 +88,7 @@ let currentScreen = 0;
border-radius: 16px;
opacity: 1;
margin-right: 24px;
padding: 0 24px 32px 24px;
padding: 0 1.5rem 1.5rem 1.5rem;

.hotTutorial-header {
height: 5rem;
Expand All @@ -110,27 +105,24 @@ let currentScreen = 0;
margin-right: -1.5rem; /* 补偿右外边距的合并 */

.item-content {
display: flex;
flex: 0 0 calc(33.33% - 1.5rem); /* 每个元素占25%的宽度并减去1rem的右外边距 */
margin-right: 1.5rem;

.item-content-left {
width: 45%;
height: 9.375rem;
.item-content-top {
height: 72%;
img {
border-radius: 8px;
width: 100%;
height: 100%;
}
}

.item-content-right {
width: 55%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 8px 0 8px 12px;
.right-title {
line-height: 1.5rem;
.item-content-bottom {
text-align: center;
padding-top: 12px;
.content-bottom-title {
font-size: 0.75rem;
line-height: 1.125rem;
}
}
.arrow {
Expand Down
2 changes: 1 addition & 1 deletion src/components/learning/HotTag.astro
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ const { activeTag } = Astro.props;
</div>
<div>
{
ALL_ARTICLE_TAG.map((item) => (
ALL_ARTICLE_TAG.filter((it) => it.type !== "baseLearn").map((item) => (
<span class="inline-block mb-2">
<BlogButton
href={item.href}
Expand Down
2 changes: 1 addition & 1 deletion src/components/learning/LearningData.astro
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ const ifzh = isChinese(Astro);
<div>
<div class="learning-data-header">
<h2 class="title text-model">
{t("learning.base.data")}
基础学习资料
</h2>
</div>
<div class="learning-data-box bg-card">
Expand Down
Loading

0 comments on commit d1bbcfd

Please sign in to comment.