浏览代码

upd: icon popup width setting

richard1015 4 年之前
父节点
当前提交
2d760cff26

+ 9 - 1
src/packages/icon/index.scss

@@ -1,10 +1,19 @@
 @import '../../styles/font/iconfont.css';
 .nut-icon {
+  display: inline-block;
+  position: relative;
   width: $icon-width;
   height: $icon-height;
   line-height: $icon-line-height;
   text-align: right;
 
+  &::before {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   &__img {
     width: $icon-width;
     height: $icon-height;
@@ -12,7 +21,6 @@
   }
   &-loading {
     display: inline-block;
-    -webkit-animation: loadingCircle 1s infinite linear;
     animation: loadingCircle 1s infinite linear;
   }
 }

+ 3 - 3
src/packages/icon/index.vue

@@ -30,12 +30,12 @@ export default create({
         {
           class: _isImage
             ? `${componentName}__img`
-            : `${props.classPrefix} ${componentName}-${props.name}`,
+            : `${props.classPrefix} ${componentName} ${componentName}-${props.name}`,
           style: {
             color: props.color,
             fontSize: pxCheck(props.size),
-            width: _isImage ? pxCheck(props.size) : '',
-            height: _isImage ? pxCheck(props.size) : ''
+            width: pxCheck(props.size),
+            height: pxCheck(props.size)
           },
           onClick: handleClick,
           src: _isImage ? props.name : ''

+ 1 - 1
src/packages/popup/index.scss

@@ -106,7 +106,7 @@
 
 .nutui-popup {
   &__close-icon {
-    position: absolute;
+    position: absolute !important;
     z-index: 1;
     color: #969799;
     font-size: 18px;

+ 10 - 2
src/sites/mobile/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div v-if="title != '/'" id="nav">
-    <span class="back" @click="goBack"><nut-icon name="left"></nut-icon></span>
+    <div class="back" @click="goBack">
+      <nut-icon name="left"></nut-icon>
+    </div>
     {{ title }}
   </div>
   <router-view />
@@ -68,7 +70,13 @@ export default defineComponent({
     box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.07);
     .back {
       position: absolute;
-      left: 25px;
+      left: 0;
+      height: 100%;
+      width: 50px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
     }
   }
 

+ 1 - 0
src/sites/mobile/components/Index.vue

@@ -90,6 +90,7 @@ export default defineComponent({
       > ul {
         li {
           display: flex;
+          align-items: center;
           padding: 0 24px;
           width: 100%;
           height: 45px;