diff --git a/src/api/resource/contractChangeDetailsApi.js b/src/api/resource/contractChangeDetailsApi.js
new file mode 100644
index 0000000..1172f28
--- /dev/null
+++ b/src/api/resource/contractChangeDetailsApi.js
@@ -0,0 +1,33 @@
+import request from '@/utils/request'
+
+// 获取合同变更详情
+export function getContractChangeDetails(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: '/contract/queryContractChangePlanDetail',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
+
+// 获取审核用户列表
+export function getAuditUsers(params) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: 'workflow.listWorkflowAuditInfo',
+      method: 'get',
+      params
+    }).then(response => {
+      const res = response.data
+      resolve(res)
+    }).catch(error => {
+      reject(error)
+    })
+  })
+}
\ No newline at end of file
diff --git a/src/components/contract/ContractChangeLease.vue b/src/components/contract/ContractChangeLease.vue
index e054aa8..d38da55 100644
--- a/src/components/contract/ContractChangeLease.vue
+++ b/src/components/contract/ContractChangeLease.vue
@@ -7,7 +7,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item :label="$t('contractChangeLease.startTime')" required>
-            <el-date-picker v-model="contractChangeLeaseInfo.startTime" type="datetime"
+            <el-date-picker v-model="contractChangeLeaseInfo.startTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
               :placeholder="$t('contractChangeLease.startTimePlaceholder')" style="width: 100%"></el-date-picker>
           </el-form-item>
         </el-col>
@@ -16,7 +16,7 @@
       <el-row :gutter="20">
         <el-col :span="24">
           <el-form-item :label="$t('contractChangeLease.endTime')" required>
-            <el-date-picker v-model="contractChangeLeaseInfo.endTime" type="datetime"
+            <el-date-picker v-model="contractChangeLeaseInfo.endTime" type="datetime" value-format="yyyy-MM-dd HH:mm:ss"
               :placeholder="$t('contractChangeLease.endTimePlaceholder')" style="width: 100%"></el-date-picker>
           </el-form-item>
         </el-col>
diff --git a/src/components/contract/addTemplateView.vue b/src/components/contract/addTemplateView.vue
index a5418ef..5a4964c 100644
--- a/src/components/contract/addTemplateView.vue
+++ b/src/components/contract/addTemplateView.vue
@@ -1,23 +1,20 @@
 <template>
   <el-dialog :title="$t('contractTypeManage.template.title')" :visible.sync="visible" width="80%" @close="handleClose">
-    <el-card>
-      <div class="attr-buttons">
-        <el-button v-for="(item, index) in contractTypeAttrs" :key="index" type="primary" size="small"
-          @click="insertAttrs(item)">
-          {{ item }}
-        </el-button>
-      </div>
-
-      <el-form label-width="120px">
-        <el-form-item :label="$t('contractTypeManage.template.content')">
-          <div class="editor-container">
-            <el-input type="textarea" :rows="15" v-model="context"
-              :placeholder="$t('contractTypeManage.template.placeholder')" />
-          </div>
-        </el-form-item>
-      </el-form>
-    </el-card>
+    <div class="attr-buttons">
+      <el-button v-for="(item, index) in contractTypeAttrs" :key="index" type="primary" size="small"
+        @click="insertAttrs(item)">
+        {{ item }}
+      </el-button>
+    </div>
 
+    <el-form label-width="120px">
+      <el-form-item :label="$t('contractTypeManage.template.content')">
+        <div class="editor-container">
+          <el-input type="textarea" :rows="15" v-model="context"
+            :placeholder="$t('contractTypeManage.template.placeholder')" />
+        </div>
+      </el-form-item>
+    </el-form>
     <div slot="footer" class="dialog-footer">
       <el-button @click="visible = false">
         {{ $t('common.cancel') }}
@@ -30,7 +27,7 @@
 </template>
 
 <script>
