diff --git a/app/components/AppHead/index.vue b/app/components/AppHead/index.vue
index 3096f57..b42817a 100644
--- a/app/components/AppHead/index.vue
+++ b/app/components/AppHead/index.vue
@@ -36,6 +36,7 @@
           <li :class="{ active: isActive('/service') }"><NuxtLink to="/service">业务与服务</NuxtLink></li>
           <li :class="{ active: isActive('/public') }"><NuxtLink to="/public">网上公开</NuxtLink></li>
           <li :class="{ active: isActive('/case') }"><NuxtLink to="/case">合作案例</NuxtLink></li>
+          <li :class="{ active: isActive('/job') }"><NuxtLink to="/job">人力资源</NuxtLink></li>
           <li
             :class="{ active: isActive('/product') }"
             @mouseenter="isAboutHovered = true"
diff --git a/app/pages/job/index.vue b/app/pages/job/index.vue
new file mode 100644
index 0000000..f701e0f
--- /dev/null
+++ b/app/pages/job/index.vue
@@ -0,0 +1,127 @@
+
+<template>
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>网上公开</h2>
+        <p>安全第一 预防为主 综合治理</p>
+      </div>
+    </div>
+    <div class="new_container">
+      <div class="left">
+        <div class="top">人力资源</div>
+        <div class="main">
+          <div
+            v-for="(item, index) in jobItems"
+            :key="index"
+            class="list"
+            :class="{ active: activeIndex === index }"
+            @click="activeIndex = index">
+            {{item}}
+          </div>
+        </div>
+      </div>
+      <div class="right_main">
+        <div v-if="activeIndex === 0">
+          <p>公司用人理念：</p>
+          <p> 人才理念：德才兼备，人尽其才，才尽其用</p>
+          <p> 德才兼备——才者，德之资也；德者，才之帅也。"德"--具备较高的基本素质，"才"--履行岗位职责的本能力。古人云：尺有所短，寸有所长。选人用人，不求兼备，但以德为基先，以德促才，以才育德。通过提高企业人才素质，构建德才兼备的人才结构。</p>
+          <p> 人尽其才——人有长短，不分大小，德才兼顾，内外兼收。知人善任，人尽其才。慧眼识才，热心爱才，气度用才，胆略举才，胸怀容才。深入发掘每个员工身上的闪光点，充分发挥每个员工的长处，最大限度的整合企业的人才资源，为企业的持续发展提供强劲的动力，推动企业步入健康发展的快车道。</p>
+          <p> 才尽其用——因其材以取之，审其能以任之，用其所长，掩其所短。知人善任，唯才是举，适才适岗，适岗适酬。以敏锐的洞察力，发现每一位员工的个性特点，做到量才而用，将人才放在最合适的位置上，把员工的优势应用到最适合的工作中，使贤者在其位，能者在其职，各安其职，扬长避短，各尽其才。</p>
+        </div>
+        <div v-if="activeIndex === 1">
+          <p>招聘信息：</p>
+          <p> 正在招聘中，具体职位信息请关注我们的招聘网站...</p>
+        </div>
+      </div>
+    </div>
+    <AppFoot/>
+    <right/>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+const jobItems=["理念与政策", "招聘信息"];
+const activeIndex = ref(0);
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #f6f8fa;
+
+  .banner {
+    width: 100%;
+    height: 400px;
+    background: url("@/assets/images/newbanner.png") no-repeat top center;
+    .banner_main {
+      width: 1400px;
+      margin: 0 auto;
+      padding-top: 180px;
+      h2 {
+        font-size: 60px;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+      }
+      p {
+        margin: 0;
+        color: #ffffff;
+      }
+    }
+  }
+  .new_container {
+    width: 1400px;
+    margin: 20px auto;
+    display: flex;
+    .left{
+      width: 250px;
+      box-sizing: border-box;
+      background: #ffffff;
+      border-radius: 4px;
+      .top{
+        width: 100%;
+        background: #3f79ff;
+        text-align: center;
+        color: #ffffff;
+        line-height: 40px;
+        border-radius: 4px 4px 0 0;
+        font-weight: bold;
+      }
+      .main{
+        .list{
+          border-bottom: 1px solid #eeeeee;
+          padding: 10px 5px;
+          font-size: 14px;
+          cursor: pointer;
+          color: #222222;
+          &:hover{
+            background: #cddcff;
+          }
+
+        }
+        .active{
+          background: #cddcff;
+        }
+        &:last-child{
+          border-bottom: none;
+        }
+
+      }
+    }
+    .right_main{
+      flex: 1;
+      margin-left: 20px;
+      background: #ffffff;
+      padding: 10px;
+      color: #333333;
+      line-height: 2;
+      text-indent: 2rem;
+      min-height: 500px;
+
+    }
+  }
+}
+
+
+</style>
diff --git a/app/pages/public/details.vue b/app/pages/public/details.vue
new file mode 100644
index 0000000..175346e
--- /dev/null
+++ b/app/pages/public/details.vue
@@ -0,0 +1,139 @@
+
+<template>
+  <div class="container">
+    <AppHead/>
+    <div class="banner">
+      <div class="banner_main">
+        <h2>网上公开</h2>
+        <p>安全第一 预防为主 综合治理</p>
+      </div>
+    </div>
+    <div class="new_container">
+      <div class="left">
+        <div class="top">网上公开</div>
+        <div class="main">
+          <div  v-for="(item, index) in publicItems"
+                :key="index"
+                class="list"
+                :class="{ active: activeIndex === index }"
+                @click="activeIndex = index">{{item}}</div>
+        </div>
+      </div>
+      <div class="right_main">
+        <div class="top">
+          <div class="title">安全生产检测检验机构信息公开表-河北秦安安全科技股份有限公司（标准变更）</div>
+          <div class="time">2026-5-26</div>
+        </div>
+        <div class="main">
+          2026年1月26日，河北秦安安全科技股份有限公司取得：检测检验机构资质变更行政许可，现将涉及标准变更的2检测项目信息进行公开。2026年1月26日，河北秦安安全科技股份有限公司取得：检测检验机构资质变更行政许可，现将涉及标准变更的2检测项目信息进行公开。2026年1月26日，河北秦安安全科技股份有限公司取得：检测检验机构资质变更行政许可，现将涉及标准变更的2检测项目信息进行公开。2026年1月26日，河北秦安安全科技股份有限公司取得：检测检验机构资质变更行政许可，现将涉及标准变更的2检测项目信息进行公开。2026年1月26日，河北秦安安全科技股份有限公司取得：检测检验机构资质变更行政许可，现将涉及标准变更的2检测项目信息进行公开。
+        </div>
+
+      </div>
+    </div>
+    <AppFoot/>
+    <right/>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref } from "vue";
+
+const publicItems=["河北秦安安全科技股份有限公司", "秦皇岛市秦安职业卫生检测检", "河北联安众企业管理咨询有限公司", "信息化","公开承诺书","安全生产检测","职业卫生","收费标准","交通运输企业安全生产标准化"];
+const activeIndex = ref(0);
+
+
+</script>
+
+<style scoped lang="scss">
+.container {
+  background: #f6f8fa;
+
+  .banner {
+    width: 100%;
+    height: 400px;
+    background: url("@/assets/images/newbanner.png") no-repeat top center;
+    .banner_main {
+      width: 1400px;
+      margin: 0 auto;
+      padding-top: 180px;
+      h2 {
+        font-size: 60px;
+        color: #ffffff;
+        margin: 0;
+        padding: 0;
+      }
+      p {
+        margin: 0;
+        color: #ffffff;
+      }
+    }
+  }
+  .new_container {
+    width: 1400px;
+    margin: 20px auto;
+    display: flex;
+    .left{
+      width: 250px;
+      box-sizing: border-box;
+      background: #ffffff;
+      border-radius: 4px;
+      .top{
+        width: 100%;
+        background: #3f79ff;
+        text-align: center;
+        color: #ffffff;
+        line-height: 40px;
+        border-radius: 4px 4px 0 0;
+        font-weight: bold;
+      }
+      .main{
+        .list{
+          border-bottom: 1px solid #eeeeee;
+          padding: 10px 5px;
+          font-size: 14px;
+          cursor: pointer;
+          &:hover{
+            background: #f1f1fa;
+          }
+        }
+        &:last-child{
+          border-bottom: none;
+        }
+
+      }
+    }
+    .right_main{
+      flex: 1;
+      margin-left: 20px;
+      background: #ffffff;
+      padding: 10px;
+      border-top: 4px solid #1d78ff;
+      border-radius: 4px 4px 0 0;
+
+      .top{
+        text-align: center;
+        border-bottom: 1px solid #eeeeee;
+        padding-bottom: 10px;
+
+        .title{
+          font-weight: bold;
+        }
+        .time{
+          color: #999999;
+          font-size: 14px;
+          margin-top: 10px;
+        }
+      }
+      .main{
+        padding: 20px;
+        box-sizing: border-box;
+        line-height: 2;
+        text-indent: 2rem;
+        font-size: 14px;
+      }
+
+    }
+  }
+}
+
+
+</style>
diff --git a/app/pages/public/index.vue b/app/pages/public/index.vue
index 0267636..2aefcf5 100644
--- a/app/pages/public/index.vue
+++ b/app/pages/public/index.vue
@@ -20,8 +20,20 @@
         </div>
       </div>
       <div class="right_main">
