smart-flow/yudao-ui-admin-vben
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: tailwindcss

Browse Source
This commit is contained in:
xingyu4j
2025-11-06 19:13:35 +08:00
parent 1aaae15706
commit 3483dceab3
5 changed files with 38 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/web-antd/src/components/cron-tab/cron-tab.vue
View File

@@ -420,7 +420,7 @@ function inputChange() {
@input="inputChange" @input="inputChange"
> >
<template #addonAfter> <template #addonAfter>
<Select v-model:value="select" placeholder="生成器" style="width: 115px"> <Select v-model:value="select" placeholder="生成器" class="w-36">
<Select.Option value="0 * * * * ?">每分钟</Select.Option> <Select.Option value="0 * * * * ?">每分钟</Select.Option>
<Select.Option value="0 0 * * * ?">每小时</Select.Option> <Select.Option value="0 0 * * * ?">每小时</Select.Option>
<Select.Option value="0 0 0 * * ?">每天零点</Select.Option> <Select.Option value="0 0 0 * * ?">每天零点</Select.Option>
@@ -946,20 +946,20 @@ function inputChange() {
padding: 0 15px; padding: 0 15px;
font-size: 12px; font-size: 12px;
line-height: 30px; line-height: 30px;
background: var(--ant-primary-color-active-bg); background: hsl(var(--primary) / 10%);
border-radius: 4px; border-radius: 4px;
} }
.sc-cron :deep(.ant-tabs-tab.ant-tabs-tab-active) .sc-cron-num h4 { .sc-cron :deep(.ant-tabs-tab.ant-tabs-tab-active) .sc-cron-num h4 {
color: #fff; color: #fff;
background: var(--ant-primary-color); background: hsl(var(--primary));
} }
[data-theme='dark'] .sc-cron-num h4 { [data-theme='dark'] .sc-cron-num h4 {
background: var(--ant-color-white); background: hsl(var(--white));
} }
.input-with-select .ant-input-group-addon { .input-with-select .ant-input-group-addon {
background-color: var(--ant-color-fill-alter); background-color: hsl(var(--muted));
} }
</style> </style>

21
apps/web-antd/src/views/iot/device/device/modules/detail/DeviceDetailsThingModelProperty.vue
View File

