Harmony在线教育app平台开发开发日志——day9

已于 2022-06-17 17:59:23 修改
阅读量441 收藏 3
点赞数
分类专栏： 鸿蒙系统入门 文章标签： css 前端 css3
于 2022-06-15 17:56:36 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/C_J_W_/article/details/125301680
版权

1.个人中心的搭建

成果图片展示
在这里插入图片描述

这个部分设计的难点主要在对页面图片格式以及文字格式样式的设计，熟练掌握css和hml可以让开发的过程更加的顺利，这个其中的下半部分的格式一致在开发过程中可以减少开发的过程和时间

1.我的页面的HMl

<div class="container">
  <div class="user-info">
      <div class="user-info-avatar">
          <image url="" alt="common/icon/nologin.png"></image>
      </div>
      <div class="user-info-detail">
          <text on:click="gotoLogin">
              点击登录
          </text>
      <div>
          <text>
             更多精彩
          </text>
          <div class="user-info-entery">
              <image src="common/icon/qrcode.png" class="ge-icon"></image>
               <image src="common/icon/ge.png" class="ge-icon"></image>
          </div>
      </div>
      </div>
  </div>
    <div class="split-div">
        <div class="div-title">
            <div class="div-icon">
                <image src="common/icon/plan.png">
                </image>
            </div>
            <div class="div-content">
                <text>
                学习计划
                </text>
                <image src="common/icon/ge.png" class="ge-icon"></image>
            </div>
        </div>
        <div class="div-title">
            <div class="div-icon">
                <image src="common/icon/test.png">
                </image>
            </div>
            <div class="div-content">
                <text>
                    评论记录
                </text>
                <image src="common/icon/ge.png" class="ge-icon"></image>
            </div>
        </div>
        <div class="div-title">
            <div class="div-icon">
                <image src="common/icon/record.png">
                </image>
            </div>
            <div class="div-content">
                <text>
                    学习记录
                </text>
                <image src="common/icon/ge.png" class="ge-icon"></image>
            </div>
        </div>
        <div class="div-title">
            <div class="div-icon">
                <image src="common/icon/certificate.png">
                </image>
            </div>
            <div class="div-content">
                <text>
                    证书
                </text>
                <image src="common/icon/ge.png" class="ge-icon"></image>
            </div>
        </div>
    </div>
    <div class="split-div">
        <div class="div-title">
            <div class="div-icon">
                <image src="common/icon/policy.png">
                </image>
            </div>
            <div class="div-content">
                <text>
                 机构注册与服务协议
                </text>
                <image src="common/icon/ge.png" class="ge-icon"></image>
            </div>
        </div>
        <div class="div-title">
            <div class="div-icon">
                <image src="common/icon/policy.png">
                </image>
            </div>
            <div class="div-content">
                <text>
                    违规信息处置
                </text>
                <image src="common/icon/ge.png" class="ge-icon"></image>
            </div>
        </div>
        <div class="div-title">
            <div class="div-icon">
                <image src="common/icon/policy.png">
                </image>
            </div>
            <div class="div-content">
                <text>
                    隐私政策
                </text>
                <image src="common/icon/ge.png" class="ge-icon"></image>
            </div>
        </div>
    </div>
    <div class="split-div">
        <div class="div-title">
            <div class="div-icon">
                <image src="common/icon/question.png">
                </image>
            </div>
            <div class="div-content">
                <text>
                常见问题
                </text>
                <image src="common/icon/ge.png" class="ge-icon"></image>
            </div>
        </div>
    </div>
</div>

2.我的页面的css

.container {
   flex-direction: column;
    align-items: center;
    background-color: #EDEDED;
    width: 100%;
    height: 100%;
}
.user-info{
    width: 100%;
    height: 140px;
    background-color: #FFFFFF;
}.user-info-avatar{
    width: 20%;
    height: 100%;
    justify-content: center;
    align-items: center;
}
.user-info-avatar>image{
    width: 70px;
    height: 70px;
    border-radius: 5px;
}
.user-info-detail{
    width: 725;
    height: 100%;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
}
.user-info-detail>text{
   font-size: 18px;
    font-weight: bold;
}
.user-info-detail>div{
    width: 100%;
    height: 30px;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    color: #BDBDBD;
}
.user-info-detail>div>text{
    font-size: 14px;
    color: #BDBDBD;
}
.user-info-entry{
    width: 50px;
    align-items: center;
    justify-content: space-between;
}
.ge-icon{
    width: 13px;
    height: 13px;
    margin-right: 10px;
}
.split-div{
    width: 100%;
    margin-top: 5px;
    flex-direction: column;
    background-color: #FFFFFF;
}
.div-title{
    height: 45px;
    align-items: center;
}
.div-icon{
    width: 10%;
    height: 100%;
    align-items: center;
    justify-content: center;
}
.div-icon>image{
    width: 15px;
    height: 15px;
}
.div-content{
    width: 90%;
    height: 100%;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #E7E7E7;
}
.div-content>text{
    height: 100%;
    font-size: 14px;
    color: #5B5B5B;
}

