设备登录显示相机信息

pc/package.json

@@ -19,17 +19,18 @@
   "dependencies": {
     "axios": "^0.18.0",
     "detect-zoom": "^1.0.2",
+    "ftp-deploy": "^2.3.8",
     "gsap": "^2.1.2",
     "i": "^0.3.6",
     "js-base64": "^2.5.2",
     "js-cookie": "^2.2.0",
     "luxy.js": "^0.1.0",
+    "swiper": "5.3.6",
     "three": "^0.102.1",
     "vue": "^2.5.2",
     "vue-awesome-swiper": "^4.1.1",
     "vue-i18n": "^8.18.2",
-    "vue-router": "^3.0.1",
-    "swiper": "5.3.6"
+    "vue-router": "^3.0.1"
   },
   "devDependencies": {
     "ali-oss": "^6.12.0",

pc/src/page/manage/index.vue

@@ -1,5 +1,31 @@
 <template>
   <div class="manage-layout">
+    <div class="manage-bg" v-if="deviceLogin">
+      <div class="manage-con">
+          <div class="info deviceLogin">
+            <div class="member">
+              <p>{{language!=='en'?(detail.nickName||'--'):(detail.nickName==='Pro设备用户'?'4DKanKan Pro User':(detail.nickName||'--'))}}</p>
+              <p>
+                <span class="child-name">
+                  {{detail.snCode||(detail.childName&&detail.childName.replace('4DKKPRO_',''))||'--'}}
+                </span>
+              </p>
+            </div>
+            <div class="capacity">
+              <div class="c-dec">
+                <span>{{langMain.used}}{{detail.totalSpaceStr?(detail.usedSpaceStr+' / '+detail.totalSpaceStr):'--'}} </span>
+              </div>
+              <div class="c-line">
+                <div class="active" :style="{width:getBar(detail.usedSpace,detail.totalSpace),background:getColor(detail.usedSpace,detail.totalSpace)}"></div>
+              </div>
+              <div class="c-detail">
+                <span>{{langMain.space}}{{detail.spaceStr||'--'}} &nbsp;&nbsp;&nbsp;{{langMain.expire}}{{detail.spaceEndStr||'--'}}</span>
+              </div>
+            </div>
+          </div>
+          <div class="open-btn" :style="{backgroundColor:'#1fe4dc'}" @click="toastKR(detail.userId)">{{langMain.btnType.buy[detail.spaceId?'xufei':'name']}}</div>
+      </div>
+    </div>
     <div class="manage-body ">
       <div class="container">
         <div class="mc-left">

pc/src/page/manage/style.scss

@@ -1,6 +1,141 @@
 .manage-layout{
   $font-color:#2d2d2d;
   $theme-color:#1fe4dc;
+  .manage-bg{
+    background: url(https://4dscene.4dage.com/new4dkk/images/person-bg.png) no-repeat top center;
+    background-size: cover;
+    .manage-con{
+      padding: 30px 0;
+      width: 50%;
+      margin: 0 auto;
+      .info{
+        color: #cfcfcf;
+        width: 730px;
+        display: block;
+        position: relative;
+        .card-img{
+          font-size: 0;
+          display: inline-block;
+          cursor: pointer;
+          background-position: center;
+          background-size: auto 100%;
+        }
+        .avatar{
+          width: 64px;
+          height: 64px;
+          flex-shrink: 0;
+          margin-right: 14px;
+          background-repeat: no-repeat;
+          background-size: cover;
+        }
+        .member{
+          display:flex;
+          flex-direction: column;
+          justify-content: space-between;
+          height: 64px;
+          padding: 2px 0;
+          p{
+            line-height: 1;
+            color: #cfcfcf;
+            font-size: 16px;
+            &:first-child{
+              font-size: 28px;
+              color: #fff;
+            }
+            .child-name{
+              display: inline-block;
+              position: relative;
+              cursor: pointer;
+              min-width: 120px;
+              ul{
+                background-color: #fff;
+                position: absolute;
+                width: calc(100% + 32px);
+                top: 22px;
+                left: -5px;
+                color: #969696;
+                max-height: 0;
+                overflow: hidden;
+                transition:all 0.3s ease;
+                li{
+                  line-height: 28px;
+                  padding: 0 5px;
+                  &:hover{
+                    background: $theme-color;
+                    color: #2d2d2d;
+                  }
+                }
+              }
+            }
+            .tab-active{
+              ul{
+                max-height: 120px;
+                overflow: auto;
+              }
+            }
+            .sanjiao{
+              display: inline-block;
+              position: relative;
+              &::before{
+                content: '';
+                border: 8px solid transparent;
+                border-top-color: #cfcfcf;
+                border-left-width: 5px;
+                border-right-width: 5px;
+                position: absolute;
+                right: -20px;
+                top: 4px;
+                z-index: 1;
+              }
+            }
+          }
+          
+        }
+        
+      }
+      .open-btn{
+        color: #010101;
+        line-height: 40px;
+        height: 40px;
+        margin-top: 20px;
+        width: 170px;
+        font-size: 16px;
+        text-align: center;
+        background-color: #1fe4dc;
+        cursor: pointer;
+      }
+      .deviceLogin{
+        display: block;
+      }
+      .capacity{
+        margin-top: 10px;
+        width: 680px;
+        .c-line{
+          width: 100%;
+          margin: 15px 0;
+          height: 8px;
+          background-color: #ccc;
+          .active{
+            background-color: $theme-color;
+            height: 100%;
+          }
+        }
+        .c-dec{
+          font-size: 16px;
+          color: #cfcfcf;
+        }
+        .c-detail{
+          color: #fff;
+          display: flex;
+          justify-content: space-between;
+          span{
+            font-size: 14px;
+            color: #cfcfcf;
+          }
+        }
+      }
+    }
+  }
   .manage-body{
     min-height: 676px;
     padding: 80px 0;