简柏林 / thingskit-app · Commits

Commit 0c81e6a5ecb9632e80e7683404663d2fc197c0b8

Authored by fengtao
1 parent 643d7fdf

feat:新增首页和摄像头，新增设备，refractor：修改登录样式

Inline Side-by-side
Showing 21 changed files with 511 additions and 77 deletions
... ... @@ -11,7 +11,27 @@
11 11 {
12 12 "path": "pages/device/device",
13 13 "style": {
14   - "navigationBarTitleText": "设备"
  14 + "navigationBarTitleText": "设备",
  15 + "backgroundColorTop": "gray",
  16 + "backgroundColorBottom": "gray",
  17 + "app-plus": {
  18 + "scrollIndicator": "none",
  19 + "titleNView": {
  20 + "titleText": "", //不要设置标题
  21 + "buttons": [{
  22 + "text": "搜索",
  23 + "fontSize": "16",
  24 + "float": "right",
  25 + "color": "blue"
  26 + }],
  27 + "searchInput": {
  28 + "align": "left",
  29 + "placeholder": "输入设备SN或名称搜索",
  30 + "borderRadius": "50upx",
  31 + "backgroundColor": "#fff"
  32 + }
  33 + }
  34 + }
15 35 }
16 36 },
17 37 {
... ... @@ -62,8 +82,26 @@
62 82 }, {
63 83 "path": "pages/feedback/feedback",
64 84 "style": {
65   - "navigationBarTitleText": "意见反馈"
  85 + "navigationBarTitleText": "意见反馈",
  86 + "app-plus": {
  87 + "scrollIndicator": "none" //当前页面不显示滚动条
  88 + }
66 89 }
  90 + }, {
  91 + "path": "pages/index/camera/camera",
  92 + "style": {
  93 + "navigationBarTitleText": "查看摄像头"
  94 + // "app-plus": {
  95 + // "scrollIndicator": "none" //当前页面不显示滚动条
  96 + // }
  97 + }
  98 +
  99 + }, {
  100 + "path": "pages/index/orgStatus/orgStatus",
  101 + "style": {
  102 + "navigationBarTitleText": "查看组态"
  103 + }
  104 +
67 105 }
68 106 ],
69 107 "globalStyle": {
... ...
1 1 <template>
2   - <view class="content">
3   - <text>设备</text>
4   - <!-- 公共组件-每个页面必须引入 -->
5   - <public-module></public-module>
6   - <f-tabbar></f-tabbar>
  2 + <view class="device-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="org-sty">
  6 + <view class="org-item">
  7 + <view class="u-flex" style="flex-direction: row;margin-top: 26rpx;margin-left: 15rpx;">
  8 + <image style="width: 30rpx;height: 30rpx;" src="../../static/org.png" mode=""></image>
  9 + <text style="color:#333333;font-size: 15px;margin-left: 14rpx;">组织关系</text>
  10 + </view>
  11 + <view style="margin-top: 5rpx;margin-left: 15rpx" class=""><text style="color:#666666;font-size: 12px;">设备数：1234</text></view>
  12 + </view>
  13 + <view class="org-item" style="">
  14 + <image style="width: 10px;height: 10px;float: right; margin-right: 34rpx; margin-top: 58rpx;" src="../../static/right-arrow.png" mode=""></image>
  15 + </view>
  16 + </view>
  17 + <view class="device-list">
  18 + <view class="list-item" v-for="(item, index) in list" :key="index">
  19 + <view class="item">
  20 + <view>
  21 + <text style="color:#333333;font-size: 15px;">{{ item.name1 }}</text>
  22 + </view>
  23 + <view class="u-flex" style="flex-direction: column;justify-content: flex-start;margin-top: 8rpx;">
  24 + <view>
  25 + <text style="color:#666666;font-size: 14px;">{{ item.name2 }}</text>
  26 + </view>
  27 + <view style="margin-left: -122rpx;">
  28 + <text style="color:#666666;font-size: 14px;">{{ item.name3 }}</text>
  29 + </view>
  30 + </view>
  31 + </view>
  32 + <view class="item">
  33 + <view class="u-flex" style="flex-direction: row;margin-top: -6rpx;">
  34 + <image style="width: 30rpx;height: 30rpx;margin-top: 5rpx;margin-right: 5rpx;" :src="item.name4" mode=""></image>
  35 + <view class="">
  36 + <text style="color: #377DFF;font-size: 13px;margin-left: 5rpx;margin-top: 20rpx;">{{ item.name5 }}</text>
  37 + </view>
  38 + </view>
  39 + </view>
  40 + </view>
  41 + </view>
  42 + <f-tabbar></f-tabbar>
7 43 </view>
8 44 </template>
9 45
... ... @@ -11,21 +47,90 @@
11 47 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
12 48
13 49 export default {
14   - components:{
15   - fTabbar,
16   - },
17   - data() {
18   - return {
19   - }
20   - },
21   - onLoad() {
22   - // 隐藏原生的tabbar
23   - uni.hideTabBar();
24   - },
25   -
26   -}
  50 + components: {
  51 + fTabbar
  52 + },
  53 + data() {
  54 + return {
  55 + list: [
  56 + {
  57 + name1: '1号楼1楼三单元水表',
  58 + name2: '设备编号：SN987633433',
  59 + name3: '所属组:XXXXXX',
  60 + name4: '../../static/online.png',
  61 + name5: '在线'
  62 + },
  63 + {
  64 + name1: '2号楼1楼三单元水表',
  65 + name2: '设备编号：SN987633433',
  66 + name3: '所属组:XXXXXX',
  67 + name4: '../../static/online.png',
  68 + name5: '在线'
  69 + },
  70 + {
  71 + name1: '3号楼1楼三单元水表',
  72 + name2: '设备编号：SN987633433',
  73 + name3: '所属组:XXXXXX',
  74 + name4: '../../static/baojing.png',
  75 + name5: '离线'
  76 + },
  77 + {
  78 + name1: '4号楼1楼三单元水表',
  79 + name2: '设备编号：SN987633433',
  80 + name3: '所属组:XXXXXX',
  81 + name4: '../../static/unonline.png',
  82 + name5: '未激活'
  83 + },
  84 + {
  85 + name1: '5号楼1楼三单元水表',
  86 + name2: '设备编号：SN987633433',
  87 + name3: '所属组:XXXXXX',
  88 + name4: '../../static/online.png',
  89 + name5: '在线'
  90 + }
  91 + ]
  92 + };
  93 + },
  94 + onLoad() {
  95 + // 隐藏原生的tabbar
  96 + uni.hideTabBar();
  97 + }
  98 +};
