update

src/layouts/Layout_4.astro

@@ -45,12 +45,28 @@ import '../styles/template_4/meanmenu.css'
 							<nav id="mobile-menu">
 								<ul>
 									<li><a href="/">首页</a></li>
+									<li class="nav-item dropdown">
+										<a class="nav-link dropdown-toggle" href="javascript:void(0);">
+											产品动态
+										</a>
+										<div class="dropdown-menu">
+											<a style="color: #000;" class="dropdown-item" href="javascript:void(0);">图书</a>
+											<!-- 课程下的子菜单 -->
+											<div class="dropdown-submenu">
+												<a style="color: #000;" class="dropdown-item" href="/sheke"> - 社科心理</a>
+												<a style="color: #000;" class="dropdown-item" href="/shangye"> - 商业经济</a>
+												<a style="color: #000;" class="dropdown-item" href="/chengzhang"> - 自我成长</a>
+											</div>
+											<a style="color: #000;" class="dropdown-item" href="/news">新闻</a>
+										</div>
+									</li>
 									<li><a href="/about-us">关于我们</a></li>
 									<li><a href="/news">新闻专栏</a></li>
 									<li><a href="/contact-us">联系我们</a></li>
 								</ul>
 							</nav>
 						</div>
+						
 					</div>
 					<div class="col-2 col-md-1">
 						<div class="side-menu-icon d-lg-none text-end">
@@ -191,4 +207,68 @@ import '../styles/template_4/meanmenu.css'
 		text-decoration: none;
 		padding-left: 1rem;
 	}
+
+	/* 基本导航样式 */
+.main-menu ul {
+    list-style-type: none;
+    margin: 0;
+    padding: 0;
+}
+
+.main-menu ul li {
+    position: relative;
+    display: block;
+}
+
+/* 主要导航链接 */
+.main-menu a {
+    display: block;
+    padding: 10px 15px;
+    color: #000;
+    text-decoration: none;
+    /* background-color: #f4f4f4;
+    border: 1px solid #ddd; */
+    margin: 2px 0;
+}
+
+/* .main-menu a:hover {
+    background-color: #ccc;
+} */
+
+/* 下拉菜单容器 */
+.dropdown-menu {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    padding: 0;
+    list-style-type: none;
+    /* background-color: #f4f4f4;
+    border: 1px solid #ddd; */
+    z-index: 100;
+    width: 200px;
+}
+
+/* 子菜单 */
+.dropdown-submenu {
+    position: relative;
+}
+
+/* 子菜单内的链接 */
+.dropdown-submenu .dropdown-item {
+    padding-left: 20px; /* 缩进子菜单项 */
+}
+
+/* 显示下拉菜单 */
+.nav-item:hover .dropdown-menu {
+    display: block;
+}
+
+/* 显示子菜单 */
+.dropdown-submenu:hover .dropdown-menu {
+    display: block;
+    top: 0;
+    left: 100%;
+}
+
 </style>

src/layouts/Layout_5.astro

@@ -43,18 +43,21 @@ import '../styles/template_5/responsive.css'
 							<li class="nav-item active">
 								<a class="nav-link" href="/">首页</a>
 							</li>
-							<li class="nav-item">
-								<a class="nav-link" href="/news">产品动态</a>
+							<li class="nav-item dropdown">
+								<a class="nav-link dropdown-toggle" href="/news" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+									产品动态
+								</a>
+								<div class="dropdown-menu" aria-labelledby="navbarDropdown">
+									<a class="dropdown-item" href="javascript: void(0);">图书</a>
+									<!-- 课程下的子菜单 -->
+									<div class="dropdown-submenu">
+										<a class="dropdown-item" href="/chengzhang"> - 个人成长</a>
+										<a class="dropdown-item" href="/renwen"> - 社会人文</a>
+										<a class="dropdown-item" href="/xiaoneng"> - 职场效能</a>
+									</div>
+									<a class="dropdown-item" href="/news">新闻</a>
+								</div>
 							</li>
-							<!-- <li class="nav-item">
-								<a class="nav-link" href="/chengzhang">个人成长</a>
-							</li>
-							<li class="nav-item">
-								<a class="nav-link" href="/renwen">社会人文</a>
-							</li>
-							<li class="nav-item">
-								<a class="nav-link" href="/xiaoneng">职场效能</a>
-							</li> -->
 							<li class="nav-item">
 								<a class="nav-link" href="/about-us">关于我们</a>
 							</li>
