oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-guidance/oxy-guidance.vue

@@ -0,0 +1,201 @@
+<template>
+  <view :class="['oxy-guide', customClass]" v-if="showGuide" :style="customStyle" @touchmove.stop.prevent>
+    <view class="oxy-guide__box" :style="guideStyle">
+      <view ref="tips" class="oxy-guide__box__tips" :style="tipPosition">
+        <view class="text">{{ guideInfo.tips }}</view>
+        <view class="oxy-guide__box__tips__tool-btn">
+          <text class="oxy-guide__box__tips__tool-btn-skip" @click="skip">跳过</text>
+          <view class="oxy-guide__box__tips__tool-btn__next" @click="next">{{ guideInfo.next }}</view>
+        </view>
+      </view>
+      <view class="oxy-guide__box__arrow" :style="arrowTop"></view>
+    </view>
+    <!-- 遮罩层，防止点击 -->
+    <view class="oxy-guide__model"></view>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-guidance',
+  options: {
+    virtualHost: true,
+    addGlobalClass: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed, getCurrentInstance, nextTick, onMounted, ref, watch } from 'vue'
+import { unitConvert } from '../common/util'
+import { guidanceProps, type guideListType } from './types'
+import NodeInfo = UniNamespace.NodeInfo
+
+const props = defineProps(guidanceProps)
+
+const stepName = ref('step') //该提示步骤的名称，用于不在重复展示
+
+const guideList = ref([] as guideListType[])
+
+const index = ref(0) // 当前展示的索引
+const showGuide = ref(true) // 是否显示引导
+
+const arrowTop = ref('') //步骤提示三角形的定位
+const tipPosition = ref('') //步骤提示的定位
+const systemInfo = ref({} as UniNamespace.GetSystemInfoResult) //屏幕宽度高度等信息
+const tipWidth = ref(0) //步骤提示默认的宽度
+const guideStyle = ref<Record<string, string | number>>({}) //默认样式
+const toPx = (value: number | string | null | undefined) => unitConvert(value, 0, { output: 'px' })
+
+const { proxy } = getCurrentInstance()!
+
+const guideInfo = computed(() => {
+  return guideList.value.length ? guideList.value[index.value] : ({} as guideListType)
+})
+
+onMounted(() => {
+  guideList.value = props.step.guideList
+  stepName.value = props.step.name
+  systemInfo.value = uni.getSystemInfoSync()
+  const guide = uni.getStorageSync(stepName.value)
+  if (!guide) {
+    getDomInfo()
+  } else {
+    showGuide.value = false
+  }
+})
+
+// 获取dom信息
+function getDomInfo() {
+  const { el } = guideInfo.value
+  nextTick(() => {
+    const query = uni.createSelectorQuery()
+    query.select(el).boundingClientRect()
+    // 回调结果exec一起处理，解决报错增加空回调
+    query.selectViewport().scrollOffset(() => {})
+    query.exec((res) => {
+      if (res[0]) {
+        let data = res[0]
+        let scrollTop = res[1].scrollTop
+        viewTips(data, scrollTop)
+      }
+    })
+  })
+}
+// 重置
+function openGuid() {
+  uni.setStorageSync(stepName.value, '')
+  index.value = 0
+  showGuide.value = true
+  getDomInfo()
+}
+// 跳过新手提示
+function skip() {
+  showGuide.value = false
+  uni.setStorageSync(stepName.value, 'true')
+  uni.pageScrollTo({
+    scrollTop: 0,
+    duration: 100
+  })
+}
+// 下一步
+function next() {
+  if (index.value === guideList.value.length - 1) {
+    showGuide.value = false
+    uni.setStorageSync(stepName.value, 'true')
+    uni.pageScrollTo({
+      scrollTop: 0,
+      duration: 100
+    })
+  } else {
+    index.value += 1
+    getDomInfo()
+  }
+}
+
+const tips = ref()
+
+// 展示新手提示
+function viewTips(data: any, scrollTop: number) {
+  if (data) {
+    // 如果dom宽度大于或者等于窗口宽度,需要重新调整dom展示宽度
+    let newWidth = systemInfo.value.windowWidth - 20
+    if (data.width >= newWidth) {
+      data.width = newWidth
+    }
+    // 如果距离左边为0,自动增加一点左边距
+    if (data.left == 0) {
+      data.left = 10
+    }
+    let domRW = systemInfo.value.windowWidth - data.left
+    let left = 0
+    tipWidth.value = tips.value.$el.clientWidth
+    // 如果dom距离右边没有tips的宽度大的话,就要让tips向左偏移
+    if (domRW < tipWidth.value) {
+      left = domRW - tipWidth.value
+    }
+    // 步骤条展示的高度需要加上屏幕滚动的高度
+    data.top += scrollTop
+    // 根据实际情况需要滚动到展示区域
+    uni.pageScrollTo({
+      scrollTop: data.top > 44 ? data.top - 44 : 0,
+      duration: 100
+    })
+    let obj = Object.assign(guideList.value[index.value], data)
+    // 设置三角形高度
+    let arrowTopHeight = data.height + 9
+    //如果dom在屏幕底部的话，重新调整提示框和三角形的定位
+    let newHeight = systemInfo.value.windowHeight - data.bottom
+    uni
+      .createSelectorQuery()
+      .in(proxy)
+      .select('.oxy-guide__box__tips')
+      .boundingClientRect((res) => {
+        if (newHeight > ((res as NodeInfo).height ?? 0) + 5) {
+          // 设置提示框定位
+          arrowTop.value = `top: ${toPx(arrowTopHeight)};`
+          tipPosition.value = `top: ${toPx(arrowTopHeight + 5)};${
+            left < 0 ? 'right: 0;' : 'left: ' + toPx(left) + ';'
+          }background: linear-gradient(180deg, #1cbbb4, #0081ff);`
+        } else {
+          // 设置提示框定位
+          arrowTop.value = `top: ${toPx(-19)};`
+          tipPosition.value = `top: ${toPx(-14)};${
+            left < 0 ? 'right: 0;' : 'left: ' + toPx(left) + ';'
+          }transform: translateY(-100%);background: linear-gradient(0deg, #1cbbb4, #0081ff);`
+        }
+      })
+      .exec()
+    // 重新设置guideList的值
+    guideList.value.splice(index.value, 1, obj)
+    guideStyle.value = getStyle()
+  } else {
+    index.value += 1
+    getDomInfo()
+  }
+}
+// 获取步骤提示的主要样式
+function getStyle() {
+  const { width, height, left, top, style = {} } = guideInfo.value
+  const newstyle: Record<string, string | number> = {
+    width: toPx(width),
+    height: toPx(height),
+    left: toPx(left),
+    top: toPx(top),
+    boxShadow: `rgb(33 33 33 / 80%) ${toPx(0)} ${toPx(0)} ${toPx(0)} ${toPx(0)}, rgb(33 33 33 / 50%) ${toPx(0)} ${toPx(0)} ${toPx(0)} ${toPx(5000)}`,
+    borderRadius: '8rpx',
+    margin: '0'
+  }
+  Object.assign(newstyle, style)
+  return newstyle
+}
+
+defineExpose({
+  openGuid
+})
+</script>
+
+<style lang="scss" scoped>
+@import './index.scss';
+</style>

