[techtrone][国外初版]

locale/en.json

@@ -1,5 +1,7 @@
 {
   "common":{
+	"关于我们":"About us",
+	"帮助":"Help",
     "正在加载":"Loading",
     "确认": "Confirm",
     "取消": "Cancel",
@@ -180,7 +182,7 @@
   "mine": "Mine",
   "login": {
     "language": "Language",
-    "title": "WEGOOD Charger Platform",
+    "title": "Techtron",
     "mailInput": "Please enter your email",
     "pwdInput": "Please enter your password",
     "noAccount": "No account",

pages.json

@@ -189,24 +189,31 @@
     "color": "#000000",
     "selectedColor": "#000000",
     "borderStyle": "white",
-    "backgroundColor": "#ffffff",
+    "backgroundColor": "#000000",
+	"iconWidth": "50px",
     "list": [{
       "pagePath": "pages/index",
-      "iconPath": "static/images/icons/menu-off.png",
-      "selectedIconPath": "static/images/icons/menu-on.png",
+      "iconPath": "static/images/new/starts/tabbar/one_off.png",
+      "selectedIconPath": "static/images/new/starts/tabbar/one_on.png",
       "text": "%index%"
-    }, {
+    }, 
+	{
+		"pagePath": "pages/weitiandi/deviceList",
+		"iconPath": "static/images/new/starts/tabbar/two_off.png",
+		"selectedIconPath": "static/images/new/starts/tabbar/two_on.png"
+	},
+	{
       "pagePath": "pages/mine/index",
-      "iconPath": "static/images/icons/mine-off.png",
-      "selectedIconPath": "static/images/icons/mine-on.png",
+      "iconPath": "static/images/new/starts/tabbar/three_off.png",
+      "selectedIconPath": "static/images/new/starts/tabbar/three_on.png",
       "text": "%mine%"
     }
     ]
   },
   "globalStyle": {
-    "navigationBarTextStyle": "black",
+    "navigationBarTextStyle": "white",
     "navigationBarTitleText": "充电助手",
-    "navigationBarBackgroundColor": "#F9FCFF",
+    "navigationBarBackgroundColor": "#000000",
     "navigationStyle":"custom"
   }
 }

pages/bluetooth/index/index.vue

@@ -3,8 +3,8 @@
                :refresher-enabled="false">
     <view v-for="(item, index) in deviceListDataShow" :key="item.id" class="list-item" hover-class="list-item-hover"
           hover-start-time="0" hover-stay-time="100" @click="listViewTap(item.id)">
-      <image v-if="item.manufacturer==='eciot'" src="/static/img/ecble.png" class="list-item-img"></image>
-      <image v-else src="/static/img/ble.png" class="list-item-img"></image>
+      <image v-if="item.manufacturer==='eciot'" src="/static/images/new/starts/ble.png" class="list-item-img"></image>
+      <image v-else src="/static/images/new/starts/bleof.png" class="list-item-img"></image>
       <text class="list-item-name">{{item.name}}</text>
       <image v-if="item.rssi >= -41" src="/static/img/s5.png" mode="aspectFit" class="list-item-rssi-img"></image>
       <image v-else-if="item.rssi >= -55" src="/static/img/s4.png" mode="aspectFit" class="list-item-rssi-img"></image>
@@ -354,6 +354,9 @@ export default {
 <style>
 .main-container {
   height: 100vh;
+  background-image: url('../../../static/images/new/starts/bg1.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 .list-item {
@@ -379,6 +382,7 @@ export default {
   left: 76px;
   top: 0px;
   line-height: 56px;
+  color: #e5e4e9;
 }
 
 .list-item-rssi-img {
@@ -399,6 +403,7 @@ export default {
   font-weight: bold;
   display: flex;
   justify-content: center;
+  color: aliceblue;
 }
 
 .list-item-line {

pages/bluetooth/index/wifi.vue

@@ -1,5 +1,5 @@
 <template>
-  <view style="height: 100vh">
+  <view style="height: 100vh" class="container">
     <view v-if="!connected">
       <scroll-view class="main-container" scroll-y="true"
                    :refresher-enabled="false">
@@ -89,7 +89,7 @@
             <u--input
                 v-model="SSID"
                 disabled
-                disabledColor="#ffffff"
+                disabledColor="#363636"
                 placeholder="请选择wifi:"
                 border="none"
             ></u--input>
@@ -721,8 +721,14 @@ export default {
 </script>
 
 <style>
+	.container{
+		background-image: url('../../../static/images/new/starts/bg1.jpg');
+		background-size: cover;
+		background-repeat: no-repeat;
+	}
 .main-container {
   height: 100vh;
+ 
 }
 
 .list-item {
@@ -748,6 +754,7 @@ export default {
   left: 76px;
   top: 0px;
   line-height: 56px;
+  color: aliceblue;
 }
 
 .list-item-rssi-img {

pages/index.vue

@@ -1,6 +1,6 @@
 <template>
-  <view class="content">
-    <view class="banner">
+	<view class="content">
+		<!-- <view class="banner">
       <uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
         <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
           <swiper-item v-for="(item, index) in data" :key="index">
@@ -10,9 +10,41 @@
           </swiper-item>
         </swiper>
       </uni-swiper-dot>
-    </view>
-
-    <view class="container">
+    </view> -->
+		<view style="height: 10vh;text-align: center;">
+			<image style="height: 3vh;width: 15vh;margin-top: 5vh;"
+				src="../static/images/new/starts/login/backImg2.png"></image>
+				
+		</view>
+		<view style="text-align: center;top:12vh;position: relative;color: aliceblue;">
+						<view style="font-size: 30rpx;">Please choose from the below options:</view>
+						<view style="font-size: 20rpx;">Charge up quickly & easily to enjoy a smarter life!</view>
+					</view>
+		<view
+			style="margin:0 5vw;left:0px;right:0px;text-align: center;top:55vh;position: absolute;display: flex;flex-direction: rows;justify-content: space-evenly;">
+			<!-- <view style="color:white;width:80px;">
+   					设备编号
+   				</view> -->
+			<view style="text-align: center;">
+				<view class="blue" @click="buleTeeth()">
+					<image src="../static/images/new/starts/index/blue.png" style="width: 60px;height: 60px;margin-top: 2vh;"></image>
+					</view>
+					<view class="" @click="scan">
+				<image src="../static/images/new/starts/index/scan.png" style="width: 60px;height: 60px;margin-top: 2vh;"
+					></image>
+					</view>
+					<!-- <view class="" @click="scan">
+					<image src="../static/images/new/starts/index/bind.png" style="width: 60px;height: 60px;margin-top: 2vh;"
+						></image>
+						</view> -->
+				<!-- <u--input v-model="sn" placeholder="请输入设备编号" color="white"
+   						style="width: 10vw;padding-left:10px;background: rgb(90, 88, 115);text-align: left;font-size: 20px;width:90vw;border-radius: 100vh;height: 40px;">
+   						<u-button slot="suffix" @click="binddevice"
+   							style="background: #505086;color:white;border-radius: 100vh;width: 120px;margin-right: -10px;">绑 定</u-button>
+   					</u--input> -->
+			</view>
+		</view>
+		<!-- <view class="container">
       <view class="item" @click="buleTeeth">
         <image :src = "imgUrl+'/index/bluetooth.png'"/>
         <view class="item-text">{{i18('蓝牙连接')}}</view>
@@ -30,182 +62,189 @@
           <image :src = "imgUrl+'/index/bluetooth.png'"/>
           <view class="item-text">{{i18('WIFI配网')}}</view>
         </view>
-    </view>
-  </view>
+    </view> -->
+	</view>
 </template>
 
 <script>
-import { getDeviceInfoFromQrcode,bindDevice } from '@/api/device/device.js'
-import i18 from '@/utils/i18.js'
-  export default {
-    data:function(){
-      return {
-        current: 0,
-        swiperDotIndex: 0,
-        data: [{
-          image: '/index/banner-index.png'
-        }
-        ]
-      }
-    },
-    computed: {
-      imgUrl() {
-        return getApp().globalData.config.imgUrl;
-      }
-    },
-    onLoad: function() {
-    },
-    onShow(){
-      uni.setNavigationBarTitle({
-        title: this.$t('page.worktai')
-      })
-    },
-    methods:{
-      devicelist(){
-        uni.navigateTo({
-          url: '/pages/weitiandi/deviceList'
-        });
-      },
-      i18(text){
-        return i18(text)
-      },
-      buleTeeth(){
-        uni.navigateTo({
-          url: '/pages/bluetooth/index/index'
-        });
-      },
-      wifi(){
-        uni.navigateTo({
-          url: '/pages/bluetooth/index/wifi'
-        });
-      },
-      toBind(qrcode){
-        bindDevice(qrcode).then(res=>{
-          let data = res.data;
-          if(data != null){
-            let imei = res.data.imei;
-            let ccid = res.data.ccid;
-            let qrcode = res.data.qrcode;
-            let uuid = res.data.uuid;
-            this.$modal.showToast("绑定成功");
-          }else{
-            this.$modal.showToast("绑定失败");
-          }
-        })
-      },
-      scan(){
-        let self = this;
-        uni.scanCode({
-          success: function (res) {
-            console.log('条码类型：' + res.scanType);
-            console.log('条码内容：' + res.result);
-            getDeviceInfoFromQrcode(res.result).then(res=>{
-              if(res.data != null){
-                let imei = res.data.imei;
-                let ccid = res.data.ccid;
-                let qrcode = res.data.qrcode;
-                let uuid = res.data.userId;
-                if(uuid){
-                  self.$modal.showToast("该设备已被绑定");
-                }else{
-                  self.$modal.confirm("确认绑定该设备？").then(res=>{
-                    self.toBind(qrcode)
-                  })
-                }
-                // uni.navigateTo({
-                //   url: '/pages/weitiandi/device/status?qrcode='+qrcode+'&id='+imei+'&ccid='+ccid
-                // });
-              }else{
-                self.$modal.showToast("找不到设备,请联系管理员");
-              }
-            });
-          }
-        });
-      },
-      scan2(){
-        let self = this;
-        getDeviceInfoFromQrcode("http://wetiandi.com/index.php?do=wepay&sn=GD1B388803").then(res=>{
-            if(res.data != null){
-                  let imei = res.data.imei;
-                  let ccid = res.data.ccid;
-                  let qrcode = res.data.qrcode;
-                  let uuid = res.data.userId;
-                  if(uuid){
-                    self.$modal.showToast("该设备已被绑定");
-                  }else{
-                    self.$modal.confirm("确认绑定该设备？").then(res=>{
-                      self.toBind(qrcode)
-                    })
-                  }
-                  // uni.navigateTo({
-                  //   url: '/pages/weitiandi/device/status?qrcode='+qrcode+'&id='+imei+'&ccid='+ccid
-                  // });
-            }else{
-              self.$modal.showToast("找不到设备,请联系管理员");
-            }
-        });
-      }
-    }
-  }
+	import {
+		getDeviceInfoFromQrcode,
+		bindDevice
+	} from '@/api/device/device.js'
+	import i18 from '@/utils/i18.js'
+	export default {
+		data: function() {
+			return {
+				current: 0,
+				swiperDotIndex: 0,
+				data: [{
+					image: '/index/banner-index.png'
+				}]
+			}
+		},
+		computed: {
+			imgUrl() {
+				return getApp().globalData.config.imgUrl;
+			}
+		},
+		onLoad: function() {},
+		onShow() {
+			uni.setNavigationBarTitle({
+				title: this.$t('page.worktai')
+			})
+		},
+		methods: {
+			devicelist() {
+				uni.navigateTo({
+					url: '/pages/weitiandi/deviceList'
+				});
+			},
+			i18(text) {
+				return i18(text)
+			},
+			buleTeeth() {
+				uni.navigateTo({
+					url: '/pages/bluetooth/index/index'
+				});
+			},
+			wifi() {
+				uni.navigateTo({
+					url: '/pages/bluetooth/index/wifi'
+				});
+			},
+			toBind(qrcode) {
+				bindDevice(qrcode).then(res => {
+					let data = res.data;
+					if (data != null) {
+						let imei = res.data.imei;
+						let ccid = res.data.ccid;
+						let qrcode = res.data.qrcode;
+						let uuid = res.data.uuid;
+						this.$modal.showToast("绑定成功");
+					} else {
+						this.$modal.showToast("绑定失败");
+					}
+				})
+			},
+			scan() {
+				let self = this;
+				uni.scanCode({
+					success: function(res) {
+						console.log('条码类型：' + res.scanType);
+						console.log('条码内容：' + res.result);
+						getDeviceInfoFromQrcode(res.result).then(res => {
+							if (res.data != null) {
+								let imei = res.data.imei;
+								let ccid = res.data.ccid;
+								let qrcode = res.data.qrcode;
+								let uuid = res.data.userId;
+								if (uuid) {
+									self.$modal.showToast("该设备已被绑定");
+								} else {
+									self.$modal.confirm("确认绑定该设备？").then(res => {
+										self.toBind(qrcode)
+									})
+								}
+								// uni.navigateTo({
+								//   url: '/pages/weitiandi/device/status?qrcode='+qrcode+'&id='+imei+'&ccid='+ccid
+								// });
+							} else {
+								self.$modal.showToast("找不到设备,请联系管理员");
+							}
+						});
+					}
+				});
+			},
+			scan2() {
+				let self = this;
+				getDeviceInfoFromQrcode("http://wetiandi.com/index.php?do=wepay&sn=GD1B388803").then(res => {
+					if (res.data != null) {
+						let imei = res.data.imei;
+						let ccid = res.data.ccid;
+						let qrcode = res.data.qrcode;
+						let uuid = res.data.userId;
+						if (uuid) {
+							self.$modal.showToast("该设备已被绑定");
+						} else {
+							self.$modal.confirm("确认绑定该设备？").then(res => {
+								self.toBind(qrcode)
+							})
+						}
+						// uni.navigateTo({
+						//   url: '/pages/weitiandi/device/status?qrcode='+qrcode+'&id='+imei+'&ccid='+ccid
+						// });
+					} else {
+						self.$modal.showToast("找不到设备,请联系管理员");
+					}
+				});
+			}
+		}
+	}
 </script>
 
 <style>
-  .content {
-    background: rgb(249, 252, 255);
-    inset: 0;
-    position: absolute;
-  }
+	.content {
+		background-image: url('../static/images/new/starts/bg1.jpg');
+		background-size: cover;
+		background-repeat: no-repeat;
+		inset: 0;
+		position: absolute;
+	}
+
+
+	.swiper {
+		height: 22vh;
+	}
+
+	.banner {
+		height: 22vh;
+		width: 100%;
+		margin-top: 1vh
+	}
+
+	.swiper-box {
+		height: 22vh;
+	}
 
+	.swiper-item {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		color: #fff;
+		height: 300rpx;
+		line-height: 300rpx;
+	}
 
-  .swiper {
-    height: 22vh;
-  }
-.banner{
-  height: 22vh;
-  width: 100%;
-  margin-top:1vh
-}
-  .swiper-box {
-    height: 22vh;
-  }
+	@media screen and (min-width: 500px) {
+		.uni-swiper-dot-box {
+			width: 400px;
+			/* #ifndef APP-NVUE */
+			margin: 0 auto;
+			/* #endif */
+			margin-top: 8px;
+		}
 
-  .swiper-item {
-    /* #ifndef APP-NVUE */
-    display: flex;
-    /* #endif */
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    color: #fff;
-    height: 300rpx;
-    line-height: 300rpx;
-  }
+		.image {
+			width: 100%;
+		}
+	}
 
-  @media screen and (min-width: 500px) {
-    .uni-swiper-dot-box {
-      width: 400px;
-      /* #ifndef APP-NVUE */
-      margin: 0 auto;
-      /* #endif */
-      margin-top: 8px;
-    }
+	.item {
+		display: inline-block;
+		width: 50%;
+		position: relative;
+	}
 
-    .image {
-      width: 100%;
-    }
-  }
-  .item{
-    display: inline-block;
-    width: 50%;
-    position: relative;
-  }
-  .item image{
-    height: 12vh;
-  }
-  .item-text{
-    position: absolute;
-    top:30px;
-    left: 50%;
-  }
+	.item image {
+		height: 12vh;
+	}
 
-</style>
+	.item-text {
+		position: absolute;
+		top: 30px;
+		left: 50%;
+	}
+</style>

pages/login.vue

@@ -1,21 +1,22 @@
 <template>
   <view class="normal-login-container">
 
-	<view style="position: fixed;left: 10px;z-index: 999999;top:50px;font-size: 10px;">{{i18('版本')}}:{{version}}</view>
-   <view style="position: fixed;right: 10px;z-index: 999999;top:50px" @click="changeLocale">
+	<view style="color: aliceblue;position: fixed;left: 10px;z-index: 999999;top:50px;font-size: 10px;">{{i18('版本')}}:{{version}}</view>
+   <view style="color: aliceblue;position: fixed;right: 10px;z-index: 999999;top:50px" @click="changeLocale">
      {{ $t('login.language') }}：{{localeConfig[locale]}}<uni-icons type="gear" size="15"></uni-icons>
    </view>
-	<view>
-		<image style="width: 750px;height: 807px;" :src="imgUrl+'/login/backImg2.png'" mode="widthFix"/>
-		<view class="logo-content align-center justify-center flex">
+   <view style="height: 30vh;">
+	   <image style="height: 3vh;width: 15vh;margin-top: 20vh;margin-left: 15vh;" src="../static/images/new/starts/login/backImg2.png"></image>
+   </view>
+	<view style="height: 40vh;">
+		<!-- <image style="width: 750px;height: 807px;" :src="imgUrl+'/login/backImg2.png'" mode="widthFix"/> -->
+		<!-- <view class="logo-content align-center justify-center flex">
 		  <text class="title" style="font-size: 25px;margin-left:-71px">{{$t('login.title') }}</text>
-		</view>
+		</view> -->
 		<view class="logo-content justify-center flex">
-		  <text class="welcome" style="">Welcome</text>
-		</view>
-		<view class="logo-content justify-center flex">
-		  <text class="welcome1" style=""></text>
+		  <text class="welcome" style="height: 20vh;">Welcome</text>
 		</view>
+		
 	</view>
 	<!-- 登录表单 -->
     <view class="login-form-content" style="z-index: 99;position: relative;"  v-show="isLogin">
@@ -23,10 +24,10 @@
         <!-- <view class="iconfont icon-user icon"></view> -->
 	   <uni-row>
 	   <uni-col :span="2">
-		<uni-icons class="icon" type="email" size="20" color="#0E9F9B"></uni-icons>
+		<uni-icons class="icon" type="email" size="20" color="#e3e3e3"></uni-icons>
        </uni-col>
 	   <uni-col :span="22">
-	    <input v-model="loginForm.username" class="input" type="text" :placeholder="$t('login.mailInput')" maxlength="30" />
+	    <input style="color: #000000;" v-model="loginForm.username" class="input" type="text" :placeholder="$t('login.mailInput')" maxlength="30" />
 	   </uni-col>
 	   </uni-row>
       </view>
@@ -34,10 +35,10 @@
         <!-- <view class="iconfont icon-password icon"></view> -->
 		<uni-row
 		<uni-col :span="2">
-		<uni-icons class="icon" type="locked" size="20" color="#0E9F9B"></uni-icons>
+		<uni-icons class="icon" type="locked-filled" size="20" color="#e3e3e3"></uni-icons>
 		</uni-col>
 		<uni-col :span="22">
-        <uni-easyinput style="margin-left:-10px ;" :inputBorder="false" v-model="loginForm.password"  type="password" class="input"  :placeholder="$t('login.pwdInput')" maxlength="30" />
+        <uni-easyinput style="margin-left:-10px ;color: #000000;" :inputBorder="false" v-model="loginForm.password"  type="password" class="input"  :placeholder="$t('login.pwdInput')" maxlength="30" />
 		</uni-col>
 		</uni-row>
       </view>
@@ -64,10 +65,10 @@
 		  <view class="input-item flex align-center">
 		   <uni-row>
 		   <uni-col :span="2">
-		  		<uni-icons class="icon" type="email" size="20" color="#0E9F9B"></uni-icons>
+		  		<uni-icons class="icon" type="email" size="20" color="#e3e3e3"></uni-icons>
 		   </uni-col>
 		   <uni-col :span="22">
-		    <input v-model="register.username" class="input" type="text" :placeholder="$t('login.mailInput')" maxlength="30" />
+		    <input style="color: #000000;" v-model="register.username" class="input" type="text" :placeholder="$t('login.mailInput')" maxlength="30" />
 		   </uni-col>
 		   </uni-row>
 		  </view>
@@ -75,10 +76,10 @@
 		  <view class="input-item flex align-center">
 		   <uni-row>
 		   <uni-col :span="2">
-		  		<uni-icons class="icon" type="locked" size="20" color="#0E9F9B"></uni-icons>
+		  		<uni-icons class="icon" type="locked" size="20" color="#e3e3e3"></uni-icons>
 		   </uni-col>
 		   <uni-col :span="22">
-		    <input v-model="register.password" class="input" type="text" :placeholder="$t('login.pwdInput')" maxlength="30" />
+		    <input v-model="register.password" style="color: #000000;" class="input" type="text" :placeholder="$t('login.pwdInput')" maxlength="30" />
 		   </uni-col>
 		   </uni-row>
 		  </view>
@@ -91,14 +92,14 @@
 		  </view>
      </view>
   </view>
-    <view v-show="isLogin">
+    <!-- <view v-show="isLogin">
     <view class="img">
 	    <image @click="buleTeeth" style="width: 31px;" :src="imgUrl+'/login/blueTeeth.png'" mode="widthFix"/>
 	</view>
 	<view class="blue-text">
 	    <text @click="buleTeeth">{{ $t('login.buletooth') }}</text>
 	</view>
-	</view>
+	</view> -->
     <u-picker @cancel="cancelLocale" :confirmText="i18('确认')" :cancelText="i18('取消')" :show="showLocale" keyName="label" :columns="localeList" @confirm="changeLanguage"></u-picker>
     <u-popup :zoom="false" :show="showStatus" :mask-close-able="false" mode="center" :closeable="false"  border-radius="14" height="150rpx">
       <view style="margin:20rpx">
@@ -501,7 +502,11 @@
   }
 
   .normal-login-container {
+	  background-image: url('../static/images/new/starts/bg1.jpg');
+	  background-size: cover;
+	  background-repeat: no-repeat;
     width: 100%;
+	height: 102.5vh;
     font-family: 思源黑体;
 	margin-top: -20px;
     .logo-content {
@@ -526,15 +531,13 @@
 		text-stroke: 2px #FFFFFF;
 		font-size: 34px;
 		// letter-spacing: 2px;
-		color: #0E9F9B;
+		color: #57B03D;
 		text-shadow: 0 2px white, 2px 0 white, -2px 0 white, 0 -2px white;
       }
 
 	  .welcome {
-		  margin-top: -245px;
-		  margin-left: -178px;
 		  z-index: 2;
-		  font-size: 31px;
+		  font-size: 15px;
 		  font-family: Source Han Sans CN;
 		  font-weight: 400;
 	  }
@@ -562,9 +565,9 @@
         height: 45px;
         border-radius: 8px;
         background-color: #f0fdfc;
-		border: 1px solid #0E9F9B;
+		border: 1px solid #e3e3e3;
 		opacity: 0.5;
-		color: #0E9F9B;
+		color: #e3e3e3;
 		text-indent:1em;
 		.icon {
 			// margin-left: 10px;
@@ -578,7 +581,7 @@
           line-height: 27px;
           text-align: left;
           padding-left: 15px;
-		  color: #0E9F9B;
+		  color: #d8d8d8;
 		  margin-left: 10;
         }
 
@@ -588,7 +591,7 @@
         margin-top: 30px;
         height: 40px;
 		border-radius: 8px;
-		background-color: #0E9F9B;
+		background-color: #57B03D;
       }
 
       .xieyi {
@@ -609,7 +612,7 @@
       }
     }
 	.text-green {
-			color: #0E9F9B;
+			color: #57B03D;
 		}
 	.img {
 		margin-top: 25px;

pages/mine/index.vue

@@ -1,10 +1,92 @@
 <template>
-    <view class="mine-container" :style="'background: url('+this.imgUrl+'/index/mingbg.png) no-repeat 100% 100%;height:'+windowHeight+'px;background-position: 0 0;background-size: 100% 100%;'">
+	<!-- <view class="mine-container" :style="'background: url('+this.imgUrl+'/index/mingbg.png) no-repeat 100% 100%;height:'+windowHeight+'px;background-position: 0 0;background-size: 100% 100%;'">
       <view style="position: fixed;right: 10px;z-index: 999999;top:30px" @click="changeLocale">
         {{ $t('login.language') }}：{{localeConfig[locale]}}<uni-icons type="gear" size="15"></uni-icons>
-      </view>
-    <!--顶部个人信息栏-->
-    <view class="header-section">
+      </view> -->
+	<view class="mine-container">
+		<view style="height: 0vh;place-items: center;display: grid;">
+			<image style="height: 3vh;width: 15vh;margin-top: 5vh;top: 3vh;"
+				src="../../static/images/new/starts/login/backImg2.png"></image>
+			<text @click="clickRight()" style="color: #ffffff;font-size: 15px;margin: 0 0 0 31vh;font-weight: bold;">· · ·</text>
+			<view>
+				<uni-drawer @change="changeDrawer" width="250" style="top:20vh;height: 24vh" ref="showRight" mode="right"
+					:mask-click="true">
+					<scroll-view  style="background: linear-gradient(#000000, #5a5a58);font-size: 20px;" scroll-y="true">
+						<view class="prop-item" @click="handleLogout()">
+							<!-- <view class="prop-item-image">
+														<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
+													</view> -->
+							<view class="prop-item-right">{{i18('退出登录')}}</view>
+							<view class="prop-item-left">
+								<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
+							</view>
+						</view>
+						<u-divider/>
+						<view class="prop-item" @click="skip(2)">
+							<!-- <view class="prop-item-image">
+														<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
+													</view> -->
+							<view class="prop-item-right">{{i18('关于我们')}}</view>
+							<view class="prop-item-left">
+								<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
+							</view>
+						</view>
+						<u-divider/>
+						<view class="prop-item" @click="skip(3)">
+							<!-- <view class="prop-item-image">
+														<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
+													</view> -->
+							<view class="prop-item-right">{{i18('帮助')}}</view>
+							<view class="prop-item-left">
+								<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
+							</view>
+						</view>
+						<u-divider/>
+					</scroll-view>
+				</uni-drawer>
+			</view>
+		</view>
+		<u-divider style="margin-top: 15vh;"></u-divider>
+		<view style="margin-top: 5vh;justify-content: center;align-items: center;justify-content: center;display: grid;align-content: center;justify-items: center;line-height: 30px;">
+			<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
+			</image>
+			<view style="font-size: 20px;font-weight: bold;color: #d0d0d0;">
+			  {{ name }}
+			</view>
+			<view >
+			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start_light.png"></image>
+			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start_light.png"></image>
+			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start_light.png"></image>
+			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start_light.png"></image>
+			 <image style="width: 40rpx;height: 40rpx;" src="../../static/images/new/starts/mine/start.png"></image>
+			</view>
+			<view style="color: #d0d0d0;">
+			  {{ name }}
+			</view>
+		</view>
+		<u-divider style="color: aqua;"/>
+		<view class="menu-list">
+		  <view class="list-cell list-cell-arrow" @click="handleToEditInfo">
+		    <view class="menu-item-box">
+		      <image :src="this.imgUrl+'/mine/symbol.png'" style="width: 18px;height: 18px;margin-right:5px"></image>
+		      <view class="menu-text"> {{  i18('账户设置')}}</view>
+		    </view>
+		  </view>
+		  <view class="list-cell list-cell-arrow" @click="handleAbout">
+		    <view class="menu-item-box">
+		      <image :src="this.imgUrl+'/mine/record.png'" style="width: 18px;height: 18px;margin-right:5px"></image>
+		      <view class="menu-text">{{  i18('充电记录')}}</view>
+		    </view>
+		  </view>
+		  <view class="list-cell list-cell-arrow" @click="handleToSetting">
+		    <view class="menu-item-box">
+		      <image :src="this.imgUrl+'/mine/symbol (1).png'" style="width: 18px;height: 18px;margin-right:5px"></image>
+		      <view class="menu-text">{{  i18('预约记录')}}</view>
+		    </view>
+		  </view>
+		  </view>
+		<!--顶部个人信息栏-->
+		<!-- <view class="header-section">
       <view class="flex padding justify-between">
         <view class="flex align-center">
           <view v-if="!avatar" class="cu-avatar xl round bg-white">
@@ -47,163 +129,277 @@
             <view class="menu-text">{{  i18('预约记录')}}</view>
           </view>
         </view>
-      </view>
-      <u-picker @cancel="cancelLocale" :confirmText="i18('确认')" :cancelText="i18('取消')" :show="showLocale" keyName="label" :columns="localeList" @confirm="changeLanguage"></u-picker>
-
-    </view>
+      </view> -->
+		<u-picker @cancel="cancelLocale" :confirmText="i18('确认')" :cancelText="i18('取消')" :show="showLocale"
+			keyName="label" :columns="localeList" @confirm="changeLanguage"></u-picker>
 
+	</view>
 </template>
 
 <script>
-  import storage from '@/utils/storage'
-  import i18 from '@/utils/i18.js'
-  export default {
-    data() {
-      return {
-        showLocale:false,
-        locale:"",
-        localeList:[[{"label":"简体中文","id":"zh-Hans"},{"label":"英文","id":"en"}]],
-        localeConfig:{"zh-Hans":"简体中文","en":"英文"},
-        name: this.$store.state.user.name,
-        version: getApp().globalData.config.appInfo.version,
-        imgUrl:getApp().globalData.config.imgUrl
-      }
-    },
-    computed: {
-      avatar() {
-        return getApp().globalData.config.imgUrl+"/index/user.png"
-      },
-      windowHeight() {
-        return uni.getSystemInfoSync().windowHeight - 50
-      }
-    },
-    onLoad(){
-      this.setLocale();
-    },
-    onShow(){
-      uni.setNavigationBarTitle({
-        title: this.$t('page.mine')
-      })
-    },
-    methods: {
-      cancelLocale(){
-        this.showLocale = false;
-      },
-      changeLanguage(e){
-        this.showLocale  =false;
-        console.log(e.value[0].id)
-        uni.setLocale(e.value[0].id);
-      },
-      changeLocale(){
-        this.showLocale = true;
-      },
-      setLocale(){
-        this.locale = uni.getLocale()
-        if(this.locale == "en"){
-          this.localeList = [[{"label":"Chinese","id":"zh-Hans"},{"label":"English","id":"en"}]];
-          this.localeConfig={"zh-Hans":"Chinese","en":"English"};
-        }else if(this.locale == "zh-Hans"){
-          this.localeList = [[{"label":"简体中文","id":"zh-Hans"},{"label":"英文","id":"en"}]];
-          this.localeConfig={"zh-Hans":"简体中文","en":"英文"};
-        }
-      },
-      i18(text){
-        return i18(text)
-      },
-      handleToEditInfo() {
-        this.$tab.navigateTo('/pages/mine/pwd/index')
-      },
-      handleToSetting() {
-        this.$tab.navigateTo('/pages/weitiandi/device/planrecord')
-      },
-      handleToLogin() {
-        this.$tab.reLaunch('/pages/login')
-      },
-      handleLogout() {
-        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
-          this.$store.dispatch('LogOut').then(() => {
-            this.$tab.reLaunch('/pages/index')
-          })
-        })
-      },
-      handleAbout() {
-        this.$tab.navigateTo('/pages/weitiandi/device/chargerecord')
-      },
-    }
-  }
+	import storage from '@/utils/storage'
+	import i18 from '@/utils/i18.js'
+	export default {
+		data() {
+			return {
+				showLocale: false,
+				locale: "",
+				localeList: [
+					[{
+						"label": "简体中文",
+						"id": "zh-Hans"
+					}, {
+						"label": "英文",
+						"id": "en"
+					}]
+				],
+				localeConfig: {
+					"zh-Hans": "简体中文",
+					"en": "英文"
+				},
+				name: this.$store.state.user.name,
+				version: getApp().globalData.config.appInfo.version,
+				imgUrl: getApp().globalData.config.imgUrl,
+				clickRightTag: 0
+			}
+		},
+		computed: {
+			avatar() {
+				console.log(JSON.stringify(this.$store.state.user))
+				
+				if(this.$store.state.user.avatar==null||this.$store.state.user.avatar==''){
+					return getApp().globalData.config.imgUrl + "/index/user.png"
+				}else{
+					return this.$store.state.user.avatar
+				}
+				
+				
+			},
+			windowHeight() {
+				return uni.getSystemInfoSync().windowHeight - 50
+			}
+		},
+		onLoad() {
+			this.setLocale();
+		},
+		onShow() {
+			uni.setNavigationBarTitle({
+				title: this.$t('page.mine')
+			})
+		},
+		methods: {
+			handleLogout() {
+			  this.$modal.confirm('确定注销并退出系统吗？').then(() => {
+			    this.$store.dispatch('LogOut').then(() => {
+			      this.$tab.reLaunch('/pages/index')
+			    })
+			  })
+			},
+			changeDrawer(event) {
+				if (event) {
+					// 抽屉打开时的逻辑
+					
+					this.clickRightTag = 1
+				} else {
+					// 抽屉关闭时的逻辑
+					this.clickRightTag = 0
+				}
+			},
+			//自定义头右操作函数
+			clickRight() {
+				//打开抽屉
+				if (this.clickRightTag == 0) {
+					this.$refs.showRight.open();
+					this.clickRightTag = 1
+				} else {
+					this.$refs.showRight.close()
+					this.clickRightTag = 0
+				}
+			},
+			cancelLocale() {
+				this.showLocale = false;
+			},
+			changeLanguage(e) {
+				this.showLocale = false;
+				console.log(e.value[0].id)
+				uni.setLocale(e.value[0].id);
+			},
+			changeLocale() {
+				this.showLocale = true;
+			},
+			setLocale() {
+				this.locale = uni.getLocale()
+				if (this.locale == "en") {
+					this.localeList = [
+						[{
+							"label": "Chinese",
+							"id": "zh-Hans"
+						}, {
+							"label": "English",
+							"id": "en"
+						}]
+					];
+					this.localeConfig = {
+						"zh-Hans": "Chinese",
+						"en": "English"
+					};
+				} else if (this.locale == "zh-Hans") {
+					this.localeList = [
+						[{
+							"label": "简体中文",
+							"id": "zh-Hans"
+						}, {
+							"label": "英文",
+							"id": "en"
+						}]
+					];
+					this.localeConfig = {
+						"zh-Hans": "简体中文",
+						"en": "英文"
+					};
+				}
+			},
+			i18(text) {
+				return i18(text)
+			},
+			handleToEditInfo() {
+				this.$tab.navigateTo('/pages/mine/pwd/index')
+			},
+			handleToSetting() {
+				this.$tab.navigateTo('/pages/weitiandi/device/planrecord')
+			},
+			handleToLogin() {
+				this.$tab.reLaunch('/pages/login')
+			},
+			handleLogout() {
+				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
+					this.$store.dispatch('LogOut').then(() => {
+						this.$tab.reLaunch('/pages/index')
+					})
+				})
+			},
+			handleAbout() {
+				this.$tab.navigateTo('/pages/weitiandi/device/chargerecord')
+			},
+		}
+	}
 </script>
 
 <style lang="scss">
-  page {
-    background-color: #f5f6f7;
-  }
-
-  .mine-container {
-    width: 100%;
-    height: 100%;
-
-
-    .header-section {
-      padding: 15px 15px 45px 15px;
-      color: white;
-
-      .login-tip {
-        font-size: 18px;
-        margin-left: 10px;
-      }
-
-      .cu-avatar {
-        border: 2px solid #eaeaea;
-
-        .icon {
-          font-size: 40px;
-        }
-      }
-
-      .user-info {
-        margin-left: 15px;
-
-        .u_title {
-          font-size: 18px;
-          line-height: 30px;
-          color: #000000;
-        }
-      }
-    }
-
-    .content-section {
-      position: relative;
-      top: -50px;
-
-      .mine-actions {
-        margin: 15px 15px;
-        padding: 20px 0px;
-        border-radius: 8px;
-
-        .action-item {
-          .icon {
-            font-size: 28px;
-          }
-
-          .text {
-            display: block;
-            font-size: 13px;
-            margin: 8px 0px;
-          }
-        }
-      }
-    }
-  }
-  .menu-list{
-
-    box-shadow: 0px 2px 24px 0px rgba(0,0,0,0.06);
-
-    border-radius: 20px;
-  }
-  .list-cell{
-    padding:17px 15px;
-  }
-  .menu-text{
-    color:#555555
-  }
-</style>
+	page {
+		// background-color: #000000;
+		background-image: url('../../static/images/new/starts/bg1.jpg');
+		background-size: cover;
+		background-repeat: no-repeat;
+	}
+
+	.mine-container {
+		// width: 100%;
+		// height: 102vh;
+		
+
+		.header-section {
+			padding: 15px 15px 45px 15px;
+			color: white;
+
+			.login-tip {
+				font-size: 18px;
+				margin-left: 10px;
+			}
+
+			.cu-avatar {
+				border: 2px solid #eaeaea;
+
+				.icon {
+					font-size: 40px;
+				}
+			}
+
+			.user-info {
+				margin-left: 15px;
+
+				.u_title {
+					font-size: 18px;
+					line-height: 30px;
+					color: #000000;
+				}
+			}
+		}
+
+		.content-section {
+			position: relative;
+			top: -50px;
+
+			.mine-actions {
+				margin: 15px 15px;
+				padding: 20px 0px;
+				border-radius: 8px;
+
+				.action-item {
+					.icon {
+						font-size: 28px;
+					}
+
+					.text {
+						display: block;
+						font-size: 13px;
+						margin: 8px 0px;
+					}
+				}
+			}
+		}
+	}
+
+	.menu-list {
+
+		box-shadow: 0px 2px 24px 0px rgba(54, 54, 54, 0.1);
+
+		border-radius: 20px;
+	}
+
+	.list-cell {
+		padding: 17px 15px;
+		background-color: #555555;
+	}
+
+	.menu-text {
+		color: #ffffff
+	}
+
+	.header {
+		position: relative;
+		padding-top: 4vh;
+	}
+
+	.prop-item {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		height: 40px;
+		line-height: 40px;
+		margin: 0 20rpx;
+	}
+
+	.prop-item-left {
+		color: #BCBCBF;
+		;
+		width: 30%;
+		font-size: 14px;
+		//margin-left: 36px;
+	}
+
+	.prop-item-image {
+		width: 15px;
+		height: 15px;
+		position: absolute;
+		left: 2vw;
+		top: 0.5vh;
+	}
+
+	.prop-item-right {
+		position: absolute;
+		right: 10rpx;
+		top: 5rpx;
+		color: #BCBCBF;
+	}
+</style>

pages/mine/pwd/index.vue

@@ -1,114 +1,123 @@
 <template>
-  <view class="pwd-retrieve-container">
-    <uni-forms ref="form" :value="user" labelWidth="80px">
-      <uni-forms-item name="oldPassword" :label="i18('旧密码')">
-        <uni-easyinput type="password" v-model="user.oldPassword" :placeholder="i18('请输入旧密码')" />
-      </uni-forms-item>
-      <uni-forms-item name="newPassword" :label="i18('新密码')">
-        <uni-easyinput type="password" v-model="user.newPassword" :placeholder="i18('请输入新密码')" />
-      </uni-forms-item>
-      <uni-forms-item name="confirmPassword" :label="i18('确认密码')">
-        <uni-easyinput type="password" v-model="user.confirmPassword" :placeholder="i18('请确认新密码')" />
-      </uni-forms-item>
-      <button type="primary" style="background: #0E9F9B;color: white" @click="submit">{{i18('提交')}}</button>
+	<view class="pwd-retrieve-container">
+		<uni-forms ref="form" :value="user" labelWidth="80px">
+			<uni-forms-item  name="oldPassword" :label="i18('旧密码')">
+				<uni-easyinput type="password" :styles="styles" :placeholderStyle="placeholderStyle"
+					v-model="user.oldPassword" :placeholder="i18('请输入旧密码')" />
+			</uni-forms-item>
+			<uni-forms-item name="newPassword" :label="i18('新密码')">
+				<uni-easyinput type="password" v-model="user.newPassword" :styles="styles" :placeholderStyle="placeholderStyle" :placeholder="i18('请输入新密码')" />
+			</uni-forms-item>
+			<uni-forms-item name="confirmPassword" :label="i18('确认密码')">
+				<uni-easyinput type="password" v-model="user.confirmPassword" :styles="styles" :placeholderStyle="placeholderStyle" :placeholder="i18('请确认新密码')" />
+			</uni-forms-item>
+			<button type="primary" style="background: #57B03D;color: white" @click="submit">{{i18('提交')}}</button>
 
-      <view style="bottom: 80px;position: absolute;left: 10px;right:10px">
-        <button type="warn"  @click="" style="background: #0E9F9B;color: white" @click="deleteUser">{{i18('注销账号')}}</button>
-      </view>
-      <view style="bottom: 10px;position: absolute;left: 10px;right:10px">
-        <button type="warn"  @click="" style="background: #0E9F9B;color: white" @click="handleLogout">{{i18('退出登录')}}</button>
-      </view>
-    </uni-forms>
-  </view>
+			<view style="bottom: 80px;position: absolute;left: 10px;right:10px">
+				<button type="warn" @click="" style="background: #57B03D;color: white"
+					@click="deleteUser">{{i18('注销账号')}}</button>
+			</view>
+			<!-- <view style="bottom: 10px;position: absolute;left: 10px;right:10px">
+        <button type="warn"  @click="" style="background: #57B03D;color: white" @click="handleLogout">{{i18('退出登录')}}</button>
+      </view> -->
+		</uni-forms>
+	</view>
 </template>
 
 <script>
-  import { updateUserPwd } from "@/api/system/user"
-  import i18 from '@/utils/i18.js'
-  export default {
-    data() {
-      return {
-        user: {
-          oldPassword: undefined,
-          newPassword: undefined,
-          confirmPassword: undefined
-        },
-        rules: {
-          oldPassword: {
-            rules: [{
-              required: true,
-              errorMessage: i18('旧密码不能为空')
-            }]
-          },
-          newPassword: {
-            rules: [{
-                required: true,
-                errorMessage: i18('新密码不能为空'),
-              },
-              {
-                minLength: 6,
-                maxLength: 20,
-                errorMessage: i18('长度在 6 到 20 个字符')
-              }
-            ]
-          },
-          confirmPassword: {
-            rules: [{
-                required: true,
-                errorMessage: i18('确认密码不能为空')
-              }, {
-                validateFunction: (rule, value, data) => data.newPassword === value,
-                errorMessage: i18('两次输入的密码不一致')
-              }
-            ]
-          }
-        }
-      }
-    },
-    onReady() {
-      this.$refs.form.setRules(this.rules)
-    },
-    onShow(){
-      uni.setNavigationBarTitle({
-        title: this.$t('page.modifypwd')
-      })
-    },
-    methods: {
-      i18(text){
-        return i18(text)
-      },
-      submit() {
-        this.$refs.form.validate().then(res => {
-          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
-            this.$modal.msgSuccess("修改成功")
-          })
-        })
-      },
-      handleLogout() {
-        this.$modal.confirm('确定注销并退出系统吗？').then(() => {
-          this.$store.dispatch('LogOut').then(() => {
-            this.$tab.reLaunch('/pages/index')
-          })
-        })
-      },
-      deleteUser() {
-        this.$modal.confirm('确定删除账号吗？').then(() => {
-          this.$store.dispatch('DeleteUser').then(() => {
-            this.$tab.reLaunch('/pages/index')
-          })
-        })
-      }
-    }
-  }
+	import {
+		updateUserPwd
+	} from "@/api/system/user"
+	import i18 from '@/utils/i18.js'
+	export default {
+		data() {
+			return {
+				placeholderStyle: "color:#bababa;font-size:14px",
+				styles: {
+					color: '#ffffff',
+					borderColor: '#ffffff'
+				},
+				user: {
+					oldPassword: undefined,
+					newPassword: undefined,
+					confirmPassword: undefined,
+
+				},
+				rules: {
+					oldPassword: {
+						rules: [{
+							required: true,
+							errorMessage: i18('旧密码不能为空')
+						}]
+					},
+					newPassword: {
+						rules: [{
+								required: true,
+								errorMessage: i18('新密码不能为空'),
+							},
+							{
+								minLength: 6,
+								maxLength: 20,
+								errorMessage: i18('长度在 6 到 20 个字符')
+							}
+						]
+					},
+					confirmPassword: {
+						rules: [{
+							required: true,
+							errorMessage: i18('确认密码不能为空')
+						}, {
+							validateFunction: (rule, value, data) => data.newPassword === value,
+							errorMessage: i18('两次输入的密码不一致')
+						}]
+					}
+				}
+			}
+		},
+		onReady() {
+			this.$refs.form.setRules(this.rules)
+		},
+		onShow() {
+			uni.setNavigationBarTitle({
+				title: this.$t('page.modifypwd')
+			})
+		},
+		methods: {
+			i18(text) {
+				return i18(text)
+			},
+			submit() {
+				this.$refs.form.validate().then(res => {
+					updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
+						this.$modal.msgSuccess("修改成功")
+					})
+				})
+			},
+			handleLogout() {
+				this.$modal.confirm('确定注销并退出系统吗？').then(() => {
+					this.$store.dispatch('LogOut').then(() => {
+						this.$tab.reLaunch('/pages/index')
+					})
+				})
+			},
+			deleteUser() {
+				this.$modal.confirm('确定删除账号吗？').then(() => {
+					this.$store.dispatch('DeleteUser').then(() => {
+						this.$tab.reLaunch('/pages/index')
+					})
+				})
+			}
+		}
+	}
 </script>
 
 <style lang="scss">
