<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello MUI</title>
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="../css/mui.min.css">
<style>
html,
body {
background-color: #efeff4;
}
.mui-views,
.mui-view,
.mui-pages,
.mui-page,
.mui-page-content {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
background-color: #efeff4;
}
.mui-pages {
top: 46px;
height: auto;
}
.mui-scroll-wrapper,
.mui-scroll {
background-color: #efeff4;
}
.mui-page.mui-transitioning {
-webkit-transition: -webkit-transform 300ms ease;
transition: transform 300ms ease;
}
.mui-page-left {
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
.mui-ios .mui-page-left {
-webkit-transform: translate3d(-20%, 0, 0);
transform: translate3d(-20%, 0, 0);
}
.mui-navbar {
position: fixed;
right: 0;
left: 0;
z-index: 10;
height: 44px;
background-color: #f7f7f8;
}
.mui-navbar .mui-bar {
position: absolute;
background: transparent;
text-align: center;
}
.mui-android .mui-navbar-inner.mui-navbar-left {
opacity: 0;
}
.mui-ios .mui-navbar-left .mui-left,
.mui-ios .mui-navbar-left .mui-center,
.mui-ios .mui-navbar-left .mui-right {
opacity: 0;
}
.mui-navbar .mui-btn-nav {
-webkit-transition: none;
transition: none;
-webkit-transition-duration: .0s;
transition-duration: .0s;
}
.mui-navbar .mui-bar .mui-title {
display: inline-block;
width: auto;
}
.mui-page-shadow {
position: absolute;
right: 100%;
top: 0;
width: 16px;
height: 100%;
z-index: -1;
content: '';
}
.mui-page-shadow {
background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0) 10%, rgba(0, 0, 0, .01) 50%, rgba(0, 0, 0, .2) 100%);
}
.mui-navbar-inner.mui-transitioning,
.mui-navbar-inner .mui-transitioning {
-webkit-transition: opacity 300ms ease, -webkit-transform 300ms ease;
transition: opacity 300ms ease, transform 300ms ease;
}
.mui-page {
display: none;
}
.mui-pages .mui-page {
display: block;
}
.mui-page .mui-table-view:first-child {
margin-top: 15px;
}
.mui-page .mui-table-view:last-child {
margin-bottom: 30px;
}
.mui-table-view {
margin-top: 20px;
}
.mui-table-view span.mui-pull-right {
color: #999;
}
.mui-table-view-divider {
background-color: #efeff4;
font-size: 14px;
}
.mui-table-view-divider:before,
.mui-table-view-divider:after {
height: 0;
}
.head {
height: 40px;
}
#head {
line-height: 40px;
}
.head-img {
width: 40px;
height: 40px;
}
#head-img1 {
position: absolute;
bottom: 10px;
right: 40px;
width: 40px;
height: 40px;
}
.update {
font-style: normal;
color: #999999;
margin-right: -25px;
font-size: 15px
}
.mui-fullscreen {
position: fixed;
z-index: 20;
background-color: #000;
}
.mui-ios .mui-navbar .mui-bar .mui-title {
position: static;
}
/*问题反馈在setting页面单独的css*/
#feedback .mui-popover{
position: fixed;
}
#feedback .mui-table-view:last-child {
margin-bottom: 0px;
}
#feedback .mui-table-view:first-child {
margin-top: 0px;
}
.mui-plus.mui-plus-stream .mui-stream-hidden{
display: none !important;
}
/*问题反馈在setting页面单独的css==end*/
</style>
<link rel="stylesheet" type="text/css" href="../css/feedback.css" />
</head>
<body class="mui-fullscreen">
<!--页面主结构开始-->
<div id="app" class="mui-views">
<div class="mui-view">
<div class="mui-navbar">
</div>
<div class="mui-pages">
</div>
</div>
</div>
<!--页面主结构结束-->
<!--单页面开始-->
<div id="setting" class="mui-page">
<!--页面标题栏开始-->
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<!--<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>返回
</button>-->
<h1 class="mui-center mui-title">个人中心与设置</h1>
</div>
<!--页面标题栏结束-->
<!--页面主内容区开始-->
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell mui-media">
<a class="mui-navigate-right" href="#account">
<img class="mui-media-object mui-pull-left head-img" id="head-img" src="">
<div class="mui-media-body">
Hello MUI
<p class='mui-ellipsis'>账号:hellomui</p>
</div>
</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a id="accountButton" href="#account" class="mui-navigate-right">账号与安全</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#notifications" class="mui-navigate-right">新消息通知</a>
</li>
<li class="mui-table-view-cell">
<a href="#privacy" class="mui-navigate-right">隐私</a>
</li>
<li class="mui-table-view-cell">
<a href="#general" class="mui-navigate-right">通用</a>
</li>
</ul>
<ul class="mui-table-view mui-table-view-chevron">
<li class="mui-table-view-cell">
<a href="#about" class="mui-navigate-right">关于MUI <i class="mui-pull-right update">V3.1.0</i></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell" style="text-align: center;">
<a id="logoutButton">退出登录</a>
</li>
</ul>
</div>
</div>
</div>
<!--页面主内容区结束-->
</div>
<!--单页面结束-->
<div id="account" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-bar-nav">
<button type="button" class="mui-left mui-action-back mui-btn mui-btn-link mui-btn-nav mui-pull-left">
<span class="mui-icon mui-icon-left-nav"></span>返回
</button>
<h1 class="mui-center mui-title">账号与安全</h1>
</div>
<div class="mui-page-content">
<div class="mui-scroll-wrapper">
<div class="mui-scroll">
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a id="head" class="mui-navigate-right">头像
<span class="mui-pull-right head">
<img class="head-img mui-action-preview" id="head-img1" src=""/>
</span>
</a>
</li>
<li class="mui-table-view-cell">
<a>姓名<span class="mui-pull-right">Hbuilder</span></a>
</li>
<li class="mui-table-view-cell">
<a>HBuilder账号<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
<ul class="mui-table-view">
<li class="mui-table-view-cell">
<a>QQ号<span class="mui-pull-right">88888888</span></a>
</li>
<li class="mui-table-view-cell">
<a>手机号<span class="mui-pull-right">18601234567</span></a>
</li>
<li class="mui-table-view-cell">
<a>邮箱地址<span class="mui-pull-right">hbuilder@dcloud.io</span></a>
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="notifications" class="mui-page">
<div class="mui-navbar-inner mui-bar mui-ba
没有合适的资源?快使用搜索试试~ 我知道了~
温馨提示
基于MUI手机APP开发基础框架源代码,打开HBuilder导入项目即可使用,可以通过安卓夜神模拟器进行运行调试,其他具体问题参考mui官方文档。这个只是基础手机APP开发模板,作为学习和交流,二次开发请自调整!压缩包内含有该项目打包的APK文件,可以安装到手机查看效果。大家有问题欢迎指正,谢谢各位!
资源推荐
资源详情
资源评论
收起资源包目录
基于MUI手机APP开发基础框架 (111个子文件)
mymui.apk 8.14MB
.confirmed_dependencies 1018B
mui.min.css 74KB
mui.picker.all.css 6KB
mui.picker.min.css 5KB
mui.dtpicker.css 3KB
icons-extra.css 3KB
mui.imageviewer.css 2KB
feedback.css 2KB
mui.picker.css 2KB
mui.listpicker.css 2KB
mui.indexedlist.css 2KB
feedback-page.css 1KB
mui.poppicker.css 1KB
app.css 462B
style.css 111B
.dependencies 4B
setting.html 30KB
contact.html 10KB
login.html 9KB
home.html 6KB
news.html 5KB
main.html 5KB
imageviewer.html 5KB
guide.html 4KB
mask_side.html 4KB
register.html 4KB
echarts.html 3KB
unlock.html 3KB
forget_password.html 2KB
index.html 2KB
start_3.jpg 243KB
start_1.jpg 191KB
cbd.jpg 140KB
start_2.jpg 129KB
muwu.jpg 112KB
yuantiao.jpg 73KB
shuijiao.jpg 69KB
start_4.jpg 46KB
echarts-all.js 950KB
jquery-1.11.1.js 286KB
mui.js 257KB
city.data-3.js 181KB
strophe-custom-2.0.0.js 174KB
easemob.im-1.0.5.js 144KB
mui.min.js 121KB
common.js 30KB
mui.picker.all.js 30KB
city.data.js 24KB
mui.view.js 20KB
mui.picker.min.js 18KB
json2.js 18KB
mui.dtpicker.js 14KB
mui.previewimage.js 13KB
mui.pullToRefresh.js 12KB
mui.listpicker.js 12KB
mui.pullToRefresh.material.js 12KB
mui.zoom.js 12KB
mui.picker.js 11KB
mui.locker.js 10KB
mui.imageViewer.js 9KB
mui.lazyload.js 8KB
webviewGroup.js 8KB
feedback.js 7KB
mui.indexedlist.js 6KB
mui.poppicker.js 5KB
arttmpl.js 4KB
app.js 4KB
beecloud.js 4KB
feedback-page.js 3KB
mui.lazyload.img.js 3KB
95516.js 1KB
update.js 1KB
immersed.js 934B
shortcut.js 910B
mui.enterfocus.js 574B
manifest.json 11KB
quickstart.md 25KB
1024x1024.png 1.61MB
app_start.png 764KB
256x256.png 137KB
app_logo.png 113KB
192x192.png 81KB
qrcode.png 77KB
180x180.png 71KB
167x167.png 62KB
qq.png 61KB
152x152.png 53KB
144x144.png 48KB
120x120.png 34KB
96x96.png 23KB
87x87.png 19KB
80x80.png 17KB
76x76.png 15KB
72x72.png 14KB
60x60.png 10KB
58x58.png 10KB
48x48.png 7KB
qihoo.png 7KB
user-photo.png 6KB
共 111 条
- 1
- 2
资源评论
- youyin2018-06-02非常的不错,谢谢分享!!!
- cavancao2018-04-19真的非常感谢,分享这么好的资源!最近正好要用到。启动、引导、登录、主页、设置等等一应俱全,基本可以直接用来进行APP开发了,再次感谢
青衫丶烟雨客
- 粉丝: 3
- 资源: 12
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- C# Winform Excel 转 Chart示例视频
- uniapp-小程序-vue
- 台球检测11-YOLO(v5至v11)、COCO、CreateML、Paligemma、TFRecord、VOC数据集合集.rar
- 富芮坤FR8003作为主机连接FR8003抓包文件20241223-135206.pcapng
- 谷歌股票数据集,google股票数据集,Alphabet股份数据集(2004-2024)
- nuget 库官方下载包,可使用解压文件打开解压使用
- 非wine、原生Linux迅雷安装包deb文件,支持Ubuntu、UOS统信、深度Deepin、LinuxMint、Debain系通用
- KUKA机器人安装包,与PROFINET软件包
- 船舶燃料消耗和二氧化碳排放分析数据集,燃料消耗和碳排放关联分析数据
- req-sign、bd-ticket-ree-public加密算法(JS)
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功