@@ -148,7 +151,14 @@ import '../styles/template_5/responsive.css'
         </div>
     </div>
 </section>
-
+<style>
+	.dropdown-menu a{
+		color:black !important;
+	}
+	.dropdown-submenu {
+		margin-left: 1rem;
+	}
+</style>
 	<!-- Latest compiled JavaScript -->
 <script is:inline src="/template_5/js/jquery-3.6.0.min.js"> </script>
 <script is:inline src="/template_5/js/bootstrap.min.js"> </script>

src/pages/template/4/chengzhang.astro

@@ -0,0 +1,60 @@
+---
+import { Image } from "astro:assets"
+import Layout from "../../../layouts/Layout_4.astro"
+const images = [
+    {
+        url: '/template_4/images/books/t6_cpplatform_spwpo6imacxbvsnznjp9xt1731321194.jpg',
+        title: '职手可得'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_p5ykyseitabwfk9yvdf4191731321167.jpg',
+        title: '一度人脉'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_2vuxcmjbswugavwrxdultb1686636681.jpg',
+        title: '你为什么不骚扰我'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_vxh4e1ebg7gp3my4l14xc41731321231.jpg',
+        title: '你就是效率超人'
+    },{
+        url: '/template_4/images/books/t6_35279801.jpg',
+        title: '做出好选择'
+    },{
+        url: '/template_4/images/books/t6_YueWen_34222392.jpg',
+        title: '像火箭科学家一样思考'
+    },{
+        url: '/template_4/images/books/t6_YueWen_25397535.jpg',
+        title: '像经营企业一样经营自己：人人都能学的职场规划术'
+    },{
+        url: '/template_4/images/books/t6_685196.jpg',
+        title: '凭什么有好工作'
+    },{
+        url: '/template_4/images/books/t6_yuewen_1799291731377700.jpg',
+        title: '别被自己干掉：职场人不可不知的9种自救法'
+    },{
+        url: '/template_4/images/books/t6_YueWen_31486560.jpg',
+        title: '即兴表达'
+    },{
+        url: '/template_4/images/books/t6_41409544.jpg',
+        title: '反内卷'
+    },{
+        url: '/template_4/images/books/t6_yuewen_6852671701672300.jpg',
+        title: '后窗'
+    }
+];
+---
+
+<Layout>
+    <div style="margin:auto;padding-top:10rem" class="row container">
+        {
+            images.map(e => (
+                <div style="margin-bottom:1rem" class="col-lg-3 col-md-4 col-sm-12 col-12">
+                    <div>
+                        <Image loading={`lazy`} style="height: 100%;width:100%" src={e.url} alt={`pic`} height={100} width={100} />
+                    </div>
+                    <div>{e.title}</div>
+                </div>
+            ))
+        }
+    </div>
+</Layout>
+
+

src/pages/template/4/shangye.astro

@@ -0,0 +1,60 @@
+---
+import { Image } from "astro:assets"
+import Layout from "../../../layouts/Layout_4.astro"
+const images = [
+    {
+        url: '/template_4/images/books/t6_cpPlatform_k8A6Y4zYq1NcyDfQ7oDZ8o.jpg',
+        title: '一本书读懂内部审计'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_krvag2t78wqistfrhsdtst1684310868.jpg',
+        title: '中国式家族办公室'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_2vuxcmjbswugavwrxdultb1686636681.jpg',
+        title: '中国经济2023：基本盘与动力'
+    },{
+        url: '/template_4/images/books/t6_855019.jpg',
+        title: '主角与配角'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_co2ih4h5h7pjl9wqcx25vm1687336602.jpg',
+        title: '低碳真相与中国路径'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_5hxxdepbki4hybkgnpaexr1701421244.jpg',
+        title: '定制家居：中国原创'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_3zmzv28mpi68tcvopj9r6k1692181124.jpg',
+        title: '成长型企业销售部实战全指导'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_qe2a7xvv57v1exrzxeebgm1697016090.jpg',
+        title: '数字化业务设计：如何设计企业架构以获得可持续的成功'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_ubfdjhceu4ts4p6jattn5x1681117538.jpg',
+        title: '数字时代的领导力：技术影响下的革新'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_qrnoptykd8kqphe7cooxy11692181160.jpg',
+        title: '激荡人生：一起走过三十年'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_pujxvjdeiwx8cxe9nbukif1681117549.jpg',
+        title: '王兴管理日志'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_pklfrg1xh9lpe7trvg4yhw1688030719.jpg',
+        title: '百术不如一诚'
+    }
+];
+---
+
+<Layout>
+    <div style="margin:auto;padding-top:10rem" class="row container">
+        {
+            images.map(e => (
+                <div style="margin-bottom:1rem" class="col-lg-3 col-md-4 col-sm-12 col-12">
+                    <div>
+                        <Image loading={`lazy`} style="height: 100%;width:100%" src={e.url} alt={`pic`} height={100} width={100} />
+                    </div>
+                    <div>{e.title}</div>
+                </div>
+            ))
+        }
+    </div>
+</Layout>
+
+

