oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

feat: style

Browse Source
This commit is contained in:
xingyu4j
2025-11-05 19:07:32 +08:00
parent 56ae9c0230
commit 89d758b071
32 changed files with 181 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/component-container.vue
View File

@@ -96,7 +96,9 @@ const handleDeleteComponent = () => {
<div :style="style">
<component :is="component.id" :property="component.property" />
</div>
<div class="component-wrap absolute -left-0.5 top-1 block h-full w-full">
<div
class="component-wrap absolute -bottom-1 -left-0.5 -right-0.5 -top-1 block h-full w-full"
>
<!-- 左侧：组件名（悬浮的小贴条） -->
<div class="component-name" v-if="component.name">
{{ component.name }}
@@ -169,7 +171,7 @@ $toolbar-position: -55px;
.component-wrap {
/* 鼠标放到组件上时 */
&:hover {
border: $hover-border-width dashed var(--primary);
border: $hover-border-width dashed hsl(var(--primary));
box-shadow: 0 0 5px 0 rgb(24 144 255 / 30%);
.component-name {

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/coupon-card/index.vue
View File

@@ -33,13 +33,13 @@ watch(
);
// 手机宽度
const phoneWidth = ref(375);
const phoneWidth = ref(384);
// 容器
const containerRef = ref();
// 滚动条宽度
const scrollbarWidth = ref('100%');
// 优惠券的宽度
const couponWidth = ref(375);
const couponWidth = ref(384);
// 计算布局参数
watch(
() => [props.property, phoneWidth, couponList.value.length],
@@ -58,7 +58,7 @@ watch(
);
onMounted(() => {
// 提取手机宽度
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
});
</script>
<template>

6
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/hot-zone/property.vue
View File

@@ -66,10 +66,10 @@ const handleOpenEditDialog = () => {
align-items: center;
justify-content: center;
font-size: 12px;
color: #fff;
color: hsl(var(--text-color));
cursor: move;
background: #409effbf;
border: 1px solid var(--el-color-primary);
background: color-mix(in srgb, hsl(var(--primary)) 30%, transparent);
border: 1px solid hsl(var(--primary));
/* 控制点 */
.ctrl-dot {

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/navigation-bar/index.vue
View File

@@ -35,8 +35,8 @@ const cellList = computed(() =>
// 单元格宽度
const cellWidth = computed(() => {
return props.property._local?.previewMp
? (375 - 80 - 86) / 6
: (375 - 90) / 8;
? (384 - 80 - 86) / 6
: (384 - 90) / 8;
});
// 获得单元格样式
const getCellStyle = (cell: NavigationBarCellProperty) => {

15
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-card/property.vue
View File

@@ -44,17 +44,26 @@ const formData = useVModel(props, 'modelValue', emit);
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
<IconifyIcon
icon="fluent:text-column-one-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-left-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/index.vue
View File

@@ -26,7 +26,7 @@ watch(
},
);
// 手机宽度
const phoneWidth = ref(375);
const phoneWidth = ref(384);
// 容器
const containerRef = ref();
// 商品的列数
@@ -69,7 +69,7 @@ watch(
);
onMounted(() => {
// 提取手机宽度
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 375;
phoneWidth.value = containerRef.value?.wrapRef?.offsetWidth || 384;
});
</script>
<template>

12
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/product-list/property.vue
View File

@@ -46,17 +46,23 @@ const formData = useVModel(props, 'modelValue', emit);
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="三列" placement="bottom">
<RadioButton value="threeCol">
<IconifyIcon icon="fluent:text-column-three-24-filled" />
<IconifyIcon
icon="fluent:text-column-three-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="水平滑动" placement="bottom">
<RadioButton value="horizSwiper">
<IconifyIcon icon="system-uicons:carousel" />
<IconifyIcon icon="system-uicons:carousel" class="size-6" />
</RadioButton>
</Tooltip>
</RadioGroup>

4
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/index.vue
View File

@@ -27,7 +27,5 @@ watch(
);
</script>
<template>
<div class="min-h-[30px]" v-dompurify-html="article?.content"></div>
<div class="min-h-8" v-dompurify-html="article?.content"></div>
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-article/property.vue
View File

@@ -64,5 +64,3 @@ onMounted(() => {
</Form>
</ComponentContainerProperty>
</template>
<style scoped lang="scss"></style>

34
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/index.vue
View File

@@ -97,11 +97,11 @@ const calculateWidth = () => {
</script>
<template>
<div
class="box-content flex min-h-[30px] w-full flex-row flex-wrap"
class="box-content flex min-h-8 w-full flex-row flex-wrap"
ref="containerRef"
>
<div
class="relative box-content flex flex-row flex-wrap overflow-hidden bg-white"
class="bg-card relative box-content flex flex-row flex-wrap overflow-hidden"
:style="{
...calculateSpace(index),
...calculateWidth(),
@@ -118,19 +118,15 @@ const calculateWidth = () => {
v-if="property.badge.show"
class="absolute left-0 top-0 z-[1] items-center justify-center"
>
<Image
fit="cover"
:src="property.badge.imgUrl"
class="h-[26px] w-[38px]"
/>
<Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
</div>
<!-- 商品封面图 -->
<div
class="h-[140px]"
class="h-36"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[140px]': property.layoutType === 'oneColSmallImg',
'w-36': property.layoutType === 'oneColSmallImg',
},
]"
>
@@ -141,7 +137,7 @@ const calculateWidth = () => {
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[calc(100%-140px-16px)]':
'w-[calc(100vw-36px-16px)]':
property.layoutType === 'oneColSmallImg',
},
]"
@@ -149,7 +145,7 @@ const calculateWidth = () => {
<!-- 商品名称 -->
<div
v-if="property.fields.name.show"
class="text-[14px]"
class="text-sm"
:class="[
{
truncate: property.layoutType !== 'oneColSmallImg',
@@ -164,7 +160,7 @@ const calculateWidth = () => {
<!-- 商品简介 -->
<div
v-if="property.fields.introduction.show"
class="truncate text-[12px]"
class="truncate text-xs"
:style="{ color: property.fields.introduction.color }"
>
{{ spu.introduction }}
@@ -173,7 +169,7 @@ const calculateWidth = () => {
<!-- 价格 -->
<span
v-if="property.fields.price.show"
class="text-[16px]"
class="text-base"
:style="{ color: property.fields.price.color }"
>
￥{{ fenToYuan(spu.price || Infinity) }}
@@ -181,13 +177,13 @@ const calculateWidth = () => {
<!-- 市场价 -->
<span
v-if="property.fields.marketPrice.show && spu.marketPrice"
class="ml-[4px] text-[10px] line-through"
class="ml-1 text-xs line-through"
:style="{ color: property.fields.marketPrice.color }"
>
￥{{ fenToYuan(spu.marketPrice) }}
</span>
</div>
<div class="text-[12px]">
<div class="text-xs">
<!-- 销量 -->
<span
v-if="property.fields.salesCount.show"
@@ -205,11 +201,11 @@ const calculateWidth = () => {
</div>
</div>
<!-- 购买按钮 -->
<div class="absolute bottom-[8px] right-[8px]">
<div class="absolute bottom-2 right-2">
<!-- 文字按钮 -->
<span
v-if="property.btnBuy.type === 'text'"
class="rounded-full px-[12px] py-[4px] text-[12px] text-white"
class="rounded-full px-3 py-1 text-sm text-white"
:style="{
background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
}"
@@ -219,7 +215,7 @@ const calculateWidth = () => {
<!-- 图片按钮 -->
<Image
v-else
class="h-[28px] w-[28px] rounded-full"
class="size-7 rounded-full"
fit="cover"
:src="property.btnBuy.imgUrl"
/>
@@ -227,5 +223,3 @@ const calculateWidth = () => {
</div>
</div>
</template>
<style scoped lang="scss"></style>

15
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-combination/property.vue
View File

@@ -60,17 +60,26 @@ onMounted(async () => {
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
<IconifyIcon
icon="fluent:text-column-one-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-left-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

15
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-point/property.vue
View File

@@ -42,17 +42,26 @@ const formData = useVModel(props, 'modelValue', emit);
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
<IconifyIcon
icon="fluent:text-column-one-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-left-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

12
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/index.vue
View File

@@ -116,19 +116,15 @@ const calculateWidth = () => {
v-if="property.badge.show"
class="absolute left-0 top-0 z-[1] items-center justify-center"
>
<Image
fit="cover"
:src="property.badge.imgUrl"
class="h-[26px] w-[38px]"
/>
<Image fit="cover" :src="property.badge.imgUrl" class="h-6 w-8" />
</div>
<!-- 商品封面图 -->
<div
class="h-[140px]"
class="h-36"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[140px]': property.layoutType === 'oneColSmallImg',
'w-36': property.layoutType === 'oneColSmallImg',
},
]"
>
@@ -139,7 +135,7 @@ const calculateWidth = () => {
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[calc(100%-140px-16px)]':
'w-[calc(100vw-140px-16px)]':
property.layoutType === 'oneColSmallImg',
},
]"

15
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/promotion-seckill/property.vue
View File

@@ -45,17 +45,26 @@ const formData = useVModel(props, 'modelValue', emit);
<RadioGroup v-model:value="formData.layoutType">
<Tooltip title="单列大图" placement="bottom">
<RadioButton value="oneColBigImg">
<IconifyIcon icon="fluent:text-column-one-24-filled" />
<IconifyIcon
icon="fluent:text-column-one-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="单列小图" placement="bottom">
<RadioButton value="oneColSmallImg">
<IconifyIcon icon="fluent:text-column-two-left-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-left-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
<Tooltip title="双列" placement="bottom">
<RadioButton value="twoCol">
<IconifyIcon icon="fluent:text-column-two-24-filled" />
<IconifyIcon
icon="fluent:text-column-two-24-filled"
class="size-6"
/>
</RadioButton>
</Tooltip>
</RadioGroup>

10
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/title-bar/property.vue
View File

@@ -54,12 +54,18 @@ const rules = {}; // 表单校验
<RadioGroup v-model:value="formData!.textAlign">
<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>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/index.vue
View File

@@ -21,7 +21,7 @@ defineProps<{ property: UserCardProperty }>();
</div>
<IconifyIcon icon="lucide:qr-code" class="size-5" />
</div>
<div class="flex items-center justify-between bg-white px-5 py-2 text-xs">
<div class="bg-card flex items-center justify-between px-5 py-2 text-xs">
<span class="text-orange-500">点击绑定手机号</span>
<span class="rounded-lg bg-orange-500 px-2 py-1 text-white">
去绑定

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-card/property.vue
View File

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style" />
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/index.vue
View File

@@ -13,5 +13,3 @@ defineProps<{ property: UserCouponProperty }>();
src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/couponCardStyle.png"
/>
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-coupon/property.vue
View File

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style" />
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/index.vue
View File

@@ -13,5 +13,3 @@ defineProps<{ property: UserOrderProperty }>();
src="https://shopro.sheepjs.com/admin/static/images/shop/decorate/orderCardStyle.png"
/>
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/user-order/property.vue
View File

@@ -16,5 +16,3 @@ const formData = useVModel(props, 'modelValue', emit);
<template>
<ComponentContainerProperty v-model="formData.style" />
</template>
<style scoped lang="scss"></style>

2
apps/web-antd/src/views/mall/promotion/components/diy-editor/components/mobile/video-player/property.vue
View File

@@ -56,5 +56,3 @@ const formData = useVModel(props, 'modelValue', emit);
</Form>
</ComponentContainerProperty>
</template>
<style scoped lang="scss"></style>

4
apps/web-antd/src/views/mall/promotion/components/vertical-button-group/index.vue
View File

@@ -18,12 +18,12 @@ defineOptions({ name: 'VerticalButtonGroup' });
// TODO @AI:圆角的样式不太对！
.ant-btn-group > :deep(.ant-btn:first-child) {
border-bottom-color: transparent;
border-radius: var(--ant-border-radius) var(--ant-border-radius) 0 0;
border-radius: hsl(var(--radius)) hsl(var(--radius)) 0 0;
}
.ant-btn-group > :deep(.ant-btn:last-child) {
border-top-color: transparent;
border-radius: 0 0 var(--ant-border-radius) var(--ant-border-radius);
border-radius: 0 0 hsl(var(--radius)) hsl(var(--radius));
}
.ant-btn-group :deep(.ant-btn:not(:first-child):not(:last-child)) {

4
apps/web-antd/src/views/mall/promotion/kefu/modules/tools/emoji-select-popover.vue
View File

@@ -32,8 +32,8 @@ function handleSelect(item: Emoji) {
v-for="(item, index) in emojiList"
:key="index"
:style="{
borderColor: 'var(--primary)',
color: 'var(--primary)',
borderColor: 'hsl(var(--primary))',
color: 'hsl(var(--primary))',
}"
:title="item.name"
class="icon-item w-1/10 mr-2 mt-1 flex cursor-pointer items-center justify-center border border-solid p-2"