diff --git a/src/styles/el-theme.scss b/src/styles/el-theme.scss
index ae9b3584..c68a759a 100644
--- a/src/styles/el-theme.scss
+++ b/src/styles/el-theme.scss
@@ -73,6 +73,9 @@
 
 .el-descriptions {
   --el-descriptions-item-bordered-label-background: #{$sub-main-bg-content};
+  :deep(.el-descriptions__body) {
+    background-color: #{$main-bg-color};
+  }
 }
 
 // 左侧导航栏(此地方颜色全部改成自定义)
diff --git a/src/views/about/index.vue b/src/views/about/index.vue
index 1ccb8611..382c8ee6 100644
--- a/src/views/about/index.vue
+++ b/src/views/about/index.vue
@@ -1,4 +1,62 @@
 <template>
-  <div>about</div>
+  <!-- <div class="page-container"> </div> -->
+  <div>
+    <el-row v-for="(item, index) in pageDate" :key="index" :gutter="30" class="enter-y">
+      <el-col>
+        <el-card class="box-card">
+          <template #header>
+            <div class="card-header">
+              <span>{{ toName[index] }}</span>
+            </div>
+          </template>
+          <div class="descriptions">
+            <el-descriptions
+              class="margin-top"
+              direction="horizontal"
+              :column="2"
+              size="default"
+              border
+            >
+              <el-descriptions-item v-for="(i, cindex) in item" :key="cindex" min-width="200px">
+                <template #label>
+                  {{ cindex }}
+                </template>
+                <span>{{ i }}</span>
+              </el-descriptions-item>
+            </el-descriptions>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </div>
 </template>
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+  import { reactive } from 'vue';
+  import packagepath from '../../../package.json';
+  const pageDate = reactive({ info: {}, dependencies: {}, devDependencies: {} });
+
+  const toName = {
+    info: '项目信息',
+    dependencies: '生产依赖',
+    devDependencies: '开发依赖',
+  };
+
+  pageDate.info = {
+    name: packagepath.name,
+    version: packagepath.version,
+  };
+  pageDate.dependencies = packagepath.dependencies;
+  pageDate.devDependencies = packagepath.devDependencies;
+
+  console.log(packagepath);
+</script>
+
+<style lang="scss" scoped>
+  .box-card {
+    margin-bottom: 20px;
+    .margin-top :deep(.el-descriptions__body) {
+      margin: 20px;
+      background-color: #{$main-bg-color} !important;
+    }
+  }
+</style>
diff --git a/src/views/index/components/WeDetails.vue b/src/views/index/components/WeDetails.vue
index b43ff095..4b22027b 100644
--- a/src/views/index/components/WeDetails.vue
+++ b/src/views/index/components/WeDetails.vue
@@ -74,8 +74,5 @@
     .el-tag--dark {
       margin-right: 10px !important;
     }
-    .margin-top :deep(.el-descriptions__body) {
-      background-color: #{$main-bg-color};
-    }
   }
 </style>
diff --git a/src/views/useradmin/userlist/index.vue b/src/views/useradmin/userlist/index.vue
index 4fcd150f..fe3ca9c2 100644
--- a/src/views/useradmin/userlist/index.vue
+++ b/src/views/useradmin/userlist/index.vue
@@ -16,8 +16,6 @@
 
 <script setup lang="ts">
   import TsComponents from '@/components/tscomponents';
-  import packagepath from '../../../../package.json';
-  console.log(packagepath);
 
   // import SvgIcon from '@/components/SvgIcon/index.vue'
   // import { getCurrentInstance } from 'vue'