Bläddra i källkod

空间照片、位置图片样式调整

yangjunjing 5 år sedan
förälder
incheckning
1a49734d90
1 ändrade filer med 54 tillägg och 51 borttagningar
  1. 54 51
      src/views/screen/splitscreen/spaceledger/index.vue

+ 54 - 51
src/views/screen/splitscreen/spaceledger/index.vue

@@ -9,52 +9,57 @@
       </el-header>
       <el-container>
         <el-aside width="450px">
-          <el-scrollbar>
-            <div class="aside-top">
-              <div class="aside-top-left">
-                <p><b>空间功能区类型:</b>{{spaceDetails.RoomFuncType?spaceDetails.RoomFuncType:"-"}}</p>
-                <p><b>备注文字:</b>{{spaceDetails.Intro?spaceDetails.Intro:"-"}}</p>
-              </div>
-              <div class="aside-top-right">
-                <p><b>空间二维码:</b><span v-if="!spaceDetails.RoomQRCode">-</span></p>
-                <img :src="'/image-service/common/file_get/'+ spaceDetails.RoomQRCode +'?systemId=dataPlatform'" alt="二维码图片"
-                  v-if="spaceDetails.RoomQRCode">
-              </div>
+          <div class="aside-top">
+            <div class="aside-top-left">
+              <p><b>空间功能区类型:</b>{{spaceDetails.RoomFuncType?spaceDetails.RoomFuncType:"-"}}</p>
+              <p><b>备注文字:</b>{{spaceDetails.Intro?spaceDetails.Intro:"-"}}</p>
             </div>
-            <div>
-              <p><b>位置图片:</b></p>
-              <div v-show="spaceDetails.Outline && spaceDetails.Outline[0] && spaceDetails.Outline[0].length" id="graphy" ref="graphy"
-                style="width:400px;height:400px;" v-loading="canvasLoading">
-                <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
-              </div>
+            <div class="aside-top-right">
+              <p><b>空间二维码:</b><span v-if="!spaceDetails.RoomQRCode">-</span></p>
+              <img :src="'/image-service/common/file_get/'+ spaceDetails.RoomQRCode +'?systemId=dataPlatform'" alt="二维码图片"
+                v-if="spaceDetails.RoomQRCode">
             </div>
