perf: 工作台页面优化

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>