diff --git a/src/views/compilation/handbook/index.vue b/src/views/compilation/handbook/index.vue
index 5de7487..6f779e0 100644
--- a/src/views/compilation/handbook/index.vue
+++ b/src/views/compilation/handbook/index.vue
@@ -1,237 +1,1094 @@
 <template>
-    <div>
-        <!-- 项目手册管理 -->
-        <!-- 表单查询项 -->
-        <div v-if="!previewMode" class="headerbox">
-            <el-form size="small" :inline="true" label-width="200">
-                <el-row>
-                    <el-col :span="5">
-                        <el-form-item label="文件标题" style="width: 100%;">
-                            <el-input v-model="queryParams.title" placeholder="请输入模板标题" clearable />
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="5">
-                        <el-form-item label="发布时间">
-                            <el-date-picker v-model="queryParams.startTime" type="date" placeholder="选择日期"
-                                style="width: 100%;"></el-date-picker>
-                        </el-form-item>
-                    </el-col>
-                    <el-col :span="8">
-                        <el-form-item>
-                            <el-button type="primary" icon="el-icon-search" size="mini"
-                                @click="handleQuery">查询</el-button>
-                            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-                        </el-form-item>
-                    </el-col>
-                </el-row>
-            </el-form>
+  <div>
+    <!-- 项目手册管理 -->
+    <!-- 表单查询项 -->
+    <div v-if="!previewMode" class="headerbox">
+      <div class="search-form">
+        <div class="form-item">
+          <span class="label">手册名称</span>
+          <el-input
+            v-model="queryParams.title"
+            placeholder="请输入模板标题"
+            clearable
+            class="search-input"
+          />
         </div>
+        <div class="form-item">
+          <span class="label">创建时间</span>
+          <el-date-picker
+            v-model="queryParams.startTime"
+            type="date"
+            placeholder="选择日期"
+            class="search-date"
+          ></el-date-picker>
+        </div>
+        <div class="form-item btn-group">
+          <el-button
+            type="primary"
+            icon="el-icon-search"
+            @click="handleQuery"
+            >查询</el-button>
+          <el-button icon="el-icon-refresh" @click="resetQuery"
+            >重置</el-button>
+        </div>
+      </div>
+    </div>
+
+    <!-- 表格内容区 -->
+    <div v-if="!previewMode" class="tablebox">
+      <div class="tablebtntwo">
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          >项目手册导出</el-button
+        >
+        <el-button
+          type="primary"
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          >新增</el-button
+        >
+      </div>
+      <el-table
+        v-loading="loading"
+        :data="postList"
+        @selection-change="handleSelectionChange"
+      >
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="序号" align="center" prop="id" />
+        <el-table-column label="手册名称" align="center" prop="title" />
+        <!-- <el-table-column label="发布单位" align="center" prop="unit" /> -->
+        <!-- <el-table-column label="发布人" align="center" prop="author" /> -->
+        <el-table-column label="创建时间" align="center" prop="createTime" />
+        <el-table-column label="操作" align="center">
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              style="color: gray"
+              @click="handlePreview(scope.row)"
+              >预览</el-button
+            >
+            <el-button
+              size="mini"
+              type="text"
+              style="color: #67c23a"
+              @click="handleEdit(scope.row)"
+              >编辑</el-button
+            >
+            <el-button
+              size="mini"
+              type="text"
+              style="color: #f56c6c"
+              @click="handleDelete(scope.row)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+        v-show="total > 0"
+        :total="total"
+        :page.sync="queryParams.current"
+        :limit.sync="queryParams.size"
+        @pagination="getList"
+      />
+    </div>
+
+    <!-- DOCX预览区域 -->
+    <div v-if="previewMode" class="previewbox">
+      <div class="previewhead">
+        <h3>{{ previewData.title }}</h3>
+        <div class="headtwo">
+          <el-button size="mini" @click="previewMode = false">返回</el-button>
+        </div>
+      </div>
+      <div class="previewcontent">
+        <vue-office-docx
+          :src="docxFileData"
+          style="
+            width: 100%;
+            height: calc(100vh - 250px);
+            border: 1px solid #eee;
+          "
+          @rendered="renderedHandler"
+        />
+      </div>
+    </div>
+
+    <!-- 创建新手册弹框 -->
+    <el-dialog
+      title="创建新手册"
+      :visible.sync="addDialogVisible"
+      width="70%"
+      :close-on-click-modal="false"
+      :show-close="true"
+      :before-close="handleAddDialogClose"
+      class="handbook-dialog"
+    >
+      <div class="step-container">
+        <el-steps :active="activeStep" align-center finish-status="finish ">
+          <el-step title="封面设置"></el-step>
+          <el-step title="选择项目"></el-step>
+          <el-step title="封尾设计"></el-step>
+        </el-steps>
+      </div>
+
+      <!-- 步骤1：封面设置 -->
+      <div v-if="activeStep === 1" class="step-content">
+        <div class="cover-form">
+          <div class="form-row">
+            <div class="form-col">
+              <label class="form-label">手册名称</label>
+              <el-input v-model="coverForm.title" placeholder="请输入"></el-input>
+            </div>
+            <div class="form-col">
+              <label class="form-label">副标题</label>
+              <el-input v-model="coverForm.subtitle" placeholder="请输入"></el-input>
+            </div>
+          </div>
+          <div class="form-row">
+            <div class="form-col-full">
+              <label class="form-label">封面图片</label>
+              <div class="upload-area">
+                <img
+                  v-if="coverForm.imageUrl"
+                  :src="coverForm.imageUrl"
+                  class="preview-image"
+                  @click="triggerUpload"
+                />
+                <div v-else @click="triggerUpload" class="upload-box">
+                  <i class="el-icon-upload upload-icon"></i>
+                  <div class="upload-text">
+                    上传图片 或拖拽到此处
+                    <p class="upload-tip">PNG, JPG, GIF 最大 10MB</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-        <!-- 表格内容区 -->
-        <div v-if="!previewMode" class="tablebox">
-            <el-table v-loading="loading" :data="postList" @selection-change="handleSelectionChange">
-                <el-table-column type="selection" width="55" align="center" />
-                <el-table-column label="序号" align="center" prop="id" />
-                <el-table-column label="文件标题" align="center" prop="title" />
-                <el-table-column label="发布单位" align="center" prop="unit" />
-                <!-- <el-table-column label="发布人" align="center" prop="author" /> -->
-                <el-table-column label="发布时间" align="center" prop="createTime" />
-                <el-table-column label="操作" align="center">
-                    <template slot-scope="scope">
-                        <el-button size="mini" type="text" style="color: gray;"
-                            @click="handlePreview(scope.row)">预览</el-button>
-                    </template>
-                </el-table-column>
+      <!-- 步骤2：选择项目 -->
+      <div v-if="activeStep === 2" class="step-content project-step">
+        <div class="cover-form">
+            <div class="project-top">
+          <div class="search-container">
+            <div class="search-label">项目名称：</div>
+            <el-input
+              v-model="projectSearch"
+              placeholder="请输入"
+              class="search-input"
+            ></el-input>
+            <el-button type="primary" @click="searchProjects" class="search-btn">查询</el-button>
+            <el-button @click="resetProjectSearch" class="search-btn">重置</el-button>
+            <el-button type="primary" @click="confirmSelection" class="search-btn">确认勾选</el-button>
+          </div>
+          
+          <div class="project-table">
+            <el-table
+              ref="projectTable"
+              :data="projectList"
+              @selection-change="handleProjectSelectionChange"
+              @row-click="handleRowClick"
+              border
+            >
+              <el-table-column
+                type="selection"
+                width="55"
+                align="center"
+              ></el-table-column>
+              <el-table-column label="序号" width="60" align="center">
+                <template slot-scope="scope">{{ scope.$index + 1 }}</template>
+              </el-table-column>
+              <el-table-column
+                prop="name"
+                label="项目名称"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="status"
+                label="现状分类"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="company"
+                label="项目法人单位"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="buildTime"
+                label="项目建设起止时间"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="investment"
+                label="总投资额(万元)"
+                align="center"
+              ></el-table-column>
+              <el-table-column
+                prop="area"
+                label="总用地面积(平方米)"
+                align="center"
+              ></el-table-column>
             </el-table>
