wxThird/pages/shop/goodsDetail.vue

<template>
<view class="box">
	<view class="spwBox">
		<swiper class="swiper" circular  :autoplay="false" :indicator-dots="true" indicator-color="#CCCCCC" indicator-active-color="#D53533">
			<swiper-item>
				<view class="swiper-item">
					<img mode="aspectFit" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" alt="" class="swiper-itemImg">
				</view>
			</swiper-item>
			<swiper-item>
				<view class="swiper-item">
					<img mode="aspectFit" src="http://phone.66km.cn:8088/thFiles/C678448A-C874-4B42-9EAE-4F8F21D71D27.jpg" alt="" class="swiper-itemImg">
				</view>
			</swiper-item>
		</swiper>
	</view>
	<view class="shopCont">
		<view class="shopCtop">
			<view class="goodsPrice">
				<view class="goodsPrice1">店庆价</view>
				<view class="goodsPrice2">￥</view>
				<view class="goodsPrice3">999</view>
				<view class="goodsPrice4">￥893</view>
			</view>
			<view class="Sold">已售 999</view>
		</view>
		<view class="goodsName">德国马牌 Continental 全新升级6 TechContct 过长长长长长长长长换行</view>
		<view class="goodsMd">这里展示商品卖点，如果后台没填则不展示</view>
	</view>
	
	<view class="modeBox">
		<view class="modeline">
			<view class="modelineLeft">配送方式</view>
			<view class="modeLineRight">到店取货</view>
		</view>
		<view class="modeline">
			<view class="modelineLeft">限购数量</view>
			<view class="modeLineRight">到店取货</view>
		</view>
		<view class="modeline">
			<view class="modelineLeft">售后服务</view>
			<view class="modeLineRight">到店取货</view>
		</view>
	</view>
	
</view>
</template>

<script>
	export default {
		components: {
			
		},
		data() {
			return {
				userInfo:'',
				
			}
		},
		onLoad() {
			
			this.userInfo = uni.getStorageSync("userInfo");
			//this.getOrderTimes()
		},
		
		methods: {
			
			
		}
	}
</script>

<style scoped lang="less">

.box{
	background: #F4F5F7;
	min-height: 100vh;
}
.swiper{
	width: 750rpx;
	height: 700rpx;
	background: #FFFFFF;
	border-bottom: 1px solid #EEEEEE;
}
.swiper-item{
	width: 750rpx;
	height: 700rpx;
}
.swiper-itemImg{
	width: 750rpx;
	height: 700rpx;
}
.shopCtop{
	display: flex;
	padding: 20rpx 24rpx;
	justify-content: space-between;
	background: #FFFFFF;
}
.goodsPrice{
		display: flex;
}
.goodsPrice1{
	font-size: 24rpx;
	font-weight: 400;
	color: #F03B3B;
	padding-top: 14rpx;
}
.goodsPrice2{
	font-size: 28rpx;
	font-weight: 400;
	color: #F03B3B;
	padding-top: 10rpx;
	padding-left: 14rpx;
}
.goodsPrice3{
	font-size:28rpx;
	font-weight: 400;
	color: #F03B3B;
	
	padding-right: 10rpx;
}
.goodsPrice3{
	font-size: 40rpx;
	font-weight: 400;
	color: #F03B3B;
}
.goodsPrice4{
	font-size: 24rpx;
	font-weight: 400;
	color: #999999;
	padding-top: 14rpx;
}
.Sold{
		font-weight: 400;
		color: #999999;
		font-size: 24rpx;
		padding-top: 10rpx;
}
.goodsName{
	font-size: 30rpx;
	line-height: 42rpx;
	font-weight: 500;
	color: #333333;
	padding: 20rpx 24rpx;
}
.goodsMd{
	font-weight: 400;
	color: #999999;
	font-size: 26rpx;
	padding: 0 24rpx;
	padding-bottom: 20rpx;
}
.shopCont{
	background: #FFFFFF;
}
.modeBox{
	margin-top:20rpx ;
	padding: 5rpx 0;
	background: #FFFFFF;
}
.modeline{
	display: flex;
	padding: 15rpx 24rpx;
}
.modelineLeft{
	color: #999999;
	font-size: 26rpx;
	width: 200rpx;
}
.modeLineRight{
	color: #333333;
	font-size: 26rpx;
}
</style>