attiya/ebike-plus-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: header结构

Browse Source
This commit is contained in:
wang_fan_w 2024-04-06 18:45:01 +08:00
parent 9936152c08
commit d6f8ef643d
7 changed files with 84 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
index.html
View File

@ -2,9 +2,9 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" /> <link rel="icon" type="image/svg+xml" href="/src/icons/snow.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + Vue + TS</title> <title>DC-Admin</title>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

61
src/layout/components/Header/index.vue
View File

@ -70,7 +70,43 @@
</template> </template>
</a-button> </a-button>
</a-tooltip> </a-tooltip>
<div class="my_image"><a-image width="36" :src="Tom" /></div> <!-- 我的 -->
<a-dropdown trigger="hover">
<div class="my_setting">
<a-image width="32" fit="contain" :src="Tom" class="my_image" />
<span>admin</span>
<div class="icon_down">
<icon-down style="stroke-width: 3" />
</div>
</div>
<template #content>
<a-doption>
<template #icon>
<icon-location />
</template>
<template #default>个人信息</template>
</a-doption>
<a-doption>
<template #icon>
<icon-location />
</template>
<template #default>修改密码</template>
</a-doption>
<a-doption>
<template #icon>
<icon-location />
</template>
<template #default>项目地址</template>
</a-doption>
<a-divider margin="0" />
<a-doption>
<template #icon>
<icon-location />
</template>
<template #default>退出登录</template>
</a-doption>
</template>
</a-dropdown>
</div> </div>
</a-layout-header> </a-layout-header>
</template> </template>
@ -122,13 +158,30 @@ import Tom from "@/assets/img/tom.jpg";
color: $color-text-1; color: $color-text-1;
} }
.my_image { .my_setting {
width: 32px; // width: 32px;
height: 32px; height: 32px;
border-radius: 50%; // border-radius: 50%;
margin-left: $margin; margin-left: $margin;
overflow: hidden; overflow: hidden;
display: flex;
justify-content: space-between;
align-items: center;
.my_image {
border-radius: 50%;
margin-right: 8px;
}
.icon_down {
transform: rotate(0deg);
margin: 0 0 0 5px;
transition: transform 0.2s;
}
} }
} }
} }
:deep(.arco-dropdown-open) {
.icon_down {
transform: rotate(180deg) !important;
}
}
</style> </style>

13
src/layout/components/Tabs/index.vue
View File

@ -13,7 +13,7 @@
</a-tabs> </a-tabs>
<div class="tabs_setting"> <div class="tabs_setting">
<a-dropdown trigger="hover"> <a-dropdown trigger="hover">
<div class="setting"><icon-sync :size="18" /></div> <div class="setting"><icon-loop :size="18" /></div>
<template #content> <template #content>
<a-doption> <a-doption>
<template #icon><icon-refresh /></template> <template #icon><icon-refresh /></template>
@ -74,7 +74,7 @@ const handleAdd = () => {
content: `Content of New Tab Panel ${number}` content: `Content of New Tab Panel ${number}`
}); });
}; };
const handleDelete = key => { const handleDelete = (key: any) => {
data.value = data.value.filter(item => item.key !== key); data.value = data.value.filter(item => item.key !== key);
}; };
</script> </script>
@ -91,6 +91,15 @@ const handleDelete = key => {
margin: 0 0 0 $margin; margin: 0 0 0 $margin;
.setting { .setting {
margin-right: $margin; margin-right: $margin;
transform: rotate(0deg);
color: $color-text-2;
// transition:
// transform 0.2s,
// color 0.2s;
// &:hover {
// transform: rotate(180deg);
// color: $color-primary;
// }
} }
} }
} }

9
src/style/global-hover.scss
View File

@ -1,9 +0,0 @@
// global hover css
// 鼠标移入过渡
.move-fill {
background: rgba($color-fill-1, 0);
transition: background 0.2s;
}
.move-fill:hover {
background: rgba($color-fill-1, 1);
}

4
src/style/global-theme.scss
View File

@ -69,3 +69,7 @@ $font-size-title-3: 24px; // h1-标题-大
$font-size-display-1: 36px; // 运营标题-小 $font-size-display-1: 36px; // 运营标题-小
$font-size-display-2: 48px; // 常规-运营标题-中 $font-size-display-2: 48px; // 常规-运营标题-中
$font-size-display-3: 56px; // 运营标题-大 $font-size-display-3: 56px; // 运营标题-大
// icon的衬线类型
$stroke-width-3: 3; // 衬线-3 轻线
$stroke-width-4: 4; // 默认-衬线-4 重线

9
src/style/global-transition.scss Normal file
View File

@ -0,0 +1,9 @@
/* global css transition */
// 旋转180deg
.rotate-180 {
transform: rotate(0deg);
transition: transform 0.2s;
&:hover {
transform: rotate(180deg);
}
}

2
src/style/index.scss
View File

@ -1,5 +1,5 @@
@import "./global-theme.scss"; @import "./global-theme.scss";
@import "./global-hover.scss"; @import "./global-transition.scss";
* { * {
margin: 0; margin: 0;