lxui-uni 0.0.8 → 0.1.0

package/README.md

@@ -1,6 +1,11 @@
-# lxui-uni
-
-### npm安装
-```sh
-npm install lxui-uni -S
-```
+# lxui-uni
+
+### npm安装
+
+```sh
+npm install lxui-uni -S
+```
+
+### 文档地址：
+
+https://lalalalaxx.github.io/lxui-uni/

package/components/lx-header/lx-header.vue

@@ -1,251 +1,251 @@
-<script lang="ts" setup>
-/*
- * @description: 头部组件
- * @fileName: Header.vue
- * @params
- * @author: lxx
- * @date: 2023-07-16 09:32:09
- * @version: V1.0.2
- */
-import { goToPage } from '../../libs/util'
-import { type CSSProperties, computed, ref, watchEffect } from 'vue'
-
-type headerInt = {
-    title: string
-    // 头部高度 默认为44px （微信小程序不可用）
-    headerHeight?: number
-    // 是否显示左侧内容
-    leftIconShow?: boolean
-    // 样式部分
-    backgroundColor?: string
-    backgroundColor2?: string
-    textColor?: string
-    textFontSize?: number
-    // 是否需要生成和头部高度相同的盒子
-    isShowHeaderBox?: boolean
-    positionState?: string
-    isShowShadow?: boolean
-    isBlackIcon?: boolean
-    // 头部没有右侧盒子，true：左中右结构 false：左中结构(小程序可以为左中右结构但是没有右侧盒子)
-    isHaveRightBox?: boolean
-}
-
-const props = withDefaults(defineProps<headerInt>(), {
-    // 头部高度 默认为44px （微信小程序不可用）
-    headerHeight: 44,
-    // 是否显示左侧内容
-    leftIconShow: true,
-    // 样式部分
-    backgroundColor: '#ffffff', //linear-gradient(90deg, rgba(10, 207, 254, 1) 0%, rgba(74, 92, 255, 1) 100%)
-    backgroundColor2: '#ffffff',
-    textColor: '#000',
-    textFontSize: 34,
-    title: '标题',
-    // 是否需要生成和头部高度相同的盒子
-    isShowHeaderBox: true,
-    positionState: 'fixed',
-    isShowShadow: false,
-    isBlackIcon: true, // 是否为黑色图标
-    isHaveRightBox: true
-})
-
-let { statusBarHeight } = uni.getSystemInfoSync()
-// #ifdef MP-WEIXIN
-// 胶囊状态
-let menuButton = uni.getMenuButtonBoundingClientRect()
-// 微信头部宽度
-let wxHeaderWidth = menuButton.left - 10
-// 上边距
-statusBarHeight = menuButton.top
-// #endif
-
-// padding的高度（防止头部塌陷）
-const fillBoxHeight = ref(statusBarHeight + 3)
-
-// 设置header的高度
-const headerHeightRef = ref(0)
-watchEffect(() => {
-    headerHeightRef.value = props.headerHeight
-    // #ifdef MP-WEIXIN
-    // 中间高度
-    headerHeightRef.value = menuButton.height
-    // #endif
-})
-// console.log('statusBarHeight', statusBarHeight)
-
-const style = computed(() => {
-    return {
-        boxShadow: props.isShowShadow ? '0 0 8rpx -3rpx #333' : '0 0 0 0 #333',
-        background: props.backgroundColor,
-        color: props.textColor,
-        position: props.positionState
-    } as CSSProperties
-})
-// 返回上一页(如没有页面返回首页)
-const goBack = () => {
-    if (getCurrentPages().length <= 1) {
-        goToPage({
-            url: 'pages/index/index',
-            mode: 'redirectTo'
-        })
-    } else {
-        uni.navigateBack()
-    }
-}
-
-const backIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACMklEQVR4nO2av0uVURjHPyiEYgkuoVC4ODSK2pRDYFOENOQP6A+IEgknkWgKgqTEP6AaHIKyhqhGiSgVpKwGBweLBMHZcjAK47xcXrxxn6el5/pwzvnAme5wv5/ve+/hPO/7kslkMplMxjsjwCdgB7iV2tW6Aez/tW46yFUXpmvIh/U6AXfuCvJhnXOQz5R7ivz1iL0LZhX5Sw7ymTIviG8DpyP2pg14Kch/BjodZDSjHdgQ5D8CrZF6F3QD3wT5VeCog4xm9ADfBfn3scv3KvJhL2hxkNGMsJv/EOQfRepcchbYFeQnnWQ046JywLkSqXPJlCJ/2UlGM7Rz/WikziX3BfFfwLCTjGY8FuR/Av2ROpdIQ004159yktGMZ4L8Yuzn+mZgQZB/BTQ6yGhGOLevCPIvInUu6QK+CPLPnWQ05Z0gPxuxcxXSIWfAUUZT5oQCfgPXIvau4onyS5hwlNOUB0oJcxF7V6ENPuFofMRRVjNuKyW8SaWEIaWEt0CTg4zmDCq3v5ZSKUG7AboMdDjIaE6fUsJX4ETk/gU9lddbapWwncLzfiqPwTaVzfGCg4zmdCiTYxJ3iPnHo/CwrjrIWBeeKiWMJeBfoM0P4w7y1YUZpYQ7CfgXaEPUtIN8dUF6KXK/cqu9IYEOincApRIWU5kfxpUS1oDjDjKacx7YE0rYSGWI6lXmh4f/60s8bywfKkPUVo3Pjh1CnkPjJLB+4OqHv8aZlArIZDKZTMYC4A8EQ0uQY7/3uAAAAABJRU5ErkJggg=='
-const backIconW = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACjElEQVR4nO2azatNURiH364S+SgTuUUmBoa6GDEwuCNJBr7KHyAkGUkyUsoN3T8AA0r5GugyUZK4lHwODAwQpYwvBqQeve4+deK8a5+zz9q3d6+9nnonp7PXWb/n7L1aH1symUwmk8lUBpiL2gO8BmaAU/p7bpiD8Cf4n5NtETDRI7zywEH0WWoMf9YIr4x7yP6XmsKfC4Q/kvoYMBkIv7PzPTdEDn/DCP4V2Nj93dQELAPuGOHfAKv/vcYNEcKvAN4b4V8BS3tdl4qAdcAnI/xLYLF1rRuGCD8GfDPCPw+FT0HA+kB4HQsWlbXhhgrhdTT/boS/2m87TRWwBfhhhD82SFtuGKDTO4zgyv5B76SmCTgeCL+vyjjihj46G5rX7604iDZGwAUj+G9gd9XwTRFwzQj/C9g8TPgmCLAWNTqvXztseO8Cbhnhp615fSoCFgL3jfB3gXmxwnsUoPP2Z0b4qZjBPQpYA3wwwt+uI7w3AY+N8JN1hY8pYCRCG5uMz6citF07MQRcMT6/JyIHHWWth+KWvG48BsrR1MeATl0MSLjcBgFSsvDRqfH81AVonQ5IeBhLghuMDu4KSHgELEhdgNb2wPbXk2EluKGko6EN0KfAaOoCtDYEJHwEVqYuQIpDkBlDgh58jqcuQIpjsM+BwXFb6gKkeOatlSOD7BC7ocLzGzoKVw6kLqBTNwMSDrVBgJSsHw63QYDW+YCEM20QICWLqIk2CJDAS5EUW+0jqQuQ4h1Ai+nu9YMbIguQYvCzeAssT12A1lbgpyFB3ygbdRB9lpoESPEekbV+uBSr/zF2hevihYiMiciXHu0vcdPLGu+ATq0C3nX9+/poWGcRmUwmk8lk+kRE/gCfWLdyj0KPNgAAAABJRU5ErkJggg=='
-</script>
-
-<template>
-    <!-- #ifndef MP-TOUTIAO -->
-    <view class="header_box">
-        <view class="header_main" :style="style">
-            <view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
-            <!-- 标准的左中右结构 -->
-            <view v-if="isHaveRightBox" class="header flex-center-between" :style="{ height: headerHeightRef + 'px' }">
-                <view class="header_left flex-center-between">
-                    <slot name="left" v-if="leftIconShow">
-                        <view class="icon flex" @click="goBack">
-                            <image
-                                :src="isBlackIcon ? backIcon : backIconW"
-                                mode="widthFix"></image>
-                        </view>
-                    </slot>
-                </view>
-                <view class="header_center">
-                    <slot name="center">
-                        <view class="title" :style="{ fontSize: textFontSize + 'rpx' }">
-                            {{ title }}
-                        </view>
-                    </slot>
-                </view>
-                <view class="header_right flex">
-                    <!-- #ifndef MP-WEIXIN -->
-                    <slot name="right"></slot>
-                    <!-- #endif -->
-                </view>
-            </view>
-            <!-- 左右结构 -->
-            <view v-else class="wx_header flex"
-                :style="{ height: headerHeightRef + 'px', width: wxHeaderWidth + 'px' }">
-                <view class="wx_header_left flex">
-                    <slot name="left">
-                        <view class="icon flex" @click="goBack" v-if="leftIconShow">
-                            <image
-                                :src="isBlackIcon ? backIcon : backIconW"
-                                mode="widthFix"></image>
-                        </view>
-                    </slot>
-                </view>
-                <view class="wx_header_txt flex">
-                    <slot name="center">
-                        <view class="title" :style="{ fontSize: textFontSize + 'rpx' }">
-                            {{ title }}
-                        </view>
-                    </slot>
-                </view>
-            </view>
-        </view>
-        <!-- 填充头部防止塌陷 新加（v-if="isShowHeaderBox"） -->
-        <view class="status_bar" v-if="isShowHeaderBox" :style="{ height: fillBoxHeight + 'px' }"></view>
-        <!-- #ifdef MP-WEIXIN -->
-        <view v-if="isShowHeaderBox" :style="{ height: headerHeightRef + 4 + 'px', background: backgroundColor2 }">
-        </view>
-        <!-- #endif -->
-        <!-- 待测试 -->
-        <!-- #ifndef MP-WEIXIN -->
-        <view v-if="isShowHeaderBox" :style="{ height: headerHeightRef + 'px', background: backgroundColor2 }"></view>
-        <!-- #endif -->
-    </view>
-    <!-- #endif -->
-</template>
-
-<style lang="scss" scoped>
-.header_box {
-    // padding: 0 20rpx 5rpx;
-    // background-color: #fff;
-}
-
-.header_main {
-    width: 100%;
-    z-index: 9999;
-    top: 0;
-    left: 0;
-    /* #ifdef MP-WEIXIN */
-    padding: 0 20rpx 15rpx;
-    /* #endif */
-    /* #ifndef MP-WEIXIN */
-    padding: 5rpx 20rpx;
-    /* #endif */
-    box-sizing: border-box;
-    .img {
-        width: 48rpx;
-        height: 48rpx;
-    }
-    .header {
-        // padding: 0 16rpx;
-        box-sizing: border-box;
-
-        .header_left {
-            width: 20%;
-
-            .icon {
-                width: 48rpx;
-            }
-
-            .left_txt {
-                font-size: 22rpx;
-                line-height: 22rpx;
-            }
-        }
-
-        .header_center {
-            width: 60%;
-            text-align: center;
-            font-size: 28rpx;
-
-            .title {
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-            }
-        }
-
-        .header_right {
-            width: 20%;
-        }
-    }
-
-    .wx_header {
-        .wx_header_left {
-            height: 100%;
-
-            .icon {
-                width: 48rpx;
-
-                image {
-                    vertical-align: middle;
-                    width: 100%;
-                }
-            }
-        }
-
-        .wx_header_txt {
-            flex: 1;
-            height: 100%;
-            padding-left: 26rpx;
-
-            .title {
-                width: 100%;
-                line-height: 1;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                font-size: 28rpx;
-            }
-        }
-    }
-}
-</style>
+<script lang="ts" setup>
+/*
+ * @description: 头部组件
+ * @fileName: Header.vue
+ * @params
+ * @author: lxx
+ * @date: 2023-07-16 09:32:09
+ * @version: V1.0.2
+ */
+import { goToPage } from '../../libs/util'
+import { type CSSProperties, computed, ref, watchEffect } from 'vue'
+
+type headerInt = {
+    title: string
+    // 头部高度 默认为44px （微信小程序不可用）
+    headerHeight?: number
+    // 是否显示左侧内容
+    leftIconShow?: boolean
+    // 样式部分
+    backgroundColor?: string
+    backgroundColor2?: string
+    textColor?: string
+    textFontSize?: number
+    // 是否需要生成和头部高度相同的盒子
+    isShowHeaderBox?: boolean
+    positionState?: string
+    isShowShadow?: boolean
+    isBlackIcon?: boolean
+    // 头部没有右侧盒子，true：左中右结构 false：左中结构(小程序可以为左中右结构但是没有右侧盒子)
+    isHaveRightBox?: boolean
+}
+
+const props = withDefaults(defineProps<headerInt>(), {
+    // 头部高度 默认为44px （微信小程序不可用）
+    headerHeight: 44,
+    // 是否显示左侧内容
+    leftIconShow: true,
+    // 样式部分
+    backgroundColor: '#ffffff', //linear-gradient(90deg, rgba(10, 207, 254, 1) 0%, rgba(74, 92, 255, 1) 100%)
+    backgroundColor2: '#ffffff',
+    textColor: '#000',
+    textFontSize: 34,
+    title: '标题',
+    // 是否需要生成和头部高度相同的盒子
+    isShowHeaderBox: true,
+    positionState: 'fixed',
+    isShowShadow: false,
+    isBlackIcon: true, // 是否为黑色图标
+    isHaveRightBox: true
+})
+
+let { statusBarHeight } = uni.getSystemInfoSync()
+// #ifdef MP-WEIXIN
+// 胶囊状态
+let menuButton = uni.getMenuButtonBoundingClientRect()
+// 微信头部宽度
+let wxHeaderWidth = menuButton.left - 10
+// 上边距
+statusBarHeight = menuButton.top
+// #endif
+
+// padding的高度（防止头部塌陷）
+const fillBoxHeight = ref(statusBarHeight + 3)
+
+// 设置header的高度
+const headerHeightRef = ref(0)
+watchEffect(() => {
+    headerHeightRef.value = props.headerHeight
+    // #ifdef MP-WEIXIN
+    // 中间高度
+    headerHeightRef.value = menuButton.height
+    // #endif
+})
+// console.log('statusBarHeight', statusBarHeight)
+
+const style = computed(() => {
+    return {
+        boxShadow: props.isShowShadow ? '0 0 8rpx -3rpx #333' : '0 0 0 0 #333',
+        background: props.backgroundColor,
+        color: props.textColor,
+        position: props.positionState
+    } as CSSProperties
+})
+// 返回上一页(如没有页面返回首页)
+const goBack = () => {
+    if (getCurrentPages().length <= 1) {
+        goToPage({
+            url: 'pages/index/index',
+            mode: 'redirectTo'
+        })
+    } else {
+        uni.navigateBack()
+    }
+}
+
+const backIcon = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACMklEQVR4nO2av0uVURjHPyiEYgkuoVC4ODSK2pRDYFOENOQP6A+IEgknkWgKgqTEP6AaHIKyhqhGiSgVpKwGBweLBMHZcjAK47xcXrxxn6el5/pwzvnAme5wv5/ve+/hPO/7kslkMplMxjsjwCdgB7iV2tW6Aez/tW46yFUXpmvIh/U6AXfuCvJhnXOQz5R7ivz1iL0LZhX5Sw7ymTIviG8DpyP2pg14Kch/BjodZDSjHdgQ5D8CrZF6F3QD3wT5VeCog4xm9ADfBfn3scv3KvJhL2hxkNGMsJv/EOQfRepcchbYFeQnnWQ046JywLkSqXPJlCJ/2UlGM7Rz/WikziX3BfFfwLCTjGY8FuR/Av2ROpdIQ004159yktGMZ4L8Yuzn+mZgQZB/BTQ6yGhGOLevCPIvInUu6QK+CPLPnWQ05Z0gPxuxcxXSIWfAUUZT5oQCfgPXIvau4onyS5hwlNOUB0oJcxF7V6ENPuFofMRRVjNuKyW8SaWEIaWEt0CTg4zmDCq3v5ZSKUG7AboMdDjIaE6fUsJX4ETk/gU9lddbapWwncLzfiqPwTaVzfGCg4zmdCiTYxJ3iPnHo/CwrjrIWBeeKiWMJeBfoM0P4w7y1YUZpYQ7CfgXaEPUtIN8dUF6KXK/cqu9IYEOincApRIWU5kfxpUS1oDjDjKacx7YE0rYSGWI6lXmh4f/60s8bywfKkPUVo3Pjh1CnkPjJLB+4OqHv8aZlArIZDKZTMYC4A8EQ0uQY7/3uAAAAABJRU5ErkJggg=='
+const backIconW = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAACjElEQVR4nO2azatNURiH364S+SgTuUUmBoa6GDEwuCNJBr7KHyAkGUkyUsoN3T8AA0r5GugyUZK4lHwODAwQpYwvBqQeve4+deK8a5+zz9q3d6+9nnonp7PXWb/n7L1aH1symUwmk8lUBpiL2gO8BmaAU/p7bpiD8Cf4n5NtETDRI7zywEH0WWoMf9YIr4x7yP6XmsKfC4Q/kvoYMBkIv7PzPTdEDn/DCP4V2Nj93dQELAPuGOHfAKv/vcYNEcKvAN4b4V8BS3tdl4qAdcAnI/xLYLF1rRuGCD8GfDPCPw+FT0HA+kB4HQsWlbXhhgrhdTT/boS/2m87TRWwBfhhhD82SFtuGKDTO4zgyv5B76SmCTgeCL+vyjjihj46G5rX7604iDZGwAUj+G9gd9XwTRFwzQj/C9g8TPgmCLAWNTqvXztseO8Cbhnhp615fSoCFgL3jfB3gXmxwnsUoPP2Z0b4qZjBPQpYA3wwwt+uI7w3AY+N8JN1hY8pYCRCG5uMz6citF07MQRcMT6/JyIHHWWth+KWvG48BsrR1MeATl0MSLjcBgFSsvDRqfH81AVonQ5IeBhLghuMDu4KSHgELEhdgNb2wPbXk2EluKGko6EN0KfAaOoCtDYEJHwEVqYuQIpDkBlDgh58jqcuQIpjsM+BwXFb6gKkeOatlSOD7BC7ocLzGzoKVw6kLqBTNwMSDrVBgJSsHw63QYDW+YCEM20QICWLqIk2CJDAS5EUW+0jqQuQ4h1Ai+nu9YMbIguQYvCzeAssT12A1lbgpyFB3ygbdRB9lpoESPEekbV+uBSr/zF2hevihYiMiciXHu0vcdPLGu+ATq0C3nX9+/poWGcRmUwmk8lk+kRE/gCfWLdyj0KPNgAAAABJRU5ErkJggg=='
+</script>
+
+<template>
+    <!-- #ifndef MP-TOUTIAO -->
+    <view class="header_box">
+        <view class="header_main" :style="style">
+            <view class="status_bar" :style="{ height: statusBarHeight + 'px' }"></view>
+            <!-- 标准的左中右结构 -->
+            <view v-if="isHaveRightBox" class="header flex-center-between" :style="{ height: headerHeightRef + 'px' }">
+                <view class="header_left flex-center-between">
+                    <slot name="left" >
+                        <view v-if="leftIconShow" class="icon flex" @click="goBack">
+                            <image
+                                :src="isBlackIcon ? backIcon : backIconW"
+                                mode="widthFix"></image>
+                        </view>
+                    </slot>
+                </view>
+                <view class="header_center">
+                    <slot>
+                        <view class="title" :style="{ fontSize: textFontSize + 'rpx' }">
+                            {{ title }}
+                        </view>
+                    </slot>
+                </view>
+                <view class="header_right flex">
+                    <!-- #ifndef MP-WEIXIN -->
+                    <slot name="right"></slot>
+                    <!-- #endif -->
+                </view>
+            </view>
+            <!-- 左右结构 -->
+            <view v-else class="wx_header flex"
+                :style="{ height: headerHeightRef + 'px', width: wxHeaderWidth + 'px' }">
+                <view class="wx_header_left flex">
+                    <slot name="left">
+                        <view class="icon flex" @click="goBack" v-if="leftIconShow">
+                            <image
+                                :src="isBlackIcon ? backIcon : backIconW"
+                                mode="widthFix"></image>
+                        </view>
+                    </slot>
+                </view>
+                <view class="wx_header_txt flex">
+                    <slot name="center">
+                        <view class="title" :style="{ fontSize: textFontSize + 'rpx' }">
+                            {{ title }}
+                        </view>
+                    </slot>
+                </view>
+            </view>
+        </view>
+        <!-- 填充头部防止塌陷 新加（v-if="isShowHeaderBox"） -->
+        <view class="status_bar" v-if="isShowHeaderBox" :style="{ height: fillBoxHeight + 'px' }"></view>
+        <!-- #ifdef MP-WEIXIN -->
+        <view v-if="isShowHeaderBox" :style="{ height: headerHeightRef + 4 + 'px', background: backgroundColor2 }">
+        </view>
+        <!-- #endif -->
+        <!-- 待测试 -->
+        <!-- #ifndef MP-WEIXIN -->
+        <view v-if="isShowHeaderBox" :style="{ height: headerHeightRef + 'px', background: backgroundColor2 }"></view>
+        <!-- #endif -->
+    </view>
+    <!-- #endif -->
+</template>
+
+<style lang="scss" scoped>
+.header_box {
+    // padding: 0 20rpx 5rpx;
+    // background-color: #fff;
+}
+
+.header_main {
+    width: 100%;
+    z-index: 9999;
+    top: 0;
+    left: 0;
+    /* #ifdef MP-WEIXIN */
+    padding: 0 20rpx 15rpx;
+    /* #endif */
+    /* #ifndef MP-WEIXIN */
+    padding: 5rpx 20rpx;
+    /* #endif */
+    box-sizing: border-box;
+    .img {
+        width: 48rpx;
+        height: 48rpx;
+    }
+    .header {
+        // padding: 0 16rpx;
+        box-sizing: border-box;
+
+        .header_left {
+            width: 20%;
+
+            .icon {
+                width: 48rpx;
+            }
+
+            .left_txt {
+                font-size: 22rpx;
+                line-height: 22rpx;
+            }
+        }
+
+        .header_center {
+            width: 60%;
+            text-align: center;
+            font-size: 28rpx;
+
+            .title {
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+            }
+        }
+
+        .header_right {
+            width: 20%;
+        }
+    }
+
+    .wx_header {
+        .wx_header_left {
+            height: 100%;
+
+            .icon {
+                width: 48rpx;
+
+                image {
+                    vertical-align: middle;
+                    width: 100%;
+                }
+            }
+        }
+
+        .wx_header_txt {
+            flex: 1;
+            height: 100%;
+            padding-left: 26rpx;
+
+            .title {
+                width: 100%;
+                line-height: 1;
+                overflow: hidden;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+                font-size: 28rpx;
+            }
+        }
+    }
+}
+</style>
 ../../libs/util

package/components/lx-hello/lx-hello.vue

@@ -1,25 +1,25 @@
-<script setup lang="ts">
-/**
- * @description:
- * @param {*} msg 显示字符串
- * @return {*}
- */
-defineProps<{
-  msg: string
-}>()
-</script>
-
-<template>
-  <div class="greetings">
-    <h1 class="green">{{ msg }}</h1>
-  </div>
-</template>
-
-<style scoped>
-h1 {
-  font-weight: 500;
-  font-size: 2.6rem;
-  position: relative;
-  top: -10px;
-}
-</style>
+<script setup lang="ts">
+/**
+ * @description:
+ * @param {*} msg 显示字符串
+ * @return {*}
+ */
+defineProps<{
+  msg: string
+}>()
+</script>
+
+<template>
+  <div class="greetings">
+    <h1 class="green">{{ msg }}</h1>
+  </div>
+</template>
+
+<style scoped>
+h1 {
+  font-weight: 500;
+  font-size: 2.6rem;
+  position: relative;
+  top: -10px;
+}
+</style>