>[info] 1.app.js ~~~ { "pages":[ "pages/index/index", "pages/todos/todos", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#0cbf59", "navigationBarTitleText": "haibo'Note", "navigationBarTextStyle":"#fff" } } ~~~ >[info] index.wxml ~~~ <view class='container'> <view class='content'> <view class='info'> <view class='face'><image src='/images/elephant.png'></image></view> <view class='title'>haibo'筆記</view> </view> <view class='login'> <input type='text' placeholder='用戶名或電子郵件' ></input> <input type='text' placeholder='輸入密碼' password></input> </view> <view class='reg'> <button type='primary'>登錄</button> <button>或者,創建賬戶</button> </view> <view class='getpassword'> <navigator url=''>忘記密碼</navigator> </view> </view> <view class='copyright'> <text>Copyright By Haibo</text> </view> </view> ~~~ >[info] index.wxss ~~~ page{height: 100%;font-family: '微軟雅黑';} .container{height: 100%;width:100%;background-color: #eee; display: flex; flex-direction: column; align-items: center; } .content{height: 80%;width: 80%;background-color: #fff; border: 2px solid #dcdcdc; margin: 40px 20px 40px;} .container .copyright{font-size: 14px; color: #d2d2d2;} .info{text-align: center;margin: 40px;} .face{margin-bottom: 10px;} .face image{height: 48px;width: 48px;} .login{display: flex; flex-direction: column;align-items: center;} .login input{width: 80%; border: 1px solid #ccc; margin-bottom: 16px; border-radius: 4px; padding: 5px;font-size: 14px;} .reg{display: flex;flex-direction: column; align-items: center;} .reg button{width: 84%;margin-bottom: 20px;} .getpassword{padding-top: 20px;} .getpassword navigator{text-align: center;font-size: 14px; color:#6aa4c2; } ~~~