fix: 优化搜索栏和筛选栏的布局，修复ui样式问题
This commit is contained in:
davy
parent
3081fcde2e
commit
d53c847ff7
@ -1,3 +1,12 @@
|
||||
/**
|
||||
* @description 横向滚动的啤酒列表组件
|
||||
* @author [作者名]
|
||||
* @usage 用于展示横向滚动的啤酒列表，支持点击跳转到酒评详情
|
||||
* @props beers: Array - 啤酒列表数据，包含啤酒的详细信息
|
||||
* @events 无
|
||||
* @example
|
||||
* <rowBeer :beers="beerList" />
|
||||
*/
|
||||
<template>
|
||||
<scroll-view scroll-x="true" class="scroll-container">
|
||||
<view v-for="(it, index) in beers" :key="index" style="display: inline-block;" class="row-box" @click="toReview(it)">
|
||||
@ -43,18 +52,23 @@
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
// 1. 横向滚动容器样式
|
||||
.scroll-container {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
white-space: nowrap;
|
||||
min-height: 505rpx;
|
||||
display: flex; // 弹性布局
|
||||
flex-direction: row;// 水平方向排列
|
||||
white-space: nowrap; // 内容不换行
|
||||
min-height: 505rpx;// 最小高度505rpx
|
||||
// padding-bottom: 10rpx;
|
||||
margin-bottom: 32rpx;
|
||||
// margin-bottom: 24rpx;// 底部外边距32rpx
|
||||
|
||||
// 2. 每个啤酒盒子的样式
|
||||
.row-box {
|
||||
&:nth-child(1) {
|
||||
margin-left: 32rpx;
|
||||
margin-left: 32rpx; // 第一个啤酒盒子左边外边距32rpx
|
||||
}
|
||||
}
|
||||
|
||||
// 3. 啤酒卡片基础样式
|
||||
.beer-box {
|
||||
width: 208rpx;
|
||||
background: #FFFFFF;
|
||||
@ -63,35 +77,46 @@
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: flex-start;
|
||||
justify-content: flex-start;// 顶部对齐
|
||||
|
||||
// 4. 啤酒封面图样式
|
||||
|
||||
.cover {
|
||||
width: 208rpx;
|
||||
height: 300rpx;
|
||||
border-radius: 12rpx;
|
||||
margin-bottom: 18rpx;
|
||||
margin-bottom: 16rpx;
|
||||
// margin-top: 16rpx;
|
||||
}
|
||||
|
||||
// 5. 啤酒名称样式
|
||||
.title {
|
||||
font-size: 28rpx;
|
||||
color: #1E2019;
|
||||
font-weight: 600;
|
||||
line-height: 40rpx;
|
||||
color: #030303;
|
||||
margin-bottom: 12rpx;
|
||||
color: #19191B;
|
||||
min-height: 88rpx;
|
||||
line-height: 1.4;
|
||||
white-space: normal;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 2;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
// 6. 啤酒描述样式
|
||||
.desc {
|
||||
font-size: 24rpx;
|
||||
color: #A5A7B9;
|
||||
color: #606060;
|
||||
margin-bottom: 12rpx;
|
||||
color: #979797;
|
||||
color: #606060;
|
||||
}
|
||||
|
||||
// 7. 评分样式
|
||||
.num {
|
||||
|
||||
font-size: 20rpx;
|
||||
color: #5F5F63;
|
||||
font-size: 24rpx;
|
||||
color: #FFCC00;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
/>
|
||||
</view>
|
||||
|
||||
<!-- 内容容器 -->
|
||||
<!-- 筛选栏 -->
|
||||
<view class="content-container" style="margin-top: 120rpx;">
|
||||
<view class="bg-white" :style="{ borderRadius: '30rpx 30rpx 12rpx 12rpx' }">
|
||||
<view class="bg-white filter-bar" :style="{ borderRadius: '30rpx 30rpx 12rpx 12rpx' }">
|
||||
<view class="choose-center bg-white">
|
||||
<view class="flex align-center choose-navs">
|
||||
<view class="" v-for="item in tabList" style="text-align: center;">
|
||||
@ -60,15 +60,8 @@
|
||||
data() {
|
||||
return {
|
||||
statusBaeHeight: 0,
|
||||
curTag: 0,
|
||||
ADList: [], // 广告弹窗
|
||||
bannerJoin: null, // 入驻banner
|
||||
showJoinImg: false, // 是否显示入驻图片
|
||||
userInfo: null,
|
||||
featurePageList: [], // 专辑页列表
|
||||
homeBanner: [], //首页banner
|
||||
bgcolor:'#19367A',
|
||||
owPopup: false,
|
||||
featurePageList: [],
|
||||
bgcolor: '#19367A',
|
||||
tabList:[
|
||||
{
|
||||
label:'为您推荐',
|
||||
@ -88,7 +81,6 @@
|
||||
},
|
||||
],
|
||||
actives:'1',
|
||||
|
||||
};
|
||||
},
|
||||
onLoad() {
|
||||
@ -101,22 +93,10 @@
|
||||
},
|
||||
onShow() {
|
||||
this.actives = '1'
|
||||
// this.userInfo = uni.getStorageSync('userInfo')
|
||||
// if (this.userInfo == null || this.userInfo.userType == '09') { // 没登录或者没入驻
|
||||
// this.showJoinImg = true
|
||||
// }else {
|
||||
// this.showJoinImg = false
|
||||
// }
|
||||
this.getFeaturePageListFun() // 专辑页列表
|
||||
},
|
||||
// onPullDownRefresh(){
|
||||
// this.getFeaturePageListFun() // 专辑页列表
|
||||
// },
|
||||
|
||||
methods: {
|
||||
handleUpdateHeight(height) {
|
||||
this.contentMarginTop = height; // 动态更新 margin-top
|
||||
},
|
||||
changeNavs(ind){
|
||||
this.actives = ind
|
||||
if(ind == 2) {
|
||||
@ -130,24 +110,16 @@
|
||||
})
|
||||
}else if(ind == 4){
|
||||
//pages/activityList/hotLabel
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/index/newBeer'
|
||||
// })
|
||||
uni.navigateTo({
|
||||
url: '/pagesActivity/newWine'
|
||||
url: '/pages/index/newBeer'
|
||||
})
|
||||
// uni.navigateTo({
|
||||
// url: '/pagesActivity/newWine'
|
||||
// })
|
||||
// uni.navigateTo({
|
||||
// url: '/pages/activityList/details'
|
||||
// })
|
||||
}
|
||||
},
|
||||
handleClose() {
|
||||
|
||||
},
|
||||
toAddAiad() {
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/addAiad'
|
||||
})
|
||||
},
|
||||
// 搜索
|
||||
toSearch() {
|
||||
@ -155,9 +127,6 @@
|
||||
url: '/pages/index/searchBeer'
|
||||
})
|
||||
},
|
||||
changeTag(index) {
|
||||
this.curTag = index
|
||||
},
|
||||
// 查询广告弹窗 banner列表
|
||||
getBannerListFun() {
|
||||
this.ADList = []
|
||||
@ -226,50 +195,13 @@
|
||||
url: "/pages/index/review?beerId=" + it.id
|
||||
})
|
||||
},
|
||||
toGo(key) {
|
||||
switch (key) {
|
||||
case 1: // 新酒上市
|
||||
uni.navigateTo({
|
||||
url: "/pages/index/newBeer"
|
||||
})
|
||||
break;
|
||||
case 2: // 生成酒单
|
||||
if (!uni.getStorageSync('token')) {
|
||||
this.$refs.loginRef.open()
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pagesActivity/winelist"
|
||||
})
|
||||
break;
|
||||
case 3: //酒币换购
|
||||
|
||||
if (!uni.getStorageSync('token')) {
|
||||
this.$refs.loginRef.open()
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: "/pagesCoin/beerCoin"
|
||||
})
|
||||
break;
|
||||
case 4: // 关注酒厂
|
||||
if (!uni.getStorageSync('token')) {
|
||||
this.$refs.loginRef.open()
|
||||
return
|
||||
}
|
||||
uni.navigateTo({
|
||||
url: '/pagesMy/myAttention'
|
||||
})
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background: #FFFFFF;
|
||||
background: #F9F9F9;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
@ -278,8 +210,9 @@
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 1000;
|
||||
z-index: 1001; /* 提高导航栏层级 */
|
||||
background-color: #19367A;
|
||||
border-radius: 0 0 24rpx 24rpx;
|
||||
|
||||
/* 保持搜索栏原有圆角 */
|
||||
:deep(.search-container) {
|
||||
@ -288,22 +221,34 @@
|
||||
}
|
||||
|
||||
.content-container {
|
||||
padding-top: 20rpx; /* 与搜索栏间距 */
|
||||
padding-top: 0rpx;
|
||||
}
|
||||
|
||||
/* 筛选导航栏 */
|
||||
.filter-bar {
|
||||
position: sticky;
|
||||
top:80rpx;
|
||||
z-index: 1000;
|
||||
background: #FFFFFF;
|
||||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||
margin-top: -40rpx;
|
||||
padding-top: 40rpx;
|
||||
}
|
||||
|
||||
/* 原有样式保持不变 */
|
||||
.choose-center {
|
||||
height: 112rpx;
|
||||
width: 100%;
|
||||
padding: 24rpx;
|
||||
box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1);
|
||||
background: #FFFFFF;
|
||||
|
||||
.choose-navs {
|
||||
// 导航选项的样式
|
||||
font-family: Roboto;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
|
||||
.choose-navs-txt {
|
||||
// 导航选项文本的样式
|
||||
width: 144rpx;
|
||||
height: 64rpx;
|
||||
line-height: 64rpx;
|
||||
@ -311,6 +256,7 @@
|
||||
background: #F9F9F9;
|
||||
margin-right: 16rpx;
|
||||
&.actives {
|
||||
// 选中状态的样式
|
||||
color: #FFF;
|
||||
background: #D42E78;
|
||||
}
|
||||
@ -320,18 +266,35 @@
|
||||
|
||||
.title-box {
|
||||
padding: 24rpx 32rpx;
|
||||
margin-bottom: 28rpx;
|
||||
|
||||
// margin-bottom: 24rpx;
|
||||
// margin-top: 24rpx;
|
||||
.title {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #1E2019;
|
||||
color: #030303;
|
||||
font-weight: 600;
|
||||
line-height: 48rpx;
|
||||
letter-spacing: normal;
|
||||
margin-bottom: 8rpx;
|
||||
max-width: 500rpx;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.sub {
|
||||
font-size: 20rpx;
|
||||
color: #9D9D9D;
|
||||
margin-top: 18rpx;
|
||||
font-family: Roboto;
|
||||
font-size: 24rpx;
|
||||
font-weight: normal;
|
||||
line-height: 32rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
letter-spacing: normal;
|
||||
color: #606060;
|
||||
margin-bottom: 8rpx;
|
||||
max-width: 500rpx;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -355,7 +355,7 @@
|
||||
}
|
||||
|
||||
.page {
|
||||
// background: #FDFDFD;
|
||||
background: #F9F9F9;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
font-family: Roboto;
|
||||
@ -367,12 +367,13 @@
|
||||
border-radius: 24rpx;
|
||||
width: 700rpx;
|
||||
height: 80rpx;
|
||||
background-color: rgba(243, 243, 243, 0.8);
|
||||
background-color: #F9F9F9;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 32rpx 0;
|
||||
margin: 26rpx auto;
|
||||
box-sizing: border-box;
|
||||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.search-input {
|
||||
flex: 1;
|
||||
@ -389,6 +390,7 @@
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
.list-container {
|
||||
@ -534,9 +536,10 @@
|
||||
.img-box {
|
||||
width: 146rpx;
|
||||
height: 146rpx;
|
||||
background: #F2F2F2;
|
||||
background: #F9F9F9;
|
||||
border-radius: 50%;
|
||||
margin-bottom: 18rpx;
|
||||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -635,8 +638,8 @@
|
||||
}
|
||||
|
||||
.more-btn {
|
||||
font-size: 32rpx;
|
||||
font-weight: 400;
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
letter-spacing: 2rpx;
|
||||
color: #FFFFFF;
|
||||
}
|
||||
@ -645,4 +648,26 @@
|
||||
padding: 0 34rpx 0 20rpx;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
}
|
||||
|
||||
.bg-white {
|
||||
background: #FFFFFF;
|
||||
// box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.activity-item {
|
||||
background: #FFFFFF;
|
||||
border-radius: 12rpx;
|
||||
padding: 24rpx;
|
||||
margin-bottom: 24rpx;
|
||||
box-shadow: 0rpx 1rpx 3rpx 0rpx rgba(0, 0, 0, 0.1);
|
||||
|
||||
.left {
|
||||
width: 140rpx;
|
||||
margin-right: 24rpx;
|
||||
}
|
||||
|
||||
.right {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
x
Reference in New Issue
Block a user