fix: 优化预览展示

This commit is contained in:
sudoooooo 2024-06-11 19:30:29 +08:00 committed by dayou
parent 304c813b17
commit 6ae9886cac
2 changed files with 38 additions and 41 deletions

4
web/components.d.ts vendored
View File

@ -46,8 +46,10 @@ declare module 'vue' {
IEpClose: typeof import('~icons/ep/close')['default'] IEpClose: typeof import('~icons/ep/close')['default']
IEpCopyDocument: typeof import('~icons/ep/copy-document')['default'] IEpCopyDocument: typeof import('~icons/ep/copy-document')['default']
IEpDelete: typeof import('~icons/ep/delete')['default'] IEpDelete: typeof import('~icons/ep/delete')['default']
IEpIphone: typeof import('~icons/ep/iphone')['default']
IEpLoading: typeof import('~icons/ep/loading')['default'] IEpLoading: typeof import('~icons/ep/loading')['default']
IEpMinus: typeof import('~icons/ep/minus')['default'] IEpMinus: typeof import('~icons/ep/minus')['default']
IEpMonitor: typeof import('~icons/ep/monitor')['default']
IEpMore: typeof import('~icons/ep/more')['default'] IEpMore: typeof import('~icons/ep/more')['default']
IEpPlus: typeof import('~icons/ep/plus')['default'] IEpPlus: typeof import('~icons/ep/plus')['default']
IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default'] IEpQuestionFilled: typeof import('~icons/ep/question-filled')['default']
@ -58,6 +60,8 @@ declare module 'vue' {
IEpSortDown: typeof import('~icons/ep/sort-down')['default'] IEpSortDown: typeof import('~icons/ep/sort-down')['default']
IEpSortUp: typeof import('~icons/ep/sort-up')['default'] IEpSortUp: typeof import('~icons/ep/sort-up')['default']
IEpTop: typeof import('~icons/ep/top')['default'] IEpTop: typeof import('~icons/ep/top')['default']
IEpView: typeof import('~icons/ep/view')['default']
IEpWarningFilled: typeof import('~icons/ep/warning-filled')['default']
RouterLink: typeof import('vue-router')['RouterLink'] RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView'] RouterView: typeof import('vue-router')['RouterView']
} }

View File

@ -1,6 +1,6 @@
<template> <template>
<div class="preview-panel"> <div class="preview-panel">
<div class="preview-btn" @click="dialogTableVisible = true"> <div class="btn preview-btn" @click="dialogTableVisible = true">
<i-ep-view class="view-icon" :size="20" /> <i-ep-view class="view-icon" :size="20" />
<span class="btn-txt">预览</span> <span class="btn-txt">预览</span>
</div> </div>
@ -17,10 +17,16 @@
> >
<div class="ml75"> <div class="ml75">
<div class="preview-tab"> <div class="preview-tab">
<div :class="`preview-tab-item ${previewTab == 1 ? 'active' : ''}`" @click="previewTab = 1"> <div
:class="`preview-tab-item ${previewTab == 1 ? 'active' : ''}`"
@click="previewTab = 1"
>
<i-ep-iphone /> <i-ep-iphone />
</div> </div>
<div :class="`preview-tab-item ${previewTab == 2 ? 'active' : ''}`" @click="previewTab = 2"> <div
:class="`preview-tab-item ${previewTab == 2 ? 'active' : ''}`"
@click="previewTab = 2"
>
<i-ep-monitor /> <i-ep-monitor />
</div> </div>
</div> </div>
@ -69,6 +75,8 @@ const closedDialog = () => {
} }
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
@import url('@/management/styles/edit-btn.scss');
.preview-panel { .preview-panel {
:deep(.preview-config-wrapper) { :deep(.preview-config-wrapper) {
background-color: transparent; background-color: transparent;
@ -79,25 +87,10 @@ const closedDialog = () => {
margin-left: 75px; margin-left: 75px;
} }
.preview-btn {
width: 50px;
display: flex;
flex-direction: column;
align-items: center;
color: #4a4c5b;
cursor: pointer;
i {
font-size: 20px;
}
.btn-txt {
font-size: 12px;
}
}
.view-icon { .view-icon {
font-size: 18px; font-size: 20px;
margin-bottom: 4px; height: 29px;
line-height: 29px;
} }
.preview-tab { .preview-tab {