TRKJ/mayfly-go
2
0
Fork 0
mirror of https://gitee.com/dromara/mayfly-go synced 2025-11-02 07:20:24 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: 样式调整

Browse Source
This commit is contained in:
meilin.huang
2023-12-15 17:33:22 +08:00
parent f8837f28c3
commit 06bce33c48
8 changed files with 55 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
mayfly_go_web/src/components/pagetable/PageTable.vue
View File

@@ -169,7 +169,7 @@ const props = withDefaults(defineProps<PageTableProps>(), {
toolButton: true,
showSearch: false,
searchItems: () => [],
searchCol: () => ({ xs: 1, sm: 3, md: 3, lg: 4, xl: 4 }),
searchCol: () => ({ xs: 1, sm: 3, md: 3, lg: 4, xl: 5 }),
});
// 接收 columns 并设置为响应式
@@ -243,7 +243,7 @@ onMounted(async () => {
});
const calcuTableHeight = () => {
const headerHeight = isShowSearch.value ? 320 : 240;
const headerHeight = isShowSearch.value ? 322 : 242;
state.tableMaxHeight = window.innerHeight - headerHeight + 'px';
};

22
mayfly_go_web/src/layout/component/main.vue
View File

@@ -1,26 +1,22 @@
<template>
<el-main class="layout-main">
<el-scrollbar
class="layout-scrollbar"
ref="layoutScrollbarRef"
v-show="!state.currentRouteMeta.link && state.currentRouteMeta.linkType != 1"
:style="{ minHeight: `calc(100vh - ${state.headerHeight}` }"
>
<el-scrollbar ref="layoutScrollbarRef" v-show="!state.currentRouteMeta.link && state.currentRouteMeta.linkType != 1">
<LayoutParentView />
<Footer v-if="themeConfig.isFooter" />
</el-scrollbar>
<Link
:style="{ height: `calc(100vh - ${state.headerHeight}` }"
:meta="state.currentRouteMeta"
v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2"
/>
<Link class="h100" :meta="state.currentRouteMeta" v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 2" />
<Iframes
:style="{ height: `calc(100vh - ${state.headerHeight}` }"
class="h100"
:meta="state.currentRouteMeta"
v-if="state.currentRouteMeta.link && state.currentRouteMeta.linkType == 1 && state.isShowLink"
@getCurrentRouteMeta="onGetCurrentRouteMeta"
/>
</el-main>
<el-footer v-if="themeConfig.isFooter">
<Footer />
</el-footer>
</template>
<script setup lang="ts" name="layoutMain">

20
mayfly_go_web/src/layout/footer/index.vue
View File

