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">
			<uv-swiper 
				class="uv-swaip"
				height="350rpx"
				:list="list" 
				circular 
				bgColor="#ffffff">
			</uv-swiper>
		</view>
		
		<view class="building-class">
			<view style="width: 710rpx;">
				<uv-grid :col="4" :border="false">
					<uv-grid-item>
						<image class="image" src="../../static/image/home/3.png" mode=""></image>
						<text class="grid-text">XX建材</text>
					</uv-grid-item>
			
					<uv-grid-item>
						<image class="image" src="../../static/image/home/4.png" mode=""></image>
						<text class="grid-text">XX建材</text>
					</uv-grid-item>
			
					<uv-grid-item >
						<image class="image" src="../../static/image/home/5.png" mode=""></image>
						<text class="grid-text">XX建材</text>
					</uv-grid-item>
			
					<uv-grid-item>
						<image class="image" src="../../static/image/home/6.png" mode=""></image>
						<text class="grid-text">XX建材</text>
					</uv-grid-item>
				</uv-grid>
			</view>
		</view>
		<view class="hot-building">
			<text>热卖建材</text>
		</view>
		
		<view class="hot-building"
		@click="toUrl"
		style="position: fixed;right: 30rpx;
		top: 40vh;z-index: 99;">
			<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"
		v-for="(item, index) in 20"
		@click="toGoodInfo(item,index)"
		:key="index">
			<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: 40rpx; ">￥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:'',
				list: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
					
				]
			}
		},
		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: {
			toUrl(){
				uni.navigateTo({
					url: '/pages_order/order/fastCreateOrder'
				})
				// this.$utils.navigateTo('/pages_order/mine/address')
			},
			toGoodInfo(item,index){
				// uni.navigateTo({
					// url: `/pages_order/order/product/productDetail?id=`+item.id
				// })
				uni.navigateTo({
					url: '/pages_order/product/productDetail'
				})
			},
		}
	}
</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: 40rpx;
					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: 130rpx;
				}
			}
			.search{
				display: inline-block;
				position: absolute;
				top: 16rpx;
				left: 26%;
				width: 70%;
			}
			
		}
	}
	.image-home{
		z-index: 1;
		height: 350rpx;
		margin: 0 20rpx;
		margin-top: -90rpx;
		border-radius: 10rpx;
		overflow: hidden;                                              
	}
	.building-class{
		height: 220rpx;
		display: flex;
		justify-content: space-around;
		align-items: center; /* 垂直居中 */
		background-color: $uni-bg-color;
		image{
			margin-left: 20rpx;
			margin-right: 20rpx;
			margin-bottom: 10rpx;
			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: 25rpx;
		height: 0rpx;
		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;
		margin-top: 500rpx;
	}
	.quick-order{
		position: relative;
		width: 230rpx;
		height: 160rpx;		
		margin-right: -50rpx;
		margin-top: 500rpx;
		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;
		// /deep/
		.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>