diff --git a/src/pages/home/home.vue b/src/pages/home/home.vue
index 201d182..2cc60d1 100644
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@@ -261,7 +261,8 @@
         {
           id: 6093,
           icon: 'https://file.hikmall.com/prod/image/8ed90fc35e3840e782d73676efcc9a30.png',
-          name: '信息发布'
+          name: '信息发布',
+          url: '/pages/info-publish/info-publish'
         }
       ]
     },
diff --git a/src/pages/info-publish/announce-notice.vue b/src/pages/info-publish/announce-notice.vue
index 0826981..5e3e664 100644
--- a/src/pages/info-publish/announce-notice.vue
+++ b/src/pages/info-publish/announce-notice.vue
@@ -8,100 +8,85 @@
 </route>
 
 <template>
-  <TopNavigation title="新增公告"></TopNavigation>
-  <div class="announce-notice">
-    <!-- 表单内容 -->
-    <div class="form-content">
-      <div class="form-item">
-        <div class="label">
-          <span class="required">*</span>
-          公告标题
-        </div>
-        <input
-          type="text"
-          v-model="formData.title"
-          placeholder="请输入公告标题"
-          class="input-field"
-        />
-      </div>
+  <view class="h-[calc(100vh-0px)] flex flex-col">
+    <TopNavigation title="新增公告"></TopNavigation>
+    <scroll-view class="flex-1 box-border" scroll-y>
+      <view class="announce-notice">
+        <!-- 表单内容 -->
+        <div class="form-content">
+          <div class="form-item">
+            <div class="label">
+              <span class="required">*</span>
+              公告标题
+            </div>
+            <input
+              type="text"
+              v-model="formData.title"
+              placeholder="请输入公告标题"
+              class="input-field"
+            />
+          </div>
 
-      <div class="form-item">
-        <div class="label">
-          <span class="required">*</span>
-          公告正文
+          <div class="form-item">
+            <div class="label">
+              <span class="required">*</span>
+              公告正文
+            </div>
+            <textarea
+              v-model="formData.content"
+              placeholder="请输入要发布的内容"
+              class="textarea-field"
+              @input="handleContentInput"
+            ></textarea>
+            <div class="word-count">{{ contentLength }}/2000</div>
+          </div>
         </div>
-        <textarea
-          v-model="formData.content"
-          placeholder="请输入要发布的内容"
-          class="textarea-field"
-          @input="handleContentInput"
-        ></textarea>
-        <div class="word-count">{{ contentLength }}/2000</div>
-      </div>
-    </div>
 
-    <!-- 底部按钮 -->
-    <view class="bottom-btns">
-      <button class="nextstep-btn" @click="handleNextStep">下一步</button>
-    </view>
-  </div>
+        <!-- 底部按钮 -->
+        <view class="bottom-btns">
+          <button class="nextstep-btn" @click="handleNextStep">下一步</button>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
 </template>
 
