From 74479378a65ce1cb80a9386c5d66270f569ff77b Mon Sep 17 00:00:00 2001
From: heyujie <516346543@qq.com>
Date: 星期四, 11 三月 2021 10:55:41 +0800
Subject: [PATCH] 朔黄任务分配固定区域，避免按钮的上移
---
src/pages/panoramicView/components/SlideCanvas.vue | 49 ++++++++++++++++++++++++++++---------------------
1 files changed, 28 insertions(+), 21 deletions(-)
diff --git a/src/pages/panoramicView/components/SlideCanvas.vue b/src/pages/panoramicView/components/SlideCanvas.vue
index 47b4182..f8367e9 100644
--- a/src/pages/panoramicView/components/SlideCanvas.vue
+++ b/src/pages/panoramicView/components/SlideCanvas.vue
@@ -9,15 +9,17 @@
>
<swiper-slide v-for="camera in cameras" :key="camera.id+'c'">
<div class="swiper-draw-box-title">
+ <div class="left-fixed">
+ <b style="margin-left:14px;">缁樺埗鍖哄煙</b>
+ <span
+ class="el-dropdown-link"
+ @click="drawBaseImg(camera.id)"
+ style="position: relative;top: 5px; cursor:pointer"
+ >
+ <i class="iconfont iconbianji1" style="font-size: 28px; "></i>
+ </span>
+ </div>
<b>{{camera.name}}</b>
- <b style="margin-left:14px;">缁樺埗鍖哄煙</b>
- <span
- class="el-dropdown-link"
- @click="drawBaseImg(camera.id)"
- style="position: relative;top: 5px; cursor:pointer"
- >
- <i class="iconfont iconbianji1" style="font-size: 28px; "></i>
- </span>
</div>
<polygon-canvas
class="polygon-canvas"
@@ -32,17 +34,16 @@
></polygon-canvas>
</swiper-slide>
</swiper>
- <div class="swiper-pre-border" slot="button-prev" @click="pre" >
- <div class="icon-btn" >
+ <div class="swiper-pre-border" slot="button-prev" @click="pre">
+ <div class="icon-btn">
<i class="iconfont iconzuo"></i>
</div>
</div>
<div class="swiper-next-border" slot="button-next" @click="next">
- <div class="icon-btn" >
+ <div class="icon-btn">
<i class="iconfont iconyou1"></i>
</div>
</div>
-
</div>
</template>
@@ -56,10 +57,10 @@
'cameras',
//'swiperOption'
],
- watch:{
- cameras:{
- handler(n,o){
- console.log('slidecanvas cameras',n)
+ watch: {
+ cameras: {
+ handler (n, o) {
+ console.log('slidecanvas cameras', n)
},
deep: true
}
@@ -81,10 +82,10 @@
console.log(this.swiper)
},
methods: {
- refresh(url,cameraId) {
+ refresh (url, cameraId) {
this.$emit('polygonDataUpdate')
},
- getCanvasData(data) {
+ getCanvasData (data) {
let _this = this;
savePolygon(data).then(rsp => {
_this.$emit('polygonDataUpdate')
@@ -105,14 +106,14 @@
pre () {
this.swiper.activeIndex--;
- if(this.swiper.activeIndex == -1){
- this.swiper.activeIndex = this.cameras.length-1;
+ if (this.swiper.activeIndex == -1) {
+ this.swiper.activeIndex = this.cameras.length - 1;
}
this.swiper.slideTo(this.swiper.activeIndex);
},
next () {
this.swiper.activeIndex++;
- if(this.swiper.activeIndex == this.cameras.length){
+ if (this.swiper.activeIndex == this.cameras.length) {
this.swiper.activeIndex = 0;
}
this.swiper.slideTo(this.swiper.activeIndex);
@@ -172,6 +173,7 @@
background: #666;
}
.swiper-draw-box-title {
+ position: relative;
display: flex;
justify-content: center;
align-items: center;
@@ -179,6 +181,11 @@
b {
font-size: 14px;
}
+ .left-fixed{
+ position: absolute;
+ left: 0;
+ top: -6px;
+ }
}
.wrap-box {
width: 100%;
--
Gitblit v1.8.0