github/PPTist
1
0
Fork 0
mirror of https://github.com/pipipi-pikachu/PPTist.git synced 2025-04-15 02:20:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化UI

Browse Source
This commit is contained in:
zxc 2024-08-25 13:12:33 +08:00
parent f5326c71b8
commit ee9ddf4722
9 changed files with 18 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/assets/styles/global.scss
View File

@ -133,5 +133,5 @@ textarea {
background-color: transparent; background-color: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #c1c1c1; background-color: #e1e1e1;
} }

4
src/assets/styles/variable.scss
View File

@ -1,10 +1,10 @@
$themeColor: #d14424; $themeColor: #d14424;
$themeHoverColor: #de6949; $themeHoverColor: #de6949;
$textColor: #41464b; $textColor: #41464b;
$borderColor: #eee; $borderColor: #e5e7eb;
$lightGray: #f9f9f9; $lightGray: #f9f9f9;
$boxShadow: 3px 3px 3px rgba(#000, 0.15); $boxShadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
$transitionDelay: .2s; $transitionDelay: .2s;
$transitionDelayFast: .1s; $transitionDelayFast: .1s;

4
src/components/Contextmenu/MenuContent.vue
View File

@ -40,7 +40,7 @@ defineProps<{
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
$menuWidth: 170px; $menuWidth: 180px;
$menuHeight: 30px; $menuHeight: 30px;
$subMenuWidth: 120px; $subMenuWidth: 120px;
@ -115,7 +115,7 @@ $subMenuWidth: 120px;
display: inline-block; display: inline-block;
width: 1px; width: 1px;
height: 24px; height: 24px;
background-color: #f1f1f1; background-color: rgba($color: #fff, $alpha: .3);
position: absolute; position: absolute;
right: 18px; right: 18px;
top: 3px; top: 3px;

2
src/components/Contextmenu/index.vue
View File

@ -34,7 +34,7 @@ const props = defineProps<{
}>() }>()
const style = computed(() => { const style = computed(() => {
const MENU_WIDTH = 170 const MENU_WIDTH = 180
const MENU_HEIGHT = 30 const MENU_HEIGHT = 30
const DIVIDER_HEIGHT = 11 const DIVIDER_HEIGHT = 11
const PADDING = 5 const PADDING = 5

2
src/components/MoveablePanel.vue
View File

@ -162,7 +162,7 @@ const startResize = (e: MouseEvent) => {
.moveable-panel { .moveable-panel {
position: fixed; position: fixed;
background-color: #fff; background-color: #fff;
box-shadow: 0 2px 12px 0 rgba(56, 56, 56, .15); box-shadow: $boxShadow;
border: 1px solid $borderColor; border: 1px solid $borderColor;
border-radius: $borderRadius; border-radius: $borderRadius;
display: flex; display: flex;

8
src/components/Select.vue
View File

@ -142,19 +142,19 @@ const handleSelect = (option: SelectOption) => {
line-height: 32px; line-height: 32px;
padding: 0 5px; padding: 0 5px;
border-radius: $borderRadius; border-radius: $borderRadius;
cursor: pointer;
@include ellipsis-oneline(); @include ellipsis-oneline();
&.disabled { &.disabled {
color: #b7b7b7; color: #b7b7b7;
cursor: default;
} }
&:not(.disabled, .selected):hover { &:not(.disabled, .selected):hover {
background-color: rgba($color: #666, $alpha: .05); background-color: rgba($color: $themeColor, $alpha: .05);
cursor: pointer;
} }
&.selected { &.selected {
background-color: rgba($color: $themeColor, $alpha: .05); color: $themeColor;
font-weight: 700;
} }
} }
.icon { .icon {

10
src/views/Editor/CanvasTool/ShapePool.vue
View File

@ -33,11 +33,11 @@ const selectShape = (shape: ShapePoolItem) => {
width: 340px; width: 340px;
max-height: 520px; max-height: 520px;
overflow: auto; overflow: auto;
margin-top: -12px; margin-top: -8px;
margin-bottom: -12px; margin-bottom: -8px;
margin-right: -12px; margin-right: -10px;
padding-right: 12px; padding-right: 10px;
padding-top: 12px; padding-top: 10px;
} }
.category-name { .category-name {
width: 100%; width: 100%;

2
src/views/Editor/ExportDialog/ExportJSON.vue
View File

@ -66,6 +66,6 @@ pre {
background-color: #f9f9f9; background-color: #f9f9f9;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background-color: #c1c1c1; background-color: #e1e1e1;
} }
</style> </style>

1
src/views/Editor/Thumbnails/index.vue
View File

@ -406,6 +406,7 @@ const contextmenusThumbnailItem = (): ContextmenuItem[] => {
position: relative; position: relative;
.thumbnail { .thumbnail {
border-radius: $borderRadius;
outline: 2px solid rgba($color: $themeColor, $alpha: .15); outline: 2px solid rgba($color: $themeColor, $alpha: .15);
} }