sileya-ai
/
vr-uniapp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'dev-sws' into dev-yxl

v1.0.0
于肖磊 2024-10-12 16:28:35 +08:00
parent e6d1e36f12 b137eef429
commit e6614ebada
9 changed files with 93 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
src/components/common/div-content/index.vue
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>

34
src/components/footer-nav/footer-nav-content.vue
View File

@ -21,7 +21,10 @@
<card-container>
<div class="mb-12 flex-row gap-10 jc-sb">
<div>导航内容</div>
<div class="cr-primary c-pointer" @click="reset_event">恢复默认</div>
<div class="flex-row gap-10 align-c">
<div class="cr-primary c-pointer" @click="sync_sys_event">同步到系统</div>
<div class="cr-primary c-pointer" @click="reset_event">恢复默认</div>
</div>
</div>
<div class="size-12 cr-c mb-20">图片建议宽高80*80,鼠标拖拽左侧圆点可调整导航顺序</div>
<div class="nav-list">
@ -56,12 +59,18 @@
<script setup lang="ts">
import { cloneDeep } from 'lodash';
import { get_math } from '@/utils';
import DiyAPI from '@/api/tabbar';
import defaultFooterNav from '@/config/const/footer-nav';
const app = getCurrentInstance();
const props = defineProps({
value: {
type: Object,
default: () => {},
},
footerStyle: {
type: Object,
default: () => {},
},
footerDialogPositionTop: {
type: Number,
default: 0,
@ -94,13 +103,26 @@ const add = () => {
});
emit('update:value', form.value);
};
interface DefaultFooterNav {
content: {
nav_content: any; // 根据实际类型替换 any
// 同步到系统
const sync_sys_event = () => {
const new_form = {
content: form.value,
style: props.footerStyle,
};
}
const clone_form = cloneDeep(new_form);
const new_data = {
type: 'home',
config: clone_form,
};
app?.appContext.config.globalProperties.$common.message_box('将数据同步到系统底部菜单，确定继续吗？', 'warning').then(() => {
DiyAPI.saveTabbar(new_data).then((res: any) => {
ElMessage.success('同步成功');
});
});
};
// 恢复默认数据
const reset_event = () => {
const clone_data = cloneDeep(defaultFooterNav.value);
const clone_data = cloneDeep(defaultFooterNav);
form.value.nav_content = clone_data.content.nav_content;
emit('update:value', form.value);
};

2
src/components/footer-nav/footer-nav-setting.vue
View File

@ -1,7 +1,7 @@
<template>
<div class="container">
<template v-if="type == '1'">
<footer-nav-content :value="form.content" :footer-dialog-position-top="footerDialogPositionTop" @update:value="content_update"></footer-nav-content>
<footer-nav-content :value="form.content" :footer-style="form.style" :footer-dialog-position-top="footerDialogPositionTop" @update:value="content_update"></footer-nav-content>
</template>
<template v-else-if="type == '2'">
<footer-nav-styles :value="form.style"></footer-nav-styles>

6
src/components/model-nav-group/model-nav-group-styles.vue
View File

@ -6,6 +6,9 @@
<el-form-item label="数据间距">
<slider v-model="form.space"></slider>
</el-form-item>
<el-form-item label="图文间距">
<slider v-model="form.title_space" :max="100"></slider>
</el-form-item>
</card-container>
<div class="divider-line"></div>
<card-container>
@ -42,9 +45,6 @@
<el-form-item label="标题字号">
<slider v-model="form.title_size" :max="100"></slider>
</el-form-item>
<el-form-item label="标题间距">
<slider v-model="form.title_space" :max="100"></slider>
</el-form-item>
</card-container>
</el-form>
<div class="divider-line"></div>

13
src/components/model-tabs/model-tabs-styles.vue
View File

@ -6,10 +6,10 @@
<el-form-item label="选中装饰">
<mult-color-picker :value="form.tabs_checked" :type="form.tabs_direction" @update:value="tabs_checked_event"></mult-color-picker>
</el-form-item>
<el-form-item label="选中文字">
<el-form-item label="选中标题">
<color-text-size-group v-model:color="form.tabs_color_checked" v-model:typeface="form.tabs_weight_checked" v-model:size="form.tabs_size_checked" default-color="rgba(51,51,51,1)"></color-text-size-group>
</el-form-item>
<el-form-item label="未选文字">
<el-form-item label="未选标题">
<color-text-size-group v-model:color="form.tabs_color" v-model:typeface="form.tabs_weight" v-model:size="form.tabs_size" default-color="rgba(51,51,51,1)"></color-text-size-group>
</el-form-item>
<el-form-item label="选项卡间距">
@ -44,12 +44,12 @@ const props = defineProps({
},
isCommon: {
type: Boolean,
default: true
}
default: true,
},
});
const state = reactive({
form: props.value
form: props.value,
});
// 如果需要解构，确保使用toRefs
const { form } = toRefs(state);
@ -61,5 +61,4 @@ const tabs_checked_event = (arry: string[], type: number) => {
form.value.tabs_direction = type.toString();
};
</script>
<style lang="scss" scoped>
</style>
<style lang="scss" scoped></style>

