diff --git a/.env.development b/.env.development
index 14e6bd1..4ff5a90 100644
--- a/.env.development
+++ b/.env.development
@@ -1,8 +1,6 @@
 #环境标识
 VITE_ENV="开发环境"
 #基础服务
-VITE_BASE_URL="http://localhost:7001/api/v1"
+VITE_BASE_URL="http://192.168.1.144:8080/mz-api"
 #每日一言服务
 VITE_BASE_URL_YIYAN_SERVICE="https://tenapi.cn"
-#电影服务
-VITE_BASE_URL_MOVIE_SERVICE="https://api.52vmy.cn/api"
diff --git a/.env.production b/.env.production
index 77dacef..0b91c20 100644
--- a/.env.production
+++ b/.env.production
@@ -3,6 +3,4 @@ VITE_ENV="生产环境"
 #基础服务
 VITE_BASE_URL="http://localhost:7001/api/v1"
 #每日一言服务
-VITE_BASE_URL_YIYAN_SERVICE="https://tenapi.cn"
-#电影服务
-VITE_BASE_URL_MOVIE_SERVICE="https://api.52vmy.cn/api"
+VITE_BASE_URL_YIYAN_SERVICE="https://tenapi.cn"
\ No newline at end of file
diff --git a/package.json b/package.json
index 21fb9b0..71bf31c 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@vitejs/plugin-vue": "^5.0.5",
     "autoprefixer": "^10.4.19",
     "postcss": "^8.4.39",
+    "sass": "^1.89.0",
     "tailwindcss": "^3.4.4",
     "typescript": "^5.2.2",
     "unplugin-auto-import": "^0.17.6",
diff --git a/src/api/policy.ts b/src/api/policy.ts
new file mode 100644
index 0000000..0709989
--- /dev/null
+++ b/src/api/policy.ts
@@ -0,0 +1,19 @@
+import request from '@/utils/http.ts'
+
+/**
+ * 获取政策资讯列表
+ * @param params
+ * @returns
+ */
+export const gePolicytList = (params: object) => {
+  return request.get('/byspc/mzPolicy/page', params)
+}
+
+/**
+ * 获取政策资讯信息
+ * @param id
+ * @returns
+ */
+export const getPolicyInfo = (id: number) => {
+  return request.get(`/asdh5/mzPolicy/${id}`)
+}
diff --git a/src/assets/images/boke.png b/src/assets/images/boke.png
deleted file mode 100644
index bb65242..0000000
Binary files a/src/assets/images/boke.png and /dev/null differ
diff --git a/src/assets/images/ewm1.png b/src/assets/images/ewm1.png
new file mode 100644
index 0000000..320e3eb
Binary files /dev/null and b/src/assets/images/ewm1.png differ
diff --git a/src/assets/images/ewm2.png b/src/assets/images/ewm2.png
new file mode 100644
index 0000000..6cd3361
Binary files /dev/null and b/src/assets/images/ewm2.png differ
diff --git a/src/assets/images/ewm3.png b/src/assets/images/ewm3.png
new file mode 100644
index 0000000..7e381ec
Binary files /dev/null and b/src/assets/images/ewm3.png differ
diff --git a/src/assets/images/ewm4.png b/src/assets/images/ewm4.png
new file mode 100644
index 0000000..73bbce8
Binary files /dev/null and b/src/assets/images/ewm4.png differ
diff --git a/src/assets/images/logo2.png b/src/assets/images/logo2.png
new file mode 100644
index 0000000..e4303f8
Binary files /dev/null and b/src/assets/images/logo2.png differ
diff --git a/src/assets/images/nav_bottom.png b/src/assets/images/nav_bottom.png
new file mode 100644
index 0000000..e04641f
Binary files /dev/null and b/src/assets/images/nav_bottom.png differ
diff --git a/src/assets/images/policy-bg.png b/src/assets/images/policy-bg.png
new file mode 100644
index 0000000..824aca8
Binary files /dev/null and b/src/assets/images/policy-bg.png differ
diff --git a/src/components/BottomNavigation.vue b/src/components/BottomNavigation.vue
index 40cdc10..c0dbeca 100644
--- a/src/components/BottomNavigation.vue
+++ b/src/components/BottomNavigation.vue
@@ -1,20 +1,54 @@
 <template>