-            <div v-show="spaceDetails.Outline && !spaceDetails.Outline[0] || !spaceDetails.Outline"
-              style="height: 400px;transform: translateY(50%);textAlign:center;">
-              <i class="icon-wushuju iconfont"></i>
-              数据暂无
-            </div>
-            <div class="space-img" v-if="spaceDetails.Pic">
-              <div class="img-box" v-for="(item) in spaceDetails.Pic" :key='`${item.Id}+${item.key}`'>
-                <p><b>空间照片:</b></p>
-                <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.key}`" alt="空间图片">
-              </div>
+          </div>
+          <div>
+            <p><b>位置图片:</b></p>
+            <div v-show="spaceDetails.Outline && spaceDetails.Outline[0] && spaceDetails.Outline[0].length" id="graphy" ref="graphy"
+              style="width:400px;height:280px;" v-loading="canvasLoading">
+              <canvas id="floorCanvas" :width="canvasWidth" :height="canvasHeight" ref="canvas" tabindex="0"></canvas>
             </div>
-            <div class="space-img" v-if="!spaceDetails.Pic">
+          </div>
+          <div v-show="spaceDetails.Outline && !spaceDetails.Outline[0] || !spaceDetails.Outline"
+            style="height: 280px;transform: translateY(30%);textAlign:center;">
+            <i class="icon-wushuju iconfont"></i>
+            数据暂无
+          </div>
+          <div class="space-img" style="height:400px">
+            <el-scrollbar>
               <p><b>空间照片:</b></p>
-              <div class="img-box">
-                <img src="https://hbimg.huabanimg.com/2787ad434fc2bc819a5d7deda3855d897a99d528ab4a-e3HRgR_fw658" alt="空间图片">
-              </div>
-              <div class="img-box">
-                <img src="https://hbimg.huabanimg.com/5e4e3239dc7eca56eb92ca612d49d824f022b13621d5a-Ga7voM_fw658" alt="空间图片">
-              </div>
-              <div class="img-box">
-                <img src="https://hbimg.huabanimg.com/60e2a25564f6ac13e7e16a19dcc3e194d565776231347-1Cw8dg_fw658" alt="空间图片">
+              <div v-if="spaceDetails.Pic">
+                <div class="img-box" v-for="(item) in spaceDetails.Pic" :key='`${item.Id}+${item.key}`'>
+                  <img :src="`/image-service/common/image_get?systemId=dataPlatform&key=${item.key}`" alt="空间图片">
+                </div>
               </div>
-              <div class="img-box">
-                <img src="https://hbimg.huabanimg.com/2ea712954c75ff1b1e13329e7e4209f0691b88945c73-JCmkXX_fw658" alt="空间图片">
+              <!-- <div class="space-img" v-if="!spaceDetails.Pic">
+                <div class="img-box">
+                  <img src="https://hbimg.huabanimg.com/2787ad434fc2bc819a5d7deda3855d897a99d528ab4a-e3HRgR_fw658" alt="空间图片">
+                </div>
+                <div class="img-box">
+                  <img src="https://hbimg.huabanimg.com/5e4e3239dc7eca56eb92ca612d49d824f022b13621d5a-Ga7voM_fw658" alt="空间图片">
+                </div>
+                <div class="img-box">
+                  <img src="https://hbimg.huabanimg.com/60e2a25564f6ac13e7e16a19dcc3e194d565776231347-1Cw8dg_fw658" alt="空间图片">
+                </div>
+                <div class="img-box">
+                  <img src="https://hbimg.huabanimg.com/2ea712954c75ff1b1e13329e7e4209f0691b88945c73-JCmkXX_fw658" alt="空间图片">
+                </div>
+              </div> -->
+              <div v-show="!spaceDetails.Pic" style="height:100%;transform: translateY(50%);textAlign:center;">
+                <i class="icon-wushuju iconfont"></i>
+                数据暂无
               </div>
-            </div>
-          </el-scrollbar>
+            </el-scrollbar>
+          </div>
         </el-aside>
         <el-main style="height:100%">
           <el-tabs v-model="activeTab" type='card'>
@@ -135,7 +140,7 @@ export default {
       view: null,
       scene: null,
       canvasWidth: 410,
-      canvasHeight: 400,
+      canvasHeight: 300,
       page: {
         pageSize: 50,
         pageSizes: [10, 20, 50, 100],
@@ -167,7 +172,7 @@ export default {
     }
   },
   updated() { },
-  computed: { },
+  computed: {},
   methods: {
     getData() {
       this.params = this.$route.query;
@@ -332,10 +337,6 @@ export default {
   box-sizing: border-box;
   height: calc(100% - 10px);
   overflow: hidden;
-  .el-scrollbar {
-    height: 100%;
-    overflow: hidden !important;
-  }
   .aside-top {
     overflow: hidden;
     display: flex;
@@ -353,27 +354,29 @@ export default {
   }
   .space-img {
     width: 100%;
-    overflow: hidden;
-    margin-top: 20px;
     .img-box {
+      border: 1px solid orange;
+      margin-bottom: 20px;
       float: left;
       position: relative;
-      width: 45%;
+      width: 47%;
       height: 180px;
-      margin: 20px 20px 0 0;
+      margin: 10px 10px 0 0;
+      overflow: hidden;
       img {
         position: absolute;
         left: 50%;
         top: 50%;
         transform: translate(-50%, -50%);
         width: 100%;
-        height: 100%;
       }
     }
   }
 }
 .el-scrollbar {
   width: 430px;
+  height: 100%;
+  overflow-x: hidden !important;
 }
 .el-main {
   color: #333;