perf: 工作台页面优化

src/views/components/management/account/index.vue

@@ -1,16 +1,20 @@
 <template>
-  <Container title="账号信息" class="container mt-24px">
-    <template #header>
+  <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
+    <div class="title-row">
+      <span class="title">账号管理</span>
       <a-button type="outline" class="add-account-button" @click="handleAddAccount">添加子账号</a-button>
-    </template>
+    </div>
     <a-table
       :columns="columns"
       :data="data"
       :pagination="pagination"
-      class="mt-16px"
+      class="mt-8px h-540px"
       @page-change="handlePageChange"
       @page-size-change="handlePageSizeChange"
     >
+      <template #empty>
+        <NoData />
+      </template>
       <template #mobile="{ record }">
         <div class="flex item-center pt-13px pb-13px">
           <span class="mr-4px">{{ record.mobile }}</span>
@@ -52,7 +56,7 @@
     <DeleteModal v-model:visible="deleteVisible" :title="deleteTitle" @ok="handleDelete">
       <p class="delete-modal-content">删除后，该账号将无法登录您的企业。</p>
     </DeleteModal>
-  </Container>
+  </div>
 </template>
 <script setup lang="ts">
 import Container from '@/components/container.vue';
@@ -277,4 +281,19 @@ onMounted(() => {
   font-size: 12px;
   color: var(--Text-2, rgba(60, 64, 67, 1));
 }
+.title-row {
+  display: flex;
+  height: 64px;
+  padding: 10px 0 2px 0;
+  align-items: center;
+  justify-content: space-between;
+  .title {
+    color: var(--Text-1, #211f24);
+    font-family: 'PuHuiTi-Medium';
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  }
+}
 </style>

src/views/components/management/enterprise/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <Container title="企业信息" class="container mt-24px">
-    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-16px">
+  <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
+    <div class="title-row">
+      <span class="title">企业信息</span>
+    </div>
+    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
+      <template #empty>
+        <NoData />
+      </template>
       <template #info="{ record }">
         {{ record.name }}
       </template>
@@ -27,7 +33,7 @@
       </a-form>
     </Modal>
     <CustomerServiceModal v-model:visible="customerServiceVisible" />
-  </Container>
+  </div>
 </template>
 <script setup lang="ts">
 import Container from '@/components/container.vue';
@@ -155,4 +161,18 @@ async function handleOk() {
   font-size: 12px;
   color: rgba(109, 76, 254, 1);
 }
+.title-row {
+  display: flex;
+  height: 64px;
+  padding: 10px 0 2px 0;
+  align-items: center;
+  .title {
+    color: var(--Text-1, #211f24);
+    font-family: 'PuHuiTi-Medium';
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  }
+}
 </style>

src/views/components/management/person/index.vue

@@ -1,6 +1,12 @@
 <template>
-  <Container title="个人信息" class="container mt-24px">
-    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-16px">
+  <div class="bg-#fff rounded-8px border-1px border-#D7D7D9 border-solid w-100% py-0 px-20px mt-24px pb-24px">
+    <div class="title-row">
+      <span class="title">个人信息</span>
+    </div>
+    <a-table :columns="columns" :data="dataSource" :pagination="false" class="mt-8px h-540px">
+      <template #empty>
+        <NoData />
+      </template>
       <template #info="{ record }">
         <div class="pt-3px pb-3px">
           <a-avatar :image-url="record.head_image" :size="32" />
@@ -71,7 +77,7 @@
         @cancel="verificationVisible = false"
       />
     </Modal>
-  </Container>
+  </div>
 </template>
 <script setup lang="ts">
 import Container from '@/components/container.vue';
@@ -248,7 +254,7 @@ function getFileExtension(filename: string): string {
   return match ? match[1].toLowerCase() : '';
 }
 </script>
-<style scoped lang="less">
+<style scoped lang="scss">
 .form {
   margin-top: 13px;
   :deep(.arco-row) {
@@ -305,4 +311,18 @@ function getFileExtension(filename: string): string {
     color: var(--Text-2, rgba(60, 64, 67, 1));
   }
 }
+.title-row {
+  display: flex;
+  height: 64px;
+  padding: 10px 0 2px 0;
+  align-items: center;
+  .title {
+    color: var(--Text-1, #211f24);
+    font-family: 'PuHuiTi-Medium';
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 24px; /* 150% */
+  }
+}
 </style>

src/views/components/workplace/index.vue

@@ -4,15 +4,9 @@
 -->
 <template>
   <div class="m-auto mt-24px max-w-1000px">
-    <Container title="推荐产品" class="body">
-      <div class="flex flex-wrap">
-        <Product
-          v-for="product in products"
-          :key="product.id"
-          class="mt-20px ml-20px"
-          :product="product"
-          @refresh="getProductList"
-        />
+    <Container title="推荐产品" class="container-body">
+      <div class="grid grid-cols-3 gap-20px">
+        <Product v-for="product in products" :key="product.id" :product="product" @refresh="getProductList" />
       </div>
       <NoData v-if="products.length === 0" />
     </Container>
@@ -53,10 +47,10 @@ const getSuccessCaseList = async () => {
 </script>
 
 <style scoped lang="less">
-.body {
-  padding-left: 4px !important;
+.container-body {
+  padding-left: 24px !important;
   :deep(> div > .title) {
-    padding-left: 20px;
+    margin-bottom: 16px;
   }
 }
 </style>

src/views/components/workplace/modules/product.vue

@@ -15,8 +15,8 @@
         format="D天H时m分s秒"
       />
     </div>
-    <div class="body">
-      <h1 class="title">{{ props.product.name }}</h1>
+    <div class="product-info">
+      <h1 class="title mb4">{{ props.product.name }}</h1>
       <p class="desc">
         {{ props.product.desc }}
       </p>
@@ -118,7 +118,7 @@ const gotoModule = (menuId: number) => {
   width: 304px;
   height: 220px;
   border-radius: 8px;
-  border: 1px solid rgba(230, 230, 232, 1);
+  border: 1px solid var(--BG-300, #e6e6e8);
   padding: 20px;
 
   .avatar {
@@ -185,11 +185,12 @@ const gotoModule = (menuId: number) => {
     }
   }
 
-  .body {
+  .product-info {
     height: 88px;
     margin-top: 12px;
 
     .title {
+      color: var(--Text-1, #211f24);
       font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 16px;
@@ -199,6 +200,7 @@ const gotoModule = (menuId: number) => {
     }
 
     .desc {
+      color: var(--Text-3, #737478);
       font-family: 'PuHuiTi-Medium';
       font-weight: 400;
       font-size: 12px;
@@ -208,7 +210,7 @@ const gotoModule = (menuId: number) => {
   }
 
   .footer {
-    padding-top: 16px;
+    margin-top: 16px;
 
     .primary-button {
       height: 24px;