@@ -1,8 +1,7 @@
<template>
<div class="layout-footer mt15" v-show="isDelayFooter">
<div class="layout-footer flex-all-center" v-show="isDelayFooter">
<div class="layout-footer-warp">
<div>Made by mayfly with ❤️</div>
<div class="mt5">mayfly-go</div>
<div>Made by mayfly-go with ❤️</div>
</div>
</div>
</template>
@@ -32,13 +31,14 @@ export default {
<style scoped lang="scss">
.layout-footer {
width: 100%;
display: flex;
&-warp {
margin: auto;
color: #9e9e9e;
text-align: center;
animation: logoAnimation 0.3s ease-in-out;
height: 30px;
background-color: var(--el-bg-color);
border-top: 1px solid var(--el-border-color-light);
.layout-footer-warp {
font-size: 14px;
color: var(--el-text-color-secondary);
text-decoration: none;
letter-spacing: 0.5px;
}
}
</style>

2
mayfly_go_web/src/layout/routerView/iframes.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="layout-scrollbar">
<div>
<div class="layout-view-bg-white flex h100" v-loading="iframeLoading">
<iframe :src="iframeUrl" frameborder="0" height="100%" width="100%" id="iframe" v-show="!iframeLoading"></iframe>
</div>

2
mayfly_go_web/src/layout/routerView/link.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="layout-scrollbar">
<div>
<div class="layout-view-bg-white flex layout-view-link">
<a :href="currentRouteMeta.link" target="_blank" class="flex-margin">{{ currentRouteMeta.title }}：{{ currentRouteMeta.link }}</a>
</div>

38
mayfly_go_web/src/theme/app.scss
View File

@@ -40,8 +40,8 @@ body,
-webkit-tap-highlight-color: transparent;
background-color: var(--bg-main-color);
font-size: 14px;
overflow: hidden;
position: relative;
// overflow: hidden;
// position: relative;
}
/* 主布局样式
@@ -70,8 +70,9 @@ body,
}
.layout-main {
padding: 0 !important;
overflow: hidden;
box-sizing: border-box;
padding: 8px 10px;
overflow-x: hidden;
width: 100%;
background-color: var(--bg-main-color);
}
@@ -107,11 +108,6 @@ body,
transition: width 0.3s ease;
}
.layout-scrollbar {
@extend .el-scrollbar;
padding: 10px;
}
.layout-mian-height-50 {
height: calc(100vh - 50px);
}
@@ -125,6 +121,11 @@ body,
.layout-hide {
display: none;
}
.el-footer {
height: auto;
padding: 0;
}
}
/* element plus 全局样式
@@ -190,16 +191,21 @@ body,
}
}
.flex-justify-between {
display: flex;
align-items: center; // 垂直方向水平居中
justify-content: space-between; // 使第一个子元素靠近父容器的起始位置，最后一个子元素靠近终止位置，而其他子元素均匀分布在它们之间
justify-content: space-between; // 使第一个子元素靠近父容器的起始位置，最后一个子元素靠近终止位置，而其他子元素均匀分布在它们之间
}
.flex-all-center {
display: flex;
align-items: center;
justify-content: center;
}
.flex-align-center {
display: flex;
align-items: center;
align-items: center; // 垂直方向水平居中
}
/* 宽高 100%
@@ -362,6 +368,14 @@ body,
box-shadow: 0 0 12px rgb(0 0 0 / 5%);
}
/* content-box (常用内容盒子) */
.content-box {
display: flex;
flex-direction: column;
align-items: center;
height: 100%;
}
.fl {
float: left;
}

2
mayfly_go_web/src/views/ops/db/component/sqleditor/DbSqlEditor.vue
View File

@@ -428,7 +428,7 @@ const saveSql = async () => {
const input = await ElMessageBox.prompt('请输入SQL脚本名', 'SQL名', {
confirmButtonText: '确定',
cancelButtonText: '取消',
inputPattern: /\.+/,
inputPattern: /.+/,
inputErrorMessage: '请输入SQL脚本名',
});
sqlName = input.value;

10
mayfly_go_web/src/views/ops/db/component/table/DbTableData.vue
View File

@@ -35,7 +35,7 @@
<div v-else @contextmenu="headerContextmenuClick($event, column)" style="position: relative">
<div class="column-type">
<span v-if="ColumnTypeSubscript[dbDialect.getDataType(column.columnType)] === 'icon-clock'">
<SvgIcon :size="8" name="Clock" style="cursor: unset" />
<SvgIcon :size="10" name="Clock" style="cursor: unset" />
</span>
<span class="font8" v-else>{{ ColumnTypeSubscript[dbDialect.getDataType(column.columnType)] }}</span>
</div>
@@ -83,7 +83,7 @@
v-if="nowUpdateCell.dataType == DataType.Number || nowUpdateCell.dataType == DataType.String"
:ref="(el: any) => el?.focus()"
@blur="onExitEditMode(rowData, column, rowIndex)"
class="w100"
class="w100 mb4"
input-style="text-align: center; height: 26px;"
size="small"
v-model="rowData[column.dataKey!]"
@@ -92,7 +92,7 @@
v-if="nowUpdateCell.dataType == DataType.Date"
:ref="(el: any) => el?.focus()"
@blur="onExitEditMode(rowData, column, rowIndex)"
class="edit-time-picker"
class="edit-time-picker mb4"
size="small"
v-model="rowData[column.dataKey!]"
:clearable="false"
@@ -104,7 +104,7 @@
v-if="nowUpdateCell.dataType == DataType.DateTime"
:ref="(el: any) => el?.focus()"
@blur="onExitEditMode(rowData, column, rowIndex)"
class="edit-time-picker"
class="edit-time-picker mb4"
size="small"
v-model="rowData[column.dataKey!]"
:clearable="false"
@@ -116,7 +116,7 @@
v-if="nowUpdateCell.dataType == DataType.Time"
:ref="(el: any) => el?.focus()"
@blur="onExitEditMode(rowData, column, rowIndex)"
class="edit-time-picker"
class="edit-time-picker mb4"
size="small"
v-model="rowData[column.dataKey!]"
:clearable="false"