feat: update less

src/components/card/index.vue

@@ -86,6 +86,9 @@ export default defineComponent({
     display: flex;
     align-items: center;
     justify-content: center;
+    // position: absolute;
+    // top: 30px;
+    // right: 32px;
   }
 
   &-container {

src/components/color.vue

@@ -34,3 +34,4 @@ export default defineComponent({
   display: inline-block;
 }
 </style>
+

src/components/result/index.vue

@@ -49,20 +49,20 @@ export default defineComponent({
 .result {
 
   &-link {
-    color: @primary-color;
+    color: @brand-color;
     text-decoration: none;
     cursor: pointer;
 
     &:hover {
-      color: @primary-color;
+      color: @brand-color;
     }
 
     &:active {
-      color: @primary-color;
+      color: @brand-color;
     }
 
     &--active {
-      color: @primary-color;
+      color: @brand-color;
     }
 
     &:focus {
@@ -88,7 +88,7 @@ export default defineComponent({
   &-tip {
     margin: 16px 0 8px;
     font-size: @font-size-base;
-    color: @text-level-2-color;
+    color: @text-color-secondary;
     line-height: 22px;
   }
 }

src/components/trend/index.vue

@@ -77,8 +77,6 @@ export default defineComponent({
 </script>
 
 <style lang="less" scoped>
-@import url('@/style/index.less');
-
 .trend {
 
   &-container {

src/config/proxy.ts

@@ -1,10 +1,4 @@
 export default {
-  production: {
-    // 开发环境接口请求
-    host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
-    // 开发环境 cdn 路径
-    cdn: '',
-  },
   development: {
     // 开发环境接口请求
     host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',

src/constants/index.ts

@@ -33,3 +33,10 @@ export const CONTRACT_PAYMENT_TYPES = {
   PAYMENT: 0,
   RECIPT: 1,
 };
+
+// 通知的优先级对应的TAG类型
+export const NOTIFICATION_TYPES = {
+  low: 'primary',
+  middle: 'warning',
+  high: 'danger',
+};

src/pages/detail/advanced/index.less

@@ -1,26 +1,31 @@
 @import '@/style/index';
+
 .t-tabs__content {
   padding-top: @spacer-3;
 }
+
 .t-layout--content-replace {
-  color: rgba(0, 0, 0, 0.6) !important;
+  color: rgba(0, 0, 0, .6) !important;
 }
 
 .row-padding {
   padding-top: 30px;
   padding-left: 20px;
 }
+
 .operater-block-container {
   padding: 10px 0 30px;
 }
+
 .operater-add {
   width: 100%;
-  height: 210px;
+  height: 256px;
   display: flex;
   align-items: center;
   justify-items: center;
   padding: 20px 10px 24px 20px;
   border: dashed 1px #dedede;
+  border-radius: 3px;
 
   .operater-sub {
     font-size: 14px;
@@ -29,15 +34,24 @@
     text-align: center;
     line-height: 22px;
     display: flex;
+    flex-direction: column;
     align-items: center;
     cursor: pointer;
-    .t-icon {
+
-      color: @brand-color-8;
+    svg {
+
+      rect {
+        fill: @brand-color-2;
+      }
+
+      path {
+        fill: @brand-color;
+      }
     }
   }
 
   span {
-    padding-left: 10px;
+    padding-top: 12px;
   }
 }
 
@@ -46,41 +60,96 @@
 }
 
 .operater-block {
-  background-color: #EBEDF1;
+  position: relative;
-  padding: 20px 10px 24px 20px;
+  background-color: #fff;
-  height: 210px;
+  border: 1px solid #e3e6eb;
+  border-radius: 3px;
+
+  .operater-content {
+    padding: 20px 32px 24px 32px;
+    height: 256px;
 
     .operater-title {
-    display: flex;
-    align-items: center;
       margin-bottom: 25px;
+      position: relative;
 
       h1 {
         display: inline-block;
-      padding-left: 20px;
+        font-weight: 500;
-      font-weight: bold;
+        font-size: 24px;
+      }
+
+      &-subtitle {
+        display: block;
+        font-weight: 400;
         font-size: 14px;
+        width: 60%;
+        color: rgba(0, 0, 0, .4);
+      }
+
+      &-tag {
+        margin-right: 8px;
+      }
+
+      &-icon {
+        position: absolute;
+        top: 0px;
+        right: 0px;
+      }
+
+      svg {
+
+        circle {
+          fill: @brand-color-2;
+        }
+
+        path {
+          fill: @brand-color;
         }
       }
+    }
+
     .operater-item {
-    padding-left: 48px;
+      position: relative;
       padding-top: 8px;
       padding-bottom: 8px;
-    display: flex;
+
-    h1 {
+      &-info {
         display: inline-block;
-      width: 136px;
+        width: 60%;
         text-align: left;
         font-size: 14px;
-      color: rgba(0,0,0,0.60);
+        color: rgba(0, 0, 0, .4);
       }
-    span {
+
+      &-icon {
+        position: absolute;
+        bottom: 0;
+        right: 0;
+      }
+    }
+  }
+
+  .operater-footer {
+    position: absolute;
     width: 100%;
+    bottom: 0px;
+
+    .t-progress--thin {
+      display: unset;
+    }
+
+    &-percentage {
+      position: absolute;
+      bottom: 15px;
+      right: 32px;
+      color: rgba(0, 0, 0, .4);
     }
   }
 }
 
 .@{prefix} {
+
   &-panel {
     background-color: white;
     padding: @spacer-3;
@@ -98,8 +167,8 @@
   }
 
   &-operater-title {
-    font-size: 16px;
+    font-size: 20px;
-    color: rgba(0, 0, 0, 0.9);
+    color: rgba(0, 0, 0, .9);
     font-weight: bold;
   }
 
@@ -116,17 +185,32 @@
     padding: 12px 0;
     display: flex;
 
+    @media (max-width: @screen-sm-max) {
+
+      h1 {
+        width: 80px;
+      }
+    }
+
+    @media (min-width: @screen-md-min) {
+
+      h1 {
+        width: 200px;
+      }
+    }
+
     h1 {
-      width: 84px;
       font-family: PingFangSC-Regular;
       font-size: 14px;
       color: @text-color-secondary;
       text-align: left;
       line-height: 22px;
     }
+
     span {
       margin-left: 24px;
     }
+
     i {
       display: inline-block;
       width: 8px;
@@ -134,14 +218,17 @@
       border-radius: @border-radius-50;
       background: @success-color-5;
     }
+
     .inProgress {
       color: @success-color-5;
     }
+
     .pdf {
       color: @brand-color-8;
     }
   }
 }
+
 .dialog-info-block {
 
   .info-item {
@@ -156,9 +243,11 @@
       text-align: left;
       line-height: 22px;
     }
+
     span {
       margin-left: 24px;
     }
+
     i {
       display: inline-block;
       width: 8px;
@@ -166,9 +255,11 @@
       border-radius: @border-radius-50;
       background: @success-color-5;
     }
+
     .green {
       color: @success-color-5;
     }
+
     .blue {
       color: @brand-color-8;
     }

src/pages/detail/advanced/index.vue

@@ -1,7 +1,5 @@
 <template>
   <div>
-    <t-page-header>合同详情页</t-page-header>
-
     <div :class="prefix + '-panel'">
       <div class="base-info">
         <t-row
@@ -65,7 +63,7 @@
           />
           <t-step-item
             title="完成"
-            content=""
+            content
           />
         </t-steps>
       </t-row>
@@ -85,57 +83,182 @@
         <t-col :flex="1">
           <div class="operater-add">
             <div class="operater-sub">
-              <t-icon
+              <svg
-                name="add"
+                width="34"
-                size="20px"
+                height="34"
+                viewBox="0 0 34 34"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <rect
+                  x="0.5"
+                  y="0.5"
+                  width="33"
+                  height="33"
+                  rx="16.5"
+                  stroke="white"
                 />
+                <path d="M16.35 17.6501V21.5H17.65V17.6501H21.5V16.3501H17.65V12.5H16.35V16.3501H12.5V17.6501H16.35Z" />
+              </svg>
               <span>新增产品</span>
             </div>
           </div>
         </t-col>
         <t-col :flex="1">
           <div class="operater-block operater-gap">
+            <div class="operater-content">
               <div class="operater-title">
-              <t-icon
+                <svg
-                name="server"
+                  class="operater-title-icon"
-                size="2em"
+                  width="56"
+                  height="56"
+                  viewBox="0 0 56 56"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="28"
+                    cy="28"
+                    r="28"
                   />
-              <h1>Macbook</h1>
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M14 18H17.1529L19.93 34.663C20.0586 35.4345 20.7261 36 21.5083 36H40V34H21.8471L21.1805 30H38.4478C39.182 30 39.8219 29.5003 40 28.7881L41.7 21.9881C41.9525 20.9782 41.1887 20 40.1478 20H19.5138L19.07 17.337C18.9414 16.5655 18.2739 16 17.4917 16H14V18ZM38.1355 28H20.8471L19.8471 22H39.6355L38.1355 28Z"
+                  />
+                  <path
+                    d="M21.5 41C22.3284 41 23 40.3284 23 39.5C23 38.6716 22.3284 38 21.5 38C20.6716 38 20 38.6716 20 39.5C20 40.3284 20.6716 41 21.5 41Z"
+                  />
+                  <path
+                    d="M37.6259 41C38.4543 41 39.1259 40.3284 39.1259 39.5C39.1259 38.6716 38.4543 38 37.6259 38C36.7975 38 36.1259 38.6716 36.1259 39.5C36.1259 40.3284 36.7975 41 37.6259 41Z"
+                  />
+                </svg>
+
+                <h1>Macbook Pro 2021</h1>
+                <div class="operater-title-subtitle">
+                  Macbook Pro 2021
+                </div>
+                <div class="operater-title-tags">
+                  <t-tag
+                    class="operater-title-tag"
+                    theme="success"
+                    size="small"
+                  >
+                    13.3 英寸
+                  </t-tag>
+                  <t-tag
+                    class="operater-title-tag"
+                    size="small"
+                  >
+                    Apple M1
+                  </t-tag>
+                  <t-tag
+                    class="operater-title-tag"
+                    size="small"
+                  >
+                    RAM 16GB
+                  </t-tag>
+                </div>
               </div>
               <div class="operater-item">
-              <h1>产品编号</h1>
+                <span
-              <span>p_tmp_60a637cd0d</span>
+                  class="operater-item-info"
+                >最高可选配 16GB 内存 · 最高可选配 2TB 存储设备 电池续航最长达 18 小时</span>
+                <t-icon
+                  class="operater-item-icon"
+                  name="chevron-right"
+                  size="small"
+                  style="color: rgba(0, 0, 0, .26)"
+                />
               </div>
-            <div class="operater-item">
+              <div class="operater-footer">
-              <h1>计费方式</h1>
+                <span class="operater-footer-percentage">1420 / 1500（台）</span>
-              <span>按量计费</span>
+                <t-progress
+                  class="operater-progress"
+                  theme="line"
+                  :percentage="(1420 / 1500) * 100"
+                  :label="false"
+                  track-color="#D4E3FC"
+                />
               </div>
-            <div class="operater-item">
-              <h1>交付时间</h1>
-              <span>2020-12-21 11:05:17</span>
             </div>
           </div>
         </t-col>
         <t-col :flex="1">
           <div class="operater-block operater-gap">
+            <div class="operater-content">
               <div class="operater-title">
-              <t-icon
+                <svg
-                name="server"
+                  class="operater-title-icon"
-                size="2em"
+                  width="56"
+                  height="56"
+                  viewBox="0 0 56 56"
+                  fill="none"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <circle
+                    cx="28"
+                    cy="28"
+                    r="28"
                   />
-              <h1>椅子</h1>
+                  <path
+                    fill-rule="evenodd"
+                    clip-rule="evenodd"
+                    d="M14 18H17.1529L19.93 34.663C20.0586 35.4345 20.7261 36 21.5083 36H40V34H21.8471L21.1805 30H38.4478C39.182 30 39.8219 29.5003 40 28.7881L41.7 21.9881C41.9525 20.9782 41.1887 20 40.1478 20H19.5138L19.07 17.337C18.9414 16.5655 18.2739 16 17.4917 16H14V18ZM38.1355 28H20.8471L19.8471 22H39.6355L38.1355 28Z"
+                  />
+                  <path
+                    d="M21.5 41C22.3284 41 23 40.3284 23 39.5C23 38.6716 22.3284 38 21.5 38C20.6716 38 20 38.6716 20 39.5C20 40.3284 20.6716 41 21.5 41Z"
+                  />
+                  <path
+                    d="M37.6259 41C38.4543 41 39.1259 40.3284 39.1259 39.5C39.1259 38.6716 38.4543 38 37.6259 38C36.7975 38 36.1259 38.6716 36.1259 39.5C36.1259 40.3284 36.7975 41 37.6259 41Z"
+                  />
+                </svg>
+                <h1>Surface Laptop Go</h1>
+                <div class="operater-title-subtitle">
+                  微软（Microsoft Corporation）
+                </div>
+                <div class="operater-title-tags">
+                  <t-tag
+                    class="operater-title-tag"
+                    theme="success"
+                    size="small"
+                  >
+                    12.4 英寸
+                  </t-tag>
+                  <t-tag
+                    class="operater-title-tag"
+                    size="small"
+                  >
+                    Core i7
+                  </t-tag>
+                  <t-tag
+                    class="operater-title-tag"
+                    size="small"
+                  >
+                    RAM 16GB
+                  </t-tag>
+                </div>
               </div>
               <div class="operater-item">
-              <h1>产品编号</h1>
+                <span class="operater-item-info">常规使用 Surface，续航时间最长可达13小时 随时伴您工作</span>
-              <span>p_tmp_60a637cd0C</span>
+                <t-icon
+                  class="operater-item-icon"
+                  name="chevron-right"
+                  size="small"
+                  style="color: rgba(0, 0, 0, .26)"
+                />
               </div>
-            <div class="operater-item">
-              <h1>计费方式</h1>
-              <span>按量计费</span>
             </div>
-            <div class="operater-item">
+            <div class="operater-footer">
-              <h1>交付时间</h1>
+              <span class="operater-footer-percentage">120 / 2000（台）</span>
-              <span>2020-12-21 13:08:09</span>
+              <t-progress
+                class="operater-progress"
+                theme="line"
+                :percentage="(120 / 2000) * 100"
+                :label="false"
+                color="#E24D59"
+                track-color="#FCD4D4"
+              />
             </div>
           </div>
         </t-col>
@@ -157,12 +280,34 @@
         :columns="columns"
         :data="data"
         :pagination="pagination"
-        :bordered="bordered"
         :hover="hover"
         row-key="index"
+        size="large"
         @sort-change="sortChange"
         @change="rehandleChange"
       >
+        <template #pdName="{ row }">
+          <span>
+            {{ row.pdName }}
+            <t-tag
+              v-if="row.pdType"
+              size="small"
+            >{{ row.pdType }}</t-tag>
+          </span>
+        </template>
+
+        <template #purchaseNum="{ row }">
+          <span>
+            {{ row.purchaseNum }}
+            <t-tag
+              v-if="row.purchaseNum > 50"
+              theme="danger"
+              variant="light"
+              size="small"
+            >超预算</t-tag>
+          </span>
+        </template>
+
         <template #op="slotProps">
           <a
             :class="prefix + '-link'"
@@ -173,6 +318,7 @@
             @click="deleteClickOp(slotProps)"
           >删除</a>
         </template>
+
         <template #op-column>
           <t-icon name="descending-order" />
         </template>
@@ -208,8 +354,8 @@
 </template>
 <script lang="ts">
 import { defineComponent } from 'vue';
-import model from './index';
 import { PREFIX as prefix } from '@/config/global';
+import model from './index';
 
 // 导入样式
 import './index.less';

src/pages/detail/base/index.less

@@ -1,12 +1,14 @@
 @import '@/style/index';
+
 .t-tabs__content {
   padding-top: @spacer-3;
 }
 
 .@{prefix} {
+
   &-panel {
     background-color: white;
-    padding: @spacer-3;
+    padding: @spacer-4;
     border-radius: @border-radius;
   }
 
@@ -15,9 +17,13 @@
   }
 
   &-operater-title {
-    font-size: 16px;
+    font-weight: 400;
     color: @text-color-primary;
     font-family: PingFangSC-Medium;
+
+    .t-steps-item-title {
+      font-size: @font-size-base;
+    }
   }
 }
 
@@ -28,18 +34,33 @@
     padding: 12px 0;
     display: flex;
 
+    @media (max-width: @screen-sm-max) {
+
+      h1 {
+        width: 80px;
+      }
+    }
+
+    @media (min-width: @screen-md-min) {
+
+      h1 {
+        width: 200px;
+      }
+    }
+
     h1 {
       font-weight: normal;
-      width: 84px;
       font-family: PingFangSC-Regular;
-      font-size: 14px;
+      font-size: @font-size-base;
       color: @text-color-secondary;
       text-align: left;
       line-height: 22px;
     }
+
     span {
       margin-left: 24px;
     }
+
     i {
       display: inline-block;
       width: 8px;
@@ -47,9 +68,11 @@
       border-radius: @border-radius-50;
       background: @success-color-5;
     }
+
     .inProgress {
       color: @success-color-5;
     }
+
     .pdf {
       color: @brand-color-8;
     }

src/pages/detail/base/index.vue

@@ -1,6 +1,5 @@
 <template>
   <div>
-    <t-page-header> 合同基础详情 </t-page-header>
     <div :class="prefix + '-panel'">
       <div class="base-info">
         <t-row

src/pages/detail/secondary/index.less

@@ -4,23 +4,28 @@
   background-color: white;
   border-radius: @border-radius;
   margin-top: 16px;
+  padding: 32px;
 
   .t-tabs__content {
     padding-top: 0;
   }
 }
+
 .secondary-msg-list {
   min-height: 443px;
   max-height: calc(100vh - 400px);
 
   .t-list-item {
     cursor: pointer;
+    padding: 16px 24px 16px 0;
 
     &:hover {
       background-color: @bg-color-container-hover;
+
       .msg-date {
         display: none;
       }
+
       .msg-action {
         display: flex;
         align-items: center;
@@ -32,10 +37,11 @@
       }
     }
   }
+
   .content {
     font-family: PingFangSC-Medium;
     font-size: 14px;
-    color:@text-color-placeholder;
+    color: @text-color-placeholder;
     text-align: left;
     line-height: 22px;
     overflow: hidden;
@@ -46,9 +52,11 @@
       font-family: PingFangSC-Regular;
     }
   }
+
   .unread {
     color: @brand-color-8;
   }
+
   .msg-action {
     display: none;
 
@@ -56,6 +64,7 @@
       margin-right: 24px;
     }
   }
+
   &__empty-list {
     min-height: 443px;
     padding-top: 170px;

src/pages/detail/secondary/index.vue

@@ -19,12 +19,19 @@
               :class="['content', { unread: item.status }]"
               @click="setReadStatus(item)"
             >
-              {{ item.content }}<span> - {{ item.type }}</span>
+              <t-tag
+                class="operater-title-tag"
+                size="small"
+                :theme="NOTIFICATION_TYPES[item.priorty]"
+                variant="light"
+              >
+                {{ item.type }}
+              </t-tag>
+              {{ item.content }}
             </p>
             <template #action>
-              <p class="msg-date">
+              <span class="msg-date">{{ item.date }}</span>
-                {{ item.date }}
+
-              </p>
               <div class="msg-action">
                 <t-tooltip
                   class="set-read-icon"
@@ -55,16 +62,20 @@
                       <path
                         d="M11.7786 14.9286L15.3536 11.3535L14.6464 10.6465L11.7786 13.5144L10.1318 11.8677L9.42471 12.5748L11.7786 14.9286Z"
                         fill="black"
-                      /></svg></span>
+                      />
+                    </svg>
+                  </span>
                 </t-tooltip>
                 <t-tooltip
                   content="删除通知"
                   :overlay-style="{ margin: '6px' }"
                 >
-                  <span @click="handleClickDeleteBtn(item)"><t-icon
+                  <span @click="handleClickDeleteBtn(item)">
+                    <t-icon
                       name="delete"
                       size="16px"
-                  /></span>
+                    />
+                  </span>
                 </t-tooltip>
               </div>
             </template>
@@ -98,7 +109,15 @@
               :class="['content', { unread: item.status }]"
               @click="setReadStatus(item)"
             >
-              {{ item.content }}<span> - {{ item.type }}</span>
+              <t-tag
+                class="operater-title-tag"
+                size="small"
+                :theme="NOTIFICATION_TYPES[item.priorty]"
+                variant="light"
+              >
+                {{ item.type }}
+              </t-tag>
+              {{ item.content }}
             </p>
             <template #action>
               <p class="msg-date">
@@ -121,10 +140,12 @@
                   content="删除通知"
                   :overlay-style="{ margin: '6px' }"
                 >
-                  <span @click="handleClickDeleteBtn(item)"><t-icon
+                  <span @click="handleClickDeleteBtn(item)">
+                    <t-icon
                       name="delete"
                       size="16px"
-                  /></span>
+                    />
+                  </span>
                 </t-tooltip>
               </div>
             </template>
@@ -155,7 +176,15 @@
             :key="index"
           >
             <p :class="['content', { unread: item.status }]">
-              {{ item.content }}<span> - {{ item.type }}</span>
+              <t-tag
+                class="operater-title-tag"
+                size="small"
+                :theme="NOTIFICATION_TYPES[item.priorty]"
+                variant="light"
+              >
+                {{ item.type }}
+              </t-tag>
+              {{ item.content }}
             </p>
             <template #action>
               <p class="msg-date">
@@ -193,10 +222,12 @@
                   content="删除通知"
                   :overlay-style="{ margin: '6px' }"
                 >
-                  <span @click="handleClickDeleteBtn(item)"><t-icon
+                  <span @click="handleClickDeleteBtn(item)">
+                    <t-icon
                       name="delete"
                       size="16px"
-                  /></span>
+                    />
+                  </span>
                 </t-tooltip>
               </div>
             </template>
@@ -226,6 +257,7 @@
 import { defineComponent } from 'vue';
 import { mapState, mapGetters } from 'vuex';
 import { PREFIX as prefix } from '@/config/global';
+import { NOTIFICATION_TYPES } from '@/constants';
 
 // 导入样式
 import './index.less';
@@ -235,6 +267,7 @@ export default defineComponent({
   components: {},
   data() {
     return {
+      NOTIFICATION_TYPES,
       prefix,
       data: [],
       value: 'frist',

src/pages/form/base/index.less

@@ -1,29 +1,27 @@
 @import '@/style/index';
+
 .t-tabs__content {
   padding-top: @spacer-3;
 }
 
 .@{prefix} {
+
   &-panel {
     background-color: white;
     padding: @spacer-3;
     border-radius: @border-radius;
+  }
 
-    .base-form {
-      .t-form__label {
-        min-width: 108px;
-      }
-    }
-  }
   &-form {
     padding-right: 50px;
     padding-top: 30px;
-    border-top: solid 1px #EEEEEE;
+    border-top: solid 1px #eee;
   }
 }
+
 .upload-tips {
   margin-left: 16px;
   font-size: 12px;
-  color: @text-level-2-color;
+  color: @text-color-secondary;
   line-height: 20px;
 }

src/pages/form/step/index.less

@@ -1,9 +1,11 @@
 @import '@/style/index';
+
 .t-tabs__content {
   padding-top: @spacer-3;
 }
 
 .@{prefix} {
+
   &-panel {
     background-color: white;
 
@@ -11,13 +13,15 @@
       padding: 0;
     }
   }
+
   &-step {
     padding: 14px 0 24px 0;
   }
+
   &-form {
     padding-right: 50px;
     padding-top: 30px;
-    border-top: solid 1px #eeeeee;
+    border-top: solid 1px #eee;
   }
 }
 
@@ -27,7 +31,7 @@
 
 .step-top {
   padding: 24px;
-  border-bottom: #eeeeee solid 1px;
+  border-bottom: #eee solid 1px;
 }
 
 .step-form {
@@ -46,17 +50,19 @@
   .t-icon {
     margin: 6px;
   }
+
   .text {
     margin: 16px 0 8px 0;
     font-weight: bold;
     font-size: 20px;
-    color: @text-level-1-color;
+    color: @text-color-primary;
     line-height: 30px;
   }
+
   .tips {
     margin-bottom: 24px;
     font-size: 14px;
-    color: @text-level-2-color;
+    color: @text-color-secondary;
     line-height: 22px;
   }
 }

src/pages/list/select/index.vue

@@ -1,5 +1,4 @@
 <template>
-  <t-page-header> 合同档案 </t-page-header>
   <list-common-table />
 </template>
 <script lang="ts">
@@ -14,6 +13,24 @@ export default defineComponent({
 });
 
 </script>
-<style>
+<style lang="less" scoped>
+@import '@/style/index';
+.@{prefix} {
 
+  &-panel {
+    background-color: white;
+    padding: @spacer-3;
+    border-radius: @border-radius;
+  }
+
+  &-operater-row {
+    margin-bottom: 16px;
+  }
+
+  &-form-item-content {
+    width: 240px;
+    display: inline-block;
+    margin-right: 40px;
+  }
+}
 </style>

src/pages/result/success/index.vue

@@ -45,6 +45,7 @@ export default defineComponent({
   justify-content: center;
   align-items: center;
   height: 75vh;
+
   &-icon {
     font-size: 64px;
     color: @success-color;
@@ -53,7 +54,7 @@ export default defineComponent({
   &-title {
     margin-top: 16px;
     font-size: 20px;
-    color: rgba(0, 0, 0, 0.9);
+    color: rgba(0, 0, 0, .9);
     text-align: center;
     line-height: 22px;
   }
@@ -61,7 +62,7 @@ export default defineComponent({
   &-describe {
     margin: 8px 0 32px;
     font-size: 14px;
-    color: rgba(0, 0, 0, 0.6);
+    color: rgba(0, 0, 0, .6);
     line-height: 22px;
   }
 }

src/pages/user/index.less

@@ -1,35 +1,42 @@
 @import '@/style/index';
-.user-panel {
 
+.user-panel {
   @media (max-width: @screen-sm-max) {
+
     .user-right {
       min-width: 100%;
     }
   }
 
   @media (min-width: @screen-md-min) {
+
     .user-right {
       min-width: 33.33%;
     }
   }
+
   .user-right {
     transition: width .3s linear;
+
     &-greeting {
       margin-bottom: 16px;
       background: #fff;
       border-radius: @border-radius;
     }
+
     &-trend {
       margin-bottom: 16px;
       background: #fff;
       border-radius: @border-radius;
     }
+
     &-todo {
       margin-bottom: 16px;
       background: #fff;
       border-radius: @border-radius;
     }
   }
+
   .head-bar {
     display: flex;
     justify-content: space-between;
@@ -37,11 +44,17 @@
 
     .title {
       line-height: 24px;
-      font-family: PingFangSC-Medium;
+      font-family: PingFangSC;
-      font-size: 16px;
+      font-size: 20px;
-      color: @text-level-1-color;
+      color: @text-color-primary;
       text-align: left;
     }
+
+    .t-icon {
+      font-size: 16px;
+      color: rgba(0, 0, 0, .9);
+    }
+
     .more {
       display: flex;
       align-items: center;
@@ -49,250 +62,218 @@
       line-height: 22px;
       font-family: PingFangSC-Regular;
       font-size: 14px;
-      color: @text-level-1-color;
+      color: @text-color-primary;
       cursor: pointer;
 
       .t-icon {
         vertical-align: bottom;
         font-size: 20px;
       }
+
       &:hover {
         color: @brand-color-8;
       }
     }
   }
 
-  .user-left {
+  .user-right-panel {
+
     .user-top {
-      padding: 24px;
+      padding: 48px;
-      margin: 0 16px 16px 0;
+      margin: 0 0 16px 16px;
-      background: #fff;
+      background: @brand-color;
       border-radius: @border-radius;
 
       .account {
-        text-align: center;
+        text-align: left;
-        margin-bottom: 48px;
+        margin-bottom: 0;
-        color: @text-level-1-color;
+        color: @text-color-primary;
 
         .img {
           display: block;
-          width: 122px;
+          width: 90px;
-          height: 122px;
+          height: 90px;
           border-radius: @border-radius-50;
-          background: #EBEDF1;
+          border: 1px solid @brand-color;
-          margin-top: 16px;
+          background: #ebedf1;
-          margin-left: 50%;
-          transform: translateX(-50%);
         }
+
         .name {
           line-height: 37px;
           font-family: PingFangSC-Semibold;
-          font-size: 26px;
+          font-size: 20px;
-          margin-top: 16px;
+          margin-top: 36px;
+          color: #fff;
         }
+
         .position {
           line-height: 24px;
           font-family: PingFangSC-Regular;
           font-size: 14px;
           margin-top: 8px;
+          color: #fff;
         }
       }
+
       .user-info {
         line-height: 24px;
         font-family: PingFangSC-Regular;
         font-size: 14px;
-        color: @text-level-1-color;
+        color: @text-color-primary;
-        .hiredate, .del, .mail {
+
+        .hiredate,
+        .del,
+        .mail {
           display: flex;
         }
+
         .t-icon {
           height: 24px;
           margin-right: 8px;
         }
+
         .del {
           margin: 16px 0;
         }
       }
     }
-    .user-bottom {
+
-      padding: 24px 24px 0 24px;
+    .user-middle {
-      margin: 0 16px 16px 0;
+      padding: 28px 32px 5px 32px;
+      margin: 0 0 16px 16px;
       background: #fff;
       border-radius: @border-radius;
 
+      .t-list {
+        margin: 20px 0;
+      }
+
       .t-list-item {
-        height: 64px;
+        padding: 15px 0;
-        min-width: 230px;
-        margin: 8px 0 16px 0;
-        background: #F3F3F3;
-        border-radius: @border-radius;
         
         .t-list-item__meta-avatar {
-          height: 32px;
+          height: 50px;
-          width: 32px;
+          width: 50px;
-          margin: auto;
+          margin: 0 24px 0 0;
-        }
-        .t-list-item__meta-content {
-          line-height: 22px;
-          margin-left: 10px;
-          padding: 5px 0;
-        }
-        .t-list-item__meta-title {
-          display: inline-block;
-          margin: 0 7px 0 0;
         }
+
         .t-list-item__meta-description {
           display: inline-block;
-          color: @text-color-secondary;
+          color: rgba(0, 0, 0, .4);
-          font-size: 12px;
+          font-size: 14px;
+        }
       }
-        .t-list-item__action {
-          li {
-            margin-right: 16px;
-            cursor: pointer;
     }
-          .t-icon {
-            color: @text-level-1-color;
 
-            &:hover {
+    .user-bottom {
-              color: @brand-color-8;
+      padding: 24px 24px 5px 24px;
+      margin: 0 0 16px 16px;
+      background: #fff;
+      border-radius: @border-radius;
+
+      .content {
+        width: 70%;
+        margin: 24px 0 12px 0;
+      }
+
+      .user-right-logo {
+        width: 48px;
       }
     }
   }
-      }
+
-    }
+  .user-left-panel {
-  }
+
-  .user-right {
     .user-top {
-      .user-right-greeting {
+
-        padding: 24px;
+      .user-left-greeting {
+        padding: 28px 32px;
         line-height: 28px;
         font-family: PingFangSC-Semibold;
         font-size: 20px;
-        color: @text-level-1-color;
+        color: @text-color-primary;
         text-align: left;
-        .regular {
+        background-color: #fff;
-          vertical-align: bottom;
-          font-family: PingFangSC-Regular;
-          font-size: 14px;
-        }
-      }
-      .user-right-trend {
-        padding: 24px;
-
-        .t-list-item {
-          padding: 8px 0;
-          cursor: pointer;
-
-          .text {
-            display: flex;
-            line-height: 20px;
-            font-family: PingFangSC-Regular;
-            font-size: 14px;
-            color: @text-level-1-color;
-
-            .t-icon {
-              margin-right: 8px;
-              height: 20px;
-              font-size: 16px;
-              color: @text-level-3-color;
-            }
-            p {
-              display: inline-block;
-            }
-          }
-          .t-list-item__action {
-            line-height: 20px;
-            font-family: PingFangSC-Regular;
-            font-size: 12px;
-            color: @text-level-2-color;
-          }
-          &:hover {
-            .text {
-              color: @brand-color-8;
-
-              .t-icon {
-                color: @brand-color-8;
-              }
-            }
-          }
-        }
-        .t-list-item:last-child {
-          padding-bottom: 0;
-        }
-      }
-      .user-right-todo {
-        padding: 24px;
-
-        .empty-list {
-          margin-top: 18px;
-          line-height: 20px;
-          font-family: PingFangSC-Regular;
-          font-size: 14px;
-          color: @text-level-3-color;
-          text-align: center;
-
-          img {
-            margin-bottom: 2px;
-            width: 42px;
-          }
-        }
-      }
-    }
-    .user-bottom {
-      padding: 24px;
-      background: #fff;
         border-radius: @border-radius;
 
+        .regular {
+          margin: 0 0 0 15px;
+          vertical-align: bottom;
+          font-family: PingFangSC-Semibold;
+          font-size: 14px;
+        }
+      }
+
+      .user-left-logo {
+        float: right;
+        width: 180px;
+      }
+
+      .user-right-info {
+        margin: 16px 0;
+        padding: 32px;
+        background-color: #fff;
+        border-radius: @border-radius;
+
+        .content {
+          width: 90%;
+        }
+        
         .contract {
           width: 340px;
           height: 88px;
           border-radius: @border-radius;
           margin: 8px 0;
-        cursor: pointer;
   
-        &-type {
-          position: relative;
-          float: left;
-          margin: 13px 16px;
-
-          img {
-            width: 64px;
-            height: 64px;
-          }
-        }
           &-title {
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
             line-height: 24px;
             margin: 20px 0 6px 0;
-          font-family: PingFangSC-Medium;
+            font-family: PingFangSC-Regular;
-          font-size: 16px;
+            font-size: 14px;
-          color: @text-level-1-color;
+            color: rgba(0, 0, 0, .4);
           }
-        &-date {
+  
+          &-detail {
             white-space: nowrap;
             text-overflow: ellipsis;
             overflow: hidden;
-          line-height: 22px;
+            line-height: 40px;
             font-family: PingFangSC-Regular;
             font-size: 14px;
-          color: @text-level-3-color;
+            color: rgba(0, 0, 0, .9);
-        }
-        &:hover {
-          background: #f7f7f7;
           }
         }
-      .contract:last-child,
+  
-      .contract:nth-last-child(2) {
+        .contract:last-child {
           margin-bottom: 0;
         }
       }
     }
-  .user-bottom .user-right{
+
-    height: 447px;
+    .user-bottom {
+      margin: 0 0 16px 0;
+      padding: 28px 32px;
       background: #fff;
       border-radius: @border-radius;
+
+      .user-bottom-container {
+        margin-top: 15px;
+
+        .unit {
+          font-size: 14px;
+          font-family: PingFangSC-Regular;
+          color: rgba(0, 0, 0, .4);
+        }
+        
+        .time-picker {
+          float: right;
+          width: 250px;
+        }
+      }
+    }
   }
 }
+

src/style/index.less

@@ -9,13 +9,12 @@
 @import './sidenav.less';
 
 body {
-  color: @text-level-2-color;
+  color: @text-color-secondary;
   font-family: -apple-system, BlinkMacSystemFont, @font-family;
   font-size: @font-size-base;
   line-height: 1.5;
   -webkit-font-smoothing: antialiased;
   padding: 0;
-  min-width: @screen-sm-min;
 }
 
 pre {
@@ -57,7 +56,7 @@ p {
   
 .@{prefix}-text-tip {
   font-size: 12px;
-  color: @text-level-3-color;
+  color: @text-color-placeholder;
 }
   
 .@{prefix}-pic {
@@ -67,16 +66,16 @@ p {
 }
   
 .@{prefix}-main-link {
-  color: @text-level-1-color;
+  color: @text-color-primary;
   text-decoration: none;
   cursor: pointer;
   
   &:hover {
-    color: @text-level-1-color;
+    color: @text-color-primary;
   }
   
   &:active {
-    color: @text-level-1-color;
+    color: @text-color-primary;
   }
   
   &--active {
@@ -89,7 +88,7 @@ p {
 }
   
 .@{prefix}-link {
-  color: @primary-color;
+  color: @brand-color;
 
   text-decoration: none;
   margin-right: @spacer-3;
@@ -97,15 +96,15 @@ p {
   cursor: pointer;
     
   &:hover {
-    color: @primary-color;
+    color: @brand-color;
   }
   
   &:active {
-    color: @primary-color;
+    color: @brand-color;
   }
   
   &--active {
-    color: @primary-color;
+    color: @brand-color;
   }
   
   &:focus {
@@ -160,7 +159,7 @@ p {
   height: 0;
   border-style: solid;
   border-width: 0 6px 8px 6px;
-  border-color: transparent transparent #00A870 transparent;
+  border-color: transparent transparent #00a870 transparent;
 }
 
 .@{prefix}-down-triangle {
@@ -168,5 +167,5 @@ p {
   height: 0;
   border-style: solid;
   border-width: 8px 6px 0 6px;
-  border-color: #E34D59 transparent transparent transparent;
+  border-color: #e34d59 transparent transparent transparent;
 }