Browse Source

样式优化

lilei 4 years ago
parent
commit
dfe4f4dbef

+ 1 - 1
components/uni-cart-fix/uni-cart-fix.vue

@@ -28,7 +28,7 @@
 		background: rgba($color: #ffffff, $alpha: 0.7);
 		padding: 10upx;
 		border-radius: 100%;
-		bottom: 15%;
+		bottom: 40%;
 		right: 2%;
 		box-shadow: 3upx 3upx 8upx #ccc;
 	}

+ 52 - 27
pages/cart/cart.vue

@@ -3,8 +3,8 @@
 		<view class="cart-bar">
 			<view>共25件商品</view>
 			<view @click="editCart">
-				<text class="blue" v-if="!isEdit">管理</text>
-				<text class="blue" v-else>完成</text>
+				<text class="edit" v-if="!isEdit">管理</text>
+				<text class="save" v-else>完成</text>
 			</view>
 		</view>
 		<view class="goods-list">
@@ -12,28 +12,33 @@
 			<view class="goods-class-box" v-for="item in 2">
 				<view class="goods-class-head">
 					<view>
-						<u-checkbox shape="circle" name='goodsClas' @change="goodsClasChange">
+						<u-checkbox shape="circle" active-color="#01c9b2" name='goodsClas' @change="goodsClasChange">
 							人气零食
 						</u-checkbox>
 					</view>
 					<view class="des">
-						满<text>300</text>乐豆才可购买
+						<view>满<text>300</text></view>
+						<u-image mode="scaleToFill" width="30rpx" height="30rpx" src="/static/ledou.png"></u-image>
+						<view>才可购买</view>
 					</view>
 				</view>
 				<view class="goods-class-list">
 					<!-- 商品列表 -->
 					<view class="goods-item" v-for="(item,index) in 3" :key="index">
 						<view class="checkbox">
-							<u-checkbox v-if="index!=1||isEdit" shape="circle" name='goodsItem'></u-checkbox>
+							<u-checkbox v-if="index!=1||isEdit" shape="circle" active-color="#01c9b2" name='goodsItem'></u-checkbox>
 						</view>
 						<view class="goods-imgs">
 							<view v-if="index==1" class="goods-staus">已售罄</view>
-							<u-image width="150rpx" height="150rpx" src="https://cdn.uviewui.com/uview/example/fade.jpg"></u-image>
+							<u-image border-radius="12" width="158rpx" height="140rpx" src="/static/goods.png"></u-image>
 						</view>
 						<view class="goods-info">
 							<view class="good-name">拉就是两地分居拉进来就是两地分居拉进来就是两地分居拉进来进来</view>
 							<view class="goods-price">
-								<view><text>50</text>乐豆</view>
+								<view>
+									<text>50</text>
+									<u-image mode="scaleToFill" width="35rpx" height="35rpx" src="/static/ledou.png"></u-image>
+								</view>
 								<view v-if="index!=1">
 									<u-number-box :min="1"></u-number-box>
 								</view>
@@ -45,14 +50,17 @@
 		</view>
 		<view class="cart-submit">
 			<view>
-				<u-checkbox shape="circle" name='checkAll' @change="checkAllChange" v-model="checkAll">全选</u-checkbox>
+				<u-checkbox shape="circle" name='checkAll' active-color="#01c9b2" @change="checkAllChange" v-model="checkAll">全选</u-checkbox>
 			</view>
 			<view v-if="!isEdit">
-				<view>总计:<text>450</text>乐豆</view>
-				<u-button type="warning" @click="toOrder()">立即下单</u-button>
+				<view class="heji">
+					<view>总计:<text>450</text></view>
+					<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
+				</view>
+				<u-button size="mini" :custom-style="toOrderButton" type="error" @click="toOrder()">立即下单</u-button>
 			</view>
 			<view v-else>
-				<u-button type="error">删除</u-button>
+				<u-button size="mini" :custom-style="toOrderButton" type="error">删除</u-button>
 			</view>
 		</view>
 	</view>
