鸿蒙os实现美食菜单
免费图片托管网站
Postimages — 免费图片托管 / 图片上传
效果
目录样式
代码
data中代码cookbook-hotcat.json
[
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "家常菜"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "汤"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "川菜"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "粤菜"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "早餐"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "火锅"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "素菜"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "粥"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "凉菜"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "烘烤"
},
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"title": "饮品"
}
]
data中代码cookbook-list.json
{
"ret": true,
"data": [
{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
},{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
},{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
},{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
},{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
},{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
},{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
},{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
},{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
},{
"img": "https://i.postimg.cc/pLZ0kNL8/pic-01.jpg",
"all_click": "3334.9\u4e07",
"favorites": "20.4\u4e07"
}
]
}
news中hotcake代码hml
热门分类
{{$item.title}}
news中hotcake代码js
// @ts-nocheck
import list from '../../../common/data/cookbook-hotcat.json'
export default{
data:{
list:[]
},
onReady(){
this.list=list
}
}
news中hotcake代码css
.cb-hc-container {
flex-direction: column;
}
.cb-hc-title {
border-bottom-width: 0.5px;
border-bottom-color: #eee;
height: 44px;
}
text {
font-size: 12px;
padding-left: 10px;
}
.cb-hc-list {
flex-wrap: wrap;
margin-top: 20px;
}
.cb-hc-item {
width: 33.33333%;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}
image {
object-fit: cover;
width: 70px;
height: 70px;
border-radius: 8px;
}
text {
font-size: 14px;
line-height: 30px;
}
swiper中代码hml
swiper中代码js
export default{
props:{
list:{
type:Array
}
},
onReady(){
console.log(this.list)
}
}
swiper中代码css
.cb-swiper-container {
height: 240px;
}
swiper {
width: 100%;
}
image {
width: 100%;
height: 100%;
object-fit: fill;
}
top中代码hml
精品好菜
{{$item.name}}
{{$item.all_click}}浏览{{$item.favorites}}收藏
top中代码js
export default{
props:{
list:{
type:Array
}
},
onReady(){
console.log(this.list)
}
}
top中代码css
.cb-top-container {
flex-direction: column;
background-color: #f5f5f5;
}
.cb-title-title {
height: 50px;
padding-top: 5px;
padding-left: 10px;
color: #333;
}
text {
font-size: 12px;
}
.cb-top-body {
flex-wrap: wrap;
padding-left: 10px;
padding-right: 10px;
}
.cb-top-item {
width: 50%;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
padding-bottom: 15px;
margin-bottom: 10px;
height: 160px;
}
image {
width: 100%;
flex: 1;
object-fit: contain;
}
.cb-top-item-info {
height: 50px;
flex-direction: column;
align-items: center;
}
.cb-top-item-title {
font-size: 16px;
}
.cb-top-item-subtitle {
font-size: 12px;
color: #666;
font-weight: 100;
}
news中index.hml代码
新闻中心
<!-- -->
<!-- -->
<!-- -->
news中index.js代码
// @ts-nocheck
import list from '../../common/data/cookbook-list.json'
export default {
data: {
list:[]
// title: ""
},
onInit() {
this.list=list.data;
// this.title = this.$t('strings.world');
}
}
news中index.css代码
.cb-container {
flex-direction: column;
}
.cb-title {
width: 100%;
height: 44px;
justify-content: center;
align-items: center;
background-color: #ee742f;
}
text {
color: white;
font-size: 16px;
font-weight: normal;
}
.cb-body {
flex: 1;
}
.cb-body-item {
flex-direction: column;
}