鸿蒙最终考核

pen有两个两个链接页面实现他们之间的跳转，利用button的onclick

    <div class="cb-title">
        <button onclick="_Page1">创建笔记</button>
    </div>

    <div class="cb-title">
        <button onclick="_Page2">历史笔记</button>
    </div>

    <comp index="0"></comp>
</div>

子页面

<div class="containe">

    <text class="title">输入框</text>
    <div class="input-item">
        <div class="color">
            <text class="input-title">事件</text>
            <input class="input" type="text" placeholder="请输入文本"></input>
        </div>
    </div>





    <div class="input-item">
        <div class="color">
            <text class="input-title">日期</text>
            <input class="input" type="date" placeholder="如：2021-11-27"></input>
        </div>
    </div>

    <div class="input-item">
        <div class="color">
            <text class="input-title">时间</text>
            <input class="input" type="time" placeholder="如：9:32"></input>
        </div>
    </div>



    <text class="title">选择框基础用法</text>

    <div class="input-item">
        <div class="color">
            <text class="input-title">是否重要</text>
            <div class="radio-div">
                <input class="radio" type="radio" checked='false' name="radio" value="radio1" onchange="onRadioChange('radio1')"></input>
                <input class="radio" type="radio" checked='true' name="radio" value="radio2" onchange="onRadioChange('radio2')"></input>
            </div>
        </div>
    </div>


    <div class="input-item">
        <div class="color">
            <text class="input-title">是否提示</text>
            <div class="radio-div">
                <input class="radio" type="radio" checked='false' name="radioSample" disabled="true"></input>
                <input class="radio" type="radio" checked='true' name="radioSample" disabled="true"></input>
            </div>
        </div>
    </div>

    <text class="title">搜索</text>
    <div class="input-item">
        <div class="search-item">
            <input class="search" type="text" maxlength="20" enterkeytype="search" headericon="/common/images/search.png" placeholder="搜索" onchange="change">
            </input>
            <input class="button" type="button" value="搜索"></input>
        </div>
    </div>
</div>

css

.containe {
    width: 100%;
    flex-direction: column;
    padding: 0 0 5% 0;
    background-color: #F7F8FA;
}
.title {
    color: #6D7278;
    font-size: 13px;
    font-family: HarmonyHeiTi;
    margin: 30px 0 10px 14px;
}
.color {
    margin: 0 4% 0 4% ;
    width: 92%;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}
.title,.input-title,.message-title,.length-title {
    width: 32%;
}
.input-item {
    width: 100%;
}
.input-title {
    color: #121317;
    font-family: HarmonyHeiTi;
}
.input {
    width: 70%;
}
.message-input {
    width: 45%;
}
.message-button {
    width: 31%;
    height: 30px;
    border-radius: 5px;
    margin-top: 5px;
}
.checkbox-div,.radio-div {
    padding: 0 38px 0 2px;
}
.search-item {
    border-radius: 25px;
    margin:6px 4% 6px 4%;
}
.search {
    width: 80%;
    height: 33px;
}
.button {
    width: 88px;
    height: 27px;
    margin: 4px 4px 4px 0;
}
.search,.message-input,.input,.input-title {
    font-size: 15px;
}
.input-item,.input,.message-input {
    background-color: white;
}
.input,.message-input,.search {
    placeholder-color: rgba(0,0,0,0.1);
}
.message-button,.button {
    background-color: #317AFF;
    font-size: 11px;
}
.search,.search-item {
    background-color: #F1F3F5;
}

js

export default {
    checkboxOnChange(e) {
        console.info('checkboxOnChange')
    },
    onRadioChange(inputValue, e) {
        console.info('onRadioChange')
    },
    change(e){
        console.info('onRadioChange')
    },
}