-            <pagination v-show="total > 0" :total="total" :page.sync="queryParams.current"
-                :limit.sync="queryParams.size" @pagination="getList" />
+            
+            <div class="pagination-box">
+              <pagination
+                v-show="projectTotal > 0"
+                :total="projectTotal"
+                :page.sync="projectParams.pageNum"
+                :limit.sync="projectParams.pageSize"
+                @pagination="handleProjectPagination"
+              />
+            </div>
+          </div>
         </div>
+          <div class="selected-projects-container" v-if="selectedProjects.length > 0">
+            <div class="selected-header">已选中项目</div>
+            <div class="selected-list">
+              <div 
+                v-for="(project, index) in selectedProjects" 
+                :key="index"
+                class="selected-item"
+                @click="removeSelectedProject(project)"
+              >
+                <div class="dot-indicator"></div>
+                <span class="project-name">{{ project.name }}</span>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
 
-        <!-- DOCX预览区域 -->
-        <div v-if="previewMode" class="previewbox">
-            <div class="previewhead">
-                <h3>{{ previewData.title }}</h3>
-                <div class="headtwo">
-                    <el-button size="mini" @click="previewMode = false">返回</el-button>
+      <!-- 步骤3：封尾设计 -->
+      <div v-if="activeStep === 3" class="step-content">
+        <div class="cover-form">
+          <div class="form-row">
+            <div class="form-col-full">
+              <label class="form-label">封尾图片</label>
+              <div class="upload-area">
+                <img
+                  v-if="endForm.imageUrl"
+                  :src="endForm.imageUrl"
+                  class="preview-image"
+                  @click="triggerEndUpload"
+                />
+                <div v-else @click="triggerEndUpload" class="upload-box">
+                  <i class="el-icon-upload upload-icon"></i>
+                  <div class="upload-text">
+                    上传图片 或拖拽到此处
+                    <p class="upload-tip">PNG, JPG, GIF 最大 10MB</p>
+                  </div>
                 </div>
+              </div>
             </div>