14
src/components/page-settings/index.vue
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,19 @@ 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;
z-index: 2;
}
}
.logo-outer-style {
height: 2.8rem;

2
src/config/const/header-nav.ts
View File

@ -78,7 +78,7 @@ const defaultFooterNav: DefaultFooterNav = {
is_icon_show: '1',
icon_link: {},
icon_img: [],
icon_class: '',
icon_class: 'search',
search_botton_img: [],
search_botton_icon: '',
is_tips_show: '1',

24
src/views/layout/components/main/index.scss
View File

@ -89,15 +89,24 @@
.model-drag {
overflow-y: auto;
padding-top: 0.2rem;
// padding-top: 0.2rem;
max-height: 84.4rem;
height: 100%;
&::-webkit-scrollbar {
display: none;
}
.page-bg {
position: absolute;
left: 50;
background: #f5f5f5;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 39rem;
min-height: 100%;
}
.model-wall {
width: 39rem;
background: #f5f5f5;
margin: 0 auto;
min-height: 100%;
display: flex;
@ -194,7 +203,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 +218,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 +232,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 +267,4 @@
.layout-toggle-bar {
display: none;
}
}
}

14
src/views/layout/components/main/index.vue
View File

@ -63,10 +63,13 @@
</div>
<!-- 拖拽区 -->
<div ref="scrollTop" class="model-drag" @scroll="on_scroll_event">
<div class="page-bg" :style="content_style">
<div class="page-bg-img" :style="content_img_style"></div>
</div>
<!-- 页面设置 -->
<page-settings :show-page="page_data.show_tabs == '1'" :page-data="page_data" :scoll-top="scoll_top" @page_settings="page_settings"></page-settings>
<div class="model-wall" :style="content_style">
<div class="model-wall-content" :style="`padding-top:${top_padding}px; margin-top: ${top_margin}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;${content_img_style}`">
<div class="model-wall" :style="`margin-top: ${top_margin}px;`">
<div class="model-wall-content" :style="`padding-top:${top_padding}px;padding-bottom:${bottom_navigation_show ? footer_nav_counter_store.padding_footer : 0}px;`">
<div-content :diy-data="tabs_data" :show-model-border="show_model_border" :is-tabs="true" :main-content-style="main_content_style" @on_choose="set_tabs_event(true)" @del="del"></div-content>
<div v-if="tabs_data.length > 0" class="seat"></div>
<VueDraggable v-model="diy_data" :animation="500" :touch-start-threshold="2" group="people" class="drag-area re" ghost-class="ghost" :on-sort="on_sort" :on-start="on_start" :on-end="on_end">
@ -146,6 +149,7 @@ watch(
);
const top_padding = ref(90);
const top_margin = ref(0);
const model_wall_top = ref(0);
const content_style = ref('');
const content_img_style = ref('');
const main_content_style = ref('');
@ -166,7 +170,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 +218,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 +436,7 @@ const scroll = () => {
const scoll_top = ref(0);
const on_scroll_event = (e: any) => {
scoll_top.value = e.target.scrollTop;
}
};
//#endregion
//#region 页面设置 导出 导入
// 在组件挂载时默认执行