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: 代码和样式优化

Browse Source
This commit is contained in:
pipipi-pikachu 2021-02-19 16:55:39 +08:00
parent d619c9d737
commit d3e0a6533e
4 changed files with 16 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -17,15 +17,13 @@
> >
<template #item="{ element, index }"> <template #item="{ element, index }">
<div <div
class="thumbnail-wrapper" class="thumbnail-item"
:class="{ 'active': slideIndex === index }" :class="{ 'selected': slideIndex === index }"
@mousedown="changSlideIndex(index)" @mousedown="changSlideIndex(index)"
v-contextmenu="contextmenusThumbnailItem" v-contextmenu="contextmenusThumbnailItem"
> >
<div class="slide-index">{{ fillDigit(index + 1, 2) }}</div> <div class="label">{{ fillDigit(index + 1, 2) }}</div>
<div class="thumbnail"> <ThumbnailSlide class="thumbnail" :slide="element" :size="120" />
<ThumbnailSlide :slide="element" :size="120" />
</div>
</div> </div>
</template> </template>
</Draggable> </Draggable>
@ -108,7 +106,7 @@ export default defineComponent({
}, },
{ {
text: '开始演示', text: '开始演示',
subText: 'Ctrl+F', subText: 'Ctrl + F',
handler: enterScreening, handler: enterScreening,
}, },
] ]
@ -150,7 +148,7 @@ export default defineComponent({
{ divider: true }, { divider: true },
{ {
text: '从当前页演示', text: '从当前页演示',
subText: 'Ctrl+F', subText: 'Ctrl + F',
handler: enterScreening, handler: enterScreening,
}, },
] ]
@ -194,7 +192,7 @@ export default defineComponent({
flex: 1; flex: 1;
overflow: auto; overflow: auto;
} }
.thumbnail-wrapper { .thumbnail-item {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
@ -204,8 +202,8 @@ export default defineComponent({
outline: 1px solid rgba($color: $themeColor, $alpha: .15); outline: 1px solid rgba($color: $themeColor, $alpha: .15);
} }
&.active { &.selected {
.slide-index { .label {
color: $themeColor; color: $themeColor;
} }
.thumbnail { .thumbnail {
@ -213,11 +211,7 @@ export default defineComponent({
} }
} }
} }
.thumbnail { .label {
width: 120px;
height: 67.5px;
}
.slide-index {
font-size: 12px; font-size: 12px;
color: #999; color: #999;
width: 20px; width: 20px;

4
src/views/Editor/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="hamster-ppt-editor"> <div class="pptist-editor">
<EditorHeader class="layout-header" /> <EditorHeader class="layout-header" />
<div class="layout-content"> <div class="layout-content">
<Thumbnails class="layout-content-left" /> <Thumbnails class="layout-content-left" />
@ -41,7 +41,7 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.hamster-ppt-editor { .pptist-editor {
height: 100%; height: 100%;
} }
.layout-header { .layout-header {

4
src/views/Screen/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="hamster-ppt-screen"> <div class="pptist-screen">
<div <div
class="slide-list" class="slide-list"
@mousewheel="$event => mousewheelListener($event)" @mousewheel="$event => mousewheelListener($event)"
@ -268,7 +268,7 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.hamster-ppt-screen { .pptist-screen {
width: 100%; width: 100%;
height: 100%; height: 100%;
position: relative; position: relative;

4
src/views/components/ThumbnailSlide/index.vue
View File

@ -6,7 +6,7 @@
}" }"
> >
<div <div
class="elements-wrapper" class="elements"
:style="{ :style="{
width: VIEWPORT_SIZE + 'px', width: VIEWPORT_SIZE + 'px',
height: VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO + 'px', height: VIEWPORT_SIZE * VIEWPORT_ASPECT_RATIO + 'px',
@ -68,7 +68,7 @@ export default defineComponent({
background-color: #fff; background-color: #fff;
overflow: hidden; overflow: hidden;
} }
.elements-wrapper { .elements {
transform-origin: 0 0; transform-origin: 0 0;
} }
.background { .background {