education_mp/pagesA/user/favorites.vue

<template>
	<view>
		<view class="product_list" >
			<!-- Vue3 项目部分小程序端事件延迟或调用失败 在执行事件的元素上添加 data-eventsync="true" 属性以解决此问题 -->
			<view data-eventsync="true" class="product_item" v-for="(item,index) in 10" :key="index">
				<view class="product_left">
					<image class="product_image" src="" mode=""></image>
				</view>
				<view class="product_right">
					<view class="product_title">
						<view class="product_text">
							<text>少儿直播学习课堂，今日限购</text>
						</view>
						<view class="time">
							<text>距今日结束08：02：56</text>
						</view>
					</view>
					<view class="stock_price">
						<view class="product_price" >
							<span style="font-size: 26rpx;">￥</span><text >100 </text>
						</view>
						<view class="cancel_but"  @click="cancelPopup()">
							取消收藏
						</view>
						<view class="product_order_but">
							立即购买
						</view>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="cancelPopup">
			<view class="cancel_layout">
				<view class="cancel_title">
					取消收藏
				</view>
				<view class="cancel_text">
					是否确认取消收藏？取消后可能找不回来咯
				</view>
				<view class="cancel_btn">
					<view class="btn_1">
						在想想
					</view>
					<view class="btn_2">
						确认
					</view>
				</view>
			</view>
		</uni-popup>
		<view class="to_bottom" > -----到底啦-----</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			cancelPopup(){
				this.$refs.cancelPopup.open("center");
			}
		}
	}
</script>

<style lang="less">
		.product_list{
			width: 690rpx;
			display: block;
			overflow: hidden;
			 margin: 0rpx auto;
			.product_item{
				width: 690rpx;
				display: block;
				overflow: hidden;
				margin: 20rpx 0rpx;
				background-color: #FFFFFF;
				border-radius: 20rpx;
				.product_left{
					float: left;
					.product_image{
						margin: 20rpx 20rpx;
						width: 224rpx;
						height: 200rpx;
						border-radius: 20rpx;
						background-color: aqua;
					}
				}
				.product_right{
					float: left;
					width: 380rpx;
					margin: 20rpx 20rpx;
					.product_title{
						line-height: 1.5;
						.product_text{
							font-size: 30rpx;
							font-weight: 600;
						}
						.time{
							font-size: 24rpx;
						}
					}
					.stock_price{
						color: #dddddd;
						height: 100rpx;
						font-size: 20rpx;
						line-height: 30rpx;
						padding: 0rpx 10rpx;
						margin-top: 40rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.product_price{
							color: red;
							font-size: 50rpx;
							font-weight: 600;
							line-height: 100rpx;
						}
						.cancel_but{
							display: inline-flex;
							width: 150rpx;
							height: 64rpx;
							align-items: center;
							justify-content: center;
							margin: 0rpx 10rpx;
							border-radius: 40rpx;
							border: 2rpx solid #1fbe7e;
							color: #000000;
						}
						.product_order_but{
								display: inline-flex;
								width: 150rpx;
								height: 64rpx;
								font-size: 24rpx;
								background-color: #1fbe7e;
								border-radius: 40rpx;
								color: #FFFFFF;
								align-items: center;
								justify-content: center;
						}
					}
				}
			}
			.product_item:nth-child(even){
				margin-right: 0rpx;
			}
		}
		.cancel_layout{
			background-color: #FFFFFF;
			width: 690rpx;
			height: 30vh;
			border-radius: 40rpx;
			display: flex;
			flex-direction: column;
			overflow: hidden;
			.cancel_title{
				display: inline-flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx;
				margin: 30rpx;
				font-size: 40rpx;
				font-weight: bold;
				color: #000000;
			}
			.cancel_text{
				display: inline-flex;
				justify-content: center;
				align-items: center;
				margin: 30rpx auto;
				width: 576rpx;
				height: 50rpx;
				padding:30rpx;
			}
			.cancel_btn{
				border-top: 2rpx solid #d3d3d3;
				display: flex;
				justify-content: space-between;
				padding-top: 10rpx;
				height: 130rpx;
				.btn_1{
					display: inline-flex;
					justify-content: center;
					align-items: center;
					height: 100rpx;
					flex: 1;
					font-size: 30rpx;
					color: #51bf81;
				}
				.btn_2{
					display: inline-flex;
					justify-content: center;
					align-items: center;
					flex: 1;
					height: 100rpx;
					font-size: 30rpx;
				}
			}
		}
</style>