整体UI调整完

pages/device/scan.vue

@@ -1,77 +1,60 @@
 <template>
   <view class="help-container" >
-    <view style="font-size: 12px;padding-bottom: 10rpx">
+    <view style="font-size: 22rpx;padding-bottom: 10rpx;    background: rgb(228,240,255);
+    color: #3E9CFC;
+    height: 54rpx;
+    line-height: 54rpx;
+    border-radius: 48rpx;text-align: center">
 
       TIPS:请通过设备发送指令后，然后在该列表中绑定相应设备。
     </view>
-    <view style="background: white;padding-top:00px;position: absolute;top:108rpx;bottom: 10px;left:10px;right:10px;text-align: center">
-    <u-list height="100%"
-    >
-      <view style="position: relative;text-align: center;padding:30rpx">
-          消息列表
-         <view @click="getList" style="position: absolute;    right: 50rpx;top: 2q0rpx;">
-           <u-icon name="reload" ></u-icon>
-         </view>
-      </view>
-      <u-grid col="5"
-              :border="false"
-              @click="click"
-      >
-        <u-grid-item
-            v-for="(baseListItem,baseListIndex) in headTitle"
-            :key="baseListIndex"
-        >
-
-          <text class="grid-text">{{baseListItem}}</text>
-        </u-grid-item>
-      </u-grid>
-      <u-list-item
-          v-for="(item, index) in indexList"
-          :key="index"
-      >
-      <view style="padding-top: 10px;text-align: center;height: 100rpx;font-size:10px;;border-bottom:1px solid lightgray">
-        <u-grid col="5"
-                :border="false"
-        >
-          <u-grid-item
-          >
-
-            <text class="grid-text"> {{item.deviceNo}} </text>
-          </u-grid-item>
-          <u-grid-item
-          >
-
-            <text class="grid-text">  {{item.deviceName}}</text>
-          </u-grid-item>
-          <u-grid-item
-          >
-
-            <text class="grid-text"> {{item.productName}}</text>
-          </u-grid-item>
-          <u-grid-item
-          >
-
-            <text class="grid-text"> {{item.createTime}}</text>
-          </u-grid-item>
-          <u-grid-item
-          >
-
-            <u-icon @click="scanCode(item.deviceNo)" name="scan" color="#2979ff" size="28" ></u-icon>
-
-          </u-grid-item>
-        </u-grid>
-
-
-      </view>
-      </u-list-item>
-    </u-list>
+    <view @click="getList" style="position: absolute;    right: 50rpx;top: 40rpx;">
+      <u-icon name="reload" ></u-icon>
+    </view>
+    <view>
+      <uni-card title="管理员"  extra="额外信息" padding="0"  v-for="item in indexList">
+        <template v-slot:cover>
+          <view style="position: relative;display: flex;flex-direction: row;margin:20rpx;border-bottom: 1px solid lightgray;height: 60rpx">
+            <view style="font-size: 24rpx;position: absolute;top: 8rpx;font-weight: bold">
+              {{ item.deviceName }}
+            </view>
+            <view style="position: absolute;right:-14rpx;top:10rpx;
+color: #BBBBBB;font-size: 20rpx">
+              {{ item.createTime }}
+            </view>
+          </view>
+        </template>
+        <template v-slot:title>
+          <view style="position: relative;display: flex;flex-direction: column;margin:20rpx;height: 120rpx;    line-height: 66rpx;
+color: #545454; ">
+            <view>
+
+              设备编号：{{ item.deviceNo }}
+            </view>
+            <view>
+
+              产品名称：{{ item.productName }}
+            </view>
+            <view style="position: absolute;right:10rpx;top:20rpx" @click="scanCode(item.deviceNo)">
+              <u-image :showLoading="true" src="/static/images/device/bind.png" width="60rpx" height="60rpx" ></u-image>
+              <view style="text-align: center;font-size: 24rpx;position: relative;top:-10rpx">
+                绑定
+              </view>
+
+            </view>
+          </view>
+        </template>
+      </uni-card>
+
     </view>
   </view>
 </template>
 
 <script>
 import { getDeviceMsg,bindDeviceQrcode } from '@/api/device/device.js'
