diff --git a/src/assets/images/a14.png b/src/assets/images/a14.png
new file mode 100644
index 0000000..5d6499c
Binary files /dev/null and b/src/assets/images/a14.png differ
diff --git a/src/components/Table/src/BasicTable.vue b/src/components/Table/src/BasicTable.vue
index 12380db..4dd1dc8 100644
--- a/src/components/Table/src/BasicTable.vue
+++ b/src/components/Table/src/BasicTable.vue
@@ -501,10 +501,10 @@
       padding: 10px;
 
       .ant-form {
-        padding: 12px 10px 6px 10px;
+        padding: 22px 10px 6px 10px;
         margin-bottom: 8px;
         background-color: @component-background;
-        border-radius: 2px;
+        border-radius: 8px;
       }
     }
 
diff --git a/src/views/services/serviceDirective/ConfigServiceDirective.api.ts b/src/views/services/serviceDirective/ConfigServiceDirective.api.ts
index ed1e4fd..9afa076 100644
--- a/src/views/services/serviceDirective/ConfigServiceDirective.api.ts
+++ b/src/views/services/serviceDirective/ConfigServiceDirective.api.ts
@@ -12,6 +12,8 @@ enum Api {
   importExcel = '/services/serviceDirective/configServiceDirective/importExcel',
   exportXls = '/services/serviceDirective/configServiceDirective/exportXls',
   async = '/services/serviceDirective/configServiceDirective/async',
+  departList = '/sys/sysDepart/list',
+
 }
 
 /**
@@ -30,6 +32,7 @@ export const getImportUrl = Api.importExcel;
  * @param params
  */
 export const list = (params) => defHttp.get({ url: Api.list, params });
