标签管理页面

pages/customer/detile.vue

@@ -27,6 +27,22 @@
 					<view class="btn"  @click="editFn"><image src="/static/image/customer/edit.png" mode=""></image><text> {{$t('edtbtn')}}</text></view>
 				</view>
 			</view>
+			<view class="cells">
+				 <u-collapse :border="false">
+				    <u-collapse-item
+				      title="标签"
+				      name="Docs guide"
+					   :border="false"
+				    >
+						<view class="">
+							<view class="tags">潜在高价值</view>
+							<view class="tags">活跃客户</view>
+							<view class="tags">促销敏感</view>
+							<view class="tags">促销敏</view>
+						</view>
+				    </u-collapse-item>
+				  </u-collapse>
+			</view>
 			<view class="cell">
 				<view class="item">{{$t('customer.Cstomerfj')}}</view>
 				<view class="right select" @click="showgrade = true">
@@ -267,6 +283,16 @@
 </script>
 
 <style lang="scss">
+	::v-deep  .u-cell__body{
+		padding: 0px !important;
+		
+	}
+	::v-deep .u-collapse-item__content__text{
+		padding: 10px 0px!important;
+	}
+	::v-deep .u-cell__title-text{
+		font-size: 14px;
+	}
 	.u-m-lr-10{
 		margin: 0px 10px;
 	}
@@ -290,11 +316,27 @@
 		position: absolute;
 		top: 2px;
 	}
+	.cells{
+		margin-bottom: 10px;
+		background: #f6f6f6;
+		padding:13px 15px;
+		border-radius: 10px;
+		.tags{
+			display: inline-block;
+			margin: 4px 3px;
+			width: 31%;
+			background: #ECF2FF;
+			border-radius: 15px;
+			color: #3471FF;
+			text-align: center;
+			padding: 5px 0px;
+		}
+	}
 	.cell{
 		position: relative;
 		display: flex;
 		justify-content:space-between;
-		padding: 18px 20px;
+		padding: 13px 20px;
 		align-items: center;
 		font-weight: 500;
 		.item{
@@ -315,6 +357,10 @@
 		position: relative;
 		margin-right: 10px;
 	}
+	.tagname{
+		color: #726CFF;
+		font-size: 12px;
+	}
 	.content{
 		padding: 10px 15px;
 		background: #FFFFFF;