yuanqu_ui/work/components/yuyue/list.vue

<template>
  <view>
	<view v-if="datalist.length>0">
		<!-- 预约 -->
		<block v-if="type=='order'">
			<view class="ylist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.reservatId)">
				<image :src="ysta" class="ystaimg" v-if="ite.visitType==3"></image>
				<image :src="ystb" class="ystaimg" v-if="ite.visitType==2"></image>
				<view class="ytop flexc">
					<view class="tit">{{ite.visitName.charAt(0)}}</view>
					<view class="cent">
						<view class="ctit">{{ite.visitName}}提交的预约来访申请</view>
						<view class="ctime">提交时间：{{ite.createTime}}</view>
					</view>
					<view class="right" v-if="ite.visitType==1">
						<image :src="ybga"></image>
						<view>待审核</view>
					</view>
					
				</view>
				<view class="ybox">
					<view class="yblist mw50"><text>预约日期</text>{{ite.visitDate}}</view>
					<view class="yblist mw50"><text>预约时间</text>{{ite.visitTime}}</view>
					<view class="yblist mw50"><text>手机号码</text>{{ite.visitPhone}}</view>
					<view class="yblist mw50"><text>人 数</text>{{ite.visitNum}}</view>
					<view class="yblist mw50"><text>来访地点</text>{{kaType(ite.appointmentSite,adrlist)}}</view>
					<view class="yblist mw50"><text>来访事由</text>{{ite.visitReason}}</view>
				</view>
				<view class="ybtn">
					<view class="ybtns btn1" v-if="checkPermi(['system:reservat:remove'])" @click.stop="getDelFn(ite.reservatId)">删除</view>
					<view class="flex1"></view>
					<block v-if="ite.visitType==1&&checkPermi(['system:reservat:sh'])">
						<view class="ybtns btn2" @click.stop="gettypeFn(2,ite.reservatId)">拒绝</view>
						<view class="ybtns btn3" @click.stop="gettypeFn(3,ite.reservatId)">同意</view>
					</block>
					
				</view>
			</view>
		</block>
		<!-- 访客记录 -->
		<block v-if="type=='visitor'">
			<view class="ylist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.recordId)">
				<view class="ytop flexc">
					<view class="tit" v-if="ite.recordName">{{ite.recordName.charAt(0)}}</view>
					<view class="cent">
						<view class="ctit">{{ite.recordName}}</view>
					</view>
				</view>
				<view class="ybox">
					<view class="yblist mw50"><text>出入时间</text>{{ite.recordDateTime}}</view>
					<view class="yblist mw50"><text>人员类型</text>{{kaType(ite.recordType,fklist)}}</view>
					<view class="yblist mw50"><text>手机号码</text>{{ite.recordPhone}}</view>
					<view class="yblist mw50"><text>记录来源</text>{{kaType(ite.recordSource,adrlist)}}</view>
				</view>
				<view class="ybtn">
					<view class="ybtns btn1" v-if="checkPermi(['system:record:remove'])"  @click.stop="getDelFn(ite.recordId)">删除</view>
				</view>
			</view>
		</block>
		<!-- 人员信息权限 -->
		<block v-if="type=='limit'">
			<view class="ylist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.personneId)">
				<view class="ytop flexc">
					<view class="tit" v-if="ite.personneName">{{ite.personneName.charAt(0)}}</view>
					<view class="cent">
						<view class="ctit">{{ite.personneName}}</view>
					</view>
				</view>
				<view class="ybox">
					<view class="yblist mw50"><text>手机号码</text>{{ite.personnePhone}}</view>
					<view class="yblist mw50"><text>部门名称</text>{{ite.deptName}}</view>
					<view class="yblist mw50"><text>门禁</text>{{statusFormats(ite.guard,mjlist)}}</view>
					<view class="yblist mw50"><text>状态</text>{{ite.isEnable=='0'?'启用':'禁用'}}</view>
				</view>
				<view class="ybtn">
					<view class="ybtns btn1" v-if="checkPermi(['system:management:remove'])"  @click.stop="getDelFn(ite.personneId)">删除</view>
				</view>
			</view>
		</block>
		<!-- 打卡列表 -->
		<block v-if="type=='clock'">
			<view class="ylist rlist" style="padding-top: 12rpx;" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite)">
				<view class="ytop flexc">
					<view class="tit" v-if="ite.userName">{{ite.userName.charAt(0)}}</view>
					<view class="cent">
						<view class="ctit">{{ite.userName}}的打卡记录</view>
						<view class="ctime">最新打卡：{{ite.clockMap.date}}</view>
					</view>
					<view class="rights" v-if="ite.type=='N'">
						<image :src="ybga"></image>
						<view>缺卡</view>
						<!-- <view>迟到</view> -->
					</view>
					<view class="rights" v-if="ite.clockMap.amex>1&&ite.clockMap.amex<5||ite.clockMap.pmex>1&&ite.clockMap.pmex<5">
						<image :src="ybga"></image>
						<view v-if="ite.clockMap.amex==2 ||ite.clockMap.pmex==2">外勤</view>
						<view v-else-if="ite.clockMap.amex==3 ||ite.clockMap.pmex==3">迟到</view>
						<view v-else-if="ite.clockMap.amex==4||ite.clockMap.pmex==4">早退</view>
					</view>	
				</view>
				<view class="ybox">
					<view class="yblist mw50 line"><text>上班打卡</text>{{ite.clockMap.am}}
						<view class="tip" v-if="ite.clockMap.amex>1&&ite.clockMap.amex<5">
							<block v-if="ite.clockMap.amex==2">外勤</block>
							<block v-if="ite.clockMap.amex==3">迟到</block>
							<block v-if="ite.clockMap.amex==4">早退</block>
						</view>
					</view>
					<view class="yblist mw50"><text>下班打卡</text>{{ite.clockMap.pm}}
						<view class="tip" v-if="ite.clockMap.pmex>1&&ite.clockMap.pmex<5">
							<block v-if="ite.clockMap.pmex==2">外勤</block>
							<block v-if="ite.clockMap.pmex==3">迟到</block>
							<block v-if="ite.clockMap.pmex==4">早退</block>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 会议记录 -->
		<block v-if="type=='meetlist'">
			<view class="ylist rlist" style="padding-top: 12rpx;" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.conferenceRoomOrderId)">
				<view class="ytop flexc">
					<view class="ytit">{{ite.conferenceName}}</view>
					<view class="delbtn mr20" v-if="checkPermi(['system:order:remove'])" @click.stop="getDelFn(ite.conferenceRoomOrderId)">
						<image :src="delimg"></image>取消预约
					</view>
					<!-- <view class="rights" v-if="ite.visitType==1">
						<image :src="ybga"></image>
						<view>已结束</view>
						<view>迟到</view>
					</view> -->
				</view>
				<view class="ybox">
					<view class="listsm">
						<view class="txt"><text class="tit">会议时间</text><text class="lh17">{{ite.startTime}} 至 {{ite.endTime}}</text></view>
						<view class="txt"><text class="tit">会议室</text><text>{{ite.conferenceRoomName}}</text></view>
						<view class="txt"><text class="tit">参会人数</text><text>{{ite.conferenceNumber}}人</text></view>
						<view class="txt"><text class="tit">会议要求</text><text>{{ite.remark}}</text></view>
						<view class="flexcj mb8">
							<view class="txt" style="margin-bottom: 0;"><text class="tit">席卡需求</text><text>{{ite.useXk=='Y'?'需要':'暂不'}}</text></view>
							
						</view>
						<view class="txt" v-if="ite.xkDetail"><text class="tit">席卡人员</text><text>{{ite.xkDetail}}</text></view>
					</view>
				</view>
			</view>
		</block>
		<!-- 就餐记录 -->
		<block v-if="type=='eatlist'">
			<view class="ylist rlist" style="padding-top: 12rpx;" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.orderFoodId)">
				<view class="ytop flexc">
					<view class="ytit">{{ite.orderFoodUser}}</view>
				</view>
				<view class="ybox">
					<view class="listsm">
						<view class="txt"><text class="tit">就餐时间</text><text class="lh17">{{ite.orderFoodTime}}</text></view>
						<view class="flexcj mb8">
							<view class="txt" style="margin-bottom: 0;"><text class="tit">就餐类型</text><text>{{kaType(ite.orderFoodType,jclxlist)}}</text></view>
							<view class="delbtn" v-if="checkPermi(['system:food:remove'])" @click.stop="getDelFn(ite.orderFoodId)">
								<image :src="delimg"></image>取消预约
							</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 园区食谱 -->
		<block v-if="type=='menulist'">
			<view class="menulist" v-for="(ite,idx) in datalist" :key='idx'  
			:data-idx="idx"
			@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'">
			<view class="mentop" >
				<!-- <view class="mentopa" v-if="ite.menuFoodDetailBk">
					<image :src="dayc" class="dayimg"></image>
					<view class="mentit">{{ite.menuFoodDetailBk}}</view>
				</view> -->
				<view class="mentopa">
					<image :src="daya" class="dayimg"></image>
					<view class="mentit">{{ite.menuFoodDetailLu||'无'}}</view>
				</view>
				<view class="mentopa">
					<image :src="dayb" class="dayimg"></image>
					<view class="mentit">{{ite.menuFoodDetailDi||'无'}}</view>
				</view>
			</view>
			<view class="menbtn flexc">
				<view class="usetit flexc flex1 act" v-if="ite.isUse=='Y'"><image :src="useimg"></image>当前已启用</view>
				<view class="usetit flexc flex1" v-else><image :src="nuseimg"></image>当前未启用</view>
				<block v-if="checkPermi(['system:menuFood:edit'])">
					<view class="usebtn btna" @click.stop="getPut(ite,'put')"><image :src="putimg"></image>修改</view>
					<view class="usebtn btnb" v-if="ite.isUse=='Y'" @click.stop="getPut(ite,'use')"><image :src="nusebtn"></image>禁用</view>
					<view class="usebtn btnc" v-else @click.stop="getPut(ite,'use')"><image :src="usebtn"></image>启用</view>
				</block>
			</view>
			<view class="spdel" v-if="checkPermi(['system:menuFood:remove'])&&ite.right>0" @click.stop="getDelFn(ite.menuFoodId)">删除</view>
			</view>
		</block>
		<block v-if="type=='menulists'">
			<view class="splist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.orderFoodId)" >
			<!--  @touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" -->
				<view>
					<view class="sptop flexc">
						<view class="tit flex1">11/04 周一 ~ 11/09 周六</view>
						<view class="spr" @click.stop="getCookFn(2)">每日食谱</view>
					</view>
					<view class="sptxt">本周是2024年11月第一周</view>
					<view class="spbox flexc " :class="ite.day?'act':''">
						<view class="ltit">
							<view>今日</view>
							<view>食谱</view>
						</view>
						<view class="flex1">
							<view class="rtit"><text>午餐：</text>米饭，酱汁里脊肉，蒜泥生菜，平菇蛋花 汤，土豆焖鸭，胡萝卜肉丝</view>
							<view class="rtit"><text>晚餐：</text>米饭，酱汁里脊肉，蒜泥生菜，平菇蛋花 汤，土豆焖鸭，胡萝卜肉丝</view>
						</view>
						<image :src="fineshimg" class="fineshimg" v-if="!ite.day"></image>
					</view>
				</view>
			</view>
		</block>
		<block v-if="type=='recordlist'">
			<view class="splist" v-for="(ite,idx) in datalist" :key='idx' @click="getDetail(ite.menuFoodId)"><view>
					<view class="sptop">
						<view class="tit">{{ite.menuFoodTime}}</view>
					</view>
					<view class="spbox flexc act">
						<view class="ltit">
							<view>当日</view>
							<view>食谱</view>
						</view>
						<view class="flex1">
							<view>
								<!-- <view class="rtit"><text>早餐：</text>{{ite.menuFoodDetailBk}}</view> -->
								<view class="rtit"><text>午餐：</text>{{ite.menuFoodDetailLu}}</view>
								<view class="rtit"><text>晚餐：</text>{{ite.menuFoodDetailDi}}</view>
							</view>
							<!-- 图片 -->
							<view v-if="ite.imgs&&ite.imgs.length" class="ckimgs">
								<block v-for="(pite,pidx) in ite.imgs" :key="pidx">
									<image class="cimg" v-if="pidx<3" :src="baseUrl+pite"  @click="getPreview(pidx,ite.imgs)"></image>
								</block>
								<image class="cright" :src="mright" @click="getPreview(3,ite.imgs)" v-if="ite.imgs.length>3"></image>
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</block>
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</view>
	<block v-else>
		<no-data></no-data>
	</block>
  </view>
