moxuan_takeaway_user/my/qinglv/index.vue

<template>
	<view class="content">
		<view class="backg3 flex" style="padding-top: 23rpx" v-if="isWoman" @click="clickMan">
			<view style="margin-left: 40rpx">
				<view style="color: #000000; font-size: 32rpx; font-weight: 500">女生专区</view>
				<image style="width: 48rpx; height: 9rpx; margin-left: 20rpx" src="https://mxys.chuanghai-tech.com/wmfile/20250811/5f75606616aa4c7f8c304368f8663a39.png"></image>
			</view>
			<view style="margin-left: 73rpx">男生专区</view>
		</view>
		<view class="backg3 flex" style="padding-top: 23rpx" v-else @click="clickMan">
			<view style="margin-left: 40rpx">女生专区</view>
			<view style="margin-left: 73rpx">
				<view style="color: #000000; font-size: 32rpx; font-weight: 500">男生专区</view>
				<image style="width: 48rpx; height: 9rpx; margin-left: 20rpx" src="https://mxys.chuanghai-tech.com/wmfile/20250811/5f75606616aa4c7f8c304368f8663a39.png"></image>
			</view>
		</view>
		<view @click="toXiang" v-for="(item, index) in 3" :key="index" :class="index == 0 ? 'backg1' : 'backg2'">
			<image style="width: 289rpx; height: 319rpx; margin: 31rpx 0 0 20rpx; background-color: #000"></image>
			<view style="margin: 31rpx 0 0 26rpx">
				<view style="font-size: 32rpx; color: #000000; font-weight: 500; margin-top: 7rpx">月度套餐</view>
				<view style="margin-top: 7rpx">每月14号配送定制蛋糕</view>
				<view class="lijia">例假关怀</view>
				<view class="q_time">
					<view style="line-height: 30px">时间</view>
					<view class="q_line"></view>
					<view style="width: 276rpx; margin-left: 13rpx">2025-07-28 12:00:00 —2025-12-31 23:59:59</view>
				</view>
				<view class="jiage">¥98.00</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isWoman: true //true是。false不是
		}
	},
	onLoad() {
		this.getData()
	},
	methods: {
		getData() {
			let data = {
				page: 1,
				limit: 6,
				suitSex: this.isWoman ? 2 : 1
			}
			this.$Request.getT('/app/lover-set/page', data).then((res) => {
				console.log(res, 966)
			})
		},
		//切换男女专区
		clickMan() {
			this.isWoman = !this.isWoman
			this.getData()
		},
		//跳转到详情页
		toXiang() {
			uni.navigateTo({
				url: '/my/qinglv/xiang'
			})
		}
	}
}
</script>

<style>
.content {
	width: 100%;
	height: 100%;
	background-color: #f2f2f2;
}
.backg3 {
	display: flex;
	width: 750rpx;
	height: 100%;
	background-color: #ffe9ca;
}
.backg1 {
	display: flex;
	width: 750rpx;
	height: 100%;
	margin-bottom: 20rpx;
	/* background-color: #FFE9CA; */
	background: linear-gradient(180deg, #ffe9ca 0%, #ffffff 28.17%, #ffffff 32.53%, #f2f3f5 100%);
}
.backg2 {
	display: flex;
	margin-top: 20rpx;
	width: 750rpx;
	height: 100%;
	background-color: #ffffff;
}
.lijia {
	margin-top: 7rpx;
	width: 125rpx;
	height: 51rpx;
	opacity: 1;
	border-radius: 73rpx;
	border: 1rpx solid #ff8d1a;
	font-size: 24rpx;
	line-height: 51rpx;
	color: rgba(255, 141, 26, 1);
	text-align: center;
}
.q_time {
	display: flex;
	margin-top: 15rpx;
}
.q_line {
	margin: 12rpx 0 0 13rpx;
	width: 1rpx;
	height: 47rpx;
	background-color: #808080;
}
.jiage {
	margin-top: 27rpx;
	font-size: 40rpx;
	font-weight: 500;
	color: rgba(255, 91, 26, 1);
}
</style>