diff --git a/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue b/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
index 46fa04cd52..bb3b233c10 100644
--- a/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/basic-usage-composition-api.vue
@@ -18,7 +18,7 @@ const image = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/dsj.p
diff --git a/examples/sites/demos/pc/app/card/basic-usage.vue b/examples/sites/demos/pc/app/card/basic-usage.vue
index 0f472b9372..d4c6239a15 100644
--- a/examples/sites/demos/pc/app/card/basic-usage.vue
+++ b/examples/sites/demos/pc/app/card/basic-usage.vue
@@ -26,7 +26,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue b/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue
index 9936f99d08..f90691eca8 100644
--- a/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-disabled-composition-api.vue
@@ -39,7 +39,7 @@ const options = ref([
diff --git a/examples/sites/demos/pc/app/card/card-disabled.vue b/examples/sites/demos/pc/app/card/card-disabled.vue
index c07a89627c..e7dced53c1 100644
--- a/examples/sites/demos/pc/app/card/card-disabled.vue
+++ b/examples/sites/demos/pc/app/card/card-disabled.vue
@@ -47,7 +47,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/card-events-composition-api.vue b/examples/sites/demos/pc/app/card/card-events-composition-api.vue
index c269060324..b9432576a6 100644
--- a/examples/sites/demos/pc/app/card/card-events-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-events-composition-api.vue
@@ -60,7 +60,7 @@ function iconClick(item, index) {
diff --git a/examples/sites/demos/pc/app/card/card-events.vue b/examples/sites/demos/pc/app/card/card-events.vue
index c7404b1e77..88666954e8 100644
--- a/examples/sites/demos/pc/app/card/card-events.vue
+++ b/examples/sites/demos/pc/app/card/card-events.vue
@@ -69,7 +69,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/card-group-composition-api.vue b/examples/sites/demos/pc/app/card/card-group-composition-api.vue
index 34c651ff16..9fb097b62c 100644
--- a/examples/sites/demos/pc/app/card/card-group-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-group-composition-api.vue
@@ -63,7 +63,7 @@ function change(val) {
diff --git a/examples/sites/demos/pc/app/card/card-group.vue b/examples/sites/demos/pc/app/card/card-group.vue
index 7ffca04ed9..afa38f3672 100644
--- a/examples/sites/demos/pc/app/card/card-group.vue
+++ b/examples/sites/demos/pc/app/card/card-group.vue
@@ -73,7 +73,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/card-select-composition-api.vue b/examples/sites/demos/pc/app/card/card-select-composition-api.vue
index 1fb34f5c7f..3b72cd537d 100644
--- a/examples/sites/demos/pc/app/card/card-select-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-select-composition-api.vue
@@ -86,7 +86,7 @@ const dataArr = ref([
diff --git a/examples/sites/demos/pc/app/card/card-size.vue b/examples/sites/demos/pc/app/card/card-size.vue
index 259b2d0eb1..dcc226a2f0 100644
--- a/examples/sites/demos/pc/app/card/card-size.vue
+++ b/examples/sites/demos/pc/app/card/card-size.vue
@@ -61,7 +61,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/card-status-composition-api.vue b/examples/sites/demos/pc/app/card/card-status-composition-api.vue
index 7535e6219f..cbdc9ef274 100644
--- a/examples/sites/demos/pc/app/card/card-status-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-status-composition-api.vue
@@ -43,7 +43,7 @@ import { TinyCard } from '@opentiny/vue'
diff --git a/examples/sites/demos/pc/app/card/card-status.vue b/examples/sites/demos/pc/app/card/card-status.vue
index 9373afc68a..ac1154fe34 100644
--- a/examples/sites/demos/pc/app/card/card-status.vue
+++ b/examples/sites/demos/pc/app/card/card-status.vue
@@ -52,7 +52,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/card-type-composition-api.vue b/examples/sites/demos/pc/app/card/card-type-composition-api.vue
index 5865b5e3d5..21bedc087d 100644
--- a/examples/sites/demos/pc/app/card/card-type-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/card-type-composition-api.vue
@@ -41,7 +41,7 @@ const userHead = ref(`${import.meta.env.VITE_APP_BUILD_BASE_URL}static/images/us
diff --git a/examples/sites/demos/pc/app/card/card-type.vue b/examples/sites/demos/pc/app/card/card-type.vue
index c2928e3048..94632586f2 100644
--- a/examples/sites/demos/pc/app/card/card-type.vue
+++ b/examples/sites/demos/pc/app/card/card-type.vue
@@ -49,7 +49,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
index aafe332082..5639f75fd1 100644
--- a/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/check-mode-composition-api.vue
@@ -76,7 +76,7 @@ const dataArr = ref([
diff --git a/examples/sites/demos/pc/app/card/check-type-checkbox.vue b/examples/sites/demos/pc/app/card/check-type-checkbox.vue
index 07a553e3fc..1ea5e93a12 100644
--- a/examples/sites/demos/pc/app/card/check-type-checkbox.vue
+++ b/examples/sites/demos/pc/app/card/check-type-checkbox.vue
@@ -34,7 +34,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue b/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue
index 2b4c9333f6..99c02da187 100644
--- a/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/check-type-radio-composition-api.vue
@@ -25,7 +25,7 @@ const value = ref('1')
diff --git a/examples/sites/demos/pc/app/card/check-type-radio.vue b/examples/sites/demos/pc/app/card/check-type-radio.vue
index cd413ccbd8..fa95978f9d 100644
--- a/examples/sites/demos/pc/app/card/check-type-radio.vue
+++ b/examples/sites/demos/pc/app/card/check-type-radio.vue
@@ -33,7 +33,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
index 0f7a281295..c1e68c252c 100644
--- a/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/custom-class-composition-api.vue
@@ -16,6 +16,6 @@ import { TinyCard } from '@opentiny/vue'
diff --git a/examples/sites/demos/pc/app/card/custom-class.vue b/examples/sites/demos/pc/app/card/custom-class.vue
index 70b983b4b9..b115380bec 100644
--- a/examples/sites/demos/pc/app/card/custom-class.vue
+++ b/examples/sites/demos/pc/app/card/custom-class.vue
@@ -22,6 +22,6 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue b/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue
index 0eac59b957..082e6dc3db 100644
--- a/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/operate-bar-composition-api.vue
@@ -47,7 +47,7 @@ const options = ref([
diff --git a/examples/sites/demos/pc/app/card/operate-bar.vue b/examples/sites/demos/pc/app/card/operate-bar.vue
index 882f6e6cc8..1749bc21f7 100644
--- a/examples/sites/demos/pc/app/card/operate-bar.vue
+++ b/examples/sites/demos/pc/app/card/operate-bar.vue
@@ -54,7 +54,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/card/slot-composition-api.vue b/examples/sites/demos/pc/app/card/slot-composition-api.vue
index 9ffabf30b1..6de18acda3 100644
--- a/examples/sites/demos/pc/app/card/slot-composition-api.vue
+++ b/examples/sites/demos/pc/app/card/slot-composition-api.vue
@@ -61,7 +61,7 @@ const isOpen = ref(true)
diff --git a/examples/sites/demos/pc/app/card/slot.vue b/examples/sites/demos/pc/app/card/slot.vue
index 5a7a40df96..37cfbffd3c 100644
--- a/examples/sites/demos/pc/app/card/slot.vue
+++ b/examples/sites/demos/pc/app/card/slot.vue
@@ -70,7 +70,7 @@ export default {
diff --git a/examples/sites/demos/pc/app/qr-code/basic-usage.spec.ts b/examples/sites/demos/pc/app/qr-code/basic-usage.spec.ts
index 69f67795bf..50b58bdcf2 100644
--- a/examples/sites/demos/pc/app/qr-code/basic-usage.spec.ts
+++ b/examples/sites/demos/pc/app/qr-code/basic-usage.spec.ts
@@ -4,6 +4,6 @@ test('基本用法', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('qr-code#basic-usage')
- const canvas = page.locator('.tiny-qr-code-container canvas')
+ const canvas = page.locator('.tiny-qr-code canvas')
await expect(canvas).toBeVisible()
})
diff --git a/examples/sites/demos/pc/app/qr-code/icon.spec.ts b/examples/sites/demos/pc/app/qr-code/icon.spec.ts
index 8bc04280fe..06c9c1bd68 100644
--- a/examples/sites/demos/pc/app/qr-code/icon.spec.ts
+++ b/examples/sites/demos/pc/app/qr-code/icon.spec.ts
@@ -4,8 +4,8 @@ test('自定义 icon', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('qr-code#icon')
- const canvas = page.locator('.tiny-qr-code-container canvas')
- const canvasImg = page.locator('.tiny-qr-code-container .mask-icon img')
+ const canvas = page.locator('.tiny-qr-code canvas')
+ const canvasImg = page.locator('.tiny-qr-code .mask-icon img')
await expect(canvas).toBeVisible()
await expect(canvasImg).toBeVisible()
})
diff --git a/examples/sites/demos/pc/app/qr-code/level.spec.ts b/examples/sites/demos/pc/app/qr-code/level.spec.ts
index 73df979f2c..4a4fdf731a 100644
--- a/examples/sites/demos/pc/app/qr-code/level.spec.ts
+++ b/examples/sites/demos/pc/app/qr-code/level.spec.ts
@@ -4,7 +4,7 @@ test('二维码纠错等级', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('qr-code#level')
- const canvas = page.locator('.tiny-qr-code-container canvas')
+ const canvas = page.locator('.tiny-qr-code canvas')
await expect(canvas).toBeVisible()
const button = page.locator('.tiny-radio-button--small')
diff --git a/examples/sites/demos/pc/app/qr-code/style.spec.ts b/examples/sites/demos/pc/app/qr-code/style.spec.ts
index e2e1563547..05055e5332 100644
--- a/examples/sites/demos/pc/app/qr-code/style.spec.ts
+++ b/examples/sites/demos/pc/app/qr-code/style.spec.ts
@@ -4,6 +4,6 @@ test('自定义样式', async ({ page }) => {
page.on('pageerror', (exception) => expect(exception).toBeNull())
await page.goto('qr-code#style')
- const canvas = page.locator('.tiny-qr-code-container canvas')
+ const canvas = page.locator('.tiny-qr-code canvas')
await expect(canvas).toBeVisible()
})
diff --git a/packages/theme/src/qr-code/index.less b/packages/theme/src/qr-code/index.less
index e7b269eecc..a42ebc6fb7 100644
--- a/packages/theme/src/qr-code/index.less
+++ b/packages/theme/src/qr-code/index.less
@@ -10,59 +10,59 @@
*
*/
@import '../custom.less';
-
+@import './vars.less';
@qr-code-prefix-cls: ~'@{css-prefix}qr-code';
.@{qr-code-prefix-cls} {
- &-container {
- position: relative;
- padding: 12px;
+ .inject-QrCode-vars();
+ position: relative;
+ padding: 12px;
+ background-color: var(--tv-QrCode-container-bg-color);
- &.border {
- border: 1px solid rgb(5 5 5 / 6%);
- border-radius: 8px;
- }
+ &.border {
+ border: 1px solid rgba(231, 220, 220, 0.06);
+ border-radius: 8px;
+ }
- .qrcode-border {
- padding: 2px;
- border: 1px solid rgb(5 5 5 / 6%);
- border-radius: 8px;
+ .qrcode-border {
+ padding: 2px;
+ border: 1px solid rgb(5 5 5 / 6%);
+ border-radius: 8px;
+ }
+
+ .qrcode-expried {
+ font-size: 14px;
+ }
+
+ .mask {
+ position: absolute;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100%;
+ height: 100%;
+ text-align: center;
+ color: rgb(0 0 0 / 88%);
+ inset-block-start: 0;
+ inset-inline-start: 0;
+ flex-direction: column;
+
+ &-icon {
+ z-index: 10;
}
- .qrcode-expried {
- font-size: 14px;
+ &-status {
+ z-index: 20;
+ background: rgb(255 255 255 / 96%);
}
- .mask {
+ .icon {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
- width: 100%;
- height: 100%;
- text-align: center;
- color: rgb(0 0 0 / 88%);
- inset-block-start: 0;
- inset-inline-start: 0;
- flex-direction: column;
-
- &-icon {
- z-index: 10;
- }
-
- &-status {
- z-index: 20;
- background: rgb(255 255 255 / 96%);
- }
-
- .icon {
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: center;
- border: none;
- background: white;
- }
+ border: none;
+ background: white;
}
}
}
diff --git a/packages/theme/src/qr-code/vars.less b/packages/theme/src/qr-code/vars.less
new file mode 100644
index 0000000000..4a01355f49
--- /dev/null
+++ b/packages/theme/src/qr-code/vars.less
@@ -0,0 +1,4 @@
+.inject-QrCode-vars() {
+ // 二维码背景色
+ --tv-QrCode-container-bg-color: var(--tv-color-bg-inverse-tint-1);
+}
diff --git a/packages/theme/src/skeleton-item/vars.less b/packages/theme/src/skeleton-item/vars.less
index c2b236b49f..0031c64426 100644
--- a/packages/theme/src/skeleton-item/vars.less
+++ b/packages/theme/src/skeleton-item/vars.less
@@ -28,5 +28,5 @@
// 大图片宽度设置
--tv-SkeletonItem-image-large-size-width: 200px;
// 渐变颜色设置(hide)
- --tv-SkeletonItem-linear-gradient: linear-gradient(to right, #fafafa, #ebebeb, #fafafa);
+ --tv-SkeletonItem-linear-gradient: linear-gradient(to right, var(--tv-color-bg-hover), var(--tv-color-border-container), var(--tv-color-bg-hover));
}
diff --git a/packages/theme/src/vars.less b/packages/theme/src/vars.less
index 9be0a3e2e8..c2b954c66a 100644
--- a/packages/theme/src/vars.less
+++ b/packages/theme/src/vars.less
@@ -68,5 +68,6 @@
@import './skeleton/vars.less';
@import './skeleton-item/vars.less';
@import './color-picker/vars.less';
+@import './qr-code/vars.less';
@import './color-select-panel/vars.less';
@import './popeditor/vars.less';
diff --git a/packages/vue/src/qr-code/src/pc.vue b/packages/vue/src/qr-code/src/pc.vue
index 3ac72e4b12..64606c360b 100644
--- a/packages/vue/src/qr-code/src/pc.vue
+++ b/packages/vue/src/qr-code/src/pc.vue
@@ -1,7 +1,7 @@