fix: 修改样式

src/packages/cell/cell.scss

@@ -8,8 +8,8 @@
 		text-decoration: none;
 		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 		outline: none;
-		border-bottom: 1px solid rgba(230, 230, 230, 1);
-
+		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;
 		}
@@ -18,22 +18,23 @@
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			// min-height: 48px;
-			// @include nut-cell-border;
-			// .nut-icon {
-			// 	margin-right: 13px;
-			// }
+		}
+		.avatar{
+			margin-right: 13px;
+		}
+		.nut-avatar{
+			margin-right:8px;
 		}
 		.nut-cell-left {
 			flex: 1;
 			flex-direction: column;
-			margin-left: 13px;
+			//margin-left: 8px;
 		}
 
 		.nut-cell-title {
 			display: block;
-			line-height: 24px;
-			font-size: 15px;
+			line-height: 25px;
+			font-size: 16px;
 			color: rgba(100, 100, 100, 1);
 		}
 
@@ -53,10 +54,9 @@
 			align-items: center;
 			font-size: $font-size-small;
 			color: $text-color;
-
 			.nut-cell-desc {
 				color: #969696ff;
-				margin-right: 10px;
+				//margin-right: 10px;
 			}
 		}
 
@@ -65,29 +65,16 @@
 			align-items: center;
 
 			img {
-				height: 14px;
-				margin-left: 10px;
+				//height: 14px;
+				margin-left: 4px;
 			}
 		}
-		// &:first-of-type {
-		//   @include nut-cell-border;
-		//   .nut-cell-box {
-		//     background-image: none;
-		//   }
-		// }
-		// &:last-of-type {
-		//   @include nut-cell-border;
-		//   background-position: bottom;
-		// }
-		// &:only-of-type {
-		//   background: linear-gradient(rgba($dark-color, 0.5), rgba($dark-color, 0.5)) bottom,
-		//     linear-gradient(rgba($dark-color, 0.5), rgba($dark-color, 0.5)) top;
-		//   background-size: 100% 1px;
-		//   background-repeat: no-repeat;
-		// }
 	}
 
 	&:last-child .nut-cell {
 		border-bottom: none;
 	}
 }
+.demo-list p{
+	padding: 0px !important;
+}

src/packages/cell/cell.vue

@@ -21,7 +21,7 @@
           >
           <span class="nut-cell-icon">
             <slot name="icon" v-if="showIcon">
-              <nut-icon type="right" size="11px" color="#848484"></nut-icon>
+              <img width="17" height="17" src="../../assets/img/ic-arrow.png"/>
             </slot>
           </span>
         </div>