-        <div class=""></div>
+        <NuxtLink to="/public/details">
+        <div class="wrap">
+          <div class="title">安全生产检测检验机构信息公开表-河北秦安安全科技股份有限公司（标准变更）</div>
+          <div class="time">2026-5-1</div>
+        </div>
+        </NuxtLink>
+        <NuxtLink to="/public/details">
+        <div class="wrap">
+          <div class="title">安全生产检测检验机构信息公开表-河北秦安安全科技股份有限公司（标准变更）</div>
+          <div class="time">2026-5-1</div>
+        </div>
+        </NuxtLink>
       </div>
+
     </div>
     <AppFoot/>
     <right/>
@@ -83,8 +95,9 @@ const activeIndex = ref(0);
           border-bottom: 1px solid #eeeeee;
           padding: 10px 5px;
           font-size: 14px;
+          cursor: pointer;
           &:hover{
-
+           background: #f1f1fa;
           }
         }
         &:last-child{
@@ -97,6 +110,24 @@ const activeIndex = ref(0);
       flex: 1;
       margin-left: 20px;
       background: #ffffff;
+      padding: 10px;
+      a{
+        color: #222222;
+        text-decoration: none;
+      }
+      .wrap{
+        width: 100%;
+        border-bottom: 1px dashed #eeeeee;
+        padding: 20px 10px;
+        box-sizing: border-box;
+        display: flex;
+        justify-content: space-between;
+        cursor: pointer;
+        .time{
+          color: #999999;
+        }
+
+      }
     }
   }
 }