-  page {
-    background-color: #ffffff;
-  }
+	page {
+		background-color: #2b2b2b;
+	}
 
-  .pwd-retrieve-container {
-    padding-top: 36rpx;
-    padding: 15px;
-  }
-</style>
+	.pwd-retrieve-container {
+		padding-top: 36rpx;
+		padding: 15px;
+	}
+</style>

pages/weitiandi/bluetooth/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container">
-    <view class="dboxs dport">
+    <!-- <view class="dboxs dport">
       <view class="dboxtitle"><image class="portimg" src="/static/images/new/start/port.png"/>
         <view class="dboxtitle-text"> {{ i18('设备端口') }}</view>
 
@@ -115,8 +115,118 @@
         <image class="btn-image" src="/static/images/new/start/reset.png" >
         </image>
         <view>{{ i18('重置设备') }}</view>
-      </view>
+      </view> -->
+<view class="dboxs dport">
+			<view class="dboxtitle">
+				<image class="portimg" src="../../../static/images/new/starts/mine/symbol (1).png" />
+				<view class="dboxtitle-text"> {{ i18('设备端口') }}</view>
+			</view>
+			<view class="dportitems">
+				<view class="dportitem " v-for="item in curPort" @click="selectPort(item.id);">
+					<p class="dpropitem-title "> {{ item.text }}</p>
+					<view style="position: absolute;right: 0px;z-index: 9999" v-if="item.id == choosePort">
+						<image class="dportitem-img" style="width: 15px;height: 15px"
+							src="/static/images/new/start/choose.png" />
+					</view>
+					<view class="dpropitem-block dportitem-block-2" v-if="item.status == 2">
+						<image class="dportitem-img" src="/static/images/new/start/using.png" />
+						<view class="dpropitem-status">{{ i18('充电中') }}</view>
+					</view>
+
+					<view class="dpropitem-block dportitem-block-1" v-if="item.status == 1 || item.status == 7">
+						<image class="dportitem-img" src="/static/images/new/start/free.png" />
+						<view class="dpropitem-status">{{ i18('空闲中') }}</view>
+					</view>
+
+					<view class="dpropitem-block dportitem-block-3" style="background: rgb(247,238,240);color:#FF6868"
+						v-if="item.status == 3">
+						<image class="dportitem-img" src="/static/images/new/start/ban.png" />
+						<view class="dpropitem-status">{{ i18('禁用中') }}</view>
+					</view>
+
+					<view class="dpropitem-block dportitem-block-3" style="background: rgb(248,244,230);color:#FFAA00"
+						v-if="item.status == 4">
+						<image class="dportitem-img" src="/static/images/new/start/bad.png" />
+						<view class="dpropitem-status">{{ i18('故障中') }}</view>
+					</view>
+
+
+					<view class="dpropitem-block dportitem-block-3" style=";" v-if="item.status == 5">
+						<image class="dportitem-img" src="/static/images/new/start/lianjie.png" />
+						<view class="dpropitem-status">{{ i18('已连接') }}</view>
+					</view>
 
