频道页面修改

common/styles/iconfont.css

@@ -1,8 +1,8 @@
 @font-face {
   font-family: "lf-iconfont"; /* Project id 2651793 */
-  src: url('//at.alicdn.com/t/font_2651793_erp3vwlpk0v.woff2?t=1625725821604') format('woff2'),
-       url('//at.alicdn.com/t/font_2651793_erp3vwlpk0v.woff?t=1625725821604') format('woff'),
-       url('//at.alicdn.com/t/font_2651793_erp3vwlpk0v.ttf?t=1625725821604') format('truetype');
+  src: url('//at.alicdn.com/t/font_2651793_09yxtzk2asib.woff2?t=1627553466179') format('woff2'),
+       url('//at.alicdn.com/t/font_2651793_09yxtzk2asib.woff?t=1627553466179') format('woff'),
+       url('//at.alicdn.com/t/font_2651793_09yxtzk2asib.ttf?t=1627553466179') format('truetype');
 }
 
 .lf-iconfont {
@@ -13,6 +13,10 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.lf-icon-cuo:before {
+  content: "\e600";
+}
+
 .lf-icon-xiangyou:before {
   content: "\e6d8";
 }

pages/channel/index.vue

@@ -8,8 +8,8 @@
 			<view class="select-item active" hover-class="lf-opacity" 
 				v-for="(item, key, index) in select_list" :key="index" 
 				@click="cancelItem(key)">
-				<text>{{ key }}</text>
-				<text class="lf-iconfont lf-icon-cuowu remove-icon"></text>
+				<text class="lf-m-r-24">{{ key }}</text>
+				<text class="lf-iconfont lf-icon-cuo remove-icon"></text>
 			</view>
 		</view>
 		<!-- 机票酒店 -->
@@ -54,9 +54,13 @@
 					
 				})
 			},
-			updateChannel() {
+			updateChannel(type) {
 				this.$http(this.API.API_EDITCHANNEL,{channels: this.chanel_id},{showLoading:false}).then(res => {
-					this.$msg('添加频道成功')
+					if(type == 1) {
+						this.$msg('添加频道成功')
+					}else {
+						this.$msg('取消频道成功')
+					}
 				}).catch(err => {
 					
 				})
@@ -113,7 +117,7 @@
 					}
 				}
 				if(type != 1) {
-					this.updateChannel();
+					this.updateChannel(1);
 				}
 				
 			},
@@ -132,7 +136,7 @@
 				});
 				// 清除选中的对象
 				delete this.select_list[key];
-				this.updateChannel();
+				this.updateChannel(2);
 			}
 		}
 	}
@@ -149,8 +153,10 @@
 		display: flex;
 		align-items: center;
 	}
+
 	.select-item{
-		width: 170rpx;
+		width: max-content;
+		padding: 0 20rpx;
 		height: 82rpx;
 		border: 1rpx solid #999999;
 		font-size: 28rpx;
@@ -158,14 +164,18 @@
 		text-align: center;
 		line-height: 82rpx;
 		background-color: #FFFFFF;
-		margin-right: -1rpx;
-		margin-top: -1rpx;
+		margin-right: -2rpx;
+		margin-top: -2rpx;
 		box-sizing: border-box;
 	}
 	.active{
-		border: 1rpx solid #1998FE;
-		color: #1998FE;
+		border: 1rpx solid #FF0000;
+		color: #FF0000;
+		background-color: #FFF8F8;
 		position: relative;
+		border-radius: 5rpx;
+		margin-right: 10rpx;
+		margin-bottom: 10rpx;
 		// text-align: left;
 		// display: flex;
 		// justify-content: space-between;
@@ -173,10 +183,10 @@
 		// padding: 0 10rpx;
 		.remove-icon{
 			position: absolute;
-			right: 0rpx;
-			top: -28rpx;
+			right: 8rpx;
+			top: 0;
 			color: #FF0000;
-			font-size: 26rpx;
+			font-size: 24rpx;
 		}
 	}
 	.lf-p-l-5{