1.head解决抖动问题

2.解决head颜色没有盖全的问题
v1.0.0
sws 2024-10-12 11:51:30 +08:00
parent 32b697d1e4
commit 399063d3b0
4 changed files with 37 additions and 24 deletions

View File

@ -3,7 +3,7 @@
<div v-if="item.show_tabs == '1'" class="plug-in-right" chosenClass="close">
<el-icon :class="`iconfont ${item.is_enable == '1' ? 'icon-eye' : 'icon-eye-close'}`" @click.stop="set_enable(index)" />
<el-icon class="iconfont icon-del" @click.stop="del(index)" />
<el-icon :class="['iconfont icon-copy', {'disabled': props.isTabs }] " @click.stop="copy(index)" />
<el-icon :class="['iconfont icon-copy', { disabled: props.isTabs }]" @click.stop="copy(index)" />
<el-icon :class="['iconfont', 'icon-arrow-top', icon_arrow_disable(item.key, index, 'moveUp')]" @click.stop="moveUp(index, arrow_disable_method(item.key, index, 'moveUp'))" />
<el-icon :class="['iconfont', 'icon-arrow-bottom', icon_arrow_disable(item.key, index, 'moveDown')]" @click.stop="moveDown(index, arrow_disable_method(item.key, index, 'moveDown'))" />
</div>
@ -118,13 +118,17 @@ const props = withDefaults(defineProps<Props>(), {
diyData: () => [],
showModelBorder: false,
isTabs: false,
mainContentStyle: ''
mainContentStyle: '',
});
const diy_data = ref(props.diyData);
watch(() => props.diyData, (val) => {
diy_data.value = val;
}, {immediate: true, deep: true});
watch(
() => props.diyData,
(val) => {
diy_data.value = val;
},
{ immediate: true, deep: true }
);
// class
const model_class = computed(() => {
@ -137,11 +141,11 @@ interface com_data {
style: {
common_style: {
floating_up: number;
}
}
};
};
}
const model_style = computed(() => {
return (item: { id: string; key: string, com_data: com_data }) => {
return (item: { id: string; key: string; com_data: com_data }) => {
// 40 60
const container_height = window.innerHeight - 100;
let bottom = 0;
@ -167,7 +171,7 @@ const model_style = computed(() => {
if (item.com_data.style.common_style?.floating_up != 0) {
z_index = `z-index: 1`;
}
return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : `margin-top: -${ item.com_data.style.common_style?.floating_up || 0 }px;${ z_index };`;
return item.key == 'float-window' ? `bottom: ${((bottom / window.innerHeight) * 100).toFixed(4) + '%'};` : `margin-top: -${item.com_data.style.common_style?.floating_up || 0}px;${z_index};`;
};
});
@ -278,11 +282,10 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
.plug-in-border::before {
content: '';
width: calc(100% + 0.4rem);
height: calc(100% + 0.4rem);
height: 100%;
position: absolute;
top: -0.2rem;
top: 0;
left: -0.2rem;
// z-index: 1;
border: 0.2rem solid $cr-main;
}
.plug-in-animation {
@ -387,4 +390,4 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
.tabs-view {
z-index: 2;
}
</style>
</style>

View File

@ -128,7 +128,7 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
transform: translateX(-50%);
width: 39rem;
.roll {
padding-bottom: 0.9rem;
padding-bottom: 1rem;
margin: 0 auto;
cursor: pointer;
z-index: 1;
@ -154,11 +154,18 @@ const position_class = computed(() => (form.value?.indicator_location == 'center
}
}
.page-settings-border {
// border: 0.2rem solid $cr-main;
position: relative;
box-shadow: 0px 0 0px 0.2rem $cr-main !important;
z-index: 3;
box-sizing: border-box;
&::before {
content: '';
height: 100%;
width: calc(100% + 0.4rem);
position: absolute;
left: -0.2rem;
right: -0.2rem;
border: 0.2rem solid $cr-main;
}
}
.logo-outer-style {
height: 2.8rem;

View File

@ -89,7 +89,7 @@
.model-drag {
overflow-y: auto;
padding-top: 0.2rem;
// padding-top: 0.2rem;
max-height: 84.4rem;
height: 100%;
&::-webkit-scrollbar {
@ -194,7 +194,8 @@
transform: translateY(-50%);
left: 0;
z-index: 3;
.layout-toggle-bar-top, .layout-toggle-bar-bottom {
.layout-toggle-bar-top,
.layout-toggle-bar-bottom {
position: absolute;
width: 0.2rem;
border-radius: 0.2rem;
@ -208,7 +209,8 @@
}
}
.layout-toggle-bar-close:hover {
.layout-toggle-bar-top, .layout-toggle-bar-bottom {
.layout-toggle-bar-top,
.layout-toggle-bar-bottom {
background: $cr-main;
transition: 1s ease;
}
@ -221,7 +223,8 @@
}
.layout-toggle-bar-open:hover {
.layout-toggle-bar-top, .layout-toggle-bar-bottom {
.layout-toggle-bar-top,
.layout-toggle-bar-bottom {
background: $cr-main;
transition: 1s ease;
}
@ -255,4 +258,4 @@
.layout-toggle-bar {
display: none;
}
}
}

View File

@ -166,7 +166,7 @@ watchEffect(() => {
const { immersive_style, up_slide_display } = new_style;
//
if (immersive_style == '1' || up_slide_display != '1') {
top_padding.value = 2;
top_padding.value = 0;
} else {
top_padding.value = 90;
}
@ -214,7 +214,7 @@ const show_model_border = ref(true);
// tabs
const draggable_click = (item: componentsData) => {
const type_data = ['tabs', 'tabs-carousel'];
if (common_store.is_immersion_model) {
ElMessage.error('开启沉浸样式下不可以添加该组件');
return;
@ -432,7 +432,7 @@ const scroll = () => {
const scoll_top = ref(0);
const on_scroll_event = (e: any) => {
scoll_top.value = e.target.scrollTop;
}
};
//#endregion
//#region
//