|
|
|
@ -1,7 +1,77 @@ |
|
|
|
<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"/> |
|
|
|
@ -18,9 +88,22 @@ |
|
|
|
}, |
|
|
|
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: { |
|
|
|
} |
|
|
|
@ -28,215 +111,210 @@ |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.search { |
|
|
|
height: 82rpx; |
|
|
|
width: 710rpx; |
|
|
|
background: #FFFFFF; |
|
|
|
margin: 20rpx auto; |
|
|
|
border-radius: 41rpx; |
|
|
|
box-sizing: border-box; |
|
|
|
padding: 0 15rpx; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
// justify-content: space-between; |
|
|
|
|
|
|
|
.left-area, |
|
|
|
.center-area { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
} |
|
|
|
|
|
|
|
.left-area { |
|
|
|
max-width: 160rpx; |
|
|
|
|
|
|
|
image { |
|
|
|
flex-shrink: 0; |
|
|
|
width: 26rpx; |
|
|
|
height: 26rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.area { |
|
|
|
font-size: 24rpx; |
|
|
|
display: -webkit-box; |
|
|
|
-webkit-line-clamp: 2; |
|
|
|
/* 限制显示两行 */ |
|
|
|
-webkit-box-orient: vertical; |
|
|
|
overflow: hidden; |
|
|
|
text-overflow: ellipsis; |
|
|
|
color: #292929; |
|
|
|
.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; |
|
|
|
} |
|
|
|
|
|
|
|
.parting-line { |
|
|
|
flex-shrink: 0; |
|
|
|
font-size: 26rpx; |
|
|
|
color: #ccc; |
|
|
|
margin: 0rpx 5rpx; |
|
|
|
.title-left{ |
|
|
|
display: inline-block; |
|
|
|
margin-left: 30rpx; |
|
|
|
font-size: 22rpx; |
|
|
|
color: $uni-bg-color; |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.center-area { |
|
|
|
display: flex; |
|
|
|
flex-wrap: nowrap; |
|
|
|
align-items: center; |
|
|
|
width: calc(100% - 290rpx); |
|
|
|
margin-left: 30rpx; |
|
|
|
image { |
|
|
|
width: 26rpx; |
|
|
|
height: 26rpx; |
|
|
|
} |
|
|
|
|
|
|
|
.van-field { |
|
|
|
background-color: transparent; |
|
|
|
box-sizing: border-box; |
|
|
|
height: 82rpx; |
|
|
|
line-height: 82rpx; |
|
|
|
width: calc(100% - 30rpx); |
|
|
|
padding: 0rpx 10rpx 0rpx 0rpx; |
|
|
|
|
|
|
|
input { |
|
|
|
height: 82rpx; |
|
|
|
font-size: 60rpx; |
|
|
|
.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; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.right-area { |
|
|
|
.search-button { |
|
|
|
background: #60BDA2; |
|
|
|
height: 60rpx; |
|
|
|
width: 130rpx; |
|
|
|
font-size: 26rpx; |
|
|
|
border-radius: 35rpx; |
|
|
|
color: white; |
|
|
|
|
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
.search{ |
|
|
|
display: inline-block; |
|
|
|
position: absolute; |
|
|
|
top: 8px; |
|
|
|
left: 26%; |
|
|
|
width: 70%; |
|
|
|
} |
|
|
|
|
|
|
|
} |
|
|
|
} |
|
|
|
.swipe{ |
|
|
|
overflow: hidden; |
|
|
|
border-radius: 20rpx; |
|
|
|
margin: 20rpx; |
|
|
|
.image-home{ |
|
|
|
z-index: 1; |
|
|
|
height: 350rpx; |
|
|
|
width: 100%; |
|
|
|
image{ |
|
|
|
width: 95%; |
|
|
|
height: 100%; |
|
|
|
margin:auto; |
|
|
|
display: block; |
|
|
|
margin-top: -100rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.page{ |
|
|
|
& /deep/ .uv-icon__icon{ |
|
|
|
font-size: 30rpx !important; |
|
|
|
.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; |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
// 水洗店 |
|
|
|
.userShop{ |
|
|
|
.list{ |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
.item{ |
|
|
|
display: flex; |
|
|
|
justify-content: center; |
|
|
|
align-items: center; |
|
|
|
width: 330rpx; |
|
|
|
margin: 20rpx; |
|
|
|
padding: 30rpx 0; |
|
|
|
color: #FFFFFF; |
|
|
|
line-height: 50rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
font-size: 28rpx; |
|
|
|
.num{ |
|
|
|
font-size: 38rpx; |
|
|
|
font-weight: 900; |
|
|
|
} |
|
|
|
image{ |
|
|
|
width: 110rpx; |
|
|
|
height: 110rpx; |
|
|
|
margin-left: 20rpx; |
|
|
|
} |
|
|
|
&:nth-child(1){ |
|
|
|
background: #F07A77; |
|
|
|
} |
|
|
|
&:nth-child(2){ |
|
|
|
background: #F48B4E; |
|
|
|
} |
|
|
|
&:nth-child(3){ |
|
|
|
background: #6487E1; |
|
|
|
} |
|
|
|
&:nth-child(4){ |
|
|
|
background: #61B7E6; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.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; |
|
|
|
} |
|
|
|
// 酒店 |
|
|
|
.user{ |
|
|
|
padding: 20rpx; |
|
|
|
.shop{ |
|
|
|
position: relative; |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
background-color: #fff; |
|
|
|
margin-top: 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; |
|
|
|
padding: 20rpx; |
|
|
|
overflow: hidden; |
|
|
|
.image{ |
|
|
|
width: 180rpx; |
|
|
|
height: 180rpx; |
|
|
|
margin-right: 20rpx; |
|
|
|
border-radius: 20rpx; |
|
|
|
} |
|
|
|
.shopInfo{ |
|
|
|
font-size: 22rpx; |
|
|
|
.title{ |
|
|
|
font-size: 30rpx; |
|
|
|
} |
|
|
|
.tags{ |
|
|
|
display: flex; |
|
|
|
.tag{ |
|
|
|
padding: 4rpx 6rpx; |
|
|
|
border: 1rpx solid #FFAC6E; |
|
|
|
color: #FFAC6E; |
|
|
|
margin-right: 10rpx; |
|
|
|
margin-top: 10rpx; |
|
|
|
font-size: 18rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.time{ |
|
|
|
margin-top: 10rpx; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
.address{ |
|
|
|
margin-top: 10rpx; |
|
|
|
display: flex; |
|
|
|
} |
|
|
|
} |
|
|
|
.btns{ |
|
|
|
margin-left: auto; |
|
|
|
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; |
|
|
|
align-items: center; |
|
|
|
justify-content: center; |
|
|
|
.btn{ |
|
|
|
background-color: $uni-color; |
|
|
|
color: #fff; |
|
|
|
box-shadow: 0 0 5rpx 5rpx #FFAC6E; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
flex-shrink: 0; |
|
|
|
border-radius: 35rpx; |
|
|
|
} |
|
|
|
} |
|
|
|
.tips{ |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
right: 0; |
|
|
|
font-size: 24rpx; |
|
|
|
color: #FFAC6E; |
|
|
|
background-color: #FEF5EE; |
|
|
|
padding: 10rpx 20rpx; |
|
|
|
border-radius: 10rpx; |
|
|
|
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> |
swt
4 months ago