@@ -76,7 +76,12 @@ export default {
     'nut-icon': Icon
   },
   data() {
-    return {};
+    return {
+
+    };
+  },
+  computed:{
+   
   },
   methods: {
     clickCell() {

src/packages/cell/demo.vue

@@ -22,16 +22,24 @@
     <h4>菜单列表</h4>
     <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>
+        <div slot="avatar">
+         <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_me.png"/>
+        </div>
       </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>
+          <div slot="avatar">
+            <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_location.png"/>
+          </div>
       </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>
+        <div slot="avatar">
+          <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_collect.png"/>
+        </div>
       </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>
+          <div slot="avatar">
+            <img width="24" height="24" class="avatar-img" src="../../assets/img/ic_set.png"/>
+          </div>
       </nut-cell>
     </div>
     <h4>消息列表</h4>
@@ -47,14 +55,14 @@
         <div slot="avatar"><nut-avatar sizeNum="60" :bg-image="require('../../assets/img/cell-avatar.jpeg')" bg-icon></nut-avatar></div>
         <div slot="desc">
           <p class="timer">1小时前</p>
-          <p class="badge"><nut-badge  :is-dot="true" :max="99" top="0px" right="5px"></nut-badge></p>
+          <p class="badge"><nut-badge  :is-dot="true" :max="99" top="0px" right="10px"></nut-badge></p>
         </div>
       </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">
           <p class="timer">星期五</p>
-          <p class="badge"><nut-badge  :value="100" :max="99" top="0px" right="25px"></nut-badge></p>
+          <p class="badge"><nut-badge  :value="100" :max="99" top="0px" right="30px"></nut-badge></p>
         </div>
       </nut-cell>
     </div>
@@ -99,4 +107,7 @@ export default {
 		height: 100%;
 	}
 }
+.avatar-img{
+  margin-right: 8px;
+}
 </style>

src/packages/navbar/navbar.scss

@@ -14,16 +14,23 @@
 		.back {
 			float: left;
 			margin-right: 8px;
+			height: 100%;
+			display: flex;
+			align-items: center;
 		}
-		.back-icon,.close-icon {
-			display: inline-block;
+		// .back-icon,.close-icon {
+		// 	display: flex;
+		// 	width: 22px;
+		// 	height: 100%;
+		// 	background-size: contain;
+		// 	align-items: center;
+		// }
+		.close{
+			display: flex;
 			width: 22px;
-			height: 22px;
+			height: 100%;
 			background-size: contain;
-			vertical-align: middle;
-		}
-		.close{
-			display: inline-block;
+			align-items: center;
 		}
 	}
 
@@ -48,9 +55,13 @@
 		height: 40px;
 		line-height: 40px;
 		margin-top: -20px;
-		font-size: 14px;
+		font-size: 16px;
 		display: flex;
 		align-items: center;
+		.search{
+			display: flex;
+			align-items: center;
+		}
 		.search-icon{
 			display: flex;
 			align-items: center;

src/packages/navbar/navbar.vue

@@ -3,12 +3,12 @@
     <div class="nav-left">
       <div class="back" v-if="backShow" @click="$emit('on-click-back')">
         <slot name="back-icon">
-          <nut-icon class="back-icon" type="self" color="#323232FF" size="18px" :url="require('../../assets/svg/arrow_right.svg')"></nut-icon>
+          <img width="22" height="22" src="../../assets/img/nav_arrow.png" />
         </slot>
       </div>
       <div class="close" @click="$emit('on-click-close')">
         <slot name="close-icon" v-if="closeShow">
-            <nut-icon class="close-icon" type="self" color="#323232FF" size="16px" :url="require('../../assets/svg/cross.svg')"></nut-icon>
+           <img width="22" height="22" src="../../assets/img/nav_close.png" />
         </slot>
       </div>
     </div>
@@ -22,12 +22,12 @@
     <div class="nav-right">
       <div class="search" @click="$emit('on-click-search')">
         <slot name="search-icon" v-show="rightShow">
-            <nut-icon class="search-icon" type="search" color="#646464FF" size="18px"></nut-icon>
+            <img width="22" height="22" src="../../assets/img/nav_search.png" />
         </slot>
       </div>
       <div class="more" @click="$emit('on-click-more')" v-if="moreShow">
         <slot name="more-icon">
-          <nut-icon class="more-icon" type="self" color="#323232FF" size="20px" :url="require('../../assets/svg/ellipsis.svg')"></nut-icon>
+           <img width="22" height="22" src="../../assets/img/nav_more.png" />
         </slot>
       </div>
     </div>

src/packages/tab/tab.scss

@@ -61,6 +61,7 @@
 		border: 0;
 
 		.nut-tab-link {
+			font-size: 16px;
 			color: #e1251b;
 			font-weight: bold;
 		}
@@ -101,11 +102,9 @@
 	// height: 200px;
 	overflow-y: auto;
 	overflow-x: hidden;
-
 	&::-webkit-scrollbar {
 		display: none;
 	}
-
 	.nav-bar-left {
 		position: absolute;
 		width: 2px;
@@ -115,27 +114,25 @@
 		background: $primary-color;
 		transition: all 0.3s ease-in-out;
 	}
-
 	.nut-title-nav {
 		border: 0;
 		background: #f7f7f7;
-		border-left: 1px solid #f5f7fa;
+		//border-left: 1px solid #f5f7fa;
 	}
-
 	.nut-tab-active {
 		.nut-tab-link {
 			position: relative;
 			background: #fff;
 			color: #e1251b;
 			font-weight: bold;
+			font-size: 16px;
 		}
-
 		.tab-line {
 			&::after {
 				content: "";
 				position: absolute;
 				height: 100%;
-				width: 3px;
+				width: 4px;
 				background: #e1251b;
 				left: 0;
 				top: 0;
@@ -177,6 +174,7 @@
 			background: #fff;
 			color: #e1251b;
 			font-weight: bold;
+			font-size: 16px;
 		}
 
 		.tab-line {
@@ -199,12 +197,11 @@
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	font-size: 12px;
 	text-decoration: none;
 	line-height: 1;
 	width: 100%;
 	height: 100%;
-	font-size: 13px;
+	font-size: 15px;
 }
 
 .nut-tab-title-bottomnav {
@@ -242,6 +239,7 @@
 		.nut-tab-link {
 			color: #e1251b;
 			font-weight: bold;
+			font-size: 16px;
 		}
 
 		.tab-line {
@@ -275,7 +273,7 @@
 .nut-title-nav-leftnav {
 	flex: 1;
 	display: flex;
-	padding-left: 5px;
+	//padding-left: 5px;
 	//justify-content: center;
 	align-items: center;
 	position: relative;
@@ -324,12 +322,15 @@
 	height: 88px;
 	border: 1px solid #fff;
 	background: #fff;
-	width: 100%;
+	// width: 100%;
 	padding: 20px;
 	box-sizing: border-box;
 	font-size: 14px;
 	color: #646464;
-
+	flex: 1;
+	.nut-tab-panel p{
+		padding: 0;
+	}
 	.hide {
 		display: none;
 	}