3.我的页面的js内容

import router from '@system.router';
export default {
    data: {
        title: 'World'
    },
    gotoLogin(){
         router.push({
             url:"pages/login/login"
         })
    }
}

这里的gotologin函数是为后面完成用户登录做一个准备

2.用户登录

项目成果展示
在这里插入图片描述

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

这部分的主要内容就是要设计出用户登录的页面，设计验证的拖拽条以及未完成验证无法进行登录的一个安全保证，同时成功登录后会显示一个加载的过程

1.登录页面的HML

<element src="../loadingDialog/loadingDialog.hml" name="loadingDialog"></element>
<div class="container">
   <div style="width: 100%;height: 70px;">
       <image src="common/images/isoftstone.png" style="width: 160px;height: 30px;object-fit: contain;margin: 20px 0 0 20px;"></image>
   </div>
    <div style="width: 100%; flex-direction: column;align-items: center;justify-content: center;margin-top: 100px;">
        <text style="width: 100%; height: 70px;text-align: center;color: #CD6090;font-size: 28px;font-weight: bold;padding-bottom: 30px;letter-spacing: 5px;" title="title">
          通鸿云课堂
        </text>
        <form onsubmit="login">
        <div style="width: 100%;height: 60px;justify-content: center;">
            <input type="text" style="width: 80%;border-radius: 5px;" name="username" placeholder="请输入手机号/邮箱/个人账号"></input>
        </div>
        <div style="width: 100%;height: 60px;justify-content: center;">
            <input type="password" style="width: 80%;border-radius: 5px;" name="password" placeholder="请输入登录密码"></input>
        </div>
        <div style="width: 100%;height: 60px;justify-content: center;">
            <stack style="width: 100%;height: 100%;flex-direction: column;justify-content: center;align-items: center;">
            <div style="width: 80%;height: 40px;border-radius: 2px;background-color: #F5F5F5;justify-content: center;align-items: center;">
               <text style="font-size: 14px;color: #999999;">
                   向右滑动验证
               </text>
            </div>
            <div style="width: 80%;height: 40px;border-radius: 2px;justify-content: flex-start;align-items: center;">
                <div style="width: {{width}};height: 100%;background-color: aquamarine;justify-content: center;align-items: center;">
                    <block if="{{checked}}">
                        <text style="font-size: 16px;color: white;">
                            验证成功
                        </text>
                    </block>
                    </div>
                    <div on:dragstart="dragstart" on:drag="drag" on:dragend="dragend" style="width: 40px;height: 40px;color: #999999;border-radius: 2px;justify-content: center;align-items: center;">
                        <image src="common/icon/ge.png" style="width: 10px;height: 10px;object-fit: contain;"></image>
                    </div>
            </div>
            </stack>
        </div>
            <block if="{{ischecked}}">
                <div style="width: 100%;height: 22px;align-items: center;justify-content: center;">
                    <text style="width: 80%;font-size: 14px;color: crimson;text-align: left;">
                     请完成验证再进行登录
                    </text>
                </div>
            </block>
        <div style="width: 100%;height: 30px;justify-content: center;">
            <div style="width: 80%;height: 30px;justify-content: space-between;align-items: center;">
                <text style="font-size: 14px;color: #63B8FF;">忘记密码</text>
                <text style="font-size: 14px;color: #63B8FF;" onclick="gotoRegister">快速注册</text>
            </div>
        </div>
        <div style="width: 100%;height: 60px;justify-content: center;align-items: center;">
            <input type="submit" class="btlogin">登    录</input>
        </div>
        </form>
        <loadingdialog id="dialogComp"> </loadingdialog>
    </div>
    <div style="width: 100%;justify-content: center;align-items: center;flex-direction: column;bottom: 50%;">
        <text style="font-size: 12px;color: black;">
        2022 @ EDU Online Harmony OS.
        </text>
        <text style="font-size: 12px;color: black;">
           Design By ISS.
        </text>
    </div>
</div>

2.登录页面的css

.container {
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    position: relative;
    background-image: url('common/images/login-bg.svg');
}
.btlogin{
    width: 80%;
    height: 40px;
    text-align: center;
    font-size: 16px;
    border-radius: 5px;
    background-color: tomato;
}

3.登录页面的js

export default {
    data: {
        width: 0,
        checked: false,
        ischecked: false
    },
    dragstart(e) {

    },
    drag(e) {
        this.width = e.globalx;
    },
    dragend(e) {
        if (this.width < 295) {
            this.width = 0;
        }
        else {
            this.width = 300;
            this.checked = true;
            this.ischecked = false
        }
    },
    gotoRegister(){

    },
    login(e){
        if(!this.checked){
            this.ischecked=true;
            return;
        }
        console.log(e.value.username);
        console.log(e.value.password);
       let loadingDialog = this.$child("dialogComp").$element("loadingDialog");
       loadingDialog.show();
    }
}

