@didaoktv/didaoui-uniapp 1.4.2 → 2.0.0

package/components/dd-goods-card/dd-goods-card.vue

@@ -0,0 +1,261 @@
+<template>
+  <view
+    class="dd-goods-card"
+    :class="[
+      `dd-goods-card--${layout}`,
+      { 'dd-goods-card--disabled': disabled },
+    ]"
+    :style="customStyle"
+    :hover-class="hoverable ? 'dd-goods-card--hover' : ''"
+    :hover-stay-time="120"
+    @click="onClick"
+  >
+    <!-- 缩略图 + 金色角标 -->
+    <view class="dd-goods-card__thumb">
+      <slot name="thumb">
+        <image
+          class="dd-goods-card__thumb-img"
+          :src="thumb"
+          :mode="thumbMode"
+        ></image>
+      </slot>
+      <text v-if="tag" class="dd-goods-card__tag" :style="{ zIndex: zIndexConfig.base }">{{ tag }}</text>
+    </view>
+
+    <!-- 信息区 -->
+    <view class="dd-goods-card__body">
+      <slot name="default">
+        <text v-if="title" class="dd-goods-card__title">{{ title }}</text>
+        <text v-if="desc" class="dd-goods-card__desc">{{ desc }}</text>
+
+        <view class="dd-goods-card__price-row">
+          <view class="dd-goods-card__price">
+            <dd-price
+              v-if="price !== undefined && price !== null && price !== ''"
+              :rate="price"
+              :currency="currency"
+              :decimal-length="decimalLength"
+            ></dd-price>
+            <text v-if="originPrice" class="dd-goods-card__price-origin">
+              {{ currency }}{{ originPrice }}
+            </text>
+          </view>
+          <text v-if="num" class="dd-goods-card__num">×{{ num }}</text>
+        </view>
+
+        <view v-if="$slots.bottom" class="dd-goods-card__bottom">
+          <slot name="bottom"></slot>
+        </view>
+      </slot>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import DdPrice from '../dd-price/dd-price.vue'
+// z-index 统一取 libs/config/zIndex.js（角标抬到缩略图之上取 base 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
+
+interface Props {
+  /** 商品图片地址 */
+  thumb?: string
+  /** 商品名称 */
+  title?: string
+  /** 商品描述/规格说明 */
+  desc?: string
+  /** 单价（元，直接展示）；不传不渲染 */
+  price?: string | number
+  /** 划线原价（元，直接展示） */
+  originPrice?: string | number
+  /** 货币符号 */
+  currency?: string
+  /** 价格小数位数 */
+  decimalLength?: string | number
+  /** 角标文案（如「热卖」「售罄」） */
+  tag?: string
+  /** 布局：horizontal 横向（左图右文）/ vertical 竖向（上图下文） */
+  layout?: 'horizontal' | 'vertical'
+  /** 已选数量（右下角，不传不渲染） */
+  num?: string | number
+  /** 置灰（售罄等不可点场景） */
+  disabled?: boolean
+  /** 图片裁剪模式，透传 image mode */
+  thumbMode?: string
+  /** 是否启用按压反馈 */
+  hoverable?: boolean
+  /** 自定义根节点样式 */
+  customStyle?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  thumb: '',
+  title: '',
+  desc: '',
+  price: undefined,
+  originPrice: '',
+  currency: '¥',
+  decimalLength: 2,
+  tag: '',
+  layout: 'horizontal',
+  num: '',
+  disabled: false,
+  thumbMode: 'aspectFill',
+  hoverable: true,
+  customStyle: '',
+})
+
+const emit = defineEmits<{ (e: 'click', val: Event): void }>()
+
+function onClick(e: Event) {
+  if (props.disabled) return
+  emit('click', e)
+}
+</script>
+
+<style lang="scss" scoped>
+@import '../../scss/variables';
+@import '../../scss/mixins';
+
+.dd-goods-card {
+  display: flex;
+  box-sizing: border-box;
+  background: var(--dd-bg-elevated, #{$dd-bg-elevated});
+  // radius 非可换肤 token，走 SCSS 值（与 dd-card 同口径）
+  border-radius: $dd-radius-lg;
+  box-shadow: var(--dd-shadow-1, #{$dd-shadow-1});
+  overflow: hidden;
+  @include dd-transition(all 0.3s ease);
+
+  &--hover {
+    transform: translateY(-4rpx);
+    box-shadow: var(--dd-shadow-2, #{$dd-shadow-2});
+  }
+
+  // ponytail: 置灰用整卡降透明度，配合角标「售罄」示意；如需保留文字可读性再改 per-part 置灰
+  &--disabled {
+    opacity: 0.55;
+  }
+
+  &__thumb {
+    position: relative;
+    flex-shrink: 0;
+    overflow: hidden;
+
+    &-img {
+      display: block;
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  &__tag {
+    position: absolute;
+    top: $dd-space-1;
+    left: $dd-space-1;
+    padding: 2rpx $dd-space-2;
+    border-radius: $dd-radius-sm;
+    background: linear-gradient(
+      135deg,
+      $dd-primary-600,
+      var(--dd-primary, #{$dd-primary})
+    );
+    color: var(--dd-primary-contrast, #{$dd-primary-contrast});
+    font-size: 20rpx;
+    line-height: 1.4;
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__title {
+    color: var(--dd-text-primary, #{$dd-text-primary});
+    font-size: 28rpx;
+    font-weight: 600;
+    line-height: 1.4;
+    @include dd-ellipsis;
+  }
+
+  &__desc {
+    margin-top: $dd-space-1;
+    color: var(--dd-text-secondary, #{$dd-text-secondary});
+    font-size: 24rpx;
+    line-height: 1.4;
+    // 两行省略
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
+  }
+
+  &__price-row {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-top: auto;
+  }
+
+  &__price {
+    display: inline-flex;
+    align-items: baseline;
+    color: var(--dd-error-400, #{$dd-error-400});
+    font-weight: 600;
+  }
+
+  &__price-origin {
+    margin-left: $dd-space-2;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+    font-size: 22rpx;
+    font-weight: 400;
+    text-decoration: line-through;
+  }
+
+  &__num {
+    margin-left: $dd-space-2;
+    color: var(--dd-text-tertiary, #{$dd-text-tertiary});
+    font-size: 24rpx;
+  }
+
+  &__bottom {
+    margin-top: $dd-space-2;
+    width: 100%;
+  }
+}
+
+// 横向：左图右文，图 140rpx 见方
+.dd-goods-card--horizontal {
+  padding: $dd-space-3;
+
+  .dd-goods-card__thumb {
+    width: 140rpx;
+    height: 140rpx;
+    border-radius: $dd-radius-md;
+  }
+
+  .dd-goods-card__body {
+    padding-left: $dd-space-3;
+  }
+
+  .dd-goods-card__title {
+    @include dd-ellipsis;
+  }
+}
+
+// 竖向：上图下文，图占满整宽
+.dd-goods-card--vertical {
+  flex-direction: column;
+  padding: 0;
+
+  .dd-goods-card__thumb {
+    width: 100%;
+    aspect-ratio: 1;
+  }
+
+  .dd-goods-card__body {
+    padding: $dd-space-3;
+  }
+}
+</style>

package/components/dd-keyboard/dd-keyboard.vue

@@ -7,7 +7,6 @@
 	    position="bottom"
 	    :safe-area-inset-bottom="safeAreaInsetBottom"
 	    @close="popupClose"
-	    :z-index="zIndex"
 	>
 	<view class="dd-keyboard">
 			<slot />
@@ -74,7 +73,6 @@
 	 * @property {Boolean}			closeOnClickOverlay	是否允许点击遮罩收起键盘 （默认 true ）
 	 * @property {Boolean}			show				控制键盘的弹出与收起（默认 false ）
 	 * @property {Boolean}			overlay				是否显示遮罩 （默认 true ）
-	 * @property {String | Number}	zIndex				弹出键盘的z-index值 （默认 1075 ）
 	 * @property {String}			cancelText			取消按钮的文字 （默认 '取消' ）
 	 * @property {String}			confirmText			确认按钮的文字 （默认 '确认' ）
 	 * @property {Object}			customStyle			自定义样式，对象形式

package/components/dd-keyboard/keyboard.js

@@ -13,7 +13,6 @@ export default {
         closeOnClickOverlay: true,
         show: false,
         overlay: true,
-        zIndex: 10075,
         cancelText: '取消',
         confirmText: '确定'
     }

package/components/dd-keyboard/props.js

@@ -65,11 +65,6 @@ export const props = defineMixin({
             type: Boolean,
             default: () => defProps.keyboard.overlay
         },
-        // z-index值
-        zIndex: {
-            type: [String, Number],
-            default: () => defProps.keyboard.zIndex
-        },
         // 取消按钮的文字
         cancelText: {
             type: String,

package/components/dd-loading/dd-loading.vue

@@ -1,9 +1,9 @@
 <template>
   <!-- 仅全屏分支传送；inline 分支必须留在原位（传送会破坏布局流） -->
   <dd-portal v-if="fullscreen">
-  <view class="dd-loading dd-loading--fullscreen" :style="{ zIndex: 9999 }">
+  <view class="dd-loading dd-loading--fullscreen" :style="{ zIndex: zIndexConfig.loading }">
     <view class="dd-loading__mask"></view>
-    <view class="dd-loading__box">
+    <view class="dd-loading__box" :style="{ zIndex: zIndexConfig.base }">
       <view class="dd-loading__core" :class="[`dd-loading__core--${type}`, `dd-loading__core--${size}`]" :style="coreStyle">
         <template v-if="type === 'spinner'">
           <view class="dd-loading__spinner"></view>
@@ -40,6 +40,8 @@
 <script setup lang="ts">
 import { computed } from 'vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
+// z-index 统一取 libs/config/zIndex.js（压过 dialog/popup，但不压 toast）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   type?: 'spinner' | 'dots' | 'pulse'
@@ -93,7 +95,6 @@ const coreStyle = computed(() => (props.color ? { '--dd-loading-color': props.co
 
   &__box {
     position: relative;
-    z-index: 1;
     display: flex;
     flex-direction: column;
     align-items: center;

package/components/dd-mini-program-navbar/dd-mini-program-navbar.vue

@@ -51,6 +51,8 @@
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
+// z-index 统一取 libs/config/zIndex.js（自定义导航吸顶层级取 sticky 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   variant?: 'default' | 'search' | 'custom'
@@ -121,7 +123,7 @@ function info_windowWidth(): number {
   }
 }
 
-const navStyle = computed(() => ({}))
+const navStyle = computed(() => ({ zIndex: zIndexConfig.sticky }))
 
 const placeholderStyle = 'color: #9E9E9E; font-size: 14px;'
 
@@ -146,7 +148,7 @@ function onSearchConfirm(e: any) {
   @include dd-glass;
   border-bottom: 1px solid var(--dd-glass-border, #{$dd-glass-border});
   position: relative;
-  z-index: $dd-z-index-fixed;
+  /* z-index 由模板注入（libs/config/zIndex.js sticky 档） */
 
   &--transparent {
     background: transparent !important;

package/components/dd-modal/dd-modal.vue

@@ -10,6 +10,7 @@ let activeModalClose: (() => void) | null = null
       v-if="visible"
       class="dd-modal__mask"
       :class="{ 'dd-modal__mask--show': showClass }"
+      :style="{ zIndex: zIndexConfig.dialogMask }"
       @click="onMaskClick"
     ></view>
 
@@ -18,7 +19,7 @@ let activeModalClose: (() => void) | null = null
       v-if="visible && type === 'dialog'"
       class="dd-modal__dialog"
       :class="{ 'dd-modal__dialog--show': showClass }"
-      :style="{ width: widthValue }"
+      :style="{ width: widthValue, zIndex: zIndexConfig.dialog }"
     >
       <view v-if="$slots.header || title" class="dd-modal__header">
         <slot name="header">
@@ -41,6 +42,7 @@ let activeModalClose: (() => void) | null = null
       v-else-if="visible"
       class="dd-modal__sheet"
       :class="{ 'dd-modal__sheet--show': showClass }"
+      :style="{ zIndex: zIndexConfig.dialog }"
     >
       <view class="dd-modal__handle"></view>
       <view v-if="$slots.header || title" class="dd-modal__header">
@@ -64,6 +66,8 @@ let activeModalClose: (() => void) | null = null
 import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
+// z-index 统一取 libs/config/zIndex.js（对话框族与 dd-dialog 同档：dialogMask/dialog）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   modelValue?: boolean
@@ -177,7 +181,6 @@ onUnmounted(() => {
     backdrop-filter: blur(8px);
     -webkit-backdrop-filter: blur(8px);
     opacity: 0;
-    z-index: 1000;
     transition: opacity 0.25s ease;
 
     &--show {
@@ -192,7 +195,6 @@ onUnmounted(() => {
     left: 50%;
     transform: translate(-50%, -50%) scale(0.9);
     opacity: 0;
-    z-index: 1001;
     max-width: 720rpx; // 360px 上限
     max-height: 80vh;
     background: var(--dd-bg-popup, #{$dd-bg-popup});
@@ -217,7 +219,6 @@ onUnmounted(() => {
     right: 0;
     bottom: 0;
     transform: translateY(100%);
-    z-index: 1001;
     max-height: 85vh;
     background: var(--dd-bg-popup, #{$dd-bg-popup});
     border: 1px solid var(--dd-border-default, #{$dd-border-default});

package/components/dd-navigation/dd-navigation.vue

@@ -5,6 +5,7 @@
       'dd-nav--fixed': fixed,
       'dd-nav--border': border,
     }"
+    :style="{ zIndex: zIndexConfig.sticky }"
   >
     <view
       v-for="(item, index) in items"
@@ -27,6 +28,8 @@
 
 <script setup lang="ts">
 import DdIcon from '../dd-icon/dd-icon.vue'
+// z-index 统一取 libs/config/zIndex.js（fixed 时吸底层级取 sticky 档；非 fixed 时为 static，z-index 天然失效）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface NavItem {
   icon: string
@@ -83,7 +86,6 @@ function onSelect(index: number) {
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: $dd-z-index-sticky;
     @include dd-safe-area-bottom;
   }
 

package/components/dd-overlay/dd-overlay.vue

@@ -3,7 +3,7 @@
   <view
     class="dd-overlay"
     :class="{ 'dd-overlay--show': modelValue }"
-    :style="{ zIndex: zIndex, '--dd-overlay-duration': `${duration}s` }"
+    :style="{ zIndex: zIndexConfig.overlay, '--dd-overlay-duration': `${duration}s` }"
     @click="onClick"
     @touchmove="onTouchMove"
     @touchmove.stop.prevent="onTouchMove"
@@ -16,11 +16,12 @@
 <script setup lang="ts">
 import { watch } from 'vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
+// z-index 统一取 libs/config/zIndex.js（overlay 遮罩档，不对外暴露）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   modelValue?: boolean
   lockScroll?: boolean
-  zIndex?: number
   duration?: number
   closeOnClickOverlay?: boolean
 }
@@ -28,7 +29,6 @@ interface Props {
 const props = withDefaults(defineProps<Props>(), {
   modelValue: false,
   lockScroll: true,
-  zIndex: 2000,
   duration: 0.3,
   closeOnClickOverlay: true,
 })

package/components/dd-picker/dd-picker.vue

@@ -1,8 +1,8 @@
 <template>
   <dd-portal>
   <view class="dd-picker" :class="{ 'dd-picker--open': show }">
-    <view class="dd-picker__mask" @click="onMaskClick"></view>
-    <view class="dd-picker__sheet">
+    <view class="dd-picker__mask" :style="{ zIndex: zIndexConfig.overlay }" @click="onMaskClick"></view>
+    <view class="dd-picker__sheet" :style="{ zIndex: zIndexConfig.popup }">
       <view class="dd-picker__toolbar">
         <text class="dd-picker__cancel" @click="onCancel">取消</text>
         <text class="dd-picker__title">{{ title }}</text>
@@ -33,6 +33,8 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
+// z-index 统一取 libs/config/zIndex.js（picker 底部面板：overlay/popup 档）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface PickerItem {
   text: string
@@ -146,7 +148,6 @@ function onConfirm() {
   &__mask {
     position: fixed;
     inset: 0;
-    z-index: $dd-z-index-overlay;
     background: var(--dd-color-overlay-strong, #{$dd-color-overlay-strong});
     opacity: 0;
     pointer-events: none;
@@ -158,7 +159,6 @@ function onConfirm() {
     left: 0;
     right: 0;
     bottom: 0;
-    z-index: $dd-z-index-popup;
     background: var(--dd-bg-popup, #{$dd-bg-popup});
     border-radius: $dd-radius-lg $dd-radius-lg 0 0;
     transform: translateY(100%);

package/components/dd-popover/dd-popover.vue

@@ -25,6 +25,8 @@
 
 <script setup lang="ts">
 import { computed, provide } from 'vue'
+// z-index 统一取 libs/config/zIndex.js（透明点击遮罩 overlay 档、面板 popup 档，不对外暴露）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   modelValue?: boolean
@@ -33,7 +35,6 @@ interface Props {
   closeOnClickAction?: boolean
   closeOnClickOverlay?: boolean
   offset?: number
-  zIndex?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -43,7 +44,6 @@ const props = withDefaults(defineProps<Props>(), {
   closeOnClickAction: true,
   closeOnClickOverlay: true,
   offset: 16,
-  zIndex: 2000,
 })
 
 const emit = defineEmits<{
@@ -53,11 +53,11 @@ const emit = defineEmits<{
   (e: 'close'): void
 }>()
 
-const maskZIndex = computed(() => props.zIndex - 1)
+const maskZIndex = zIndexConfig.overlay
 
 const panelStyle = computed(() => {
   const offsetRpx = `${props.offset}rpx`
-  const s: Record<string, string> = { zIndex: String(props.zIndex) }
+  const s: Record<string, string> = { zIndex: String(zIndexConfig.popup) }
   // 偏移通过 margin 表达，避免覆盖 transform
   if (props.placement === 'top') s.marginBottom = offsetRpx
   if (props.placement === 'bottom') s.marginTop = offsetRpx
@@ -118,7 +118,6 @@ provide('ddPopover', {
     border-radius: $dd-radius-lg;
     box-shadow: var(--dd-shadow-2, #{$dd-shadow-2});
     overflow: visible;
-    z-index: 2000;
 
     &--light {
       background: var(--dd-bg-popup, #{$dd-bg-popup});

package/components/dd-popup/dd-popup.vue

@@ -19,7 +19,7 @@
       ]"
       :style="panelStyle"
     >
-      <view v-if="closeable" class="dd-popup__close" :class="`dd-popup__close--${closeIconPosition}`" @click="onCloseIcon">
+      <view v-if="closeable" class="dd-popup__close" :class="`dd-popup__close--${closeIconPosition}`" :style="{ zIndex: zIndexConfig.base + 1 }" @click="onCloseIcon">
         <dd-icon name="cross" />
       </view>
       <view v-if="position === 'bottom' && safeAreaInsetBottom" class="dd-popup__safe-bottom"></view>
@@ -33,6 +33,8 @@
 import { computed, ref, watch, onUnmounted, nextTick } from 'vue'
 import DdIcon from '../dd-icon/dd-icon.vue'
 import DdPortal from '../dd-portal/dd-portal.vue'
+// z-index 统一取 libs/config/zIndex.js（遮罩 overlay 档、面板 popup 档，不对外暴露）
+import zIndexConfig from '../../libs/config/zIndex.js'
 
 interface Props {
   modelValue?: boolean
@@ -46,7 +48,6 @@ interface Props {
   width?: string
   height?: string
   closeOnClickOverlay?: boolean
-  zIndex?: number
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -61,7 +62,6 @@ const props = withDefaults(defineProps<Props>(), {
   width: '',
   height: '',
   closeOnClickOverlay: true,
-  zIndex: 2000,
 })
 
 const emit = defineEmits<{
@@ -74,12 +74,12 @@ const emit = defineEmits<{
   (e: 'click-close-icon'): void
 }>()
 
-const overlayZIndex = computed(() => props.zIndex)
-const panelZIndex = computed(() => props.zIndex + 1)
+const overlayZIndex = zIndexConfig.overlay
+const panelZIndex = zIndexConfig.popup
 
 const panelStyle = computed(() => {
   const s: Record<string, string> = {
-    zIndex: String(panelZIndex.value),
+    zIndex: String(panelZIndex),
   }
   if (props.width && (props.position === 'left' || props.position === 'right')) {
     s.width = props.width
@@ -232,7 +232,6 @@ onUnmounted(() => {
     color: var(--dd-text-tertiary, #{$dd-text-tertiary});
     font-size: 44rpx;
     @include dd-flex-center;
-    z-index: 2;
 
     &--top-left { top: $dd-space-2; left: $dd-space-2; }
     &--top-right { top: $dd-space-2; right: $dd-space-2; }

package/components/dd-poster/dd-poster.vue

@@ -1,10 +1,11 @@
 <template>
 	<view class="dd-poster">
 		<!-- canvas用于绘制海报 -->
-		<view v-if="showCanvas" class="dd-poster__renderer">
+		<view v-if="showCanvas" class="dd-poster__renderer" :style="{ zIndex: zcBase }">
 			<dd-canvas
 				ref="posterCanvas"
 				class="dd-poster__hidden-canvas"
+				:style="{ zIndex: zcBase }"
 				:canvas-id="canvasId"
 				:width="canvasWidth"
 				:height="canvasHeight"
@@ -13,7 +14,7 @@
 			</dd-canvas>
 		</view>
 		<!-- 隐藏的二维码组件，用于生成二维码图片 -->
-		<view class="dd-poster__renderer">
+		<view class="dd-poster__renderer" :style="{ zIndex: zcBase }">
 			<dd-qrcode
 				ref="qrCode"
 				:val="qrCodeValue"
@@ -24,6 +25,7 @@
 				background="#ffffff"
 				foreground="#000000"
 				:class="['dd-poster__hidden-qrcode', qrCodeShow ? '' : 'dd-poster__hidden-qrcode--hidden']"
+				:style="{ zIndex: zcBase }"
 			/>
 		</view>
 	</view>
@@ -48,6 +50,8 @@
 import {
 	rpx2px
 } from '../../libs/function/index.js';
+// z-index 统一取 libs/config/zIndex.js（离屏隐藏容器归 base 档，Options API 经 data 暴露给模板）
+import zIndexConfig from '../../libs/config/zIndex.js';
 export default {
 	name: 'dd-poster',
 	props: {
@@ -58,6 +62,8 @@ export default {
 	},
 	data() {
 		return {
+			// 离屏隐藏容器层级（base 档）
+			zcBase: zIndexConfig.base,
 			canvasId: 'dd-poster-canvas-' + Date.now(),
 			showCanvas: false,
 			canvasWidth: 0,
@@ -656,7 +662,6 @@ export default {
 		width: 1px;
 		height: 1px;
 		overflow: hidden;
-		z-index: -1;
 		opacity: 0.01;
 		pointer-events: none;
 	}
@@ -670,22 +675,19 @@ export default {
 		width: 1px;
 		height: 1px;
 		overflow: hidden;
-		z-index: -1;
 	}
 
 	&__hidden-canvas {
 		position: fixed;
 		top: -10000px;
 		left: -10000px;
-		z-index: -1;
 	}
-	
+
 	&__hidden-qrcode {
 		position: fixed;
 		top: -10000px;
 		left: -10000px;
-		z-index: -1;
-		
+
 		&--hidden {
 			display: none;
 		}