test/basic2
1
0
Fork 0
mirror of https://gitee.com/fantastic-admin/basic.git synced 2024-12-09 15:38:16 +08:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

优化 PageHeader 组件样式

Browse Source
This commit is contained in:
Hooray Hu 2023-05-05 23:38:08 +08:00
parent 8c5af5d8e0
commit a632405423
1 changed files with 6 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/PageHeader/index.vue
View File

@ -14,7 +14,7 @@ const slots = useSlots()
</script>
<template>
<div class="header">
<div class="page-header">
<div class="main">
<div class="title">
{{ title }}
@ -32,18 +32,19 @@ const slots = useSlots()
</template>
<style lang="scss" scoped>
.header {
.page-header {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
padding: 16px 20px;
background-color: var(--g-app-bg);
transition: background-color 0.3s;
.main {
flex: 1;
margin-right: 20px;
flex: 1 1 70%;
.title {
font-size: 22px;
@ -65,17 +66,7 @@ const slots = useSlots()
.sub {
flex: none;
}
}
[data-mode="mobile"] {
.header {
flex-direction: column;
.main {
margin-right: auto;
margin-bottom: 20px;
}
margin-left: auto;
}
}
</style>