<template>
	<view class="work-container">
		<!-- 第一个条目 -->
		<view class="item">
			<image class="image" src="/static/images/weeklyMenu/banner.png"></image>
			<view class="content">
				<text class="title">早，中档口</text>
				<text class="sub-title">食堂：宏源大厦</text>
				<text class="sub-title">档口：早，中档口</text>
			</view>
		</view>

		<!-- 第二个条目 -->
		<view class="item">
			<image class="image" src="/static/images/weeklyMenu/banner1.png"></image>
			<view class="content">
				<text class="title">午，中档口</text>
				<text class="sub-title">食堂：宏源大厦</text>
				<text class="sub-title">档口：午，中档口</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				qrCodeUrl: '/static/images/code.png' // 替换为实际的二维码URL
			};
		},
		methods: {
			refreshQrCode() {
				// 模拟刷新二维码
				this.qrCodeUrl = `/static/images/code.png`;
			}
		}
	};
</script>

<style scoped>
	page {
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
		background-color: #F9FBFF;
		min-height: 100%;
		height: auto;
	}

	.work-container {
		background-color: #F9FBFF;
		text-align: center;
	}

	.item {
		display: flex;
		margin: 0 40rpx 40rpx 40rpx;
		background-color: #fff;
		border-radius: 8rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.1);
	}

	.image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 8rpx;
		margin: 20rpx;
	}

	/* 确保所有文本默认左对齐 */
	.content {
	  flex: 1;
	  display: flex;
	  flex-direction: column;
	  justify-content: space-evenly;
	  /* 添加以下样式以确保内容左对齐 */
	  align-items: flex-start; /* 确保子元素水平方向上左对齐 */
	}
	
	.title, .sub-title {
	  text-align: left; /* 确保文本左对齐 */
	  margin: 0; /* 移除任何可能存在的默认边距 */
	}

	.title {
		font-size: 18px;
		color: #333;
		font-weight: 600;
		margin-bottom: 5rpx;
	}

	.sub-title {
		font-size: 16px;
		color: #444;
	}
</style>