-<script>
-  export default {
-    data() {
-      return {
-        formData: {
-          title: '',
-          content: ''
-        }
-      }
-    },
-    computed: {
-      contentLength() {
-        return this.formData.content.length
-      }
-    },
-    methods: {
-      goBack() {
-        this.$router.back()
-      },
-      handleContentInput() {
-        if (this.formData.content.length > 2000) {
-          this.formData.content = this.formData.content.slice(0, 2000)
-        }
-      },
-      handleNextStep() {
-        uni.navigateTo({
-          url: '/pages/info-publish/basic-info'
-        })
-      }
+<script setup lang="ts">
+  import { ref, computed } from 'vue'
+
+  // 表单数据
+  const formData = ref({
+    title: '',
+    content: ''
+  })
+
+  // 计算字数
+  const contentLength = computed(() => formData.value.content.length)
+
+  // 处理内容输入
+  const handleContentInput = () => {
+    if (formData.value.content.length > 2000) {
+      formData.value.content = formData.value.content.slice(0, 2000)
     }
   }
+
+  // 下一步按钮点击处理
+  const handleNextStep = () => {
+    uni.navigateTo({
+      url: '/pages/info-publish/basic-info'
+    })
+  }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+  page {
+    background-color: #f5f5f5;
+  }
+
   .announce-notice {
     display: flex;
     flex-direction: column;
-    height: 100vh;
-    background: #f5f5f5;
-  }
-
-  .header {
-    position: relative;
-    display: flex;
-    align-items: center;
-    height: 44px;
-    padding: 0 15px;
-    background: #fff;
-  }
-
-  .title {
-    flex: 1;
-    font-size: 17px;
-    font-weight: 500;
-    text-align: center;
+    min-height: 100%;
   }
 
   .form-content {
@@ -117,6 +102,8 @@
   }
 
   .label {
+    display: flex;
+    align-items: center;
     margin-bottom: 10px;
     font-size: 15px;
   }
@@ -156,19 +143,17 @@
     padding: 10px 15px;
     background-color: #fff;
     box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+  }
 
-    .nextstep-btn {
-      flex: 1;
-      height: 40px;
-      font-size: 14px;
-      line-height: 40px;
-      text-align: center;
-      border-radius: 4px;
-    }
-
-    .nextstep-btn {
-      color: #fff;
-      background-color: #007aff;
-    }
+  .nextstep-btn {
+    flex: 1;
+    height: 40px;
+    font-size: 14px;
+    line-height: 40px;
+    color: #fff;
+    text-align: center;
+    background-color: #007aff;
+    border: none;
+    border-radius: 4px;
   }
 </style>
diff --git a/src/pages/info-publish/basic-info.vue b/src/pages/info-publish/basic-info.vue
index 43807b7..fe616c5 100644
--- a/src/pages/info-publish/basic-info.vue
+++ b/src/pages/info-publish/basic-info.vue
@@ -8,98 +8,100 @@
 </route>
 
 <template>
-  <TopNavigation title="公告管理"></TopNavigation>
-  <div class="basic-info">
-    <!-- 基本信息区域 -->
-    <div class="content">
-      <div class="section-title">基本信息</div>
+  <view class="h-[calc(100vh-0px)] flex flex-col">
+    <TopNavigation title="公告管理"></TopNavigation>
+    <scroll-view class="flex-1 box-border" scroll-y>
+      <view class="basic-info">
+        <!-- 基本信息区域 -->
+        <view class="content">
+          <view class="section-title">基本信息</view>
 
-      <!-- 发布对象 -->
-      <div class="form-item" @click="selectTarget">
-        <div class="label">
-          <span class="required">*</span>
-          <span>发布对象</span>
-        </div>
-        <div class="value">
-          <span class="placeholder">请选择</span>
-          <i class="arrow">></i>
-        </div>
-      </div>
+          <!-- 发布对象 -->
+          <view class="form-item" @click="selectTarget">
+            <view class="label">
+              <text class="required">*</text>
+              <text>发布对象</text>
+            </view>
+            <view class="value">
+              <text class="placeholder">请选择</text>
+              <text class="arrow">></text>
+            </view>
+          </view>
 
-      <!-- 发布类型 -->
-      <div class="form-item" @click="showTimePicker = true">
-        <div class="label">
-          <span class="required">*</span>
-          <span>发布时间</span>
-        </div>
-        <div class="value">
-          <span>{{ publishType }}</span>
-          <i class="arrow">></i>
-        </div>
-      </div>
+          <!-- 发布类型 -->
+          <view class="form-item" @click="handleShowTimePicker">
+            <view class="label">
+              <text class="required">*</text>
+              <text>发布时间</text>
+            </view>
+            <view class="value">
+              <text>{{ publishType }}</text>
+              <text class="arrow">></text>
+            </view>
+          </view>
 
-      <!-- 发布日期 - 仅在定时发布时显示 -->
-      <div class="form-item" v-if="isScheduled" @click="showDatePicker = true">
-        <div class="label">
-          <span class="required">*</span>
-          <span>发布日期</span>
-        </div>
-        <div class="value">
-          <span>{{ publishDate }}</span>
-          <i class="arrow">></i>
-        </div>
-      </div>
+          <!-- 发布日期 - 仅在定时发布时显示 -->
+          <view class="form-item" v-if="isScheduled" @click="showDatePicker = true">
+            <view class="label">
+              <text class="required">*</text>
+              <text>发布日期</text>
+            </view>
+            <view class="value">
+              <text>{{ publishDate }}</text>
+              <text class="arrow">></text>
+            </view>
+          </view>
 
-      <!-- 发布时间 - 仅在定时发布时显示 -->
-      <div class="form-item" v-if="isScheduled" @click="showTimePickerDetail = true">
-        <div class="label">
-          <span class="required">*</span>
-          <span>发布时间</span>
-        </div>
-        <div class="value">
-          <span>{{ publishTimeDetail }}</span>
-          <i class="arrow">></i>
-        </div>
-      </div>
-    </div>
+          <!-- 发布时间 - 仅在定时发布时显示 -->
+          <view class="form-item" v-if="isScheduled" @click="showTimePickerDetail = true">
+            <view class="label">
+              <text class="required">*</text>
+              <text>发布时间</text>
+            </view>
+            <view class="value">
+              <text>{{ publishTimeDetail }}</text>
+              <text class="arrow">></text>
+            </view>
+          </view>
+        </view>
 
-    <!-- 底部按钮 -->
-    <div class="footer">
-      <button class="draft-btn" @click="saveDraft">保存为草稿</button>
-      <button class="publish-btn" @click="publish">发布公告</button>
-    </div>
+        <!-- 底部按钮 -->
+        <view class="footer">
+          <button class="draft-btn" @click="saveDraft">保存为草稿</button>
+          <button class="publish-btn" @click="publish">发布公告</button>
+        </view>
+      </view>
+    </scroll-view>
 
     <!-- 发布类型选择弹窗 -->
-    <transition name="slide-up">
-      <div class="popup" v-if="showTimePicker">
-        <div class="mask" @click="hideTimePicker"></div>
-        <div class="popup-content">
-          <div class="popup-header">
-            <div class="popup-title">请选择发布时间</div>
-            <div class="popup-close" @click="showTimePicker = false">×</div>
-          </div>
-          <div class="popup-body">
-            <div
-              class="time-option"
-              :class="{ active: !isScheduled }"
-              @click="selectPublishType('now')"
-            >
-              立即发布
-              <i class="check-icon" v-if="!isScheduled">✓</i>
-            </div>
-            <div
-              class="time-option"
-              :class="{ active: isScheduled }"
-              @click="selectPublishType('schedule')"
-            >
-              定时发布
-              <i class="check-icon" v-if="isScheduled">✓</i>
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
+    <view class="popup" v-if="showTimePicker">
+      <view class="mask" @click="handleCloseTimePicker"></view>
+      <view class="popup-content">
+        <view class="popup-header">
+          <view class="popup-title">请选择发布时间</view>
+          <view class="popup-close" @click="handleCloseTimePicker">×</view>
+        </view>
+        <view class="popup-body">
+          <view
+            class="time-option"
+            :class="{ active: !isScheduled }"
+            @click="selectPublishType('now')"
+          >
+            <text>立即发布</text>
+            <text class="check-icon" v-if="!isScheduled">✓</text>
+          </view>
+          <view
+            class="time-option"
+            :class="{ active: isScheduled }"
+            @click="selectPublishType('schedule')"
+          >
+            <text>定时发布</text>
+            <text class="check-icon" v-if="isScheduled">✓</text>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script setup lang="ts">
@@ -155,6 +157,14 @@
   const publish = () => {
     // 发布公告逻辑
   }
+
+  const handleShowTimePicker = () => {
+    showTimePicker.value = true
+  }
+
+  const handleCloseTimePicker = () => {
+    showTimePicker.value = false
+  }
 </script>
 <style scoped>
   .basic-info {
diff --git a/src/pages/info-publish/info-publish.vue b/src/pages/info-publish/info-publish.vue
index 126a836..8ffd9ec 100644
--- a/src/pages/info-publish/info-publish.vue
+++ b/src/pages/info-publish/info-publish.vue
@@ -1,7 +1,206 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
 <template>
-  <view></view>
+  <view class="h-[calc(100vh-50px)] flex flex-col">
+    <TopNavigation title="信息发布"></TopNavigation>
+    <scroll-view class="flex-1 box-border" scroll-y>
+      <!-- 使用说明卡片 -->
+      <view class="instruction-card">
+        <view class="card-content">
+          <view class="title">信息发布使用说明</view>
+          <view class="subtitle">快速上手信息发布</view>
+          <view class="detail-btn">
+            看详情
+            <text class="arrow">></text>
+          </view>
+        </view>
+        <image class="card-icon" src="@/static/images/publish_icon.png" mode="aspectFit" />
+      </view>
+
+      <!-- 功能列表 -->
+      <view class="function-list">
+        <view
+          class="function-item"
+          v-for="(item, index) in functionList"
+          :key="index"
+          @click="navigateTo(item.path)"
+        >
+          <view class="item-left">
+            <image class="item-icon" :src="item.icon" mode="aspectFit" />
+            <view class="item-info">
+              <view class="item-title">{{ item.title }}</view>
+              <view class="item-desc">{{ item.description }}</view>
+            </view>
+          </view>
+          <text class="arrow">></text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+  <CustomTabBar :list="tabList" :default-index="0" @change="handleTabChange"></CustomTabBar>
 </template>
 
-<script setup lang="ts"></script>
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { TabBarItem } from '@/typings'
 
-<style scoped lang="scss"></style>
+  // 功能列表数据
+  const functionList = ref([
+    {
+      title: '素材库',
+      description: '管理图片、音频、视频等素材',
+      icon: '/static/images/material_icon.png',
+      path: '/pages/info-publish/material-library'
+    },
+    {
+      title: '播放内容库',
+      description: '将文字、图片、视频素材组合成节目',
+      icon: '/static/images/content_icon.png',
+      path: '/pages/info-publish/play-content-library'
+    },
+    {
+      title: '发布计划',
+      description: '设置播放内容与时间规则同步到设备',
+      icon: '/static/images/plan_icon.png',
+      path: '/pages/info-publish/plan'
+    },
+    {
+      title: '公告管理',
+      description: '发布手机公告给团队成员',
+      icon: '/static/images/notice_icon.png',
+      path: '/pages/info-publish/notice-manage'
+    }
+  ])
+
+  // 底部标签栏配置
+  const tabList = ref<Array<TabBarItem>>([
+    {
+      title: '首页',
+      icon: 'home'
+    },
+    {
+      title: '屏幕控制',
+      icon: 'screen'
+    }
+  ])
+
+  // 页面跳转
+  const navigateTo = (path: string) => {
+    uni.navigateTo({
+      url: path
+    })
+  }
+
+  // 标签切换处理
+  const handleTabChange = (data: { value: number }) => {
+    // 处理标签切换逻辑
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f6f8fc;
+  }
+  /* 通用箭头样式 - 放在最前面 */
+  .arrow {
+    font-size: 16px;
+    color: #ccc;
+  }
+  /* 说明卡片样式 */
+  .instruction-card {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 20px;
+    margin: 16px;
+    color: #fff;
+    background: #4080ff;
+    border-radius: 12px;
+
+    .card-content {
+      flex: 1;
+    }
+
+    .title {
+      margin-bottom: 8px;
+      font-size: 18px;
+      font-weight: 500;
+    }
+
+    .subtitle {
+      font-size: 14px;
+      opacity: 0.8;
+    }
+
+    .detail-btn {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 12px;
+      margin-top: 12px;
+      font-size: 14px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 16px;
+
+      .arrow {
+        color: #fff; /* 覆盖通用箭头样式 */
+      }
+    }
+
+    .card-icon {
+      width: 60px;
+      height: 60px;
+      margin-left: 20px;
+    }
+  }
+  /*   功能列表样式 */
+  .function-list {
+    margin: 16px;
+    overflow: hidden;
+    background: #fff;
+    border-radius: 12px;
+
+    .function-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px;
+      border-bottom: 1px solid #f5f5f5;
+
+      &:last-child {
+        border-bottom: none;
+      }
+    }
+
+    .item-left {
+      display: flex;
+      align-items: center;
+    }
+
+    .item-icon {
+      width: 30px;
+      height: 30px;
+      margin-right: 12px;
+    }
+
+    .item-info {
+      .item-title {
+        margin-bottom: 4px;
+        font-size: 16px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .item-desc {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/info-publish/material-library.vue b/src/pages/info-publish/material-library.vue
new file mode 100644
index 0000000..23d1d16
--- /dev/null
+++ b/src/pages/info-publish/material-library.vue
@@ -0,0 +1,309 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <view class="h-[calc(100vh-0px)] flex flex-col">
+    <TopNavigation title="素材库"></TopNavigation>
+    <scroll-view class="flex-1 box-border" scroll-y>
+      <!-- 存储容量卡片 -->
+      <view class="storage-card">
+        <view class="storage-title">素材存储容量</view>
+        <view class="storage-info">
+          <text class="used-text">已用 0.00%</text>
+          <text class="remain-text">剩余19.99 G/ 20.00 G</text>
+        </view>
+        <view class="progress-bar">
+          <view class="progress" :style="{ width: usedPercentage + '%' }"></view>
+        </view>
+        <view class="storage-details">
+          <view class="detail-item">
+            <text class="size image">833.67 K</text>
+            <text class="type">图片</text>
+          </view>
+          <view class="detail-item">
+            <text class="size audio">0 B</text>
+            <text class="type">音频</text>
+          </view>
+          <view class="detail-item">
+            <text class="size video">0 B</text>
+            <text class="type">视频</text>
+          </view>
+        </view>
+      </view>
+
+      <!-- 素材类型标签 -->
+      <view class="material-tabs">
+        <view
+          v-for="(tab, index) in tabs"
+          :key="index"
+          class="tab-item"
+          :class="{ active: currentTab === index }"
+          @click="handleTabChange(index)"
+        >
+          <text>{{ tab.name }}({{ tab.count }})</text>
+        </view>
+      </view>
+
+      <!-- 素材列表 -->
+      <view class="material-list">
+        <view v-for="(item, index) in materialList" :key="index" class="material-item">
+          <image class="material-icon" :src="item.icon" mode="aspectFill" />
+          <view class="material-info">
+            <text class="material-name">{{ item.name }}</text>
+            <text class="material-id">{{ item.id }}</text>
+            <text class="material-time">{{ item.time }}</text>
+          </view>
+          <view class="right-wrapper">
+            <text class="status-tag">已通过</text>
+            <text class="arrow">></text>
+          </view>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部按钮 -->
+    <view class="footer">
+      <button class="upload-btn">上传列表</button>
+      <button class="add-btn">添加图片素材</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  // 使用率
+  const usedPercentage = ref(0.0)
+
+  // 标签页配置
+  const tabs = ref([
+    { name: '图片', count: 4 },
+    { name: '音频', count: 0 },
+    { name: '视频', count: 0 }
+  ])
+
+  // 当前选中的标签
+  const currentTab = ref(0)
+
+  // 素材列表数据
+  const materialList = ref([
+    {
+      icon: '/static/images/house_resource.png',
+      name: 'house_resource.png',
+      id: 'HikMall_30013234',
+      time: '2024-12-26 15:11:18'
+    },
+    {
+      icon: '/static/images/app_icon.png',
+      name: 'app_icon.png',
+      id: 'HikMall_30013234',
+      time: '2024-12-26 15:10:37'
+    },
+    {
+      icon: '/static/images/home.png',
+      name: 'home.png',
+      id: 'HikMall_30013234',
+      time: '2024-12-26 15:05:10'
+    },
+    {
+      icon: '/static/images/lock.jpg',
+      name: '锁通通 2.jpg',
+      id: 'HikMall_30013234',
+      time: '2024-12-26 15:05:10'
+    }
+  ])
+
+  // 切换标签
+  const handleTabChange = (index: number) => {
+    currentTab.value = index
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f5f5f5;
+  }
+
+  .storage-card {
+    padding: 20px;
+    margin: 16px;
+    background: #fff;
+    border-radius: 12px;
+
+    .storage-title {
+      margin-bottom: 12px;
+      font-size: 16px;
+      font-weight: 500;
+    }
+
+    .storage-info {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      font-size: 14px;
+    }
+
+    .progress-bar {
+      height: 4px;
+      margin-bottom: 16px;
+      background: #f0f0f0;
+      border-radius: 2px;
+
+      .progress {
+        height: 100%;
+        background: #4080ff;
+        border-radius: 2px;
+      }
+    }
+
+    .storage-details {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .detail-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+
+      .size {
+        margin-bottom: 4px;
+        font-size: 14px;
+
+        &.image {
+          color: #4080ff;
+        }
+        &.audio {
+          color: #00c1d4;
+        }
+        &.video {
+          color: #ffb100;
+        }
+      }
+
+      .type {
+        font-size: 12px;
+        color: #999;
+      }
+    }
+  }
+
+  .material-tabs {
+    display: flex;
+    padding: 0 16px;
+    margin-bottom: 12px;
+
+    .tab-item {
+      position: relative;
+      padding: 8px 0;
+      margin-right: 24px;
+      font-size: 14px;
+      color: #999;
+
+      &.active {
+        font-weight: 500;
+        color: #333;
+
+        &::after {
+          position: absolute;
+          bottom: 0;
+          left: 0;
+          width: 100%;
+          height: 2px;
+          content: '';
+          background: #4080ff;
+        }
+      }
+    }
+  }
+
+  .material-list {
+    padding: 0 16px;
+
+    .material-item {
+      position: relative; // 添加相对定位
+      display: flex;
+      align-items: center;
+      padding: 16px;
+      margin-bottom: 12px;
+      background: #fff;
+      border-radius: 8px;
+    }
+
+    .material-icon {
+      width: 48px;
+      height: 48px;
+      margin-right: 12px;
+      border-radius: 4px;
+    }
+
+    .material-info {
+      flex: 1;
+
+      .material-name {
+        margin-bottom: 4px;
+        font-size: 14px;
+        color: #333;
+      }
+
+      .material-id,
+      .material-time {
+        display: block;
+        font-size: 12px;
+        color: #999;
+      }
+    }
+
+    .status-tag {
+      position: absolute; // 添加绝对定位
+      top: 0; // 距离顶部 8px
+      right: 0; // 距离右侧 16px
+      padding: 2px 6px; // 添加内边距
+      font-size: 12px;
+      color: #52c41a;
+      background-color: rgba(82, 196, 26, 0.1); // 添加浅绿色背景
+      border-radius: 2px; // 添加圆角
+    }
+
+    .arrow {
+      margin-top: 24px; // 向下偏移以对齐底部
+      color: #ccc;
+    }
+  }
+
+  .footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    padding: 10px 16px;
+    background: #fff;
+    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+
+    button {
+      flex: 1;
+      height: 40px;
+      font-size: 14px;
+      border: none;
+      border-radius: 4px;
+
+      &.upload-btn {
+        margin-right: 12px;
+        color: #333;
+        background: #f5f5f5;
+      }
+
+      &.add-btn {
+        color: #fff;
+        background: #4080ff;
+      }
+    }
+  }
+</style>
diff --git a/src/pages/info-publish/play-content-library.vue b/src/pages/info-publish/play-content-library.vue
new file mode 100644
index 0000000..45a4045
--- /dev/null
+++ b/src/pages/info-publish/play-content-library.vue
@@ -0,0 +1,229 @@
+<route lang="json5" type="page">
+{
+  layout: 'default',
+  style: {
+    navigationStyle: 'custom'
+  }
+}
+</route>
+
+<template>
+  <view class="h-[calc(100vh-0px)] flex flex-col">
+    <TopNavigation title="播放内容库"></TopNavigation>
+    <scroll-view class="flex-1 box-border" scroll-y>
+      <!-- 设备类型切换 -->
+      <view class="device-tabs">
+        <view
+          v-for="(tab, index) in deviceTabs"
+          :key="index"
+          class="tab-item"
+          :class="{ active: currentDeviceTab === index }"
+          @click="handleDeviceTabChange(index)"
+        >
+          <text>{{ tab.name }}</text>
+        </view>
+      </view>
+
+      <!-- 右上角按钮 -->
+      <!-- <view class="action-btn">
+        <text>图片/视频轮播</text>
+      </view> -->
+
+      <!-- 内容卡片 -->
+      <view class="content-card">
+        <view class="card-header">
+          <view class="content-title">智慧屏节目202412260150523</view>
+          <view class="content-type">图片/视频轮播</view>
+        </view>
+
+        <view class="content-info">
+          <view class="info-item">
+            <text class="label">分辨率</text>
+            <text class="value">1920*1080</text>
+          </view>
+          <view class="info-item">
+            <text class="label">更新人员</text>
+            <text class="value">HikMall_30013234</text>
+          </view>
+          <view class="info-item">
+            <text class="label">更新时间</text>
+            <text class="value">2024-12-26 15:05:31</text>
+          </view>
+        </view>
+
+        <!-- 操作按钮组 -->
+        <view class="action-group">
+          <button class="action-button" @click="handlePreview">预览</button>
+          <button class="action-button" @click="handleEdit">编辑</button>
+          <button class="action-button" @click="handleDelete">删除</button>
+          <button class="action-button" @click="handlePublish">发布</button>
+        </view>
+      </view>
+    </scroll-view>
+
+    <!-- 底部按钮 -->
+    <view class="footer">
+      <button class="add-btn">添加智慧屏节目</button>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+  import { ref } from 'vue'
+
+  // 设备类型标签
+  const deviceTabs = ref([{ name: '智慧屏' }, { name: '门禁' }])
+
+  // 当前选中的设备类型
+  const currentDeviceTab = ref(0)
+
+  // 切换设备类型
+  const handleDeviceTabChange = (index: number) => {
+    currentDeviceTab.value = index
+  }
+
+  // 操作按钮事件处理
+  const handlePreview = () => {
+    // 实现预览逻辑
+  }
+
+  const handleEdit = () => {
+    // 实现编辑逻辑
+  }
+
+  const handleDelete = () => {
+    // 实现删除逻辑
+  }
+
+  const handlePublish = () => {
+    // 实现发布逻辑
+  }
+</script>
+
+<style lang="scss" scoped>
+  page {
+    background-color: #f5f5f5;
+  }
+
+  .device-tabs {
+    display: flex;
+    padding: 8px 16px;
+    margin: 16px;
+    background: #fff;
+    border-radius: 8px;
+
+    .tab-item {
+      flex: 1;
+      padding: 8px 0;
+      font-size: 14px;
+      color: #666;
+      text-align: center;
+
+      &.active {
+        font-weight: 500;
+        color: #333;
+        background: #f5f5f5;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .action-btn {
+    position: absolute;
+    top: 16px;
+    right: 16px;
+    padding: 6px 12px;
+    font-size: 12px;
+    color: #fff;
+    background: #4080ff;
+    border-radius: 16px;
+  }
+
+  .content-card {
+    padding: 16px;
+    margin: 16px;
+    background: #fff;
+    border-radius: 8px;
+
+    .card-header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    .content-title {
+      flex: 1;
+      margin-right: 12px; // 为右侧标识留出空间
+      font-size: 16px;
+      font-weight: 500;
+      color: #333;
+    }
+
+    .content-type {
+      padding: 2px 8px;
+      margin-top: 0px;
+      font-size: 12px;
+      color: #4080ff;
+      white-space: nowrap;
+      background: rgba(64, 128, 255, 0.1);
+      border-radius: 4px;
+    }
+    .info-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 12px;
+      font-size: 14px;
+
+      &:last-child {
+        margin-bottom: 14px;
+      }
+
+      .label {
+        color: #666;
+      }
+
+      .value {
+        color: #333;
+      }
+    }
+  }
+
+  .action-group {
+    display: flex;
+    gap: 8px;
+    justify-content: space-between;
+
+    .action-button {
+      flex: 1;
+      height: 32px;
+      font-size: 14px;
+      line-height: 32px;
+      color: #4080ff;
+      background: #fff;
+      border: 1px solid #4080ff;
+      border-radius: 4px;
+    }
+  }
+
+  .footer {
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    padding: 16px;
+    background: #fff;
+    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.05);
+
+    .add-btn {
+      width: 100%;
+      height: 40px;
+      font-size: 14px;
+      line-height: 40px;
+      color: #fff;
+      background: #4080ff;
+      border: none;
+      border-radius: 4px;
+    }
+  }
+</style>
diff --git a/src/static/images/content_icon.png b/src/static/images/content_icon.png
new file mode 100644
index 0000000..971ae31
Binary files /dev/null and b/src/static/images/content_icon.png differ
diff --git a/src/static/images/material_icon.png b/src/static/images/material_icon.png
new file mode 100644
index 0000000..bacb37a
Binary files /dev/null and b/src/static/images/material_icon.png differ
diff --git a/src/static/images/notice_icon.png b/src/static/images/notice_icon.png
new file mode 100644
index 0000000..86454af
Binary files /dev/null and b/src/static/images/notice_icon.png differ
diff --git a/src/static/images/plan_icon.png b/src/static/images/plan_icon.png
new file mode 100644
index 0000000..16568e5
Binary files /dev/null and b/src/static/images/plan_icon.png differ
diff --git a/src/static/images/publish_icon.png b/src/static/images/publish_icon.png
new file mode 100644
index 0000000..21ad943
Binary files /dev/null and b/src/static/images/publish_icon.png differ