src/pages/template/4/sheke.astro

@@ -0,0 +1,66 @@
+---
+import { Image } from "astro:assets"
+import Layout from "../../../layouts/Layout_4.astro"
+const images = [
+    {
+        url: '/template_4/images/books/t6_cpPlatform_k8A6Y4zYq1NcyDfQ7oDZ8o.jpg',
+        title: '不稳定的自尊'
+    },{
+        url: '/template_4/images/books/t6_cpPlatform_dCeGMDYudHNpAixCjYpTPw.jpg',
+        title: '中年之路：人格的第二次成型'
+    },{
+        url: '/template_4/images/books/t6_cpPlatform_ry36eofZN4Ly8qiopMjVp4.jpg',
+        title: '为什么大象不听话：人类行为背后的25个心理学原理'
+    },{
+        url: '/template_4/images/books/t6_3300023277.jpg',
+        title: '为什么总是感觉被掏空：如何应对“心理内耗”'
+    },{
+        url: '/template_4/images/books/t6_cpPlatform_eBLQBT9KUAULHGyyhiiqCE.jpg',
+        title: '为什么总是被情绪支配：易怒、焦虑、孤独的边缘型人格'
+    },{
+        url: '/template_4/images/books/t6_3300010693.jpg',
+        title: '为什么爱会伤人：亲密关系中的自恋型人格障碍'
+    },{
+        url: '/template_4/images/books/t6_3300015062.jpg',
+        title: '人为什么会吵架：冲突背后的创伤触发'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_k2dadrv2lwcjmqkt6rh1ho1701421396.jpg',
+        title: '人心有对立的本能和欲望：精神分析与弗洛伊德的释梦人生'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_re3zznq8vqazxlckzeb5ph1673840272.jpg',
+        title: '伟大的天赋，巨大的缺点：女性、神经症、自我分析与卡伦·霍妮的生活'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_ksfhsts4gamkw6vuvckhxm1692181157.jpg',
+        title: '克服焦虑：人生松弛指南'
+    },{
+        url: '/template_4/images/books/t6_3300015061.jpg',
+        title: '创伤遗传：心理咨询师和她的11位来访者'
+    },{
+        url: '/template_4/images/books/t6_cpplatform_mcwmmznpiu8cvzf91fk7ty1681204932.jpg',
+        title: '如何度过这一生'
+    },{
+        url: '/template_4/images/books/t6_3300023279.jpg',
+        title: '如何很高级的高级地说“不”：设定人际关系中的心理边界'
+    },{
+        url: '/template_4/images/books/t6_cpPlatform_kFU85DiYMkidR691gQWG9A.jpg',
+        title: '当我们走进心理咨询室'
+    }
+];
+---
+
+<Layout>
+    <div style="margin:auto;padding-top:10rem" class="row container">
+        {
+            images.map(e => (
+                <div style="margin-bottom:1rem" class="col-lg-3 col-md-4 col-sm-12 col-12">
+                    <div>
+                        <Image loading={`lazy`} style="height: 100%;width:100%" src={e.url} alt={`pic`} height={100} width={100} />
+                    </div>
+                    <div>{e.title}</div>
+                </div>
+            ))
+        }
+    </div>
+</Layout>
+
+