-  <div class="md:w-[calc(100%-60px)] overflow-hidden mx-auto" >
-      <div class="flex">
-        <div>青岛市委人才工作领导小组</div>
+  <div class="w-full bg-blue-400 h-2"></div>
+  <div
+    class="md:w-[calc(100%)] h-40 overflow-hidden flex items-center justify-center bg-bottom px-48"
+  >
+    <div class="flex items-center w-full">
+      <img :src="logo" class="w-24 h-28 mr-1" alt="" />
+      <div class="flex-1">
+        <div>
+          <span class="font-bold text-xl mr-1"
+            >青岛市委人才工作领导小组办公室</span
+          >
+          <span class="text-lg" style="color: #666666"
+            >中国山东省青岛市香港中路11号</span
+          >
+        </div>
+        <div>
+          <span class="font-bold text-xl mr-1">青岛市人力资源和社会保障局</span>
+          <span class="text-lg" style="color: #666666"
+            >中国山东省青岛市香港中路11号</span
+          >
+        </div>
+        <div class="text-lg mt-3">
+          承办单位：青岛市公共就业和人才服务中心
+          <span class="cursor-pointer" @click="handleToICP"
+            >ICP备案号：鲁ICP备13003495号-2</span
+          >
+        </div>
       </div>
+    </div>
+    <img src="@/assets/images/ewm1.png" class="w-24 h-28 mr-7" alt="" /><img
+      src="@/assets/images/ewm2.png"
+      class="w-24 h-28 mr-7"
+      alt=""
+    /><img src="@/assets/images/ewm3.png" class="w-24 h-28 mr-7" alt="" /><img
+      src="@/assets/images/ewm4.png"
+      class="w-24 h-28 mr-7"
+      alt=""
+    />
   </div>
 </template>
 <script setup lang="ts">
-
+import logo from "@/assets/images/logo2.png";
+const handleToICP = () => {
+  window.open("http://beian.miit.gov.cn/");
+};
 </script>
 
 <style scoped>