27 99 </script>
28 100
29 101 <style lang="scss" scoped>
30   -
  102 +.device-page {
  103 + padding: 0rpx 15rpx;
  104 + min-height: 100vh;
  105 + background-color: #f8f9fa;
  106 +}
  107 +.org-sty {
  108 + width: 750rpx;
  109 + height: 150rpx;
  110 + margin-top: 1rpx;
  111 + background-color: #fff;
  112 + display: flex;
  113 + flex-direction: row;
  114 + justify-content: space-between;
  115 + .org-item {
  116 + width: 350rpx;
  117 + height: 200rpx;
  118 + }
  119 +}
  120 +.device-list {
  121 + display: flex;
  122 + flex-direction: column;
  123 + .list-item {
  124 + height: 200rpx;
  125 + background-color: #fff;
  126 + margin-top: 24rpx;
  127 + display: flex;
  128 + flex-direction: row;
  129 + border-radius: 10px;
  130 + justify-content: space-between;
  131 + .item {
  132 + margin: 30rpx;
  133 + }
  134 + }
  135 +}
31 136 </style>
... ...
... ... @@ -5,31 +5,37 @@
5 5 <view class="form-page">
6 6 <u--form labelPosition="left" :model="feedbackData" :rules="rules" ref="form1">
7 7 <u-form-item label="主题" prop="userInfo.name" borderBottom ref="item1">
8   - <u--input placeholder="请输入主题" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  8 + <u--input placeholder="请输入主题" v-model="feedbackData.userInfo.name" border="none"></u--input>
9 9 </u-form-item>
10 10 <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
11   - <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  11 + <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="none"></u--input>
12 12 </u-form-item>
13 13 <u-form-item label="手机" prop="userInfo.name" borderBottom ref="item1">
14   - <u--input placeholder="请输入手机" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  14 + <u--input placeholder="请输入手机" v-model="feedbackData.userInfo.name" border="none"></u--input>
15 15 </u-form-item>
16 16 <u-form-item label="姓名" prop="userInfo.name" borderBottom ref="item1">
17   - <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  17 + <u--input placeholder="请输入姓名" v-model="feedbackData.userInfo.name" border="none"></u--input>
18 18 </u-form-item>
19 19 <u-form-item label="QQ" prop="userInfo.name" borderBottom ref="item1">
20   - <u--input placeholder="请输入QQ" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  20 + <u--input placeholder="请输入QQ" v-model="feedbackData.userInfo.name" border="none"></u--input>
21 21 </u-form-item>
22 22 <u-form-item label="邮箱" prop="userInfo.name" borderBottom ref="item1">
23   - <u--input placeholder="请输入邮箱" v-model="feedbackData.userInfo.name" border="bottom"></u--input>
  23 + <u--input placeholder="请输入邮箱" v-model="feedbackData.userInfo.name" border="none"></u--input>
