feat: diy editor style
This commit is contained in:
@@ -24,7 +24,7 @@ const handleIndexChange = (index: number) => {
|
||||
class="bg-card flex h-64 items-center justify-center"
|
||||
v-if="property.items.length === 0"
|
||||
>
|
||||
<IconifyIcon icon="tdesign:image" class="text-3xl text-gray-800" />
|
||||
<IconifyIcon icon="tdesign:image" class="size-6 text-gray-800" />
|
||||
</div>
|
||||
<div v-else class="relative">
|
||||
<Carousel
|
||||
|
||||
@@ -43,7 +43,11 @@ const handleActive = (index: number) => {
|
||||
<Image :src="item.imgUrl" fit="contain" class="h-7 w-7">
|
||||
<template #error>
|
||||
<div class="flex h-full w-full items-center justify-center">
|
||||
<IconifyIcon icon="ep:picture" :color="item.textColor" />
|
||||
<IconifyIcon
|
||||
icon="ep:picture"
|
||||
:color="item.textColor"
|
||||
class="size-6"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</Image>
|
||||
|
||||
@@ -3,6 +3,8 @@ import type { ImageBarProperty } from './config';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Image } from 'ant-design-vue';
|
||||
|
||||
/** 图片展示 */
|
||||
defineOptions({ name: 'ImageBar' });
|
||||
|
||||
@@ -17,18 +19,9 @@ defineProps<{ property: ImageBarProperty }>();
|
||||
<IconifyIcon icon="ep:picture" class="text-3xl text-gray-600" />
|
||||
</div>
|
||||
<Image
|
||||
class="min-h-8 w-full"
|
||||
class="block h-full min-h-8 w-full"
|
||||
v-else
|
||||
:src="property.imgUrl"
|
||||
:preview="false"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 图片 */
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -70,12 +70,12 @@ watch(
|
||||
<RadioGroup v-model:value="formData!.borderRadius">
|
||||
<Tooltip title="方形" placement="top">
|
||||
<RadioButton :value="0">
|
||||
<IconifyIcon icon="tabler:input-search" />
|
||||
<IconifyIcon icon="tabler:input-search" class="size-6" />
|
||||
</RadioButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="圆形" placement="top">
|
||||
<RadioButton :value="10">
|
||||
<IconifyIcon icon="iconoir:input-search" />
|
||||
<IconifyIcon icon="iconoir:input-search" class="size-6" />
|
||||
</RadioButton>
|
||||
</Tooltip>
|
||||
</RadioGroup>
|
||||
@@ -87,12 +87,18 @@ watch(
|
||||
<RadioGroup v-model:value="formData!.placeholderPosition">
|
||||
<Tooltip title="居左" placement="top">
|
||||
<RadioButton value="left">
|
||||
<IconifyIcon icon="ant-design:align-left-outlined" />
|
||||
<IconifyIcon
|
||||
icon="ant-design:align-left-outlined"
|
||||
class="size-6"
|
||||
/>
|
||||
</RadioButton>
|
||||
</Tooltip>
|
||||
<Tooltip title="居中" placement="top">
|
||||
<RadioButton value="center">
|
||||
<IconifyIcon icon="ant-design:align-center-outlined" />
|
||||
<IconifyIcon
|
||||
icon="ant-design:align-center-outlined"
|
||||
class="size-6"
|
||||
/>
|
||||
</RadioButton>
|
||||
</Tooltip>
|
||||
</RadioGroup>
|
||||
|
||||
@@ -13,5 +13,3 @@ defineProps<{ property: UserWalletProperty }>();
|
||||
src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/walletCardStyle.png"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
|
||||
<template>
|
||||
<ComponentContainerProperty v-model="formData.style" />
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
|
||||
@@ -10,10 +10,14 @@ defineProps<{ property: VideoPlayerProperty }>();
|
||||
</script>
|
||||
<template>
|
||||
<div class="w-full" :style="{ height: `${property.style.height}px` }">
|
||||
<Image class="w-full" :src="property.posterUrl" v-if="property.posterUrl" />
|
||||
<Image
|
||||
class="h-full w-full"
|
||||
:src="property.posterUrl"
|
||||
v-if="property.posterUrl"
|
||||
/>
|
||||
<video
|
||||
v-else
|
||||
class="w-full"
|
||||
class="h-full w-full"
|
||||
:src="property.videoUrl"
|
||||
:poster="property.posterUrl"
|
||||
:autoplay="property.autoplay"
|
||||
@@ -21,12 +25,3 @@ defineProps<{ property: VideoPlayerProperty }>();
|
||||
></video>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/* 图片 */
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user