feat(card): card adaptive

This commit is contained in:
dataeaseShu
2025-07-31 10:51:25 +08:00
parent 6849f9c00c
commit 42d7c3cb3b
6 changed files with 20 additions and 12 deletions
+4 -3
View File
@@ -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;
+4 -1
View File
@@ -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 {
+3 -3
View File
@@ -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 {
+5 -1
View File
@@ -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>
+2 -2
View File
@@ -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;
+2 -2
View File
@@ -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>