feat: less规范化
This commit is contained in:
ZhuRui
+109
-114
@@ -1,133 +1,128 @@
|
||||
.container {
|
||||
.basicLayoutMain {
|
||||
min-height: 100vh;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: #1a1a1a;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.logoText {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
color: #1677ff;
|
||||
.logo {
|
||||
height: 56px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
color: #1a1a1a;
|
||||
background: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
// 面包屑
|
||||
.breadcrumb {
|
||||
flex: 1;
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
.logoText {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
:global {
|
||||
.ant-breadcrumb-link,
|
||||
.ant-breadcrumb-separator,
|
||||
.ant-breadcrumb-item a {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
.trigger {
|
||||
font-size: 18px;
|
||||
cursor: pointer;
|
||||
transition: color 0.3s;
|
||||
padding: 0 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
color: #1677ff;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-breadcrumb-item:last-child {
|
||||
.breadcrumb {
|
||||
flex: 1;
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
|
||||
:global {
|
||||
.ant-breadcrumb-link,
|
||||
.ant-breadcrumb-separator,
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-weight: 500;
|
||||
cursor: default;
|
||||
.ant-breadcrumb-item a {
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.ant-breadcrumb-item:last-child {
|
||||
.ant-breadcrumb-link,
|
||||
.ant-breadcrumb-separator,
|
||||
a {
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
font-weight: 500;
|
||||
cursor: default;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Header 右侧：账号信息 + 退出图标
|
||||
.headerRight {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.userPhone {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.logoutIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.45;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
.headerRight {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
|
||||
// 下拉菜单项：图标 + 文字
|
||||
.menuItem {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
:global(.anticon) {
|
||||
.userPhone {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.65);
|
||||
}
|
||||
|
||||
.logoutIcon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
opacity: 0.45;
|
||||
cursor: pointer;
|
||||
transition: opacity 0.3s;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItem {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
|
||||
:global(.anticon) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItemDanger {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.headerRow {
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.pageTabs {
|
||||
width: 100%;
|
||||
padding: 4px 16px 0 16px;
|
||||
height: 42px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.menuItemDanger {
|
||||
color: #ff4d4f;
|
||||
}
|
||||
|
||||
.content {
|
||||
margin: 16px;
|
||||
border-radius: 8px;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.main {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
// ── 顶部行：原 Header 中的三个区域（折叠按钮 / 面包屑 / 右侧账号信息）整体包成一个 row ──
|
||||
.headerRow {
|
||||
padding: 0 16px;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// ── 页面标签栏容器（Chrome 风格 PageTabs 的外壳） ──
|
||||
.pageTabs {
|
||||
width: 100%;
|
||||
padding: 4px 16px 0 16px;
|
||||
height: 42px;
|
||||
background: #fff;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
}
|
||||
|
||||
@@ -173,7 +173,7 @@ export default defineComponent({
|
||||
};
|
||||
|
||||
return () => (
|
||||
<Layout class={styles.container}>
|
||||
<Layout class={styles.basicLayoutMain}>
|
||||
<Sider style={siderStyle} collapsed={collapsed.value} trigger={null} collapsible>
|
||||
<div class={styles.logo}>
|
||||
<span class={styles.logoText}>{collapsed.value ? '6羽' : '六羽赛事运营平台'}</span>
|
||||
|
||||
Reference in New Issue
Block a user