hly
/
building-materials-shop-uniapp-241014
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

上传首页代码优化

master
swt 1 year ago
parent
1b22c8aba8
commit
1c2a74359a
2 changed files with 106 additions and 52 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +5
    -1
      pages.json
  2. +101
    -51
      pages/index/index.vue

+ 5
- 1
pages.json View File

@ -2,7 +2,8 @@
"pages": [{
"path": "pages/index/index",
"style": {
"navigationBarTitleText": ""
"navigationBarTitleText": "",
"navigationBarTextStyle": "white"
}
},
{
@ -67,6 +68,9 @@
},
{
"path": "mine/help"
},
{
"path": "order/fastCreateOrder"
}
]
}],


+ 101
- 51
pages/index/index.vue View File

@ -25,11 +25,18 @@
</view>
<view class="image-home">
<image src="../../static/image/home/2.png" mode=""></image>
<uv-swiper
class="uv-swaip"
height="350rpx"
:list="list"
circular
bgColor="#ffffff">
</uv-swiper>
<!-- <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/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>
@ -37,11 +44,41 @@
<view class="text-building">
<text>XX建材</text>
<text>XX建材</text>
<text>XX建材</text>
<text>XX建材</text>
<text>XX建材</text> -->
<view class="line grid">
<uv-grid :col="4" :border="false">
<uv-grid-item @click="contactUs">
<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 @click="$utils.redirectTo('/index/cart')">
<image class="image" src="../../static/image/home/5.png" mode=""></image>
<text class="grid-text">XX建材</text>
</uv-grid-item>
<uv-grid-item
@click="$utils.navigateTo('/pages_order/auth/loginAndRegisterAndForgetPassword?index='+2)">
<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>
@ -52,7 +89,9 @@
<image src="../../static/image/home/7.png" mode=""></image>
</view>
</view>
<view class="shop-list">
<view class="shop-list"
v-for="(item, index) in 20"
:key="index">
<view class="picture-shop">
<image src="../../static/image/home/8.png" mode=""></image>
</view>
@ -65,7 +104,7 @@
</view>
</view>
<view class="bottom-price">
<text style="font-size: 45rpx; ">￥38</text>.00元/米
<text style="font-size: 40rpx; ">￥38</text>.00元/米
</view>
</view>
<view class="buy-shop">
@ -88,7 +127,13 @@
},
data() {
return {
keyword:''
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 : {
@ -106,6 +151,12 @@
}
},
methods: {
toUrl(){
uni.navigateTo({
url: '/pages_order/order/fastCreateOrder'
})
// this.$utils.navigateTo('/pages_order/mine/address')
}
}
}
</script>
@ -154,7 +205,7 @@
height: 20rpx;
width: 15rpx;
line-height: 20rpx;
left: 20px;
left: 40rpx;
top: 42rpx;
}
.eare{
@ -175,13 +226,13 @@
margin-top: 5rpx;
position: absolute;
top: 42rpx;
left: 65px;
left: 130rpx;
}
}
.search{
display: inline-block;
position: absolute;
top: 8px;
top: 16rpx;
left: 26%;
width: 70%;
}
@ -191,17 +242,13 @@
.image-home{
z-index: 1;
height: 350rpx;
width: 100%;
image{
width: 95%;
height: 100%;
margin:auto;
display: block;
margin-top: -100rpx;
}
margin: 0 20rpx;
margin-top: -90rpx;
border-radius: 10rpx;
overflow: hidden;
}
.building-class{
height: 150rpx;
height: 220rpx;
display: flex;
justify-content: space-around;
align-items: center; /* 垂直居中 */
@ -209,7 +256,7 @@
image{
margin-left: 20rpx;
margin-right: 20rpx;
margin-bottom: -30rpx;
margin-bottom: 10rpx;
width: 100rpx;
height: 100rpx;
display: inline-block;
@ -228,45 +275,46 @@
// overflow: hidden;
}
.hot-building{
margin-top: 50rpx;
height: 100rpx;
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{
}
.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;
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;
}
color: #ffffff;
top: 10rpx;
left: 25rpx;
}
}
.shop-list{
@ -276,6 +324,7 @@
margin: 30rpx auto;
background-color: #ffffff;
border-radius: 20rpx;
// /deep/
.picture-shop{
width: 240rpx;
height: 100%;
@ -316,5 +365,6 @@
justify-content: center;
align-items: center;
}
}
</style>

Write Preview
Loading…
Cancel
Save