1

src/views/canteenDailyDishes/index.vue

@@ -1,7 +1,10 @@
 <template>
 	<div class="layout-padding">
 		<div class="layout-padding-view">
-			<div ref="containerRef" class="relative h-full w-full overflow-y-auto bg-gradient-to-br from-[#232e55] to-[#040a1b] p-2">
+			<div
+				ref="containerRef"
+				class="relative h-full w-full overflow-y-scroll scrollbar-hidden bg-gradient-to-br from-[#232e55] to-[#040a1b] py-2"
+			>
 				<!-- 背景圆点 -->
 				<div class="pointer-events-none absolute inset-0 pattern-dots opacity-[0.08]"></div>
 
@@ -36,27 +39,21 @@
 				</div>
 
 				<!-- 菜品展示区域 -->
-				<div class="w-full">
-					<div class="w-full flex flex-wrap items-center justify-center" v-for="(hourType, index) in foodData" :key="index">
-						<div v-for="dish in hourType" :key="dish.id" class="w-60 p-2">
-							<div class="relative h-32 overflow-hidden">
-								<img :src="imageBaseUrl + dish.picUrl" :alt="dish.name" class="h-full w-full object-cover" />
-								<div class="absolute left-1 top-1">
-									<star-medal text="午餐" />
-								</div>
-								<div class="absolute left-1 top-1">
-									<star-medal :text="canteenCategoryOption?.find((v: any) => v.id == dish.categoryId)?.name" />
-								</div>
-							</div>
-							<div
-								class="w-full flex items-center justify-between bg-[#AEBBF9]/40 px-2 pb-4 backdrop-blur-sm rounded-bl-[50%] rounded-br-[50%]"
-							>
-								<h3 class="text-2xl font-bold text-[#8ab4ff] drop-shadow-lg line-clamp-1 whitespace-nowrap">
-									{{ dish.name }}
-								</h3>
-								<p class="text-3xl font-bold text-[#4a88ff] drop-shadow-lg whitespace-nowrap">¥{{ displayPrice(dish.price) }}</p>
+				<div class="w-full flex flex-wrap items-center" v-for="(hourType, index) in foodData" :key="index">
+					<div v-for="dish in hourType" :key="dish.id" class="p-2" :style="cardStyle">
+						<div class="relative overflow-hidden rounded-tl rounded-tr" :style="foodCardStyle">
+							<img :src="imageBaseUrl + dish.picUrl" :alt="dish.name" class="h-full w-full object-cover" />
+							<div class="ribbon">午餐</div>
+							<div class="absolute left-1 top-1">
+								<star-medal :text="canteenCategoryOption?.find((v: any) => v.id == dish.categoryId)?.name" />
 							</div>
 						</div>
+						<div class="w-full flex items-center justify-between bg-[#AEBBF9]/40 px-2 py-2 backdrop-blur-sm rounded-bl rounded-br">
+							<h3 class="text-2xl font-bold text-[#7cacff] drop-shadow-lg line-clamp-1 whitespace-nowrap">
+								{{ dish.name }}
+							</h3>
+							<p class="text-3xl font-bold text-[#a9c7ff] drop-shadow-lg whitespace-nowrap">¥{{ displayPrice(dish.price) }}</p>
+						</div>
 					</div>
 				</div>
 			</div>
@@ -65,7 +62,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, onUnmounted } from "vue"
+import { ref, onMounted, onUnmounted, computed } from "vue"
 import { selectTimeFoodApi } from "/@/api/canteen/canteenDailyMenu"
 import { getAllSimple as getCanteenCategory } from "/@/api/canteen/canteenCategory"
 import { displayPrice } from "/@/utils/formatMoney"
@@ -79,6 +76,7 @@ const currentDate = ref(dayjs().format("YYYY/MM/DD"))
 const currentTime = ref(dayjs().format("HH:mm:ss"))
 const isFullscreen = ref(false)
 const imageBaseUrl = import.meta.env.VITE_IMAGE_BASE_PATH
+const clientWidth = ref<number>(0)
 
 interface FoodItem {
 	categoryId: string
@@ -105,6 +103,8 @@ onMounted(async () => {
 	timer = setInterval(() => (currentTime.value = dayjs().format("HH:mm:ss")), 1000)
 	await getDishByType()
 	await getCanteenDishesCategory()
+	await nextTick()
+	clientWidth.value = containerRef.value?.clientWidth || 0
 
 	// 监听全屏变化事件
 	const handleFullscreenChange = () => {
@@ -114,6 +114,7 @@ onMounted(async () => {
 			(document as any).mozFullScreenElement ||
 			(document as any).msFullscreenElement
 		)
+		clientWidth.value = containerRef.value?.clientWidth || 0
 	}
 
 	// 全屏api兼容性
@@ -130,6 +131,19 @@ onMounted(async () => {
 	})
 })
 
+const cardStyle = computed(() => {
+	const width = clientWidth.value / 5
+	return {
+		width: `${width}px`,
+	}
+})
+const foodCardStyle = computed(() => {
+	const width = clientWidth.value / 5
+	return {
+		height: `${(width * 9) / 16}px`,
+	}
+})
+
 // 全屏切换
 const toggleFullScreen = async () => {
 	const element = containerRef.value
@@ -210,4 +224,27 @@ const getCanteenDishesCategory = async () => {
 	background-repeat: no-repeat;
 	background-position: center;
 }
+.scrollbar-hidden::-webkit-scrollbar {
+	display: none;
+}
+.scrollbar-hidden {
+	scrollbar-width: none;
+	-ms-overflow-style: none;
+}
+::selection {
+	background: #1879ff;
+	color: #fff;
+}
+.ribbon {
+	width: 80px;
+	height: 20px;
+	background: #1879ff99;
+	position: absolute;
+	right: -20px;
+	top: 10px;
+	transform: rotateZ(45deg);
+	text-align: center;
+	color: #fff;
+	font-size: 24rpx;
+}
 </style>