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

页面设置详情显示

v1.0.0
于肖磊 2024-08-28 15:31:08 +08:00
parent 207f69fdac
commit 7f5df0e0d9
8 changed files with 182 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/layout/main/main-top.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.3 KiB

29
src/components/page-settings/index.vue
View File

@ -1,8 +1,8 @@
<template>
<div class="model-top">
<div :class="['roll', { 'page-settings-border': showPage }]" @click="page_settings">
<div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
<div class="pt-15 pb-10 pl-25 pr-25 w">
<img class="img" src="@/assets/images/layout/main/main-top.png" />
<img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" :src="url_computer()" />
</div>
<div class="model-head tc">
{{ props.pageData.com_data?.content?.title || '新建页面' }}
@ -11,6 +11,8 @@
</div>
</template>
<script setup lang="ts">
import { background_computer, gradient_computer } from '@/utils';
interface Props {
pageData: any;
showPage: boolean;
@ -23,19 +25,36 @@ const emits = defineEmits(['page_settings']);
const page_settings = () => {
emits('page_settings');
};
const form = computed(() => props.pageData.com_data.content);
const new_style = computed(() => props.pageData.com_data.style);
const position = computed(() => new_style.value.up_slide_display ? 'absolute' : 'relative');
const roll_style = computed(() => {
let style = ``;
if (new_style.value.background_type === 'color') {
style += gradient_computer({ color_list: new_style.value.background_color_list, direction: new_style.value.background_direction });
} else if (new_style.value.background_type === 'image') {
style += background_computer(new_style.value);
} else {
style += `background: transparent;`;
}
return style
});
const url_computer = () => {
const new_url = ref(new URL(`../../assets/images/layout/main/main-top.png`, import.meta.url).href).value;
return new_url;
};
</script>
<style lang="scss" scoped>
.model-top {
position: absolute;
position: v-bind(position);
top: 0;
left: 50%;
z-index: 2;
transform: translateX(-50%);
.roll {
width: 39rem;
background: #fff;
margin: 0 auto;
box-shadow: 0px 0 0px 0.2rem #fff;
// box-shadow: 0px 0 0px 0.2rem #fff;
// border-bottom: 0.1rem solid #f5f5f5;
}
.img {

6
src/components/page-settings/page-content.vue
View File

@ -1,5 +1,5 @@
<template>
<div class="auxiliary-line">
<div class="w h">
<el-form :model="form" label-width="70">
<card-container class="common-content-height">
<el-form-item label="页面标题">
@ -43,8 +43,4 @@ const mult_color_picker_event = (arry: color_list[], type: number) => {
};
</script>
<style lang="scss" scoped>
.auxiliary-line {
width: 100%;
height: 100%;
}
</style>

22
src/components/page-settings/page-setting.vue Normal file
View File

@ -0,0 +1,22 @@
<template>
<div class="setting-content">
<template v-if="type == '1'">
<page-content :value="value.content"></page-content>
</template>
<template v-else-if="type == '2'">
<page-styles :value="value.style"></page-styles>
</template>
</div>
</template>
<script setup lang="ts">
const props = defineProps({
type: {
type: String,
default: '1',
},
value: {
type: Object,
default: () => ({}),
},
});
</script>

75
src/components/page-settings/page-styles.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="styles">
<el-form :model="form" label-width="70" class="m-h">
<card-container class="mb-8">
<div class="mb-12">头部样式</div>
<el-form-item label="顶部背景">
<div class="flex-col gap-10">
<el-radio-group v-model="form.background_type">
<el-radio value="transparent">透明</el-radio>
<el-radio value="color">颜色</el-radio>
<el-radio value="image">图片</el-radio>
</el-radio-group>
<template v-if="form.background_type === 'color'">
<mult-color-picker :value="form.background_color_list" :type="form.background_direction" @update:value="mult_color_picker_event"></mult-color-picker>
</template>
<template v-else-if="form.background_type === 'image'">
<upload v-model="form.background_img_url" :limit="1"></upload>
</template>
</div>
</el-form-item>
<el-form-item label="功能按钮">
<el-radio-group v-model="form.function_buttons_type" class="ml-4">
<el-radio value="black">黑色</el-radio>
<el-radio value="white">白色</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="沉浸样式">
<el-radio-group v-model="form.immersive_style" class="ml-4">
<el-radio :value="true">开启</el-radio>
<el-radio :value="false">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="上滑展示">
<el-radio-group v-model="form.up_slide_display" class="ml-4">
<el-radio :value="true">保留</el-radio>
<el-radio :value="false">关闭</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="标题名称">
<color-text-size-group v-model:color="form.background_title_color" v-model:typeface="form.background_title_typeface" v-model:size="form.background_title_size" default-color="#000000"></color-text-size-group>
</el-form-item>
</card-container>
</el-form>
<common-styles class="styles-height" :value="form.common_style" @update:value="common_styles_update" />
</div>
</template>
<script setup lang="ts">
const props = defineProps({
value: {
type: Object,
default: () => {
return {};
},
},
});
const emit = defineEmits(['update:value']);
// 默认值
let form = reactive(props.value);
const common_styles_update = (val: Object) => {
form.common_style = val;
};
const mult_color_picker_event = (arry: string[], type: number) => {
form.background_color_list = arry;
form.background_direction = type.toString();
};
</script>
<style lang="scss" scoped>
.styles {
width: 100%;
.styles-height {
min-height: calc(100vh - 16.8rem);
}
}
</style>

32
src/layout/components/main/default/header-nav.ts
View File

@ -1,19 +1,41 @@
import defaultCommon from './index';
interface DefaultFooterNav {
content: {
color_list: color_list[];
title: string;
direction: string;
background_img_style: number;
background_img_url: uploadList[];
};
style: {
background_type: string;
background_color_list: color_list[];
background_direction: string;
background_img_url: uploadList[];
background_title_color: string,
background_title_typeface: string,
background_title_size: number,
function_buttons_type: string,
immersive_style: boolean,
up_slide_display: boolean,
common_style: object;
}
}
const defaultFooterNav: DefaultFooterNav = {
content: {
color_list: [{ color: '#f5f5f5', color_percentage: '' }],
title: '',
direction: '180deg',
background_img_style: 2,
},
style: {
background_type: 'color',
background_color_list: [{ color: '#fff', color_percentage: '' }],
background_direction: '180deg',
background_img_url: [],
background_title_color: '#000',
background_title_typeface: '500',
background_title_size: 14,
function_buttons_type: 'black',
immersive_style: false,
up_slide_display: true,
common_style: defaultCommon,
},
};

44
src/layout/components/main/index.vue
View File

@ -17,21 +17,20 @@
</div>
<!-- 视图渲染 -->
<div class="main">
<div class="acticons">
<el-button size="large" class="" @click="page_settings">页面设置</el-button>
<el-button size="large" class="" @click="export_click">导出</el-button>
<el-button size="large" class="" @click="import_click">导入</el-button>
<el-button size="large" class="" @click="clear_click">清空</el-button>
</div>
<div class="model">
<div class="model-content">
<div class="acticons">
<el-button size="large" class="" @click="page_settings">页面设置</el-button>
<el-button size="large" class="" @click="export_click">导出</el-button>
<el-button size="large" class="" @click="import_click">导入</el-button>
<el-button size="large" class="" @click="clear_click">清空</el-button>
</div>
<!-- 拖拽区 -->
<div ref="scrollTop" class="model-drag">
<div class="seat" style="background: #fff"></div>
<!-- 页面设置 -->
<!-- 页面设置 -->
<page-settings :show-page="page_data.show_tabs" :page-data="page_data" @page_settings="page_settings"></page-settings>
<div class="model-wall" :style="content_style">
<div :style="'padding-top:92px;' + 'padding-bottom:' + footer_nav_counter_store.padding_footer + 'px;'">
<div :style="`padding-top:${ top_padding }px; margin-top: ${ top_margin }px;padding-bottom:${ footer_nav_counter_store.padding_footer }px;`">
<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">
<div v-for="(item, index) in diy_data" :key="item.id" :class="model_class(item)" :style="model_style(item)" @click="on_choose(index, item.show_tabs)">
<div v-if="item.show_tabs" class="plug-in-right" chosenClass="close">
@ -182,11 +181,23 @@ watch(
page_settings();
}
);
const top_padding = ref(90);
const top_margin = ref(0);
watchEffect(() => {
if (props.header.com_data?.content) {
const content = props.header.com_data?.content;
const container_common_styles = gradient_computer(content) + background_computer(content);
content_style.value = container_common_styles;
if (page_data.value.com_data) {
const { immersive_style, up_slide_display } = page_data.value.com_data.style;
// 不开启沉浸式 和 上滑显示
if (immersive_style || !up_slide_display) {
top_padding.value = 2;
} else {
top_padding.value = 90;
}
// 开启沉浸式并且没有开通上滑显示
if (immersive_style && !up_slide_display) {
top_margin.value = -90;
} else {
top_margin.value = 0;
}
}
});
watch(
@ -575,7 +586,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
position: absolute;
left: 50%;
margin-left: 26rem;
top: 4.7rem;
top: 0;
display: flex;
flex-direction: column;
gap: 2rem;
@ -595,7 +606,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
height: 100%;
.model-content {
position: relative;
height: 84.4rem;
height: 84.6rem;
.model-bottom {
position: absolute;
bottom: 0;
@ -613,6 +624,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
.model-drag {
overflow-y: auto;
padding-top: 0.2rem;
max-height: 84.4rem;
&::-webkit-scrollbar {
display: none;
@ -622,7 +634,7 @@ const float_bottom_change = (val: { bottom: string; location: string }, id: stri
background: #f5f5f5;
margin: 0 auto;
.drag-area {
min-height: 75.5rem;
min-height: 68.1rem;
}
.drag-area .float-window {
position: fixed;

12
src/layout/components/settings/index.vue
View File

@ -3,17 +3,15 @@
<div class="settings">
<card-container class="settings-title flex-row jc-sb align-c mb-8" padding="2.1rem 3.8rem">
<div class="title">{{ value.name }}</div>
<template v-if="value.key != 'page-settings'">
<el-radio-group v-model="radio" class="radio-group" size="large" is-button>
<el-radio-button class="radio-item" value="1">内容</el-radio-button>
<el-radio-button class="radio-item" value="2">样式</el-radio-button>
</el-radio-group>
</template>
<el-radio-group v-model="radio" class="radio-group" size="large" is-button>
<el-radio-button class="radio-item" value="1">内容</el-radio-button>
<el-radio-button class="radio-item" value="2">样式</el-radio-button>
</el-radio-group>
</card-container>
<div class="setting-content">
<!-- 页面设置 -->
<template v-if="value.key == 'page-settings'">
<page-content :value="value.com_data.content"></page-content>
<page-setting :type="radio" :value="value.com_data"></page-setting>
</template>
<!-- 基础组件 -->
<template v-else-if="value.key == 'video'">