package/components/oxy-guidance/types.ts

@@ -0,0 +1,33 @@
+import type { PropType } from 'vue'
+import { baseProps } from '../common/props'
+
+export type guideListType = {
+  el: string
+  tips: string
+  next: string
+  width?: number
+  height?: number
+  left?: number
+  top?: number
+  style?: Record<string, string | number>
+}
+
+export type stepType = {
+  name: string
+  guideList: Array<guideListType>
+}
+
+export const guidanceProps = {
+  ...baseProps,
+
+  /**
+   * 步骤集合
+   * 类型: Object
+   * 默认值: null
+   */
+  step: {
+    required: true as const,
+    type: Object as PropType<stepType>,
+    default: null
+  }
+}

package/components/oxy-icon/oxy-icon.vue

@@ -17,7 +17,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, type CSSProperties } from 'vue'
-import { addUnit, isDef, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, objToStyle } from '../common/util'
 import { iconProps } from './types'
 
 const props = defineProps(iconProps)
@@ -38,7 +38,7 @@ const rootStyle = computed(() => {
     style['color'] = props.color
   }
   if (props.size) {
-    style['font-size'] = addUnit(props.size)
+    style['font-size'] = withDefaultUnit(props.size)
   }
   return `${objToStyle(style)} ${props.customStyle}`
 })

