panhui 4 سال پیش
والد
کامیت
70d48e1d02

BIN
src/main/nine-space/src/assets/icon_inter.png


+ 3 - 3
src/main/nine-space/src/components/AppBar.vue

@@ -78,9 +78,9 @@ export default {
             }
             //上面都没执行就说明卡在当前页不是最后一条, histroy记录数量大于1,又没有回退记录,只能返回首页,
             //如果上面都执行了 页面都跳走了,这个也就不用管了
-            setTimeout(() => {
-                this.$router.push({ path: '/' });
-            }, 500);
+            // setTimeout(() => {
+            //     this.$router.push({ path: '/' });
+            // }, 500);
         }
     }
 };

+ 3 - 3
src/main/nine-space/src/components/creator/CreatorInfo.vue

@@ -134,7 +134,7 @@ export default {
         }
 
         .text2 {
-            font-size: @font1;
+            font-size: @font2;
             color: @text3;
             line-height: 20px;
             margin: 6px 0;
@@ -148,11 +148,11 @@ export default {
             .sale {
                 display: flex;
                 align-items: center;
-                font-size: @font1;
+                font-size: @font2;
                 line-height: 24px;
 
                 .font_family {
-                    font-size: @font1;
+                    font-size: @font2;
                     margin-left: 2px;
                 }
 

+ 1 - 1
src/main/nine-space/src/styles/app.less

@@ -34,6 +34,7 @@
     --van-search-background-color: #181818;
     --van-search-content-background-color: #0f0f0f;
     // --van-picker-background-color: @bg;
+    --van-button-default-height: 38px;
 }
 
 [contenteditable='true'],
@@ -126,4 +127,3 @@ input:-webkit-autofill {
     width: 235px;
     height: 170px;
 }
-

+ 12 - 0
src/main/nine-space/src/views/Givesubmit.vue

@@ -13,6 +13,7 @@
                 <div class="price">¥{{ info.price }}</div>
             </div>
         </div>
+        <!-- <driver /> -->
         <div class="input">
             <div class="text1">请输入交易密码,验证信息</div>
             <div v-if="sets">
@@ -28,6 +29,7 @@
             </div>
             <div v-else class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码,点击去设置</div>
         </div>
+        <!-- <driver /> -->
         <div class="list">
             <div class="info">
                 <div class="text1">GAS费用</div>
@@ -60,6 +62,7 @@ const path = require('path');
 import { add } from 'mathjs';
 import { mapState } from 'vuex';
 import product from '../mixins/product';
+// import Driver from '../components/Driver.vue';
 let inWeixin = /micromessenger/i.test(navigator.userAgent);
 export default {
     name: 'Submit',
@@ -229,6 +232,15 @@ export default {
         line-height: 24px;
         margin-right: 15px;
     }
+
+    .text3 {
+        font-size: @font2;
+        color: #ff4f50;
+        line-height: 24px;
+        margin-top: 25px;
+        display: flex;
+        justify-content: center;
+    }
 }
 
 /deep/ .van-password-input {

+ 1 - 1
src/main/nine-space/src/views/Store.vue

@@ -64,7 +64,7 @@
             <van-empty
                 v-if="empty || (showList.length === 0 && !loading)"
                 description="你还有没有藏品哦~"
-                :image="require('../assets/kong_png_maichude.png')"
+                :image="require(`../assets/${active == 'coupon' ? 'kong_png_duihuanquan' : 'kong_png_maichude'}.png`)"
             />
         </van-list>
         <van-action-sheet

+ 35 - 7
src/main/nine-space/src/views/Submit.vue

@@ -21,12 +21,17 @@
                 <div class="text1">GAS费用</div>
                 <div class="text2">¥{{ gas }}</div>
             </div>
-            <div class="info" @click="$router.push('/couponList?collectionId=' + info.id)">
-                <div class="text1">优惠券</div>
-                <div class="text2">{{ couponInfo ? '已选择兑换券' : '选择兑换券' }}</div>
+            <div
+                class="info"
+                :class="{ not: !couponInfo }"
+                @click="$router.push('/couponList?collectionId=' + info.id)"
+            >
+                <div class="text1">藏品兑换券</div>
+                <div class="text2">{{ couponInfo ? '已选择兑换券' : '请选择' }}</div>
+                <img class="inter" src="../assets/icon_inter.png" alt="" />
             </div>
 
-            <van-field type="text" label="订单留言" placeholder="选填" v-model="message" />
+            <!-- <van-field type="text" label="订单留言" placeholder="选填" v-model="message" /> -->
 
             <div class="pay">
                 <div class="pay-item" @click="payType = item.type" v-for="(item, index) in payInfos" :key="index">
@@ -40,7 +45,7 @@
         <div class="bottom van-safe-area-bottom" ref="bottom">
             <div class="bottom-content">
                 <span class="text">总计</span>
-                <span class="price"> <i class="font_family icon-icon_jiage"></i>{{ money }} </span>
+                <span class="price"> <img src="../assets/jiage_huang.png" alt="" />{{ money }} </span>
                 <div class="btn">
                     <van-button
                         round
@@ -254,10 +259,11 @@ export default {
         font-size: 14px;
         color: #ffffff;
         line-height: 24px;
+        flex-grow: 1;
     }
 
     .text2 {
-        font-size: 16px;
+        font-size: @font2;
         font-weight: bold;
         color: #fdfb60;
         line-height: 24px;
@@ -268,6 +274,18 @@ export default {
         color: @text3;
         line-height: 20px;
     }
+
+    .inter {
+        width: 24px;
+        height: 24px;
+    }
+
+    &.not {
+        .text2 {
+            font-size: @font2;
+            color: @text3;
+        }
+    }
 }
 
 .product {
@@ -352,7 +370,7 @@ export default {
         .van-button {
             flex-grow: 1;
             color: #333230 !important;
-            max-width: 210px;
+            max-width: 132px;
         }
         .text {
             font-size: 14px;
@@ -367,11 +385,21 @@ export default {
             font-weight: normal;
             color: #fdfb60;
             line-height: 34px;
+            display: flex;
+            align-items: center;
+
             // flex-grow: 1;
             margin: 0 10px;
             .font_family {
                 font-size: 10px;
             }
+
+            img {
+                width: 10px;
+                height: 11px;
+                display: block;
+                margin-top: 8px;
+            }
         }
     }
 }

+ 5 - 0
src/main/nine-space/src/views/account/Verified.vue

@@ -320,4 +320,9 @@ export default {
         }
     }
 }
+
+/deep/.van-field__control {
+    font-size: @font1 !important;
+    color: @text3;
+}
 </style>

+ 21 - 5
src/main/nine-space/src/views/account/VerifiedSucs.vue

@@ -94,7 +94,7 @@
             <!-- <van-field class="name" label="工商营业执照注册号/统一社会信用代码"> </van-field> -->
             <div class="name">工商营业执照注册号/统一社会信用代码</div>
             <van-field
-                placeholder="工商营业执照注册号/统一社会信用代码"
+                placeholder="请输入"
                 v-model="form.orgNo"
                 :rules="[{ required: true, min: 18, max: 18, message: '请输入18位统一社会信用代码', trigger: 'blur' }]"
             >
@@ -106,12 +106,15 @@
             </div>
             <div class="name3">证照有效截止日期需大于60天,如证照上日期为长期或无, 请勾选长期</div>
             <van-field
-                label="例2034-06-17"
+                label="例2034-06-17"
                 readonly
                 is-link
                 @click="showPopup"
                 placeholder="请选择"
                 v-model="form.orgLicenseExpire"
+                input-align="right"
+                label-width="200"
+                label-class="sub"
                 :rules="[
                     {
                         orgLicenseExpire: [
@@ -284,7 +287,7 @@ export default {
     padding: 10px 16px 150px;
 }
 /deep/ .van-cell__right-icon {
-    margin-top: 20px;
+    margin-top: 23px;
 }
 .tabs {
     padding-bottom: 12px;
@@ -314,9 +317,9 @@ export default {
     margin-top: 20px;
 }
 .name3 {
-    font-size: 13px;
+    font-size: @font1;
     font-weight: 400;
-    color: #494a4d;
+    color: @text3;
     line-height: 24px;
     margin-top: 4px;
 }
@@ -431,4 +434,17 @@ export default {
         }
     }
 }
+/deep/.sub {
+    color: @text3!important;
+    font-weight: normal !important;
+    font-size: @font1 !important;
+}
+/deep/.van-checkbox__icon--checked .van-icon {
+    border-width: 0;
+    background: linear-gradient(to right, rgb(253, 251, 96), rgb(255, 143, 62));
+}
+/deep/.van-field__control {
+    font-size: @font1 !important;
+    color: @text3;
+}
 </style>

+ 3 - 4
src/main/nine-space/src/views/asset/Consignment.vue

@@ -21,7 +21,7 @@
                 />
                 <div class="text2" @click="$router.push('/tradingPassword')">忘记密码?</div>
             </div>
-            <div v-else class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码,点击去设置</div>
+            <div class="text3" @click="$router.push('/tradingPassword')">您当前没有交易密码,点击去设置</div>
         </div>
         <div class="bottom van-safe-area-bottom" ref="bottom">
             <van-notice-bar
@@ -288,10 +288,9 @@ export default {
         }
         .text3 {
             font-size: @font2;
-            font-weight: 400;
-            color: #b81c22;
+            color: #ff4f50;
             line-height: 24px;
-            margin-top: 40px;
+            margin-top: 25px;
             display: flex;
             justify-content: center;
         }

+ 65 - 54
src/main/nine-space/src/views/asset/Detail.vue

@@ -164,7 +164,9 @@
                 <van-collapse-item name="00" class="goods-info init">
                     <template #title>
                         <div class="page-title">
-                            <img src="../../assets/qiaoqiaohua-icon-weidakai.png" alt="" /> 悄悄话
+                            <img src="../../assets/qiaoqiaohua-icon-weidakai.png" alt="" /> 悄悄话<span
+                                >(灰色表示已使用)</span
+                            >
                         </div>
                     </template>
                     <div class="top1">
@@ -181,17 +183,15 @@
                 <van-collapse-item name="0" class="goods-info">
                     <template #title>
                         <div class="titleIcon page-title">
-                            <img src="../../assets/icon-lianshangxinxi.png" alt="" />持有特权<span
+                            <img src="../../assets/icon-lianshangxinxi(1).png" alt="" />持有特权<span
                                 >(灰色表示已使用)</span
                             >
                         </div>
                     </template>
                     <div class="prive" v-if="init.length > 0">
-                        <div v-for="(item, index) in init" :key="index">
-                            <div class="prive1">
-                                <img class="img" :src="item.icon[0]" alt="" />
-                                <div class="prive2">{{ item.name }}</div>
-                            </div>
+                        <div class="prive1" v-for="(item, index) in init" :key="index">
+                            <img class="img" :src="item.icon[0]" alt="" />
+                            <div class="prive2">{{ item.name }}</div>
                         </div>
                     </div>
                     <div v-if="init.length === 0" class="tips">铸造者未设置</div>
@@ -210,10 +210,17 @@
                     </div>
                     <div v-else class="textName">铸造者未设置</div>
                 </van-collapse-item>
+                <van-collapse-item name="4" class="goods-info">
+                    <template #title>
+                        <div class="page-title"><img src="../../assets/icon-miaoshu.png" alt="" />作品描述</div>
+                    </template>
+                    <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
+                    <div v-else class="textName">铸造者未设置</div>
+                </van-collapse-item>
                 <van-collapse-item name="2" class="goods-info">
                     <template #title>
                         <div class="page-title">
-                            <img src="../../assets/icon-lianshangxinxi(2).png" alt="" />链上信息
+                            <img src="../../assets/icon-lianshangxinxi(3).png" alt="" />链上信息
                         </div>
                     </template>
                     <div class="page-text" v-if="info.txHash || info.blockNumber || info.tokenId">
@@ -223,15 +230,6 @@
                     </div>
                     <div v-else class="textName">铸造者未设置</div>
                 </van-collapse-item>
-                <van-collapse-item name="4" class="goods-info">
-                    <template #title>
-                        <div class="page-title">
-                            <img src="../../assets/icon-lianshangxinxi(2).png" alt="" />作品描述
-                        </div>
-                    </template>
-                    <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
-                    <div v-else class="textName">铸造者未设置</div>
-                </van-collapse-item>
                 <van-collapse-item name="5" class="goods-info">
                     <template #title>
                         <div class="page-title"><img src="../../assets/info_icon_jiaoyijilu.png" alt="" />交易记录</div>
@@ -1118,48 +1116,45 @@ export default {
         }
     }
 }
-span {
-    font-size: @font1;
-    font-weight: 400;
-    color: @text3;
-    line-height: 24px;
-}
-.top {
-    padding: 20px 16px 0;
+// span {
+//     font-size: @font1;
+//     font-weight: 400;
+//     color: @text3;
+//     line-height: 24px;
+// }
+
+.prive {
     display: flex;
     align-items: center;
-    justify-content: space-between;
-
-    .prive {
+    width: 100%;
+    flex-wrap: wrap;
+    .prive1 {
         display: flex;
         align-items: center;
-        width: 100%;
-        flex-wrap: wrap;
-        .prive1 {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin: 16px 15px 0;
-            width: 94px;
-            height: 32px;
-            color: #000;
-            background: linear-gradient(48deg, #fdfb60 0%, #ff8f3e 100%);
-            border-radius: 4px;
-            &.prim {
-                background: #202122;
-                color: @text3;
-            }
-        }
-        .prive2 {
-            text-align: center;
-        }
-        .img {
-            text-align: center;
-            width: 18px;
-            height: 18px;
-            margin-right: 4px;
+        justify-content: center;
+        margin: 16px 16px 0 0;
+        width: 94px;
+        height: 32px;
+        color: #000;
+        background: linear-gradient(48deg, #fdfb60 0%, #ff8f3e 100%);
+        border-radius: 4px;
+        &.prim {
+            background: #202122;
+            color: @text3;
         }
     }
+    .prive2 {
+        font-size: @font1;
+        text-align: center;
+        margin-left: 2px;
+        color: #303133;
+    }
+    .img {
+        text-align: center;
+        width: 18px;
+        height: 18px;
+        margin-right: 4px;
+    }
 }
 
 .page-title {
@@ -1168,6 +1163,10 @@ span {
     font-weight: bold;
     color: #ffffff;
     line-height: 28px;
+    span {
+        color: @text3;
+        font-size: @font1;
+    }
 }
 .specific-list {
     padding: 10px 0 0;
@@ -1469,9 +1468,20 @@ span {
 /deep/.goods-info {
     .van-cell {
         padding: 0 0;
+        &::after {
+            content: none;
+        }
     }
 }
 
+/deep/.van-collapse-item--border::after {
+    content: none;
+}
+/deep/.van-hairline--top-bottom::after,
+.van-hairline-unset--top-bottom::after {
+    border-width: 0;
+}
+
 .page-title {
     span {
         font-size: @font1;
@@ -1488,7 +1498,8 @@ span {
 }
 
 .tips {
-    font-size: @font1;
+    font-size: @font2;
     margin-top: 12px;
+    color: @text3;
 }
 </style>

+ 3 - 3
src/main/nine-space/src/views/asset/GiveSearch.vue

@@ -111,9 +111,9 @@ export default {
     }
     .content {
         // padding: 0px 16px;
+        padding: 0 8px;
         display: flex;
         align-items: center;
-        width: 343px;
         height: 102px;
         border-radius: 12px;
         .img {
@@ -128,13 +128,13 @@ export default {
             justify-content: space-between;
             width: 100%;
             .text1 {
-                font-size: 16px;
+                font-size: @font2;
                 font-weight: bold;
                 color: #ffffff;
                 line-height: 24px;
             }
             .text2 {
-                font-size: 14px;
+                font-size: @font1;
                 font-weight: 400;
                 color: @text3;
                 line-height: 24px;

+ 6 - 2
src/main/nine-space/src/views/order/CouponList.vue

@@ -5,13 +5,17 @@
                 <coupon-info needChoose :collectionId="collectionId" :info="item" @choose="choose"></coupon-info>
             </template>
 
-            <van-divider>不可用兑换券</van-divider>
+            <van-divider v-if="notUseList.length > 0">不可用兑换券</van-divider>
 
             <template v-for="(item, index) in notUseList" :key="index">
                 <coupon-info needChoose :collectionId="collectionId" :info="item" @choose="choose"></coupon-info>
             </template>
 
-            <van-empty v-if="empty" description="暂无兑换券哦~" />
+            <van-empty
+                :image="require('../../assets/kong_png_duihuanquan.png')"
+                v-if="empty"
+                description="暂无兑换券哦~"
+            />
         </van-list>
     </div>
 </template>

+ 104 - 28
src/main/nine-space/src/views/product/Detail.vue

@@ -57,7 +57,7 @@
             </div>
 
             <div class="price-line" v-if="info.salable">
-                <div class="flex1"></div>
+                <div class="flex1" v-if="info.number"></div>
                 <div class="text" v-if="info.salable && info.total > 0">
                     <span>已售 {{ info.sale }}</span>
                     <span>剩余 {{ info.stock }}</span>
@@ -137,15 +137,19 @@
                     <template #title>
                         <div class="page-title"><img src="../../assets/icon-lianshangxinxi.png" alt="" /> 类型</div>
                     </template>
-                    <div v-if="info.category" style="margin-top: 12px; font-size: 12px" class="text2">
-                        {{ info.category }}
+                    <div class="top1">
+                        <div v-if="info.category" class="category">
+                            <span>{{ info.category }}</span>
+                        </div>
+                        <div v-else class="tips">铸造者未设置</div>
                     </div>
-                    <div v-else class="tips">铸造者未设置</div>
                 </van-collapse-item>
                 <van-collapse-item name="00" class="goods-info init">
                     <template #title>
                         <div class="page-title">
-                            <img src="../../assets/qiaoqiaohua-icon-weidakai.png" alt="" /> 悄悄话
+                            <img src="../../assets/qiaoqiaohua-icon-weidakai.png" alt="" /> 悄悄话<span
+                                >(灰色表示已使用)</span
+                            >
                         </div>
                     </template>
                     <div class="qiaohua" v-if="init2">
@@ -188,9 +192,10 @@
                     </div>
                     <div v-else class="textName">铸造者未设置</div>
                 </van-collapse-item>
-                <van-collapse-item name="3" class="goods-info">
+
+                <van-collapse-item name="4" class="goods-info">
                     <template #title>
-                        <div class="page-title"><img src="../../assets/icon-miaoshu.png" alt="" />盲盒详情</div>
+                        <div class="page-title"><img src="../../assets/icon-miaoshu.png" alt="" />作品描述</div>
                     </template>
                     <swiper v-if="boxs.length > 0" :slidesPerView="'auto'" :spaceBetween="20" class="detail-swiper">
                         <swiper-slide v-for="(item, index) in boxs" :key="index">
@@ -204,7 +209,7 @@
                             />
                         </swiper-slide>
                     </swiper>
-                    <div v-else class="textName">铸造者未设置</div>
+                    <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
                 </van-collapse-item>
                 <van-collapse-item name="2" class="goods-info">
                     <template #title>
@@ -219,15 +224,6 @@
                     </div>
                     <div v-else class="textName">铸造者未设置</div>
                 </van-collapse-item>
-                <van-collapse-item name="4" class="goods-info">
-                    <template #title>
-                        <div class="page-title">
-                            <img src="../../assets/icon-lianshangxinxi(2).png" alt="" />作品描述
-                        </div>
-                    </template>
-                    <div v-if="info.detail" class="page-text page-detail" v-html="info.detail"></div>
-                    <div v-else class="textName">铸造者未设置</div>
-                </van-collapse-item>
                 <van-collapse-item name="5" class="goods-info">
                     <template #title>
                         <div class="page-title"><img src="../../assets/info_icon_jiaoyijilu.png" alt="" />交易记录</div>
@@ -258,14 +254,18 @@
             </div>
         </div>
 
-        <div class="btn van-safe-area-bottom" ref="btn" v-if="isBuy">
+        <div class="btn btn-list van-safe-area-bottom" ref="btn" v-if="isBuy">
             <div class="price-content">
-                <div class="price"><i class="font_family icon-icon_jiage"></i>{{ info.price }}</div>
+                <div class="price">
+                    <img src="../../assets/jiage_huang.png" alt="" />
+                    {{ info.price }}
+                </div>
                 <div class="price-sub" v-if="info.originalPrice">¥{{ info.originalPrice || 0 }}</div>
                 <div class="sub" v-if="info.royalties">
                     含 <span>{{ info.royalties }}%</span> 版税
                 </div>
             </div>
+            <div class="flex1"></div>
             <div class="btns">
                 <van-button type="primary" block round @click="buy">立即购买</van-button>
             </div>
@@ -486,7 +486,8 @@ export default {
         .prive2 {
             font-size: @font1;
             text-align: center;
-            margin-left: 10px;
+            margin-left: 2px;
+            color: #303133;
         }
     }
 }
@@ -533,7 +534,7 @@ export default {
 
     .price-line {
         display: flex;
-        align-items: flex-end;
+        justify-content: center;
         margin-top: 12px;
         .sub {
             flex-grow: 1;
@@ -554,7 +555,7 @@ export default {
         }
 
         .text {
-            font-size: @font2;
+            font-size: @font1;
             color: @text3;
             line-height: 16px;
             span {
@@ -580,7 +581,7 @@ export default {
         margin-top: 4px;
         height: 24px;
         .text1 {
-            font-size: @font2;
+            font-size: @font1;
             color: #949699;
             line-height: 24px;
         }
@@ -709,7 +710,7 @@ export default {
     }
 }
 .tips {
-    font-size: @font1;
+    font-size: @font2;
     color: @text3;
     line-height: 24px;
     padding-top: 12px;
@@ -777,6 +778,10 @@ export default {
             height: 18px;
             margin-right: 6px;
         }
+        span {
+            color: @text3;
+            font-size: @font1;
+        }
     }
 }
 .content {
@@ -814,7 +819,7 @@ export default {
         &.prim {
             color: @text3;
         }
-        margin-left: 10px;
+        margin-left: 4px;
         position: relative;
         z-index: 1;
         font-size: @font1;
@@ -848,7 +853,7 @@ export default {
     // width: 94px;
     // height: 62px;
     border-radius: 4px;
-    padding: 8px;
+    padding: 4px 8px;
     display: flex;
     align-items: center;
     justify-content: center;
@@ -894,7 +899,11 @@ export default {
     line-height: 28px;
     margin-top: 10px;
 }
-
+.btn-list {
+    display: flex;
+    align-items: center;
+    padding: 9px 16px;
+}
 .btn {
     position: fixed;
     z-index: 20;
@@ -903,7 +912,7 @@ export default {
     right: 0;
     background: #202122ee;
     .btns {
-        padding: 6px 42px;
+        width: 132px;
     }
     .van-button {
         background: linear-gradient(135deg, #fdfb60 0%, #ff8f3e 100%);
@@ -1093,8 +1102,18 @@ export default {
 /deep/.goods-info {
     .van-cell {
         padding: 0 0;
+        &::after {
+            content: none;
+        }
     }
 }
+/deep/.van-collapse-item--border::after {
+    content: none;
+}
+/deep/.van-hairline--top-bottom::after,
+.van-hairline-unset--top-bottom::after {
+    border-width: 0;
+}
 
 .user {
     padding: 12px 0 0;
@@ -1116,5 +1135,62 @@ export default {
 .price-content {
     display: flex;
     align-items: center;
+    .price {
+        font-size: 32px;
+        font-family: OSP-DIN, OSP;
+        color: #fdfb60;
+        line-height: 32px;
+        display: flex;
+        align-items: center;
+        .font_family {
+            font-size: 10px;
+        }
+        img {
+            width: 10px;
+            height: 11px;
+            display: inline-block;
+            margin-top: 8px;
+        }
+    }
+    .price-sub {
+        font-size: @font1;
+        color: @text3;
+        text-decoration: line-through;
+        margin-left: 6px;
+    }
+
+    .sub {
+        font-size: @font1;
+        color: #949699;
+        line-height: 22px;
+        margin-left: 6px;
+    }
+}
+.category {
+    width: 94px;
+    height: 30px;
+    border-radius: 4px;
+    background: linear-gradient(135deg, rgba(253, 251, 96, 1), rgba(255, 143, 62, 1));
+    font-size: @font1;
+    color: #ffffff;
+    line-height: 30px;
+    text-align: center;
+    position: relative;
+    margin-top: 12px;
+    &::after {
+        content: '';
+        background-color: @bg;
+        position: absolute;
+        left: 1px;
+        top: 1px;
+        right: 1px;
+        bottom: 1px;
+        z-index: 0;
+        border-radius: 4px;
+    }
+    span {
+        position: relative;
+        z-index: 1;
+    }
 }
 </style>