-            <div class="previewcontent">
-                <vue-office-docx :src="docxFileData"
-                    style="width: 100%; height: calc(100vh - 250px); border: 1px solid #eee;"
-                    @rendered="renderedHandler" />
+          </div>
+          <div class="form-row">
+            <div class="form-col">
+              <label class="form-label">副标题</label>
+              <el-input v-model="endForm.subtitle" placeholder="请输入" style="width: 60%;"></el-input>
             </div>
+          </div>
         </div>
-    </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="prevStep" v-if="activeStep > 1" size="small"
+          >上一步</el-button
+        >
+        <el-button
+          type="primary"
+          class="btn-next"
+          @click="nextStep"
+          v-if="activeStep < 3"
+          size="small"
+          >下一步</el-button
+        >
+        <el-button
+          type="primary"
+          class="btn-next"
+          @click="submitHandbook"
+          v-if="activeStep === 3"
+          size="small"
+          >生成手册</el-button
+        >
+      </div>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import VueOfficeDocx from '@vue-office/docx'
-import axios from 'axios'
+import VueOfficeDocx from "@vue-office/docx";
+import axios from "axios";
 
 export default {
-    components: {
-        'vue-office-docx': VueOfficeDocx
-    },
-    data() {
-        return {
-            // 查询参数
-            queryParams: {
-                current: 1,
-                size: 10,
-                title: undefined,
-                startTime: undefined
-            },
-            // 所有数据（模拟从后端获取）
-            allPostList: [
-                { id: 1, title: 'xxxx项目单体材料模板', unit: '经发委', author: '', createTime: '2024-08-20', fileUrl: 'docx/单体材料模板.docx' },
-            ],
-            // 表格显示的数据
-            postList: [],
-            // 加载状态
-            loading: false,
-            // 总条数
-            total: 0,
-            // 预览模式
-            previewMode: false,
-            // 预览数据
-            previewData: {},
-            // DOCX文件数据
-            docxFileData: null
+  components: {
+    "vue-office-docx": VueOfficeDocx,
+    Pagination: () => import("@/components/Pagination"),
+  },
+  data() {
+    return {
+      // 查询参数
+      queryParams: {
+        current: 1,
+        size: 10,
+        title: undefined,
+        startTime: undefined,
+      },
+      // 所有数据（模拟从后端获取）
+      allPostList: [
+        {
+          id: 1,
+          title: "xxxx项目单体材料模板",
+          unit: "经发委",
+          author: "",
+          createTime: "2024-08-20",
+          fileUrl: "docx/单体材料模板.docx",
+        },
+      ],
+      // 表格显示的数据
+      postList: [],
+      // 加载状态
+      loading: false,
+      // 总条数
+      total: 0,
+      // 预览模式
+      previewMode: false,
+      // 预览数据
+      previewData: {},
+      // DOCX文件数据
+      docxFileData: null,
+
+      // 新增手册弹框相关
+      addDialogVisible: false,
+      activeStep: 1,
+
+      // 封面表单
+      coverForm: {
+        title: "",
+        subtitle: "",
+        imageUrl: "",
+      },
+
+      // 项目选择相关
+      projectSearch: "",
+      projectList: [],
+      selectedProjects: [],
+      projectParams: {
+        pageNum: 1,
+        pageSize: 10,
+      },
+      projectTotal: 0,
+
+      // 封尾设计
+      endForm: {
+        imageUrl: "",
+        subtitle: "",
+      },
+    };
+  },
+  created() {
+    this.getList();
+  },
+  methods: {
+    // 获取表格数据
+    getList() {
+      this.loading = true;
+
+      // 根据查询条件过滤数据
+      let filteredData = this.allPostList.filter((item) => {
+        if (
+          this.queryParams.title &&
+          !item.title.includes(this.queryParams.title)
+        ) {
+          return false;
+        }
+        if (
+          this.queryParams.startTime &&
+          new Date(item.createTime) < new Date(this.queryParams.startTime)
+        ) {
+          return false;
         }
+        return true;
+      });
+
+      // 分页处理
+      const start = (this.queryParams.current - 1) * this.queryParams.size;
+      const end = start + this.queryParams.size;
+      this.postList = filteredData.slice(start, end);
+      this.total = filteredData.length;
+
+      this.loading = false;
     },
-    created() {
-        this.getList()
-    },
-    methods: {
-        // 获取表格数据
-        getList() {
-            this.loading = true;
-
-            // 根据查询条件过滤数据
-            let filteredData = this.allPostList.filter(item => {
-                if (this.queryParams.title && !item.title.includes(this.queryParams.title)) {
-                    return false;
-                }
-                if (this.queryParams.startTime && new Date(item.createTime) < new Date(this.queryParams.startTime)) {
-                    return false;
-                }
-                return true;
-            });
-
-            // 分页处理
-            const start = (this.queryParams.current - 1) * this.queryParams.size;
-            const end = start + this.queryParams.size;
-            this.postList = filteredData.slice(start, end);
-            this.total = filteredData.length;
-
-            this.loading = false;
-        },
-        // 查询
-        handleQuery() {
-            this.queryParams.current = 1;
-            this.getList();
-        },
-        // 重置查询
-        resetQuery() {
-            this.queryParams = {
-                current: 1,
-                size: 10,
-                title: undefined,
-                startTime: undefined
-            };
-            this.handleQuery();
-        },
-        // 表格选择变化
-        handleSelectionChange(selection) {
-            this.ids = selection.map(item => item.id)
-            this.single = selection.length !== 1
-            this.multiple = !selection.length
-        },
-        // 预览文档
-        handlePreview(row) {
-            this.previewMode = true
-            this.previewData = row
-            this.loadDocxFile(row.fileUrl)
-        },
-        // 加载DOCX文件
-        loadDocxFile(url) {
-            this.docxFileData = null
-            axios.get(url, { responseType: 'arraybuffer' })
-                .then(response => {
-                    this.docxFileData = response.data
-                })
-                .catch(error => {
-                    console.error('加载文档失败:', error)
-                    this.$message.error('文档加载失败')
-                })
-        },
-        // 文档渲染完成回调
-        renderedHandler() {
-            console.log('文档渲染完成')
+    // 查询
+    handleQuery() {
+      this.queryParams.current = 1;
+      this.getList();
+    },
+    // 重置查询
+    resetQuery() {
+      this.queryParams = {
+        current: 1,
+        size: 10,
+        title: undefined,
+        startTime: undefined,
+      };
+      this.handleQuery();
+    },
+    // 表格选择变化
+    handleSelectionChange(selection) {
+      this.ids = selection.map((item) => item.id);
+      this.single = selection.length !== 1;
+      this.multiple = !selection.length;
+    },
+    // 预览文档
+    handlePreview(row) {
+      this.previewMode = true;
+      this.previewData = row;
+      this.loadDocxFile(row.fileUrl);
+    },
+    // 加载DOCX文件
+    loadDocxFile(url) {
+      this.docxFileData = null;
+      axios
+        .get(url, { responseType: "arraybuffer" })
+        .then((response) => {
+          this.docxFileData = response.data;
+        })
+        .catch((error) => {
+          console.error("加载文档失败:", error);
+          this.$message.error("文档加载失败");
+        });
+    },
+    renderedHandler() {
+      console.log("文档渲染完成");
+    },
+    handleAdd() {
+      this.addDialogVisible = true;
+      this.activeStep = 1;
+      this.resetAddForm();
+      this.getProjectList();
+    },
+    handleAddDialogClose(done) {
+    //   this.$confirm("确认关闭？未保存的数据将会丢失", "提示", {
+    //     confirmButtonText: "确定",
+    //     cancelButtonText: "取消",
+    //     type: "warning",
+    //   })
+    //     .then(() => {
+          this.resetAddForm();
+          done();
+        // })
+        // .catch(() => {});
+    },
+    resetAddForm() {
+      this.coverForm = {
+        title: "",
+        subtitle: "",
+        imageUrl: "",
+      };
+      this.projectSearch = "";
+      this.selectedProjects = [];
+      this.endForm = {
+        imageUrl: "",
+        subtitle: "",
+      };
+    },
+    // 下一步
+    nextStep() {
+      if (this.activeStep === 1) {
+        // 可以添加表单验证
+        if (!this.coverForm.title) {
+          this.$message.warning("请输入手册名称");
+          return;
         }
-    }
-}
+      }
+      this.activeStep++;
+    },
+    // 上一步
+    prevStep() {
+      this.activeStep--;
+    },
+    // 上传前检查
+    beforeUpload(file) {
+      const isImage = file.type.indexOf("image/") !== -1;
+      const isLt10M = file.size / 1024 / 1024 < 10;
+
+      if (!isImage) {
+        this.$message.error("只能上传图片文件!");
+        return false;
+      }
+
+      if (!isLt10M) {
+        this.$message.error("图片大小不能超过 10MB!");
+        return false;
+      }
+
+      return true;
+    },
+    // 处理封尾上传
+    handleEndUpload(options) {
+      const file = options.file;
+      // 模拟上传过程
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        this.endForm.imageUrl = reader.result;
+      };
+    },
+    // 触发上传
+    triggerUpload() {
+      // 创建一个隐藏的文件输入
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/png, image/jpeg, image/gif";
+      input.onchange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          this.beforeUpload(file) && this.handleManualUpload(file);
+        }
+      };
+      input.click();
+    },
+    // 手动处理上传
+    handleManualUpload(file) {
+      const reader = new FileReader();
+      reader.readAsDataURL(file);
+      reader.onload = () => {
+        this.coverForm.imageUrl = reader.result;
+      };
+    },
+    // 触发封尾图片上传
+    triggerEndUpload() {
+      const input = document.createElement("input");
+      input.type = "file";
+      input.accept = "image/png, image/jpeg, image/gif";
+      input.onchange = (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          this.beforeUpload(file) && this.handleEndUpload({file});
+        }
+      };
+      input.click();
+    },
+    // 获取项目列表
+    getProjectList() {
+      // 模拟后端数据
+      setTimeout(() => {
+        this.projectList = [
+          {
+            id: 1,
+            name: "大众电脑生产制造基地",
+            status: "已建",
+            company: "大众电脑（苏州）有限公司",
+            buildTime: "2004.12-2006.12",
+            investment: 20000,
+            area: 38533.33,
+          },
+          {
+            id: 2,
+            name: "THI SIP高端装备工业港",
+            status: "已建",
+            company: "泰和医药（中国）有限公司",
+            buildTime: "2005.03-2006.05",
+            investment: 35000,
+            area: 9655.9,
+          },
+        ];
+        this.projectTotal = 2;
+      }, 500);
+    },
+    // 搜索项目
+    searchProjects() {
+      this.projectParams.pageNum = 1;
+      this.getProjectList();
+    },
+    // 重置项目搜索
+    resetProjectSearch() {
+      this.projectSearch = "";
+      this.projectParams.pageNum = 1;
+      this.getProjectList();
+    },
+    // 确认勾选项目
+    confirmSelection() {
+      if (this.selectedProjects.length === 0) {
+        this.$message.warning("请至少选择一个项目");
+        return;
+      }
+      this.$message.success(`已选择 ${this.selectedProjects.length} 个项目`);
+    },
+    // 处理项目选择变化
+    handleProjectSelectionChange(selection) {
+      console.log(selection);
+      this.selectedProjects = selection;
+    },
+    // 移除已选项目
+    removeSelectedProject(project) {
+      // 从已选列表中移除
+      this.selectedProjects = this.selectedProjects.filter(
+        (item) => item.id !== project.id
+      );
+      // 取消表格中的选中状态
+      this.$refs.projectTable.toggleRowSelection(
+        this.projectList.find((item) => item.id === project.id),
+        false
+      );
+    },
+    // 项目分页变化处理
+    handleProjectPagination() {
+      this.getProjectList();
+    },
+    
+    // 处理行点击
+    handleRowClick(row) {
+      // 切换选中状态
+      this.$refs.projectTable.toggleRowSelection(row);
+    },
+    
+    // 项目分页大小变化
+    handleProjectSizeChange(size) {
+      this.projectParams.pageSize = size;
+      this.getProjectList();
+    },
+    // 项目分页页码变化
+    handleProjectCurrentChange(page) {
+      this.projectParams.pageNum = page;
+      this.getProjectList();
+    },
+    // 提交生成手册
+    submitHandbook() {
+      if (this.selectedProjects.length === 0) {
+        this.$message.warning("请至少选择一个项目");
+        return;
+      }
+
+      // 模拟提交数据
+      const data = {
+        cover: this.coverForm,
+        projects: this.selectedProjects,
+        end: this.endForm,
+      };
+
+      console.log("提交的数据：", data);
+
+      // 模拟提交成功
+      setTimeout(() => {
+        this.$message.success("手册生成成功");
+        this.addDialogVisible = false;
+        this.getList();
+      }, 1000);
+    },
+    // 编辑按钮操作
+    handleEdit(row) {
+      // TODO: 实现编辑功能
+      this.$message.success("编辑功能待实现");
+    },
+    // 删除按钮操作
+    handleDelete(row) {
+      this.$confirm("是否确认删除该手册?", "警告", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          this.$message.success("删除成功");
+          this.getList();
+        })
+        .catch(() => {});
+    },
+  },
+};
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .headerbox {
-    background-color: #fff;
-    border-radius: .5rem;
-    padding: 1rem;
-    margin: .5rem;
-    border: 1px solid #eee;
+  background-color: #fff;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 0.5rem;
+  border: 1px solid #eee;
+}
+
+.search-form {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.form-item {
+  display: flex;
+  align-items: center;
+  margin-right: 20px;
+  margin-bottom: 10px;
+}
+
+.label {
+  font-size: 14px;
+  color: #606266;
+  margin-right: 10px;
+  white-space: nowrap;
+}
+
+.search-input, .search-date {
+  width: 220px;
+}
+
+.btn-group {
+  display: flex;
+  gap: 10px;
 }
 
 .tablebox {
-    background-color: #fff;
-    border-radius: .5rem;
-    padding: 1rem;
-    margin: .5rem;
-    border: 1px solid #eee;
+  background-color: #fff;
+  border-radius: 0.5rem;
+  padding: 1rem;
+  margin: 0.5rem;
+  border: 1px solid #eee;
 }
 
 .tablebtntwo {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 }
 
 .previewbox {
-    width: 99%;
-    margin-left: 0.5%;
-    height: 92rem;
-    margin-top: .3rem;
-    display: flex;
-    flex-direction: column;
-    padding: 1rem;
-    background-color: #fff;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+  width: 99%;
+  margin-left: 0.5%;
+  height: 92rem;
+  margin-top: 0.3rem;
+  display: flex;
+  flex-direction: column;
+  padding: 1rem;
+  background-color: #fff;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .previewhead {
-    width: 100%;
-    height: 2rem;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
+  width: 100%;
+  height: 2rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
 }
 
 .headtwo {
-    display: flex;
-    gap: .5rem;
+  display: flex;
+  gap: 0.5rem;
 }
 
 .previewinfo {
-    display: flex;
-    gap: 1rem;
-    justify-content: flex-start;
-    margin-top: 1rem;
+  display: flex;
+  gap: 1rem;
+  justify-content: flex-start;
+  margin-top: 1rem;
 }
 
 .previewcontent {
-    margin-top: 1rem;
-    width: 100%;
+  margin-top: 1rem;
+  width: 100%;
+}
+.handbook-dialog {
+    ::v-deep .el-dialog__header{
+        background-color: #1890ff;
+        .el-dialog__title{
+            color: #fff;
+        }
+    }
+    ::v-deep .el-dialog__headerbtn .el-dialog__close{
+        color: #fff;
+    }
+  //   ::v-deep .el-step__head.is-wait{
+  //     border: #1890ff;
+  //   }
+  ::v-deep .el-step__icon {
+    width: 15px;
+    height: 15px;
+    font-size: 0;
+    border-radius: 50%;
+    position: relative;
+    z-index: 2;
+    border: 2px solid rgb(255, 255, 255);
+    box-shadow: 0 0 0 2px rgba(136, 137, 137, 0.1);
+    // background-color: #1890ff!important;
+  }
+  ::v-deep {
+    .is-process {
+      color: #c0c4cc !important;
+      font-weight: normal !important;
+    //   ::-webkit-scrollbar-trackground-color: #1890ff !important;
+    .el-step__icon{
+        background: none!important;
+        background-color: #c0c4cc!important;
+    }
+    }
+    .is-finish .el-step__icon{
+        background: none!important;
+        background-color: #1890ff!important;
+    }
+    .is-wait .el-step__icon{
+        background: none!important;
+        background-color: #c0c4cc!important;
+    }
+  }
+}
+.form-label {
+  width: 70px;
+  text-align: right;
+  padding-right: 10px;
+  line-height: 32px;
+  color: #333;
+  font-size: 14px;
+}
+.el-input {
+  flex: 1;
+  max-width: 80%;
+}
+
+.upload-area {
+  flex: 1;
+}
+
+.upload-box {
+  width: 100%;
+  height: 120px;
+  border: 1px dashed #dcdfe6;
+  border-radius: 3px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.upload-box:hover {
+  border-color: #409eff;
+}
+
+.upload-icon {
+  font-size: 24px;
+  color: #8c939d;
+  margin-bottom: 5px;
+}
+
+.upload-text {
+  color: #606266;
+  font-size: 14px;
+  text-align: center;
+}
+
+.upload-tip {
+  font-size: 12px;
+  color: #909399;
+  margin-top: 5px;
+}
+
+.preview-image {
+  width: 100%;
+  max-height: 250px;
+  object-fit: contain;
+  border: 1px solid #dcdfe6;
+  border-radius: 3px;
+  cursor: pointer;
+}
+
+.handbook-dialog .el-dialog {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.handbook-dialog .el-button--primary {
+  background-color: #1890ff;
+  border-color: #1890ff;
+}
+
+.cover-form {
+  width: 100%;
+  max-width: 1200px;
+}
+.project-top{
+    border: 1px solid #1890ff;
+  padding: 15px 15px 0px 15px;
+  border-radius: 4px;
+  margin-bottom: 10px;
+}
+.form-row {
+  display: flex;
+  margin-bottom:60px;
+  justify-content: space-around;
+  @media (max-width: 768px) {
+    flex-direction: column;
+  }
+}
+
+.form-col {
+  flex: 1;
+  margin-right: 20px;
+  
+  &:last-child {
+    margin-right: 0;
+  }
+  
+  @media (max-width: 768px) {
+    margin-right: 0;
+    margin-bottom: 16px;
+  }
+}
+
+.form-col-full {
+  width: 100%;
+}
+
+.upload-area {
+  border: 1px dashed #d9d9d9;
+  border-radius: 6px;
+  overflow: hidden;
+  position: relative;
+  
+  &:hover {
+    border-color: #409EFF;
+  }
+}
+
+.upload-box {
+  height: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  background-color: #fafafa;
+}
+
+.upload-icon {
+  font-size: 28px;
+  color: #8c939d;
+  margin-bottom: 8px;
+}
+
+.upload-text {
+  font-size: 14px;
+  color: #606266;
+  text-align: center;
+}
+
+.upload-tip {
+  margin-top: 8px;
+  font-size: 12px;
+  color: #909399;
+}
+
+.preview-image {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.search-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  background-color: #fff;
+}
+
+.search-label {
+  font-size: 14px;
+  color: #606266;
+  margin-right: 8px;
+}
+
+.search-input {
+  width: 220px;
+  margin-right: 8px;
+}
+
+.search-btn {
+  margin-right: 8px;
+}
+
+.project-table {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.project-table ::v-deep .el-table__row {
+  cursor: pointer;
+}
+
+.project-table ::v-deep .el-table__row:hover {
+  background-color: #f5f7fa;
+}
+
+.pagination-box {
+  display: flex;
+  justify-content: right;
+  margin: 16px 0;
+}
+
+.selected-projects-container {
+  border: 1px solid #1890ff;
+  padding: 15px 15px 10px 15px;
+  border-radius: 4px;
+}
+
+.selected-header {
+  font-size: 15px;
+  font-weight: 500;
+  color: #333;
+  margin-bottom: 15px;
+}
+
+.selected-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.selected-item {
+  display: flex;
+  align-items: center;
+  padding: 8px 15px;
+  background-color: #F8F8F8;
+  border-radius: 4px;
+}
+
+.dot-indicator {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #409EFF;
+  margin-right: 10px;
+}
+
+.project-name {
+  flex: 1;
+  color: #333;
+}
+
+.remove-icon {
+  cursor: pointer;
+  color: #C0C4CC;
+  font-size: 16px;
+}
+
+.remove-icon:hover {
+  color: #F56C6C;
+}
+
+::v-deep .el-dialog__body {
+  padding: 20px 15px!important;
+}
+
+.step-content {
+  padding: 10px 10%;
+  min-height: 400px;
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/evalute/supervision/index.vue b/src/views/evalute/supervision/index.vue
index 08e79c7..5baa6de 100644
--- a/src/views/evalute/supervision/index.vue
+++ b/src/views/evalute/supervision/index.vue
@@ -4,10 +4,18 @@
     <div class="search-area">
       <el-form :model="searchForm" inline>
         <el-form-item label="提醒名称">
-          <el-input v-model="searchForm.rulesName" placeholder="请输入项目名称" clearable />
+          <el-input
+            v-model="searchForm.rulesName"
+            placeholder="请输入项目名称"
+            clearable
+          />
         </el-form-item>
         <el-form-item label="提醒类型">
-          <el-select v-model="searchForm.alertType" placeholder="全部" clearable>
+          <el-select
+            v-model="searchForm.alertType"
+            placeholder="全部"
+            clearable
+          >
             <el-option label="全部" value="" />
             <el-option label="申报任务即将结束" value="3" />
             <el-option label="项目即将建设完成" value="2" />
@@ -23,17 +31,36 @@
     </div>
     <div class="tablebox">
       <div class="operation-area">
-        <el-button type="primary" @click="handleAdd" icon="el-icon-circle-plus-outline">添加规则</el-button>
+        <el-button
+          type="primary"
+          @click="handleAdd"
+          icon="el-icon-circle-plus-outline"
+          >添加规则</el-button
+        >
       </div>
-      <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
+      <el-table
+        :data="tableData"
+        style="width: 100%"
+        @selection-change="handleSelectionChange"
+      >
         <el-table-column type="selection" align="center" />
         <el-table-column label="序号" width="80" align="center">
           <template slot-scope="scope">
             {{ scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column prop="rulesName" label="提醒名称" min-width="200" align="center" />
-        <el-table-column prop="alertType" label="提醒类型" min-width="150" align="center">
+        <el-table-column
+          prop="rulesName"
+          label="提醒名称"
+          min-width="200"
+          align="center"
+        />
+        <el-table-column
+          prop="alertType"
+          label="提醒类型"
+          min-width="150"
+          align="center"
+        >
           <template slot-scope="scope">
             <span v-if="scope.row.alertType === 1">全局自定义通知</span>
             <span v-if="scope.row.alertType === 2">项目即将结束(企业)</span>
@@ -41,20 +68,36 @@
             <span v-if="scope.row.alertType === 4">项目自定义通知</span>
           </template>
         </el-table-column>
-        <el-table-column prop="alertRecipients" label="提醒对象" min-width="120" align="center">
+        <el-table-column
+          prop="alertRecipients"
+          label="提醒对象"
+          min-width="120"
+          align="center"
+        >
           <template slot-scope="scope">
             <span v-if="scope.row.alertRecipients === 2">政务用户</span>
             <span v-if="scope.row.alertRecipients === 1">企业用户</span>
           </template>
         </el-table-column>
-        <el-table-column prop="alertManner" label="提醒方式" min-width="120" align="center">
+        <el-table-column
+          prop="alertManner"
+          label="提醒方式"
+          min-width="120"
+          align="center"
+        >
           <template slot-scope="scope">
             <span v-if="scope.row.alertManner == 1">定期提醒</span>
             <span v-if="scope.row.alertManner == 2">不定期提醒</span>
           </template>
         </el-table-column>
 
-        <el-table-column prop="alertTime" label="提醒时间" min-width="180" align="center" />
+        <el-table-column
+          prop="alertTime"
+          label="提醒时间"
+          min-width="180"
+          align="center"
+        />
+
         <!-- <el-table-column
           prop="createBy"
           label="创建人"
@@ -63,23 +106,55 @@
         /> -->
         <el-table-column label="操作" width="200" fixed="right" align="center">
           <template slot-scope="scope">
-            <el-button type="text" @click="handleDetail(scope.row)">详情</el-button>
-            <el-button type="text" @click="handleEdit(scope.row)" style="color: #67c23a">修改</el-button>
-            <el-button type="text" @click="handleDelete(scope.row)" style="color: red">删除</el-button>
+            <el-button type="text" @click="handleDetail(scope.row)"
+              >详情</el-button
+            >
+            <el-button
+              type="text"
+              @click="handleEdit(scope.row)"
+              style="color: #67c23a"
+              >修改</el-button
+            >
+            <el-button
+              type="text"
+              @click="handleDelete(scope.row)"
+              style="color: red"
+              >删除</el-button
+            >
           </template>
         </el-table-column>
       </el-table>
 
       <!-- 分页 -->
-      <pagination v-show="pagination.total > 0" :total="pagination.total" :page.sync="pagination.current"
-        :limit.sync="pagination.size" @pagination="handleSearch" />
+      <pagination
+        v-show="pagination.total > 0"
+        :total="pagination.total"
+        :page.sync="pagination.current"
+        :limit.sync="pagination.size"
+        @pagination="handleSearch"
+      />
     </div>
 
     <!-- 添加规则弹框 -->
-    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="600px" :before-close="handleClose">
-      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="120px" size="small">
+    <el-dialog
+      :title="dialogTitle"
+      :visible.sync="dialogVisible"
+      width="600px"
+      :before-close="handleClose"
+    >
+      <el-form
+        ref="ruleForm"
+        :model="ruleForm"
+        :rules="rules"
+        label-width="120px"
+        size="small"
+      >
         <el-form-item label="提醒规则标题" prop="rulesName">
-          <el-input v-model="ruleForm.rulesName" placeholder="请输入提醒规则标题" :disabled="isView" />
+          <el-input
+            v-model="ruleForm.rulesName"
+            placeholder="请输入提醒规则标题"
+            :disabled="isView"
+          />
         </el-form-item>
         <el-form-item label="提醒对象" prop="alertRecipients">
           <el-radio-group v-model="ruleForm.alertRecipients" :disabled="isView">
@@ -100,34 +175,57 @@
           </el-radio-group>
         </el-form-item>
         <el-form-item label="提醒时间" prop="alertTime" v-if="isReminder == 1">
-          <el-date-picker v-model="ruleForm.alertTime" type="datetime" placeholder="请选择提醒时间"
-            value-format="yyyy-MM-dd HH:mm:ss" :disabled="isView" />
+          <el-date-picker
+            v-model="ruleForm.alertTime"
+            type="datetime"
+            placeholder="请选择提醒时间"
+            value-format="yyyy-MM-dd HH:mm:ss"
+            :disabled="isView"
+          />
         </el-form-item>
         <el-form-item label="提醒内容" prop="alertType" required v-else>
           <el-radio-group v-model="ruleForm.alertType" :disabled="isView">
             <el-radio label="2">申报任务即将结束（企业）</el-radio>
             <el-radio label="3">项目即将建设完成（政府）</el-radio>
           </el-radio-group>
-          <el-form-item prop="reminderDays" class="reminder-days-item" :rules="[
-            { required: true, message: '请输入提醒天数', trigger: 'blur' },
-          ]">
+          <el-form-item
+            prop="reminderDays"
+            class="reminder-days-item"
+            :rules="[
+              { required: true, message: '请输入提醒天数', trigger: 'blur' },
+            ]"
+          >
             <div style="display: flex; align-items: center">
               <span style="color: #f56c6c; margin-right: 4px">*</span>
               <span>提前</span>
-              <el-input v-model="ruleForm.daysAdvance" type="number" :min="1" :max="30" size="small"
-                style="width: 80px; margin: 0 8px" :disabled="isView" />
+              <el-input
+                v-model="ruleForm.daysAdvance"
+                type="number"
+                :min="1"
+                :max="30"
+                size="small"
+                style="width: 80px; margin: 0 8px"
+                :disabled="isView"
+              />
               <span>天提醒</span>
             </div>
           </el-form-item>
         </el-form-item>
         <el-form-item label="提醒内容" prop="alertContent">
-          <el-input v-model="ruleForm.alertContent" type="textarea" :rows="4" placeholder="请输入提醒内容"
-            :disabled="isView" />
+          <el-input
+            v-model="ruleForm.alertContent"
+            type="textarea"
+            :rows="4"
+            placeholder="请输入提醒内容"
+            :disabled="isView"
+          />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button @click="cancelAdd">取 消</el-button>
-        <el-button v-if="!isView" type="primary" @click="submitForm('ruleForm')">确 定</el-button>
+        <el-button v-if="!isView" type="primary" @click="submitForm('ruleForm')"
+          >确 定</el-button
+        >
       </div>
     </el-dialog>
   </div>
@@ -225,7 +323,7 @@ export default {
         alertTime: "",
         alertContent: "",
         alertType: "1",
-        daysAdvance: ""
+        daysAdvance: "",
       };
 
       // 清除验证
@@ -243,13 +341,13 @@ export default {
       const params = {
         current: this.pagination.current,
         size: this.pagination.size,
-        rulesName: this.searchForm.rulesName || '',
-        alertType: this.searchForm.alertType || '',
+        rulesName: this.searchForm.rulesName || "",
+        alertType: this.searchForm.alertType || "",
       };
 
       // 移除空字符串的参数
-      Object.keys(params).forEach(key => {
-        if (params[key] === '') {
+      Object.keys(params).forEach((key) => {
+        if (params[key] === "") {
           delete params[key];
         }
       });
@@ -282,6 +380,7 @@ export default {
             alertType: res.data.alertType.toString(),
             daysAdvance: res.data.daysAdvance,
           };
+
           this.isView = true;
           this.dialogVisible = true;
           this.dialogTitle = "查看智能提醒规则";
@@ -308,7 +407,7 @@ export default {
         alertTime: "",
         alertContent: "",
         alertType: "1",
-        daysAdvance: "" // 确保这个字段也被重置
+        daysAdvance: "", // 确保这个字段也被重置
       };
 
       // 清除验证
@@ -374,7 +473,7 @@ export default {
             }
           });
         })
-        .catch(() => { });
+        .catch(() => {});
     },
     // 取消按钮
     cancelAdd() {
@@ -526,7 +625,7 @@ export default {
     .el-button {
       padding: 9px 20px;
 
-      &+.el-button {
+      & + .el-button {
         margin-left: 10px;
       }
     }