center/dataease-dm
center/dataease-dm
13
0
Fork 0
forked from github/dataease
Code Pull Requests Activity

fix(仪表板): 移动端设计页面，点击checkbox无法选择组件

Browse Source
This commit is contained in:
dataeaseShu 2024-03-22 10:53:54 +08:00
parent 3384bdfcce
commit a659ead2bf
1 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
core/core-frontend/src/views/dashboard/MobileConfigPanel.vue
View File

@ -15,7 +15,7 @@ import mobileHeader from '@/assets/img/mobile-header.png'
const dvMainStore = dvMainStoreWithOut() const dvMainStore = dvMainStoreWithOut()
const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore) const { componentData, canvasStyleData, canvasViewInfo, dvInfo } = storeToRefs(dvMainStore)
const mobileLoading = ref(true) const mobileLoading = ref(true)
const mobileStyle = ref({}) const mobileStyle = ref(null)
const emits = defineEmits(['pcMode']) const emits = defineEmits(['pcMode'])
const snapshotStore = snapshotStoreWithOut() const snapshotStore = snapshotStoreWithOut()
@ -142,7 +142,7 @@ const setMobileStyle = debounce(() => {
transform: `scale(${scale}) translateY(-50%)`, transform: `scale(${scale}) translateY(-50%)`,
transformOrigin: '0 0' transformOrigin: '0 0'
} }
}, 500) }, 100)
onMounted(() => { onMounted(() => {
window.addEventListener('message', hanedleMessage) window.addEventListener('message', hanedleMessage)
window.addEventListener('resize', setMobileStyle) window.addEventListener('resize', setMobileStyle)
@ -212,7 +212,7 @@ const save = () => {
<el-button type="primary" @click="save">保存</el-button> <el-button type="primary" @click="save">保存</el-button>
</div> </div>
</div> </div>
<div class="mobile-canvas" :style="mobileStyle"> <div class="mobile-canvas" :style="mobileStyle" v-if="mobileStyle">
<div class="mobile-header"> <div class="mobile-header">
<img :src="mobileHeader" alt="" srcset="" /> <img :src="mobileHeader" alt="" srcset="" />
</div> </div>
@ -396,14 +396,14 @@ const save = () => {
--ed-collapse-content-font-size: 12px; --ed-collapse-content-font-size: 12px;
} }
:deep(.ed-tabs) { & > :deep(.ed-tabs) {
--ed-tabs-header-height: 36px; --ed-tabs-header-height: 36px;
border-top: 1px solid #1f232926; border-top: 1px solid #1f232926;
position: sticky; position: sticky;
top: 38px; top: 38px;
left: 0; left: 0;
background: #fff; background: #fff;
z-index: 21; z-index: 25;
.ed-tabs__header { .ed-tabs__header {
padding-left: 8px; padding-left: 8px;
&::before { &::before {
@ -420,6 +420,9 @@ const save = () => {
:deep(.ed-tabs__item) { :deep(.ed-tabs__item) {
font-size: 12px; font-size: 12px;
}
:deep(.ed-tabs__item):not(.is-active) {
color: #646a73; color: #646a73;
} }
@ -432,7 +435,7 @@ const save = () => {
top: 0; top: 0;
left: 0; left: 0;
background: #fff; background: #fff;
z-index: 21; z-index: 25;
} }
.config-mobile-tab { .config-mobile-tab {
@ -480,7 +483,7 @@ const save = () => {
right: 12px; right: 12px;
border: 2px solid #8f959e; border: 2px solid #8f959e;
border-radius: 4px; border-radius: 4px;
z-index: 20; z-index: 24;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
border-color: var(--ed-color-primary-99, #3370ff99); border-color: var(--ed-color-primary-99, #3370ff99);