@@ -165,18 +165,15 @@ onMounted(() => {
> >
<!-- 添加渐变背景层 --> <!-- 添加渐变背景层 -->
<div <div
class="pointer-events-none absolute left-0 right-0 top-0 h-[50px] bg-gradient-to-b from-[#eefaff] to-transparent" class="from-muted pointer-events-none absolute left-0 right-0 top-0 h-12 bg-gradient-to-b to-transparent"
></div> ></div>
<div class="relative p-4"> <div class="relative p-4">
<!-- 标题区域 --> <!-- 标题区域 -->
<div class="mb-3 flex items-center"> <div class="mb-3 flex items-center">
<div class="mr-2.5 flex items-center"> <div class="mr-2.5 flex items-center">
<IconifyIcon <IconifyIcon icon="ep:cpu" class="text-primary text-lg" />
icon="ep:cpu"
class="text-[18px] text-[#0070ff]"
/>
</div> </div>
<div class="font-600 flex-1 text-[16px]">{{ item.name }}</div> <div class="flex-1 text-base font-bold">{{ item.name }}</div>
<!-- 标识符 --> <!-- 标识符 -->
<div class="mr-2 inline-flex items-center"> <div class="mr-2 inline-flex items-center">
<Tag size="small" color="blue"> <Tag size="small" color="blue">
@@ -198,22 +195,22 @@ onMounted(() => {
> >
<IconifyIcon <IconifyIcon
icon="ep:data-line" icon="ep:data-line"
class="text-[18px] text-[#0070ff]" class="text-primary text-lg"
/> />
</div> </div>
</div> </div>
<!-- 信息区域 --> <!-- 信息区域 -->
<div class="text-[14px]"> <div class="text-sm">
<div class="mb-2.5 last:mb-0"> <div class="mb-2.5 last:mb-0">
<span class="mr-2.5 text-[#717c8e]">属性值</span> <span class="text-muted-foreground mr-2.5">属性值</span>
<span class="font-600 text-[#0b1d30]"> <span class="text-foreground font-bold">
{{ formatValueWithUnit(item) }} {{ formatValueWithUnit(item) }}
</span> </span>
</div> </div>
<div class="mb-2.5 last:mb-0"> <div class="mb-2.5 last:mb-0">
<span class="mr-2.5 text-[#717c8e]">更新时间</span> <span class="text-muted-foreground mr-2.5">更新时间</span>
<span class="text-[12px] text-[#0b1d30]"> <span class="text-foreground text-sm">
{{ item.updateTime ? formatDate(item.updateTime) : '-' }} {{ item.updateTime ? formatDate(item.updateTime) : '-' }}
</span> </span>
</div> </div>

14
apps/web-antd/src/views/iot/product/product/modules/ProductCardView.vue
View File

@@ -102,7 +102,7 @@ defineExpose({
<template> <template>
<div class="product-card-view"> <div class="product-card-view">
<!-- 产品卡片列表 --> <!-- 产品卡片列表 -->
<div v-loading="loading" class="min-h-[400px]"> <div v-loading="loading" class="min-h-96">
<Row v-if="list.length > 0" :gutter="[16, 16]"> <Row v-if="list.length > 0" :gutter="[16, 16]">
<Col <Col
v-for="item in list" v-for="item in list"
@@ -119,7 +119,7 @@ defineExpose({
<div class="product-icon"> <div class="product-icon">
<IconifyIcon <IconifyIcon
:icon="item.icon || 'ant-design:inbox-outlined'" :icon="item.icon || 'ant-design:inbox-outlined'"
class="text-[32px]" class="text-3xl"
/> />
</div> </div>
<div class="ml-3 min-w-0 flex-1"> <div class="ml-3 min-w-0 flex-1">
@@ -162,7 +162,7 @@ defineExpose({
<div class="product-3d-icon"> <div class="product-3d-icon">
<IconifyIcon <IconifyIcon
icon="ant-design:box-plot-outlined" icon="ant-design:box-plot-outlined"
class="text-[80px]" class="text-2xl"
/> />
</div> </div>
</div> </div>
@@ -201,11 +201,11 @@ defineExpose({
size="small" size="small"
danger danger
disabled disabled
class="action-btn action-btn-delete !w-[32px]" class="action-btn action-btn-delete !w-8"
> >
<IconifyIcon <IconifyIcon
icon="ant-design:delete-outlined" icon="ant-design:delete-outlined"
class="text-[14px]" class="text-sm"
/> />
</Button> </Button>
</Tooltip> </Tooltip>
@@ -217,11 +217,11 @@ defineExpose({
<Button <Button
size="small" size="small"
danger danger
class="action-btn action-btn-delete !w-[32px]" class="action-btn action-btn-delete !w-8"
> >
<IconifyIcon <IconifyIcon
icon="ant-design:delete-outlined" icon="ant-design:delete-outlined"
class="text-[14px]" class="text-sm"
/> />
</Button> </Button>
</Popconfirm> </Popconfirm>

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

@@ -95,7 +95,7 @@ const calculateWidth = () => {
<template> <template>
<div <div
ref="containerRef" ref="containerRef"
class="box-content flex min-h-[30px] w-full flex-row flex-wrap" class="box-content flex min-h-9 w-full flex-row flex-wrap"
> >
<div <div
v-for="(spu, index) in spuList" v-for="(spu, index) in spuList"
@@ -108,26 +108,22 @@ const calculateWidth = () => {
borderBottomLeftRadius: `${property.borderRadiusBottom}px`, borderBottomLeftRadius: `${property.borderRadiusBottom}px`,
borderBottomRightRadius: `${property.borderRadiusBottom}px`, borderBottomRightRadius: `${property.borderRadiusBottom}px`,
}" }"
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"
> >
<!-- 角标 --> <!-- 角标 -->
<div <div
v-if="property.badge.show" v-if="property.badge.show"
class="absolute left-0 top-0 z-[1] items-center justify-center" class="absolute left-0 top-0 z-[1] items-center justify-center"
> >
<Image <Image :src="property.badge.imgUrl" class="h-6 w-10" fit="cover" />
:src="property.badge.imgUrl"
class="h-[26px] w-[38px]"
fit="cover"
/>
</div> </div>
<!-- 商品封面图 --> <!-- 商品封面图 -->
<div <div
class="h-[140px]" class="h-36"
:class="[ :class="[
{ {
'w-full': property.layoutType !== 'oneColSmallImg', 'w-full': property.layoutType !== 'oneColSmallImg',
'w-[140px]': property.layoutType === 'oneColSmallImg', 'w-36': property.layoutType === 'oneColSmallImg',
}, },
]" ]"
> >
@@ -146,7 +142,7 @@ const calculateWidth = () => {
<!-- 商品名称 --> <!-- 商品名称 -->
<div <div
v-if="property.fields.name.show" v-if="property.fields.name.show"
class="text-[14px]" class="text-sm"
:class="[ :class="[
{ {
truncate: property.layoutType !== 'oneColSmallImg', truncate: property.layoutType !== 'oneColSmallImg',
@@ -162,7 +158,7 @@ const calculateWidth = () => {
<div <div
v-if="property.fields.introduction.show" v-if="property.fields.introduction.show"
:style="{ color: property.fields.introduction.color }" :style="{ color: property.fields.introduction.color }"
class="truncate text-[12px]" class="truncate text-xs"
> >
{{ spu.introduction }} {{ spu.introduction }}
</div> </div>
@@ -171,7 +167,7 @@ const calculateWidth = () => {
<span <span
v-if="property.fields.price.show" v-if="property.fields.price.show"
:style="{ color: property.fields.price.color }" :style="{ color: property.fields.price.color }"
class="text-[16px]" class="text-base"
> >
{{ spu.point }}积分 {{ spu.point }}积分
{{ {{
@@ -184,12 +180,12 @@ const calculateWidth = () => {
<span <span
v-if="property.fields.marketPrice.show && spu.marketPrice" v-if="property.fields.marketPrice.show && spu.marketPrice"
:style="{ color: property.fields.marketPrice.color }" :style="{ color: property.fields.marketPrice.color }"
class="ml-[4px] text-[10px] line-through" class="ml-1 text-xs line-through"
> >
￥{{ fenToYuan(spu.marketPrice) }} ￥{{ fenToYuan(spu.marketPrice) }}
</span> </span>
</div> </div>
<div class="text-[12px]"> <div class="text-xs">
<!-- 销量 --> <!-- 销量 -->
<span <span
v-if="property.fields.salesCount.show" v-if="property.fields.salesCount.show"
@@ -207,14 +203,14 @@ const calculateWidth = () => {
</div> </div>
</div> </div>
<!-- 购买按钮 --> <!-- 购买按钮 -->
<div class="absolute bottom-[8px] right-[8px]"> <div class="absolute bottom-2 right-2">
<!-- 文字按钮 --> <!-- 文字按钮 -->
<span <span
v-if="property.btnBuy.type === 'text'" v-if="property.btnBuy.type === 'text'"
:style="{ :style="{
background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`, background: `linear-gradient(to right, ${property.btnBuy.bgBeginColor}, ${property.btnBuy.bgEndColor}`,
}" }"
class="rounded-full px-[12px] py-[4px] text-[12px] text-white" class="rounded-full px-3 py-1 text-sm text-white"
> >
{{ property.btnBuy.text }} {{ property.btnBuy.text }}
</span> </span>
@@ -222,12 +218,10 @@ const calculateWidth = () => {
<Image <Image
v-else v-else
:src="property.btnBuy.imgUrl" :src="property.btnBuy.imgUrl"
class="h-[28px] w-[28px] rounded-full" class="size-7 rounded-full"
fit="cover" fit="cover"
/> />
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<style lang="scss" scoped></style>

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

@@ -95,11 +95,11 @@ const calculateWidth = () => {
</script> </script>
<template> <template>
<div <div
class="box-content flex min-h-[30px] w-full flex-row flex-wrap" class="box-content flex min-h-9 w-full flex-row flex-wrap"
ref="containerRef" ref="containerRef"
> >
<div <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="{ :style="{
...calculateSpace(index), ...calculateSpace(index),
...calculateWidth(), ...calculateWidth(),
@@ -175,7 +175,7 @@ const calculateWidth = () => {
<!-- 市场价 --> <!-- 市场价 -->
<span <span
v-if="property.fields.marketPrice.show && spu.marketPrice" v-if="property.fields.marketPrice.show && spu.marketPrice"
class="ml-1 text-[10px] line-through" class="ml-1 text-xs line-through"
:style="{ color: property.fields.marketPrice.color }" :style="{ color: property.fields.marketPrice.color }"
> >
￥{{ fenToYuan(spu.marketPrice) }} ￥{{ fenToYuan(spu.marketPrice) }}
@@ -213,7 +213,7 @@ const calculateWidth = () => {
<!-- 图片按钮 --> <!-- 图片按钮 -->
<Image <Image
v-else v-else
class="h-7 w-7 rounded-full" class="size-7 rounded-full"
fit="cover" fit="cover"
:src="property.btnBuy.imgUrl" :src="property.btnBuy.imgUrl"
/> />
@@ -221,5 +221,3 @@ const calculateWidth = () => {
</div> </div>
</div> </div>
</template> </template>
<style scoped lang="scss"></style>