diff --git a/src/assets/images/headerBg.png b/src/assets/images/headerBg.png
new file mode 100644
index 0000000..81fcc92
Binary files /dev/null and b/src/assets/images/headerBg.png differ
diff --git a/src/assets/images/itemBgc.png b/src/assets/images/itemBgc.png
new file mode 100644
index 0000000..faf4101
Binary files /dev/null and b/src/assets/images/itemBgc.png differ
diff --git a/src/router/index.js b/src/router/index.js
index 1ae910e..5c0c672 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -748,6 +748,21 @@ export const dynamicRoutes = [
       }
     ]
   },
+  // mtrAgent管理
+  {
+    path: '/resource/mtrAgent/view',
+    component: Layout,
+    hidden: true,
+    permissions: ['resource:mtrAgent:view'],
+    children: [
+      {
+        path: ':id?',
+        component: () => import('@/views/resource/mtrAgent/mtrAgentView'),
+        name: 'remoteManageView',
+        meta: { title: 'MTRAgent信息', activeMenu: '/resource/mtrAgent' }
+      }
+    ]
+  },
   // agent更新
   {
     path: '/resource/agentUpdate/view',
diff --git a/src/views/resource/mtrAgent/mtrAgent.vue b/src/views/resource/mtrAgent/mtrAgent.vue
new file mode 100644
index 0000000..9bd39ad
--- /dev/null
+++ b/src/views/resource/mtrAgent/mtrAgent.vue
@@ -0,0 +1,284 @@
+<template>
+  <div class="app-container pageTopForm">
+    <el-form :model="queryParams" ref="queryRef" v-show="showSearch" size="small" label-width="auto">
+      <el-col :span="6">
+        <el-form-item label="搜索" title="搜索" prop="queryParam">
+          <el-input
+            v-model="queryParams.queryParam"
+            placeholder="请输入MTRClientID/ClientID"
+            clearable
+            @keyup.enter.native="handleQuery"/>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="在线状态" title="在线状态" prop="onlineStatus">
+          <el-select
+            v-model="queryParams.onlineStatus"
+            placeholder="请选择在线状态"
+            clearable>
+            <el-option
+              v-for="dict in dict.type.rm_register_online_state"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="注册状态" title="注册状态" prop="registrationStatus">
+          <el-select
+            v-model="queryParams.registrationStatus"
+            placeholder="请选择注册状态"
+            clearable>
+            <el-option
+              v-for="dict in dict.type.rm_register_status"
+              :key="dict.value"
+              :label="dict.label"
+              :value="dict.value"/>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="6">
+        <el-form-item label="标识" title="标识" prop="logicalNodeId">
+          <el-select
+            v-model="queryParams.logicalNodeId"
+            placeholder="请选择标识"
+            clearable>
+            <el-option
+              v-for="item in logicalNodeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"/>
+          </el-select>
+        </el-form-item>
+      </el-col>
+      <el-col :span="8">
+        <el-form-item class="lastBtnSty">
+          <el-button type="primary" size="mini" icon="Search" @click="handleQuery">搜索</el-button>
+          <el-button icon="Refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-col>
+    </el-form>
+
+    <!-- 表格数据 -->
+    <TableList :columns="columns" :config="config" :modelIdent="this.$options.name" :queryParams="queryParams" :tableList="roleList" @fnClick="callback" @fnRenderList="getList" @value-change="handleValueChange">
+      <template #tempCopy="{ row, column}">
+        {{row.clientId}}<el-link :underline="false" icon="el-icon-document-copy" title="复制" v-clipboard:copy="row.clientId" v-clipboard:success="clipboardSuccess" style="margin-left: 10px;color: #409EFF;"></el-link>
+      </template>
+      <!--   更新方式   -->
+      <template #tempMethod="{ row, column }">
+        <dict-tag :options="dict.type.policy_method" :value="row.method"/>
+      </template>
+      <!--    多公网IP状态    -->
+      <template #tempMultipubStatus="{ row, column }">
+        <dict-tag :options="dict.type.rm_moreip_status" :value="row.multiPublicIpStatus"/>
+      </template>
+      <!--    注册状态    -->
+      <template #tempStatus="{ row, column }">
+        <dict-tag :options="dict.type.rm_register_status" :value="row.registrationStatus"/>
+      </template>
+      <!--    在线状态    -->
+      <template #tempOnlineStatus="{ row, column }">
+        <dict-tag :options="dict.type.rm_register_online_state" :value="row.onlineStatus"/>
+      </template>
+    </TableList>
+    <!--   选择公网业务IP    -->
+    <el-dialog title="配置更新策略" :visible.sync="viewOpen" width="800px" append-to-body style="padding-bottom: 20px;">
+      <mtrAgentView :open="`type_${viewOpen}`" :dialogRowData="dialogRowData" @dialogResult="fnDialogResult"></mtrAgentView>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Register">
+  import Form from '@/components/form/index.vue';
+  import {listHandle, networkList, getScriptResultBySn, getLogicalNode} from '@/api/disRevenue/resource';
+  import {listAllBusinessList} from "@/api/disRevenue/earnManage"
+  import TableList from '@/components/table/index.vue';
+  import mtrAgentView from './mtrAgentView';
+  export default {
+    name: 'mtrAgent',
+    components: {TableList,Form, mtrAgentView},
+    dicts: ['rm_moreip_status', 'rm_register_status', 'rm_register_online_state', 'policy_method'],
+    data() {
+      return {
+        roleList: [],
+        busNameList: [],
+        loading: true,
+        showSearch: true,
+        ids: [],
+        single: true,
+        meltiple: true,
+        // 列显隐信息
+        columns: {
+          id: { label: `ID`,width: '50'},
+          mtrClientId: { label: `MTRClientID`, minWidth: '320', visible: true},
+          remarks:{ label: `描述`,minWidth: '90'},
+          machineCode:{ label: `版本`,minWidth: '160', visible: true},
+          registrationStatus: { label: `注册状态`, slotName: 'tempStatus', minWidth: '80', visible: true },
+          createTime:{ label: `注册时间`,minWidth: '160'},
+          logicalNodeId: { label: `标识`, minWidth: '120', visible: true},
+          onlineStatus: { label: `在线状态`, slotName: 'tempOnlineStatus', minWidth: '100', visible: true },
+          heartbeatInterval: { label: `心跳时间间隔`, minWidth: '100'},
+          heartbeatCount: { label: `心跳次数`, minWidth: '80'},
+          businessName: { label: `网卡信息`, minWidth: '100'},
+          method: { label: `更新方式`,minWidth: '80', slotName: 'tempMethod'},
+          scheduledUpdateTime: { label: `定时更新时间`,minWidth: '160'},
+          fileUrl: { label: `文件地址`,minWidth: '200'},
+          fileMd5: {label: '文件MD5', minWidth: '200'},
+          lastUpdateResult: { label: `最后一次更新结果`,minWidth: '140', slotName: 'tempResult'},
+          lastUpdateTime: { label: `最后一次更新时间`,minWidth: '160'},
+        },
+        config: {
+          tableButton: {
+            top: [
+              {content: '配置更新策略', fnCode: 'add', type: 'primary', icon: 'el-icon-plus', hasPermi: 'resource:mtrAgent:add'},
+              {content: '导出', fnCode: 'export', type: 'warning', icon: 'el-icon-download', hasPermi: 'resource:mtrAgent:export'},
+            ],
+            line: [
+              {content: '查看丢包率趋势', fnCode: 'echartView', type: 'text', icon: 'el-icon-data-analysis', hasPermi: 'resource:mtrAgent:graphicAnalysis'},
+              {content: '详情', fnCode: 'details', type: 'text', icon: 'el-icon-view', hasPermi: 'resource:mtrAgent:details'},
+              {title: '更多', more: [
+                  {content: '配置更新策略', fnCode: 'edit', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:mtrAgent:edit'},
+                  {content: '新建MTR探测策略', fnCode: 'addMtrDetect', type: 'text', icon: 'el-icon-circle-check', hasPermi: 'resource:mtrAgent:addMtrDetect'},
+                ]
+              }
+            ]
+          }
+        },
+        queryParams: {
+          pageNum: 1,
+          pageSize: 10,
+          total: 0
+        },
+        title: '',
+        formList: [],
+        ruleForm: {},
+        viewOpen: false,
+        dialogRowData: {},
+        logicalNodeList: [],
+
+      }
+    },
+    created() {
+      this.getList();
+      this.fnBusNameList();
+      this.fnLogicalNode();
+    },
+    activated() {
+      this.$nextTick(() => {
+        this.getList();
+      });
+    },
+    methods: {
+      fnBusNameList() {
+        listAllBusinessList().then(val => {
+          this.busNameList = val && val.data.map(item => {
+            return Object.assign({label: item.businessName, value: item.businessName});
+          });
+        });
+      },
+      fnLogicalNode() {
+        getLogicalNode().then(val => {
+          this.logicalNodeList = val && val.map(item => {
+            return Object.assign({label: item.logicalNodeId, value: item.logicalNodeId});
+          });
+        });
+      },
+      // 处理子组件传递的新值
+      handleValueChange(newValue) {
+        // 父组件更新自身数据，实现同步
+        this.showSearch = newValue;
+        // console.log('父组件拿到新值:', newValue);
+      },
+      /** 查询角色列表 */
+      getList() {
+        let params = JSON.parse(JSON.stringify(this.queryParams));
+        if (params && !params.queryParam) {
+          params.queryParam = null;
+        }
+        this.loading = true;
+        listHandle(this.addDateRange(params)).then(response => {
+          this.roleList = response.rows;
+          this.queryParams.total = response.total;
+          this.loading = false;
+        })
+      },
+
+      /** 搜索按钮操作 */
+      handleQuery() {
+        this.queryParams.pageNum = 1
+        this.getList()
+      },
+
+      /** 重置按钮操作 */
+      resetQuery() {
+        this.$refs['queryRef'].resetFields();
+        this.queryParams = {pageNum: 1, pageSize: 10,total: 0};
+        // this.resetForm("queryRef");
+        this.handleQuery();
+      },
+
+      /** 多选框选中数据 */
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.roleId);
+        this.single = selection.length != 1;
+        this.multiple = !selection.length;
+      },
+      /** 复制代码成功 */
+      clipboardSuccess() {
+        this.$modal.msgSuccess("复制成功")
+      },
+      fnDialogResult(res){
+        this.viewOpen = false;
+      },
+      callback(result, rowData, selectChange, selectList) {
+        this.dialogRowData = {};
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'add':
+              this.viewOpen = true;
+              break;
+            case 'edit':
+              this.viewOpen = true;
+              this.dialogRowData = rowData;
+              break;
+            case 'details':
+              this.$router.push({
+                path:'/resource/mtrAgent/view',
+                query: {id: rowData.id, readonly: true}
+              });
+              break;
+            case 'echartView':
+              this.$router.push({
+                path:'/resource/serverRegister/monitorChart',
+                query: {clientId: rowData.clientId}
+              });
+              break;
+            case 'export':
+              // let dataList = [];
+              // Object.keys(this.columns).forEach(item => {
+              //   if (item.visible) {
+              //     dataList.push(item.prop);
+              //   }
+              // });
+              // this.download("/system/registration/export", {properties: dataList,}, `资源管理_${new Date().getTime()}.xlsx`);
+              let paramsList = Object.assign({}, this.queryParams,rowData);
+              this.download("system/registration/export", paramsList, `服务器管理_${new Date().getTime()}.xlsx`, null, 'json');
+              break;
+            default:
+
+          }
+        }
+      },
+    }
+  }
+</script>
+
+<style scoped>
+  ::v-deep .lastBtnSty .el-form-item__content{
+    margin-left: 10px!important;
+  }
+  ::v-deep .el-dialog__body {
+    padding: 0 0 10px!important;
+  }
+</style>
diff --git a/src/views/resource/mtrAgent/mtrAgentView.vue b/src/views/resource/mtrAgent/mtrAgentView.vue
new file mode 100644
index 0000000..18b4474
--- /dev/null
+++ b/src/views/resource/mtrAgent/mtrAgentView.vue
@@ -0,0 +1,173 @@
+<template>
+  <div class="app-container">
+    <Form ref="formRef" :formList="formList" :ruleFormData="ruleForm" :config="config" @fnClick="callback"></Form>
+  </div>
+</template>
+
+<script setup name="Handle">
+  import Form from '@/components/form/index.vue';
+  import {addAgentManage, getAgentManage, updateAgentManage, getRegistList} from "@/api/disRevenue/resource"
+  export default {
+    name: 'mtrAgentView',
+    components: {Form},
+    dicts: ['policy_method', 'rm_register_online_state', 'agent_update_result', 'rm_register_status'],
+    props: {
+      open: {
+        type: String,
+        default: () => {}
+      },
+      dialogRowData: {
+        type: Object,
+        default: (() => {})
+      }
+    },
+    watch: {
+      open: {
+        handler(val) {
+          if (val === 'type_true') {
+            this.paramsData = {};
+            // this.$set(this.ruleForm, 'deployDevice', this.dialogRowData.mtrClientId);
+          } else if (val === 'type_false') {
+            // 清空form
+            this.$refs['formRef'].$refs.ruleForm.resetFields();
+          }
+        },
+        deep: true,
+        immediate: true
+      },
+    },
+    data() {
+      return {
+        ruleForm: {},
+        formList: [],
+        paramsData: {},
+        config: {},
+        includeList: {}
+      }
+    },
+    created() {
+      this.paramsData = this.$route && this.$route.query;
+      if (this.open) {
+        this.paramsData = {};
+        // this.$set(this.ruleFormData, 'deployDevice', this.dialogRowData.mtrClientId);
+      }
+      if (this.paramsData && this.paramsData.id) {
+        this.getFormDataList(this.paramsData.id);
+      } else {
+        this.fnFormList();
+        // this.getResNameList();
+      }
+      if (this.paramsData && this.paramsData.readonly) {
+        this.config = {
+          buttonGroup: [{title: '返回', fnCode: 'goBack'}]
+        };
+      }
+    },
+    methods: {
+      // formList集合
+      fnFormList(objVal) {
+        console.log('ddd')
+        this.formList = [{
+          config: {title: ' ', colSpan: '', readonly: this.paramsData.readonly},
+          controls: {
+            id: {label: 'ID',hidden: true},
+            mtrClientId: {label: 'MTRClientID', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            agentVersion: {label: '版本', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            type: {label: '标识', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            createTime: {label: '注册时间', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            registrationStatus: {label: '注册状态', span: 12, type: 'select', options: this.dict.type.rm_register_status, hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            onlineStatus: {label: '在线状态', span: 12, type: 'select', options: this.dict.type.rm_register_online_state, hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            heartbeatInterval: {label: '心跳时间间隔(s)', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            heartbeatCount: {label: '心跳次数', span: 12, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            method: {label: '更新方式', span: 12, type: 'select', options: this.dict.type.policy_method, eventName: 'change', required: true},
+            scheduledUpdateTime: {label: '更新时间', span: 18, type: 'datetime', required: true, hidden: objVal && objVal.method === '1' ? false: true},
+            fileUrl: {label: '文件地址', span: 18, type: 'input', required: true, placeholder: '请输入外网地址', warningTitle: '如：http://www.tr.com/server-1.1.1.jar'},
+            fileMd5: {label: '文件MD5', span: 18, type: 'input', required: true},
+            deployDevice: {label: '部署设备', span: 18, type: 'textarea', rows:15, placeholder: '请粘贴/输入MTRClientID列表，如\nMTRClientID1\nMTRClientID2\n...', required: true, hidden: this.paramsData && this.paramsData.readonly ? true : false},
+            clientAllId: {label: '加载全部MTRClientID', span: 3, type: 'button', style: 'vertical-align: top', hidden: this.paramsData && this.paramsData.readonly ? true : this.paramsData && this.paramsData.id ? true : false},
+            lastUpdateResult: {label: '最后一次更新结果', span: 18, type: 'select', options: this.dict.type.agent_update_result, hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            lastUpdateTime: {label: '最后一次更新时间', span: 18, type: 'datetime', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            includeIds: {label: '网卡信息', span: 24, type: 'input', hidden: this.paramsData && this.paramsData.readonly ? false : true},
+            managePublicIp: {label: '描述', span: 18, type: 'input', disabled: true, hidden: this.paramsData && this.paramsData.readonly ? false : true},
+          }
+        }];
+      },
+      // 获取详情
+      getFormDataList(id) {
+        getAgentManage(id).then(val => {
+          if (val && val.data) {
+            val.data['method'] = val.data && val.data['method'] || val.data['method'] === 0 ? val.data['method'].toString() : val.data['method'];
+            // val.data['fileUrlType'] = val.data['fileUrlType'].toString();
+            this.fnFormList(val.data);
+            this.ruleForm = val.data;
+          }
+        }).catch(() => {
+          // this.$modal.msgError("操作失败")
+        });
+      },
+      // // 包含设备
+      // getResNameList() {
+      //   resNameList().then(val => {
+      //     this.formList[0].controls['includeIds']['options']= val && val.map(item => {
+      //       this.includeList[item.id] = item;
+      //       return Object.assign({label: item.resourceName, key: item.id});
+      //     });
+      //   }).catch(() => {
+      //     this.$modal.msgError("操作失败")
+      //   });
+      // },
+      // 监听事件
+      callback(result, dataVal, formVal) {
+        if (result && result.fnCode) {
+          switch (result.fnCode) {
+            case 'method':
+              if (dataVal === '1') {
+                this.formList[0].controls.scheduledUpdateTime['hidden'] = false;
+              } else {
+                this.formList[0].controls.scheduledUpdateTime['hidden'] = true;
+              }
+              break;
+            case 'clientAllId':
+              this.$set(this.ruleForm, 'deployDevice', '');
+              getRegistList({resourceType: 1}).then(res => {
+                let str = '';
+                if (res && res.data) {
+                  res && res.data.map(item => {
+                    str+= item.clientId + '\n';
+                  });
+                }
+                this.$set(this.ruleForm, 'deployDevice', str);
+              });
+              break;
+            case 'submit':
+              if (this.open) {
+                this.$emit("dialogResult", {open: false});
+              } else {
+                this.$router.push("/resource/mtrAgent")
+              }
+              // let fnType = addAgentManage;
+              // if (dataVal && dataVal.id) {
+              //   fnType = updateAgentManage;
+              // }
+              // fnType(dataVal).then(response => {
+              //   this.$modal.msgSuccess(response.msg);
+              // }).catch(() => {
+              //   this.$modal.msgError("操作失败")
+              // });
+              break;
+            case 'cancel':
+              if (this.open) {
+                this.$emit("dialogResult", {open: false});
+              } else {
+                this.$router.push("/resource/mtrAgent")
+              }
+              break;
+            default:
+          }
+        }
+      }
+    }
+  }
+</script>
+<style>
+</style>
diff --git a/src/views/welcome.vue b/src/views/welcome.vue
index dac428a..945fc88 100644
--- a/src/views/welcome.vue
+++ b/src/views/welcome.vue
@@ -14,14 +14,21 @@
 <!--    </div>-->
   <div class="welcome-container">
     <div class="header-section textAlignCenter">
-      <div class="main-title">彤然科技-分布式SaaS收益管理平台</div>
-      <div class="welcome-text">欢迎您{{user.nickName}}：现在是{{newDateTime}}</div>
+      <div class="main-title" :style="{ backgroundImage: `url(${require('@/assets/images/headerBg.png')})`, height: '62px',backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundPosition: 'center', }">
+        <div style="margin-bottom: 13px;">分布式SaaS收益管理平台</div>
+      </div>
+      <div class="welcome-text">
+        <div class="animated-text class-method" :class="{ 'slide-in': showContent }" style="--animation-duration: 1200ms">
+          欢迎您{{user.nickName}}：现在是{{newDateTime}}
+        </div>
+      </div>
     </div>
 
-    <div class="w100 plr-20">
+    <div class="w100 contentPad">
       <div class="menu-container">
-        <div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="menu-item">
-          <div class="menu-item-content">{{menuItem.pageName}}</div>
+        <div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="menu-item" @mouseover="tranformType(menuItem)" :class="activeId === menuItem.id ? 'activeTranFormRotate' : '' "
+             :style="{backgroundImage: `url(${require('@/assets/images/itemBgc.png')})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat',backgroundPosition: 'center'}">
+          <div class="menu-item-content" :class="activeId === menuItem.id ? 'textTranFormRotate' : ''">{{menuItem.pageName}}</div>
         </div>
       </div>
     </div>
@@ -34,10 +41,12 @@
     name: "welcome",
     data() {
         return {
+          showContent: false,
           newDateTime: '',
           getWeekday: {0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三',4: '星期四', 5: '星期五', 6: '星期六'},
           user: {},
-          menuList: []
+          menuList: [],
+          activeId: '',
         }
     },
     created() {
@@ -54,6 +63,12 @@
       let menu = this.$store.state.permission.sidebarRouters;
       this.menuHandle(menu);
     },
+    mounted() {
+      // 页面加载后自动触发动画
+      setTimeout(() => {
+        this.showContent = true;
+      }, 300);
+    },
     methods: {
       // 处理菜单
       menuHandle(menu) {
@@ -84,7 +99,10 @@
         this.$router.push({
           path: menuLink.pageRoute
         });
-      }
+      },
+      tranformType(val) {
+        this.activeId = val.id;
+      },
     }
   }
 </script>
@@ -96,45 +114,49 @@
     /*overflow: auto;*/
     display: flex;
     flex-direction: column;
-    padding: 20px;
+    /*padding: 20px;*/
     margin-bottom: 20px;
   }
 
   /* 标题区域 */
   .header-section {
-    margin-bottom: 30px;
+    margin-bottom: 6%;
   }
 
   .main-title {
-    font-size: 2.5rem;
-    color: #BFBF00;
+    font-size: 1.3rem;
+    color: #fff;
     font-weight: 600;
     margin-bottom: 15px;
     text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
   .welcome-text {
-    font-size: 1.5rem;
-    color: #666;
+    font-size: 1.2rem;
+  }
+  .contentPad {
+    padding: 0 20%;
   }
-
   /* 菜单区域 */
   .menu-container {
     display: flex;
     flex-wrap: wrap;
     justify-content: flex-start; /* 改为左对齐 */
-    gap: 20px;
+    gap: 40px 20px;
     /*max-width: 1200px;*/
     margin: 0 auto;
   }
 
   .menu-item {
     /*flex: 1 1 200px;*/
-    flex: 0 0 calc(20% - 16px); /* 固定宽度，确保每行显示5个 */
-    min-width: 200px;
-    height: 70px;
+    flex: 0 0 calc(25% - 16px); /* 固定宽度，确保每行显示5个 */
+    /*min-width: 150px;*/
+    height: 100px;
     cursor: pointer;
-    transition: all 0.3s ease;
+    transition: none;
   }
 
   .menu-item-content {
@@ -143,27 +165,27 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    background: linear-gradient(135deg, #02a7f099 0%, #0280c099 100%);
-    color: #fff;
+    /*background: linear-gradient(135deg, #02a7f099 0%, #0280c099 100%);*/
+    color: #000;
     border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: all 0.3s ease;
+    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
     padding: 10px;
     text-align: center;
     font-size: 1.1rem;
     font-weight: 500;
+    transition: none;
   }
 
   .menu-item:hover .menu-item-content {
-    transform: translateY(-5px);
-    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
-    background: linear-gradient(135deg, #0280c099 0%, #026aa099 100%);
+    /*transform: translateY(-5px);*/
+    /*box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);*/
+    /*background: linear-gradient(135deg, #0280c099 0%, #026aa099 100%);*/
   }
 
   /* 响应式设计 - 媒体查询 */
   @media (max-width: 1200px) {
     .main-title {
-      font-size: 2.2rem;
+      font-size: 1.2rem;
     }
 
     .welcome-text {
@@ -182,12 +204,8 @@
       min-height: 100vh;
     }
 
-    .pt50 {
-      padding-top: 30px;
-    }
-
     .main-title {
-      font-size: 1.8rem;
+      font-size: 1.2rem;
     }
 
     .welcome-text {
@@ -195,11 +213,11 @@
     }
 
     .menu-container {
-      gap: 15px;
+      gap: 35px 15px;
     }
 
     .menu-item {
-      flex: 0 0 calc(33.333% - 10px); /* 平板每行3个 */
+      flex: 0 0 calc(25% - 12px); /* 平板每行4个 */
       height: 60px;
     }
 
@@ -213,20 +231,23 @@
       padding: 10px;
     }
 
-    .pt50 {
-      padding-top: 20px;
+    .contentPad {
+      padding: 0 10%;
     }
 
     .main-title {
-      font-size: 1.5rem;
+      font-size: 1.2rem;
     }
 
     .welcome-text {
       font-size: 1rem;
     }
+    .animated-text {
+      width: 100%!important;
+    }
 
     .menu-container {
-      gap: 10px;
+      gap: 20px 10px;
       justify-content: center; /* 小屏幕居中对齐 */
     }
 
@@ -258,4 +279,28 @@
       flex: 0 0 calc(16.666% - 17px); /* 大屏每行6个 */
     }
   }
+
+  /* 动画*/
+  .animated-text {
+    width: 550px;
+    position: relative;
+  }
+  /* 方法2: CSS类绑定样式 */
+  .class-method {
+    transform: translateX(-100%);
+    opacity: 0;
+    transition: all var(--animation-duration) linear;
+  }
+  .class-method.slide-in {
+    transform: translateX(0);
+    opacity: 1;
+  }
+  .activeTranFormRotate:hover {
+    transform: rotateY(180deg);
+    transition: transform 2s ease-in-out;
+  }
+  .textTranFormRotate:hover {
+    transform: rotateY(-180deg);
+    transition: transform 2s ease-in-out;
+  }
 </style>