<template>
|
<view class="page-container">
|
<scroll-view scroll-y="true" class="scroll-view">
|
<image v-if="coverUrl" :src="coverUrl" mode="widthFix" class="bg-image"></image>
|
<view v-else class="empty-text">暂无</view>
|
|
<!-- 底部留出导航栏高度的空间 -->
|
<view class="safe-area-bottom"></view>
|
</scroll-view>
|
<custom-tabbar bgColor="#ffffff" selected="kitchen"></custom-tabbar>
|
</view>
|
</template>
|
|
<script>
|
import { getKitchenCover } from "@/api/kitchen.js";
|
export default {
|
data() {
|
return {
|
coverUrl: ''
|
};
|
},
|
onLoad() {
|
this.fetchCover();
|
},
|
methods: {
|
async fetchCover() {
|
try {
|
const res = await getKitchenCover();
|
if (res.statusCode === 200 && res.data.data && res.data.data.length > 0) {
|
this.coverUrl = res.data.data[0].coverUrl;
|
}
|
} catch (e) {
|
console.error("获取神厨封面失败", e);
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.page-container {
|
width: 100vw;
|
height: 100vh;
|
position: relative;
|
overflow: hidden;
|
background-color: #ffffff;
|
}
|
|
.scroll-view {
|
width: 100%;
|
height: 100%;
|
}
|
|
.bg-image {
|
width: 100%;
|
display: block;
|
}
|
|
.empty-text {
|
text-align: center;
|
padding-top: 300rpx;
|
color: #999;
|
font-size: 28rpx;
|
}
|
|
.safe-area-bottom {
|
height: 120rpx; // 为底部导航栏留出空间
|
width: 100%;
|
}
|
</style>
|
