refactor: ♻️ 样式优化

Former-commit-id: 0675ba9b86e52bf1bba568c9bbbcbf8a8aff1dfe
This commit is contained in:
haoxr
2023-06-17 09:15:37 +08:00
parent 0f7a3b5f09
commit d46935d1ab
8 changed files with 28 additions and 20 deletions

View File

@@ -3,14 +3,14 @@
@import "./dark"; @import "./dark";
.app-container { .app-container {
margin: 20px; padding: 10px;
}
.search {
padding: 18px 0 0 10px; .search-container {
margin-bottom: 10px; padding: 18px 0 0 10px;
background-color: var(--el-bg-color-overlay); margin-bottom: 10px;
border: 1px solid var(--el-border-color-light); background-color: var(--el-bg-color-overlay);
border-radius: 4px; border: 1px solid var(--el-border-color-light);
box-shadow: var(--el-box-shadow-light); border-radius: 4px;
} box-shadow: var(--el-box-shadow-light);
} }

View File

@@ -14,6 +14,14 @@
.app-container { .app-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - 124px);
/* 84 = navbar + tags-view = 50 + 34 */
height: calc(100vh - 50px);
}
.hasTagsView {
.app-container {
height: calc(100vh - 84px);
}
} }
</style> </style>

View File

@@ -86,7 +86,7 @@ onMounted(() => {});
> >
<div> <div>
<div class="search"> <div class="search-container">
<el-form :inline="true"> <el-form :inline="true">
<el-form-item> <el-input v-model="inputVal" /></el-form-item> <el-form-item> <el-input v-model="inputVal" /></el-form-item>
<el-form-item <el-form-item

View File

@@ -181,7 +181,7 @@ onMounted(() => {
</script> </script>
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="search"> <div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords"> <el-form-item label="关键字" prop="keywords">
<el-input <el-input

View File

@@ -196,7 +196,7 @@ onMounted(() => {
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="search"> <div class="search-container">
<!-- 搜索表单 --> <!-- 搜索表单 -->
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="name"> <el-form-item label="关键字" prop="name">

View File

@@ -194,7 +194,7 @@ onMounted(() => {
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="search"> <div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="name"> <el-form-item label="关键字" prop="name">
<el-input <el-input

View File

@@ -83,8 +83,6 @@ function resetQuery() {
/** /**
* 行点击事件 * 行点击事件
*
* @param row
*/ */
function onRowClick(row: MenuVO) { function onRowClick(row: MenuVO) {
selectedRowMenuId.value = row.id; selectedRowMenuId.value = row.id;
@@ -130,7 +128,7 @@ function onMenuTypeChange() {
} }
/** /**
* 菜单提交 * 菜单保存提交
*/ */
function submitForm() { function submitForm() {
menuFormRef.value.validate((isValid: boolean) => { menuFormRef.value.validate((isValid: boolean) => {
@@ -155,6 +153,7 @@ function submitForm() {
/** /**
* 删除菜单 * 删除菜单
* @param menuId 菜单ID
*/ */
function handleDelete(menuId: number) { function handleDelete(menuId: number) {
if (!menuId) { if (!menuId) {
@@ -198,6 +197,7 @@ function resetForm() {
formData.perm = undefined; formData.perm = undefined;
formData.component = undefined; formData.component = undefined;
formData.path = undefined; formData.path = undefined;
formData.redirect = undefined;
} }
onMounted(() => { onMounted(() => {
@@ -207,7 +207,7 @@ onMounted(() => {
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="search"> <div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item label="关键字" prop="keywords"> <el-form-item label="关键字" prop="keywords">
<el-input <el-input

View File

@@ -243,7 +243,7 @@ onMounted(() => {
<template> <template>
<div class="app-container"> <div class="app-container">
<div class="search"> <div class="search-container">
<el-form ref="queryFormRef" :model="queryParams" :inline="true"> <el-form ref="queryFormRef" :model="queryParams" :inline="true">
<el-form-item prop="keywords" label="关键字"> <el-form-item prop="keywords" label="关键字">
<el-input <el-input