From 990a73cb7ef19cfe80f5506f32d65df5eff15730 Mon Sep 17 00:00:00 2001
From: Flow <958079825@qq.com>
Date: Wed, 3 Sep 2025 15:41:21 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/combo/index.vue          | 409 +++++++++++++++++++++--------
 src/views/orders/index.vue         | 226 +++++++++++++---
 src/views/vip/VIP_device/index.vue | 223 +++++++++++++---
 3 files changed, 681 insertions(+), 177 deletions(-)

diff --git a/src/views/combo/index.vue b/src/views/combo/index.vue
index 8762c839a..a8dbec98b 100644
--- a/src/views/combo/index.vue
+++ b/src/views/combo/index.vue
@@ -1,116 +1,144 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
-      <el-form-item label="套餐名称" prop="comboname">
-        <el-input
-          v-model="queryParams.comboname"
-          placeholder="请输入套餐名称"
-          clearable
-          @keyup.enter="handleQuery"
-          class="!w-240px"
+  <div class="doctor-notice-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">
+        <Icon icon="ep:box" class="mr-2" />
+        会员套餐管理
+      </h2>
+      <p class="page-description">查看与管理系统中的会员套餐</p>
+    </div>
+
+    <!-- 搜索区域 -->
+    <ContentWrap>
+      <el-form
+        ref="queryFormRef"
+        :model="queryParams"
+        :inline="true"
+        label-width="80px"
+        class="search-form"
+      >
+        <el-form-item label="套餐名称" prop="comboname">
+          <el-input
+            v-model="queryParams.comboname"
+            placeholder="请输入套餐名称"
+            clearable
+            @keyup.enter="handleQuery"
+            class="!w-240px"
+          />
+        </el-form-item>
+        <el-form-item label="状态" prop="status">
+          <el-select
+            v-model="queryParams.status"
+            placeholder="请选择状态"
+            clearable
+            class="!w-240px"
+          >
+            <el-option label="启用" :value="1" />
+            <el-option label="禁用" :value="0" />
+          </el-select>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery">
+            <Icon icon="ep:search" class="mr-1" />
+            搜索
+          </el-button>
+          <el-button @click="resetQuery">
+            <Icon icon="ep:refresh" class="mr-1" />
+            重置
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
+
+    <!-- 列表 -->
+    <ContentWrap>
+      <div class="table-header">
+        <div class="table-title">
+          <Icon icon="ep:box" class="mr-2" />
+          套餐列表
+        </div>
+        <div class="table-actions">
+          <el-button type="primary" @click="openForm('create')">
+            <Icon icon="ep:plus" class="mr-1" />
+            新增
+          </el-button>
+          <el-button type="success" @click="handleExport" :loading="exportLoading">
+            <Icon icon="ep:download" class="mr-1" />
+            导出
+          </el-button>
+          <el-button type="primary" @click="refreshList">
+            <Icon icon="ep:refresh" class="mr-1" />
+            刷新
+          </el-button>
+        </div>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="list"
+        :stripe="true"
+        :show-overflow-tooltip="true"
+        class="notice-table"
+      >
+        <el-table-column label="序号" type="index" width="60" align="center" />
+        <el-table-column label="套餐名称" align="center" prop="comboname" min-width="160" />
+        <el-table-column label="套餐价格(元)" align="center" prop="price" width="140" />
+        <el-table-column label="套餐时长(天)" align="center" prop="period" width="140" />
+        <el-table-column label="状态" align="center" prop="status" width="120">
+          <template #default="scope">
+            <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="套餐描述" align="center" prop="description" min-width="200" />
+        <el-table-column
+          label="创建时间"
+          align="center"
+          prop="createtime"
+          :formatter="dateFormatter"
+          width="180"
         />