-/* input 取消默认样式 */
-input {
-  background: none;
-  outline: none;
-  border: 0px;
-  border-bottom: 1px solid #000;
+.bg-bottom {
+  background: url(/src/assets/images/nav_bottom.png) no-repeat;
+  background-size: 100% 100%;
 }
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/NavigationBar.vue b/src/components/NavigationBar.vue
index fa7b917..a202d36 100644
--- a/src/components/NavigationBar.vue
+++ b/src/components/NavigationBar.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="overflow-hidden bg-transparent	">
-    <div class="px-8 flex justify-between items-center w-full md:h-[54px] md:mt-5 w-[350px] h-[24px] mt-4">
+  <div class="overflow-hidden " style="background:#1b77ff;">
+    <div class="px-8 flex justify-between items-center w-full md:h-[60px]  w-[350px] h-[24px]">
       <div class="flex items-center">
-        <span class=" ml-[6px] md:ml-2  text-white text-42px">青岛市免租金住宿保障平台</span>
+        <span class=" ml-[6px] md:ml-2  text-white  text-42px">青岛市免租金住宿保障平台</span>
       </div>
       <div 
         class="text-[16px] font-medium hidden md:block hover:cursor-pointer text-white">
@@ -17,10 +17,10 @@
       </div>
       <div>
         <div class="flex flex-col items-center md:items-center md:flex-row">
-          <button @click="handleLogin" :class="currentKey == 0 ? 'bg-bgColorDark' : 'bg-white'"
+          <!-- <button @click="handleLogin" :class="currentKey == 0 ? 'bg-bgColorDark' : 'bg-white'"
             class="w-[90px] h-[30px] rounded-[15px] border border-primary text-sm text-primary font-medium hidden md:block">
             {{ $t('base.login.text') }}
-          </button>
+          </button> -->
           <!-- 国际化 -->
           <!-- <div class="md:ml-4 hidden md:block">
             <a-dropdown trigger="hover" @select="handleDropdown">
@@ -113,8 +113,8 @@ const navList = reactive([
   },
   {
     id: 1,
-    name: 'Services',
-    path: '/layout/services',
+    name: 'Policy',
+    path: '/layout/Policy',
   },
   {
     id: 2,
diff --git a/src/config/baseUrlConfig.ts b/src/config/baseUrlConfig.ts
index b2c1030..df6c993 100644
--- a/src/config/baseUrlConfig.ts
+++ b/src/config/baseUrlConfig.ts
@@ -3,20 +3,13 @@
 // VITE_ENV="生产环境||开发环境"
 // #基础服务
 // VITE_BASE_URL="http://localhost:3000"
-// #每日一言服务
-// VITE_BASE_URL_YIYAN_SERVICE="https://tenapi.cn"
-// #电影服务
-// VITE_BASE_URL_MOVIE_SERVICE="https://api.52vmy.cn/api"
+
 const config = {
   VITE_ENV: import.meta.env.VITE_ENV,
   VITE_BASE_URL: import.meta.env.VITE_BASE_URL,
-  VITE_BASE_URL_YIYAN_SERVICE: import.meta.env.VITE_BASE_URL_YIYAN_SERVICE,
-  VITE_BASE_URL_MOVIE_SERVICE: import.meta.env.VITE_BASE_URL_MOVIE_SERVICE,
 }
 const serviceUrls = {
   env: config.VITE_ENV,
   baseService: config.VITE_BASE_URL,
-  yiyanService: config.VITE_BASE_URL_YIYAN_SERVICE,
-  moviceService: config.VITE_BASE_URL_MOVIE_SERVICE,
 }
 export default serviceUrls
diff --git a/src/i18n/modules/base/en.ts b/src/i18n/modules/base/en.ts
index 0f8657e..0ca7374 100644
--- a/src/i18n/modules/base/en.ts
+++ b/src/i18n/modules/base/en.ts
@@ -1,7 +1,7 @@
 export default {
   nav: {
     Home: 'Home',
-    Services: 'Services',
+    Policy: 'Policy',
     About: 'About',
     FAQ: 'FAQ',
     Contact: 'Contact',
@@ -15,7 +15,7 @@ export default {
   },
   footerNavList: {
     Navigate: 'Navigate',
-    Services: 'Services',
+    Policy: 'Policy',
     AboutUs: 'About Us',
     ContactUs: 'Contact Us',
     Careers: 'Careers',
diff --git a/src/i18n/modules/base/zh-cn.ts b/src/i18n/modules/base/zh-cn.ts
index 3277a0c..c0c8c3b 100644
--- a/src/i18n/modules/base/zh-cn.ts
+++ b/src/i18n/modules/base/zh-cn.ts
@@ -1,7 +1,7 @@
 export default {
   nav: {
     Home: '首页',
-    Services: '服务',
+    Policy: '政策资讯',
     About: '关于',
     FAQ: '问答',
     Contact: '联系',
@@ -14,7 +14,7 @@ export default {
   },
   footerNavList: {
     Navigate: '导航',
-    Services: '服务',
+    Policy: '服务',
     AboutUs: '关于我们',
     ContactUs: '联系我们',
     Careers: '职业',
diff --git a/src/router/index.ts b/src/router/index.ts
index f38d233..c10de67 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -20,9 +20,9 @@ const routes: Array<RouteRecordRaw> = [
         meta: { title: 'home' },
       },
       {
-        path: 'services',
-        component: () => import('@/view/services/index.vue'),
-        meta: { title: 'services' },
+        path: 'Policy',
+        component: () => import('@/view/policy/index.vue'),
+        meta: { title: 'policy' },
       },
       {
         path: 'about',
diff --git a/src/view/podcast/index.vue b/src/view/podcast/index.vue
index 23b3d62..82d3744 100644
--- a/src/view/podcast/index.vue
+++ b/src/view/podcast/index.vue
@@ -8,8 +8,7 @@
       <div
         class="md:mt-4 mt-6 grid md:grid-cols-4 md:grid-rows-2 gap-x-1 grid-cols-2 grid-rows-4 md:gap-y-2 gap-y-4 w-full h-[230px]">
         <div class="md:w-[280px] md:h-[90px] w-[181px] h-[46px] flex" v-for="(item, index) in 8" :key="index">
-          <img fit="cover" class="md:w-9 md:h-8 mr-2 h-[22px] w-[22px]" src="@/assets/images/boke.png" alt=" 图标" />
-          <div class="md:w-[199px] w-[138px] h-full">
+         <div class="md:w-[199px] w-[138px] h-full">
             <div class="md:text-lg text-xs tracking-widest overflow-hidden line-clamp-2 text-left md:mb-2">
               【聊科技】机器人跑马拉松，意义何在？
             </div>
diff --git a/src/view/policy/index.vue b/src/view/policy/index.vue
new file mode 100644
index 0000000..bdb28d3
--- /dev/null
+++ b/src/view/policy/index.vue
@@ -0,0 +1,219 @@
+<template>
+  <div class="w-full bg min-h-screen pt-16 pb-7">
+    <div class="w-[calc(100%-230px)] mx-auto mt-60px bg-white pb-9 px-6 pt-6 rounded">
+      <!-- 列表 -->
+      <div v-show="!showDetail">
+        <h3 class="font-bold text-2xl">政策资讯</h3>
+        <div class="flex">
+          <!-- 分类菜单 -->
+          <div
+            class="w-[218px] h-[690px] bg-gradient-to-b from-blue-500 to-blue-300 text-cyan-50 p-6 rounded-l-lg mr-10 mt-2"
+          >
+            <div class="font-bold text-3xl rou">分类信息</div>
+            <p class="">为您提供当前最新的资讯内容</p>
+            <div class="flex flex-col">
+              <div class="flex flex-col items-center justify-between gap-4">
+                <div
+                  class="flex items-center w-full rounded-md h-12 cursor-pointer"
+                  :class="{
+                    'bg-white text-blue-500': active === item.dictValue,
+                    'bg-blue': active !== item.dictValue,
+                  }"
+                  v-for="(item, index) in tabList"
+                  :key="index"
+                  @click="handleClickTab(item)"
+                >
+                  <div class="text-center w-full">{{ item.dictLabel }}</div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="flex flex-col w-[calc(100%-240px)] h-690px overflow-y-auto scrollBar"
+            @scroll="handleScroll"
+          >
+            <div
+              class="flex p-4"
+              v-for="(item, index) in list"
+              :key="index"
+              @click="toPolicyDetail(item)"
+            >
+              <img :src="item.coverImg" class="rounded-md" alt="" />
+              <div class="flex flex-col flex-1 justify-between p-2">
+                <div>{{ item.title }}</div>
+                <div class="text-2 w-full text-gray-400">
+                  {{ item.detail }}
+                </div>
+                <div>
+                  <span>{{ item.dictLabel }}</span
+                  ><span class="text-gray-400">{{ item.createTime }}</span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 详情 -->
+      <div v-show="showDetail" class=" relative">
+        <div class="text-white flex items-center mb-2 absolute -top-16">
+          <span
+            class="cursor-pointer text-xl"
+            @click="showDetail = false"
+            >政策资讯</span
+          ><span class="text-2xl">>详情</span>
+        </div>
+        <div class="bg-white rounded pb-9 px-6 pt-6">
+          <h1 class="text-center">{{ policyInfo.title }}</h1>
+          <div>
+            <span class="mr-5">{{
+              policyInfo.dicId === "1"
+                ? "住房政策"
+                : policyInfo.dicId === "2"
+                ? "人才政策"
+                : policyInfo.dicId === "3"
+                ? "就业政策"
+                : ""
+            }}</span>
+            <span class="text-gray-400">{{ policyInfo.createTime }}</span>
+          </div>
+          <div v-html="policyInfo.detail"></div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted, onUnmounted } from "vue";
+import { gePolicytList, getPolicyInfo } from "@/api/policy";
+
+// tabList
+const tabList = reactive([
+  {
+    dictLabel: "最新",
+    dictValue: "0",
+  },
+  {
+    dictLabel: "住房政策",
+    dictValue: "1",
+  },
+  {
+    dictLabel: "人才政策",
+    dictValue: "2",
+  },
+  {
+    dictLabel: "就业政策",
+    dictValue: "3",
+  },
+]);
+const active = ref("0");
+const showDetail = ref(false);
+const handleClickTab = (item: any) => {
+  active.value = item.dictValue;
+  joinIn.pageNo = 1;
+  joinIn.dictCode = item.dictValue;
+  list.value = [];
+  isLoading.value = true;
+  getList();
+};
+const joinIn = {
+  pageNo: 1,
+  pageSize: 5,
+  dictCode: active.value,
+};
+const policyInfo = ref<any>({});
+let lastScrollTime = 0;
+const throttleDelay = 500; // 节流间
+// 初始化时需要异步获取
+const list = ref([]);
+// 新增加载状态
+const isLoading = ref(true);
+// 修改 getList 函数以支持分页加载
+const getList = async () => {
+  try {
+    if (!isLoading.value) return;
+    const res = await gePolicytList(joinIn);
+    list.value = [...list.value, ...res.data];
+    if (res.data.length < joinIn.pageSize) {
+      isLoading.value = false;
+      return false;
+    }
+    joinIn.pageNo++;
+  } catch (err) {
+    console.error("获取数据失败:", err);
+  }
+};
+
+const handleScroll = (event: Event) => {
+  const now = Date.now();
+  // 如果未达到节流时间间隔，直接返回
+  if (now - lastScrollTime < throttleDelay) return;
+
+  const target = event.target as HTMLElement;
+  if (target.scrollTop + target.clientHeight >= target.scrollHeight - 10) {
+    getList();
+    // 更新最后触发时间
+    lastScrollTime = now;
+  }
+};
+const toPolicyDetail = async (item) => {
+  const res = await getPolicyInfo(item.id);
+  policyInfo.value = res.data;
+  showDetail.value = true;
+};
+
+// 生命周期钩子
+onMounted(() => {
+  // 初始化加载
+  getList();
+});
+
+onUnmounted(() => {
+  // 移除滚动事件监听
+});
+</script>
+
+<style lang="scss" scoped>
+img {
+  width: 200px;
+  height: 120px;
+}
+.bg {
+  background: url(/src/assets/images/policy-bg.png) no-repeat;
+  background-size: 100% 100%;
+}
+.bg-blue {
+  background-color: #81bcfe;
+}
+.text-2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.scrollBar {
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+    &:hover {
+      // width: 8px;
+      // height: 8px;
+    }
+  }
+  &::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius: 4px;
+    // box-shadow: inset 0 0 5px rgba(#00023f, 0.2);
+    box-shadow: none;
+    background: #287dfe;
+  }
+  &::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    // box-shadow: inset 0 0 5px rgba(#00023f, 0.2);
+    box-shadow: none;
+    border-radius: 4px;
+    background: transparent;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/view/services/index.vue b/src/view/services/index.vue
deleted file mode 100644
index ef6cf41..0000000
--- a/src/view/services/index.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<template>
-  <div class="w-[350px] md:w-[1200px] m-auto overflow-hidden">
-    <div class="mt-[24px] md:mt-[66px] w-full flex flex-col items-center">
-      <button
-        class="w-[107px] h-[38px] md:w-[128px] md:h-[50px] rounded-[24px] text-secondary text-base font-medium border border-gray-200 flex items-center justify-center">
-        SERVICES
-      </button>
-      <div class="text-[32px] mt-8  md:mt-5 text-center md:text-[56px] md:w-[764px] font-medium">
-        What are the different types of insurance?
-        <p class="mt-3 md:mt-5 text-[16px] md:text-[18px] font-normal">
-          There are many different types of insurance, each designed to protect you from a different type of risk. Some of
-          the most common types of insurance include:
-        </p>
-      </div>
-    </div>
-    <div class="pb-20">
-      <SidedLayout :title="layoutInfo.title" :desc="layoutInfo.desc" :bgImg="layoutInfo.bgImg" :type="layoutInfo.type" />
-      <SidedLayout :title="layoutInfo2.title" :desc="layoutInfo2.desc" :bgImg="layoutInfo2.bgImg"
-        :type="layoutInfo2.type" />
-      <SidedLayout :title="layoutInfo4.title" :desc="layoutInfo4.desc" :bgImg="layoutInfo4.bgImg"
-        :type="layoutInfo4.type" />
-      <SidedLayout :title="layoutInfo3.title" :desc="layoutInfo3.desc" :bgImg="layoutInfo3.bgImg"
-        :type="layoutInfo3.type" />
-    </div>
-  </div>
-</template>
-
-<script setup lang="ts">
-import SidedLayoutimg from '@/assets/images/service-img1.png'
-import SidedLayoutimg2 from '@/assets/images/service-img2.png'
-import SidedLayoutimg3 from '@/assets/images/service-img3.png'
-import SidedLayoutimg4 from '@/assets/images/service-img4.png'
-const layoutInfo = {
-  title: 'Car insurance',
-  desc: 'This type of insurance protects you financially if you are involved in a car accident. It can cover the cost of repairs to your car, medical expenses, and lost wages.',
-  bgImg: SidedLayoutimg,
-  type: 2,
-}
-const layoutInfo2 = {
-  title: 'Car insurance',
-  desc: 'This type of insurance protects you financially if you are involved in a car accident. It can cover the cost of repairs to your car, medical expenses, and lost wages.',
-  bgImg: SidedLayoutimg2,
-  type: 1,
-}
-const layoutInfo3 = {
-  title: 'Car insurance',
-  desc: 'This type of insurance protects you financially if you are involved in a car accident. It can cover the cost of repairs to your car, medical expenses, and lost wages.',
-  bgImg: SidedLayoutimg3,
-  type: 1,
-}
-const layoutInfo4 = {
-  title: 'Car insurance',
-  desc: 'This type of insurance protects you financially if you are involved in a car accident. It can cover the cost of repairs to your car, medical expenses, and lost wages.',
-  bgImg: SidedLayoutimg4,
-  type: 2,
-}
-
-</script>
-
-<style scoped></style>
\ No newline at end of file
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c4109d2..ee64870 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -9,6 +9,9 @@ export default {
     extend: {
       spacing: {
         "42px": "42px",
+        "108px": "108px",
+        "690px": "690px",
+        "60px": "60px",
       },
       colors: {
         primary: '#42b983', // 主题色 蓝色