Hbuilder完成QQ登录界面的设计

界面的设计"/>

Hbuilder完成QQ登录界面的设计

Hbuilder完成QQ登录界面的设计

源码在最后，基本上下载下来自己改改图片就可以用了

这个使用是使用Hbuilder做的，这个更方便，相对Android Studio来说

老规矩，看结果：(浏览器运行结果)

真机运行结果：

真的是真机画的（嘿嘿嘿）：

用Hbuilder画这个QQ页面没有啥难度，会点儿CSS和Vue就行

index.vue代码如下

<template><view class="content"><view class="avatarWrapper"><view class="avatar"><image class="img" src="../../static/QQ.png" mode="widthFix"></image></view><view><text class="textQQ">QQ</text></view></view><view class="form"><view class="inputWrapper"><input class="input" type="text" value="" placeholder="QQ号/QID/邮箱/手机号" /></view><view class="inputWrapper"><input class="input" type="password" value="" placeholder="输入QQ密码" /></view><view class="service"><view><radio style="transform: scale(0.7)"></radio><text class="accessText">已阅读并同意<text class="textservice">服务协议</text>和<textclass="textservice">QQ隐私保护指引</text></text></view></view><view class="loginWrapper"><view class="loginBtn"><image class="imgright" src="../../static/right38.png" mode="widthFix"></image></view></view></view><view class="otherchoice"><text class="other">手机号登录</text><text>|</text><text class="other">新用户注册</text><text>|</text><text class="other">更多选项</text></view></view>
</template><script>export default {data() {return {}},onLoad() {},methods: {}}
</script><style>.content {width: 100vw;height: 100vh;}.avatarWrapper {height: 30vh;width: 100vw;margin-top: 160upx;display: flex;justify-content: center;}.avatar {height: 100upx;width: 100upx;overflow: hidden;}.avatar .img {width: 100%;}.textQQ {font-size: 70upx;}.form {padding: 0 100upx;margin-top: -180px;}.inputWrapper {width: 100%;height: 140upx;background: #f0f0f8;border-radius: 40px;box-sizing: border-box;padding: 0 20px;margin-top: 15px;}.inputWrapper .input {width: 100%;height: 100%;text-align: center;font-size: 15px;}.loginWrapper {height: 30vh;width: 100vw;padding: 40px 110px;margin-top: 15px;}.loginBtn {height: 150upx;width: 150upx;background-color: #f0f0f8;border-radius: 50%;display: flex;justify-content: center;align-items: center;}.loginBtn .imgright {width: 50%;}.service {margin-top: 30px;text-align: center;}.textservice {color: blue;}.accessText {font-size: 12px;}.otherchoice {margin-top: 60px;margin-left: 50px;font-size: 10px;font-weight: 600;}.other {margin: 0 30px;}
</style>

图片资源在源码里

gitbub源码戳我，进去选择qq那个文件夹
Android Studio完成微信朋友圈界面的设计