hhyykk/ipms-sjy-ui
1
1
Fork 0
mirror of https://gitee.com/hhyykk/ipms-sjy-ui.git synced 2025-02-01 19:24:58 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

【缺陷修复】商城装修: TitleBar 背景图设置统一为使用组件样式进行设置

Browse Source
This commit is contained in:
puhui999 2024-12-05 15:35:44 +08:00
parent e0e287c88b
commit 9c2b13f2d0
3 changed files with 40 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/DiyEditor/components/mobile/TitleBar/config.ts
View File

@ -1,9 +1,7 @@
import { ComponentStyle, DiyComponent } from '@/components/DiyEditor/util'
import {ComponentStyle, DiyComponent} from '@/components/DiyEditor/util'
/** 标题栏属性 */
export interface TitleBarProperty {
// 背景图
bgImgUrl: string
// 偏移
marginLeft: number
// 显示位置

26
src/components/DiyEditor/components/mobile/TitleBar/index.vue
View File

@ -1,21 +1,30 @@
<template>
<div class="title-bar">
<el-image v-if="property.bgImgUrl" :src="property.bgImgUrl" fit="cover" class="w-full" />
<div class="absolute left-0 top-0 w-full">
<div
:style="{
background:
property.style.bgType === 'color' ? property.style.bgColor : `url(${property.style.bgImg})`,
backgroundSize: '100% 100%',
backgroundRepeat: 'no-repeat'
}"
class="title-bar"
>
<!-- 内容 -->
<div>
<!-- 标题 -->
<div
v-if="property.title"
:style="{
fontSize: `${property.titleSize}px`,
fontWeight: property.titleWeight,
color: property.titleColor,
textAlign: property.textAlign
}"
v-if="property.title"
>
{{ property.title }}
</div>
<!-- 副标题 -->
<div
v-if="property.description"
:style="{
fontSize: `${property.descriptionSize}px`,
fontWeight: property.descriptionWeight,
@ -23,25 +32,24 @@
textAlign: property.textAlign
}"
class="m-t-8px"
v-if="property.description"
>
{{ property.description }}
</div>
</div>
<!-- 更多 -->
<div
class="more"
v-show="property.more.show"
:style="{
color: property.descriptionColor
}"
class="more"
>
<span v-if="property.more.type !== 'icon'"> {{ property.more.text }} </span>
<Icon icon="ep:arrow-right" v-if="property.more.type !== 'text'" />
<Icon v-if="property.more.type !== 'text'" icon="ep:arrow-right" />
</div>
</div>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { TitleBarProperty } from './config'
/** 标题栏 */
@ -49,7 +57,7 @@ defineOptions({ name: 'TitleBar' })
defineProps<{ property: TitleBarProperty }>()
</script>
<style scoped lang="scss">
<style lang="scss" scoped>
.title-bar {
position: relative;
width: 100%;

49
src/components/DiyEditor/components/mobile/TitleBar/property.vue
View File

@ -1,12 +1,7 @@
<template>
<ComponentContainerProperty v-model="formData.style">
<el-form label-width="85px" :model="formData" :rules="rules">
<el-card header="风格" class="property-group" shadow="never">
<el-form-item label="背景图片" prop="bgImgUrl">
<UploadImg v-model="formData.bgImgUrl" width="100%" height="40px">
<template #tip>建议尺寸 750*80</template>
</UploadImg>
</el-form-item>
<el-form :model="formData" :rules="rules" label-width="85px">
<el-card class="property-group" header="风格" shadow="never">
<el-form-item label="标题位置" prop="textAlign">
<el-radio-group v-model="formData!.textAlign">
<el-tooltip content="居左" placement="top">
@ -22,65 +17,65 @@
</el-radio-group>
</el-form-item>
</el-card>
<el-card header="主标题" class="property-group" shadow="never">
<el-form-item label="文字" prop="title" label-width="40px">
<el-card class="property-group" header="主标题" shadow="never">
<el-form-item label="文字" label-width="40px" prop="title">
<InputWithColor
v-model="formData.title"
v-model:color="formData.titleColor"
show-word-limit
maxlength="20"
show-word-limit
/>
</el-form-item>
<el-form-item label="大小" prop="titleSize" label-width="40px">
<el-form-item label="大小" label-width="40px" prop="titleSize">
<el-slider
v-model="formData.titleSize"
:max="60"
:min="10"
show-input
input-size="small"
show-input
/>
</el-form-item>
<el-form-item label="粗细" prop="titleWeight" label-width="40px">
<el-form-item label="粗细" label-width="40px" prop="titleWeight">
<el-slider
v-model="formData.titleWeight"
:min="100"
:max="900"
:min="100"
:step="100"
show-input
input-size="small"
show-input
/>
</el-form-item>
</el-card>
<el-card header="副标题" class="property-group" shadow="never">
<el-form-item label="文字" prop="description" label-width="40px">
<el-card class="property-group" header="副标题" shadow="never">
<el-form-item label="文字" label-width="40px" prop="description">
<InputWithColor
v-model="formData.description"
v-model:color="formData.descriptionColor"
show-word-limit
maxlength="50"
show-word-limit
/>
</el-form-item>
<el-form-item label="大小" prop="descriptionSize" label-width="40px">
<el-form-item label="大小" label-width="40px" prop="descriptionSize">
<el-slider
v-model="formData.descriptionSize"
:max="60"
:min="10"
show-input
input-size="small"
show-input
/>
</el-form-item>
<el-form-item label="粗细" prop="descriptionWeight" label-width="40px">
<el-form-item label="粗细" label-width="40px" prop="descriptionWeight">
<el-slider
v-model="formData.descriptionWeight"
:min="100"
:max="900"
:min="100"
:step="100"
show-input
input-size="small"
show-input
/>
</el-form-item>
</el-card>
<el-card header="查看更多" class="property-group" shadow="never">
<el-card class="property-group" header="查看更多" shadow="never">
<el-form-item label="是否显示" prop="more.show">
<el-checkbox v-model="formData.more.show" />
</el-form-item>
@ -93,7 +88,7 @@
<el-radio value="all">文字+图标</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="更多文字" prop="more.text" v-show="formData.more.type !== 'icon'">
<el-form-item v-show="formData.more.type !== 'icon'" label="更多文字" prop="more.text">
<el-input v-model="formData.more.text" />
</el-form-item>
<el-form-item label="跳转链接" prop="more.url">
@ -104,7 +99,7 @@
</el-form>
</ComponentContainerProperty>
</template>
<script setup lang="ts">
<script lang="ts" setup>
import { TitleBarProperty } from './config'
import { usePropertyForm } from '@/components/DiyEditor/util'
// 导航栏属性面板
@ -118,4 +113,4 @@ const { formData } = usePropertyForm(props.modelValue, emit)
const rules = {}
</script>
<style scoped lang="scss"></style>
<style lang="scss" scoped></style>