diff --git a/index.html b/index.html
index dde16aa..40dcdf5 100644
--- a/index.html
+++ b/index.html
@@ -2,9 +2,9 @@
-
+
- Vite + Vue + TS
+ DC-Admin
diff --git a/src/layout/components/Header/index.vue b/src/layout/components/Header/index.vue
index 0653e19..049d51c 100644
--- a/src/layout/components/Header/index.vue
+++ b/src/layout/components/Header/index.vue
@@ -70,7 +70,43 @@
-
+
+
+
+
+
+
+
+
+ 个人信息
+
+
+
+
+
+ 修改密码
+
+
+
+
+
+ 项目地址
+
+
+
+
+
+
+ 退出登录
+
+
+
@@ -122,13 +158,30 @@ import Tom from "@/assets/img/tom.jpg";
color: $color-text-1;
}
- .my_image {
- width: 32px;
+ .my_setting {
+ // width: 32px;
height: 32px;
- border-radius: 50%;
+ // border-radius: 50%;
margin-left: $margin;
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;
+ }
+}
diff --git a/src/layout/components/Tabs/index.vue b/src/layout/components/Tabs/index.vue
index 314cf62..70a2b47 100644
--- a/src/layout/components/Tabs/index.vue
+++ b/src/layout/components/Tabs/index.vue
@@ -13,7 +13,7 @@
-
+
@@ -74,7 +74,7 @@ const handleAdd = () => {
content: `Content of New Tab Panel ${number}`
});
};
-const handleDelete = key => {
+const handleDelete = (key: any) => {
data.value = data.value.filter(item => item.key !== key);
};
@@ -91,6 +91,15 @@ const handleDelete = key => {
margin: 0 0 0 $margin;
.setting {
margin-right: $margin;
+ transform: rotate(0deg);
+ color: $color-text-2;
+ // transition:
+ // transform 0.2s,
+ // color 0.2s;
+ // &:hover {
+ // transform: rotate(180deg);
+ // color: $color-primary;
+ // }
}
}
}
diff --git a/src/style/global-hover.scss b/src/style/global-hover.scss
deleted file mode 100644
index 3deb349..0000000
--- a/src/style/global-hover.scss
+++ /dev/null
@@ -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);
-}
diff --git a/src/style/global-theme.scss b/src/style/global-theme.scss
index 2c007d8..5e578e2 100644
--- a/src/style/global-theme.scss
+++ b/src/style/global-theme.scss
@@ -69,3 +69,7 @@ $font-size-title-3: 24px; // h1-标题-大
$font-size-display-1: 36px; // 运营标题-小
$font-size-display-2: 48px; // 常规-运营标题-中
$font-size-display-3: 56px; // 运营标题-大
+
+// icon的衬线类型
+$stroke-width-3: 3; // 衬线-3 轻线
+$stroke-width-4: 4; // 默认-衬线-4 重线
diff --git a/src/style/global-transition.scss b/src/style/global-transition.scss
new file mode 100644
index 0000000..590c29f
--- /dev/null
+++ b/src/style/global-transition.scss
@@ -0,0 +1,9 @@
+/* global css transition */
+// 旋转180deg
+.rotate-180 {
+ transform: rotate(0deg);
+ transition: transform 0.2s;
+ &:hover {
+ transform: rotate(180deg);
+ }
+}
diff --git a/src/style/index.scss b/src/style/index.scss
index 1d65ae3..1d58681 100644
--- a/src/style/index.scss
+++ b/src/style/index.scss
@@ -1,5 +1,5 @@
@import "./global-theme.scss";
-@import "./global-hover.scss";
+@import "./global-transition.scss";
* {
margin: 0;