building-materials-shop-uniapp-241014/pages/index/index.vue

<template>
	<view class="page">
		<view class="red-top">
			<view class="building-title">
				<view class="title-right">
					建材
				</view>
				<view class="title-left">
					寻找你想要的建材材料
				</view>
			</view>
			<view class="building-search">
				<view class="address">
					<image src="../../static/image/home/1.png" mode=""></image>
					<view class="eare">
						<text>深圳</text>
					</view>
					<view class="down-arrow"></view>
				</view>
				<view class="search">
					<!-- DC2828 -->
					<uv-search bgColor="#ffffff"  placeholder="搜索材料" inputAlign="left" height="70" showAction="false"></uv-search>
				</view>
			</view>
		</view>
		
		<view class="image-home">
			<image src="../../static/image/home/2.png" mode=""></image>
		</view>
		
		<view class="building-class">
			<image src="../../static/image/home/3.png" mode=""></image>
			<image src="../../static/image/home/4.png" mode=""></image>
			<image src="../../static/image/home/5.png" mode=""></image>
			<image src="../../static/image/home/6.png" mode=""></image>
		</view>
		<view class="text-building">
			<text>XX建材</text>
			<text>XX建材</text>
			<text>XX建材</text>
			<text>XX建材</text>
		</view>
		<view class="hot-building">
			<text>热卖建材</text>
			<view class="new-message">
				你有一条新的快捷下单信息
			</view>
			<view class="quick-order">
				<view class="number-order">
					1
				</view>
				<image src="../../static/image/home/7.png" mode=""></image>
			</view>
		</view>
		<view class="shop-list">
			<view class="picture-shop">
				<image src="../../static/image/home/8.png" mode=""></image>
			</view>
			<view class="price-shop">
				<view class="top-shop">
					<text>泰山工装石膏板</text>
					<view class="tag-shop">
						<uv-tags text="建材材料" type="warning" plain size="mini"></uv-tags>
						<uv-tags text="快速下单" type="warning" plain size="mini"></uv-tags>
					</view>
				</view>
				<view class="bottom-price">
					<text style="font-size: 45rpx; ">￥38</text>.00元/米
				</view>
			</view>
			<view class="buy-shop">
				<uv-button  :custom-style="customStyle" type="primary" shape="circle" text="立即购买" ></uv-button>
			</view>
		</view>
		<PrivacyAgreementPoup/>
		
		<tabber select="0"/>
	</view>
</template>

<script>
	import PrivacyAgreementPoup from '@/components/config/PrivacyAgreementPoup.vue'
	import tabber from '@/components/base/tabbar.vue'
	export default {
		components : {
			tabber,
			PrivacyAgreementPoup,
		},
		data() {
			return {
				keyword:''
			}
		},
		computed : {
			customStyle(){
				return{
						height: '60rpx',
						background: '#EB553B',
						color: '#fff',
						borderRadius: '40rpx' ,//圆角
						// nvue中必须是下方的写法
						'border-top-right-radius': '40rpx',
						'border-bottom-left-radius': '40rpx',
						'border-bottom-right-radius': '40rpx'
				}
			}
		},
		methods: {
		}
	}
</script>

<style scoped lang="scss">
	.red-top{
		position: relative;
		height: 420rpx;
		background: $uni-color;
		border-bottom-left-radius: 100rpx;
		border-bottom-right-radius: 100rpx;
		z-index: -1;
		.building-title{
			position: absolute;
			height: 100rpx;
			width: 100%;
			margin-top: 100rpx;
			.title-right{
				color: $uni-bg-color;
				height: 100rpx;
				line-height: 100rpx;
				font-size: 45rpx;
				font-weight: 900;
				margin-left: 30rpx;
				display: inline-block;
			}
			.title-left{
				display: inline-block;
				margin-left: 30rpx;
				font-size: 22rpx;
				color: $uni-bg-color;
			}
		}
		.building-search{
			position: absolute;
			height: 100rpx;
			width: 100%;
			margin-top: 200rpx;
			// background-color: black;
			.address{
				height: 100rpx;
				width: 150rpx;
				position: relative;
				image{
					position: absolute;
					height: 20rpx;
					width: 15rpx;
					line-height: 20rpx;
					left: 20px;
					top: 42rpx;
				}
				.eare{
					width: 100rpx;
					height: 100rpx;
					line-height: 100rpx;
					margin-left:60rpx;
					color: $uni-bg-color;
				}
				.down-arrow:after {
				  content: "";
				  display: inline-block;
				  width: 0;
				  height: 0;
				  border-left: 10rpx solid transparent;
				  border-right: 10rpx solid transparent;
				  border-top:15rpx solid $uni-bg-color;
				  margin-top: 5rpx;
				  position: absolute;
				  top: 42rpx;
				  left: 65px;
				}
			}
			.search{
				display: inline-block;
				position: absolute;
				top: 8px;
				left: 26%;
				width: 70%;
			}
			
		}
	}
	.image-home{
		z-index: 1;
		height: 350rpx;
		width: 100%;
		image{
			width: 95%;
			height: 100%;
			margin:auto;
			display: block;
			margin-top: -100rpx;
		}                                                         
	}
	.building-class{
		height: 150rpx;
		display: flex;
		justify-content: space-around;
		align-items: center; /* 垂直居中 */
		background-color: $uni-bg-color;
		image{
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-bottom: -30rpx;
			width: 100rpx;
			height: 100rpx;
			display: inline-block;
			
		}
	}
	.text-building{
		display: flex;
		justify-content: space-around;
		align-items: center; /* 垂直居中 */
		background-color: $uni-bg-color;
		text-align: center;
		font-weight: 500;
		margin-bottom: -30rpx;
		padding-bottom: 40rpx;
		// overflow: hidden;
	}
	.hot-building{
		margin-top: 50rpx;
		height: 100rpx;
		background-color: $uni-bg-color;
		display: flex;
		align-items: center;
		padding-left: 40rpx;
		font-size: 35rpx;
		font-weight: 400;
		.new-message{
			background-color: #DC2828;
			border-radius: 20rpx;
			font-size: 25rpx;
			color: $uni-bg-color;
			padding: 0 10rpx 0 10rpx;
			margin-left: 20rpx;
		}
		.quick-order{
			position: relative;
			width: 230rpx;
			height: 160rpx;		
			margin-right: 0rpx;
			margin-top: 15rpx;
			image{
				width: 100%;
				height: 100%;
				
			}
			.number-order{
				background-color: #DC2828;
				position: absolute;
				font-size: 30rpx;
				height: 40rpx;
				width: 40rpx;
				text-align: center;
				border-radius: 20rpx;
				color: #ffffff;
				top: 10rpx;
				left: 25rpx;
			}
		}
	}
	.shop-list{
		width: 95%;
		height: 222rpx;
		display: flex;
		margin: 30rpx auto;
		background-color: #ffffff;
		border-radius: 20rpx;
		.picture-shop{
			width: 240rpx;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			image{
				width: 200rpx;
				height: 150rpx;
			}
		}
		.price-shop{
			width: 250rpx;
			height: 100%;
			.top-shop{
				height: 100rpx;
				width: 100%;
				font-size: 33rpx;
				margin-top: 30rpx;
				text-align: center;
				.tag-shop{
					display: flex;
					justify-content: space-around;
				}
			}
			.bottom-price{
				display: inline-block;
				color: #DC2828;
				height: 80rpx;
				width: 250rpx;
				line-height: 100rpx;
			}
		}
		.buy-shop{
			height: 100%;
			width: 250rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>