+					<view class="dpropitem-block dportitem-block-3" style="background: rgb(239,235,254);color:#A552FF"
+						v-if="item.status == 6">
+						<image class="dportitem-img" src="/static/images/new/start/yuyue.png" />
+						<view class="dpropitem-status">{{ i18('已预约') }}</view>
+					</view>
+				</view>
+
+
+			</view>
+		</view>
+		<view class="dboxs dport" style="height: 100px" @click="planCharge">
+			<view class="dboxtitle">
+				<image class="portimg" src="../../../static/images/new/starts/index/yuyue.png" />
+				<view class="dboxtitle-text">{{ i18('预约充电') }}</view>
+			</view>
+
+			<view class="port-text" v-if="planInfo != null" style="left:40px;top:48px;font-size: 14px">
+				{{ i18('已预约') }} {{planInfo.runTime}}
+			</view>
+			<view class="port-text" style="left:40px;top:55px;font-size: 14px" v-else>
+				{{ i18('点击预约充电') }}
+			</view>
+			<view class="port-num" style="left:40px;top:70px;font-size: 12px" v-if="planInfo != null">
+				{{ i18('可点击取消预约') }}
+			</view>
+			<view class="port-icon" v-if="planInfo == null" style="width: 50px;height: 50px;right:10px;top:28%">
+				<image class="btn-image" src="../../../static/images/new/starts/index/yuyue.png">
+				</image>
+			</view>
+			<view class="port-icon" v-if="planInfo != null" style="width: 50px;height: 50px;right:10px;top:28%">
+				<image class="btn-image" src="/static/images/new/start/del.png">
+				</image>
+			</view>
+		</view>
+		<view class="dboxs dport" style="height: 200px">
+			<view class="dboxtitle">
+				<image class="portimg" src="../../../static/images/new/starts/index/list.png" />
+				<view class="dboxtitle-text"> {{ i18('设备操作') }}</view>
+			</view>
+			<view class="control-btn" @click="trigger()" v-if="portDetail.portStatus == 2">
+				<image class="btn-image" src="/static/images/new/start/stop.png">
+				</image>
+				<view>{{ i18('停止充电') }}</view>
+			</view>
+
+			<view class="control-btn" @click="trigger()" v-if="portDetail.portStatus != 2">
+				<image class="btn-image" src="/static/images/new/start/using.png">
+				</image>
+				<view>{{ i18('立即充电') }}</view>
+			</view>
+			<view class="control-btn" @click="getInfo">
+				<image class="btn-image" src="../../../static/images/new/starts/index/icon_pull.png">
+				</image>
+				<view>{{ i18('获取状态') }}</view>
+			</view>
+			<view class="control-btn" @click="toSet">
+				<image class="btn-image" src="../../../static/images/new/starts/index/list.png">
+				</image>
+				<view>{{ i18('设备控制') }}</view>
+			</view>
+
+			<!-- <view class="control-btn" @click="goBack">
+				<image class="btn-image" src="../../../static/images/new/starts/index/return.png">
+				</image>
+				<view>{{ i18('查看状态') }}</view>
+			</view> -->
+			<view class="control-btn" @click="restart">
+				<image class="btn-image" src="../../../static/images/new/starts/index/return.png">
+				</image>
+				<view>{{ i18('重置设备') }}</view>
+			</view>
       <!--      <view class="control-btn">-->
       <!--        <image class="btn-image" :src="imgUrl+'/control/record.png'" >-->
       <!--        </image>-->
