feat(card): card adaptive

Author: dataeaseShu

frontend/src/views/ds/Card.vue

@@ -119,12 +119,12 @@ const onClickOutside = () => {
 
 <style lang="less" scoped>
 .card {
-  width: 370px;
+  width: calc(33% - 14px);
   border: 1px solid #dee0e3;
   padding: 16px;
   border-radius: 12px;
   cursor: pointer;
-  margin: 0 16px 16px 0;
+  margin: 0 0 16px 16px;
   &:hover {
     box-shadow: 0px 6px 24px 0px #1f232914;
   }
@@ -136,11 +136,12 @@ const onClickOutside = () => {
 
     .info {
       margin-left: 12px;
+      max-width: calc(100% - 50px);
       .name {
         font-weight: 500;
         font-size: 16px;
         line-height: 24px;
-        max-width: 250px;
+        max-width: 100%;
       }
       .type {
         font-weight: 400;

frontend/src/views/ds/Datasource.vue

@@ -210,7 +210,7 @@ const back = () => {
 </script>
 
 <template>
-  <div v-show="!currentDataTable" class="datasource-config">
+  <div v-show="!currentDataTable" class="datasource-config no-padding">
     <div class="datasource-methods">
       <span class="title">{{ $t('ds.title') }}</span>
       <div class="button-input">
@@ -378,11 +378,13 @@ const back = () => {
 <style lang="less" scoped>
 .datasource-config {
   height: calc(100% - 16px);
+  padding: 24px 24px 24px 8px;
   .datasource-methods {
     display: flex;
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
+    padding-left: 16px;
     .title {
       font-weight: 500;
       font-size: 20px;
@@ -395,6 +397,7 @@ const back = () => {
     flex-wrap: wrap;
     max-height: calc(100% - 40px);
     overflow-y: auto;
+    justify-content: space-between;
   }
 
   .datasource-yet {

frontend/src/views/system/embedded/Card.vue

@@ -69,12 +69,12 @@ const handleEmbedded = () => {
 
 <style lang="less" scoped>
 .card {
-  width: 400px;
+  width: calc(33% - 14px);
   height: 168px;
   border: 1px solid #dee0e3;
   padding: 16px;
   border-radius: 12px;
-  margin: 0 16px 16px 0;
+  margin: 0 0 16px 16px;
   &:hover {
     box-shadow: 0px 6px 24px 0px #1f232914;
   }
@@ -88,7 +88,7 @@ const handleEmbedded = () => {
       font-weight: 500;
       font-size: 16px;
       line-height: 24px;
-      max-width: 200px;
+      max-width: calc(100% - 115px);
     }
 
     .default {

frontend/src/views/system/embedded/index.vue

@@ -450,7 +450,7 @@ const saveHandler = () => {
 </script>
 
 <template>
-  <div v-loading="searchLoading" class="embedded">
+  <div v-loading="searchLoading" class="embedded no-padding">
     <div class="tool-left">
       <div class="btn-select">
         <el-button :class="[btnSelect === 'd' && 'is-active']" text @click="btnSelect = 'd'">
@@ -914,6 +914,8 @@ const saveHandler = () => {
 <style lang="less" scoped>
 .embedded {
   height: 100%;
+  padding: 24px 24px 24px 8px;
+
   .ed-empty {
     padding-top: 200px;
     padding-bottom: 0;
@@ -923,6 +925,7 @@ const saveHandler = () => {
     align-items: center;
     justify-content: space-between;
     margin-bottom: 16px;
+    padding-left: 24px;
 
     .btn-select {
       height: 32px;
@@ -958,6 +961,7 @@ const saveHandler = () => {
     flex-wrap: wrap;
     max-height: calc(100% - 40px);
     overflow-y: auto;
+    justify-content: space-between;
   }
 }
 </style>

frontend/src/views/system/model/Card.vue

@@ -88,7 +88,7 @@ defineExpose({ showErrorMask })
 
 <style lang="less" scoped>
 .card {
-  width: 404px;
+  width: calc(33% - 14px);
   height: 160px;
   border: 1px solid #dee0e3;
   padding: 16px;
@@ -107,7 +107,7 @@ defineExpose({ showErrorMask })
       font-weight: 500;
       font-size: 16px;
       line-height: 24px;
-      max-width: 280px;
+      max-width: calc(100% - 115px);
     }
     .default {
       margin-left: auto;

frontend/src/views/system/model/Model.vue

@@ -415,8 +415,7 @@ const submit = (item: any) => {
 <style lang="less" scoped>
 .model-config {
   height: calc(100% - 16px);
-  padding: 16px 0 16px 8px;
-  margin-right: 24px;
+  padding: 24px 24px 24px 8px;
   .model-methods {
     display: flex;
     align-items: center;
@@ -435,6 +434,7 @@ const submit = (item: any) => {
     flex-wrap: wrap;
     max-height: calc(100% - 40px);
     overflow-y: auto;
+    justify-content: space-between;
   }
 }
 </style>