第四次鸿蒙培训

 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;
}