fix: 修改样式

src/packages/cell/cell.scss

@@ -1,77 +1,96 @@
 .wrapper-cell {
-	background: #fff;
+  background: #fff;
+  width: 100%;
+  .nut-cell {
+    display: block;
+    margin: 0 20px;
+    padding: 12px 0;
+    text-decoration: none;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    outline: none;
+    border-bottom: 1px solid transparent;
+    border-image: linear-gradient(to bottom, transparent 50%, rgba(230, 230, 230, 1) 50%) 0 0 100%/1px 0;
+    &.nut-cell-link:active {
+      background-color: $light-color !important;
+    }
 
-	.nut-cell {
-		display: block;
-		margin: 0 20px;
-		padding: 12px 0;
-		text-decoration: none;
-		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-		outline: none;
-		border-bottom: 1px solid transparent;
-		border-image: linear-gradient(to bottom,transparent 50%, rgba(230, 230, 230, 1) 50%) 0 0 100%/1px 0;
-		&.nut-cell-link:active {
-			background-color: $light-color !important;
-		}
+    .nut-cell-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .avatar-img-box {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 8px;
+      }
+    }
+    .avatar {
+      margin-right: 13px;
+    }
+    .nut-avatar {
+      margin-right: 0px;
+    }
+    .nut-cell-left {
+      flex: 1;
+      flex-direction: column;
+      //margin-left: 8px;
+    }
 
-		.nut-cell-box {
-			display: flex;
-			align-items: center;
-			justify-content: space-between;
-		}
-		.avatar{
-			margin-right: 13px;
-		}
-		.nut-avatar{
-			margin-right:8px;
-		}
-		.nut-cell-left {
-			flex: 1;
-			flex-direction: column;
-			//margin-left: 8px;
-		}
+    .nut-cell-title {
+      display: block;
+      line-height: 25px;
+      font-size: 16px;
+      color: rgba(100, 100, 100, 1);
+    }
 
-		.nut-cell-title {
-			display: block;
-			line-height: 25px;
-			font-size: 16px;
-			color: rgba(100, 100, 100, 1);
-		}
+    .nut-cell-sub-title {
+      display: block;
+      line-height: 18px;
+      font-size: $font-size-small;
+      color: #c8c8c8ff;
 
-		.nut-cell-sub-title {
-			display: block;
-			line-height: 18px;
-			font-size: $font-size-small;
-			color: #c8c8c8ff;
+      &:empty {
+        display: none;
+      }
+    }
 
-			&:empty {
-				display: none;
-			}
-		}
+    .nut-cell-right {
+      display: flex;
+      align-items: center;
+      font-size: $font-size-small;
+      color: $text-color;
+      .nut-cell-desc {
+        color: #969696ff;
+        //margin-right: 10px;
+      }
+    }
 
-		.nut-cell-right {
-			display: flex;
-			align-items: center;
-			font-size: $font-size-small;
-			color: $text-color;
-			.nut-cell-desc {
-				color: #969696ff;
-				//margin-right: 10px;
-			}
-		}
+    .nut-cell-icon {
+      display: flex;
+      align-items: center;
 
-		.nut-cell-icon {
-			display: flex;
-			align-items: center;
+      img {
+        //height: 14px;
+        margin-left: 4px;
+      }
+    }
+  }
 
-			img {
-				//height: 14px;
-				margin-left: 4px;
-			}
-		}
-	}
+  &:last-child .nut-cell {
+    border-bottom: none;
+  }
 
