mirror of
https://gh-proxy.org/https://github.com/klinsmaya/SQLBot.git
synced 2026-11-08 01:06:59 +08:00
feat(card): card adaptive
This commit is contained in:
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user