@@ -64,6 +72,12 @@
 			return {
 				checkAll: false,// 全选
 				isEdit: false, // 是否编辑模式
+				toOrderButton: {
+					borderRadius:'100rpx',
+					fontSize:'30rpx',
+					width: '180rpx',
+					height: '60rpx'
+				}
 			};
 		},
 		methods: {
@@ -99,18 +113,17 @@ page{
 	display: flex;
 	flex-direction: column;
 	.cart-bar{
-		background: #FFFFFF;
-		box-shadow: 1px 1px 3px #eee;
-		border-bottom: 1px solid #eee;
 		display: flex;
 		justify-content: space-between;
 		padding:20upx;
-		.blue{
-			color: #007AFF;
+		.edit{
+			color: #666;
+		}
+		.save{
+			color: #00aaff;
 		}
 	}
 	.goods-list{
-		padding: 20upx 0;
 		flex-grow: 1;
 		overflow: auto;
 		.goods-class-box{
@@ -124,7 +137,10 @@ page{
 				border-bottom: 1px solid #F8F8F8;
 				justify-content: space-between;
 				.des{
+					display: flex;
+					align-items: center;
 					font-size: 26upx;
+					color: #999;
 					text{
 						color: #FA3534;
 					}
@@ -148,24 +164,26 @@ page{
 			.goods-imgs{
 				position: relative;
 				.goods-staus{
-					width: 100rpx;
-					height: 100rpx;
+					width: 100%;
+					height: 100%;
 					position: absolute;
 					z-index: 10000;
-					border-radius: 100%;
+					border-radius: 15rpx;
 					background: rgba($color: #000000, $alpha: 0.5);
 					text-align: center;
-					line-height: 100rpx;
-					left: 50%;
-					top: 50%;
-					margin-top: -50rpx;
-					margin-left: -50rpx;
+					line-height: 140rpx;
+					left: 0;
+					top: 0;
 					color: #eee;
 					font-size: 24upx;
+					font-weight: bold;
 				}
 			}
 			.goods-info{
 				padding-left: 20upx;
+				.good-name{
+					font-weight: bold;
+				}
 			}
 			.goods-price{
 				display: flex;
@@ -175,10 +193,13 @@ page{
 				>view{
 					&:first-child{
 						font-size: 22upx;
+						display: flex;
+						align-items: center;
 						text{
 							color: red;
-							font-size: 30upx;
+							font-size: 32upx;
 							margin-right: 6upx;
+							font-weight: bold;
 						}
 					}
 				}
@@ -203,7 +224,11 @@ page{
 					font-size: 40upx;
 				}
 				> view{
-					padding: 0 20upx;
+					padding-right: 50upx;
+				}
+				.heji{
+					display: flex;
+					align-items: center;
 				}
 			}
 		}

+ 61 - 30
pages/goods/goodsDetail.vue

@@ -4,12 +4,20 @@
 			<!-- 商品信息 -->
 			<view class="goods-head">
 				<view class="goods-imgs">
-					<view class="goods-staus">已售罄</view>
-					<u-swiper height="340" :border-radius="0" mode="number" indicator-pos="bottomRight" :list="imageList"></u-swiper>
+					<view class="goods-staus"></view>
+					<u-swiper height="340" :border-radius="15" mode="number" indicator-pos="bottomRight" :list="imageList"></u-swiper>
+				</view>
+				<view class="goods-name">
+					<view>
+						的房间间里撒酒疯撒发撒将发生登录撒地方就房间里撒酒疯撒发撒将发生登录撒地方就
+					</view>
+					<view>
+						<text>250</text>
+						<u-image mode="scaleToFill" width="40rpx" height="40rpx" src="/static/ledou.png"></u-image>
+					</view>
 				</view>
-				<view class="goods-name ellipsis-two">的房间间里撒酒疯撒发撒将发生登录撒地方就房间里撒酒疯撒发撒将发生登录撒地方就</view>
 				<view class="goods-price">
-					<view><text>50</text>乐豆</view>
+					<view>换取数量<text>(库存50件)</text></view>
 					<view>
 						<u-number-box v-model="nums"></u-number-box>
 					</view>
@@ -37,8 +45,8 @@
 		</view>
 		<!-- 底部浮动按钮 -->
 		<view class="bottom-btns">
-			<view><u-button type="primary" @click="addCart">加入购物车</u-button></view>
-			<view><u-button type="error" @click="toOrder()">立即下单</u-button></view>
+			<view><u-button :custom-style="addCartButton" type="warning" @click="addCart">加入购物车</u-button></view>
+			<view><u-button :custom-style="toOrderButton" type="error" @click="toOrder()">立即下单</u-button></view>
 		</view>
 		<!-- 购物车 -->
 		<uni-cart-fix></uni-cart-fix>
@@ -50,10 +58,17 @@
 		data() {
 			return {
 				imageList:[
-					{image:'https://cdn.uviewui.com/uview/example/fade.jpg'},
-					{image:'https://cdn.uviewui.com/uview/example/fade.jpg'}
+					{image:'/static/banner.png'},
+					{image:'/static/banner1.png'}
 				],
-				nums:1
+				nums:1,
+				addCartButton: {
+					background: '#ff9000',
+					borderRadius:'100rpx 0 0 100rpx'
+				},
+				toOrderButton: {
+					borderRadius:'0 100rpx 100rpx 0'
+				}
 			};
 		},
 		methods: {
@@ -90,40 +105,56 @@ page{
 	.goods-head{
 		background: #FFFFFF;
 		box-shadow: 1px 1px 3px #eee;
+		padding: 10upx 0;
 		.goods-imgs{
 			position: relative;
+			margin: 20upx 30upx 10upx;
 			.goods-staus{
-				width: 150rpx;
-				height: 150rpx;
+				width: 100%;
+				height: 100%;
 				position: absolute;
 				z-index: 10000;
-				border-radius: 100%;
-				background: rgba($color: #000000, $alpha: 0.5);
-				text-align: center;
-				line-height: 150rpx;
-				left: 50%;
-				top: 50%;
-				margin-top: -75rpx;
-				margin-left: -75rpx;
-				color: #eee;
+				background: url(../../static/yxt.png) no-repeat center center;
+				background-size: 100% 100%;
+				left: 0;
+				top: 0;
 			}
 		}
 		.goods-name{
-			padding:0 20upx;
-			margin: 10upx 0;
-			line-height: 40upx;
+			padding:0 40upx;
+			margin: 20upx 0;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			>view{
+				&:first-child{
+					width: 60%;
+					font-weight: bold;
+					font-size: 30upx;
+				}
+				&:last-child{
+					display: flex;
+					align-items: center;
+					text{
+						color: #d42a26;
+						font-size: 36upx;
+						margin-right: 6upx;
+						font-weight: bold;
+					}
+				}
+			}
 		}
 		.goods-price{
 			display: flex;
 			align-items: center;
 			justify-content: space-between;
-			padding:0 20upx 20upx;
+			padding:0 40upx 20upx;
 			>view{
 				&:first-child{
 					font-size: 22upx;
 					text{
-						color: red;
-						font-size: 36upx;
+						color: #999;
+						font-size: 24upx;
 						margin-right: 6upx;
 					}
 				}
@@ -133,7 +164,7 @@ page{
 	.goods-attr{
 		margin: 20upx 0;
 		background: #FFFFFF;
-		padding: 20upx;
+		padding: 20upx 40upx;
 		box-shadow: 1px 1px 3px #eee;
 		> view{
 			display: flex;
@@ -148,7 +179,7 @@ page{
 		}
 	}
 	.goods-content{
-		background: #FFFFFF;
+		background: #F8F8F8;
 		padding: 20upx;
 		box-shadow: 1px 1px 3px #eee;
 		min-height: 50vh;
@@ -159,9 +190,9 @@ page{
 		display: flex;
 		align-items: center;
 		justify-content: space-around;
-		padding: 15upx;
+		padding: 30upx 100upx;
 		>view{
-			width: 45%;
+			width: 50%;
 		}
 	}
 }

+ 1 - 1
pages/index/index.vue

@@ -44,7 +44,7 @@
 			return {
 				imageTopList:[
 					{image:'/static/banner.png'},
-					{image:'/static/banner.png'}
+					{image:'/static/banner1.png'}
 				],
 				goodsList:[
 					{

BIN
static/banner1.png


BIN
static/yxt.png