@@ -405,17 +515,17 @@ export default {
         let port_first_status = self.portDetail["port_first_status"];
         let port_second_status = self.portDetail["port_second_status"]
         if(port_first_status){
-          self.portList[0].push({port:1,text:"端口一"});
+          self.portList[0].push({port:1,text:i18("端口一")});
           self.curPort.push({
-            text:"端口一",
+            text: i18("端口一"),
             status:port_first_status,
             id:1,
           })
         }
         if(port_second_status){
-          self.portList[0].push({port:2,text:"端口二"});
+          self.portList[0].push({port:2,text:i18("端口二")});
           self.curPort.push({
-            text:"端口二",
+            text:i18("端口二"),
             status:port_second_status,
             id:2
           })
@@ -648,9 +758,11 @@ export default {
 
 <style>
 .container {
-  background: rgb(249, 252, 255);
+  background-image: url('../../../static/images/new/starts/bg1.jpg');
   inset: 0;
   position: absolute;
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 
 .header {
@@ -847,7 +959,7 @@ export default {
   padding:10px 20px;
   text-align: center;
   font-size: 12px;
-  color: black;
+  color: white;
 }
 .control-btn .btn-image{
 }
@@ -855,13 +967,14 @@ export default {
   color: #60af7b
 }
 .dboxs{
-  background: #F8FCFF;
+  /* background: #F8FCFF; */
+  background: linear-gradient(#565656, #050609);
   border: 0px solid #F8FCFF;
   box-shadow: 0px 0px 6px 1px rgba(101,101,101,0.29);
   border-radius: 4px;
   padding: 20px;
   font-size: 0.24rem;
-  color: #1A87FF;
+  color: #57B03D;
   margin:20px;
   position: relative;
 }
@@ -911,6 +1024,7 @@ export default {
   position: absolute;
   top: -2px;
   left: 25px;
+  color: #b0b0b0;
 }
 .btn-image{
   width: 30px;

pages/weitiandi/bluetooth/setting.vue

@@ -13,7 +13,7 @@
           <view style="width: 80%">
             <u-slider min="8" max="32" step="2" v-model="current.customValue"></u-slider>
           </view>
-          <view style="color: #1A87FF">{{current.customValue}}A</view>
+          <view style="color: #57B03D">{{current.customValue}}A</view>
         </view>
       </view>
 
@@ -158,9 +158,9 @@ export default {
       for (let i = 0; i < this.autoCharge.length; i++) {
         let obj = this.autoCharge[i];
         if(obj.value == value){
-          obj.style = ";  background: #1A87FF;color:white";
+          obj.style = ";  background: #57B03D;color:white";
         }else{
-          obj.style = ";  background: rgb(227, 242, 245);color: #1A87FF;"
+          obj.style = ";  background: rgb(227, 242, 245);color: #57B03D;"
         }
       }
       uni.setStorageSync("autoCharge",value);
@@ -265,14 +265,14 @@ export default {
         let dian = items[i];
         if(dian.value == max_current){
           hasValue = true;
-          dian.style = ";  background: #1A87FF;color:white"
+          dian.style = ";  background: #57B03D;color:white"
         }else{
-          dian.style = ";  background: rgb(227, 242, 245);color: #1A87FF;"
+          dian.style = ";  background: rgb(227, 242, 245);color: #57B03D;"
         }
       }
       if(!hasValue){
         this.current.custom = true;
-        items[len-1].style = ";  background: #1A87FF;color:white"
+        items[len-1].style = ";  background: #57B03D;color:white"
       }
       this.current.customValue = max_current;
     },
@@ -281,9 +281,9 @@ export default {
       let len = items.length;
       for (let i = 0; i < len; i++) {
         let dian = items[i];
-        dian.style = ";  background: rgb(227, 242, 245);color: #1A87FF;"
+        dian.style = ";  background: rgb(227, 242, 245);color: #57B03D;"
       }
-      item.style = ";  background: #1A87FF;color:white"
+      item.style = ";  background: #57B03D;color:white"
       if (item.value == -1) {
         obj.custom = true;
         obj.customValue = 8;
@@ -375,7 +375,9 @@ export default {
   top: 0px;
   right: 0px;
   bottom:0px;
-  background: rgb(249, 252, 255);
+  background-image: url('../../../static/images/new/starts/bg1.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;;
 }
 
 .prop-item {
@@ -395,7 +397,7 @@ export default {
 
 .value-tag {
   background: rgb(227, 242, 245);
-  color: #1A87FF;
+  color: #57B03D;
   width: 14vw;
   height: 4vh;
   line-height: 4vh;
@@ -432,7 +434,7 @@ export default {
 }
 
 .btn {
-  background: #1A87FF;
+  background: #57B03D;
   text-align: center;
   color: white;
   height: 6vh;
@@ -462,6 +464,7 @@ export default {
 
 .areas-item {
   width: 33%;
+  color: aliceblue;
 }
 
 .areas-img {

pages/weitiandi/bluetooth/status.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="container">
-    <view  style="height: 20px;line-height:15px;padding: 2px;text-align: center;position: fixed;right: -5px;top:30px;z-index: 9999;background: rgb(243,157,116);color: white;border-radius: 5px;font-size: 10px;width: 120rpx;" @click="goBack">
+   <!-- <view  style="height: 20px;line-height:15px;padding: 2px;text-align: center;position: fixed;right: -5px;top:30px;z-index: 9999;background: rgb(243,157,116);color: white;border-radius: 5px;font-size: 10px;width: 120rpx;" @click="goBack">
       {{$t('charge.break')}}
     </view>
 
@@ -27,11 +27,11 @@
             <view class="dot"></view>
             <view class="dot"></view>
             <view class="dot"></view>
-          </view>
+          </view> -->
 
           <!--            <canvas id="c">-->
           <!--            </canvas>-->
-          <view class="stip">
+          <!-- <view class="stip">
 
             <view class="p0" st="">{{i18('设备号')}}:{{uuid}}</view>
             <view class="p1">
@@ -147,8 +147,193 @@
         </view>
 
       </view>
-    </u-modal>
-
+    </u-modal> -->
+<view style="height: 0vh;place-items: center;display: grid;">
+			<image style="height: 3vh;width: 15vh;margin-top: 5vh;top: 3vh;"
+				src="../../../static/images/new/starts/login/backImg2.png"></image>
+			<text @click.stop="clickRight()"
+				style="color: #ffffff;font-size: 15px;margin: 0 0 0 31vh;font-weight: bold;">· · ·</text>
+			<view>
+				<uni-drawer @change="changeDrawer"  style="top:20vh;height: 23vh" ref="showRight" mode="right"
+					:mask-click="true">
+	  			<scroll-view  style="background: linear-gradient(#000000, #5a5a58);font-size: 20px;" scroll-y="true">
+	  				<view class="prop-item" @click="handleLogout()">
+	  					<!-- <view class="prop-item-image">
+	  											<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
+	  										</view> -->
+	  					<view class="prop-item-right">{{i18('退出登录')}}</view>
+	  					<view class="prop-item-left">
+	  						<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
+	  					</view>
+	  				</view>
+	  				<u-divider />
+	  				<view class="prop-item" @click="skip(3)">
+	  					<!-- <view class="prop-item-image">
+	  											<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
+	  										</view> -->
+	  					<view class="prop-item-right">{{i18('关于我们')}}</view>
+	  					<view class="prop-item-left">
+	  						<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
+	  					</view>
+	  				</view>
+	  				<u-divider />
+	  				<view class="prop-item" @click="skip(4)">
+	  					<!-- <view class="prop-item-image">
+	  											<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
+	  										</view> -->
+	  					<view class="prop-item-right">{{i18('帮助')}}</view>
+	  					<view class="prop-item-left">
+	  						<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
+	  					</view>
+	  				</view>
+	  				<u-divider />
+	  			</scroll-view>
+	  		</uni-drawer>
+	  	</view>
+	  </view>
+	  <view style=";position: relative;top: 10vh;margin-top:2vh;">
+	  	<view class="progress_box">
+	  		<canvas class="progress_bg" canvas-id="cpbg"></canvas>
+	  		<canvas class="progress_bar" canvas-id="cpbar"></canvas>
+	  		<canvas class="progress_line" canvas-id="cpline"></canvas>
+	  		<view class="progress_txt">
+	  			<view class="progress_info">
+	  				<view class="p0" style="color: azure;" st="">{{ deviceInfo.deviceId}}</view>
+	  				<view class="p1">
+	  				  <view v-if="portStatus  == 2">
+	  				    {{$t('charge.charging')}}
+	  				  </view>
+	  				  <view v-else-if="portStatus  == 6">
+	  				    {{$t('charge.planed')}}
+	  				  </view>
+	  				
+	  				  <view v-else-if="portStatus  == 5">
+	  				    {{$t('charge.connected')}}
+	  				  </view>
+	  				
+	  				  <view v-else>
+	  				    {{$t('charge.nocharge')}}
+	  				  </view>
+	  				</view>
+	  			</view>
+	  		</view>
+	  	</view>
+		</view>
+		<view style="display: flex;align-items: center;flex-direction: column;color: aliceblue;margin-top: 5vh;">
+			 <view  class="port_item" :class="item.id==choosePort?'selected_item':''" v-for="item in curPort" @click="selectPort(item.id);">{{ i18(item.text )}}</view>
+			<view
+				style="background-color: black;justify-content: center;display: flex;justify-items: center;flex-direction: row;text-align: center;width: 32vh;;border-radius: 27px;">
+				<view span="3" style="width: 8vh;">
+					<view class="item-value">{{ deviceV  }}V</view>
+					<span class="item-text">{{$t('charge.voltage')}}</span>
+				</view>
+				<u-line direction="col" color="#6F84AC" length="50"></u-line>
+				<view span="3" style="width: 8vh;">
+					<view class="item-value">{{ gonglv  }}W</view>
+					<span class="item-text">{{$t('charge.power')}}</span>
+				</view>
+				<u-line direction="col" color="#6F84AC" length="50"></u-line>
+				<view span="3" style="width: 8vh;">
+					<view class="item-value">{{deviceTemp}}℃</view>
+					<span class="item-text">{{$t('charge.devtemper')}}</span>
+				</view>
+				<u-line direction="col" color="#6F84AC" length="50"></u-line>
+				<view span="3" style="width: 8vh;">
+					<view class="item-value" v-if="portDetail.voltage == 0">0 {{ i18('度') }}</view>
+					<view class="item-value" v-else>{{ dianliang }} {{ i18('度') }}</view>
+					<span class="item-text">{{$t('charge.elec')}}</span>
+				</view>
+			</view>
+		</view>
+		
+		<view style="display: flex;align-items: center;flex-direction: column;color: aliceblue;margin-top: 3vh;">
+			<view
+				style="justify-content: center;display: flex;justify-items: center;flex-direction: row;text-align: center;width: 40vh;}">
+				<view span="3" style="width: 12vh;">
+					<view style="margin-left: 1vh;">
+						<view><span v-if="portDetail.portStatus == 6">{{i18('剩余时间')}}</span>
+							<span  v-else>{{$t('charge.chargetime')}}</span></view>
+						<view class="demo-layout bg-purple"
+							style="border-radius: 8px;background-color: aliceblue;color: #000;">
+							<view >{{ chargeTime  }}{{ i18('分钟') }}</view>
+							
+						</view>
+					</view>
+				</view>
+				<view span="3" style="width: 16vh;">
+					<view v-if="portDetail.portStatus == 2"
+						style="text-align: center;position: absolute;margin:-1vh 5vw;border: 0ch;height: 20vh;">
+						<u-button @click="trigger()" shape="circle"
+							style="background: #ec3e41;color:white;width: 100vm;border: 0ch;height: 6vh;">{{ i18('停止充电') }}</u-button>
+					</view>
+					<view v-if="portDetail.portStatus != 2"
+						style="text-align: center;position: absolute;margin:-1vh 5vw;border: 0ch;height: 20vh;">
+						<u-button @click="trigger()" shape="circle"
+							style="background: #57B03D;color:white;width: 100vm;border: 0ch;height: 6vh;">{{ i18('立即充电') }}</u-button>
+					</view>
+					<!-- <view class="control-btn" @click="trigger()" v-if="portDetail.portStatus == 2">
+										  <image class="btn-image" src="/static/images/new/start/stop.png" >
+										  </image>
+										  <view>{{ i18('停止充电') }}</view>
+										</view>
+										
+										<view class="control-btn" @click="trigger()" v-if="portDetail.portStatus != 2">
+										  <image class="btn-image"  src="/static/images/new/start/using.png" >
+										  </image>
+										  <view>{{ i18('立即充电') }}</view>
+										</view> -->
+				</view>
+				<view span="3" style="width: 12vh;">
+					<view style="margin-left: 1vh;">
+						<view> Ampere</view>
+						<view class="demo-layout bg-purple"
+							style="border-radius: 8px;background-color: aliceblue;color: #000;">
+							<view v-if="deviceV  == 0">0A</view>
+							<view v-else>{{currentValue}}A</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		
+		<view style="display: flex;align-items: center;justify-content: center;margin-top: 5vh;">
+			<view @click="toPage">
+				<image src="../../../static/images/new/starts/status/Setting.png"
+					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
+			</view>
+			<!-- <view class="" @click="wifi">
+				<image src="../../../static/images/new/starts/status/WiFi.png"
+					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
+			</view> -->
+			<view @click="modifyPwd">
+				<image src="../../../static/images/new/starts/status/Lock／Unlocked.png"
+					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
+			</view
+			>
+			<view class="" @click="getInfo">
+				<image src="../../../static/images/new/starts/status/Refresh.png"
+					style="width: 60px;height: 60px;margin: 2vh 0.2vh;;"></image>
+			</view>
+			<view class="" @click="goBack">
+				<image src="../../../static/images/new/starts/status/Link.png"
+					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
+			</view>
+		</view>
+		
+		<view style="display: flex;align-items: center;justify-content: center;">
+			<view @click="skip(0)">
+				<image src="../../../static/images/new/starts/tabbar/one_off.png"
+					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
+			</view>
+			<view @click="skip(1)">
+				<image src="../../../static/images/new/starts/tabbar/two_off.png"
+					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
+			</view>
+			<view @click="skip(2)">
+				<image src="../../../static/images/new/starts/tabbar/three_off.png"
+					style="width: 60px;height: 60px;margin: 2vh 0.2vh;"></image>
+			</view>
+		</view>
     <u-modal :show="showInitPwd" :confirmText="i18('确认')" :cancelText="i18('取消')" @confirm="inputPwd" @cancel="cancelInitDlg" :showCancelButton="true"  :title="i18('当前密码为初始密码，请修改')" >
       <view class="slot-content">
         <view style="margin-bottom:10px;">
@@ -177,6 +362,28 @@
 
       </view>
     </u-modal>
+	<u-modal :show="showPwd" :confirmText="i18('确认')" :cancelText="i18('取消')" @confirm="inputPwd" @cancel="cancel" :showCancelButton="true"  :title="$t('charge.modifypwd')" >
+	  <view class="slot-content">
+	    <view>
+	      <u--input
+	          type="number"
+	          :placeholder="$t('charge.oldpwd')"
+	          border="surround"
+	          v-model="oldPwd"
+	      ></u--input>
+	    </view>
+	
+	    <view style="margin-top:5px">
+	      <u--input
+	          type="number"
+	          :placeholder="$t('charge.newpwd')"
+	          border="surround"
+	          v-model="pwd"
+	      ></u--input>
+	    </view>
+	
+	  </view>
+	</u-modal>
   </view>
 </template>
 
@@ -236,6 +443,7 @@ export default {
       curPort:[],
       firstRender:false,
       refreshTimer:null,
+	  clickRightTag:0
     }
   },
   computed: {
@@ -265,7 +473,165 @@ export default {
       clearTimeout(this.refreshTimer)
     }
   },
+  mounted: function() {
+  	this.drawCircle(100);
+  	this.drawProgressbg();
+  	 //参数为1-100
+  	this.drawLine();
+  },
   methods: {
+	  drawProgressbg: function() {
+	  	// 自定义组件实例 this ，表示在这个自定义组件下查找拥有 canvas-id 的 <canvas/>
+	  	var ctx = uni.createCanvasContext('cpbg', this);
+	  	ctx.setLineWidth(19); // 设置圆环的宽度
+	  	ctx.setStrokeStyle('#E9E9E9'); // 设置圆环的颜色
+	  	// ctx.setLineCap('round'); // 设置圆环端点的形状
+	  	ctx.setLineCap('square'); // 设置圆环端点的形状
+	  	ctx.beginPath(); //开始一个新的路径
+	  	ctx.arc(90, 90, 80, 0 * Math.PI, 2 * Math.PI, false);
+	  	//设置一个原点(110,110)，半径为100的圆的路径到当前路径
+	  	ctx.stroke(); //对当前路径进行描边
+	  	ctx.draw();
+	  },
+	  drawCircle: function(step) {
+	  	
+	  	var ctx = uni.createCanvasContext('cpbar', this);
+	  	// 进度条的渐变(中心x坐标-半径-边宽，中心Y坐标，中心x坐标+半径+边宽，中心Y坐标)
+	  	var gradient = ctx.createLinearGradient(0, 0, 130, 0);
+	  
+	  	let increase = 0.05;
+	  	let end = (step / 100) * 2 * Math.PI - Math.PI / 2; // 最后的角度
+	  	let current = -Math.PI / 2; // 起始角度
+	  	if(this.portDetail.portStatus != 2){
+	  	let timer = setInterval(() => {
+	  		gradient.addColorStop('0', '#57B03D');
+	  		gradient.addColorStop('1.0', '#57B03D');
+	  		ctx.setLineWidth(12);
+	  		ctx.setStrokeStyle(gradient);
+	  		ctx.setLineCap('square');
+	  		ctx.beginPath();
+	  		// 参数step 为绘制的百分比
+	  		if (current < end) {
+	  			current = current + increase;
+	  			
+	  		}
+	  		if (current >= end) {
+	  			current = end;
+	  			if(this.portDetail.portStatus != 2){
+	  			clearInterval(timer);	
+	  			}else{
+	  				current = -Math.PI / 2; // 起始角度
+	  			}
+	  			
+	  			
+	  		}
+	  		ctx.arc(90, 90, 80, -Math.PI / 2, current, false);
+	  		ctx.stroke();
+	  		ctx.draw();
+	  		
+	  	}, 20);
+	  	}
+	  },
+	  // 画刻度
+	  drawLine() {
+	  	var context = uni.createCanvasContext("cpline", this);
+	  	var r = 80;
+	  	var x0 = 90;
+	  	var y0 = 90;
+	  	var x;
+	  	var y;
+	  	var lineWidth = 15;
+	  
+	  	for (let i = 0; i < 60; i++) {
+	  		context.beginPath();
+	  		context.setLineWidth(lineWidth);
+	  		context.setStrokeStyle("#FFFFFF");
+	  
+	  		x = x0 - r * Math.sin(((6 * (i + 1) - 3) * Math.PI) / 180);
+	  		y = y0 - r * Math.cos(((6 * (i + 1) - 3) * Math.PI) / 180);
+	  
+	  		// console.log('x0:' + x0 + '   y0:' + y0 + '    x:' + x + '    y:' + y);
+	  		context.moveTo(x, y);
+	  		context.arc(
+	  			x0,
+	  			y0,
+	  			r,
+	  			((270 - 6 * (i + 1) + 3) * Math.PI) / 180,
+	  			((270 - 6 * i) * Math.PI) / 180,
+	  			false
+	  		);
+	  		context.stroke();
+	  		context.closePath();
+	  	}
+	  	context.stroke();
+	  	context.draw();
+	  },
+	  getInfo() {
+	  	let self = this;
+	  	this.$modal.loading("正在获取状态，请稍等...");
+	  	sendPortDetailCmd(this.deviceInfo).then(res => {
+	  		this.$modal.loading("正在获取状态，请稍等...");
+	  		this.visitTime = res.msg;
+	  		if (!this.visitTime) {
+	  			this.$modal.msg("请重新进入页面");
+	  			return;
+	  		}
+	  		if (!this.scriptTask) {
+	  			this.initSocket(this.deviceInfo.deviceId);
+	  		}
+	  		setTimeout(function() {
+	  			getPortDetail(self.deviceInfo, self.visitTime).then(res => {
+	  				let data = res.data;
+	  				if (data != null) {
+	  					self.parsePortCmd(data);
+	  				} else {}
+	  			});
+	  		}, 500)
+	  	})
+	  },
+	  skip(type){
+	  	if(type==0){
+	  		uni.switchTab({
+	  			url:'/pages/index'
+	  		})
+	  	}else if(type==1){
+	  		uni.switchTab({
+	  			url:'/pages/weitiandi/deviceList'
+	  		})
+	  		}else if(type==2){
+	  			uni.switchTab({
+	  				url:'/pages/mine/index'
+	  			})
+	  			}
+	  },
+	  handleLogout() {
+	  	this.$modal.confirm('确定注销并退出系统吗？').then(() => {
+	  		this.$store.dispatch('LogOut').then(() => {
+	  			this.$tab.reLaunch('/pages/index')
+	  		})
+	  	})
+	  },
+	  changeDrawer(event) {
+	  	if (event) {
+	  		// 抽屉打开时的逻辑
+	  
+	  		this.clickRightTag = 1
+	  	} else {
+	  		// 抽屉关闭时的逻辑
+	  		this.clickRightTag = 0
+	  	}
+	  },
+	  //自定义头右操作函数
+	  clickRight() {
+	  	//打开抽屉
+	  	if (this.clickRightTag == 0) {
+	  		this.$refs.showRight.open();
+	  		this.clickRightTag = 1
+	  	} else {
+	  		this.$refs.showRight.close()
+	  		this.clickRightTag = 0
+	  	}
+	  },
     cancelInitDlg(){
       this.showInitPwd = false;
     },
@@ -561,6 +927,9 @@ export default {
         self.deviceTemp = self.portDetail.dev_temper;
         self.deviceV = self.portDetail.voltage;
         self.$modal.closeLoading();
+		if(self.portDetail.portStatus==2){
+			this.drawCircle(100);
+		}
       }
       if(type == 116){
         self.$modal.closeLoading();
@@ -615,35 +984,35 @@ export default {
         this.getInfo(true);
       })
     },
-    getPlanInfo(){
-      getPlanInfo(this.deviceInfo.deviceId,this.choosePort).then(res=>{
-        let data = res.data;
-        if(data != null){
-          let planType = data.planType;
-          if(planType == 1){//单次预约
-            let planInfo = {};
-            planInfo.runTime = data.runTime;
-            this.planInfo = planInfo;
-            this.planInfo.id = data.id;
-          }else{
-            let planInfo = {};
-            planInfo.runTime = data.runTime;
-            let repeatDays = data.repeatDays;
-            let days = repeatDays.split(",")
-            let strs = "";
-            for (let i = 0; i < days.length; i++) {
-              if(strs.length>0){
-                strs+=",";
-              }
-              strs +=this.days[days[i]];
-            }
-            this.planInfo = planInfo;
-            this.planInfo.runTime = strs+" "+data.repeatTime;
-            this.planInfo.id = data.id;
-          }
-        }
-      })
-    },
+    // getPlanInfo(){
+    //   getPlanInfo(this.deviceInfo.deviceId,this.choosePort).then(res=>{
+    //     let data = res.data;
+    //     if(data != null){
+    //       let planType = data.planType;
+    //       if(planType == 1){//单次预约
+    //         let planInfo = {};
+    //         planInfo.runTime = data.runTime;
+    //         this.planInfo = planInfo;
+    //         this.planInfo.id = data.id;
+    //       }else{
+    //         let planInfo = {};
+    //         planInfo.runTime = data.runTime;
+    //         let repeatDays = data.repeatDays;
+    //         let days = repeatDays.split(",")
+    //         let strs = "";
+    //         for (let i = 0; i < days.length; i++) {
+    //           if(strs.length>0){
+    //             strs+=",";
+    //           }
+    //           strs +=this.days[days[i]];
+    //         }
+    //         this.planInfo = planInfo;
+    //         this.planInfo.runTime = strs+" "+data.repeatTime;
+    //         this.planInfo.id = data.id;
+    //       }
+    //     }
+    //   })
+    // },
     confirmPort(e){
       let value = e.value[0]
       this.choosePort = value.port;
@@ -688,6 +1057,7 @@ export default {
       if(portStatus == 2){//需要停止充电
         this.$modal.confirm("需要停止充电么？").then(res=>{
           this.stopCharge();
+		  this.drawCircle(0); //参数为1-100
         })
       }else{
         if(portStatus == 1){
@@ -696,6 +1066,7 @@ export default {
         if(portStatus == 5){
           this.$modal.confirm("确认开始充电么？").then(res=>{
             this.startCharge();
+			this.drawCircle(100); //参数为1-100
           })
         }else {
           this.$modal.msg("端口无法开始充电");
@@ -816,7 +1187,10 @@ export default {
 
 <style>
 .container {
-  background: rgb(249, 252, 255);
+  /* background: rgb(249, 252, 255); */
+  background-image: url('../../../static/images/new/starts/bg1.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
   inset: 0;
   position: absolute;
 }
@@ -825,6 +1199,89 @@ export default {
   position: relative;
   margin-top:4vw;
 }
+.prop-item {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		height: 40px;
+		line-height: 40px;
+		margin: 0 20rpx;
+	}
+
+	.prop-item-left {
+		color: #BCBCBF;
+		;
+		width: 30%;
+		font-size: 14px;
+		//margin-left: 36px;
+	}
+
+	.prop-item-image {
+		width: 15px;
+		height: 15px;
+		position: absolute;
+		left: 2vw;
+		top: 0.5vh;
+	}
+
+	.prop-item-right {
+		position: absolute;
+		right: 10rpx;
+		top: 5rpx;
+		color: #BCBCBF;
+	}
+	.progress_box {
+		/* position: relative; */
+		width: 35vh;
+		height: 35vh;
+		margin-left: 13vh;
+		margin-top: 10vh;
+		/* background-color: red; */
+		display: inline-block;
+		align-items: center;
+		justify-content: center;
+		text-align: center;
+
+	}
+
+	.pcds {
+		margin-top: 90rpx;
+		color: black;
+	}
+
+.progress_bg {
+		position: absolute;
+		width: 30vh;
+		height: 30vh;
+	}
+
+.progress_txt {
+		position: absolute;
+		font-size: 28upx;
+		margin-top: 54px;
+		margin-left: 74px;
+		color: #999999;
+	}
+
+	.progress_bar {
+		position: absolute;
+		width: 30vh;
+		height: 30vh;
+	}
+
+	
+	.progress_line {
+		position: absolute;
+		width: 30vh;
+		height: 30vh;
+	}
+
+.progress_info {
+		font-size: 25upx;
+		/* padding-left: 16upx; */
+		letter-spacing: 2upx;
+	    margin: 1vh 0vh 0vh -3vh;
+	}
 
 .header-status-desc {
   position: absolute;
@@ -1256,11 +1713,11 @@ export default {
 
 .item-value{
   font-weight: bold;
-  font-size: 19px;
+  font-size: 15px;
   margin:4px 0;
 }
 .item-text{
-  font-size: 13px;
+  font-size: 11px;
   margin:1px 0;
   color: #999999;
 }
@@ -1309,12 +1766,19 @@ export default {
   color: #B8B9BA;
   margin-bottom: 10px;
 }
-.p1{
+/* .p1{
   font-size: 20px;
   color: white;
   font-weight: bold;
   margin-top:10px;
-}
+} */
+.p1 {
+		font-size: 20px;
+		color: white;
+		font-weight: bold;
+		margin-top: 10px;
+		/* margin-left: -1vh;; */
+	}
 .stip{
   text-align: center;
   z-index: 9999;

pages/weitiandi/device/chargerecord.vue

@@ -9,7 +9,7 @@
 					</view>
 
 					<view class="item-status">
-						<uni-tag type="success" style="background: #0E9F9B" :text="i18('充电完成')" v-if="item.status == 1"></uni-tag>
+						<uni-tag type="success" style="background: #57B03D" :text="i18('充电完成')" v-if="item.status == 1"></uni-tag>
 						<uni-tag type="success"  :text="i18('正在充电')" v-if="item.status == 0"></uni-tag>
 					</view>
 				</view>
@@ -81,21 +81,26 @@
 
 <style>
 	.container {
-		background: rgb(249, 252, 255);
+		background-image: url('../../../static/images/new/starts/bg1.jpg');
+		background-size: cover;
+		background-repeat: no-repeat;
 		inset: 0;
 		position: absolute;
 	}
 
 	.list-item {
 		margin: 0vw;
+	
 	}
 
 	.item {
 		box-shadow: 0px 5px 27px 0px rgba(195, 195, 195, 0.4);
 		border-radius: 4px;
-		background: #FFFFFF;
 		margin: 4vw;
 		padding: 4vw;
+		background: linear-gradient(#565656, #050609);
+		color: aliceblue;
+		
 	}
 
 	.item-title {
@@ -115,10 +120,10 @@
 
 	.item-body {
 		padding-top: 4vw;
+		color: aliceblue;
 	}
 
 	.item-time {
-		color: #545454;
 		font-size: 12px;
 		margin-bottom: 4px
 	}

pages/weitiandi/device/plan.vue

@@ -3,7 +3,7 @@
 
       <view class="header-image">
 
-        <image style="width: 100%" :src="imgUrl+'/precharge/precharge.png'"/>
+        <!-- <image style="width: 100%" :src="imgUrl+'/precharge/precharge.png'"/> -->
       </view>
 
       <view class="charge-type">
@@ -36,7 +36,7 @@
     </view>
 
     <view style="margin:5vh 7vw;">
-      <button @click="saveConfig"  style="background: #0E9F9B;color: white;" type="default" >{{i18('确认')}}</button>
+      <button @click="saveConfig"  style="background: #57B03D;color: white;" type="default" >{{i18('确认')}}</button>
     </view>
 
     <uni-popup ref="popup" type="bottom">
@@ -51,7 +51,7 @@
           </label>
         </checkbox-group>
         <view style="text-align: center">
-          <button size="mini" @click="chooseDay" style="background: #1cbbb4;color: white;" type="default" >{{i18('确认')}}</button>
+          <button size="mini" @click="chooseDay" style="background: #57B03D;color: white;" type="default" >{{i18('确认')}}</button>
         </view>
       </view>
 
@@ -240,7 +240,9 @@ export default {
 .container{
   position: absolute;
   inset:0;
-  background: rgb(249, 252, 255);
+  background-image: url('../../../static/images/new/starts/bg1.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
 }
 .header-image{
   width: 100%;
@@ -252,7 +254,7 @@ export default {
 }
 .charge-type-container{
   margin:0 20vw;
-  border:1px solid #0E9F9B;
+  border:1px solid #57B03D;
   border-radius: 2px;
 }
 .charge-type-container view{
@@ -266,14 +268,14 @@ export default {
 
 }
 .type-choose{
-  background: #0E9F9B;
+  background: #57B03D;
   color:white;
 }
 .type-right{
 
 }
 .time-area{
-  border: 1px solid #E6E6E6;
+  border: 1px solid #ffffff;
   border-radius: 10px;
   margin:0 11vh;
   margin-top:5vh;
@@ -284,11 +286,11 @@ export default {
 }
 .one-date{
   text-align: center;
-  color: #0E9F9B;
+  color: #57B03D;
 }
 .one-time{
   font-weight: bold;
-  color: #0E9F9B;
+  color: #57B03D;
   font-size: 24px;
 }
 .one-setting{

pages/weitiandi/device/planrecord.vue

@@ -76,6 +76,7 @@ export default {
         }else{
           this.startText = "more"
           this.chargeList =  this.chargeList.concat(res.data);
+		  console.log('this.chargeList>>'+JSON.stringify( this.chargeList))
         }
       })
     },
@@ -97,19 +98,24 @@ export default {
 </script>
 <style>
 	.container {
-		background: rgb(249, 252, 255);
+		/* background: rgb(249, 252, 255); */
+		background-image: url('../../../static/images/new/starts/bg1.jpg');
+		background-size: cover;
+		background-repeat: no-repeat;
 		inset: 0;
 		position: absolute;
 	}
 
 	.list-item {
 		margin: 0vw;
+		color: aliceblue;
 	}
 
 	.item {
 		box-shadow: 0px 5px 27px 0px rgba(195, 195, 195, 0.4);
 		border-radius: 4px;
-		background: #FFFFFF;
+		/* background: #FFFFFF; */
+		background: linear-gradient(#565656, #050609);
 		margin: 4vw;
 		padding: 4vw;
 	}
@@ -136,7 +142,7 @@ export default {
 	}
 
 	.item-time {
-		color: #545454;
+		color: aliceblue;
 		font-size: 12px;
 		margin-bottom: 4px
 	}

pages/weitiandi/device/setting.vue

@@ -13,7 +13,7 @@
          <view style="width: 80%">
            <u-slider min="8" max="32" step="2" v-model="current.customValue"></u-slider>
          </view>
-          <view style="color: #1A87FF">{{current.customValue}}A</view>
+          <view style="color: #57B03D">{{current.customValue}}A</view>
         </view>
       </view>
 
@@ -161,14 +161,14 @@ export default {
         let dian = items[i];
         if(dian.value == max_current){
           hasValue = true;
-          dian.style = ";  background: #1A87FF;color:white"
+          dian.style = ";  background: #57B03D;color:white"
         }else{
-          dian.style = ";  background: rgb(227, 242, 245);color: #1A87FF;"
+          dian.style = ";  background: rgb(227, 242, 245);color: #57B03D;"
         }
       }
       if(!hasValue){
         this.current.custom = true;
-        items[len-1].style = ";  background: #1A87FF;color:white"
+        items[len-1].style = ";  background: #57B03D;color:white"
       }
       this.current.customValue = max_current;
     },
@@ -177,9 +177,9 @@ export default {
       let len = items.length;
       for (let i = 0; i < len; i++) {
         let dian = items[i];
-        dian.style = ";  background: rgb(227, 242, 245);color: #1A87FF;"
+        dian.style = ";  background: rgb(227, 242, 245);color: #57B03D;"
       }
-      item.style = ";  background: #1A87FF;color:white"
+      item.style = ";  background: #57B03D;color:white"
       if (item.value == -1) {
         obj.custom = true;
         obj.customValue = 8;
@@ -266,9 +266,12 @@ export default {
 <style>
 
 .container {
+	background-image: url('../../../static/images/new/starts/bg1.jpg');
+	background-size: cover;
+	background-repeat: no-repeat;
   position: absolute;
   inset: 0;
-  background: rgb(249, 252, 255);
+  /* background: rgb(249, 252, 255); */
 }
 
 .prop-item {
@@ -281,14 +284,14 @@ export default {
 }
 
 .prop-title {
-  color: #252525;
+  color: #dddddd;
   font-weight: bold;
   margin-bottom: 2.5vh;
 }
 
 .value-tag {
   background: rgb(227, 242, 245);
-  color: #1A87FF;
+  color: #57B03D;
   width: 14vw;
   height: 4vh;
   line-height: 4vh;
@@ -325,7 +328,7 @@ export default {
 }
 
 .btn {
-  background: #1A87FF;
+  background: #57B03D;
   text-align: center;
   color: white;
   height: 6vh;
@@ -355,6 +358,7 @@ export default {
 
 .areas-item {
   width: 33%;
+  color: #e6e6e6;
 }
 
 .areas-img {

pages/weitiandi/deviceList.vue

@@ -1,5 +1,47 @@
 <template>
   <view class="container">
+	  <view style="height: 0vh;place-items: center;display: grid;">
+	  	<image style="height: 3vh;width: 15vh;margin-top: 5vh;top: 3vh;"
+	  		src="../../static/images/new/starts/login/backImg2.png"></image>
+	  	<text @click="clickRight()" style="color: #ffffff;font-size: 15px;margin: 0 0 0 31vh;font-weight: bold;">· · ·</text>
+	  	<view>
+	  		<uni-drawer @change="changeDrawer"  style="top:20vh;height: 23vh" ref="showRight" mode="right"
+	  			:mask-click="true">
+	  			<scroll-view  style="background: linear-gradient(#000000, #5a5a58);font-size: 20px;" scroll-y="true">
+	  				<view class="prop-item" @click="handleLogout()">
+	  					<!-- <view class="prop-item-image">
+	  												<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
+	  											</view> -->
+	  					<view class="prop-item-right">{{i18('退出登录')}}</view>
+	  					<view class="prop-item-left">
+	  						<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
+	  					</view>
+	  				</view>
+	  				<u-divider/>
+	  				<view class="prop-item" @click="skip(2)">
+	  					<!-- <view class="prop-item-image">
+	  												<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
+	  											</view> -->
+	  					<view class="prop-item-right">{{i18('关于我们')}}</view>
+	  					<view class="prop-item-left">
+	  						<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
+	  					</view>
+	  				</view>
+	  				<u-divider/>
+	  				<view class="prop-item" @click="skip(3)">
+	  					<!-- <view class="prop-item-image">
+	  												<image :src="imgUrl+'/logout.png'" style="width: 30%;height:100%;" />
+	  											</view> -->
+	  					<view class="prop-item-right">{{i18('帮助')}}</view>
+	  					<view class="prop-item-left">
+	  						<uni-icons type="forward" color="lightgray" size="16"></uni-icons>
+	  					</view>
+	  				</view>
+	  				<u-divider/>
+	  			</scroll-view>
+	  		</uni-drawer>
+	  	</view>
+	  </view>
     <view class="list-item">
       <view class="item" v-for="item in chargeList" :key="item.id">
         <view class="item-header">
@@ -13,7 +55,7 @@
         </view>
         <view class="item-body">
           <view style="font-size: 12px; margin: 5px 0;position: relative">
-            <view class="item-detail-btn" style="z-index: 9999" @click="unbind(item.qrcode)">
+            <view class="item-detail-btn"  @click.stop="unbind(item.qrcode)">
               {{i18('解绑设备')}}
             </view>
           </view>
@@ -49,6 +91,7 @@ export default {
         contentnomore: i18('没有更多'),
       },
       chargeList: [],
+	  clickRightTag: 0
     };
   },
   onShow(){
@@ -57,10 +100,32 @@ export default {
     })
   },
   methods: {
+	  changeDrawer(event) {
+	  	if (event) {
+	  		// 抽屉打开时的逻辑
+	  		
+	  		this.clickRightTag = 1
+	  	} else {
+	  		// 抽屉关闭时的逻辑
+	  		this.clickRightTag = 0
+	  	}
+	  },
+	  //自定义头右操作函数
+	  clickRight() {
+	  	//打开抽屉
+	  	if (this.clickRightTag == 0) {
+	  		this.$refs.showRight.open();
+	  		this.clickRightTag = 1
+	  	} else {
+	  		this.$refs.showRight.close()
+	  		this.clickRightTag = 0
+	  	}
+	  },
     unbind(qrcode){
       let self = this;
       this.$modal.confirm("确认解绑该设备？").then(res=>{
         unBind(qrcode).then(res=>{
+			console.log('?>>>'+JSON.stringify(res))
           if(res.data){
             self.deviceList();
           }else{
@@ -105,19 +170,23 @@ export default {
 </script>
 <style>
 .container {
-  background: rgb(249, 252, 255);
+  background-image: url('../../static/images/new/starts/bg1.jpg');
+  background-size: cover;
+  background-repeat: no-repeat;
   inset: 0;
   position: absolute;
 }
 
 .list-item {
   margin: 0vw;
+  margin-top: 15vh;
 }
 
 .item {
-  box-shadow: 0px 5px 27px 0px rgba(195, 195, 195, 0.4);
+	color: aliceblue;
+  box-shadow: 0px 5px 27px 0px rgba(94, 94, 94, 0.4);
   border-radius: 4px;
-  background: #FFFFFF;
+  background: linear-gradient(#565656, #050609);
   margin: 4vw;
   padding: 4vw;
 }
@@ -154,4 +223,35 @@ export default {
   top:0px;
   text-decoration: underline;
 }
+	.prop-item {
+		position: relative;
+		display: flex;
+		flex-direction: row;
+		height: 40px;
+		line-height: 40px;
+		margin: 0 20rpx;
+	}
+
+	.prop-item-left {
+		color: #BCBCBF;
+		;
+		width: 30%;
+		font-size: 14px;
+		//margin-left: 36px;
+	}
+
+	.prop-item-image {
+		width: 15px;
+		height: 15px;
+		position: absolute;
+		left: 2vw;
+		top: 0.5vh;
+	}
+
+	.prop-item-right {
+		position: absolute;
+		right: 10rpx;
+		top: 5rpx;
+		color: #BCBCBF;
+	}
 </style>