修改页面设置

v1.0.0
于肖磊 2024-08-29 16:45:05 +08:00
parent e1318e72dd
commit f483eb2b39
4 changed files with 29 additions and 6 deletions

View File

@ -1,11 +1,11 @@
<template>
<div class="model-top">
<div :class="['roll', { 'page-settings-border': showPage }]" :style="roll_style" @click="page_settings">
<div class="pt-15 pb-10 pl-25 pr-25 w">
<div class="pb-10 pl-6 pr-13 w">
<img class="img" :style="`Filter: brightness(${ new_style.function_buttons_type == 'black' ? 0 : 100 })`" src="@/assets/images/layout/main/main-top.png" />
</div>
<div class="model-head tc re">
<div class="flex align-c jc-c w h">
<div class="flex align-c jc-c w h" :style="[{ 'justify-content': form?.indicator_location || 'center', 'padding-right': form?.indicator_location == 'flex-end' ? '90px' : '0'}, text_style]">
{{ props.pageData.com_data?.content?.title || '新建页面' }}
</div>
<div class="model-head-icon">
@ -46,6 +46,7 @@ const url_computer = (name: string) => {
const new_url = ref(new URL(`../../assets/images/layout/main/${name}.png`, import.meta.url).href).value;
return new_url;
};
const text_style = computed(() => `font-weight:${ new_style.value.background_title_typeface }; font-size: ${ new_style.value.background_title_size }px; color: ${ new_style.value.background_title_color };`);
</script>
<style lang="scss" scoped>
.model-top {
@ -56,6 +57,7 @@ const url_computer = (name: string) => {
transform: translateX(-50%);
.roll {
width: 39rem;
padding: 1.5rem 1.2rem 0.9rem 1.2rem;
margin: 0 auto;
cursor: pointer;
}
@ -64,12 +66,13 @@ const url_computer = (name: string) => {
}
}
.model-head {
height: 4.3rem;
height: 3.2rem;
overflow: hidden;
}
.model-head-icon {
position: absolute;
right: 1.2rem;
bottom: 0.6rem;
right: 0;
bottom: 0;
height: 3.2rem;
.function-icon {
height: 3.2rem;

View File

@ -9,6 +9,22 @@
<el-form-item label="页面标题">
<el-input v-model="form.title" placeholder="请输入标题名称"></el-input>
</el-form-item>
<el-form-item label="链接地址">
<url-value v-model="form.link"></url-value>
</el-form-item>
<el-form-item label="展示位置">
<el-radio-group v-model="form.indicator_location" is-button>
<el-tooltip content="左对齐" placement="top" effect="light">
<el-radio-button value="flex-start"><icon name="iconfont icon-left"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="居中" placement="top" effect="light">
<el-radio-button value="center"><icon name="iconfont icon-center"></icon></el-radio-button>
</el-tooltip>
<el-tooltip content="右对齐" placement="top" effect="light">
<el-radio-button value="flex-end"><icon name="iconfont icon-right"></icon></el-radio-button>
</el-tooltip>
</el-radio-group>
</el-form-item>
</template>
</card-container>
<div class="bg-f5 divider-line" />

View File

@ -1,6 +1,6 @@
<template>
<div class="w h">
<el-form :model="form" label-width="70" class="m-h">
<el-form :model="form" label-width="70">
<card-container>
<div class="mb-12">头部样式</div>
<el-form-item label="顶部背景">

View File

@ -4,6 +4,8 @@ interface DefaultFooterNav {
content: {
theme: string;
title: string;
link: object;
indicator_location: string;
bottom_navigation_show: string;
};
style: {
@ -25,6 +27,8 @@ const defaultFooterNav: DefaultFooterNav = {
content: {
theme: '1',
title: '',
link: {},
indicator_location: 'center',
bottom_navigation_show: '1'
},
style: {