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

style: 修复空格问题并优化页面样式 

修复了 `uv-grid-item` 标签与 `@click` 事件之间的空格问题，并优化了页面样式，包括调整布局、添加阴影效果和动画，提升用户体验。
master
前端-胡立永 1 month ago
parent
5fdb3d1a9d
commit
f2424a41d4
2 changed files with 452 additions and 362 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +2
    -2
      pages/index/center.vue
  2. +450
    -360
      pages/index/index.vue

+ 2
- 2
pages/index/center.vue View File

@ -93,12 +93,12 @@
<text class="grid-text">邀请好友</text>
</uv-grid-item>
<uv-grid-item@click="$utils.navigateTo('/pages_order/center/systemSet')">
<uv-grid-item @click="$utils.navigateTo('/pages_order/center/systemSet')">
<image class="image" src="/static/image/center/6.png" mode=""></image>
<text class="grid-text">系统设置</text>
</uv-grid-item>
<uv-grid-item@click="$utils.navigateTo('/pages_order/center/help')">
<uv-grid-item @click="$utils.navigateTo('/pages_order/center/help')">
<image class="image" src="/static/image/center/7.png" mode=""></image>
<text class="grid-text">帮助与反馈</text>
</uv-grid-item>


+ 450
- 360
pages/index/index.vue View File

@ -1,368 +1,458 @@
<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>
<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="quick-order-container" @click="toUrl">
<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
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'
})
},
}
}
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: {
},
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;
}
}
.red-top {
position: relative;
height: 420rpx;
background: linear-gradient(to bottom, $uni-color, #f05a45);
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;
display: flex;
align-items: center;
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%;
:deep(.uv-search__content) {
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.1);
}
}
}
}
.image-home {
z-index: 1;
height: 350rpx;
margin: 0 20rpx;
margin-top: -90rpx;
border-radius: 20rpx;
overflow: hidden;
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.1);
}
.building-class {
height: 220rpx;
display: flex;
justify-content: space-around;
align-items: center;
/* 垂直居中 */
background-color: $uni-bg-color;
margin: 20rpx 0;
border-radius: 20rpx;
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
image {
margin-left: 20rpx;
margin-right: 20rpx;
margin-bottom: 10rpx;
width: 100rpx;
height: 100rpx;
display: inline-block;
transition: transform 0.3s;
&:hover {
transform: scale(1.05);
}
}
:deep(.grid-text) {
font-size: 26rpx;
font-weight: 500;
color: #333;
}
}
.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: 80rpx;
background-color: $uni-bg-color;
display: flex;
align-items: center;
padding-left: 40rpx;
font-size: 35rpx;
font-weight: 600;
color: #333;
position: relative;
&::after {
content: '';
position: absolute;
left: 40rpx;
bottom: 15rpx;
width: 60rpx;
height: 6rpx;
background-color: $uni-color;
border-radius: 3rpx;
}
}
.quick-order-container {
position: fixed;
right: 30rpx;
top: 40vh;
z-index: 99;
transition: transform 0.3s;
&:active {
transform: scale(0.95);
}
}
.new-message {
position: absolute;
top: 50rpx;
right: 100%;
white-space: nowrap;
background-color: #DC2828;
border-radius: 20rpx;
font-size: 25rpx;
color: $uni-bg-color;
padding: 5rpx 15rpx;
margin-bottom: 10rpx;
box-shadow: 0 5rpx 10rpx rgba(220, 40, 40, 0.3);
animation: pulse 2s infinite;
}
.quick-order {
position: relative;
width: 230rpx;
height: 160rpx;
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;
box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
transition: transform 0.3s, box-shadow 0.3s;
&:active {
transform: translateY(2rpx);
box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}
// /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: 30rpx;
margin-top: 20rpx;
text-align: center;
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
.tag-shop {
display: flex;
justify-content: space-around;
margin-top: 10rpx;
}
.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;
:deep(.uv-button) {
transition: transform 0.2s;
&:active {
transform: scale(0.95);
}
}
}
}
@keyframes pulse {
0% {
transform: scale(1);
}
50% {
transform: scale(1.05);
}
100% {
transform: scale(1);
}
}
}
</style>

Write Preview
Loading…
Cancel
Save