一、前言
我是一名物联网爱好者，同时也是一位前端开发学习者，在物联网和前端的道路上执着的走着脚下的路，不知疲倦。最近新结实了武汉市字节码科技EVM团队的万里大神，给我做出了诸多指引，在此深表谢意。接下来，可以开始我的EVM嵌入式虚拟机初体验之旅了。
• 武汉市字节码科技有限公司官网
• EVM物联网虚拟机
• EVM是什么
• EVUE是什么
二、准备
1.参考文档
按照文档，根据文档说明，结合视频，写出5个页面，分别是：电话（带拨号盘），股市，设置，支付宝，微信。
2.实现目标
每个页面写两个子页，最后能够在evue模拟器运行起来。
三、起步
1.开发环境
• EVUE模拟器，点击下载压缩包，内含模拟器和资源文件
• VS Code
2.开始项目
（1）文件目录
C:\Users\wanna\Desktop\EVM模拟器\test\LiteWearable
├── app.js
├── common
│ └── images
│ ├── appbar.camera.flash.auto.selected.bin
│ ├── appbar.chevron.right.bin
│ ├── appbar.control.fastforward.bin
│ ├── appbar.control.pause.bin
│ ├── appbar.control.rewind.bin
│ ├── appbar.fingerprint.bin
│ ├── appbar.foot.bin
│ ├── appbar.forest.bin
│ ├── appbar.new.window.bin
│ ├── appbar.repeat.bin
│ ├── appbar.return.bin
│ ├── appbar.smiley.angry.bin
│ ├── appbar.smiley.cry.bin
│ ├── appbar.smiley.frown.bin
│ ├── appbar.smiley.glasses.bin
│ ├── appbar.smiley.grin.bin
│ ├── appbar.smiley.kiki.bin
│ ├── appbar.smiley.squint.bin
│ ├── appbar.smiley.tounge.bin
│ ├── appbar.smiley.what.bin
│ ├── appbar.sound.3.bin
│ ├── distance.bin
│ ├── dribbble.bin
│ ├── evernote.bin
│ ├── flipboard.bin
│ ├── girl-128×128.bin
│ ├── girl-150×150.bin
│ ├── hotpower.bin
│ ├── instagram.bin
│ ├── microphone-64×64.bin
│ ├── microphone.bin
│ ├── phone-64×64.bin
│ ├── pingfanzhilu.bin
│ ├── pocket.bin
│ ├── rss.bin
│ ├── speed.bin
│ ├── sun.bin
│ ├── time.bin
│ ├── twitter.bin
│ ├── voice-64×64.bin
│ ├── voice.bin
│ ├── whatsapp.bin
│ ├── youtube.bin
│ └── yuyin.bin
├── pages
│ ├── call
│ │ ├── index.css
│ │ ├── index.hml
│ │ └── index.js
│ ├── chart
│ │ ├── index.css
│ │ ├── index.hml
│ │ └── index.js
│ ├── index
│ │ ├── index.css
│ │ ├── index.hml
│ │ └── index.js
│ ├── list
│ │ ├── index.css
│ │ ├── index.hml
│ │ └── index.js
│ ├── music
│ │ ├── index.css
│ │ ├── index.hml
│ │ └── index.js
│ ├── progress
│ │ ├── index.css
│ │ ├── index.hml
│ │ └── index.js
│ ├── ring
│ │ ├── index.css
│ │ ├── index.hml
│ │ └── index.js
│ └── weather
│ ├── index.css
│ ├── index.hml
│ └── index.js
└── viewmodel
├── framework.js
└── viewmodel.js
pages/index/index.hml：此文件定义了index页面的布局，在index页面中用到的组件，以及这些组件的层级关系。该页面是智能手表应用的菜单首页。
（2）编写代码
• 启动图
用VS Code 打开index.hml文件，得到官方示例如下所示代码：
<div class="container">
<image src="./common/images/evue-logo.bin" style="top: 70px;left: 150px;">
</image>
<marquee scrollamount="50" style="top: 240px;left: 104px;width: 240px;height: 35px;text-align: center;color: white;font-size: 30px;">Hello Developer!
</marquee>
<text style="top: 280px;color: white;font-size: 20px;width: 454px;height: 25px;text-align: center;">Power by EVM
</text>
<progress type="horizontal" percent="30" class="out-layer-ring" style="top: 320px;left: 130px;">
</progress>
</div>
分析：
一个页面由组件声明（.hml）、css样式(.css)和script脚本(.js)三部分构成。组件声明是在pages/index/index.hml文件中实现。首先，分析要显示Welcome!需要用到哪些组件，注意整个启动页面由一对<div><div>标签包裹。显示文字使用<text>组件，显示启动logo使用<image>组件,显示流动的文字使用<marquee>组件，显示页面加载的进度条使用<progress>组件。index.hml文件中代码示例如下：
<div class="container">
<!-- 模拟器启动logo图标 -->
<image src="./common/images/evue-logo.bin" style="top: 70px;left: 150px;"></image>
<!-- 模拟器启动时流动的文字，需要英文，中文不显示图标 -->
<marquee scrollamount="50" style="top: 240px;left: 104px;width: 240px;height: 35px;text-align: center;color: white;font-size: 30px;">Welcome!</marquee>
<!-- 模拟器启动时版权信息 -->
<text style="top: 280px;color: white;font-size: 20px;width: 454px;height: 25px;text-align: center;">Power by Cloud-cola</text>
<!-- 页面加载的进度条 -->
<progress type="horizontal" percent="60" class="out-layer-ring" style="top: 320px;left: 130px;"></progress>
</div>
最终启动图效果是这样的：
这里有一点，在pages/index/index.js 文件中定义了路由和各种状态，包括onInit 、onReady 、onShow 、onHide 、 onDestroy 等，具体含义可参考EVUE文档。其中onShow:function()这个方法控制着启动图响应完毕后进入系统首页，定时器setTimeout(function()) 中设置了2S后进入 uri: “pages/dock/index” 这个首页的路由。
onShow: function () {
print("==========onShow index==========")
setTimeout(function(){
router.push({ uri: "pages/dock/index" })
}, 2000)
},
• 系统首页
系统首页在\test\LiteWearable\pages\dock目录下,dock\index.hml是首页结构，现在分别显示电话（带拨号盘），股市，微信，设置，支付宝，代码如下：
<div class="container">
<text style="top: 30px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">古德猫</text>
<list class="list-container">
<list-item class="list-item" url="pages/call/index" onclick="onPageRedirect">
<image src="./common/images/whatsapp.bin" class="app-icon"></image>
<text class="maintitle">电话</text>
<image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
</list-item>
<list-item class="list-item" url="pages/chart/index" onclick="onPageRedirect">
<image src="./common/images/flipboard.bin" class="app-icon"></image>
<text class="maintitle">股市</text>
<image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
</list-item>
<list-item class="list-item" url="pages/about-djf/index" onclick="onPageRedirect">
<image src="./common/images/dribbble.bin" class="app-icon"></image>
<text class="maintitle">微信</text>
<image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
</list-item>
<list-item class="list-item" url="pages/about-qq/index" onclick="onPageRedirect">
<image src="./common/images/evernote.bin" class="app-icon"></image>
<text class="maintitle">支付宝</text>
<image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
</list-item>
<list-item class="list-item" url="pages/about-gzh/index" onclick="onPageRedirect">
<image src="./common/images/flipboard.bin" class="app-icon"></image>
<text class="maintitle">设置</text>
<image src="./common/images/appbar.chevron.right.bin" class="arrow-icon"></image>
</list-item>
</list>
</div>
分析：
每一对<list-item>、</list-item> 标签为列表中的一员，url=“pages/call/index” 是点击对应列表成员后跳转的路由， onclick=“onPageRedirect” 是点击事件，对应在dock\index.js中的onPageRedirect 方法。首页运行图如下：
现在已经介绍完了开发环境、文件目录以及如何开始一个项目，接下来开发具体的需求。
四、开始
1.电话页面
需求：实现电话页面子列表页面，其中拨号键盘项要点击后显示拨号键盘，其他项用“暂无记录”代替。
（1）子列表页面
包含通讯录、拨号盘、通话列表、语音留言。HML代码如下，其样式.css和行为.js在对应文件中。
<div class="container">
<text style="top: 40px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">电话</text>
<list class="list-container">
<list-item class="list-item" url="pages/call/note/index" onclick="onPageRedirect">
<image src="./common/images/appbar.smiley.kiki.bin" class="app-icon"></image>
<text class="maintitle">通讯录</text>
</list-item>
<list-item class="list-item" url="pages/call/keyboard/index" onclick="onPageRedirect">
<image src="./common/images/appbar.smiley.tounge.bin" class="app-icon"></image>
<text class="maintitle">拨号键盘</text>
</list-item>
<list-item class="list-item" url="pages/call/list/index" onclick="onPageRedirect">
<image src="./common/images/appbar.foot.bin" class="app-icon"></image>
<text class="maintitle">通话列表</text>
</list-item>
<list-item class="list-item" url="pages/call/voice/index" onclick="onPageRedirect">
<image src="./common/images/appbar.fingerprint.bin" class="app-icon"></image>
<text class="maintitle">语音留言</text>
</list-item>
</list>
<image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>
效果图
（2）拨号键盘
根据拨号键盘的路由url=“pages/call/keyboard/index” 可知，需要在call目录下新建keyboard文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致，模拟器才可以识别。通讯录、通话列表和语音留言原理与拨号键盘类似。
HTML代码：
<div class="container">
<text style="top: 40px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">拨号键盘</text>
<div class="list-container">
<div class="list-item1"><text class="maintitle1">1</text></div>
<div class="list-item2"><text class="maintitle2">2</text></div>
<div class="list-item3"><text class="maintitle3">3</text></div>
<div class="list-item4"><text class="maintitle4">4</text></div>
<div class="list-item5"><text class="maintitle5">5</text></div>
<div class="list-item6"><text class="maintitle6">6</text></div>
<div class="list-item7"><text class="maintitle7">7</text></div>
<div class="list-item8"><text class="maintitle8">8</text></div>
<div class="list-item9"><text class="maintitle9">9</text></div>
<div class="list-itema"><text class="maintitlea">+</text></div>
<div class="list-item0"><text class="maintitle0">0</text></div>
<div class="list-itemb"><text class="maintitleb">呼叫</text></div>
</div>
<image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>
CSS代码：
.container {
display: flex;
/* align-items: center;
justify-content: center; */
width: 454px;
height: 454px;
margin: 0px;
padding: 0px;
background-color: black;
}
.list-container {
width: 300px;
height: 250px;
left: 75px;
top: 140px;
border-width: 0px;
background-color: black;
}
.list-item1 {
width: 90px;
height: 50px;
left: 10px;
top:10px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-item2 {
width: 90px;
height: 50px;
left: 105px;
top:10px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-item3 {
width: 90px;
height: 50px;
left: 200px;
top:10px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-item4 {
width: 90px;
height: 50px;
left: 10px;
top:65px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-item5 {
width: 90px;
height: 50px;
left: 105px;
top:65px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-item6 {
width: 90px;
height: 50px;
left: 200px;
top:65px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-item7 {
width: 90px;
height: 50px;
left: 10px;
top:120px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-item8 {
width: 90px;
height: 50px;
left: 105px;
top:120px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-item9 {
width: 90px;
height: 50px;
left: 200px;
top:120px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-itema {
width: 90px;
height: 50px;
left: 10px;
top:175px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-item0 {
width: 90px;
height: 50px;
left: 105px;
top:175px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.list-itemb {
width: 90px;
height: 50px;
left: 200px;
top:175px;
background-color: gray;
border-width: 1px;
border-radius: 10px;
}
.maintitle1 {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitle2 {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitle3 {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitle4 {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitle5 {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitle6 {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitle7 {
top: 20px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitle8 {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitle9 {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitlea {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitle0 {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
.maintitleb {
top: 10px;
left: 30px;
color: white;
font-family: simsun;
font-size: 30px;
}
效果图：
2.股市页面
股市页面的路由url=“pages/market/index” 可知，需要在pages目录下新建market文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致。
HTML代码
<div class="container">
<text style="top: 30px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">股市</text>
<list class="list-container">
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">中国移动</text>
<text style="top: 100px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 50px;">0.00</text>
<text style="top: 160px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">0.00(一)</text>
<text style="top: 200px;left:20px;color: white;width: 280px;height: 25px;text-align:left;font-family: simsun;font-size: 20px;">无可用走势图</text>
</list-item>
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">中国联通</text>
<text style="top: 100px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 50px;">0.00</text>
<text style="top: 160px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">0.00(一)</text>
<text style="top: 200px;left:20px;color: white;width: 280px;height: 25px;text-align:left;font-family: simsun;font-size: 20px;">无可用走势图</text>
</list-item>
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">中国电信</text>
<text style="top: 100px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 50px;">0.00</text>
<text style="top: 160px;left:20px;color: red;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">0.00(一)</text>
<text style="top: 200px;left:20px;color: white;width: 280px;height: 25px;text-align:left;font-family: simsun;font-size: 20px;">无可用走势图</text>
</list-item>
</list>
<image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>
CSS代码
.container {
display: flex;
/* align-items: center;
justify-content: center; */
width: 454px;
height: 454px;
margin: 0px;
padding: 0px;
background-color: black;
}
.list-container {
width: 300px;
height: 300px;
left: 75px;
top: 100px;
border-width: 0px;
background-color: black;
border-radius: 10px;
}
.list-item {
width: 300px;
height: 300px;
left: 10px;
top:10px;
background-color: black;
border-width: 0px;
}
效果图
3.微信页面
微信页面的路由url=“pages/weichat/index” 可知，需要在pages目录下新建weichat文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致。
HTML代码
<div class="container">
<text style="top: 30px;color: green;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">微信</text>
<list class="list-container">
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">狗蛋儿</text>
<text style="top: 40px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">晚上好</text>
</list-item>
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">王大锤</text>
<text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">吃香蕉</text>
</list-item>
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">小福贵</text>
<text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">今天天气不错</text>
</list-item>
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">二憨子</text>
<text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">明早吃早点</text>
</list-item>
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">隔壁老王</text>
<text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">明早吃早点</text>
</list-item>
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">李元霸</text>
<text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">明早吃早点</text>
</list-item>
<list-item class="list-item">
<text style="top: 20px;left:20px;color: white;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">提兜</text>
<text style="top: 45px;left:20px;color: green;width: 280px;height: 25px;text-align: left;font-family: simsun;font-size: 20px;">明早吃早点</text>
</list-item>
</list>
<image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>
CSS代码
.container {
display: flex;
/* align-items: center;
justify-content: center; */
width: 454px;
height: 454px;
margin: 0px;
padding: 0px;
background-color: black;
}
.list-container {
width: 300px;
height: 300px;
left: 75px;
top: 100px;
border-width: 0px;
background-color: black;
border-radius: 10px;
}
.list-item {
width: 300px;
height: 70px;
left: 10px;
top:10px;
border-width: 0px;
background-color: black;
}
效果图
4.支付宝页面
支付宝面的路由url=“pages/alipay/index” 可知，需要在pages目录下新建alipay文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致。
HTML代码
<div class="container">
<text style="top: 30px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">设置</text>
<list class="list-container">
<list-item class="list-item" url="pages/alipay/qrode/index" onclick="onPageRedirect">
<image src="./common/images/flipboard.bin" class="app-icon"></image>
<text class="maintitle">付款码</text>
</list-item>
<list-item class="list-item" url="pages/alipay/qrode/index" onclick="onPageRedirect">
<image src="./common/images/dribbble.bin" class="app-icon"></image>
<text class="maintitle">收款码</text>
</list-item>
<list-item class="list-item" url="" onclick="onPageRedirect">
<image src="./common/images/evernote.bin" class="app-icon"></image>
<text class="maintitle">收能量</text>
</list-item>
<list-item class="list-item" url="" onclick="onPageRedirect">
<image src="./common/images/flipboard.bin" class="app-icon"></image>
<text class="maintitle">查收益</text>
</list-item>
<list-item class="list-item" url="" onclick="onPageRedirect">
<image src="./common/images/flipboard.bin" class="app-icon"></image>
<text class="maintitle">查汇率</text>
</list-item>
<list-item class="list-item" url="" onclick="onPageRedirect">
<image src="./common/images/flipboard.bin" class="app-icon"></image>
<text class="maintitle">支付设置</text>
</list-item>
</list>
<image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>
CSS代码
.container {
display: flex;
/* align-items: center;
justify-content: center; */
width: 454px;
height: 454px;
margin: 0px;
padding: 0px;
background-color: black;
}
.list-container {
width: 300px;
height: 300px;
left: 75px;
top: 90px;
border-width: 0px;
background-color: black;
}
.list-item {
width: 454px;
height: 80px;
left: 0px;
background-color: black;
border-width: 0px;
border-color: red;
}
.app-icon {
top: 20px;
left: 100px;
}
.maintitle {
top: 40px;
left: 180px;
color: white;
width: 130px;
height: 35px;
font-family: simsun;
font-size: 20px;
}
效果图
5.设置页面
设置页面的路由url=“pages/settings/index” 可知，需要在pages目录下新建settings文件夹，里面分别是index.hml 、index.css 、index.js ，这三个子文件名字需要保持一致。
HTML代码
<div class="container">
<text style="top: 30px;color: white;width: 454px;height: 35px;text-align: center;font-family: simsun;font-size: 30px;">设置</text>
<list class="list-container">
<list-item class="list-item">
<image src="./common/images/whatsapp.bin" class="app-icon"></image>
<text class="maintitle">无线和网络</text>
</list-item>
<list-item class="list-item" url="" onclick="onPageRedirect">
<image src="./common/images/flipboard.bin" class="app-icon"></image>
<text class="maintitle">设备连接</text>
</list-item>
<list-item class="list-item" url="" onclick="onPageRedirect">
<image src="./common/images/dribbble.bin" class="app-icon"></image>
<text class="maintitle">桌面和壁纸</text>
</list-item>
<list-item class="list-item" url="" onclick="onPageRedirect">
<image src="./common/images/evernote.bin" class="app-icon"></image>
<text class="maintitle">显示</text>
</list-item>
<list-item class="list-item" url="" onclick="onPageRedirect">
<image src="./common/images/flipboard.bin" class="app-icon"></image>
<text class="maintitle">通知</text>
</list-item>
</list>
<image src="./common/images/appbar.return.bin" style="top: 180px;left: 10px;" onclick="onReturn"></image>
</div>
CSS代码
.container {
display: flex;
/* align-items: center;
justify-content: center; */
width: 454px;
height: 454px;
margin: 0px;
padding: 0px;
background-color: black;
}
.list-container {
width: 300px;
height: 300px;
left: 75px;
top: 90px;
border-width: 0px;
background-color: black;
}
.list-item {
width: 454px;
height: 80px;
left: 0px;
background-color: black;
border-width: 0px;
border-color: red;
}
.app-icon {
top: 20px;
left: 100px;
}
.maintitle {
top: 40px;
left: 180px;
color: white;
width: 130px;
height: 35px;
font-family: simsun;
font-size: 20px;
}
效果图
五、完整预览