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

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

@@ -165,18 +165,15 @@ onMounted(() => {
>
<!-- 添加渐变背景层 -->
<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 class="relative p-4">
<!-- 标题区域 -->
<div class="mb-3 flex items-center">
<div class="mr-2.5 flex items-center">
<IconifyIcon
icon="ep:cpu"
class="text-[18px] text-[#0070ff]"
/>
<IconifyIcon icon="ep:cpu" class="text-primary text-lg" />
</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">
<Tag size="small" color="blue">
@@ -198,22 +195,22 @@ onMounted(() => {
>
<IconifyIcon
icon="ep:data-line"
class="text-[18px] text-[#0070ff]"
class="text-primary text-lg"
/>
</div>
</div>
<!-- 信息区域 -->
<div class="text-[14px]">
<div class="text-sm">
<div class="mb-2.5 last:mb-0">
<span class="mr-2.5 text-[#717c8e]">属性值</span>
<span class="font-600 text-[#0b1d30]">
<span class="text-muted-foreground mr-2.5">属性值</span>
<span class="text-foreground font-bold">
{{ formatValueWithUnit(item) }}
</span>
</div>
<div class="mb-2.5 last:mb-0">
<span class="mr-2.5 text-[#717c8e]">更新时间</span>
<span class="text-[12px] text-[#0b1d30]">
<span class="text-muted-foreground mr-2.5">更新时间</span>
<span class="text-foreground text-sm">
{{ item.updateTime ? formatDate(item.updateTime) : '-' }}
</span>
</div>

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

@@ -102,7 +102,7 @@ defineExpose({
<template>
<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]">
<Col
v-for="item in list"
@@ -119,7 +119,7 @@ defineExpose({
<div class="product-icon">
<IconifyIcon
:icon="item.icon || 'ant-design:inbox-outlined'"
class="text-[32px]"
class="text-3xl"
/>
</div>
<div class="ml-3 min-w-0 flex-1">
@@ -162,7 +162,7 @@ defineExpose({
<div class="product-3d-icon">
<IconifyIcon
icon="ant-design:box-plot-outlined"
class="text-[80px]"
class="text-2xl"
/>
</div>
</div>
@@ -201,11 +201,11 @@ defineExpose({
size="small"
danger
disabled
class="action-btn action-btn-delete !w-[32px]"
class="action-btn action-btn-delete !w-8"
>
<IconifyIcon
icon="ant-design:delete-outlined"
class="text-[14px]"
class="text-sm"
/>
</Button>
</Tooltip>
@@ -217,11 +217,11 @@ defineExpose({
<Button
size="small"
danger
class="action-btn action-btn-delete !w-[32px]"
class="action-btn action-btn-delete !w-8"
>
<IconifyIcon
icon="ant-design:delete-outlined"
class="text-[14px]"
class="text-sm"
/>
</Button>
</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>
<div
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
v-for="(spu, index) in spuList"
@@ -108,26 +108,22 @@ const calculateWidth = () => {
borderBottomLeftRadius: `${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
v-if="property.badge.show"
class="absolute left-0 top-0 z-[1] items-center justify-center"
>
<Image
:src="property.badge.imgUrl"
class="h-[26px] w-[38px]"
fit="cover"
/>
<Image :src="property.badge.imgUrl" class="h-6 w-10" fit="cover" />
</div>
<!-- 商品封面图 -->
<div
class="h-[140px]"
class="h-36"
:class="[
{
'w-full': property.layoutType !== 'oneColSmallImg',
'w-[140px]': property.layoutType === 'oneColSmallImg',
'w-36': property.layoutType === 'oneColSmallImg',
},
]"
>
@@ -146,7 +142,7 @@ const calculateWidth = () => {
<!-- 商品名称 -->
<div
v-if="property.fields.name.show"
class="text-[14px]"
class="text-sm"
:class="[
{
truncate: property.layoutType !== 'oneColSmallImg',
@@ -162,7 +158,7 @@ const calculateWidth = () => {
<div
v-if="property.fields.introduction.show"
:style="{ color: property.fields.introduction.color }"
class="truncate text-[12px]"
class="truncate text-xs"
>
{{ spu.introduction }}
</div>
@@ -171,7 +167,7 @@ const calculateWidth = () => {
<span
v-if="property.fields.price.show"
:style="{ color: property.fields.price.color }"
class="text-[16px]"
class="text-base"
>
{{ spu.point }}积分
{{
@@ -184,12 +180,12 @@ const calculateWidth = () => {
<span
v-if="property.fields.marketPrice.show && spu.marketPrice"
:style="{ color: property.fields.marketPrice.color }"
class="ml-[4px] text-[10px] line-through"
class="ml-1 text-xs line-through"
>
￥{{ fenToYuan(spu.marketPrice) }}
</span>
</div>
<div class="text-[12px]">
<div class="text-xs">
<!-- 销量 -->
<span
v-if="property.fields.salesCount.show"
@@ -207,14 +203,14 @@ 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'"
:style="{
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 }}
</span>
@@ -222,12 +218,10 @@ const calculateWidth = () => {
<Image
v-else
:src="property.btnBuy.imgUrl"
class="h-[28px] w-[28px] rounded-full"
class="size-7 rounded-full"
fit="cover"
/>
</div>
</div>
</div>
</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>
<template>
<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"
>
<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(),
@@ -175,7 +175,7 @@ const calculateWidth = () => {
<!-- 市场价 -->
<span
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 }"
>
￥{{ fenToYuan(spu.marketPrice) }}
@@ -213,7 +213,7 @@ const calculateWidth = () => {
<!-- 图片按钮 -->
<Image
v-else
class="h-7 w-7 rounded-full"
class="size-7 rounded-full"
fit="cover"
:src="property.btnBuy.imgUrl"
/>
@@ -221,5 +221,3 @@ const calculateWidth = () => {
</div>
</div>
</template>
<style scoped lang="scss"></style>