HarmonyOS猜灯谜轻应用尝试 原创

这里做了个点击可以查看对应的答案的猜灯谜游戏，后面可以进行判断进行完善。

Css:

/* phone */
@media screen and (device-type: phone) {
    .pagediv {
        width: 100%;
        height: 1500px;
        background-color: cornsilk;/**启用flex布局**/
        display: flex;/**布局方向为按列布局**/
        flex-direction: column;
    }
    .topdiv {
        width: 100%;
        height: 10%;
        background-color: #AECAFA;/**启用flex布局**/
        display: flex;/**水平居中**/
        justify-content: center;/**垂直居中**/
        align-items: center;
        flex-direction: column;
    }
    .middlediv {
        width: 100%;
        height: 60%;
        background-color: antiquewhite;
        display: flex;
        justify-content: center;
        align-items: center;/**自动换行**/
        flex-wrap: wrap;
    }
    .box {
        width: 100%;
        height: 150px;
        background-color: green;
        border: 3px solid black;
        border-radius: 20px;
        align-items: center;/**自动换行**/
        text-align: center;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .textdiv {
        font-size: 50px;
        color: black;
        font-weight: bold;
    }
    .boxtxt {
        font-size: 45px;
        color: black;
        font-weight: bold;
    }
    .button_dj {
        background-color: green;
        text-color: white;
        height: 100%;
        width: 100%;
        font-size: 26px;
    }
    .div_dati {
        width: 100%;
        height: 200px;
        background-color: beige;
        justify-content: center;
    }
    .text_style {
        text-color: black;
        font-size: 36px;
    }
}

Hml:

<div class="pagediv">
    <div class="topdiv">
        <text class="textdiv" for="{{title}}">{{$item}}</text>
    </div>
    <div class="middlediv">
        <block for="{{arrs}}">
            <div class="box">
                <button class="button_dj" onclick="show({{$item.id}})" >{{$item.id}}</button>
            </div>
        </block>
    </div>
    <div class="div_dati">
        <text class="text_style">{{show_text}}</text>
    </div>
</div>

Js:

import router from '@system.router';
export default {
    data: {
        title: ["猜灯谜", "点击按钮解锁答案"],
        arrs: [
                {
                    'id': '一棵树，两只兔。一斜路，在南处。猜一个字。',
                    'value': '答案（少）'
                },
                {
                    'id': '人上，一星亮。一见面，一声汪。猜一个字',
                    'value': '答案（犬）'
                },
                {
                    'id': '戈手心，相公心，您藏心，在疗心。猜四个字。',
                    'value': '答案（我想你了）'
                },
                {
                    'id': '立湍后，许久默，凤冠女，慷心落。猜四个字。',
                    'value': '答案（端午安康）'
                },
                {
                    'id': '一人打虎，一人牵犬。一人趴地，一人哮天。猜一个字。',
                    'value': '答案（伏）'
                }
        ],
        show_text: ''
    },
    show(e) {
        console.info(e)
        var list = this;
        this.arrs.forEach(element => {
            console.info(element.id)
            if (element.id == e) {
                list.show_text = element.value
            }
        });
        console.info(list.show_text);
    }
}

完整代码下载：

https://gitee.com/jltfcloudcn/jump_to/tree/master/cdm