</template>

<script>
	import { selectDictValue } from '@/utils/common.js';
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import noData from "@/components/nodata/nodata.vue"
	import config from '@/config.js';
		const baseUrl = config.baseUrl;
  export default {
	props:{
		datalist: {
			type: Array,
			default () {
				return []
			}
		},
		adrlist:{
			type: Array,
			default () {
				return []
			}
		},
		fklist:{
			type:Array,
			default () {
				return []
			}
		},
		jclxlist:{
			type: Array,
			default () {
				return []
			}
		},
		mjlist:{
			type:Array,
			default () {
				return []
			}
		},
		wtdt:{
			type: String,
			default () {
				return ''
			}
		},
		type:{
			type: [String,Number],
			default () {
				return ''
			}
		},
	},
	components:{
		noData
	},
	data(){
		return{
			time:require("@/static/images/home/time.png"), 
			chose:require("@/static/images/home/chose.png"), 
			close:require("@/static/images/home/close.png"), 
			bgaimg:require("@/static/images/home/hbgg.png"), 
			bgbimg:require("@/static/images/home/hbgh.png"), 
			ybg:require("@/static/images/order/staff/ybg.png"), 
			ybga:require("@/static/images/order/staff/ybga.png"), 
			ysta:require("@/static/images/order/staff/ysta.png"), 
			ystb:require("@/static/images/order/staff/ystb.png"), 
			delimg:require("@/work/static/yuy/del.png"),
			fineshimg:require("@/work/static/yuy/finesh.png"),
			daya:require("@/work/static/yuy/daya.png"),
			dayb:require("@/work/static/yuy/dayb.png"),
			dayc:require("@/work/static/yuy/dayb.png"),
			prea:require("@/work/static/yuy/prea.png"),
			preb:require("@/work/static/yuy/preb.png"),
			useimg:require("@/work/static/yuy/use.png"),
			nuseimg:require("@/work/static/yuy/nuse.png"),
			usebtn:require("@/work/static/yuy/usebtn.png"),
			nusebtn:require("@/work/static/yuy/nusebtn.png"),
			putimg:require("@/work/static/yuy/put.png"),
			mright:require("@/work/static/yuy/mright.png"),
			//左滑默认宽度
			delBtnWidth:66,
			csListArrl:[],
			startX:'',
			baseUrl:config.baseUrl,
		}
	},
	watch:{
		datalist:{
			handler(newVal) {
				var data=newVal;
				this.csListArrl=JSON.parse(JSON.stringify(data))
			},
			deep: true
		},
	},
	onLoad: function() {
	},
	methods:{
		checkPermi, checkRole,
		kaType(data, list) {
			return selectDictValue(list, data);
		},
		statusFormats(ite,list,type){//多选匹配
			if(ite){
				var actions = [];
				list.forEach(s => {
					if(ite.indexOf(s.dictValue)>-1){
						actions.push(s.dictLabel);
					}
				})
				return actions.join(',')
			}else{
				return ''
			}	
		},
		getPreview(idx,arr) {
			var newArr=[];
			arr.forEach(ite=>{
				var ds=this.baseUrl+ite
				newArr.push(ds)
			})
			uni.previewImage({
				urls: newArr,
				current:idx,
				success: function(data) {},
				fail: function(err) {}
			});
		},
		getDelFn(id){
			var that=this;
			uni.showModal({
				title: '确认删除',
				content: "是否确认删除该记录",
				cancelText: '取消',
				confirmText: '确认',
				success: function(res) {
					if (res.confirm) {
						that.$emit("getDelFn",id)
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},
		gettypeFn(type,id){
			var that=this;
			var str="拒绝"
			if(type==3){
				str='同意'
			}
			uni.showModal({
				title: '确认'+str,
				content: "是否确认"+str+"该预约",
				cancelText: '取消',
				confirmText: '确认',
				success: function(res) {
					if (res.confirm) {
						var newobj={
							type:type,
							id:id
						}
						that.$emit("gettypeFn",newobj)
					} else if (res.cancel) {
						// console.log('用户点击取消');
					}
				}
			});
		},
		getDetail(e){
			this.$emit('getDetail',e)
		},
		getPut(ite,type){
			var data={
				ite:ite,
				type:type
			}
			this.$emit('getPut',data)
		},
		getCookFn(e){
			this.$emit('getCookFn',e)
		},
		typeFn(data){
			if(data){
				var newArr=[]
				var astr=data.split('-')
				astr.forEach(ite=>{
					var a=ite.substring(0,5);
					newArr.push(a)
				})
				return newArr.join('-')
			}else{
				return ''
			}
		},
		//开始触摸滑动
		drawStart(e) {
			// console.log("开始触发");
			var touch = e.touches[0];
			this.startX = touch.clientX;
		},
		//触摸滑动
		drawMove(e) {
			// console.log("滑动");
			for (var index in this.datalist) {
				// this.csListArrl[index].right=0
				this.$set(this.datalist[index],'right',0);
			}
			var idx=e.currentTarget.dataset.idx
			var touch = e.touches[0];
			var item = this.datalist[idx];
			var disX = this.startX - touch.clientX;
			if (disX >= 20) {
			        if (disX > this.delBtnWidth) {
				    disX = this.delBtnWidth;
			        }
					// this.csListArrl[idx].right=disX
			        this.$set(this.datalist[idx],'right',disX);
			} else {
				// this.csListArrl[idx].right=0
				this.$set(this.datalist[idx],'right',0);
			}
		},
		//触摸滑动结束
		drawEnd(e) {
			// console.log("滑动结束");
			var idx=e.currentTarget.dataset.idx
			var item = this.datalist[idx];
			if (item.right >= this.delBtnWidth / 2) {
				// this.datalist[idx].right=this.delBtnWidth
				this.$set(this.datalist[idx],'right',this.delBtnWidth);
			} else {
				this.datalist[idx].right=0
			}
		},
	},
	
  }
</script>

<style lang="scss" scoped>
// 预约
.ylist{background: #FFFFFF;border-radius: 14rpx;margin-bottom: 30rpx;position: relative;
	.ystaimg{width: 140rpx;height: 140rpx;top: 22rpx;right: 22rpx;position: absolute;}
	.ytop{padding: 16rpx 0 24rpx 16rpx;
		.tit{width: 62rpx;height: 62rpx;background: #0391FD;border-radius: 6rpx;font-weight: 500;
font-size: 34rpx;color: #FFFFFF;margin-right: 18rpx;text-align: center;line-height: 62rpx;flex: 0 0 auto;}
		.cent{
			flex: 1;
			.ctit{font-weight: bold;font-size: 28rpx;color: #161616;margin-bottom: 6rpx;}
			.ctime{font-weight: 500;font-size: 18rpx;color: #666666;}
		}
		.right{position: relative;flex: 0 0 auto;margin-left: 10rpx;
			image{width: 144rpx;height: 56rpx;}
			view{font-weight: 800;font-size: 22rpx;color: #FFFFFF;position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-align: center;padding-left: 20rpx;box-sizing: border-box;line-height: 56rpx;}
		}
		.rights{position: relative;width: 96rpx;height: 38rpx;right: 0;top: 0;
			image{width: 100%;height: 100%;}
			view{font-weight: 500;font-size: 20rpx;
		color: #FFFFFF;position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-align: center;padding-left: 20rpx;box-sizing: border-box;line-height: 38rpx;}
		}
	}
	.ytit{font-weight: bold;font-size: 28rpx;color: #161616;flex: 1;}
	.ybox{padding: 0rpx 24rpx 24rpx 16rpx;display: flex;flex-wrap: wrap;
		.yblist{display: flex;font-size: 24rpx;font-weight: 500;color: #161616;padding: 6rpx 0 6rpx 8rpx;line-height: 40rpx;position: relative;
			text{font-weight: normal;color: #aaa;flex: 0 0 auto;width: 100rpx;text-align-last: justify;margin-right: 12rpx;}
			.tip{border-radius: 12rpx;font-weight: 500;font-size: 16rpx;color: #F87C29;border: 2rpx solid #F87C29;height: 28rpx;box-sizing: border-box;
				display: flex;align-items: center;padding: 0 8rpx;margin-left: 12rpx;flex: 0 0 auto;margin-top: 6rpx;
			}
			&.line{
				&::after{
					position: absolute;content: '';width: 2rpx;height: 30rpx;background: #CDCDCD;right: 0;top: 9rpx;
				}
				
			}
		}
		.listsm{padding: 28rpx 10rpx 2rpx 0;width: 100%;border-top: 2rpx solid #DADADA;
			.tit{margin-right: 8rpx;flex: 0 0 auto;min-width:110rpx;text-align-last: justify;margin-right: 20rpx;color: #aaa;}
			.line{margin-right: 8rpx;color: #aaaaaa;flex: 0 0 auto;}
			.txt{font-size: 26rpx;color: #161616;margin-bottom: 16rpx;display: flex;padding-left: 10rpx;}
			.flexcw{
				display: flex;align-items: center;flex-wrap: wrap;
				.txt{min-width: 50%;}
			}
		}
	}
	.ybtn{border-top: 2rpx solid #DADADA;padding: 20rpx 18rpx;display: flex;align-items: center;
		.ybtns{width: 130rpx;border-radius: 6rpx;height: 52rpx;font-weight: 500;font-size: 26rpx;display: flex;align-items: center;justify-content: center;box-sizing: border-box;flex: 0 0 auto;
			&.btn1{border: 2rpx solid #FC3838;color: #FC3838;}
			&.btn2{border: 2rpx solid #666666;color: #666666;}
			&.btn3{background-color: #0391FD;color: #ffffff;margin-left: 22rpx;}
		}
	}
	// 记录
	&.rlist{padding-top:28rpx;
		.rtop{position: relative;padding-left: 22rpx;
			.rlistl{flex: 1;
				image{width: 30rpx;height: 30rpx;margin-right: 18rpx;}
				view{font-weight: bold;font-size: 28rpx;color: #161616;}
			}
			.right{position: relative;width: 96rpx;height: 38rpx;right: 0;top: 0;
				image{width: 100%;height: 100%;}
				view{font-weight: 500;font-size: 20rpx;
color: #FFFFFF;position: absolute;left: 0;top: 0;right: 0;bottom: 0;text-align: center;padding-left: 20rpx;box-sizing: border-box;line-height: 38rpx;}
			}
		}
		.ytop{padding-bottom: 18rpx;}
		.ybox{padding-bottom: 14rpx;}
		.rbox{padding: 0 22rpx 8rpx 22rpx;
			.rboxa{width: 306rpx;height: 104rpx;position: relative;margin-bottom: 20rpx;
				.rbg{width: 100%;height: 100%;}
				.rboxb{box-sizing: border-box;padding:14rpx 0 16rpx 28rpx;
					position: absolute;left: 0;top: 0;right: 0;bottom: 0;
					.tit{font-weight: 500;font-size: 26rpx;color: #161616;margin-bottom: 10rpx;}
					.time{font-weight: 500;font-size: 22rpx;color: #666666;
						image{width: 18rpx;height: 18rpx;margin-right: 14rpx;flex: 0 0 auto;}
					}
				}
			}
		}
		
	}
	.delbtn{font-weight: 500;font-size: 22rpx;color: #FF6969;display: flex;align-items: center;flex: 0 0 auto;
		image{width: 28rpx;height: 26rpx;margin-right: 8rpx;}
	}	
}
// 食谱
.splist{background: #FFFFFF;padding: 24rpx 28rpx 24rpx;box-sizing: border-box;box-shadow: 0px 0px 6rpx 0px #D3D3D3;border-radius: 14rpx;margin:0 32rpx 18rpx;position: relative;
	.sptop{margin-bottom: 12rpx;
		.tit{font-weight: bold;font-size: 28rpx;color: #161616;}
		.spr{min-width: 120rpx;height: 40rpx;background: #FFEFE8;border-radius: 20rpx;padding: 0 6rpx;flex: 0 0 auto;margin-left: 12rpx;
			border: 2rpx solid #FE5A0E;font-weight: 500;font-size: 22rpx;color: #FE5A0E;text-align: center;line-height: 40rpx;box-sizing: border-box;
		}
	}
	.sptxt{font-weight: 500;font-size: 18rpx;color: #666666;margin-bottom: 20rpx;}
	.spbox{position: relative;
		.ltit{font-weight: bold;font-size: 28rpx;color: #AAAAAA;position: relative;width: 68rpx;margin-right: 40rpx;padding-left: 4rpx;box-sizing: border-box;flex:0 0 auto;
			&::after{content: '';position: absolute;right: -20rpx;top: 0;bottom: 0;background: #DADADA;width: 2rpx;}
		}
		.rtit{font-size: 26rpx;color: #AAAAAA;padding: 9rpx 0;
			text{font-weight: bold;}
		}
		&.act{
			.ltit{color: #0491FD;}
			.rtit{color: #666666;
				text{color: #161616;}
			}
		}
		.fineshimg{width: 138rpx;height: 92rpx;position: absolute;left: 50%;top: 50%;margin-left: -69rpx;margin-top: -46rpx;}
	}
	
}
.menulist{margin:0 32rpx 18rpx;position: relative;background: #FFFFFF;box-sizing: border-box;box-shadow: 0px 0px 6rpx 0px #D3D3D3;border-radius: 14rpx;
	.mentop{padding:22rpx 20rpx 6rpx 18rpx;
		.mentopa{margin-bottom: 18rpx;display: flex;align-items: flex-start;}
		.dayimg{width: 76rpx;height: 34rpx;margin-right: 20rpx;flex: 0 0 auto;margin-top: 4rpx;}
		.mentit{font-weight: 500;font-size: 26rpx;color: #666666;}
	}
	.menbtn{padding: 18rpx 18rpx 14rpx;border-top: 2rpx solid #DADADA;
		.usetit{font-weight: bold;font-size: 22rpx;color: #AAAAAA;
			image{width: 26rpx;height: 26rpx;margin-right: 12rpx;flex: 0 0 auto;}
			&.act{color: #0391FD;}
		}
		.usebtn{font-weight: 500;font-size: 22rpx;min-width: 120rpx;height: 40rpx;border-radius: 20px;display: flex;align-items: center;justify-content: center;padding:0 6rpx;box-sizing: border-box;margin-left: 28rpx;flex: 0 0 auto;
			image{width: 20rpx;height: 20rpx;margin-right: 6rpx;}
			&.btna{border: 2rpx solid #FE5A0E;background: #FFEFE8;color: #FE5A0E;}
			&.btnb{border: 2rpx solid #45CB99;background: #D7F5EA;color: #45CB99;}
			&.btnc{border: 2rpx solid #0391FD;background: #DFF1FF;color: #0391FD;}
		}
	}
	.spdel{width: 132rpx;background: #EA2D2D;font-weight: bold;font-size: 26rpx;color: #FFFFFF;display: flex;align-items: center;justify-content: center;
	border-radius: 14rpx;position: absolute;right: -118rpx;top: 0;bottom: 0;}
}
.ckimgs{padding:8rpx 0 16rpx 0rpx;display: flex;align-items: center;}
.cimg{
	width: 136rpx;height: 88rpx;margin-right: 32rpx;
}
.cright{width: 16rpx;height: 16rpx;flex: 0 0 auto;}
</style>