package/components/oxy-icon/types.ts

@@ -11,7 +11,7 @@ export const iconProps = {
    */
   color: String,
   /**
-   * 图标的字体大小
+   * 图标的字体大小，number 类型按 `rpx` 语义处理
    */
   size: numericProp,
   /**

package/components/oxy-img/oxy-img.vue

@@ -27,7 +27,7 @@ export default {
 
 <script lang="ts" setup>
 import { computed, ref } from 'vue'
-import { addUnit, isDef, objToStyle } from '../common/util'
+import { withDefaultUnit, isDef, objToStyle } from '../common/util'
 import { imgProps } from './types'
 
 const props = defineProps(imgProps)
@@ -40,13 +40,13 @@ const emit = defineEmits<{
 const rootStyle = computed(() => {
   const style: Record<string, string | number> = {}
   if (isDef(props.height)) {
-    style['height'] = addUnit(props.height)
+    style['height'] = withDefaultUnit(props.height)
   }
   if (isDef(props.width)) {
-    style['width'] = addUnit(props.width)
+    style['width'] = withDefaultUnit(props.width)
   }
   if (isDef(props.radius)) {
-    style['border-radius'] = addUnit(props.radius)
+    style['border-radius'] = withDefaultUnit(props.radius)
     style['overflow'] = 'hidden'
   }
   return `${objToStyle(style)}${props.customStyle}`

package/components/oxy-img/types.ts

@@ -39,15 +39,15 @@ export const imgProps = {
    */
   lazyLoad: makeBooleanProp(false),
   /**
-   * 宽度，默认单位为px
+   * 宽度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   width: numericProp,
   /**
-   * 高度，默认单位为px
+   * 高度，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   height: numericProp,
   /**
-   * 圆角大小，默认单位为px
+   * 圆角大小，number 类型按 `rpx` 语义处理，也支持 `px/rpx`
    */
   radius: numericProp,
   /**

package/components/oxy-img-cropper/index.scss

@@ -65,7 +65,7 @@
       }
 
       // 结算框对角尺寸
-      $border-size: 2px;
+      $border-size: 4rpx;
 
       // 节选框的四个角
       .is-left-top,
@@ -76,14 +76,14 @@
           content: "";
           position: absolute;
           width: $border-size;
-          height: 20px;
+          height: 40rpx;
           background-color: #fff;
         }
 
         &::after {
           content: "";
           position: absolute;
-          width: 20px;
+          width: 40rpx;
           height: $border-size;
           background-color: #fff;
         }
@@ -184,8 +184,8 @@
   @include e(canvas) {
     position: fixed;
     background: white;
-    width: 150px;
-    height: 150px;
+    width: 300rpx;
+    height: 300rpx;
     z-index: 10;
     top: -200%;
     pointer-events: none;
@@ -194,7 +194,7 @@
   @include e(footer) {
     position: fixed;
     z-index: 10;
-    bottom: 10px;
+    bottom: 20rpx;
     width: 100%;
     height: 15vh;
     text-align: center;
@@ -202,7 +202,7 @@
     @include m(button) {
       position: relative;
       text-align: left;
-      margin: 0 20px;
+      margin: 0 40rpx;
       padding-top: 4vh;
       // line-height: 32px;
       box-sizing: border-box;
@@ -210,16 +210,16 @@
       .is-cancel {
         display: inline-block;
         color: #fff;
-        font-size: 16px;
+        font-size: 32rpx;
       }
 
       .is-confirm {
         position: absolute;
         right: 0;
         // height: 32px;
-        width: 56px;
-        border-radius: 16px;
-        font-size: 16px;
+        width: 112rpx;
+        border-radius: 32rpx;
+        font-size: 32rpx;
       }
     }
   }
@@ -228,4 +228,4 @@
     font-size: $-img-cropper-icon-size;
     color: $-img-cropper-icon-color;
   }
-}
+}

package/components/oxy-img-cropper/oxy-img-cropper.vue

@@ -6,15 +6,15 @@
       <!-- 画出裁剪框 -->
       <view class="oxy-img-cropper__cut">
         <!-- 上方阴影块 -->
-        <view :class="`oxy-img-cropper__cut--top ${IS_TOUCH_END ? '' : 'is-hightlight'}`" :style="`height: ${cutTop}px;`"></view>
-        <view class="oxy-img-cropper__cut--middle" :style="`height: ${cutHeight}px;`">
+        <view :class="`oxy-img-cropper__cut--top ${IS_TOUCH_END ? '' : 'is-hightlight'}`" :style="`height: ${toPx(cutTop)};`"></view>
+        <view class="oxy-img-cropper__cut--middle" :style="`height: ${toPx(cutHeight)};`">
           <!-- 左侧阴影块 -->
           <view
             :class="`oxy-img-cropper__cut--left ${IS_TOUCH_END ? '' : 'is-hightlight'}`"
-            :style="`width: ${cutLeft}px; height: ${cutHeight}px;`"
+            :style="`width: ${toPx(cutLeft)}; height: ${toPx(cutHeight)};`"
           ></view>
           <!-- 裁剪框 -->
-          <view class="oxy-img-cropper__cut--body" :style="`width: ${cutWidth}px; height: ${cutHeight}px;`">
+          <view class="oxy-img-cropper__cut--body" :style="`width: ${toPx(cutWidth)}; height: ${toPx(cutHeight)};`">
             <!-- 内部网格线 -->
             <view class="is-gridlines-x"></view>
             <view class="is-gridlines-y"></view>
@@ -52,7 +52,7 @@
       :id="canvasId"
       class="oxy-img-cropper__canvas"
       :disable-scroll="true"
-      :style="`width: ${Number(canvasWidth) * canvasScale}px; height: ${Number(canvasHeight) * canvasScale}px;`"
+      :style="`width: ${toPx(Number(canvasWidth) * canvasScale)}; height: ${toPx(Number(canvasHeight) * canvasScale)};`"
     />
     <!-- 下方按钮 -->
     <view class="oxy-img-cropper__footer">
@@ -80,7 +80,8 @@ export default {
 import OxyIcon from '../oxy-icon/oxy-icon.vue'
 import OxyButton from '../oxy-button/oxy-button.vue'
 import { computed, getCurrentInstance, ref, watch } from 'vue'
-import { addUnit, objToStyle, uuid } from '../common/util'
+import { objToStyle, unitConvert, unitConvertWithDefault, uuid } from '../common/util'
+import { useWindowResize, type WindowResizeResult } from '../composables/useWindowResize'
 import { useTranslate } from '../composables/useTranslate'
 import { imgCropperProps, type ImgCropperExpose } from './types'
 
@@ -132,11 +133,12 @@ const imgScale = ref<number>(1)
 // imgWidth: null,
 // imgHeight: null,
 // 图片中心轴点距左的距离
-const imgLeft = ref<number>(uni.getSystemInfoSync().windowWidth / 2)
-const imgTop = ref<number>((uni.getSystemInfoSync().windowHeight / 2) * TOP_PERCENT)
+const initialInfo = uni.getSystemInfoSync()
+const imgLeft = ref<number>(initialInfo.windowWidth / 2)
+const imgTop = ref<number>((initialInfo.windowHeight / 2) * TOP_PERCENT)
 
 const imgInfo = ref<UniApp.GetImageInfoSuccessData | null>(null)
-const info = ref<UniApp.GetSystemInfoResult>(uni.getSystemInfoSync())
+const info = ref<UniApp.GetSystemInfoResult>(initialInfo)
 
 // 是否移动中设置 同时控制背景颜色是否高亮
 const IS_TOUCH_END = ref<boolean>(true)
@@ -157,31 +159,58 @@ const fingerDistance = ref<string | number>('')
 const ctx = ref<UniApp.CanvasContext | null>(null)
 
 const { proxy } = getCurrentInstance() as any
+const updateSystemInfo = (res?: WindowResizeResult) => {
+  const systemInfo = uni.getSystemInfoSync()
+  const resizeWidth = Number(res?.size?.windowWidth ?? res?.windowWidth)
+  const resizeHeight = Number(res?.size?.windowHeight ?? res?.windowHeight)
+  info.value = {
+    ...systemInfo,
+    windowWidth: Number.isFinite(resizeWidth) && resizeWidth > 0 ? resizeWidth : systemInfo.windowWidth,
+    windowHeight: Number.isFinite(resizeHeight) && resizeHeight > 0 ? resizeHeight : systemInfo.windowHeight
+  }
+}
+
+function updateCropLayout() {
+  INIT_IMGWIDTH = props.imgWidth
+  INIT_IMGHEIGHT = props.imgHeight
+
+  // 根据aspectRatio计算裁剪框尺寸
+  const [widthRatio, heightRatio] = props.aspectRatio.split(':').map(Number)
+  const tempCutWidth = info.value.windowWidth - offset.value * 2
+  const tempCutHeight = (tempCutWidth * heightRatio) / widthRatio
+
+  cutWidth.value = tempCutWidth
+  cutHeight.value = tempCutHeight
+  cutTop.value = (info.value.windowHeight * TOP_PERCENT - tempCutHeight) / 2
+  cutLeft.value = offset.value
+
+  canvasScale.value = props.exportScale
+  canvasHeight.value = tempCutHeight
+  canvasWidth.value = tempCutWidth
+
+  // 根据开发者设置的图片目标尺寸计算实际尺寸
+  initImageSize()
+}
+
+const handleWindowResize = (res?: WindowResizeResult) => {
+  updateSystemInfo(res)
+  if (!props.modelValue) return
+
+  updateCropLayout()
+  if (imgInfo.value) {
+    computeImgSize()
+    resetImg()
+  }
+}
+
+useWindowResize(handleWindowResize)
 
 watch(
   () => props.modelValue,
   (newValue) => {
     if (newValue) {
-      INIT_IMGWIDTH = props.imgWidth
-      INIT_IMGHEIGHT = props.imgHeight
-      info.value = uni.getSystemInfoSync()
-
-      // 根据aspectRatio计算裁剪框尺寸
-      const [widthRatio, heightRatio] = props.aspectRatio.split(':').map(Number)
-      const tempCutWidth = info.value.windowWidth - offset.value * 2
-      const tempCutHeight = (tempCutWidth * heightRatio) / widthRatio
-
-      cutWidth.value = tempCutWidth
-      cutHeight.value = tempCutHeight
-      cutTop.value = (info.value.windowHeight * TOP_PERCENT - tempCutHeight) / 2
-      cutLeft.value = offset.value
-
-      canvasScale.value = props.exportScale
-      canvasHeight.value = tempCutHeight
-      canvasWidth.value = tempCutWidth
-
-      // 根据开发者设置的图片目标尺寸计算实际尺寸
-      initImageSize()
+      updateSystemInfo()
+      updateCropLayout()
       // 初始化canvas
       initCanvas()
       // 加载图片
@@ -242,21 +271,25 @@ const buttonStyle = computed(() => {
     position: 'absolute',
     right: 0,
     // height: 32px;
-    width: '56px',
-    'border-radius': '16px',
-    'font-size': '16px'
+    width: '112rpx',
+    'border-radius': '32rpx',
+    'font-size': '32rpx'
   }
 
   return objToStyle(style)
 })
 
+const toPx = (value: string | number | null | undefined) => unitConvert(value, 0, { output: 'px' })
+
 const imageStyle = computed(() => {
   const style: Record<string, string | number> = {
-    width: picWidth.value ? addUnit(picWidth.value) : 'auto',
-    height: picHeight.value ? addUnit(picHeight.value) : 'auto',
-    transform: `translate(${addUnit(imgLeft.value - picWidth.value / 2)}, ${addUnit(imgTop.value - picHeight.value / 2)}) scale(${
-      imgScale.value
-    }) rotate(${imgAngle.value}deg)`,
+    width: picWidth.value ? unitConvert(picWidth.value, 0, { output: 'px' }) : 'auto',
+    height: picHeight.value ? unitConvert(picHeight.value, 0, { output: 'px' }) : 'auto',
+    transform: `translate(${unitConvert(imgLeft.value - picWidth.value / 2, 0, { output: 'px' })}, ${unitConvert(
+      imgTop.value - picHeight.value / 2,
+      0,
+      { output: 'px' }
+    )}) scale(${imgScale.value}) rotate(${imgAngle.value}deg)`,
     'transition-duration': (isAnimation.value ? 0.4 : 0) + 's'
   }
   return objToStyle(style)
@@ -305,7 +338,7 @@ function setRoate(angle: number) {
  * 初始化图片的大小和角度以及距离
  */
 function resetImg() {
-  const { windowHeight, windowWidth } = uni.getSystemInfoSync()
+  const { windowHeight, windowWidth } = info.value
   imgScale.value = 1
   imgAngle.value = 0
   imgLeft.value = windowWidth / 2
@@ -387,21 +420,33 @@ function initCanvas() {
  *  图片初始化,处理宽高特殊单位
  */
 function initImageSize() {
-  // 处理宽高特殊单位 %>px
-  if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'string' && INIT_IMGWIDTH.indexOf('%') !== -1) {
-    const width: string = INIT_IMGWIDTH.replace('%', '')
-    INIT_IMGWIDTH = (info.value.windowWidth / 100) * Number(width)
-    picWidth.value = INIT_IMGWIDTH
-  } else if (INIT_IMGWIDTH && typeof INIT_IMGWIDTH === 'number') {
-    picWidth.value = INIT_IMGWIDTH
+  const resolveImageLength = (value: number | string | null, base: number): number | null => {
+    if (value === null || value === undefined || value === '') return null
+
+    if (typeof value === 'string') {
+      const trimmed = value.trim()
+      if (!trimmed) return null
+      if (trimmed.endsWith('%')) {
+        const percentValue = Number(trimmed.slice(0, -1))
+        if (!Number.isFinite(percentValue)) return null
+        return (base * percentValue) / 100
+      }
+    }
+
+    const converted = unitConvertWithDefault(value, { defaultUnit: 'rpx' })
+    return Number.isFinite(converted) && converted > 0 ? converted : null
   }
-  if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'string' && INIT_IMGHEIGHT.indexOf('%') !== -1) {
-    const height = (props.imgHeight as string).replace('%', '')
-    // INIT_IMGHEIGHT = this.data.imgHeight = (info.value.windowHeight / 100) * Number(height)
-    INIT_IMGHEIGHT = (info.value.windowHeight / 100) * Number(height)
-    picWidth.value = INIT_IMGHEIGHT
-  } else if (INIT_IMGHEIGHT && typeof INIT_IMGHEIGHT === 'number') {
-    picWidth.value = Number(INIT_IMGWIDTH)
+
+  const resolvedWidth = resolveImageLength(INIT_IMGWIDTH, info.value.windowWidth)
+  if (resolvedWidth !== null) {
+    INIT_IMGWIDTH = resolvedWidth
+    picWidth.value = resolvedWidth
+  }
+
+  const resolvedHeight = resolveImageLength(INIT_IMGHEIGHT, info.value.windowHeight)
+  if (resolvedHeight !== null) {
+    INIT_IMGHEIGHT = resolvedHeight
+    picHeight.value = resolvedHeight
   }
 }
 

package/components/oxy-img-cropper/types.ts

@@ -38,11 +38,11 @@ export const imgCropperProps = {
    */
   imgSrc: makeStringProp(''),
   /**
-   * 图片宽
+   * 图片宽，支持 `px/rpx/%`，number 与纯数字字符串按 rpx 处理
    */
   imgWidth: makeNumericProp(''),
   /**
-   * 图片高
+   * 图片高，支持 `px/rpx/%`，number 与纯数字字符串按 rpx 处理
    */
   imgHeight: makeNumericProp(''),
   /**

package/components/oxy-img-lazy/index.scss

@@ -0,0 +1,17 @@
+@import "./../common/abstracts/_mixin.scss";
+@import "./../common/abstracts/variable.scss";
+
+@include b(img-lazy) {
+  // overflow: hidden;
+  position: relative;
+  @include e(image) {
+    display: block;
+    will-change: transform;
+  }
+
+  @include e(load) {
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+}