模板代码
<template>
<view class="pages">
<u-sticky>
<view class="bgx">
<u-navbar leftIconColor="#fff" titleStyle="color:#26292C" bgColor="rgba(0,0,0,0)" :placeholder="true"
title=" " :autoBack="true">
</u-navbar>
</view>
</u-sticky>
<div class="info">
<div class="infoT">
<div class="infoTl">
<text>肯德基宅急送（龙湖常营天街）</text>
</div>
<div class="infoTr">
<image src="https://images.wanjunshijie.com/mini/yujian/static/mscdetail/tx.png" mode=""></image>
</div>
</div>
<div class="onSale">
<text>月售3422</text>
<div class="score">
<u-icon name="star-fill" color="#f35749" size="14"></u-icon>
<text>9.5</text>
</div>
</div>
<div class="announcement">
<div class="announcementDetail">
公告：公告公告公告公告公告公告公告公告公告公告公告公告公告
</div>
</div>
<div class="tabs">
<tabLine :list="tablist" :active.sync="active"></tabLine>
</div>
<div class="menu" :style="{ height: windowHeight + 'px'}">
<scroll-view :style="{ height: windowHeight + 'px'}" scroll-y="true" class="menuL">
<div class="list">
<div class="item" @click="activeMenu=item.id" :class="{active:activeMenu==item.id}"
v-for="(item,index) in list" :key="index">
<text>{{item.title}}</text>
</div>
</div>
</scroll-view>
<scroll-view :style="{ height: windowHeight + 'px'}" scroll-y="true" class="menuR">
<div class="rightList">
<div class="rightItem" @click="activeMenu=item.id" :class="{active:activeMenu==item.id}"
v-for="(item,index) in list" :key="index">
<image src="https://images.wanjunshijie.com/mini/yujian/static/mscdetail/xiangqing1.png"
class="fm"></image>
<div class="rightItemr">
<div class="rightItemrTitle">正大单冻鸡琵琶腿1kg</div>
<div class="rightItemrDesc">
<text class="x1">月售3422</text>
<text class="x2">好评度92%</text>
</div>
<div class="prices">
<div class="pricesl">
<text class="RMB">¥</text>
<text class="price">78.6</text>
<div class="unit">¥96</div>
</div>
<div class="pricesr">
购买
</div>
</div>
</div>
</div>
</div>
</scroll-view>
</div>
</div>
</view>
</template>
<script>
import tabLine from '@/components/tab/tabLineDetail.vue'
export default {
components: {
tabLine
},
data() {
return {
currentNum: 0,
value: 0,
active: 0,
windowHeight: 0,
activeMenu: 0,
list: [{
title: '单人套餐',
id: 0
}, {
title: '双人套餐',
id: 1
}, {
title: '主食类',
id: 2
}, {
title: '特色小菜',
id: 3
}, {
title: '叶菜类',
id: 4
}, {
title: '茎菜类',
id: 5
}, {
title: '菌菇类',
id: 6
}, {
title: '酒水饮料',
id: 7
}, {
title: '熟食预制菜',
id: 8
}, {
title: '方便速食',
id: 10
}, {
title: '方便速食',
id: 11
}, {
title: '方便速食',
id: 12
}, ],
tablist: [{
name: '点菜',
num: '',
id: 0
}, {
name: '评价',
num: '3224',
id: 1
}, {
name: '资质',
num: '',
id: 2
}],
}
},
props: {
name: {
type: String,
default () {
return '';
}
}
},
mounted() {
var that = this;
uni.getSystemInfo({
success: function(res) {
that.windowHeight = res.windowHeight - res.statusBarHeight - 255
}
})
},
onShow() {
},
methods: {
godetail() {
uni.navigateTo({
url: '/pages/deli/detail'
})
}
}
}
</script>
<style lang="scss">
page {
background: #f9f9f9;
}
</style>
<style scoped lang="scss">
.pages {
background: url(https://images.wanjunshijie.com/mini/yujian/static/mscdetail/mscdetail1.png) top center no-repeat;
background-size: 750rpx 300rpx;
}
.info {
width: 750rpx;
height: 328rpx;
margin-top: 80rpx;
background: #FFFFFF;
border-radius: 20rpx 20rpx 0rpx 0rpx;
.infoT {
margin-left: 30rpx;
margin-right: 30rpx;
display: flex;
justify-content: space-between;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.infoTl {
font-family: PingFangSC-Medium;
font-size: 40rpx;
color: #000000;
font-weight: 500;
width: 560rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
margin-top: 21rpx;
}
.infoTr {
margin-top: -40rpx;
image {
width: 140rpx;
height: 140rpx;
}
}
}
.onSale {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
margin-left: 30rpx;
font-family: PingFangSC-Regular;
font-size: 20rpx;
color: #686868;
font-weight: 400;
margin-top: -20rpx;
.score {
font-family: PingFangSC-Medium;
font-size: 20rpx;
color: #F35749;
font-weight: 500;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
margin-left: 14rpx;
text {
margin-left: 8rpx;
}
}
}
}
.announcement {
width: 689rpx;
height: 80rpx;
background: #F9F9F9;
border-radius: 20rpx;
margin: 0 auto;
margin-top: 27rpx;
.announcementDetail {
font-family: PingFangSC-Regular;
font-size: 20rpx;
color: #686868;
font-weight: 400;
padding-top: 27rpx;
padding-left: 23rpx;
}
}
.tabs {
margin-top: 10rpx;
}
.menu {
position: relative;
width: 100%;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.menuL {
width: 180rpx;
background: #FFFFFF;
height: 100%;
}
.menuR {
width: 570rpx;
height: 100%;
}
}
.list {
.item {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #000000;
text-align: center;
font-weight: 400;
width: 140rpx;
height: 44rpx;
margin: 30rpx auto;
}
.item.active {
width: 140rpx;
height: 44rpx;
background: #FF9349;
border-radius: 28rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-family: PingFangSC-Regular;
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
font-weight: 400;
}
}
.rightItem {
margin-left: 15rpx;
width: 525rpx;
height: 180rpx;
background: #FFFFFF;
border-radius: 20rpx;
margin-top: 10rpx;
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.fm {
width: 160rpx;
height: 160rpx;
margin-left: 10rpx;
margin-right: 20rpx;
}
}
.prices {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
margin-top: 40rpx;
width: 310rpx;
.pricesl {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
.RMB {
font-family: PingFangSC-Medium;
font-size: 24rpx;
color: #EF4034;
text-align: center;
font-weight: 500;
padding-top: 8rpx;
}
.price {
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #EF4034;
font-weight: 500;
}
.unit {
font-family: PingFangSC-Regular;
font-size: 18rpx;
color: #999999;
text-align: center;
font-weight: 400;
margin-left: 15rpx;
text-decoration: line-through;
}
}
.pricesr {
width: 100rpx;
height: 34rpx;
background-image: linear-gradient(179deg, #F87464 1%, #EF4034 100%);
border-radius: 9rpx;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
font-family: PingFangSC-Medium;
font-size: 20rpx;
color: #FFFFFF;
font-weight: 500;
}
}
.rightItemr {
width: 305rpx;
height: 160rpx;
.rightItemrTitle {
font-family: PingFangSC-Medium;
font-size: 26rpx;
color: #000000;
font-weight: 500;
}
.rightItemrDesc {
padding-top: 10rpx;
font-family: PingFangSC-Regular;
font-size: 18rpx;
color: #686868;
font-weight: 400;
text {
margin-right: 16rpx;
}
}
}
</style>
组件代码
/**
* @Author: 858834013@qq.com
* @Name: tabs
* @Date: 2022-05-23
* @Desc: tabs https://www.wanjunshijie.com/note/uniapp/3096.html
<tabLine :list="tablist" :active.sync="active"></tabLine>
*/
<template>
<div class="tabs">
<div class="tab cur" :class="{active:active==item.id}" @click="getactive(item.id)" v-for="(item,index) in list"
:key="index"><span>{{ item.name }}<text v-if="item.num">{{item.num}}</text></span>
<div class="line"></div>
</div>
</div>
</template>
<script>
export default {
name: "tabs",
props: {
list: {
type: Array,
default () {
return [];
}
},
active: {
type: Number,
default () {
return 0;
}
},
},
methods: {
getactive(e) {
this.$emit('update:active', e)
},
}
}
</script>
<style lang="scss" scoped>
.tabs {
display: flex;
justify-content: flex-start;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
height: 100rpx;
width: 690rpx;
margin: 0 auto;
.tab {
display: flex;
justify-content: center;
align-items: flex-start;
flex-wrap: nowrap;
flex-direction: column;
position: relative;
height: 90rpx;
margin-right: 60rpx;
margin-left: 0rpx;
span {
font-size: 28rpx;
color: #333333;
font-weight: 400;
text {
font-family: PingFangSC-Regular;
font-size: 18rpx;
color: #686868;
font-weight: 400;
}
}
.line {
background: rgba(54, 107, 229, 0);
position: absolute;
bottom: 1rpx;
width: 70rpx;
height: 6rpx;
}
}
.tab.active {
span {
font-family: PingFangSC-Medium;
font-size: 36rpx;
color: #333333;
font-weight: 500;
}
text {
font-family: PingFangSC-Regular;
font-size: 18rpx;
color: #333333;
font-weight: 400;
}
.line {
background: #EF4034;
}
}
}
</style>
