feature：修改首页，连接设备页的UI

pages/bluConnect/bleconnect.js

@@ -9,9 +9,7 @@ Page(
     isScaning: false,
     connectStatus: 0,
     connectText: "连接中",
-    connectTips: "确保蓝牙已经打开",
-
-    
+    connectTips: "确保手机蓝牙已经打开",
     userFuzzyLocation: true,
     nvabarData: {
       showCapsule: 1, //是否显示左上角图标   1表示显示    0表示不显示
@@ -22,6 +20,12 @@ Page(
         })
       }
     },
+    isNotruter: false,
+    deviceItem: {
+      "pic":"../../img/g.png",
+      "address":"",
+      "name":"钢琴音箱"
+    }
   },  getBluetoothStatusCallck(v) {
     this.setData({
       scopeBluetooth: v

pages/bluConnect/bleconnect.wxml

@@ -2,15 +2,13 @@
 <view class="container">
   <nav-bar bind:goBack="_goBack" nav-bgc-class="ex-nav-bgc-class" nav-title-class="ex-nav-title-class" ex-back-pre="ex-back-pre" navbar-data='{{nvabarData}}'></nav-bar>
   <!-- <scroll-view class="scrollClass" scroll-y="true"> -->
-  <image class="device_pic_class" src="../../img/a.png" mode="scaleToFill" />
-  <view class="text_class">
-    <text class="scanDeviceClass">搜索钢琴音箱</text>
-    <view wx:if="{{isScaning}}">{{connectTips}}</view>
+  <image class="device_pic_class" src="{{deviceItem.pic}}" mode="scaleToFill" />
+    <text class="scanDeviceClass">搜索{{deviceItem.name}}</text>
+    <view class="connect_tips" wx:if="{{connectStatus != 4}}">{{connectTips}}</view>
     <span wx:if="{{connectStatus == 4}}" class="scan_device_status_class">
       <image class="scan_device_status_img_class" src="../../img/a.png" mode="scaleToFill" />
       <text class="scan_device_status_text_class">{{connectText}}</text>
     </span>
-  </view>
   <view style="flex: 1;  "></view>
 <view style="justify-content: center;  display: flex;">  <button class="connect_btn_class">连接</button>
 </view>

pages/bluConnect/bleconnect.wxss

@@ -11,10 +11,9 @@
 
 .container .device_pic_class {
   height: 300rpx;
-  /* width: 300rpx; */
-  margin-top: 56rpx;
-  margin-left: 60rpx;
-  margin-right: 60rpx;
+  margin-top: 160rpx;
+  padding-left: 60rpx;
+  padding-right: 60rpx;
 
 }
 
@@ -26,10 +25,17 @@
 }
 
 .container .scanDeviceClass {
-  margin-top: 16rpx;
+  margin-top: 60rpx;
   margin-left: 16rpx;
   margin-right: 16rpx;
+text-align: center;
+}
 
+.container .connect_tips {
+  margin-top: 16rpx;
+  margin-left: 16rpx;
+  margin-right: 16rpx;
+text-align: center;
 }
 
 
@@ -39,26 +45,25 @@
   margin-left: 16rpx;
   margin-right: 16rpx;
   flex-direction: row;
+  text-align: center;
+
 }
 
 
-.container .scan_device_status_img_class {
-  margin-right: 16rpx;
+.container .scan_device_status_class > scan_device_status_img_class {
   width: 16rpx;
   height: 16rpx;
 }
 
-.container .scan_device_status_text_class {
+.container .scan_device_status_class > scan_device_status_text_class {
   margin-right: 16rpx;
   width: 16rpx;
   height: 16rpx;
 }
 
-
 .container .connect_btn_class {
-  margin-left: 56rpx;
-  margin-right: 56rpx;
+  padding-left: 56rpx;
+  padding-right: 56rpx;
   margin-bottom: 56rpx;
   margin-top: 70rpx;
-
 }

pages/home/home.js

@@ -148,16 +148,20 @@ Page({
 
     this.setData({
       deviceList: [
-        { "devName": "名称1", "state": "online", "pic": "url", "power": 40, },
-        { "devName": "名称2", "state": "online", "pic": "url", "power": 50, },
-        { "devName": "名称3", "state": "online", "pic": "url", "power": 60, },
+        { "devName": "名称1", "state": "online", "pic": "../../img/g.png", "power": 40, },
+        { "devName": "名称2", "state": "online", "pic": "../../img/g.png", "power": 50, },
+        { "devName": "名称3", "state": "online", "pic": "../../img/g.png", "power": 60, },
       ],
       selectIndex: 0,
       isLoginWx: true,
       bannerList: ["https://img1.baidu.com/it/u=2003442481,2528062378&fm=253&fmt=auto&app=138&f=JPG?w=499&h=182", "https://hbimg.huabanimg.com/0ff93215a6d8d1c5f80117fdbfa24936dbd9097026ad99-CNduY8_fw658", "https://img.zcool.cn/community/0177ed5f365bdaa801215aa0a0c1c3.jpg@1280w_1l_2o_100sh.jpg"],
     });
   },
-
+  addDeviceTap() {
+    wx.navigateTo({
+      url: './../bluConnect/bleconnect',
+    });
+    },
   /**
    * 生命周期函数--监听页面隐藏
    */

pages/home/home.wxml

@@ -9,20 +9,20 @@
       <image src="{{item}}" mode="widthFix" style="flex: 1;" />
     </swiper-item>
   </swiper>
-  <view class="device-empty-tips" >
+  <view class="device_empty_tips" bind:tap="addDeviceTap" >
       + 添加设备
     </view>
   <scroll-view class="deviceScrollClass" scroll-y="true">
     <view class="deviceClass" wx:for="{{deviceList}}" wx:key="item" >
-          <image class="device_img" src="../../img/g.png" mode="scaleToFill" />
+          <image class="device_img" src="{{item.pic}}" mode="scaleToFill" />
           <view class="detailClass" style="flex-direction: row;">
             <view class="power">
               <image class="power_img" src="../../img/dl1.png" mode="scaleToFill" />
               <text class="power_text">{{item.power}}</text>
             </view>
             <view class="device_name">{{item.devName}}</view>
-            <view class="device_delete" bind:tap="deleteDeviceTap">删除</view>
-
+            <!-- <view class="device_delete" bind:tap="deleteDeviceTap">删除</view> -->
+<button class="device_delete" bind:tap="deleteDeviceTap">删除</button>
           </view>
 
           <image class="detail_page" src="../../img/a6.png" mode="scaleToFill" bind:tap="devieDetailPageTap" />

pages/home/home.wxss

@@ -24,6 +24,10 @@
   display: flex;
 }
 
+.device_empty_tips {
+  display: flex;
+}
+
 .deviceScrollClass {
   margin-top: 16rpx;
   margin-bottom: 16rpx;
@@ -33,6 +37,8 @@
   flex: 1;
   width: 100%;
   display: inline-flex;
+  margin-bottom: 16rpx;
+margin-top: 16rpx;
 } 
 
 .device_img {
@@ -71,7 +77,11 @@ margin-left: 16rpx;
 }
 
 .device_delete {
-  margin-bottom: 16rpx;
+  display: inline;
+  padding-left: 16rpx;
+  padding-right: 16rpx;
+padding-top: 8rpx;
+padding-bottom: 8rpx;
 }
 
 .detail_page {