test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: 布局调整&卡片组件调整

This commit is contained in:
baiqi 2023-07-26 19:04:36 +08:00 committed by fit2-zhao
parent bf3eb37148
commit f428fda5dc
4 changed files with 26 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/assets/style/arco-reset.less
View File

@ -452,20 +452,21 @@
/** 滚动条 **/ /** 滚动条 **/
.arco-scrollbar-track-direction-horizontal { .arco-scrollbar-track-direction-horizontal {
height: 8px; margin-bottom: 4px;
height: 6px;
.arco-scrollbar-thumb-bar { .arco-scrollbar-thumb-bar {
@apply m-0; @apply m-0;
height: 8px; height: 6px;
background-color: var(--color-text-input-border); background-color: var(--color-text-input-border);
} }
} }
.arco-scrollbar-track-direction-vertical { .arco-scrollbar-track-direction-vertical {
width: 8px; width: 6px;
.arco-scrollbar-thumb-bar { .arco-scrollbar-thumb-bar {
@apply m-0; @apply m-0;
width: 8px; width: 6px;
background-color: var(--color-text-input-border); background-color: var(--color-text-input-border);
} }
} }

2
frontend/src/components/bussiness/ms-batch-form/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-form ref="formRef" :model="form" layout="vertical"> <a-form ref="formRef" :model="form" layout="vertical">
<div class="mb-[16px] overflow-y-auto rounded-[4px] bg-[var(--color-fill-1)] p-[12px]"> <div class="mb-[16px] min-w-[732px] overflow-y-auto rounded-[4px] bg-[var(--color-fill-1)] p-[12px]">
<a-scrollbar class="overflow-y-auto" :style="{ 'max-height': props.maxHeight }"> <a-scrollbar class="overflow-y-auto" :style="{ 'max-height': props.maxHeight }">
<div class="flex flex-wrap items-start justify-between gap-[8px]"> <div class="flex flex-wrap items-start justify-between gap-[8px]">
<template v-for="(item, i) of form.list" :key="`form-item-${i}`"> <template v-for="(item, i) of form.list" :key="`form-item-${i}`">

10
frontend/src/components/pure/ms-card/index.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<a-spin class="block h-full" :loading="props.loading" :size="28"> <a-spin class="block h-full" :loading="props.loading" :size="28">
<div class="relative h-full pr-[10px]"> <div class="ms-card relative h-full pr-[10px]">
<div v-if="!simple" class="card-header"> <div v-if="!simple" class="card-header">
<div class="back-btn" @click="back"><icon-arrow-left /></div> <div class="back-btn" @click="back"><icon-arrow-left /></div>
<div class="text-[var(--color-text-000)]">{{ props.title }}</div> <div class="text-[var(--color-text-000)]">{{ props.title }}</div>
@ -11,6 +11,7 @@
class="pr-[10px]" class="pr-[10px]"
:style="{ :style="{
overflowY: 'auto', overflowY: 'auto',
minWidth: 1000,
height: `calc(100vh - ${256 + specialHeight}px)`, height: `calc(100vh - ${256 + specialHeight}px)`,
}" }"
> >
@ -39,8 +40,8 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { useI18n } from '@/hooks/useI18n';
import { useRouter } from 'vue-router'; import { useRouter } from 'vue-router';
import { useI18n } from '@/hooks/useI18n';
const props = withDefaults( const props = withDefaults(
defineProps< defineProps<
@ -78,6 +79,7 @@
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.ms-card {
.card-header { .card-header {
@apply flex items-center; @apply flex items-center;
.back-btn { .back-btn {
@ -94,4 +96,8 @@
} }
} }
} }
:deep(.arco-scrollbar-track-direction-vertical) {
right: -10px;
}
}
</style> </style>

2
frontend/src/layout/default-layout.vue
View File

@ -38,7 +38,6 @@
<a-scrollbar <a-scrollbar
:style="{ :style="{
overflow: 'auto', overflow: 'auto',
width: `calc(100vw - ${menuWidth}px)`,
height: 'calc(100vh - 64px)', height: 'calc(100vh - 64px)',
}" }"
> >
@ -170,7 +169,6 @@
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
.arco-layout-content { .arco-layout-content {
padding: 16px 16px 16px 0; padding: 16px 16px 16px 0;
min-width: 1000px;
min-height: 500px; min-height: 500px;
} }
} }