4.加载页面的HML

<dialog id="loadingDialog" style="margin-bottom: 50%;width: 120px;height: 120px;border-radius: 10px;">
    <div style="width: 100%;height: 100%;flex-direction: column;justify-content: center;align-items: center;background-color: grey;">
        <progress style="width: 50px;height: 50px;"type="ring" percent="10" secondarypercent="50"></progress>
        <text style="color: white;font-size: 14px;">
          正在加载
        </text>
    </div>
</dialog>

5.加载页面的css

.container {
    display: flex;
    justify-content: center;
    align-items: center;
    left: 0px;
    top: 0px;
    width: 454px;
    height: 454px;
}

.title {
    font-size: 30px;
    text-align: center;
    width: 200px;
    height: 100px;
}

6.加载页面的js

export default {
    data: {
        title: 'World'
    }
}
C_J_W_
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
华为鸿蒙北向应用开发DAY9——来自软通教育项目实训
EternalDrive的博客
06-14 1099
华为鸿蒙北向应用开发
梅科尔工作室——HarmonyOs第二次作业
m0_66405825的博客
07-02 232
无
Harmony在线教育app平台开发开发日志——day10
C_J_W_的博客
06-17 741
day10
Harmony在线教育app平台开发开发日志——day1
C_J_W_的博客
06-06 487
鸿蒙系统实训打卡
Harmony在线教育app平台开发开发日志——day2
C_J_W_的博客
06-09 252
Harmony在线教育app平台开发开发日志-day2
Harmony在线教育app平台开发开发日志——day7
C_J_W_的博客
06-13 267
day7
Harmony在线教育app平台开发开发日志——day5
C_J_W_的博客
06-12 238
day5
Harmony在线教育app平台开发开发日志——day6
C_J_W_的博客
06-12 267
day6
HarmonyOS 开发平台和工具
02-11
HarmonyOS 开发平台整体介绍 HarmonyOS 开发平台新能力
HarmonyOS开发基础
02-12
【HarmonyOS开发基础】是针对开发者学习HarmonyOS应用开发的重要内容，涵盖了移动应用前端界面的定制、国际化和本地化处理以及第三方库的使用等多个关键知识点。在HarmonyOS中，应用程序通常以APP Pack（Application...
基于HarmonyOS开发的旅游app.zip
02-10
包含前端、后端、移动开发、操作系统、人工智能、物联网、信息化管理、数据库、硬件开发、大数据、课程资源、音视频、网站开发等各种技术项目的源码。 包括STM32、ESP8266、PHP、QT、Linux、iOS、C++、Java、python...
HarmonyOS开发工具与平台
04-27
HarmonyOS4.17日上号开发者大会现场PPT资料分享。
基于鸿蒙框架开发系统的生鲜app.zip
01-20
在本项目中，“基于鸿蒙框架开发系统的生鲜app”利用了鸿蒙系统的特性，为用户提供了一款专门针对生鲜购物的应用。 【生鲜app的开发需求】 在开发基于鸿蒙系统的生鲜app时，开发者需要关注以下几点： 1. **用户...
CSS【详解】层叠 z-index （含 z-index 的层叠规则，不同样式的层叠效果）
朝阳39的博客
07-09 634
仅对已定位的元素（）有效，默认值为0，可以为负值。
CSS技巧专栏：一日一例 3.纯CSS实现炫酷多彩按钮特效
uu0216的博客
07-10 1207
CSS的 box-shadow 属性可以用来给一个元素添加一个或多个阴影效果。如果你想要给一个div元素添加多种颜色的投影，你可以通过在box-shadow属性中用逗号分隔多个值对来实现。 上面代码，我们分别给按钮增加了红，黄，蓝，绿四种颜色的投影，并且让投影扩散范围增大，我们看看效果是不是我们想要的。在浏览器中刷新我们的按钮页面，把鼠标移动到按钮上，我们得到了这样的按钮效果：
基于CSS两种菜单创建方式
最新发布
sunbeacher的博客
07-13 741
HTML多种场景下需要菜单的实现，这里提供两种方式： （1）基于CSS的POPUP式菜单 特征：按需显示POPUP菜单，但布局是浮动的。 （2）覆盖式弹出菜单。 特征：按需显示菜单，菜单以弹出窗口模式显示，会覆盖下面的内容
html设计（两种常见的充电效果）
2301_81704123的博客
07-12 1369
title>充电效果
css画半圆&&画圆弧
M1512415的博客
07-12 153
【代码】css画半圆&&画圆弧。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值