24 24 </u-form-item>
25 25 <u-form-item label="图片" prop="userInfo.name" borderBottom ref="item1">
26   - <u-upload :fileList="fileData" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="10"></u-upload>
  26 + <u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple :maxCount="6"></u-upload>
27 27 </u-form-item>
28   - <u-form-item label="反馈信息" prop="userInfo.name" borderBottom ref="item1">
  28 + <u-form-item label="反馈" prop="userInfo.name" borderBottom ref="item1">
29 29 <u--textarea placeholder="不低于3个字" v-model="feedbackData.intro" count></u--textarea>
30 30 </u-form-item>
31 31 </u--form>
32 32 <u-button class="buttonSty" shape="circle" type="primary" text="提交" customStyle="margin-top: 17rpx" @click="submit"></u-button>
  33 + <!-- #ifdef MP -->
  34 + <view style="height: 18rpx;"></view>
  35 + <!-- #endif -->
  36 + <!-- #ifndef MP -->
  37 + <view style="height: 72rpx;"></view>
  38 + <!-- #endif -->
33 39 </view>
34 40 <f-tabbar></f-tabbar>
35 41 </view>
... ... @@ -50,7 +56,7 @@ export default {
50 56 intro: ''
51 57 }
52 58 },
53   - fileData: []
  59 + fileList1: []
