优化样式

pages/coupon/index/index.vue

@@ -4,7 +4,7 @@
 			<view class="couponHeader">
 				<view class="couponHeadLeft">
 					<view class="couponHeadLText" @click.stop="CouponsUseScopeShow=!CouponsUseScopeShow">
-						<text class="couponHeadLTextL">{{ CouponsUseScopeName }}</text>
+						<view class="couponHeadLTextL">{{ CouponsUseScopeName }}</view>
 						<view>
 							<u-icon :name="!CouponsUseScopeShow?'arrow-down':'arrow-up'" size="24"></u-icon>
 						</view>
@@ -29,13 +29,7 @@
 		<view v-if="couponDataList.length > 0" style="  height: calc(100vh - 50px);  width: calc(100vw); overflow: hidden;padding-bottom: 50px;">
 			<scroll-view :scroll-y="true" :enable-back-to-top="true" :enable-flex="true" @scrolltolower="lower" :style="{ height: '100%' }">
 				<view class="couponList">
-					<view class="couponListBox" :class="{
-						'active0': x.couponsUseScope==-1,'active1': x.couponsUseScope==0,
-						'active2': x.couponsUseScope==1,'active3': x.couponsUseScope==2,
-						'active4': x.couponsUseScope==3,'active5': x.couponsUseScope==4,
-						'active6': x.couponsUseScope==5,'active7': x.couponsUseScope==6,
-						'active8': x.couponsUseScope==7,
-					}"
+					<view class="couponListBox" :class="[x.couponsUseScope>=0?'active'+x.couponsUseScope:'active0']"
 					 v-for="(x, i) in couponDataList" :key="i">
 						<view class="item">
 							<view :style="{'background-image':`url(${x.backGroubd}) `}" class="couponItemLeft">
@@ -290,18 +284,18 @@
 						arrList(res.data.pageData)
 						this.couponDataList = res.data.pageData;
 						this.couponDataList.forEach(x => {
-							if(x.couponsUseScope<=7){
-								if(x.couponsUseScope==-1) x.backGroubd = this.lineImgs[0]
-								if(x.couponsUseScope==0) x.backGroubd = this.lineImgs[1]
-								if(x.couponsUseScope==1) x.backGroubd = this.lineImgs[2]
-								if(x.couponsUseScope==2) x.backGroubd = this.lineImgs[3]
-								if(x.couponsUseScope==3) x.backGroubd = this.lineImgs[4]
-								if(x.couponsUseScope==4) x.backGroubd = this.lineImgs[5]
-								if(x.couponsUseScope==5) x.backGroubd = this.lineImgs[6]
-								if(x.couponsUseScope==6) x.backGroubd = this.lineImgs[7]
-								if(x.couponsUseScope==7) x.backGroubd = this.lineImgs[8]
+							if(x.couponsUseScope<=8){
+								if(x.couponsUseScope==0) x.backGroubd = this.lineImgs[0]
+								if(x.couponsUseScope==1) x.backGroubd = this.lineImgs[1]
+								if(x.couponsUseScope==2) x.backGroubd = this.lineImgs[2]
+								if(x.couponsUseScope==3) x.backGroubd = this.lineImgs[3]
+								if(x.couponsUseScope==4) x.backGroubd = this.lineImgs[4]
+								if(x.couponsUseScope==5) x.backGroubd = this.lineImgs[5]
+								if(x.couponsUseScope==6) x.backGroubd = this.lineImgs[6]
+								if(x.couponsUseScope==7) x.backGroubd = this.lineImgs[7]
+								if(x.couponsUseScope==8) x.backGroubd = this.lineImgs[8]
 							}else{
-								if(x.couponsUseScope==-1) x.backGroubd = this.lineImgs[0]
+								x.backGroubd = this.lineImgs[0]
 							}
 							
 						})
@@ -513,20 +507,24 @@
 
 	.couponHeadLeft {
 		flex-shrink: 0;
+		border-right: 1rpx solid rgba(207, 207, 207, .4);
+		padding-right: 3rpx;
 	}
 
 	.couponHeadLText {
-		width: 210rpx;
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
 		padding-left: 43rpx;
-		border-right: 1rpx solid rgba(207, 207, 207, .4);
 	}
 
 	.couponHeadLTextL {
-		// margin-right: 42rpx;
+		display: inline-block;
+		width: 120rpx;
 		font-size: 28rpx;
+		word-spacing: normal;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	.couponHeadLText view {
@@ -557,7 +555,7 @@
 
 	.couponHeadRight text {
 		display: inline-block;
-		padding: 0 31rpx;
+		padding: 0 27rpx;
 		font-size: 28rpx;
 		white-space: nowrap;
 	}