Ver Fonte

修复样式

chenxiong há 3 anos atrás
pai
commit
4ef41b64da
1 ficheiros alterados com 89 adições e 32 exclusões
  1. 89 32
      pages/shopping/shoppingCart.vue

+ 89 - 32
pages/shopping/shoppingCart.vue

@@ -11,32 +11,29 @@
 						<u-checkbox-group @change="checkboxGroupChange" placement="column" >
 							<view>
 								<uni-swipe-action-item :autoClose="false" @change="swipeChange($event, item)" :show="item.show" v-for="(item, index) in list" :key="index">
-									<view class="item">
-										<view style="width: 100%;">
-											<view style="display: flex;align-items:center;">
+									<view class="goods-item">
+										<view class="item-wrap">
+											<view class="goods-msg">
 												<u-checkbox @change="checkboxChange"  style="width: 100%;" v-model="list[index].checked" shape="circle" :name="index">
-													<view style="display: flex;padding-bottom: 15rpx;width:610rpx;">
-														<view><image :src="$method.splitImgHost(item.coverUrl, true)" style="width: 278rpx;height: 134rpx;"></image></view>
-														<view style="margin-left: 20rpx;flex: 1;">
-															<view style="color: #333333;font-size: 30rpx;font-weight: bold;text-align: right;">{{ item.goodsName }}</view>
+													<view class="flex">
+														<view class="goods-img">
+															<image :src="$method.splitImgHost(item.coverUrl, true)"></image>
+														</view>
+														<view class="flex__auto">
+															<view class="goods-title">{{ item.goodsName }}</view>
 															<view class="priceTag">¥ {{ item.standPrice }}</view>
 														</view>
 													</view>
 												</u-checkbox>
 											</view>
-											<view v-if="item.templateType != null && item.goodsType == 1">
+											<view class="goods-select" v-if="item.templateType != null && item.goodsType == 1">
 												<u-line color="#D6D6DB" />
-												<view
-													v-if="item.templateType == 'class'"
-													style="display: flex;justify-content: space-between;align-items: center;height: 50rpx;"
-													@click="openPopup(0, item, index)"
-												>
+												<view class="goods-select__type" v-if="item.templateType == 'class'"
+													@click="openPopup(0, item, index)">
 													<view style="color: #666666;font-size: 24rpx;">{{ !item.gradObj.className ? '选择班级' : item.gradObj.className }}</view>
 													<view><u-icon name="arrow-right" color="#999999" size="28"></u-icon></view>
 												</view>
-												<view
-													v-if="item.templateType == 'apply'"
-													style="display: flex;justify-content: space-between;align-items: center;height: 50rpx;"
+												<view class="goods-select__type" v-if="item.templateType == 'apply'"
 													@click="openPopup(1, item, index)"
 												>
 													<view style="color: #666666;font-size: 24rpx;">
@@ -81,14 +78,14 @@
 					</view>
 					<u-line color="#D6D6DB" />
 					<view>
-						<scroll-view scroll-y="true" style="height: 500rpx;">
+						<scroll-view scroll-y="true" style="height: 536rpx;">
 							<view>
 								<u-radio-group v-model="gradeValue">
 									<view v-for="(item, index) in gradeList" :key="index">
 										<view style="display: flex;align-items: center;padding: 20rpx;">
 											<view>
 												<u-radio shape="circle" :name="index">
-													<view :class="item.checked ? 'white-box blue-box' : 'white-box'">
+													<view :class="index == gradeValue? 'white-box blue-box' : 'white-box'">
 														<view>
 															<view class="blackTxt">{{ item.className }}</view>
 															<view class="redTxt" v-if="item.classEndTime">有效期至:{{ $method.timestampToTime(item.classEndTime) }}</view>
@@ -98,7 +95,6 @@
 												</u-radio>
 											</view>
 										</view>
-										<u-line color="#D6D6DB" />
 									</view>
 								</u-radio-group>
 							</view>
@@ -114,7 +110,7 @@
 						<view class="grade">选择考期/地区</view>
 					</view>
 					<u-line color="#D6D6DB" />
-					<view style="display: flex;height: 500rpx;">
+					<view style="display: flex;height: 536rpx;">
 						<view style="width: 50%;">
 							<view class="topTxt">考期</view>
 							<view>
@@ -474,7 +470,7 @@ page {
 	background-color: #eaeef1;
 }
 </style>
-<style scoped>
+<style scoped lang="scss">
 .operate {
 	background-color: #ff3b30;
 	color: #ffffff;
@@ -535,6 +531,7 @@ page {
 	line-height: 64rpx;
 }
 .confrim-btn {
+	border-top:1px solid #EEEEEE;
 	height: 98rpx;
 	width: 100%;
 	display: flex;
@@ -562,23 +559,83 @@ page {
 	box-shadow: 0rpx 0rpx 16rpx 4rpx rgba(145, 156, 178, 0.1);
 	border-radius: 32rpx 32rpx 0rpx 0rpx;
 }
-.item {
+
+.goods-item {
 	width: 100%;
 	background: #ffffff;
 	border-radius: 16rpx;
 	margin-bottom: 20rpx;
-	padding: 15rpx;
-	display: flex;
-}
-.priceTag {
-	font-size: 30rpx;
-	font-family: PingFang SC;
-	font-weight: bold;
-	color: #ff2d55;
+	padding: 15rpx 0;
 	display: flex;
-	flex-direction: row-reverse;
-	margin-right: 8rpx;
+	
+	.item-wrap {
+		width:100%;
+		
+		.goods-msg {
+			padding: 0 15rpx;
+			display: flex;
+			align-items:center;
+			
+			.flex {
+				display: flex;
+				padding-bottom: 15rpx;
+				width:610rpx;
+				
+				
+				.goods-img {
+					overflow: hidden;
+					border-radius:16rpx;
+					
+					image {
+						display: block;
+						width: 278rpx;
+						height: 134rpx;
+						
+					}
+				}
+				
+				&__auto {
+					margin-left: 20rpx;
+					flex: 1;
+					
+					
+					.goods-title {
+						color: #333333;
+						font-size: 30rpx;
+						font-weight: bold;
+						text-align: right;
+						
+						.priceTag {
+							font-size: 30rpx;
+							font-family: PingFang SC;
+							font-weight: bold;
+							color: #ff2d55;
+							display: flex;
+							flex-direction: row-reverse;
+							margin-right: 8rpx;
+						}
+					}
+				}
+				
+				
+			}
+		}
+		
+		.goods-select {
+			
+			&__type {
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+				height: 50rpx;
+				padding: 0 15rpx;
+			}
+			
+			
+		}
+	}
 }
+
 .btn2 {
 	width: 200rpx;
 	height: 64rpx;