用户管理，设备详情修改

frontend_lock/src/app.scss

@@ -13,8 +13,7 @@
   display: flex;
   flex-direction: column;
   background-color: #F7F7F7;
-  height: 100vh;
-
+  height: calc(100vh - 100px);
 }
 .taro-tabbar__panel{
   background-color: #F7F7F7;

frontend_lock/src/pages/addUser/index.config.ts

@@ -1,11 +1,11 @@
 /*
  * @Author: your name
  * @Date: 2021-02-19 15:36:02
- * @LastEditTime: 2021-02-24 18:52:51
+ * @LastEditTime: 2021-03-02 16:16:19
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \intelligentLock\src\pages\message\index.config.ts
  */
 export default {
-  navigationBarTitleText: '用户管理'
+  navigationBarTitleText: '新增用户'
 }

frontend_lock/src/pages/bindingEquipment/index.vue

@@ -1,19 +1,19 @@
 <!--
  * @Author: your name
  * @Date: 2021-02-19 11:59:48
- * @LastEditTime: 2021-02-23 19:56:12
+ * @LastEditTime: 2021-03-02 16:14:56
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \intelligentLock\src\pages\index\index.vue
 -->
 <template>
   <view class="page">
-    <view>
+    <!-- <view>
       <AtNavBar :onClickLeftIcon="LeftIconClick.bind(this, '返回')"
                 title="绑定智能设备"
                 leftIconType="chevron-left"
                 color='#646464' />
-    </view>
+    </view> -->
     <view class="deviceInfo">
       <view class="deviceImgBox">
         <image src="" />

frontend_lock/src/pages/deviceDetail/index.scss

@@ -1,231 +1,232 @@
 .deviceDetail{
-  width: 100%;
-  height: 260px;
-  margin-top: 20px;
-  position: relative;
-  background-color: #3C6EF0;
-  .deviceDetailInfo{
+  overflow-y: auto;
+  .deviceDetailHeader{
     width: 100%;
-    height: 210px;
-    padding-left: 76px;
-    box-sizing: border-box;
-    position: absolute;
-    left: 0;
-    top: 0;
-    display: flex;
-    // justify-content: center;
-    align-items: center;
-    .deviceDetailInfoLeft{
-      width: 96px;
-      height: 96px;
-      background: #FFFFFF;
-      box-shadow: 0px 3px 10px rgba(40, 40, 40, 0.16);
-      border-radius: 50%;
-    }
-    .deviceDetailInfoRight{
-      width: 70%;
-      height: 96px;
-      margin-left: 24px;
-      font-family: '.PingFang SC';
-      .dirTop{
-        height: 45px;
-       display: flex;
-       align-items: center;
-       margin-bottom: 16px;
-       .topName{
-        max-width: 45%;
-        overflow:hidden; //超出的文本隐藏
-        text-overflow:ellipsis; //溢出用省略号显示
-        white-space:nowrap; 
-        // height: 45px;
-        font-size: 32px;
-        font-weight: 400;
-        color: #FFFFFF;
-        margin-right: 24px;
-       }
-       .topOnline{
-        width: 68px;
-        text-align: center;
-        height: 28px;
-        line-height: 22px;
-        background: #00D06D;
-        border-radius: 0 10px 0 10px;
-        font-size: 20px;
-        font-family: PingFangSC-Regular;
-        color: #FFFFFF;
-        border: 1px solid rgba(0, 0, 0, 0);
-        box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
-       }
+    height: 260px;
+    background-color: #3C6EF0;
+    overflow: hidden;
+    .deviceDetailInfo{
+      width: 100%;
+      height: 200px;
+      padding-left: 76px;
+      box-sizing: border-box;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      .deviceDetailInfoLeft{
+        width: 96px;
+        height: 96px;
+        background: #FFFFFF;
+        box-shadow: 0px 3px 10px rgba(40, 40, 40, 0.16);
+        border-radius: 50%;
       }
-      .dirBottom{
-        width: 100%;
-        height: 28px;
-        line-height: 28px;
-        font-size: 20px;
-        font-family: PingFang SC;
-        font-weight: 300;
-        line-height: 18px;
-        color: #ECECEC;
+      .deviceDetailInfoRight{
+        width: 70%;
+        height: 96px;
+        margin-left: 24px;
+        font-family: '.PingFang SC';
+        .dirTop{
+          height: 45px;
+        display: flex;
+        align-items: center;
+        margin-bottom: 16px;
+        .topName{
+          max-width: 45%;
+          overflow:hidden; //超出的文本隐藏
+          text-overflow:ellipsis; //溢出用省略号显示
+          white-space:nowrap; 
+          // height: 45px;
+          font-size: 32px;
+          font-weight: 400;
+          color: #FFFFFF;
+          margin-right: 24px;
+        }
+        .topOnline{
+          width: 68px;
+          height: 28px;
+          // line-height: 22px;
+          display: flex;
+          justify-content: center;
+          align-items:center;
+          background: #00D06D;
+          border-radius: 0 10px 0 10px;
+          font-size: 20px;
+          font-family: PingFangSC-Regular;
+          color: #FFFFFF;
+          border: 1px solid rgba(0, 0, 0, 0);
+          box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.04);
+        }
+        }
+        .dirBottom{
+          width: 100%;
+          height: 28px;
+          line-height: 28px;
+          font-size: 20px;
+          font-family: PingFang SC;
+          font-weight: 300;
+          line-height: 18px;
+          color: #ECECEC;
+        }
       }
     }
   }
-}
-// 快捷操作
-.shortcuts{
-  margin-top: -50px;
-  z-index: 9999;
-  margin-bottom: 16px;
-  padding: 0 30px;
-  box-sizing: border-box;
-  .shortCard{
-    width: 100%;
-    height: 332px;
-    .at-grid__flex .content-inner__img{
-      width: 128px;
-      height: 128px;
+  // 快捷操作
+  .shortcuts{
+    margin-top: -60px;
+    // z-index: 9999;
+    margin-bottom: 16px;
+    padding: 0 30px;
+    box-sizing: border-box;
+    .shortCard{
+      width: 100%;
+      height: 332px;
+      .at-grid__flex .content-inner__img{
+        width: 128px;
+        height: 128px;
+      }
+      // .content-inner__icon {
+      //   width: 128px;
+      //   height: 128px;
+      //   display: flex;
+      //   justify-content: center;
+      //   align-items: center;
+      //   background: #FFFFFF;
+      //   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
+      //   border-radius: 50%;
+      //   opacity: 1;
+      // }
+      .content-inner__text{
+        font-size: 28px;
+        font-weight: 300;
+        color: #646464;
+      }
     }
-    // .content-inner__icon {
-    //   width: 128px;
-    //   height: 128px;
-    //   display: flex;
-    //   justify-content: center;
-    //   align-items: center;
-    //   background: #FFFFFF;
-    //   box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.16);
-    //   border-radius: 50%;
-    //   opacity: 1;
-    // }
-    .content-inner__text{
+    .at-card__header-title{
+      height: 40px;
       font-size: 28px;
-      font-weight: 300;
-      color: #646464;
+      font-family: PingFang;
+      font-weight: 400;
+      color: #323232;
     }
   }
-  .at-card__header-title{
-    height: 40px;
-    font-size: 28px;
-    font-family: PingFang;
-    font-weight: 400;
-    color: #323232;
-  }
-}
 
-.deviceRecordTab{
-  border-radius: 8px;
-  padding: 0 30px;
-  box-sizing: border-box;
-  z-index: 999;
-  .at-tabs__item{
-    font-size: 28px;
-    color: #969696;
-    padding: 11PX 24PX;
+  .deviceRecordTab{
+    border-radius: 8px;
+    padding: 0 30px;
+    box-sizing: border-box;
+    z-index: 999;
+    .at-tabs__item{
+      font-size: 28px;
+      color: #969696;
+      padding: 11PX 24PX;
+    }
+    .at-tabs__item--active{
+      color: #3C6EF0;
+    }
+    .at-tabs__item-underline{
+      height: 2Px;
+      margin: auto;
+      right: 0;
+      width: 40%;
+    }
   }
-  .at-tabs__item--active{
-    color: #3C6EF0;
+  .taro-tabbar__panel{
+    background-color: #F7F7F7;
   }
-  .at-tabs__item-underline{
-    height: 2Px;
-    margin: auto;
-    right: 0;
-    width: 40%;
+  .tab-content {
+    // padding: 100px 50px;
+    width: 100%;
+    min-height: 700px;
+    overflow-y: auto;
+    font-size: 30px;
+    text-align: center;
+    background-color: #F7F7F7;
+    
+    
   }
-}
-.taro-tabbar__panel{
-  background-color: #F7F7F7;
-}
-.tab-content {
-  // padding: 100px 50px;
-  width: 100%;
-  min-height: 700px;
-  overflow-y: auto;
-  font-size: 30px;
-  text-align: center;
-  background-color: #F7F7F7;
-  
-  
-}
-.DeviceRecordList{
-  width: 100%;
-}
-.recordItem{
-  width: 100%;
-  height: 156px;
-  margin-top: 20px;
-  padding: 16px 0 16px 28px;
-  
-  background: #FFFFFF;
-  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
-  box-sizing: border-box;
-  border-radius: 8px;
-  display: flex;
-  align-items: center;
-  .recordItemImg{
-    width: 80px;
-    height: 80px;
-   display: flex;
-   justify-content: center;
-    border: 5px solid rgba(120, 164, 250, 0.4);
-    border-radius: 50%;
-    margin-right: 28px;
-   
-    .slockImg{
-      width: 80px;
-      height: 100%;
-    }
+  .DeviceRecordList{
+    width: 100%;
   }
-}
-//文本
-.recordItemRight{
-  width: 83%;
-  height: auto;
-  text-align: left;
-  .slock{
+  .recordItem{
     width: 100%;
-    height: 40px;
-    font-size: 28px;
-    text-align: left;
+    height: 156px;
+    margin-top: 20px;
+    padding: 16px 0 16px 28px;
+    
+    background: #FFFFFF;
+    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
+    box-sizing: border-box;
+    border-radius: 8px;
     display: flex;
     align-items: center;
-    .slockName{
-      width: 50%;
-      font-family: '.PingFang SC';
+    .recordItemImg{
+      width: 80px;
+      height: 80px;
+    display: flex;
+    justify-content: center;
+      border: 5px solid rgba(120, 164, 250, 0.4);
+      border-radius: 50%;
+      margin-right: 28px;
+    
+      .slockImg{
+        width: 80px;
+        height: 100%;
+      }
     }
-    .slockNum{
-      width: 50%;
+  }
+  //文本
+  .recordItemRight{
+    width: 83%;
+    height: auto;
+    text-align: left;
+    .slock{
+      width: 100%;
       height: 40px;
+      font-size: 28px;
+      text-align: left;
       display: flex;
       align-items: center;
-        .numImg{
-          width: 30px;
-          height: 30px;
-          margin-right: 10px;
-        }
+      .slockName{
+        width: 50%;
+        font-family: '.PingFang SC';
+      }
+      .slockNum{
+        width: 50%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+          .numImg{
+            width: 30px;
+            height: 30px;
+            margin-right: 10px;
+          }
+      }
     }
-  }
-  .openMode{
-    width: 100%;
-    height: 36px;
-    font-size: 24px;
-    font-family: '.PingFang SC';
-    font-weight: 300;
-    margin: 10px 0;
-    color: #3C6EF0;
-  }
-  // 开锁人，开锁时间
-  .slockPerTime{
-    width: 100%;
-    height: 40px;
-    font-size: 24px;
-    text-align: left;
-    display: flex;
-    align-items: center;
-    color: #969696;
-    .slockPerson{
-      width: 20%;
+    .openMode{
+      width: 100%;
+      height: 36px;
+      font-size: 24px;
+      font-family: '.PingFang SC';
+      font-weight: 300;
+      margin: 10px 0;
+      color: #3C6EF0;
     }
-    .slockTime{
-      width: 60%;
+    // 开锁人，开锁时间
+    .slockPerTime{
+      width: 100%;
+      height: 40px;
+      font-size: 24px;
+      text-align: left;
+      display: flex;
+      align-items: center;
+      color: #969696;
+      .slockPerson{
+        width: 20%;
+      }
+      .slockTime{
+        width: 60%;
+      }
     }
+  
   }
- 
-}
+}

frontend_lock/src/pages/deviceDetail/index.vue

@@ -1,7 +1,7 @@
 <!--
  * @Author: your name
  * @Date: 2021-02-19 11:59:48
- * @LastEditTime: 2021-03-01 18:49:21
+ * @LastEditTime: 2021-03-02 16:01:57
  * @LastEditors: Please set LastEditors
  * @Description: In User Settings Edit
  * @FilePath: \intelligentLock\src\pages\index\index.vue
@@ -15,75 +15,78 @@
                 color='#646464' />
     </view> -->
     <view class="deviceDetail">
-      <view class="deviceDetailInfo">
-        <view class="deviceDetailInfoLeft">
+      <view class="deviceDetailHeader">
+        <view class="deviceDetailInfo">
+          <view class="deviceDetailInfoLeft">
 
-        </view>
-        <view class="deviceDetailInfoRight">
-          <view class="dirTop">
-            <view class="topName">一号冰箱</view>
-            <view class="topOnline">在线</view>
           </view>
-          <view class="dirBottom">2021-02-07 16:00:00</view>
+          <view class="deviceDetailInfoRight">
+            <view class="dirTop">
+              <view class="topName">一号冰箱</view>
+              <view class="topOnline">在线</view>
+            </view>
+            <view class="dirBottom">2021-02-07 16:00:00</view>
+          </view>
         </view>
       </view>
-    </view>
-    <!-- 快捷操作 -->
-    <view class="shortcuts">
-      <AtCard title='快捷操作'
-              class="shortCard">
-        <AtGrid :data="dataGrid"
-                :hasBorder="false"
-                :onClick="GridItemClick" />
-      </AtCard>
-    </view>
-    <!-- 设备 -->
-    <view class="message">
-      <view class="panel">
-        <view class="panel__content">
-          <AtTabs :current="currentTab"
-                  :tabList="tabList"
-                  :onClick="handleClick.bind(this, 'currentTab')"
-                  class="deviceRecordTab">
-            <AtTabsPane :current="currentTab"
-                        :index="0">
-              <view class="tab-content DeviceRecordList">
-                <view class="recordItem"
-                      v-for="(item,index) in recordList"
-                      :key="index">
-                  <view class="recordItemImg">
-                    <image class="slockImg"
-                           :src="slockPng" />
-                  </view>
-                  <view class="recordItemRight">
-                    <!-- 智能锁名称 -->
-                    <view class="slock">
-                      <view class="slockName">五号冰箱智能锁</view>
-                      <view class="slockNum">
-                        <image class="numImg"
-                               :src="numberPng" />
-                        <view>23646113230</view>
-                      </view>
+      <!-- 快捷操作 -->
+      <view class="shortcuts">
+        <AtCard title='快捷操作'
+                class="shortCard">
+          <AtGrid :data="dataGrid"
+                  :hasBorder="false"
+                  :onClick="GridItemClick" />
+        </AtCard>
+      </view>
+      <!-- 设备 -->
+      <view class="message">
+        <view class="panel">
+          <view class="panel__content">
+            <AtTabs :current="currentTab"
+                    :tabList="tabList"
+                    :onClick="handleClick.bind(this, 'currentTab')"
+                    class="deviceRecordTab">
+              <AtTabsPane :current="currentTab"
+                          :index="0">
+                <view class="tab-content DeviceRecordList">
+                  <view class="recordItem"
+                        v-for="(item,index) in recordList"
+                        :key="index">
+                    <view class="recordItemImg">
+                      <image class="slockImg"
+                             :src="slockPng" />
                     </view>
-                    <!-- 打开方式 -->
-                    <view class="openMode">智能锁已通过扫码方式打开 </view>
-                    <!-- 开锁人，开锁时间 -->
-                    <view class="slockPerTime">
-                      <view class="slockPerson">李磊磊</view>
-                      <view class="slockTime">2021-02-07 16:00:00</view>
+                    <view class="recordItemRight">
+                      <!-- 智能锁名称 -->
+                      <view class="slock">
+                        <view class="slockName">五号冰箱智能锁</view>
+                        <view class="slockNum">
+                          <image class="numImg"
+                                 :src="numberPng" />
+                          <view>23646113230</view>
+                        </view>
+                      </view>
+                      <!-- 打开方式 -->
+                      <view class="openMode">智能锁已通过扫码方式打开 </view>
+                      <!-- 开锁人，开锁时间 -->
+                      <view class="slockPerTime">
+                        <view class="slockPerson">李磊磊</view>
+                        <view class="slockTime">2021-02-07 16:00:00</view>
+                      </view>
                     </view>
                   </view>
                 </view>
-              </view>
-            </AtTabsPane>
-            <AtTabsPane :current="currentTab"
-                        :index="1">
-              <view class="tab-content">标签页二的内容</view>
-            </AtTabsPane>
-          </AtTabs>
+              </AtTabsPane>
+              <AtTabsPane :current="currentTab"
+                          :index="1">
+                <view class="tab-content">标签页二的内容</view>
+              </AtTabsPane>
+            </AtTabs>
+          </view>
         </view>
       </view>
     </view>
+
   </view>
 </template>
 

frontend_lock/src/pages/userControl/index.scss

@@ -3,7 +3,7 @@
 }
 .userControlBox{
   width: 100%;
-  height: calc(100vh - 100px);
+  height: calc(100vh - 150px);
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -17,6 +17,7 @@
   .btnBox{
     width: 100%;
     height: 100px;
+    margin-top: 20px;
     display: flex;
     justify-content: center;
     align-items: center;