ec.uniapp-master/pages/shop/shopdetail.vue

<template>
	<view>
		<lf-nav :spreadOut="false" :showIcon="true" baColor="rgba(0,0,0,0)"></lf-nav>
		<view class="shop-head">
			<image class="lf-w-100 lf-h-100" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
		</view>
		<view class="shop-title">
			<view class="shop-flex">
				<view class="shop-img">
					<image class="shop-img" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
				</view>
				<view>
					<view class="lf-color-black lf-font-36">AIMER MEN爱慕先生</view>
					<view class="lf-font-24 lf-color-black">L2</view>
				</view>
			</view>
			<view class="function-total">
				<view>
					<image class="shop-function" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
					<view class="lf-font-24 lf-color-333">客服</view>
				</view>
				<view>
					<image class="shop-function" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
					<view class="lf-font-24 lf-color-333">收藏</view>
				</view>
				<view>
					<image class="shop-function" src="http://k.zol-img.com.cn/dcbbs/16254/a16253094_01000.jpg" mode="aspectFill"></image>
					<view class="lf-font-24 lf-color-333">分享</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
</script>

<style lang="less" scoped>
	.shop-head {
		width: 100%;
		height: 400rpx;
		position: relative;
	}
	.shop-flex {
		display: flex;
		padding: 30rpx;
	}
	.shop-title {
		width: 686rpx;
		height: 274rpx;
		border-radius: 20rpx;
		background-color: white;
		box-shadow: 0rpx 2rpx 8rpx 1rpx rgba(0, 0, 0, 0.1);
		margin: 0 auto;
		position: relative;
		top: -32rpx;
	}
	.shop-img {
		width: 90rpx;
		height: 90rpx;
		margin-right: 15rpx;
	}
	.shop-function {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
	}
	.function-total {
		display: flex;
		justify-content: space-between;
		padding: 0 65rpx 0 65rpx;
	}
</style>