Harmony OS学习笔记2

学习视频链接：
https://www.bilibili.com/video/BV1p54y1G7WU?p=4
https://www.bilibili.com/video/BV1p54y1G7WU?p=5
学习文档链接
https://jspang.com/detailed?id=74
第四第五节
鸿蒙OS官方帮助文档：
https://developer.huawei.com/consumer/cn/codelabsPortal/carddetails/HarmonyOS-Input
布局说明
手机和智慧屏的基准宽度为720px（px为逻辑像素，非物理像素），实际显示效果会根据实际屏幕宽度进行缩放。

其换算关系如下：

组件的width设为100px时，在宽度为720物理像素的屏幕上，实际显示为100物理像素；在宽度为1440物理像素的屏幕上，实际显示为200物理像素。

智能穿戴的基准宽度为454px，换算逻辑同理。
input、label（JS）
CSS设置：

    flex-direction:容器主轴方向。
    column：垂直方向从上到下。
    row：水平方向从左到右。
    justify-content: flex容器当前行的主轴对齐格式。

button:按钮

    text-color：按钮的文本颜色。
    font-style：按钮的字体样式。
    font-weight：按钮的字体粗细。  

text:文本

    font-weight：设置文本的字体粗细，number类型取值[100, 900]，
    默认为400，取值越大，字体越粗。说明number取值必须为100的整数倍
    text-align：设置文本的文本对齐方式。

HTML

<div class="container">
    <div class="input-form-1">
        <text class="form-text-1">韭菜王</text>
    </div>
    <div class="input-form-2">
        <text class="form-text-2">欢迎使用煦哥考研数学</text>
    </div>
    <div class="row">
        <div class="input-block">
            <input id="username" class="input" type="text" maxlength="10" placeholder="请输入账号" headericon="{{require}}" onchange="change" ontranslate="translate"/>
        </div>
    </div>
    <div class="row">
        <div class="input-block">
            <input id="password" class="input" type="password" maxlength="10" placeholder="请输入密码" headericon="{{require}}" onchange="change"/>
        </div>
    </div>

    <div class="row">
        <div class="input-block">
            <input onchange="checkboxOnChange" checked="false" type="checkbox" value="0"></input>
            <label class="label">记住密码</label>
        </div>
    </div>

    <input class="button" type="button" value="立即登录" onclick="buttonClick" />

    <div class="row">
        <div class="input-form-3">
            <text class="form-text-3">没有账号？去注册</text>
            <text class="form-text-4">忘记密码？</text>
        </div>
    </div>
</div>

CSS

.container {
    flex-direction: column; /* 垂直排列 */
    align-items: center; /* 水平居中 */
    background-color: #f1f5f8;/* 背景颜色 */
    width:100%;/* 容器宽度 */
    height: 100%;/* 容器高度 */
}
.input-form-1 {
    width: 100%;
    margin-top: 25%;/* 设置一个元素为25%的上部边距 */
    margin-bottom: 35px;
    margin-left: 30px;

}
.input-form-2 {
    width: 100%;
    margin-bottom: 20px;
    margin-left: 30px;/* 设置一个元素为30px的上部边距 */
}
.input-form-3 {
    width: 100%;
    margin-top: 15px;
    margin-left: 30px;
}
.form-text-1 {
    font-size: 60px; /* 字体大小 */
    font-weight: 300;
    color: blueviolet;/* 字体颜色 */

}
.form-text-2 {
    font-size: 25px; /* 字体大小 */
    font-weight: 200;
    color: blueviolet;
}
.form-text-3 {
    font-size: 13px; /* 字体大小 */
}
.form-text-4 {
    font-size: 12px; /* 字体大小 */
    text-align: right; /* 左对齐 */
    margin-left: 140px;
}
.row {
    width: 100%;
    margin-top: 5px;
    flex-direction: row; /* 水平排列 */
    align-items: center; /* 水平居中 */
}
.label {
    font-size: 16px; /* 字体大小 */
    width: 120px; /* 宽度 */
    text-align: left; /* 左对齐 */
}
.input-block {
    width: 100%;
    margin-left: 30px;
}
.input {
    width: 90%; /* 输入框宽度 */
    font-size: 15px; /* 字体大小 */
}
.button {
    margin-top: 10px;
    width: 150px;
    background-color: #8a63f8;
    font-weight: 300;/* 设置文本的字体粗细，number类型取值[100, 900]
    ，默认为400，取值越大，字体越粗。说明number取值必须为100的整数倍。 */
    font-style: normal;
    font-size: 19px;
}

JS

export default {
    data: {
        require: '/common/images/require.png',
        username: '',
        password: '',
        list: [{icon: '/common/images/require.png', content: '选项0'},
               {icon: '/common/images/require.png', content: '选项1'}]
    },

}

各个容器对齐

标签：OS,100%,笔记,width,Harmony,text,font,margin,size
来源： https://blog.csdn.net/botlowhao/article/details/122547913