+import UImage from "../../uni_modules/uview-ui/components/u--image/u--image";
   export default {
+    components: {UImage},
     data() {
       return {
         headTitle:["设备编号","设备名称","产品编号","消息时间","操作"],
@@ -100,7 +83,9 @@ import { getDeviceMsg,bindDeviceQrcode } from '@/api/device/device.js'
         });
       },
       getList(){
+        uni.showLoading();
         getDeviceMsg().then(res=>{
+          uni.hideLoading();
           this.indexList = res.rows;
         });
       },
@@ -113,12 +98,13 @@ import { getDeviceMsg,bindDeviceQrcode } from '@/api/device/device.js'
 
 <style lang="scss" scoped>
   page {
-    background-color: #f8f8f8;
+    background-color: white;
   }
 
   .help-container {
     margin-bottom: 100rpx;
     padding: 30rpx;
+    background-color: white;
   }
 
   .list-title {
@@ -126,7 +112,7 @@ import { getDeviceMsg,bindDeviceQrcode } from '@/api/device/device.js'
   }
 
   .childList {
-    background: #ffffff;
+    background-color: white;
     box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
     border-radius: 16rpx;
     margin-top: 10rpx;

pages/login.vue

@@ -1,5 +1,5 @@
 <template>
-  <view class="normal-login-container">
+  <view class="normal-login-container" style="background-image: url('/static/images/login/bg.png');background-size: 100% 100%;">
     <view class="logo-content align-center justify-center flex">
 <!--      <image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">-->
 <!--      </image>-->
@@ -8,15 +8,15 @@
     <view class="login-form-content">
       <view class="input-item flex align-center">
         <view class="iconfont icon-user icon"></view>
-        <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
+        <input   v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
       </view>
       <view class="input-item flex align-center">
         <view class="iconfont icon-password icon"></view>
-        <input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
+        <input  v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
       </view>
       <view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
         <view class="iconfont icon-code icon"></view>
-        <input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
+        <input   v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
         <view class="login-code">
           <image :src="codeUrl" @click="getCode" class="login-code-img"></image>
         </view  >
@@ -45,8 +45,8 @@
         captchaEnabled: true,
         globalConfig: getApp().globalData.config,
         loginForm: {
-          username: "admin",
-          password: "123456",
+          username: "",
+          password: "",
           code: "",
           uuid: ''
         }
@@ -126,7 +126,11 @@
 
   .normal-login-container {
     width: 100%;
-
+    position: absolute;
+    top: 0px;
+    bottom: 0;
+    left:0;
+    right: 0;
     .logo-content {
       width: 100%;
       font-size: 21px;
@@ -139,6 +143,8 @@
 
       .title {
         margin-left: 10px;
+        color: #FFFFFF;
+        font-size: 56rpx;
       }
     }
 
@@ -146,8 +152,11 @@
       text-align: center;
       margin: 20px auto;
       margin-top: 15%;
-      width: 80%;
-
+      width: 90%;
+      background: white;
+      border-radius: 30rpx;
+      box-shadow: 0rpx 5rpx 27rpx 0rpx rgba(195,195,195,2.4);
+      padding:10%;
       .input-item {
         margin: 20px auto;
         background-color: #f5f6f7;
@@ -166,6 +175,7 @@
           line-height: 20px;
           text-align: left;
           padding-left: 15px;
+          //background: rgb(224,236,255);
         }
 
       }

pages/mine/help/index.vue

@@ -69,6 +69,7 @@
   .help-container {
     margin-bottom: 100rpx;
     padding: 30rpx;
+    background: white;
   }
 
   .list-title {
@@ -109,4 +110,4 @@
     color: #606266;
     font-size: 28rpx;
   }
-</style>
+</style>