step4 主页添加logo图片和两个picker选择器

entry/src/main/js/default/pages/index/index.css

-.container {
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  width: 454px;
-  height: 454px;
+.container1 {
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    width: 454px;
+    height: 454px;
+}
+.container2 {
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    margin-top: 50px;
+    width: 454px;
+    height: 250px;
+}
+.pv1 {
+    width: 30px;
+    height: 250px;
+}
+.pv2 {
+    width: 80px;
+    height: 250px;
+}
+.txt {
+    text-align: center;
+    width: 50px;
+    height: 36px;
 }
 .title {
-  font-size: 30px;
-  text-align: center;
-  width: 200px;
-  height: 100px;
+    font-size: 30px;
+    text-align: center;
+    width: 200px;
+    height: 100px;
+}
+.img {
+    width: 208px;
+    height: 208px;
+    margin: 0 15px;
 }
 .btn {
-  width:200px;
-  height:50px;
-
+    width: 200px;
+    height: 50px;
 }

entry/src/main/js/default/pages/index/index.hml

-<div class="container">
-  <text class="title">
-    Hello {{title}}
-  </text>
+<div class="container1">
+  <div class="container2">
+    <picker-view class="pv1" range="{{picker1range}}"></picker-view>
+    <text class="txt">分</text>
+    <image src="common/hongmeng.png" class="img"></image>
+    <picker-view class="pv2" range="{{picker2range}}"></picker-view>
+  </div>
   <input type="button" value="点我" class="btn" onclick="clickAction"></input>
 </div>

entry/src/main/js/default/pages/index/index.js

@@ -2,7 +2,8 @@ import router from '@system.router';
 
 export default {
   data: {
-    title: 'World'
+    picker1range: ["1", "2", "3"],
+    picker2range: ["较慢", "舒缓", "较快"]
   },
   clickAction() {
     router.replace({