diff --git a/miniprogram/app.json b/miniprogram/app.json
index e390c4ddac4e31d645fd86efab65e2dce9036d33..f4d1efd21480f4cfc0ef36ea5c145c51fcef699d 100644
--- a/miniprogram/app.json
+++ b/miniprogram/app.json
@@ -22,13 +22,14 @@
   "window": {
     "backgroundColor": "#F6F6F6",
     "backgroundTextStyle": "light",
-    "navigationBarBackgroundColor": "#F6F6F6",
+    "navigationBarBackgroundColor": "#07c160",
     "navigationBarTitleText": "同乘码",
-    "navigationBarTextStyle": "black"
+    "navigationBarTextStyle": "white"
   },
   "sitemapLocation": "sitemap.json",
   "style": "v2",
   "tabBar": {
+    "borderStyle": "white",
     "list": [
       {
         "pagePath": "pages/index/index",
diff --git a/miniprogram/app.wxss b/miniprogram/app.wxss
index 82678d6779dba96f4169175465956d0373c81264..f4170d28cf1561ea7826012c57bae26e7c9346b7 100644
--- a/miniprogram/app.wxss
+++ b/miniprogram/app.wxss
@@ -18,7 +18,6 @@ button::after{
   border: none;
 }
 
-
 page {
   background: #f6f6f6;
   display: flex;
diff --git a/miniprogram/pages/index/index.js b/miniprogram/pages/index/index.js
index 974114538c16c45f20283e3bd9a588972dae8d17..d5f515ea371a16160e320f80909a262fe9da282a 100644
--- a/miniprogram/pages/index/index.js
+++ b/miniprogram/pages/index/index.js
@@ -35,7 +35,8 @@ Page({
         name: '其他',
         value: 'other'
       }
-    ]
+    ],
+    introductionVisible: false
   },
 
   onLoad: function() {
@@ -49,14 +50,6 @@ Page({
     //   url: '../room/room?roomId=da51bd8c5e3e49f40c2d9444070f9b02',
     // })
 
-    const titles = ['快速建群', '我的同乘']
-    const tabs = titles.map(item => ({
-      title: item
-    }))
-    this.setData({
-      tabs
-    })
-
     var ddstr = getDateStr()
     this.setData({
       date: ddstr
@@ -99,7 +92,7 @@ Page({
       case "other":
         this.setData({
           typeName: '其他工具',
-          hitValue: '如小龙村到小马村的三轮车'
+          hitValue: '如江村到新村的三轮车'
         })
         break
     }
@@ -118,8 +111,8 @@ Page({
     }
   },
 
-  onGetUserInfo(e){
-    if(!e.detail.userInfo){
+  onGetUserInfo(e) {
+    if (!e.detail.userInfo) {
       wx.showToast({
         title: '请允许获取信息',
         icon: 'none',
@@ -177,14 +170,14 @@ Page({
     })
   },
 
-  joinRoom: function(){
+  joinRoom: function() {
     var roomId = this.data.roomId
     var openId = app.globalData.openid
     var userInfo = this.data.userInfo
-    if(!userInfo)
-    var self = this
-    if(!openId){
-      setTimeout(function(){
+    if (!userInfo)
+      var self = this
+    if (!openId) {
+      setTimeout(function() {
         self.joinRoom(roomId, userInfo)
       }, 2000)
       return
@@ -197,7 +190,7 @@ Page({
         src: userInfo.avatarUrl,
         userInfo: userInfo,
       },
-      success: function(e){
+      success: function(e) {
         console.log("join succ", e)
       },
       fail: console.log
@@ -361,5 +354,17 @@ Page({
       default:
         break
     }
+  },
+
+  showIntroduction: function(e) {
+    this.setData({
+      introductionVisible: true
+    })
+  },
+
+  closeIntroduction: function(e) {
+    this.setData({
+      introductionVisible: false
+    })
   }
 })
\ No newline at end of file
diff --git a/miniprogram/pages/index/index.json b/miniprogram/pages/index/index.json
index 5deac75690d49f737d155d6329608bcb413da303..eb0d4bdfb2817e507235b410c2212a9ef538ea11 100644
--- a/miniprogram/pages/index/index.json
+++ b/miniprogram/pages/index/index.json
@@ -9,6 +9,7 @@
     "mp-checkbox-group": "../components/checkbox-group/checkbox-group",
     "mp-form": "../components/form/form",
     "mp-slideview": "../components/slideview/slideview",
-    "mp-icon": "../components/icon/icon"
+    "mp-icon": "../components/icon/icon",
+    "mp-dialog": "../components/dialog/dialog"
   }
 }
\ No newline at end of file
diff --git a/miniprogram/pages/index/index.wxml b/miniprogram/pages/index/index.wxml
index b119fb36344c0fda2b691d8726e074183f3cfd50..1cafb19b411e46c3407fc1cf1aa3d80048ea5e49 100644
--- a/miniprogram/pages/index/index.wxml
+++ b/miniprogram/pages/index/index.wxml
@@ -1,66 +1,81 @@
-<!-- banner -->
-<view class="yq-full-width yq-banner">
-  <view style="padding:10px">
-    <text class="yq-title">全国新冠肺炎疫情</text>
-    <text class="yq-subtitle">同乘码</text>
+<view class="yq-root">
+  <view class="yq-banner">
+    <view class="yq-center">
+      <mp-icon icon="group-detail" color="white" size="{{16}}"></mp-icon>
+      <text class="yq-m-l yq-title">全国新冠肺炎疫情同乘信息</text>
+      <text class="yq-m-l yq-show-info" bindtap="showIntroduction">查看说明</text>
+    </view>
   </view>
-</view>
-
-<view class="page">
-  <view class="page__bd">
-    <form bindsubmit="formSubmit" bindreset="formReset">
-      <view class="weui-cells__title">乘坐信息</view>
-      <view class="weui-cells weui-cells_after-title">
-        <view class="weui-cell weui-cell_select">
-          <view class="weui-cell__hd weui-cell__hd_in-select-after">
-            <view class="weui-label" style="margin-left:15px">交通类型</view>
-          </view>
-          <view class="weui-cell__bd">
-            <picker name="typeName" bindchange="bindTypeChange" value="{{radioItems[trafficIndex].value}}" range="{{trafficTypes}}">
-              <view class="weui-select" style="margin-left:-15px">{{radioItems[trafficIndex].name}}</view>
-            </picker>
-          </view>
-        </view>
-        <view class="weui-cell ">
-          <view class="weui-cell__hd">
-            <view class="weui-label">{{typeName}}</view>
-          </view>
-          <view class="weui-cell__bd">
-            <input name="typeValue" class="weui-input" placeholder="{{hitValue}}" />
-          </view>
+  <view class="yq-traffic-info-container">
+    <view class="yq-traffic-info">
+      <view class="page" style="padding-bottom:20px">
+        <view class="page__bd">
+          <form bindsubmit="formSubmit" bindreset="formReset" ext-class="yq-no-border">
+            <!-- <view class="weui-cells__title">乘坐信息</view> -->
+            <view class="">
+              <view class="weui-cell weui-cell_select">
+                <view class="weui-cell__hd weui-cell__hd_in-select-after">
+                  <view class="weui-label" style="width:140px;margin-left:15px">交通类型</view>
+                </view>
+                <view class="weui-cell__bd">
+                  <picker name="typeName" bindchange="bindTypeChange" value="{{radioItems[trafficIndex].value}}" range="{{trafficTypes}}">
+                    <view class="weui-select" style="margin-left:-15px">{{radioItems[trafficIndex].name}}</view>
+                  </picker>
+                </view>
+              </view>
+              <view class="weui-cell ">
+                <view class="weui-cell__hd">
+                  <view class="weui-label" style="width:140px">{{typeName}}</view>
+                </view>
+                <view class="weui-cell__bd">
+                  <input name="typeValue" class="weui-input" placeholder="{{hitValue}}" />
+                </view>
+              </view>
+              <view class="weui-cell ">
+                <view class="weui-cell__hd">
+                  <view class="weui-label" style="width:140px">日期</view>
+                </view>
+                <view class="weui-cell__bd">
+                  <picker name="date" mode="date" value="{{date}}" start="2019-01-01" end="2020-12-31" bindchange="bindDateChange">
+                    <view class="weui-input">{{date}}</view>
+                  </picker>
+                </view>
+              </view>
+            </view>
+            <!-- 提交 -->
+            <view class="yq-m-t">
+              <button class="weui-btn" bindgetuserinfo="onGetUserInfo" open-type="getUserInfo" type="primary" formType="submit">
+                生成二维码
+              </button>
+            </view>
+          </form>
         </view>
-        <view class="weui-cell ">
-          <view class="weui-cell__hd">
-            <view class="weui-label">日期</view>
-          </view>
-          <view class="weui-cell__bd">
-            <picker name="date" mode="date" value="{{date}}" start="2019-01-01" end="2020-12-31" bindchange="bindDateChange">
-              <view class="weui-input">{{date}}</view>
-            </picker>
-          </view>
-        </view>
-      </view>
-      <!-- 提交 -->
-      <view class="weui-btn-area" style="margin-bottom:40px">
-        <button class="weui-btn" bindgetuserinfo="onGetUserInfo" open-type="getUserInfo" type="primary" formType="submit">
-        生成二维码
-        </button>
       </view>
-    </form>
+    </view>
   </view>
+  <view class="yq-body">
+    <view class="wxcode" wx:if="{{wxacodeResult}}" style="width:100%;background-color:white;text-align:center;padding:20px 0px">
+      <image src="{{wxacodeSrc}}" show-menu-by-longpress='true' mode="aspectFit" style="margin:0 auto"></image>
+      <navigator url="../room/room?roomId={{roomId}}" open-type="navigate" class="uploader-text yq-m-t">
+        <button type='primary'>查看同乘信息</button>
+      </navigator>
+    </view>
+    <view class="yq-footer"></view>
+  </view>
+  <!-- dialogs -->
+  <mp-dialog title="使用说明" show="{{introductionVisible}}" bindbuttontap="closeIntroduction" buttons="{{[{text: '确定'}]}}">
+    <view style="text-align:left">
+      <view>1. 乘坐交通工具时生成二维码, 给同乘的旅客扫码进群 </view>
+      <view>2. 进群后, 如有疫情请主动上报, 同时平台也会收集信息, 有疫情时主动微信通知进群的旅客</view>
+      <view>3. 同一日期同一趟交通工具多次生成的同一个二维码, 重复生成不影响</view>
+    </view>
+  </mp-dialog>
 </view>
 
-<view class="wxcode" wx:if="{{wxacodeResult}}" style="margin-bottom:100px;text-align:center">
-  <image src="{{wxacodeSrc}}" show-menu-by-longpress='true' mode="aspectFit" style="margin:0 auto"></image>
-
-  <navigator url="../room/room?roomId={{roomId}}" open-type="navigate" class="uploader-text">
-    <button type='primary'>现在进群</button>
-  </navigator>
-</view>
-
-<view style="padding: 15px">
-  <view>使用说明:</view>
-  <view>1 乘坐交通工具时生成二维码, 给同乘的旅客扫码进群 </view>
-  <view>2 进群后, 如有疫情请主动上报, 同时平台也会收集信息, 有疫情时主动微信通知进群的旅客</view>
-  <view>3 同一日期同一趟交通工具多次生成的同一个二维码, 重复生成不影响</view>
-</view>
\ No newline at end of file
+<!-- banner -->
+<!-- <view class="yq-full-width yq-banner">
+  <view style="padding:10px">
+    <text class="yq-title">全国新冠肺炎疫情</text>
+    <text class="yq-subtitle">同乘码</text>
+  </view>
+</view> -->
\ No newline at end of file
diff --git a/miniprogram/pages/index/index.wxss b/miniprogram/pages/index/index.wxss
index 95111f1d6a9b4b45b110f43e159cb636119daeee..6ea00d3e41387ecbeba7451f527b943853571127 100644
--- a/miniprogram/pages/index/index.wxss
+++ b/miniprogram/pages/index/index.wxss
@@ -154,6 +154,13 @@ page {
   word-break: break-all;
 }
 
+.yq-border-test {
+  border: 1px #000 solid;
+}
+
+.yq-no-border {
+  border-style: none;
+}
 
 .yq-m-l {
   margin-left: 15rpx;
@@ -163,10 +170,13 @@ page {
   margin-left: 30rpx;
 }
 
+.yq-m-t {
+  margin-top: 15rpx;
+}
 
 .yq-title {
-  font-size: 12px;
-  padding-left: 15px;
+  font-size: 16px;
+  line-height: 16px;
 }
 
 .yq-subtitle {
@@ -184,9 +194,39 @@ page {
   padding: 5px;
 }
 
+.yq-root {
+  width: 100%;
+}
+
 .yq-banner {
+  width: 100%;
+  position: relative;
   background-color: rgb(7, 193, 96);
   color: white;
+  height: 90px;
+}
+
+.yq-traffic-info-container {
+  width: 100%;
+  height: auto;
+  position: absolute;
+  top: 40px;
+}
+
+.yq-traffic-info {
+  width: 90%;
+  height: auto;
+  margin: 0 auto;
+  background-color: white;
+  border-radius: 10px;
+}
+
+.yq-body {
+  width: 100%;
+  /* height: 500px; */
+  position: relative;
+  top: 200px;
+  background-color: #f6f6f6;
 }
 
 .yq-main {
@@ -195,10 +235,31 @@ page {
   padding-left: 15px;
 }
 
+.yq-center {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .yq-test {
   margin-left: -5px;
 }
 
+.yq-show-info {
+  font-size: 10px;
+  line-height: 16px;
+  background-color: #0aad58;
+  opacity: 0.5;
+  border-radius: 5px;
+  padding: 3px 5px;
+}
+
+.yq-footer {
+  width: 100%;
+  height: 1px;
+  background-color: #f6f6f6;
+}
+
 .tab-bar-title__selected {
     font-size: 16px;
     font-weight: bold;