先看效果图
ticketpage组件引用后，根据父级背景颜色改变镂空的颜色,空组件只有中间镂空的样式，上面是插槽heaer,下面内容是插槽content，可以自定义自己的内容和样式。我实现的最终效果是用的uview组件，如果复现需要项目引入。可以替换中间的虚线为背景图等适合自己的样式
组件代码：
<template>
<view class="ticket-page">
<view class="header">
<slot name="header">header</slot>
</view>
<view class="line">
<view class="middle">
<view class="dashed"></view>
</view>
</view>
<view class="content">
<slot name="content">content</slot>
</view>
</view>
</template>
<script>
export default {
// import引入的组件需要注入到对象中才能使用
components: {},
mixins: [],
props: {
bgColor: {
default: '#F6F6F6',
},
},
data() {
// 这里存放数据
return {
dashed: '-',
};
},
// 挂载方法
mounted() {},
// 方法集合
methods: {},
// 监听属性 类似于data概念
computed: {},
// 监控data中的数据变化
watch: {},
// 生命周期 - 创建完成（可以访问当前this实例）
onLoad(options) {},
// 生命周期 - 页面展示（不可以访问DOM元素）
onShow() {},
// 生命周期 - 挂载完成（可以访问DOM元素）
onReady() {},
onHide() {}, // 生命周期 - 监听页面隐藏
// 生命周期 - 上拉加载更多
//onReachBottom() {
// if (this.hotelParasm.pageNum * this.hotelParasm.pageSize >= this.total) {
// this.loadStatus = 'nomore' return;
// if (this.isloading) return;
//if (this.isloading) return;
//此处判断，上锁，防止重复请求
// if (!this.isloading) {
// this.hotelParasm.pageNum += 1
// this.gethotelList();
// }
//},
// 生命周期 - 下拉刷新数据
//onPullDownRefresh() {
//},
onUnload() {}, // 生命周期 - 监听页面卸载
};
</script>
<style lang="scss" scoped>
.ticket-page {
width: 690rpx;
box-sizing: border-box;
.header {
min-height: 100rpx;
background-color: white;
border-radius: 15rpx 15rpx 0 0;
}
.line {
width: 690rpx;
display: flex;
justify-content: flex-start;
height: 30rpx;
align-items: center;
box-sizing: border-box;
background: radial-gradient(circle at 0 50%, transparent 0.4rem, #fff 0.45rem) top left,
radial-gradient(circle at 100% 50%, transparent 0.4rem, #fff 0.45rem) top right;
background-size: 51% 100%;
background-repeat: no-repeat;
padding-left: 15rpx;
padding-right: 15rpx;
.middle {
width: 660rpx;
display: flex;
justify-content: flex-start;
align-items: center;
box-sizing: border-box;
background-color: white;
overflow: hidden;
.dashed {
width: 100%;
border: 1rpx dashed #cdcdcd;
}
}
}
.content {
min-height: 100rpx;
background-color: white;
border-radius: 0 0 15rpx 15rpx;
}
}
</style>
组件使用：
<ticketpage>
<template slot="header">
<view class="header">
<view class="title">巫山小三峡·小小三峡景区</view>
<view class="date">
<text class="iconfont icon-rili"></text>
<text>2023-6-16至2023-7-16</text>
</view>
</view>
</template>
<template #content>
<view class="content">
<u-cell :border="false">
<view slot="title" class="cell-title">购买数量</view>
<u-number-box slot="right-icon" @change="handleBuyNum" :integer="true" v-model="buyNum" step="1" :min="0" :max="10">
<view slot="minus" class="minus">
<u-icon name="minus" size="12" color="#fff"></u-icon>
</view>
<text class="ipt" slot="input">{{ buyNum }}</text>
<view slot="plus" class="plus">
<u-icon name="plus" color="#fff" size="12"></u-icon>
</view>
</u-number-box>
</u-cell>
<view style="padding: 0 30rpx 30rpx; box-sizing: border-box">
<view class="prompt">可在使用范围日期内任选一天游玩</view>
<view class="prompt">
<text style="color: #ff6100">条件退款 | </text>
<text style="color: #ff6100; margin-right: 30rpx">无需换票</text>
<text style="color: #666666">购买须知 ></text>
</view>
</view>
</view>
</template>
</ticketpage>
<style lang="scss" scoped>
.buy-ticket {
width: 100%;
.home {
background-color: #f1f1f1;
padding: 30rpx;
box-sizing: border-box;
font-size: 24rpx;
.header {
padding: 30rpx;
box-sizing: border-box;
.title {
font-size: 32rpx;
font-weight: bold;
}
.date {
width: 100%;
background-color: #f7f8fa;
color: #666;
padding: 20rpx;
box-sizing: border-box;
margin-top: 20rpx;
}
}
.content {
box-sizing: border-box;
.ipt {
display: inline-block;
width: 40rpx;
height: 40rpx;
border-radius: 10rpx;
text-align: center;
font-weight: bold;
// background-color: #cdcdcd;
margin: 0 6rpx;
color: #333;
}
.cell-title {
font-size: 32rpx;
font-weight: bold;
}
.plus {
min-width: 40rpx;
height: 40rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4rpx;
background-color: $red;
border-radius: 6rpx;
}
.minus {
width: 40rpx;
height: 40rpx;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4rpx;
background-color: #cdcdcd;
border-radius: 10rpx;
}
.prompt {
height: 40rpx;
line-height: 40rpx;
color: #666666;
}
}
}
}
</style>
