cookbook-category.json
{
"data": {
"category": {
"热门": ["饮品", "清淡", "夏季菜谱", "下饭菜", "面食", "粥", "晚餐", "汤", "面条", "汤圆", "烤箱", "中餐", "西餐", "早餐", "蛋糕", "东北菜", "凉拌", "煲汤", "布丁", "寿司", "糕点", "糖水", "湘菜", "甜点"],
"菜式": ["家常菜", "素菜", "凉菜", "下饭菜", "面试", "小吃", "粥", "汤"],
"菜系": ["川菜", "东北菜", "粤菜", "湘菜", "西餐", "鲁菜", "韩式料理", "日式料理"],
"特色": ["泡菜", "冰淇淋", "粽子", "沙拉", "油条", "豆浆", "零食", "布丁"],
"烘焙": ["蛋糕", "披萨", "面包", "月饼", "吐司", "饼干", "杯子蛋糕", "蛋挞"],
"主食": ["寿司", "饼", "炒饭", "馒头", "饺子", "炒面"],
"器具": ["烤箱", "炒锅", "微波炉"],
"烹饪方式": ["烘焙", "拌", "火锅", "蒸", "煮", "卤"],
"口味": ["清淡", "咖喱", "麻辣", "香辣", "煮", "卤"],
"场合": ["早餐", "晚餐", "中餐", "下午茶", "宵夜", "熬夜餐", "春季菜谱"],
"节日": ["春节", "年夜饭", "中秋节", "元旦"]
},
"material": {
"肉类": ["猪肉", "排骨", "猪蹄", "牛肉"],
"蛋/奶": ["鸡蛋", "鸭蛋", "鹌鹑蛋", "咸鸭蛋", "松花蛋"],
"鱼类": ["章鱼", "鲤鱼", "鲫鱼"],
"水产": ["虾", "虾米", "龙虾", "河虾"],
"蔬菜": ["白菜", "油菜", "芹菜", "菠菜", "茼蒿"],
"豆类": ["绿豆芽", "黄豆芽", "黄豆"],
"果品类": ["苹果", "香蕉"],
"五谷杂粮": ["芥麦面", "麦芽", "小米"],
"药食": ["燕窝", "人参"]
}
}
}
index.css代码
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.title {
font-size: 40px;
color: #000000;
opacity: 0.9;
}
@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}
@media screen and (device-type: wearable) {
.title {
font-size: 28px;
color: #FFFFFF;
}
}
@media screen and (device-type: tv) {
.container {
background-image: url("/common/images/Wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.title {
font-size: 100px;
color: #FFFFFF;
}
}
@media screen and (device-type: phone) and (orientation: landscape) {
.title {
font-size: 60px;
}
}
index.hml代码
<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<div class="container">
<!-- <text class="title">
关于我们
</text>-->
<div>
<web src="https://map.baidu.com/search/%E5%A4%A9%E5%AE%89%E9%97%A8/@12957695.78455178,4825339.25645,17.33z?querytype=s&da_src=shareurl&wd=%E5%A4%A9%E5%AE%89%E9%97%A8&c=153&src=0&wd2=%E5%8C%97%E4%BA%AC%E5%B8%82%E4%B8%9C%E5%9F%8E%E5%8C%BA&pn=0&sug=1&l=12&b=(12469977.85,4064032.61;12568281.85,4112864.61)&from=webmap&biz_forward=%7B%22scaler%22:2,%22styles%22:%22pl%22%7D&sug_forward=65e1ee886c885190f60e77ff&device_ratio=2"></web>
</div>
<comp index="2"></comp>
</div>
index.js代码
export default {
data: {
title: ""
},
onInit() {
this.title = this.$t('strings.world');
}
}
index.hml代码
<element name='comp' src='../../components/tabbar/tabbar.hml'></element>
<element src='../../components/child/child.hml'></element>
<element src='../index/menu/menu.hml' name="cb-menu"></element>
<element name="cb-search" src="../../common/components/components/search/search.hml"></element>
<div class="cate-container">
<div class="cate-header">
<div class="cate-header-nav">
<div class="cate-header-nav-item" @click="handleSliderClick('category')">
<text>
分类
</text>
</div>
<div class="cate-header-nav-item" @click="handleSliderClick('material')">
<text>
食材
</text>
</div>
<div if="{{type==='category'}}" class="cate-header-nav-slider">
<text>
分类
</text>
</div>
<div else class="cate-header-nav-slider move">
<text>
食材
</text>
</div>
</div>
</div>
<div>
<cb-search> from="cate"</cb-search>
</div>
<div>
<cb-menu menu-data="{{filteredMenuData}}"first-item="{{type==='category' ? '热门':'肉类'}}"></cb-menu>
</div>
<div>
<comp index="0"></comp>
</div>
</div>
<!--<div>
<text>
信息页面
</text>
<text>{{num}}</text>
<child @change-father-num="changeNum">
<text>父组件slot内容</text>
<text slot="other"></text>
</child>
<comp index="0"></comp>
</div>-->
index.css
/*@import "../../../common/scss/title.scss";*/
.container {
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
}
.title {
font-size: 40px;
color: #000000;
opacity: 0.9;
}
@media screen and (device-type: tablet) and (orientation: landscape) {
.title {
font-size: 100px;
}
}
@media screen and (device-type: wearable) {
.title {
font-size: 28px;
color: #FFFFFF;
}
}
@media screen and (device-type: tv) {
.container {
background-image: url("/common/images/Wallpaper.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
.title {
font-size: 100px;
color: #FFFFFF;
}
}
@media screen and (device-type: phone) and (orientation: landscape) {
.title {
font-size: 60px;
}
}
.more-container {
flex-direction: column;
}
/*.cb-title {*/
/* @extent %cb-title;*/
/*}*/
.cb-title {
width: 100%;
height: 44px;
background-color: #ee742f;
justify-content: center;
align-items: center;
}
.cb-title-text {
font-size: 16px;
font-weight: normal;
color: #FFF;
}
.camera-container {
width: 100%;
height: 270px;
flex-direction: column;
align-content: center;
justify-content: center;
}
.camera {
width: 100%;
height: 240px;;
}
.btn-takePhoto {
width: 90%;
height: 30px;
align-self: center;
}
.switch-container {
padding-left: 20px;
}
.switch-container-text {
font-size: 12px;
}
.image_camera {
margin-top: 10px;
width: 100%;
object-fit: contain;
height: 400px;
}