-      </el-form-item>
-      <el-form-item label="状态" prop="status">
-        <el-select
-          v-model="queryParams.status"
-          placeholder="请选择状态"
-          clearable
-          class="!w-240px"
-        >
-          <el-option label="启用" value="1" />
-          <el-option label="禁用" value="0" />
-        </el-select>
-      </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+        <el-table-column
+          label="更新时间"
+          align="center"
+          prop="updatetime"
+          :formatter="dateFormatter"
+          width="180"
+        />
+        <el-table-column label="操作" align="center" width="150" fixed="right">
+          <template #default="scope">
+            <el-button
+              link
+              type="primary"
+              size="small"
+              @click="openForm('update', scope.row.id)"
+            >
+              编辑
+            </el-button>
+            <el-button
+              link
+              type="danger"
+              size="small"
+              @click="handleDelete(scope.row.id)"
+            >
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="序号" align="center" width="80">
-        <template #default="scope">
-          {{ (queryParams.pageNo - 1) * queryParams.pageSize + scope.$index + 1 }}
-        </template>
-      </el-table-column>
-      <el-table-column label="套餐名称" align="center" prop="comboname" />
-      <el-table-column label="套餐价格(元)" align="center" prop="price" />
-      <el-table-column label="套餐时长(天)" align="center" prop="period" />
-      <el-table-column label="状态" align="center" prop="status" >
-        <template #default="scope">
-          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">{{ scope.row.status === 1 ? '启用' : '禁用' }}</el-tag>
-        </template>
-      </el-table-column>
-      <el-table-column label="套餐描述" align="center" prop="description" />
-      <el-table-column
-        label="创建时间"
-        align="center"
-        prop="createtime"
-        :formatter="dateFormatter"
-        width="180px"
+      <!-- 分页 -->
+      <Pagination
+        :total="total"
+        v-model:page="queryParams.pageNo"
+        v-model:limit="queryParams.pageSize"
+        @pagination="getList"
       />
-      <el-table-column
-        label="更新时间"
-        align="center"
-        prop="updatetime"
-        :formatter="dateFormatter"
-        width="180px"
-      />
-      <el-table-column label="操作" align="center" min-width="120px">
-        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-          >
-            编辑
-          </el-button>
-          <el-button
-            link
-            type="danger"
-            @click="handleDelete(scope.row.id)"
-          >
-            删除
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
-    <!-- 分页 -->
-    <Pagination
-      :total="total"
-      v-model:page="queryParams.pageNo"
-      v-model:limit="queryParams.pageSize"
-      @pagination="getList"
-    />
-  </ContentWrap>
+    </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <ComboForm ref="formRef" @success="getList" />
+    <!-- 表单弹窗：添加/修改 -->
+    <ComboForm ref="formRef" @success="getList" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -171,6 +199,11 @@ const resetQuery = () => {
   handleQuery()
 }
 