54 60 };
55 61 },
56 62 onLoad() {
... ... @@ -60,15 +66,15 @@ export default {
60 66 methods: {
61 67 // 删除图片
62 68 deletePic(event) {
63   - this[`fileData{event.name}`].splice(event.index, 1);
  69 + this[`fileList${event.name}`].splice(event.index, 1);
64 70 },
65 71 // 新增图片
66 72 async afterRead(event) {
67 73 // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
68 74 let lists = [].concat(event.file);
69   - let fileListLen = this[`fileData${event.name}`].length;
  75 + let fileListLen = this[`fileList${event.name}`].length;
70 76 lists.map(item => {
71   - this[`fileData${event.name}`].push({
  77 + this[`fileList${event.name}`].push({
72 78 ...item,
73 79 status: 'uploading',
74 80 message: '上传中'
... ... @@ -76,8 +82,8 @@ export default {
76 82 });
77 83 for (let i = 0; i < lists.length; i++) {
78 84 const result = await this.uploadFilePromise(lists[i].url);
79   - let item = this[`fileData${event.name}`][fileListLen];
80   - this[`fileData${event.name}`].splice(
  85 + let item = this[`fileList${event.name}`][fileListLen];
  86 + this[`fileList${event.name}`].splice(
81 87 fileListLen,
82 88 1,
83 89 Object.assign(item, {
... ... @@ -92,7 +98,7 @@ export default {
92 98 uploadFilePromise(url) {
93 99 return new Promise((resolve, reject) => {
94 100 let a = uni.uploadFile({
95   - url: '', // 仅为示例，非真实的接口地址
  101 + url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
96 102 filePath: url,
97 103 name: 'file',
98 104 formData: {
... ... @@ -120,8 +126,7 @@ export default {
120 126 }
121 127 //#ifndef MP
122 128 .buttonSty {
123   - margin-top: 30rpx;
  129 + margin-top: 80rpx !important;
124 130 }
125   -
126 131 //#endif
127 132 </style>
... ...
  1 +<template>
  2 + <view class="camera-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view class="camera-item"><text>设备</text></view>
  6 + <view class="camera-container">
  7 + <view class="container-item">
  8 + <view @click="openCameraDetail(item.url)" v-for="(item, index) in list" :key="index" class="item">
  9 + <view style="width: 320rpx;height: 320rpx"><video style="width: 320rpx;height: 320rpx;" :src="item.url" controls></video></view>
  10 + <view style="position: relative;top: 8rpx;text-align: center;">{{ item.name }}</view>
  11 + </view>
  12 + </view>
  13 + </view>
  14 + <f-tabbar></f-tabbar>
  15 + </view>
  16 +</template>
  17 +
  18 +<script>
  19 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  20 +
  21 +export default {
  22 + components: {
  23 + fTabbar
  24 + },
  25 + data() {
  26 + return {
  27 + list: [
  28 + {
  29 + url: 'http://113.204.115.250:83/openUrl/e5NZg76/live.m3u8',
  30 + name: '摄像头1'
  31 + },
  32 + {
  33 + url: 'https://klxxcdn.oss-cn-hangzhou.aliyuncs.com/histudy/hrm/media/bg2.mp4',
  34 + name: '摄像头2'
  35 + },
  36 + {
  37 + url: 'https://stream7.iqilu.com/10339/article/202002/18/2fca1c77730e54c7b500573c2437003f.mp4',
  38 + name: '摄像头3'
  39 + },
  40 + {
  41 + url: 'https://stream7.iqilu.com/10339/article/202002/17/c292033ef110de9f42d7d539fe0423cf.mp4',
  42 + name: '摄像头4'
  43 + },
  44 + {
  45 + url: 'https://stream7.iqilu.com/10339/article/202002/16/3be2e4ef4aa21bfe7493064a7415c34d.mp4',
  46 + name: '摄像头5'
  47 + },
  48 + {
  49 + url: 'https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4',
  50 + name: '摄像头6'
  51 + }
  52 + ]
  53 + };
  54 + },
  55 + onLoad() {
  56 + // 隐藏原生的tabbar
  57 + uni.hideTabBar();
  58 + },
  59 + methods: {
  60 + openCameraDetail(e) {
  61 + console.log(e);
  62 + }
  63 + }
  64 +};
  65 +</script>
  66 +
  67 +<style lang="scss" scoped>
  68 +.camera-page {
  69 + padding: 0rpx 15rpx;
  70 + min-height: 100vh;
  71 + background-color: #fff;
  72 +}
  73 +.camera-item {
  74 + height: 200rpx;
  75 + border: 0.1px solid gray;
  76 +}
  77 +.camera-container {
  78 + padding: 0 15rpx;
  79 + margin-top: 15rpx;
  80 + .container-item {
  81 + width: 717rpx;
  82 + display: flex;
  83 + justify-content: space-between;
  84 + flex-direction: row;
  85 + flex-wrap: wrap;
  86 + position: relative;
  87 + top: -67rpx;
  88 + .item {
  89 + width: 320rpx;
  90 + height: 320rpx;
  91 + background-color: gray;
  92 + margin-top: 70rpx;
  93 + }
  94 + }
  95 +}
  96 +</style>
... ...
1 1 <template>
2   - <view class="content">
3   - <text>首页</text>
4   - <!-- 公共组件-每个页面必须引入 -->
5   - <public-module></public-module>
6   - <f-tabbar></f-tabbar>
  2 + <view class="index-page">
  3 + <!-- 公共组件-每个页面必须引入 -->
  4 + <public-module></public-module>
  5 + <view>
  6 + <view class="grid-container">
  7 + <view class="grid-item">
  8 + <view class="item-center">
  9 + <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/form.png" mode=""></image></view>
  10 + <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">
  11 + <text style="font-size:13px;color:#333333">维修工单</text>
  12 + </view>
  13 + </view>
  14 + </view>
  15 + <view class="grid-item">
  16 + <view class="item-center">
  17 + <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/camer.png" mode=""></image></view>
  18 + <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">
  19 + <text @click="openCamera" style="font-size:13px;color:#333333">摄像头管理</text>
  20 + </view>
  21 + </view>
  22 + </view>
  23 + <view class="grid-item">
  24 + <view class="item-center">
  25 + <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/device.png" mode=""></image></view>
  26 + <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">
  27 + <text style="font-size:13px;color:#333333">设备接入</text>
  28 + </view>
  29 + </view>
  30 + </view>
  31 + <view class="grid-item">
  32 + <view class="item-center">
  33 + <view class="center"><image style="width: 100rpx;height: 100rpx;margin-top: 20rpx;" src="../../static/status.png" mode=""></image></view>
  34 + <view class="center" style="position:relative;left:-34rpx;text-align: center;font-size: 13px;line-height: 144rpx;">
  35 + <text @click="openOrgStatus" style="font-size:13px;color:#333333">组态</text>
  36 + </view>
  37 + </view>
  38 + </view>
  39 + </view>
  40 + <!-- 基础统计 -->
  41 + <view class="basic-sty">
  42 + <view class=""><text style="font-size: 15px;color:#333333">基础统计</text></view>
  43 + <view class="basic" style="margin-top: 25rpx;">
  44 + <view class="basic-item">
  45 + <view class="item-child u-flex" style="justify-content: space-between;padding: 30rpx;">
  46 + <image style="width: 50rpx;height: 50rpx;" src="../../static/device-total.png" mode=""></image>
  47 + <text style="color:#333333;font-size: 14px;margin-left: 10rpx;">设备统计</text>
  48 + </view>
  49 + <view class="item-child u-flex" style="justify-content: space-between;align-items: center;">
  50 + <view style="width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  51 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>2</text></view>
  52 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>在线</text></view>
  53 + </view>
  54 + <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  55 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>52</text></view>
  56 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>离线</text></view>
  57 + </view>
  58 + <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  59 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>299</text></view>
  60 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>未激活</text></view>
  61 + </view>
  62 + </view>
  63 + </view>
  64 + <view class="basic-item">
  65 + <view class="item-child u-flex" style="justify-content: space-between;padding: 30rpx;">
  66 + <image style="width: 50rpx;height: 50rpx;" src="../../static/alert.png" mode=""></image>
  67 + <text style="color:#333333;font-size: 14px;margin-left: 10rpx;">告警统计</text>
  68 + </view>
  69 + <view class="item-child u-flex" style="justify-content: space-between;align-items: center;">
  70 + <view style="width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  71 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>12</text></view>
  72 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>未处理</text></view>
  73 + </view>
  74 + <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  75 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>522</text></view>
  76 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>已处理</text></view>
  77 + </view>
  78 + <view style="margin-left: 45rpx;width: 200rpx;height: 150rpx;justify-content: space-between;flex-direction: column;" class="u-flex">
  79 + <view style="height: 70rpx;font-size:14px;color:#333333;font-weight:500"><text>99</text></view>
  80 + <view style="position:relative;top:-40rpx;height: 60rpx;font-size:12px;color:#999999"><text>误报</text></view>
  81 + </view>
  82 + </view>
  83 + </view>
  84 + </view>
  85 + </view>
  86 + </view>
  87 + <f-tabbar></f-tabbar>
7 88 </view>
8 89 </template>
9 90
... ... @@ -11,19 +92,85 @@
11 92 import fTabbar from '@/components/module/f-tabbar/f-tabbar';
12 93
13 94 export default {
14   - components:{
15   - fTabbar,
16   - },
17   - data() {
18   - return {
19   - }
20   - },
21   - onLoad() {
22   - // 隐藏原生的tabbar
23   - uni.hideTabBar();
24   - },
25   -}
  95 + components: {
  96 + fTabbar
  97 + },
  98 + data() {
  99 + return {
  100 + openCamera() {
  101 + uni.navigateTo({
  102 + url: 'camera/camera'
  103 + });
  104 + },
  105 + openOrgStatus() {
  106 + uni.navigateTo({
  107 + url: 'orgStatus/orgStatus'
  108 + });
  109 + }
  110 + };
  111 + },
  112 + onLoad() {
  113 + // 隐藏原生的tabbar
  114 + uni.hideTabBar();
  115 + }
  116 +};
26 117 </script>
27 118
28 119 <style lang="scss" scoped>
  120 +.index-page {
  121 + padding: 27rpx 15rpx;
  122 + min-height: 100vh;
  123 + background-color: #f8f9fa;
  124 +}
  125 +.grid-container {
  126 + display: grid;
  127 + width: 750rpx;
  128 + height: 400rpx;
  129 + grid-template-columns: repeat(2, 350rpx);
  130 + grid-template-rows: repeat(2, 200rpx);
  131 + grid-gap: 20rpx;
  132 +}
  133 +
  134 +.grid-item {
  135 + background-color: #fff;
  136 + border: 0.01rpx solid #fff;
  137 + padding: 40rpx;
  138 + border-radius: 7px;
  139 + .item-center {
  140 + width: 290rpx;
  141 + height: 150rpx;
  142 + margin: -15rpx;
  143 + display: flex;
  144 + flex-direction: row;
  145 + justify-content: space-between;
  146 + align-items: center;
  147 + .center {
  148 + width: 130rpx;
  149 + height: 150rpx;
  150 + }
  151 + }
  152 +}
  153 +.basic-sty {
  154 + padding: 0 10rpx;
  155 + margin-top: 50rpx;
  156 + .basic {
  157 + width: 750rpx;
  158 + height: 500rpx;
  159 + display: flex;
  160 + justify-content: space-between;
  161 + align-items: flex-start;
  162 + flex-direction: column;
  163 + .basic-item {
  164 + width: 700rpx;
  165 + height: 240rpx;
  166 + background-color: #fff;
  167 + display: flex;
  168 + justify-content: space-between;
  169 + align-items: flex-start;
  170 + flex-direction: column;
  171 + .item-child {
  172 + }
  173 + }
  174 + }
  175 +}
29 176 </style>
... ...
  1 +<template>
  2 + <view class="content">
  3 + <text>组态</text>
  4 + <!-- 公共组件-每个页面必须引入 -->
  5 + <public-module></public-module>
  6 + <f-tabbar></f-tabbar>
  7 + </view>
  8 +</template>
  9 +
  10 +<script>
  11 +import fTabbar from '@/components/module/f-tabbar/f-tabbar';
  12 +
  13 +export default {
  14 + components:{
  15 + fTabbar,
  16 + },
  17 + data() {
  18 + return {
  19 + }
  20 + },
  21 + onLoad() {
  22 + // 隐藏原生的tabbar
  23 + uni.hideTabBar();
  24 + },
  25 +
  26 +}
  27 +</script>
  28 +
  29 +<style lang="scss" scoped>
  30 +
  31 +</style>
... ...
... ... @@ -15,7 +15,7 @@
15 15 <view class="form-row">
16 16 <input class="input" type="number" v-model="vCode" placeholder="请输入验证码"
17 17 placeholder-style="font-weight:normal;color:#bbbbbb;"></input>
18   - <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
  18 + <view style="color:#6299ff" class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
19 19 </view>
20 20 <button class="submit" size="default" @click="onSubmit">
21 21 <text style="color:#FFFFFF">登录</text>
... ... @@ -139,7 +139,7 @@
139 139 height: 80rpx;
140 140 color: #333;
141 141 line-height: 80rpx;
142   - background: #eee;
  142 + // background: #eee;
143 143 min-width: 188rpx;
144 144 text-align: center;
145 145 border-radius: 8rpx;
... ... @@ -150,8 +150,8 @@
150 150 z-index: 11;
151 151
152 152 &.forhidden {
153   - background: #eee;
154   - color: #cccccc;
  153 + // background: #eee;
  154 + // color: #cccccc;
155 155 }
156 156 }
157 157 }
... ...
... ... @@ -15,7 +15,7 @@
15 15 <view class="form-row">
16 16 <input class="input" type="number" v-model="vCode" placeholder="请输入短信验证码"
17 17 placeholder-style="font-weight:normal"></input>
18   - <view class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
  18 + <view style="color:#6299ff" class="getvcode" :class="{forhidden:readonly}" @click="getVcode">{{ codeText }}</view>
19 19 </view>
20 20 <button class="submit" size="default" @click="onNextSubmit">
21 21 <text style="color:#fff">下一步</text>
... ... @@ -138,9 +138,7 @@
138 138 .loginPhone {
139 139 .form-row {
140 140 position: relative;
141   - border-radius: 32px;
142   - border: 1px solid #F7F9FF;
143   - background: #F7F9FF;
  141 + border-bottom: 1px solid #e5e5e5;
144 142 .input {
145 143 font-size: 34rpx;
146 144 line-height: 102rpx;
... ... @@ -148,7 +146,6 @@
148 146 width: 100%;
149 147 box-sizing: border-box;
150 148 font-size: 30rpx;
151   - padding: 0 34rpx;
152 149 font-weight: bold;
153 150 }
154 151
... ... @@ -157,7 +154,6 @@
157 154 height: 80rpx;
158 155 color: #333;
159 156 line-height: 80rpx;
160   - // background: #eee;
161 157 min-width: 188rpx;
162 158 text-align: center;
163 159 border-radius: 8rpx;
... ... @@ -166,10 +162,7 @@
166 162 transform: translateY(-50%);
167 163 right: 0;
168 164 z-index: 11;
169   -
170 165 &.forhidden {
171   - // background: #eee;
172   - // color: #cccccc;
173 166 }
174 167 }
175 168 }
... ...
... ... @@ -11,19 +11,24 @@
11 11 </view>
12 12 <view class="f__login">
13 13 <view class="loginPhone">
14   - <view class="form-row"><u--input border="bottom" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="account"></u--input></view>
15 14 <view class="form-row">
16   - <u--input
  15 + <u--input border="bottom" class="input" prefixIcon="account-fill" type="text" placeholder="登录账号" v-model="loginForm.account"></u--input>
  16 + </view>
  17 + <view class="form-row">
  18 + <u-input
17 19 border="bottom"
18 20 class="input"
19 21 prefixIcon="lock-fill"
20   - :suffixIcon="showPasswordIcon"
21 22 suffixIconStyle="color: #909399"
22   - type="password"
  23 + :type="showPasswordOrText"
23 24 placeholder="请输入密码"
24   - v-model="password"
  25 + v-model="loginForm.password"
25 26 @change="passwordChange"
26   - ></u--input>
  27 + >
  28 + <template slot="suffix">
  29 + <u-icon @click="showPasswordMode" :name="showPasswordIcon"></u-icon>
  30 + </template>
  31 + </u-input>
27 32 </view>
28 33 <button class="submit" size="default" @click="onSubmitFunc"><text style="color:#FFFFFF">登录</text></button>
29 34 <view class="u-flex" style="flex-direction: row;margin-top: 20rpx;justify-content: space-between;">
... ... @@ -33,7 +38,7 @@
33 38 <view class="u-flex" style="justify-content: center;flex-direction: column;margin-top: 220rpx;">
34 39 <view style="color:#999999;font-size: 13px;">第三方账号登录</view>
35 40 <view style="height:20rpx"></view>
36   - <view ><image style="width: 75rpx;height: 75rpx;" src="../../static/weixin.png" mode="aspectFill"></image></view>
  41 + <view><image style="width: 75rpx;height: 75rpx;" src="../../static/weixin.png" mode="aspectFill"></image></view>
37 42 <view class="circleStyleBottom"></view>
38 43 </view>
39 44 </view>
... ... @@ -45,7 +50,12 @@
45 50 export default {
46 51 data() {
47 52 return {
48   - showPasswordIcon: 'eye-off'
  53 + showPasswordIcon: 'eye-off',
  54 + showPasswordOrText: 'password',
  55 + loginForm: {
  56 + account: '',
  57 + password: ''
  58 + }
49 59 };
50 60 },
51 61 methods: {
... ... @@ -60,6 +70,15 @@ export default {
60 70 uni.navigateTo({
61 71 url: './findPassword'
62 72 });
  73 + },
  74 + showPasswordMode() {
  75 + if (this.loginForm.password.length !== 0) {
  76 + this.showPasswordOrText = 'text';
  77 + this.showPasswordIcon = 'eye-fill';
  78 + } else {
  79 + this.showPasswordOrText = 'password';
  80 + this.showPasswordIcon = 'eye-off';
  81 + }
63 82 }
64 83 }
65 84 };
... ...
... ... @@ -261,7 +261,7 @@ export default {
261 261 <style lang="scss" scoped>
262 262 .headBox {
263 263 background-color: #fff;
264   - border-top: 0.2px solid gray;
  264 + border-top: 0.01px solid #f5f5f5;
265 265 height: 250rpx;
266 266
267 267 .avatar {
... ...