-import { saveContractTypeTemplate, updateContractTypeTemplate, queryContractTypeTemplate,printContractTemplate } from '@/api/contract/contractTypeManageApi'
+import { saveContractTypeTemplate, updateContractTypeTemplate, queryContractTypeTemplate, printContractTemplate } from '@/api/contract/contractTypeManageApi'
 
 export default {
   name: 'AddTemplateView',
@@ -41,7 +38,7 @@ export default {
       context: '',
       templateId: '',
       contractTypeAttrs: [],
-      contractTypeSpec:[]
+      contractTypeSpec: []
     }
   },
   methods: {
diff --git a/src/i18n/contractI18n.js b/src/i18n/contractI18n.js
index 34bdac3..e966979 100644
--- a/src/i18n/contractI18n.js
+++ b/src/i18n/contractI18n.js
@@ -9,6 +9,7 @@ import { messages as contractChangeManageMessages } from '../views/contract/cont
 import { messages as contractChangeDetailMessages } from '../views/contract/contractChangeDetailLang'
 import { messages as expirationContractManageMessages } from '../views/contract/expirationContractManageLang'
 import { messages as contractDetailMessages } from '../views/contract/contractDetailLang.js'
+import { messages as contractChangeDetailsMessages } from '../views/contract/contractChangeDetailsLang'
 
 export const messages ={
     en:{
@@ -23,6 +24,7 @@ export const messages ={
         ...contractChangeDetailMessages.en,
         ...expirationContractManageMessages.en,
         ...contractDetailMessages.en,
+        ...contractChangeDetailsMessages.en,
     },
     zh:{    
         ...contractTypeManageMessages.zh, 
@@ -36,5 +38,6 @@ export const messages ={
         ...contractChangeDetailMessages.zh,
         ...expirationContractManageMessages.zh,
         ...contractDetailMessages.zh,
+        ...contractChangeDetailsMessages.zh,
 }
 }
\ No newline at end of file
diff --git a/src/router/contractRouter.js b/src/router/contractRouter.js
index 6696789..ccf9c3e 100644
--- a/src/router/contractRouter.js
+++ b/src/router/contractRouter.js
@@ -49,4 +49,9 @@ export default [
         name: '/views/contract/contractDetail',
         component: () => import('@/views/contract/contractDetail.vue')
     },
+    {
+        path: '/views/contract/contractChangeDetails',
+        name: '/views/contract/contractChangeDetails',
+        component: () => import('@/views/contract/contractChangeDetailsList.vue')
+    },
 ]
\ No newline at end of file
diff --git a/src/views/contract/contractChangeDetailList.vue b/src/views/contract/contractChangeDetailList.vue
index 319ee4c..c5a3261 100644
--- a/src/views/contract/contractChangeDetailList.vue
+++ b/src/views/contract/contractChangeDetailList.vue
@@ -113,11 +113,11 @@
 
     <!-- 租期调整 -->
     <contract-change-lease v-show="contractChangeDetailInfo.param === 'contractChangeLease'" ref="contractChangeLease"
-    @changeNotify="handlerMainBody" />
+      @changeNotify="handlerMainBody" />
 
     <!-- 资产调整 -->
-    <contract-change-assets v-show="contractChangeDetailInfo.param === 'contractChangeAssets'" ref="contractChangeAssets"
-    @changeNotify="handlerMainBody" />
+    <contract-change-assets v-show="contractChangeDetailInfo.param === 'contractChangeAssets'"
+      ref="contractChangeAssets" @changeNotify="handlerMainBody" />
 
     <el-card class="box-card">
       <div slot="header" class="flex justify-between">
@@ -243,9 +243,9 @@ export default {
       this.$router.go(-1)
     },
     handlerMainBody(item) {
-      const changeRemark = this.newContract.changeRemark
+     // const changeRemark = this.newContract.changeRemark
       this.newContract = JSON.parse(JSON.stringify(this.contractChangeDetailInfo))
-      this.newContract.changeRemark = changeRemark
+     // this.newContract.changeRemark = changeRemark
       if (item['rooms']) {
         this.newContract.rooms = item.rooms
       }
diff --git a/src/views/contract/contractChangeDetailsLang.js b/src/views/contract/contractChangeDetailsLang.js
new file mode 100644
index 0000000..d69529d
--- /dev/null
+++ b/src/views/contract/contractChangeDetailsLang.js
@@ -0,0 +1,60 @@
+export const messages = {
+  en: {
+    contractChangeDetails: {
+      contract: 'Contract',
+      afterChange: 'After Change',
+      beforeChange: 'Before Change',
+      contractName: 'Contract Name',
+      contractCode: 'Contract Code',
+      contractType: 'Contract Type',
+      partyA: 'Party A',
+      partyAContacts: 'Party A Contacts',
+      partyALink: 'Party A Phone',
+      partyB: 'Party B',
+      partyBContacts: 'Party B Contacts',
+      partyBLink: 'Party B Phone',
+      operator: 'Operator',
+      operatorLink: 'Operator Phone',
+      amount: 'Amount',
+      startTime: 'Start Time',
+      endTime: 'End Time',
+      signingTime: 'Signing Time',
+      workflow: 'Workflow',
+      serialNumber: 'No.',
+      handler: 'Handler',
+      status: 'Status',
+      processTime: 'Process Time',
+      timeConsuming: 'Time Consuming',
+      opinion: 'Opinion'
+    }
+  },
+  zh: {
+    contractChangeDetails: {
+      contract: '合同',
+      afterChange: '变更后',
+      beforeChange: '变更前',
+      contractName: '合同名称',
+      contractCode: '合同编号',
+      contractType: '合同类型',
+      partyA: '甲方',
+      partyAContacts: '甲方联系人',
+      partyALink: '甲方联系电话',
+      partyB: '乙方',
+      partyBContacts: '乙方联系人',
+      partyBLink: '乙方联系电话',
+      operator: '经办人',
+      operatorLink: '联系电话',
+      amount: '合同金额',
+      startTime: '开始时间',
+      endTime: '结束时间',
+      signingTime: '签订时间',
+      workflow: '工单流转',
+      serialNumber: '序号',
+      handler: '处理人',
+      status: '状态',
+      processTime: '处理时间',
+      timeConsuming: '耗时',
+      opinion: '意见'
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/views/contract/contractChangeDetailsList.vue b/src/views/contract/contractChangeDetailsList.vue
new file mode 100644
index 0000000..0d9fe91
--- /dev/null
+++ b/src/views/contract/contractChangeDetailsList.vue
@@ -0,0 +1,274 @@
+<template>
+  <div class="contract-change-details-container">
+    <el-row v-for="(contractChangeDetailInfo,index) in contractChangeDetailsInfo.contractDetails" :key="index" class="mb-20">
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header" class="flex justify-between">
+            <span>
+              <span>{{ $t('contractChangeDetails.contract') }}</span>
+              {{contractChangeDetailInfo.operate == 'ADD'?$t('contractChangeDetails.afterChange'):$t('contractChangeDetails.beforeChange')}}
+              {{contractChangeDetailInfo.operate == 'ADD'?'('+contractChangeDetailInfo.planTypeName+')':''}}
+            </span>
+            <div class="card-header-right" v-if="index == 0">
+              <el-button type="primary" size="small" style="margin-right:10px;" @click="_goBack()">
+                <i class="el-icon-close"></i>{{ $t('common.back') }}
+              </el-button>
+            </div>
+          </div>
+          <div class="text item">
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.contractName') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.contractName}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.contractCode') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.contractCode}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.contractType') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.contractType}}</label>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.partyA') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.partyA}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.partyAContacts') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.aContacts}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.partyALink') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.aLink}}</label>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.partyB') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.partyB}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.partyBContacts') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.bContacts}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.partyBLink') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.bLink}}</label>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.operator') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.operator}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.operatorLink') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.operatorLink}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.amount') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.amount}}</label>
+                </div>
+              </el-col>
+            </el-row>
+            <el-row :gutter="20">
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.startTime') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.startTime}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.endTime') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.endTime}}</label>
+                </div>
+              </el-col>
+              <el-col :span="8">
+                <div class="form-group">
+                  <label class="el-form-item__label">
+                    <span>{{ $t('contractChangeDetails.signingTime') }}</span>：
+                  </label>
+                  <label class="el-form-item__content">{{contractChangeDetailInfo.signingTime}}</label>
+                </div>
+              </el-col>
+            </el-row>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+    <el-row class="mb-20">
+      <el-col :span="24">
+        <el-card class="box-card">
+          <div slot="header" class="clearfix">
+            <h5>
+              <span>{{ $t('contractChangeDetails.workflow') }}</span>
+            </h5>
+          </div>
+          <div class="text item">
+            <el-table :data="contractChangeDetailsInfo.auditUsers" border style="width: 100%">
+              <el-table-column prop="index" :label="$t('contractChangeDetails.serialNumber')" width="80" align="center">
+                <template slot-scope="scope">
+                  {{scope.$index + 1}}
+                </template>
+              </el-table-column>
+              <el-table-column prop="userName" :label="$t('contractChangeDetails.handler')" align="center">
+                <template slot-scope="scope">
+                  {{scope.row.userName || scope.row.auditName}}
+                </template>
+              </el-table-column>
+              <el-table-column prop="stateName" :label="$t('contractChangeDetails.status')" align="center"></el-table-column>
+              <el-table-column prop="auditTime" :label="$t('contractChangeDetails.processTime')" align="center"></el-table-column>
+              <el-table-column prop="duration" :label="$t('contractChangeDetails.timeConsuming')" align="center"></el-table-column>
+              <el-table-column prop="message" :label="$t('contractChangeDetails.opinion')" align="center"></el-table-column>
+            </el-table>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import { getContractChangeDetails, getAuditUsers } from '@/api/resource/contractChangeDetailsApi'
+import { getCommunityId } from '@/api/community/communityApi'
+
+export default {
+  name: 'ContractChangeDetailsList',
+  data() {
+    return {
+      contractChangeDetailsInfo: {
+        contractDetails: [],
+        auditUsers: [],
+        planId: ''
+      },
+      communityId: ''
+    }
+  },
+  created() {
+    this.communityId = getCommunityId()
+    this.contractChangeDetailsInfo.planId = this.$route.query.planId
+    this._listContractDetails()
+    this._loadAuditUser()
+  },
+  methods: {
+    async _listContractDetails() {
+      try {
+        const param = {
+          page: 1,
+          row: 10,
+          planId: this.contractChangeDetailsInfo.planId
+        }
+        const { data } = await getContractChangeDetails(param)
+        data.sort((_child, _newChild) => {
+          return _newChild.operate.charCodeAt(0) - _child.operate.charCodeAt(0)
+        })
+        this.contractChangeDetailsInfo.contractDetails = data
+      } catch (error) {
+        console.error('请求合同详情失败:', error)
+      }
+    },
+    async _loadAuditUser() {
+      try {
+        const param = {
+          businessKey: this.contractChangeDetailsInfo.planId,
+          communityId: this.communityId
+        }
+        const { data } = await getAuditUsers(param)
+        this.contractChangeDetailsInfo.auditUsers = data
+      } catch (error) {
+        console.error('请求审核用户失败:', error)
+      }
+    },
+    _goBack() {
+      this.$router.go(-1)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.contract-change-details-container {
+  padding: 20px;
+  
+
+  
+  .el-card {
+    margin-bottom: 20px;
+    
+    .clearfix {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    
+    .card-header-right {
+      display: flex;
+      align-items: center;
+    }
+  }
+  
+  .form-group {
+    margin-bottom: 15px;
+    text-align: left;
+  }
+  
+  .el-table {
+    margin-top: 20px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/contract/contractChangeManageList.vue b/src/views/contract/contractChangeManageList.vue
index 0aae92e..798f5cf 100644
--- a/src/views/contract/contractChangeManageList.vue
+++ b/src/views/contract/contractChangeManageList.vue
@@ -166,7 +166,7 @@ export default {
       this.$router.push(`/views/contract/contractChangeDetail?param=${type}`)
     },
     handleToDetails(row) {
-      this.$router.push(`/views/contract/contractChangeDetail?planId=${row.planId}`)
+      this.$router.push(`/views/contract/contractChangeDetails?planId=${row.planId}`)
     },
     handleOpenDeleteDialog(row) {
       this.$refs.deleteDialog.open(row)
diff --git a/src/views/contract/contractTypeManageList.vue b/src/views/contract/contractTypeManageList.vue
index ba00d0c..436063c 100644
--- a/src/views/contract/contractTypeManageList.vue
+++ b/src/views/contract/contractTypeManageList.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="contract-type-manage-container">
     <!-- 查询条件 -->
-    <el-card  class="search-card">
+    <el-card class="search-card">
       <div slot="header" class="flex justify-between">
         <span>{{ $t('contractTypeManage.search.title') }}</span>
       </div>
@@ -30,7 +30,7 @@
     </el-card>
 
     <!-- 合同类型列表 -->
-    <el-card  class="list-card">
+    <el-card class="list-card">
       <div slot="header" class="flex justify-between">
         <span>{{ $t('contractTypeManage.list.title') }}</span>
         <div style="float: right;">
@@ -87,7 +87,7 @@ import { getCommunityId } from '@/api/community/communityApi'
 import {
   queryContractType,
   //queryContractTypeTemplate,
-  
+
 } from '@/api/contract/contractTypeManageApi'
 import AddTemplateView from '@/components/contract/addTemplateView'
 import AddContractType from '@/components/contract/addContractType'
@@ -181,10 +181,10 @@ export default {
     _toAuditPage() {
       this.$router.push('/pages/property/workflowManage?tab=流程管理')
     },
-   
+
     _openContractTemplate(row) {
       this.componentShow = ''
-        this.$refs.addTemplateView.open(row)
+      this.$refs.addTemplateView.open(row)
 
     },
     handleSizeChange(val) {
diff --git a/src/views/fee/contractCreateFeeList.vue b/src/views/fee/contractCreateFeeList.vue
index 8b64096..dd9df8c 100644
--- a/src/views/fee/contractCreateFeeList.vue
+++ b/src/views/fee/contractCreateFeeList.vue
@@ -163,13 +163,13 @@ export default {
     },
     handleViewDetail(row) {
       this.$router.push({
-        path: '/common/contractApplyDetail',
+        path: '/views/contract/contractChangeDetail',
         query: { contractId: row.contractId }
       })
     },
     handleViewFee(row) {
       this.$router.push({
-        path: '/contract/contractDetail',
+        path: '/views/contract/contractDetail',
         query: {
           contractId: row.contractId,
           contractCode: row.contractCode