-	&:last-child .nut-cell {
-		border-bottom: none;
-	}
-}
+  .timer {
+    color: #c8c8c8ff;
+  }
+
+  .badge {
+    padding: 0 16px;
+    margin: 5px 0px;
+    .nut-badge {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

src/packages/cell/cell.vue

@@ -2,7 +2,7 @@
   <div class="wrapper-cell">
     <a :class="['nut-cell', { 'nut-cell-link': isLink }]" :href="linkUrl" :style="{ 'background-color': bgColor }" :target="target" @click="jumpPage">
       <div class="nut-cell-box" @click="clickCell">
-        <slot name="avatar"></slot>
+        <div class="avatar-img-box"><slot name="avatar"></slot></div>
         <div class="nut-cell-left">
           <span class="nut-cell-title"
             ><slot name="title">{{ title }}</slot></span
@@ -11,8 +11,8 @@
             <slot name="sub-title">
               <template>{{ subTitle.substring(0, 12) }}</template>
               <template v-if="subTitle.length > 12">...</template>
-            </slot></span
-          >
+            </slot>
+          </span>
         </div>
         <div class="nut-cell-right">
           <span class="nut-cell-desc"

src/packages/cell/demo.vue

@@ -15,55 +15,55 @@
     <h4>带解释说明的样式</h4>
     <div class="cell-box">
       <nut-cell :is-link="true">
-        <span slot="title">列表标题</span>
-        <span slot="sub-title">这里是对标题的解释说明</span>
+        <template slot="title">列表标题</template>
+        <template slot="sub-title">这里是对标题的解释说明1</template>
       </nut-cell>
     </div>
     <h4>菜单列表</h4>
     <div class="cell-box">
       <nut-cell :show-icon="true" title="我的主页" @click-cell="clickEvnt">
-        <div slot="avatar">
+        <template slot="avatar">
           <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_me.png" />
-        </div>
+        </template>
       </nut-cell>
       <nut-cell :show-icon="true" title="店铺定位" desc="查看店铺" @click-cell="clickEvnt">
-        <div slot="avatar">
+        <template slot="avatar">
           <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_location.png" />
-        </div>
+        </template>
       </nut-cell>
       <nut-cell :show-icon="true" title="我的收藏" @click-cell="clickEvnt">
-        <div slot="avatar">
+        <template slot="avatar">
           <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_collect.png" />
-        </div>
+        </template>
       </nut-cell>
       <nut-cell :show-icon="true" title="设置" desc="版本升级" @click-cell="clickEvnt">
-        <div slot="avatar">
+        <template slot="avatar">
           <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_set.png" />
-        </div>
+        </template>
       </nut-cell>
     </div>
     <h4>消息列表</h4>
     <div class="cell-box">
       <nut-cell title="噜啦噜" sub-title="我又来送福利啦！关注之后你就会">
-        <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
-        <div slot="desc">
+        <template slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></template>
+        <template slot="desc">
           <p class="timer">10:12</p>
           <p class="badge"><nut-badge :value="9" :max="99" top="0px" right="15px"></nut-badge></p>
-        </div>
+        </template>
       </nut-cell>
       <nut-cell title="噜啦噜" sub-title="我又来送福利啦！关注之后你就会">
-        <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
-        <div slot="desc">
+        <template slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></template>
+        <template slot="desc">
           <p class="timer">1小时前</p>
           <p class="badge"><nut-badge :is-dot="true" :max="99" top="0px" right="10px"></nut-badge></p>
-        </div>
+        </template>
       </nut-cell>
       <nut-cell title="噜啦噜" sub-title="我又来送福利啦！关注之后你就会">
-        <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
-        <div slot="desc">
+        <template slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></template>
+        <template slot="desc">
           <p class="timer">星期五</p>
           <p class="badge"><nut-badge :value="100" :max="99" top="0px" right="30px"></nut-badge></p>
-        </div>
+        </template>
       </nut-cell>
     </div>
   </div>
@@ -94,19 +94,3 @@ export default {
   mounted() {},
 };
 </script>
-
-<style lang="scss" scoped>
-.timer {
-  color: #c8c8c8ff;
-}
-
-.badge {
-  .nut-badge {
-    width: 100%;
-    height: 100%;
-  }
-}
-.avatar-img {
-  margin-right: 8px;
-}
-</style>

src/packages/cell/doc.md

@@ -28,8 +28,8 @@
 ```html
 <div class="cell-box">
   <nut-cell :is-link="true">
-      <span slot="title">列表标题</span>
-      <span slot="sub-title">这里是对标题的解释说明</span>
+      <template slot="title">列表标题</template>
+      <template slot="sub-title">这里是对标题的解释说明</template>
   </nut-cell>
 </div>
 ```
@@ -39,16 +39,24 @@
 ```html
 <div class="cell-box">
   <nut-cell :show-icon="true" title="我的主页" @click-cell="clickEvnt">
-    <div slot="avatar"><nut-icon type="self" color="#9D49F8FF" size="18px" :url="require('../../assets/svg/avatar.svg')">></nut-icon></div>
+    <template slot="avatar">
+      <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_me.png" />
+    </template>
   </nut-cell>
   <nut-cell :show-icon="true" title="店铺定位" desc="查看店铺" @click-cell="clickEvnt">
-      <div slot="avatar"><nut-icon type="self" color="#FF6E4CFF" size="18px" :url="require('../../assets/svg/nav.svg')">></nut-icon></div>
+    <template slot="avatar">
+      <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_location.png" />
+    </template>
   </nut-cell>
   <nut-cell :show-icon="true" title="我的收藏" @click-cell="clickEvnt">
-    <div slot="avatar"><nut-icon type="self" color="#FFBA12FF" size="18px" :url="require('../../assets/svg/star.svg')">></nut-icon></div>
+    <template slot="avatar">
+      <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_collect.png" />
+    </template>
   </nut-cell>
   <nut-cell :show-icon="true" title="设置" desc="版本升级" @click-cell="clickEvnt">
-      <div slot="avatar"><nut-icon type="self" color="#1EA3FFFF" size="18px" :url="require('../../assets/svg/set.svg')">></nut-icon></div>
+    <template slot="avatar">
+      <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_set.png" />
+    </template>
   </nut-cell>
 </div>
 ```
@@ -57,25 +65,25 @@
 ```html
 <div class="cell-box">
   <nut-cell title="噜啦噜" sub-title="我又来送福利啦！关注之后你就会">
-    <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
-    <div slot="desc">
+    <template slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></template>
+    <template slot="desc">
       <p class="timer">10:12</p>
       <p class="badge"><nut-badge  :value="9" :max="99" top="0px" right="15px"></nut-badge></p>
-    </div>
+    </template>
   </nut-cell>
   <nut-cell title="噜啦噜" sub-title="我又来送福利啦！关注之后你就会">
-    <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
-    <div slot="desc">
+    <template slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></template>
+    <template slot="desc">
       <p class="timer">1小时前</p>
       <p class="badge"><nut-badge  :is-dot="true" :max="99" top="0px" right="5px"></nut-badge></p>
-    </div>
+    </template>
   </nut-cell>
   <nut-cell title="噜啦噜" sub-title="我又来送福利啦！关注之后你就会">
-    <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
-    <div slot="desc">
+    <template slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></template>
+    <template slot="desc">
       <p class="timer">星期五</p>
       <p class="badge"><nut-badge  :value="100" :max="99" top="0px" right="25px"></nut-badge></p>
-    </div>
+    </template>
   </nut-cell>
 </div>
 ```

src/packages/tabbar/tabbar.scss

@@ -1,88 +1,88 @@
 .nut-tabbar {
-	border: 0;
-	border-bottom: 1px solid #eee;
-	border-top: 1px solid #eee;
-	width: 100%;
-	display: flex;
-	height: 50px;
-	box-sizing: border-box;
-	background: #fff;
-	margin-top: 10px;
+  border: 0;
+  border-bottom: 1px solid #eee;
+  border-top: 1px solid #eee;
+  width: 100%;
+  display: flex;
+  height: 50px;
+  box-sizing: border-box;
+  background: #fff;
+  margin-top: 10px;
 
-	&:last-child {
-		border-right: 0;
-	}
+  &:last-child {
+    border-right: 0;
+  }
 }
 
 .bottom {
-	position: fixed;
-	bottom: 0;
-	left: 0;
-	z-index: 888;
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  z-index: 888;
 }
 
 .tabbar-nav {
-	flex: 1;
-	text-align: center;
-	text-decoration: none;
-	color: $text-color;
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
+  flex: 1;
+  text-align: center;
+  text-decoration: none;
+  color: $text-color;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 // .card {
 //   border-right: 1px solid #eee;
 // }
 .curr {
-	color: $primary-color;
+  color: $primary-color;
 }
 
 .icon-box {
-	padding: 0;
-	display: inline-block;
-	position: relative;
+  padding: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  .tips {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    border: 1px solid $border-color-active;
+    border-radius: 50%;
+    top: -10px;
+    right: -5px;
+    background: red;
+    box-shadow: 0 0 0 1px #fff;
+    transform: translateX(60%);
+    font-size: $font-size-small;
+    color: #fff;
+  }
 
-	.tips {
-		position: absolute;
-		width: 20px;
-		height: 20px;
-		text-align: center;
-		border: 1px solid $border-color-active;
-		border-radius: 50%;
-		top: -10px;
-		right: -5px;
-		background: red;
-		box-shadow: 0 0 0 1px #fff;
-		transform: translateX(60%);
-		font-size: $font-size-small;
-		color: #fff;
-	}
-
-	.num {
-		line-height: 20px;
-	}
+  .num {
+    line-height: 20px;
+  }
 }
 
 .icon-box .icon {
-	margin: 0 auto;
-	width: 20px;
-	height: 20px;
-	display: block;
-	background-size: 100% 100%;
-	background-position: center center;
+  margin: 0 auto;
+  width: 20px;
+  height: 20px;
+  display: block;
+  background-size: 100% 100%;
+  background-position: center center;
 }
 
 .icon-box .tabs-nav-word {
-	font-size: 12px;
-	line-height: 1;
+  font-size: 12px;
+  line-height: 1;
 }
 
 .icon-box .big-word {
-	font-size: 16px;
-	line-height: 1;
+  font-size: 16px;
+  line-height: 1;
 }
 
 .tabbar-nav-word {
-	font-size: 12px;
+  font-size: 12px;
 }