+/** 刷新列表 */
+const refreshList = () => {
+  getList()
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -209,4 +242,162 @@ const handleExport = async () => {
 onMounted(() => {
   getList()
 })
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.doctor-notice-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  height: 100%;
+  overflow-y: auto;
+}
+
+.page-header {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: linear-gradient(135deg, #1890ff 0%, #36cfc9 100%);
+  border-radius: 12px;
+  color: white;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+
+  .page-title {
+    margin: 0 0 8px 0;
+    font-size: 24px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+  }
+
+  .page-description {
+    margin: 0;
+    opacity: 0.9;
+    font-size: 14px;
+  }
+}
+
+.search-form {
+  .el-form-item {
+    margin-bottom: 16px;
+  }
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 16px 0;
+  border-bottom: 1px solid #ebeef5;
+
+  .table-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    display: flex;
+    align-items: center;
+  }
+
+  .table-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+.notice-table {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+
+  :deep(.el-table__header) {
+    background-color: #fafafa;
+  }
+
+  :deep(.el-table__row) {
+    cursor: pointer;
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #f5f7fa !important;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .doctor-notice-container {
+    padding: 10px;
+  }
+
+  .page-header {
+    padding: 16px;
+
+    .page-title {
+      font-size: 20px;
+    }
+  }
+
+  .table-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+
+    .table-actions {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  .search-form {
+    .el-form-item {
+      margin-bottom: 12px;
+    }
+  }
+}
+
+.notice-table {
+  :deep(.el-table__row) {
+    animation: fadeInUp 0.3s ease-out;
+  }
+}
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+::deep(.el-loading-mask) {
+  background-color: rgba(255, 255, 255, 0.9);
+  backdrop-filter: blur(2px);
+}
+
+::deep(.el-tag) {
+  border-radius: 4px;
+  font-weight: 500;
+}
+
+::deep(.el-button) {
+  border-radius: 6px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+::deep(.el-pagination) {
+  margin-top: 20px;
+  justify-content: center;
+  padding: 16px 0;
+  border-top: 1px solid #ebeef5;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/orders/index.vue b/src/views/orders/index.vue
index 7b40af63e..ec97717f8 100644
--- a/src/views/orders/index.vue
+++ b/src/views/orders/index.vue
@@ -1,13 +1,23 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
+  <div class="doctor-notice-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">
+        <Icon icon="ep:document" class="mr-2" />
+        订单管理
+      </h2>
+      <p class="page-description">查询与管理会员订单记录</p>
+    </div>
+
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="search-form"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="80px"
+      >
       <el-form-item label="套餐ID" prop="comboid">
         <el-input
           v-model="queryParams.comboid"
@@ -73,31 +83,36 @@
           class="!w-220px"
         />
       </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <!-- <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-        >
-          <Icon icon="ep:plus" class="mr-5px" /> 新增
-        </el-button> -->
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"><Icon icon="ep:search" class="mr-1" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-1" /> 重置</el-button>
+          <el-button type="success" @click="handleExport" :loading="exportLoading">
+            <Icon icon="ep:download" class="mr-1" /> 导出
+          </el-button>
+          <el-button type="primary" @click="refreshList">
+            <Icon icon="ep:refresh" class="mr-1" /> 刷新
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <!-- 列表 -->
+    <ContentWrap>
+      <div class="table-header">
+        <div class="table-title">
+          <Icon icon="ep:document" class="mr-2" />
+          订单列表
+        </div>
+        <div class="table-actions">
+          <el-button type="success" @click="handleExport" :loading="exportLoading">
+            <Icon icon="ep:download" class="mr-1" /> 导出
+          </el-button>
+          <el-button type="primary" @click="refreshList">
+            <Icon icon="ep:refresh" class="mr-1" /> 刷新
+          </el-button>
+        </div>
+      </div>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" class="notice-table">
       <el-table-column label="序号" align="center" width="80">
         <template #default="{ $index }">
           {{ (queryParams.pageNo - 1) * queryParams.pageSize + $index + 1 }}
@@ -144,10 +159,11 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-  </ContentWrap>
+    </ContentWrap>
 
-  <!-- 表单弹窗：添加/修改 -->
-  <OrderForm ref="formRef" @success="getList" />
+    <!-- 表单弹窗：添加/修改 -->
+    <OrderForm ref="formRef" @success="getList" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -235,6 +251,11 @@ const resetQuery = () => {
   handleQuery()
 }
 
+/** 刷新列表 */
+const refreshList = () => {
+  getList()
+}
+
 /** 添加/修改操作 */
 const formRef = ref()
 const openForm = (type: string, id?: number) => {
@@ -273,4 +294,135 @@ const handleExport = async () => {
 onMounted(() => {
   getList()
 })
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.doctor-notice-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* 订单页采用沉稳蓝绿渐变，强调清晰与可信赖 */
+.page-header {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: linear-gradient(135deg, #0f62fe 0%, #11998e 100%);
+  border-radius: 12px;
+  color: white;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+
+  .page-title {
+    margin: 0 0 8px 0;
+    font-size: 24px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+  }
+
+  .page-description {
+    margin: 0;
+    opacity: 0.9;
+    font-size: 14px;
+  }
+}
+
+.search-form {
+  .el-form-item {
+    margin-bottom: 16px;
+  }
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 16px 0;
+  border-bottom: 1px solid #ebeef5;
+
+  .table-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    display: flex;
+    align-items: center;
+  }
+
+  .table-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+.notice-table {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+
+  :deep(.el-table__header) {
+    background-color: #fafafa;
+  }
+
+  :deep(.el-table__row) {
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #f5f7fa !important;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .doctor-notice-container {
+    padding: 10px;
+  }
+
+  .page-header {
+    padding: 16px;
+
+    .page-title {
+      font-size: 20px;
+    }
+  }
+
+  .table-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+
+    .table-actions {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  .search-form {
+    .el-form-item {
+      margin-bottom: 12px;
+    }
+  }
+}
+
+::deep(.el-button) {
+  border-radius: 6px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+::deep(.el-pagination) {
+  margin-top: 20px;
+  justify-content: center;
+  padding: 16px 0;
+  border-top: 1px solid #ebeef5;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/vip/VIP_device/index.vue b/src/views/vip/VIP_device/index.vue
index 60965f936..4e87c82fe 100644
--- a/src/views/vip/VIP_device/index.vue
+++ b/src/views/vip/VIP_device/index.vue
@@ -1,13 +1,23 @@
 <template>
-  <ContentWrap>
-    <!-- 搜索工作栏 -->
-    <el-form
-      class="-mb-15px"
-      :model="queryParams"
-      ref="queryFormRef"
-      :inline="true"
-      label-width="68px"
-    >
+  <div class="doctor-notice-container">
+    <!-- 页面标题 -->
+    <div class="page-header">
+      <h2 class="page-title">
+        <Icon icon="ep:cpu" class="mr-2" />
+        VIP 设备管理
+      </h2>
+      <p class="page-description">查看与管理设备的会员状态与到期信息</p>
+    </div>
+
+    <ContentWrap>
+      <!-- 搜索工作栏 -->
+      <el-form
+        class="search-form"
+        :model="queryParams"
+        ref="queryFormRef"
+        :inline="true"
+        label-width="80px"
+      >
     <el-form-item label="设备类型" prop="type">
           <el-select
             v-model="queryParams.devicetype"
@@ -35,24 +45,38 @@
           <el-option label="锁定" value="2" />
         </el-select>
       </el-form-item>
-      <el-form-item>
-        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
-        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="success"
-          plain
-          @click="handleExport"
-          :loading="exportLoading"
-        >
-          <Icon icon="ep:download" class="mr-5px" /> 导出
-        </el-button>
-      </el-form-item>
-    </el-form>
-  </ContentWrap>
+        <el-form-item>
+          <el-button type="primary" @click="handleQuery"><Icon icon="ep:search" class="mr-1" /> 搜索</el-button>
+          <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-1" /> 重置</el-button>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="success" @click="handleExport" :loading="exportLoading">
+            <Icon icon="ep:download" class="mr-1" /> 导出
+          </el-button>
+          <el-button type="primary" @click="refreshList">
+            <Icon icon="ep:refresh" class="mr-1" /> 刷新
+          </el-button>
+        </el-form-item>
+      </el-form>
+    </ContentWrap>
 
-  <!-- 列表 -->
-  <ContentWrap>
-    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
+    <!-- 列表 -->
+    <ContentWrap>
+      <div class="table-header">
+        <div class="table-title">
+          <Icon icon="ep:cpu" class="mr-2" />
+          设备列表
+        </div>
+        <div class="table-actions">
+          <el-button type="success" @click="handleExport" :loading="exportLoading">
+            <Icon icon="ep:download" class="mr-1" /> 导出
+          </el-button>
+          <el-button type="primary" @click="refreshList">
+            <Icon icon="ep:refresh" class="mr-1" /> 刷新
+          </el-button>
+        </div>
+      </div>
+      <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true" class="notice-table">
       <el-table-column label="序号" align="center" width="80"> 
         <template #default="{ $index }">
           {{ (queryParams.pageNo - 1) * queryParams.pageSize + $index + 1 }}
@@ -137,9 +161,9 @@
       v-model:limit="queryParams.pageSize"
       @pagination="getList"
     />
-  </ContentWrap>
+    </ContentWrap>
 
-  <!-- 开通/续费会员弹窗（设备） -->
+    <!-- 开通/续费会员弹窗（设备） -->
   <BecomeVipDialog
     v-model:visible="becomeVipDialogVisible"
     :member="currentDevice"
@@ -155,8 +179,9 @@
     @success="handleDeviceVipSuccess"
   />
 
-  <!-- 表单弹窗：添加/修改 -->
-  <DeviceForm ref="formRef" @success="getList" />
+    <!-- 表单弹窗：添加/修改 -->
+    <DeviceForm ref="formRef" @success="getList" />
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -283,6 +308,11 @@ const resetQuery = () => {
   handleQuery()
 }
 
+/** 刷新列表 */
+const refreshList = () => {
+  getList()
+}
+
 /** 表单引用（保留占位避免模板报错） */
 const formRef = ref()
 
@@ -339,4 +369,135 @@ const handleDeviceVipSuccess = () => {
   renewVipDialogVisible.value = false
   getList()
 }
-</script>
\ No newline at end of file
+</script>
+
+<style lang="scss" scoped>
+.doctor-notice-container {
+  padding: 20px;
+  background-color: #f5f7fa;
+  height: 100%;
+  overflow-y: auto;
+}
+
+/* VIP 页面采用皇家金到暖紫的主题，更契合会员感 */
+.page-header {
+  margin-bottom: 20px;
+  padding: 20px;
+  background: linear-gradient(135deg, #faad14 0%, #9254de 100%);
+  border-radius: 12px;
+  color: white;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+
+  .page-title {
+    margin: 0 0 8px 0;
+    font-size: 24px;
+    font-weight: 600;
+    display: flex;
+    align-items: center;
+  }
+
+  .page-description {
+    margin: 0;
+    opacity: 0.9;
+    font-size: 14px;
+  }
+}
+
+.search-form {
+  .el-form-item {
+    margin-bottom: 16px;
+  }
+}
+
+.table-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 16px;
+  padding: 16px 0;
+  border-bottom: 1px solid #ebeef5;
+
+  .table-title {
+    font-size: 16px;
+    font-weight: 600;
+    color: #303133;
+    display: flex;
+    align-items: center;
+  }
+
+  .table-actions {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+  }
+}
+
+.notice-table {
+  border-radius: 8px;
+  overflow: hidden;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+
+  :deep(.el-table__header) {
+    background-color: #fafafa;
+  }
+
+  :deep(.el-table__row) {
+    transition: all 0.3s ease;
+
+    &:hover {
+      background-color: #f5f7fa !important;
+      transform: translateY(-1px);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .doctor-notice-container {
+    padding: 10px;
+  }
+
+  .page-header {
+    padding: 16px;
+
+    .page-title {
+      font-size: 20px;
+    }
+  }
+
+  .table-header {
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-start;
+
+    .table-actions {
+      width: 100%;
+      justify-content: flex-end;
+    }
+  }
+
+  .search-form {
+    .el-form-item {
+      margin-bottom: 12px;
+    }
+  }
+}
+
+::deep(.el-button) {
+  border-radius: 6px;
+  font-weight: 500;
+  transition: all 0.3s ease;
+
+  &:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  }
+}
+
+::deep(.el-pagination) {
+  margin-top: 20px;
+  justify-content: center;
+  padding: 16px 0;
+  border-top: 1px solid #ebeef5;
+}
+</style>
\ No newline at end of file