+export const departList = (params) => defHttp.get({ url: Api.departList, params });
 
 /**
  * 删除单个
diff --git a/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api.ts b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api.ts
new file mode 100644
index 0000000..f768be0
--- /dev/null
+++ b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.api.ts
@@ -0,0 +1,14 @@
+import { defHttp } from '/@/utils/http/axios';
+import { useMessage } from "/@/hooks/web/useMessage";
+
+const { createConfirm } = useMessage();
+
+enum Api {
+  list = '/services/serviceDirective/configServiceDirective/list',
+}
+
+/**
+ * 列表接口
+ * @param params
+ */
+export const list = (params) => defHttp.get({ url: Api.list, params });
\ No newline at end of file
diff --git a/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.data.ts b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.data.ts
new file mode 100644
index 0000000..ce862f7
--- /dev/null
+++ b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirective.data.ts
@@ -0,0 +1,138 @@
+import { BasicColumn } from '/@/components/Table';
+//列表数据
+export const columns: BasicColumn[] = [
+  {
+    title: '分类标签',
+    align: 'center',
+    dataIndex: 'instructionTagId_dictText',
+    width: 100,
+    customCell: (record, index, column) => {
+      if (record.instructionRowSpan != null) {
+        return { rowSpan: record.instructionRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务类别',
+    align: 'center',
+    dataIndex: 'categoryId_dictText',
+    customCell: (record, index, column) => {
+      if (record.categoryRowSpan != null) {
+        return { rowSpan: record.categoryRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务类型',
+    align: 'center',
+    dataIndex: 'typeId_dictText',
+    customCell: (record, index, column) => {
+      if (record.typeRowSpan != null) {
+        return { rowSpan: record.typeRowSpan };
+      }
+    },
+  },
+  {
+    title: '服务指令',
+    align: 'center',
+    dataIndex: 'directiveName',
+  },
+  {
+    title: '体型标签',
+    align: 'center',
+    dataIndex: 'bodyTagList',
+    width: 150,
+    ellipsis: false,
+    defaultHidden: true,
+    // format(text, record, index) {
+    //   if (!!text) {
+    //     return text.map((item) => item.tagName).join('、');
+    //   } else {
+    //     return '-';
+    //   }
+    // },
+  },
+  {
+    title: '情绪标签',
+    align: 'center',
+    dataIndex: 'emotionTagList',
+    width: 150,
+    ellipsis: false,
+    defaultHidden: true,
+    // format(text, record, index) {
+    //   if (!!text) {
+    //     return text.map((item) => item.tagName).join('、');
+    //   } else {
+    //     return '-';
+    //   }
+    // },
+  },
+  {
+    title: '收费价格',
+    align: 'center',
+    dataIndex: 'tollPrice',
+    width: 100,
+    defaultHidden: true,
+  },
+  {
+    title: '提成价格',
+    align: 'center',
+    dataIndex: 'comPrice',
+    defaultHidden: true,
+  },
+  {
+    title: '医保报销',
+    align: 'center',
+    dataIndex: 'izReimbursement_dictText',
+    width: 100,
+    defaultHidden: true,
+  },
+  {
+    title: '机构优惠',
+    align: 'center',
+    dataIndex: 'izPreferential_dictText',
+    width: 100,
+    defaultHidden: true,
+  },
+  {
+    title: '周期类型',
+    align: 'center',
+    dataIndex: 'cycleType_dictText',
+  },
+  {
+    title: '服务时长（分钟）',
+    align: 'center',
+    dataIndex: 'serviceDuration',
+    width: 135,
+  },
+  {
+    title: '是否启用',
+    align: 'center',
+    dataIndex: 'izEnabled_dictText',
+    width: 100,
+  },
+];
+
+// 高级查询数据
+export const superQuerySchema = {
+  categoryId: { title: '服务类别', order: 0, view: 'list', type: 'string', dictCode: '' },
+  typeId: { title: '服务类型', order: 1, view: 'list', type: 'string', dictCode: '' },
+  instructionTagId: { title: '分类标签', order: 2, view: 'list', type: 'string', dictCode: 'instruction_tag' },
+  directiveName: { title: '服务指令', order: 3, view: 'text', type: 'string' },
+  tollPrice: { title: '收费价格', order: 4, view: 'number', type: 'number' },
+  comPrice: { title: '提成价格', order: 5, view: 'number', type: 'number' },
+  izReimbursement: { title: '医保报销', order: 6, view: 'radio', type: 'string', dictCode: '' },
+  izPreferential: { title: '机构优惠', order: 7, view: 'radio', type: 'string', dictCode: '' },
+  chargingFrequency: { title: '收费频次', order: 8, view: 'list', type: 'string', dictCode: '' },
+  cycleType: { title: '周期类型', order: 9, view: 'list', type: 'string', dictCode: '' },
+  sort: { title: '排序', order: 10, view: 'number', type: 'number' },
+  serviceContent: { title: '服务说明', order: 11, view: 'textarea', type: 'string' },
+  serviceDuration: { title: '服务时长（分钟）', order: 12, view: 'text', type: 'string' },
+  izEnabled: { title: '是否启用', order: 13, view: 'radio', type: 'string', dictCode: '' },
+  createBy: { title: '创建人', order: 14, view: 'text', type: 'string' },
+  createTime: { title: '创建日期', order: 15, view: 'datetime', type: 'string' },
+  updateBy: { title: '更新人', order: 16, view: 'text', type: 'string' },
+  updateTime: { title: '更新日期', order: 17, view: 'datetime', type: 'string' },
+  mp3File: { title: '语音文件', order: 18, view: 'file', type: 'string' },
+  mp4File: { title: '视频文件', order: 19, view: 'file', type: 'string' },
+};
diff --git a/src/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveList.vue b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveList.vue
new file mode 100644
index 0000000..f366403
--- /dev/null
+++ b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveList.vue
@@ -0,0 +1,221 @@
+<template>
+  <div class="p-2">
+    <!--查询区域-->
+    <div class="jeecg-basic-table-form-container">
+      <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol"
+        :wrapper-col="wrapperCol">
+        <a-row :gutter="24">
+          <!-- <a-col :lg="6">
+            <a-form-item name="instructionTagId">
+              <template #label><span title="分类标签">分类标签</span></template>
+              <j-dict-select-tag v-model:value="queryParam.instructionTagId" dictCode="instruction_tag"
+                :ignoreDisabled="true" placeholder="请选分类标签" allowClear />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="categoryId">
+              <template #label><span title="服务类别">服务类别</span></template>
+              <j-dict-select-tag type="list" v-model:value="queryParam.categoryId"
+                :dictCode="`nu_config_service_category,category_name,id,del_flag = 0 order by sort asc`"
+                :ignoreDisabled="true" placeholder="请选择服务类别" allow-clear />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="typeId">
+              <template #label><span title="服务类型">服务类型</span></template>
+              <j-dict-select-tag type="list" v-model:value="queryParam.typeId"
+                :dictCode="`nu_config_service_type,type_name,id,del_flag = 0 and category_id = ${queryParam.categoryId || -1} order by sort asc`"
+                placeholder="请选择服务类型" :ignoreDisabled="true" allowClear />
+            </a-form-item>
+          </a-col> -->
+          <a-col :lg="6">
+            <a-form-item name="directiveName">
+              <template #label><span title="服务指令">服务指令</span></template>
+              <JInput v-model:value="queryParam.directiveName" placeholder="请输入服务指令名称" allowClear />
+            </a-form-item>
+          </a-col>
+          <!-- <a-col :lg="6">
+            <a-form-item name="bodyTags">
+              <template #label><span title="体型标签">体型标签</span></template>
+              <j-dict-select-tag type='list' v-model:value="queryParam.bodyTags"
+                :dictCode="`nu_config_body_tag,tag_name,id,del_flag = '0' order by sort asc`" :ignoreDisabled="true"
+                placeholder="请选择体型标签" allowClear />
+            </a-form-item>
+          </a-col>
+          <a-col :lg="6">
+            <a-form-item name="emotionTags">
+              <template #label><span title="情绪标签">情绪标签</span></template>
+              <j-dict-select-tag type="list" v-model:value="queryParam.emotionTags"
+                :dictCode="`nu_config_emotion_tag,tag_name,id,del_flag = '0' order by sort asc`" :ignoreDisabled="true"
+                placeholder="请选择情绪标签" allowClear />
+            </a-form-item>
+          </a-col> -->
+          <a-col :lg="6">
+            <a-form-item name="izEnabled">
+              <template #label><span title="是否启用">是否启用</span></template>
+              <j-dict-select-tag type='list' v-model:value="queryParam.izEnabled" dictCode="iz_enabled"
+                :ignoreDisabled="true" placeholder="请选择是否启用" allowClear />
+            </a-form-item>
+          </a-col>
+          <a-col :xl="6" :lg="7" :md="8" :sm="24">
+            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
+              <a-col :lg="6">
+                <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset"
+                  style="margin-left: 8px">重置</a-button>
+              </a-col>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+    <!--引用表格-->
+    <BasicTable @register="registerTable">
+      <!--插槽:table标题-->
+      <template #tableTitle>
+      </template>
+      <template v-slot:bodyCell="{ column, record, index, text }">
+        <template v-if="column.dataIndex === 'bodyTagList'">
+          <span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
+            item.tagName).join('、')}}</span>
+        </template>
+        <template v-if="column.dataIndex === 'emotionTagList'">
+          <span :title="text.map((item) => item.tagName).join('、')">{{text.map((item) =>
+            item.tagName).join('、')}}</span>
+        </template>
+      </template>
+    </BasicTable>
+  </div>
+</template>
+
+<script lang="ts" name="serviceDirective-configServiceDirective" setup>
+import { ref, reactive, onMounted } from 'vue';
+import { BasicTable, TableAction } from '/@/components/Table';
+import { useListPage } from '/@/hooks/system/useListPage';
+import { columns, superQuerySchema } from './ConfigServiceDirective.data';
+import { list} from './ConfigServiceDirective.api';
+import { useUserStore } from '/@/store/modules/user';
+import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
+import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
+import { cloneDeep } from "lodash-es";
+import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
+
+const formRef = ref();
+const queryParam = reactive<any>({});
+const toggleSearchStatus = ref<boolean>(false);
+const registerModal = ref();
+const userStore = useUserStore();
+//注册table数据
+const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
+  tableProps: {
+    title: '服务指令',
+    api: list,
+    columns,
+    canResize: false,
+    useSearchForm: false,
+    showIndexColumn: true,
+    showActionColumn: false,
+    immediate: false,
+    pagination: {
+      current: 1,
+      pageSize: 10,
+      pageSizeOptions: ['10', '20', '50', '100'],
+    },
+    beforeFetch: async (params) => {
+      return Object.assign(params, queryParam);
+    },
+    actionColumn: {
+      width: 160,
+      fixed: 'right',
+    },
+  },
+});
+const [registerTable, { reload, collapseAll, updateTableDataRecord, findTableDataRecord, getDataSource }, { rowSelection, selectedRowKeys }] = tableContext;
+const labelCol = reactive({
+  xs: 24,
+  sm: 6,
+  xl: 6,
+  xxl: 6
+});
+const wrapperCol = reactive({
+  xs: 24,
+  sm: 18,
+});
+
+
+/**
+ * 查询
+ */
+function searchQuery() {
+  reload();
+}
+
+/**
+ * 重置
+ */
+function searchReset() {
+  formRef.value.resetFields();
+  selectedRowKeys.value = [];
+  //刷新数据
+  reload();
+}
+
+ 
+
+function init(record){
+console.log("🚀 ~ init ~ record:", record)
+queryParam.dataSourceCode = record.orgCode;
+console.log("🚀 ~ init ~ queryParam:", queryParam)
+reload();
+}
+
+  defineExpose({
+    init,
+  });
+</script>
+
+<style lang="less" scoped>
+.jeecg-basic-table-form-container {
+  padding: 0;
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .query-group-cust {
+    min-width: 100px !important;
+  }
+
+  .query-group-split-cust {
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+
+  .ant-form-item:not(.ant-form-item-with-help) {
+    margin-bottom: 16px;
+    height: 32px;
+  }
+
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+}
+
+audio::-webkit-media-controls-timeline {
+  display: none;
+}
+
+audio::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display {
+  display: none;
+}
+
+.btnPrivate {
+  height: 34px;
+  margin-left: 4px;
+}
+</style>
diff --git a/src/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveListModal.vue b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveListModal.vue
new file mode 100644
index 0000000..73b821f
--- /dev/null
+++ b/src/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveListModal.vue
@@ -0,0 +1,63 @@
+<template>
+  <j-modal :title="title" width="70vw" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭" :maskClosable="false">
+    <ConfigServiceDirectiveList ref="registerForm"  v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></ConfigServiceDirectiveList>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose , defineProps} from 'vue';
+  import ConfigServiceDirectiveList from './ConfigServiceDirectiveList.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const props = defineProps({
+    sysUrlValue: { type: String, default: '' },
+  });
+  const title = ref<string>('');
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function init(record) {
+    title.value = '详情';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.init(record);
+    });
+  }
+  
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>
diff --git a/src/views/synchronization/directive/syncList.vue b/src/views/synchronization/directive/syncList.vue
new file mode 100644
index 0000000..20fb398
--- /dev/null
+++ b/src/views/synchronization/directive/syncList.vue
@@ -0,0 +1,214 @@
+<template>
+    <div class="p-2">
+        <!--查询区域-->
+        <div class="jeecg-basic-table-form-container">
+            <a-form ref="formRef" @keyup.enter.native="searchQuery" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
+                <a-row :gutter="24">
+                    <a-col :lg="6">
+                        <a-form-item name="title">
+                            <template #label><span title="机构名称">机构名称</span></template>
+                            <a-input placeholder="请输入机构名称" v-model:value="queryParam.title" allow-clear ></a-input>
+                        </a-form-item>
+                    </a-col>
+                    <a-col :lg="6" >
+                        <a-button type="primary" preIcon="ant-design:search-outlined" @click="searchQuery">查询</a-button>
+                        <a-button type="primary" preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
+                    </a-col>
+                    <a-col :lg="12" style="text-align: right;">
+                        <a-button type="primary" preIcon="ant-design:cloud-sync-outlined" @click="handleJingxiang">镜像</a-button>
+                    </a-col>
+                </a-row>
+            </a-form>
+        </div>
+        
+        <a-row>
+            <a-col v-for="item in orgTableList.records" :key="item.id"  :xs="24" :sm="24" :md="12" :lg="12" :xl="8" :xxl="6" style="padding: 8px;">
+                <a-card style="width: 100%;border-radius: 8px;" :headStyle="{ height: '60px', padding: '0 24px' }"  :bodyStyle="{ padding: '24px 24px 4px 24px' }">
+                    <template #title>
+                        <a-row style="font-weight: normal;">
+                            <a-col :span="22" style="font-size: 14px;padding-top: 4px;">
+                                <div><span style="font-weight: bold;">{{item.departName}}</span></div>
+                            </a-col>
+                            <a-col :span="2" style="text-align: center;padding-top: 4px;">
+                                <div class="zxClass">{{item.orgCode}}</div>
+                            </a-col>
+                        </a-row>
+                    </template>
+                        <p>加盟时间：{{item.operationStartTime.substring(0,10)}}</p>
+                        <p>机构负责人：{{item.createBy}}</p>
+                        <p>负责人电话：{{item.mobile}}</p>
+                        <p class="ellipsis-one-lines" :title="item.address">机构地址：{{item.address}}</p>
+                    <a-divider  />
+                    <p style="text-align:center;">
+                    <span style="display:inline-block;cursor: pointer;" @click="handleDetail(item)">
+                        <span class="tbClass"><img src="../../../assets/images/a14.png" style="width:20px;" /></span><br/>
+                        <span class="antTitle">详情</span>
+                    </span>
+                    </p>
+                </a-card>
+            </a-col>
+            <a-col v-if="orgTableList.total==0" >
+                <div style="margin: 30px auto;">
+                <a-empty />
+                </div>
+            </a-col>
+
+        </a-row>
+        <div
+        style="float:right;bottom: 20px;z-index: 999;padding: 8px 16px;border-radius: 4px;display: flex;align-items: center;">
+        <span style="margin-right: 10px;">共 {{ orgTableList.total }} 条数据</span>
+        <Pagination showLessItems v-model:current="pageParams.pageNo" :pageSize="pageParams.pageSize" size="small"
+            show-quick-jumper :total="orgTableList.total" @change="reload" />
+        </div>
+        <ConfigServiceDirectiveListModal ref="configServiceDirectiveListModal" />
+        <SyncStepListModal ref="syncStepListModal" />
+    </div>
+</template>
+
+<script setup name="synchronization-directive2" lang="ts">
+import { ref, reactive, computed, onMounted } from 'vue'
+import JInput from "/@/components/Form/src/jeecg/components/JInput.vue";
+import { getOrgInfo } from '/@/api/common/api';
+// 以下为服务指令引用：
+import { list, asyncFunc,departList } from '@/views/services/serviceDirective/ConfigServiceDirective.api';
+  import { Pagination } from 'ant-design-vue';
+import ConfigServiceDirectiveListModal from '/@/views/synchronization/directive/serviceDirective/ConfigServiceDirectiveListModal.vue';
+import SyncStepListModal from '/@/views/synchronization/directive/syncStep/SyncStepListModal.vue';
+
+const formRef = ref();
+const configServiceDirectiveListModal = ref();
+const syncStepListModal = ref();
+const orgTableList = ref<any>([]);
+const queryParam = reactive<any>({});
+const pageParams = ref({ pageNo: 1, pageSize: 8 })
+
+
+ const labelCol = reactive({
+    xs:24,
+    sm:4,
+    xl:6,
+    xxl:4
+  });
+  const wrapperCol = reactive({
+    xs: 24,
+    sm: 20,
+  });
+
+/**
+   * 镜像
+   */
+  function handleJingxiang() {
+    syncStepListModal.value.init(null);
+    syncStepListModal.value.disableSubmit = true;
+  }
+  /**
+   * 详情
+   * @param record
+   */
+function handleDetail(record) {
+    configServiceDirectiveListModal.value.init(record);
+    configServiceDirectiveListModal.value.disableSubmit = true;
+  }
+  /**
+   * 查询
+   */
+  function searchQuery() {
+    reload();
+  }
+
+  function reload() {
+    //刷新数据
+    queryParam.pageSize = pageParams.value.pageSize;
+    queryParam.pageNo = pageParams.value.pageNo;
+    departList(queryParam).then(res => {
+        orgTableList.value = res;
+    });
+  }
+  
+  /**
+   * 重置
+   */
+  function searchReset() {
+    formRef.value.resetFields();
+    //刷新数据
+    reload();
+  }
+  
+  // 自动请求并暴露内部方法
+  onMounted(() => {
+    reload();
+  });
+
+</script>
+
+<style lang="less" scoped>
+  .jeecg-basic-table-form-container {
+    padding: 0;
+    .table-page-search-submitButtons {
+      display: block;
+      margin-bottom: 24px;
+      white-space: nowrap;
+    }
+    .query-group-cust{
+      min-width: 100px !important;
+    }
+    .query-group-split-cust{
+      width: 30px;
+      display: inline-block;
+      text-align: center
+    }
+    .ant-form-item:not(.ant-form-item-with-help){
+      margin-bottom: 16px;
+      height: 32px;
+    }
+    :deep(.ant-picker),:deep(.ant-input-number){
+      width: 100%;
+    }
+  }
+.cardTitle{
+  background: #1ea0fa;
+  width: 100%;
+  margin: -28px -24px;
+  padding-top: 15px;
+  border-radius: 5px 5px 0px 0px;
+  color: white;
+  height: 55px;
+  display: block;
+  position: absolute;
+}
+.zxClass{
+  font-size:12px;
+  background: linear-gradient(to right, #1ea0fa, #017de9);
+  border-radius: 8px;
+  height: 25px;
+  color: white;
+  line-height: 25px;
+}
+
+.lxClass{
+  font-size:14px;
+  background: linear-gradient(to right, #cccccc, #cccccc);
+  border-radius: 8px;
+  height: 35px;
+  color: white;
+  line-height: 35px;
+}
+.tbClass{
+  background: #f6f6f6;
+  padding: 8px;
+  border-radius: 5px;
+}
+.antTitle{
+  margin-top: 10px;
+  display: block;
+  font-size: 12px;
+}
+
+.ellipsis-one-lines {
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1; /* 限制文本为2行 */
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/synchronization/directive/syncStep/SyncStepList.vue b/src/views/synchronization/directive/syncStep/SyncStepList.vue
new file mode 100644
index 0000000..c4a96b3
--- /dev/null
+++ b/src/views/synchronization/directive/syncStep/SyncStepList.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="p-2" style="padding: 10px;">
+      <a-steps :current="1" style="margin: 40px 20px 20px 20px;width: 90%;margin-left: 5%;">
+        <!-- <template #progressDot="{ index, status, prefixCls }">
+          <a-popover>
+            <template #content>
+              <span>step {{ index }} status: {{ status }}</span>
+            </template>
+            <span :class="`${prefixCls}-icon-dot`" />
+          </a-popover>
+        </template> -->
+        <a-step title="第一步" description="同步服务指令用于各护理机构间服务指令的相互镜像同步"/>
+        <a-step title="第二步" description="请选择同步服务指令的源护理机构" />
+        <a-step title="第三步" description="请选择同步服务指令的目标护理机构" />
+        <a-step title="第四步" sub-title="同步服务指令" description="页面分左右两部分：左侧为源护理机构，右侧为目标护理机构；" />
+      </a-steps>
+  </div>
+</template>
+
+<script lang="ts" name="serviceDirective-configServiceDirective" setup>
+import { ref, reactive, onMounted } from 'vue';
+ 
+
+function init(record){
+console.log("🚀 ~ init ~ record:", record)
+}
+
+  defineExpose({
+    init,
+  });
+</script>
+
+<style lang="less" scoped>
+.jeecg-basic-table-form-container {
+  padding: 0;
+
+  .table-page-search-submitButtons {
+    display: block;
+    margin-bottom: 24px;
+    white-space: nowrap;
+  }
+
+  .query-group-cust {
+    min-width: 100px !important;
+  }
+
+  .query-group-split-cust {
+    width: 30px;
+    display: inline-block;
+    text-align: center
+  }
+
+  .ant-form-item:not(.ant-form-item-with-help) {
+    margin-bottom: 16px;
+    height: 32px;
+  }
+
+  :deep(.ant-picker),
+  :deep(.ant-input-number) {
+    width: 100%;
+  }
+}
+
+audio::-webkit-media-controls-timeline {
+  display: none;
+}
+
+audio::-webkit-media-controls-current-time-display,
+audio::-webkit-media-controls-time-remaining-display {
+  display: none;
+}
+
+.btnPrivate {
+  height: 34px;
+  margin-left: 4px;
+}
+</style>
diff --git a/src/views/synchronization/directive/syncStep/SyncStepListModal.vue b/src/views/synchronization/directive/syncStep/SyncStepListModal.vue
new file mode 100644
index 0000000..f83325c
--- /dev/null
+++ b/src/views/synchronization/directive/syncStep/SyncStepListModal.vue
@@ -0,0 +1,63 @@
+<template>
+  <j-modal :title="title" width="70vw" :visible="visible" @ok="handleOk" :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭" :maskClosable="false">
+    <SyncStepList ref="registerForm"  v-if="visible" @ok="submitCallback" :formDisabled="disableSubmit" :formBpm="false"></SyncStepList>
+  </j-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, nextTick, defineExpose , defineProps} from 'vue';
+  import SyncStepList from './SyncStepList.vue'
+  import JModal from '/@/components/Modal/src/JModal/JModal.vue';
+  
+  const props = defineProps({
+    sysUrlValue: { type: String, default: '' },
+  });
+  const title = ref<string>('');
+  const visible = ref<boolean>(false);
+  const disableSubmit = ref<boolean>(false);
+  const registerForm = ref();
+  const emit = defineEmits(['register', 'success']);
+
+
+  
+  /**
+   * 编辑
+   * @param record
+   */
+  function init(record) {
+    title.value = '详情';
+    visible.value = true;
+    nextTick(() => {
+      registerForm.value.init(record);
+    });
+  }
+  
+
+  /**
+   * form保存回调事件
+   */
+  function submitCallback() {
+    handleCancel();
+    emit('success');
+  }
+
+  /**
+   * 取消按钮回调事件
+   */
+  function handleCancel() {
+    visible.value = false;
+  }
+
+  defineExpose({
+    init,
+    disableSubmit,
+  });
+</script>
+
+<style lang="less">
+  /**隐藏样式-modal确定按钮 */
+  .jee-hidden {
+    display: none !important;
+  }
+</style>
+<style lang="less" scoped></style>