<template>
    <div class="dialog-content map-box">
          <div class="map-left"> 
            <vue-scroll>
              <div class="add-btn" @click="openAddImgDialog">
                <i class="el-icon-circle-plus-outline"></i>
                <div>
                  <!-- 添加布置图 -->
                  {{$t('message.highModulus.addImg')}}
                </div>
              </div>
              <ul>
                <li v-for="(item,index) in deepImgList" :key="index" :class="{'img-active': activeImgIndex == index}">
                  <img :src="item.imageUrl"  @click="checkImg(item,index)"/>
                  <div class="actions-box">
                    <span>{{item.planeFigureName}}</span>
                    <el-button type="text" icon="el-icon-delete" style="color: #F56C6C" @click="deleteDeepImg(item)">
                      <!-- 删除 -->
                      {{$t('message.highModulus.remove')}}
                    </el-button>
                  </div>
                </li>
              </ul>
            </vue-scroll>
          </div>
          <div class="map-right">
            <div class="action-box" v-if="activeImgUrl">
              <div v-show="!isEditPoint" class="btn-item" @click="editPoint">
                <img src="@/assets/images/deepFoundationPitManage/address.png"/>
                <!-- 布点 -->
                {{$t('message.highModulus.movePoint')}}
              </div>
              <div v-show="isEditPoint" class="btn-item" @click="savePoint">
                <img src="@/assets/images/deepFoundationPitManage/save.png"/>
                <!-- 保存 -->
                {{$t('message.highModulus.save')}}
              </div>
              <div class="btn-item" @click="changeImgSize(1)">
                <i class="el-icon-zoom-in"></i>
                <!-- 放大 -->
                {{$t('message.highModulus.zoomIn')}}
              </div>
              <div class="btn-item" @click="changeImgSize(2)">
                <i class="el-icon-zoom-out"></i>
                <!-- 缩小 -->
                {{$t('message.highModulus.zoomOut')}}
              </div>
            </div>
            <div style="height: 100%" ref="mapbox">
            <vue-scroll style="height:calc(100% - 30px);">
              <div class="img-box" @mousewheel.prevent="rollImg"  :style="{'width': imgWidth + 'px', height: imgHeight + 'px', transform: 'scale(' + imgZoom +')'}">
                <img ref="map"  v-if="activeImgUrl"  style="border: 1px solid #eee;" :style="{'width': imgWidth + 'px', height: imgHeight + 'px'}" :src="activeImgUrl"/>
                <ul class="point-list" v-if="activeImgUrl">
                  <li v-for="(item,index) in pointList" :key="index" :ref="'point'+index" :style="{'top': item.mapY + 'px', 'left': item.mapX + 'px', 'display': item.status, 'transform': 'scale(' + 1/imgZoom +')'+ ' ' + item.transform}" >
                    <div class="point-dialog" :class="{'right_detail': item.mapY < 251 || item.mapX < 107}" :style="{'display': item.showDetail ? 'block':'none'}">
                      <i class="el-icon-error" @click="item.showDetail = false"></i>
                      <div class="point-title">{{item.measurePointName}}</div>
                      <div class="point-content">
                        <!-- 电量 -->
                        <p>{{$t('message.highModulus.electricQuantity')}}(%)：{{item.currentdata['electricPower']}}</p>
                        <!-- X轴 -->
                        <p>{{$t('message.highModulus.Xaxis')}}(°)：{{item.currentdata['angleXAxis']}}</p>
                        <!-- Y轴 -->
                        <p>{{$t('message.highModulus.Yaxis')}}(°)：{{item.currentdata['angleYAxis']}}</p>
                        <!-- 压力 -->
                        <p>{{$t('message.highModulus.pressure')}}(kN)：{{item.currentdata['pressure']}}</p>
                        <!-- 沉降 -->
                        <p>{{$t('message.highModulus.settling')}}(mm)：{{item.currentdata['subside']}}</p>
                        <!-- 状态 -->
                        <p>{{$t('message.highModulus.status')}}：{{item.currentdata['alarmState'] == 2 ? '预警':item.currentdata['alarmState'] == 3? '报警':'正常'}}</p>
                        <!-- <p v-for="(item2,index2) in item.detailList" :key="index2">{{item2.keyName}}：{{item.currentdata[item2.key]}}</p> -->
                        <!-- 采集时间 -->
                        <p>{{$t('message.highModulus.collectTime')}}：{{item.currentdata['collectTime']}}</p>
                      </div>
                    </div>
                    <div class="point-dialog point-title2" :class="{'right_title': item.mapY < 47 || item.mapX < 22}" :style="{'display': item.showDetail ? 'none':'block'}" @click="item.showDetail = true">
                      <span>{{item.measurePointName}}</span>
                    </div>
                    <img @mousedown.prevent="move(index,$event)" @mouseup="up(index,$event)" style="width: 19px; height:29px; z-index: -1" src="@/assets/images/deepFoundationPitManage/point-icon.png"/>
                  </li>
                </ul>
              </div>
              <div class="pointFixed" ref="pointFixed" :style="{'top': pointTop + 'px','left': pointLeft + 'px','display': pointStatus}">
                    <img style="width: 19px; height:29px;" src="@/assets/images/deepFoundationPitManage/point-icon.png"/>
              </div>
            </vue-scroll>
            </div>
          </div>
          <!-- 添加平面图 -->
           <el-dialog
            width="35%"
            title="添加布置图"
            class="dialog-center"
            :visible.sync="showAddImg"
            @close="closeAddImg"
            :modal-append-to-body="false">
        <div class="dialog-content" style="height: 368px">
          <el-form size="medium"
                class="formBox"
                style="margin-bottom: 68px"
                :model="testPointImgForm"
                ref="testPointImgForm"
                label-width="120px"
                :rules="$t('message.highModulus.rules3')">
                <!-- 平面图名称 -->
              <el-form-item label="布置图名称" prop="planeFigureName">
                <el-input v-model="testPointImgForm.planeFigureName" :placeholder="$t('message.highModulus.placeholderText')"></el-input>
              </el-form-item>
              <!-- 测点 -->
              <el-form-item :label="$t('message.highModulus.point')" prop="pointIds">
                  <el-select style="width: 100%;" v-model="testPointImgForm.pointIds" multiple :placeholder="$t('message.highModulus.placeholderText2')">
                    <el-option
                      v-for="item in testPointOptions"
                      :key="item.id"
                      :label="item.measurePointName"
                      :value="item.id">
                    </el-option>
                  </el-select>
              </el-form-item>
              <!-- 示意图 -->
              <el-form-item :label="$t('message.highModulus.img')" prop="fileList">
                <div class="img_box" v-for="(item,index) in testPointImgForm.fileList" :key="index">
                  <el-image 
                    :src="item.url"
                    :preview-src-list="[item.url]"
                    style="width: 148px;height:148px;margin-right: 20px">
                  </el-image>
                  <i class="el-icon-error" @click="testPointImgForm.fileList.splice(index,1)"></i>
                </div>
                <el-upload
                      :action="$store.state.UPLOADURL"
                      name="files"
                      style="display: inline"
                      list-type="picture-card"
                      :show-file-list="false"
                      :on-remove="(file,fileList) => handleRemove(file,fileList)"
                      :on-success="(res,file) => handleSuccess(res,file)"
                      :file-list="testPointImgForm.fileList">
                      <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
          </el-form>
          <div class="btn-box">
            <!-- 确认 -->
            <el-button type="primary" icon="el-icon-circle-check" @click="submitImgConfig">{{$t('message.highModulus.confirm')}}</el-button>
            <!-- 取消 -->
            <el-button icon="el-icon-circle-close" @click="closeAddImg">{{$t('message.highModulus.cancel')}}</el-button>
          </div>
        </div>
       </el-dialog>
       <!-- 提示 -->
       <el-dialog
            width="35%"
            :title="$t('message.highModulus.hint')"
            class="dialog-center"
            :visible.sync="deleteInfo"
            :modal-append-to-body="false">
            <p style="font-size: 18px;display: flex;align-items:center">
              <i class="el-icon-warning" style="color: #E6A23C;font-size: 28px;margin-right: 10px"></i>
              <!-- 此操作将永久删除该文件, 是否继续? -->
              {{$t('message.highModulus.hintText')}}
            </p>
            <span slot="footer" class="dialog-footer">
              <!-- 取 消 -->
              <el-button @click="closeMsg(1)">{{$t('message.highModulus.cancel')}}</el-button>
              <!-- 确认 -->
              <el-button type="primary" @click="checkMsg">{{$t('message.highModulus.confirm')}}</el-button>
            </span>
       </el-dialog>
        </div>
</template>

<script>
import { selectPointListApi,
    addHighFormworkPlaneFigureApi,
    deleteHighFormworkPlaneFigureApi,
    selectHighFormworkPlaneFigureListApi,
    selecthighFormworkPlaneFigureCoordinateListApi,
    updateFigureCoordinateApi } from '@/assets/js/api/highModulus.js'
export default {
    data(){
        return{
            deleteInfo: false,
            deepImgList:[],
            activeImgIndex: 0,
            activeImgUrl: false,
            isEditPoint: false,
            imgWidth: 721,
            imgHeight: 545,
            activeImgUrl: false,
            pointList: [],
            detailList: [],
            pointTop: 0,
            pointLeft: 0,
            imgZoom: 1,
            pointStatus: 'none',
            showAddImg: false,
            testPointImgForm:{
                planeFigureName: '',
                pointIds: [],
                fileList:[]
            },
            rules3:{
                planeFigureName: [
                { required: true, message: '请输入平面图名称', trigger: 'blur' }
                ],
                pointIds: [
                { type: 'array', required: true, message: '请至少选择一个测点', trigger: 'change' }
                ],
                fileList: [
                { type: 'array', required: true, message: '请上传示意图', trigger: 'blur' },
                { type: 'array', required: true, message: '请上传示意图', trigger: 'change' }
                ]
            },
            testPointOptions:[],
           
        }
    },
    created(){
        this.selectPointList()
        this.selectHighFormworkPlaneFigureList()
    },
    methods:{
        selecthighFormworkPlaneFigureCoordinateList(val){
            selecthighFormworkPlaneFigureCoordinateListApi({planeFigureId: val}).then(res=>{
                console.log(res)
                if(res.code == 200){
                    res.result.forEach(item=>{
                        item.status = 'block'
                        item.transform = '',
                        item.showDetail = false
                        // let arr = []
                        // let obj = JSON.parse(item.dataField)
                        // for(let key in obj){
                        // arr.push({
                        //     key: key,
                        //     keyName: obj[key]
                        // })
                        // }
                        // item.detailList = arr
                    })
                    this.pointList = res.result
                }
            })
        },
        selectHighFormworkPlaneFigureList(){
            selectHighFormworkPlaneFigureListApi({projectSn: this.$store.state.projectSn}).then(res=>{
                console.log(res)
                if(res.code){
                    this.deepImgList = res.result
                    if(res.result.length>0){
                        this.checkImg(res.result[0],0)
                    }
                }
            })
        },
        selectPointList(){
            selectPointListApi({projectSn: this.$store.state.projectSn}).then(res=>{
                console.log(res)
                if(res.code == 200){
                    this.testPointOptions = res.result
                }
            })
        },
        checkMsg(){
            this.deleteInfo = false
        },
        closeMsg(){
            this.deleteInfo = false
        },
        closeAddImg(){
            this.showAddImg = false
            this.testPointImgForm = {
                planeFigureName: "",
                fileList: [],
                pointIds: []
            }
            this.$refs['testPointImgForm'].resetFields()
        },
        submitImgConfig(){
            this.$refs['testPointImgForm'].validate((valid) => {
                if(valid){
                    let data = {
                        planeFigureName: this.testPointImgForm.planeFigureName,
                        pointIds: this.testPointImgForm.pointIds.join(','),
                        imageUrl: this.testPointImgForm.fileList[0].url,
                        projectSn: this.$store.state.projectSn
                    }
                // console.log(data)
                addHighFormworkPlaneFigureApi(data).then(res=>{
                    // console.log(res)
                    if(res.code == 200){
                      // '添加成功！'
                        this.$message.success(this.$t('message.highModulus.addSuccessMsg'))
                        this.selectHighFormworkPlaneFigureList()
                        this.showAddImg = false
                    }
                })
                // addDeepExcavationPlaneFigureApi(data).then(res=>{
                //     console.log(res)
                //     if(res.code == 200){
                //     this.$message.success('添加成功！')
                //     this.selectDeepExcavationPlaneFigureList()
                //     this.showAddImg = false
                //     }
                // })

                }
            })
        },
       handleRemove(file, fileList,type){
            this.testPointImgForm.fileList = fileList
        },
        handleSuccess(res,file){
            this.testPointImgForm.fileList = [{
                name: file.name,
                url:this.$store.state.FILEURL + file.response.data[0].imageUrl
            }]
            this.$refs['testPointImgForm'].clearValidate()
        },
        openAddImgDialog(){
            this.showAddImg = true
            // this.selectDeepExcavationAllMeasurePointList()
        },
        checkImg(val,index){
            // console.log('移动',val)
            this.imgZoom = 1
            this.activeImgIndex = index
            this.activeImgUrl = val.imageUrl
            this.isEditPoint = false
            this.selecthighFormworkPlaneFigureCoordinateList(val.id)
            this.$nextTick(()=>{
                this.getNaturalSize()
            })
        },
        // 获取基坑布置图图片大小
        getNaturalSize (callback) {
                let Domlement = this.$refs['map']
                console.dir(Domlement)
                var natureSize = {};
                if(window.naturalWidth && window.naturalHeight) {
                    natureSize.width = Domlement.naturalWidth;
                    natureSize.height = Domlement.naturalHeight;
                    // let heightRatio = natureSize.height / 569
                    // this.mapDate.width = natureSize.width*heightRatio
                } else {
                    console.log(213)
                    let _this = this
                    var img = new Image();
                    img.src = Domlement.src;
                    img.onload = function(){
                        natureSize.width = img.width;
                        natureSize.height = img.height;
                        console.log('------', natureSize)
                        // _this.imgWidth = natureSize.width
                        // _this.imgHeight = natureSize.height
                        _this.imgStartWidth = img.width;
                        _this.imgStartHeight = img.width;
                        console.log(_this.$refs['mapbox'].clientWidth, _this.$refs['mapbox'].clientHeight)

                        // let heightRatio = 780 / natureSize.height
                        // let widthRatio = _this.$refs['mapbox'].clientWidth / natureSize.width 
                        // if(heightRatio < widthRatio){
                        //     // _this.imgWidth = natureSize.width*heightRatio
                        //     // _this.imgHeight = natureSize.height*heightRatio
                        //     _this.imgZoom = heightRatio
                        // } else {
                        //     // _this.imgWidth = natureSize.width*widthRatio
                        //     // _this.imgHeight = natureSize.height*widthRatio
                        //     _this.imgZoom = widthRatio
                        // }
                        // _this.mapDate.width = natureSize.width*heightRatio
                        if(callback){
                            return callback(natureSize)
                        }
                    }

                }
        console.log(natureSize)
        // return natureSize;
        },
        deleteDeepImg(val){
            // this.removeType = 1
            // this.removeData = val
            // this.deleteInfo = true
            // '此操作将永久删除该文件, 是否继续?' '提示'
            this.$confirm(this.$t('message.highModulus.hintText'), this.$t('message.highModulus.hint'), {
            confirmButtonText: this.$t('message.highModulus.confirm'),
            cancelButtonText: this.$t('message.highModulus.cancel'),
            type: 'warning'
            }).then(() => {
                deleteHighFormworkPlaneFigureApi({id: val.id}).then(res=>{
                    if(res.code == 200){
                      // '删除成功！'
                        this.$message.success(this.$t('message.highModulus.removeSuccessMsg'))
                        this.selectHighFormworkPlaneFigureList()
                        this.activeImgUrl = ''
                    }
                })
            }).catch(() => {
              // '已取消删除'
                this.$message({
                    type: 'info',
                    message: this.$t('message.highModulus.cancelRemove')
                });          
            });
        },
        editPoint(){
            this.isEditPoint = true
            this.$notify({
              // '成功'
                title: this.$t('message.highModulus.success'),
                // '请开始移动点位！'
                message: this.$t('message.highModulus.hintText2'),
                type: 'success',
            });
        },
        savePoint(){
            let arr = []
            this.pointList.forEach(item=>{
                arr.push({
                    id: item.id,
                    mapX: item.mapX,
                    mapY: item.mapY,
                    measurePointId: item.measurePointId,
                    planeFigureId: item.planeFigureId
                })
            })
            let data ={
              list: arr
            }
            updateFigureCoordinateApi(arr).then(res=>{
                console.log(res)
                if(res.code && res.success){
                  // '保存成功！'
                  this.$message.success(this.$t('message.highModulus.saveSuccessMsg'))
                }
              })
            //   editDeepExcavationPlaneFigureCoordinateApi(arr).then(res=>{
            //     console.log(res)
            //     if(res.code && res.success){
            //       this.$message.success('保存成功！')
            //     }
            //   })
            this.isEditPoint = false
        },
        changeImgSize(val){
             if(val == 1){
                this.imgZoom = this.imgZoom + 0.2
                console.log(this.imgZoom)
            }else if(val == 2){
                this.imgZoom = (this.imgZoom - 0.5) <= 0 ? this.imgZoom:this.imgZoom - 0.5
                console.log(this.imgZoom)
            }
        },
     

         // 缩放图片
        rollImg() { 
        /* 获取当前页面的缩放比 若未设置zoom缩放比，则为默认100%，即1，原图大小 */ 
        var zoom = parseInt(this.$refs.map.style.zoom) || 100; 
        /* event.wheelDelta 获取滚轮滚动值并将滚动值叠加给缩放比zoom wheelDelta统一为±120，其中正数表示为向上滚动，负数表示向下滚动 */ 
        zoom += event.wheelDelta / 12;
            /* 最小范围 和 最大范围 的图片缩放尺度 */ 
            if (zoom >= 80 && zoom <500) { 
            this.$refs.map.style.zoom = zoom + "%"; 
            }
            return false; 
        },

        // 添加鼠标监听事件
        move(val,e){
            console.log(val,e.pageX,e.pageY)
            this.ratio = window.localStorage.getItem('zoom')
            this.startX = e.pageX
            this.startY = e.pageY
            this.pointIndex = val
            // console.dir(this.$refs['point'+val])
            // this.$refs['point'+val].style.opacity = '0'
            let _this = this
            console.log(this.pointList[val])
            if(this.isEditPoint){
                this.pointList[val].status = 'none'
                // this.$refs['point'+ val].style.display = 'none'
                document.body.addEventListener('mousemove',this.movePoint,false)
                document.body.addEventListener('mouseup',this.removeUp,false)
            }
        },
        // 清除鼠标监听时间
        removeUp(e){
            let top =  (e.pageY - this.startY)/this.imgZoom ,
                left = (e.pageX - this.startX)/this.imgZoom
            console.log(top,left)
            this.pointStatus = 'none'
            let x = Math.ceil(Number(this.pointList[this.pointIndex].mapX ? this.pointList[this.pointIndex].mapX:0) + left/this.ratio),
                y =  Math.ceil(Number(this.pointList[this.pointIndex].mapY ? this.pointList[this.pointIndex].mapY:0) + top/this.ratio)
            console.log(x,y,this.imgWidth,this.imgHeight)
            if(y <= this.imgHeight && y >= 0){
                this.pointList[this.pointIndex].mapY = y
            }
            if(x <= this.imgWidth && x >= 0){
                this.pointList[this.pointIndex].mapX = x
            }
            this.pointList[this.pointIndex].status = 'block'
            console.log(this.pointList)
            this.$forceUpdate()
            
            document.body.removeEventListener('mousemove',this.movePoint,false)
            document.body.removeEventListener('mouseup',this.removeUp,false)
        },
        // 移动鼠标
        movePoint(target){
            let bodyWidth = document.body.clientWidth,
                bodyHeight = document.body.clientHeight,
                appWidth = document.getElementById('app').clientWidth*this.ratio,
                appHeight = document.getElementById('app').clientHeight*this.ratio,
                a = bodyWidth - appWidth,
                b = bodyHeight - appHeight
            
            if(this.ratio != 1){
                this.$refs['pointFixed'].style.transform = 'translate(0px, -75px)'
                this.pointTop = ((target.pageY)/this.ratio - (b*0.5)/this.ratio) + 62
                this.pointLeft =  ((target.pageX)/this.ratio - (a*0.5)/this.ratio) - 10
            } else{
                this.pointTop = target.pageY
                this.pointLeft =  target.pageX
            }
            this.pointStatus = 'block'
        },
        up(val,e){
            let _this = this
            if(this.isEditPoint){
                window.removeEventListener('mousemove',function(e){
                    _this.movePoint()
                })
            }
        }
    }
}
</script>

<style lang="less" scoped>
.dialog-content{
    width: 100%;
    height: 100%;
    // background: #fff;
}
.map-box{
  display: flex;
  height: 100%;
  .map-left{
    padding-top: 20px;
    box-sizing: border-box;
    width: 300px;
    height: 100%;
    background: #fff;
    .uploadBox{
      width: 250px;
      margin: 0 auto;
      margin-bottom: 16px;
    }
    .add-btn{
      width: 250px;
      margin: 0 auto;
      margin-bottom: 16px;
      text-align: center;
      background: rgba(#D8D8D8, 0.3);
      height: 132px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      .el-icon-circle-plus-outline{
        margin-bottom: 8px;
        font-size: 26px;
        color: #B4C8F3;
      }
    }
    ul{
      width: 250px;
      margin: 0 auto;
      li{
        width: 100%;
        margin-bottom: 16px;
        cursor: pointer;
        border: 1px solid #CDCDCD;
        padding: 0 10px;
        padding-top: 10px;
        box-sizing: border-box;
        img{
          width: 100%;
          margin: 0 auto;
          display: block;
          height: 132px;
          // border: 1px solid #CDCDCD;
        }
        .actions-box{
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-right: 10px;
          span{
            flex: 1;
          }
        }
      }
      .img-active{
          border-color: #4A8BFF;
          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.14);
        }
    }
  }
  .map-right{
    // flex: 1;
    width: calc(100% - 300px);
    border: 1px solid #E6E6E6;
    padding: 14px;
    height: 100%;
    box-sizing: border-box;
    margin-left: 10px;
    background: #fff;
    .action-box{
      display: flex;
      margin-bottom: 10px;
      .btn-item{
        margin-right: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #5181F6;
        border: 1px solid #5181F6;
        border-radius: 3px;
        cursor: pointer;
        width: 62px;
        height: 24px;
        img{
          margin-right: 4px;
        }
        i{
          margin-right: 4px;
        }
      }
    }
    .img-box{
      // margin: 0 auto;
      // height: 100%;
      // position: relative;
      // top: 50%;
      // transform: translateY(-50%);
      transform-origin: left top;
      position: relative;
      .point-list{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        li{
          display: inline-block;
          position: absolute;
        }
        .point-dialog{
          background: rgba(#2A2E3F, 0.9);
          color: #fff;
          width: 238px;
          height: auto;
          box-sizing: border-box;
          padding: 0 16px;
          padding-bottom: 18px;
          position: absolute;
          left: 50%;
          top: -8px;
          transform: translate(-50%, -100%);
          font-size: 12px;
          .el-icon-error{
            position: absolute;
            right: 12px;
            top: 10px;
            cursor: pointer;
          }
          .point-title{
            // height: 40px;
            line-height: 20px;
            border-bottom: 1px solid rgba(254, 255, 255, 1);
            margin-bottom: 13px;
            font-size: 14px;
            word-break: break-all;
            padding: 10px 0;
          }
          .point-content{
            font-size: 14px;
            p{
              line-height: 24px;
            }
          }
        }
        .right_detail{
          left: 30px;
          top: 0;
          transform: translate(0,0);
          bottom: -205px;
        }
        .right_title{
          left: 30px;
          top: -8px;
          transform: translate(0,0);
        }
        
        .point-title2{
          width: auto;
          height: auto;
          white-space: nowrap;
          font-size: 16px;
          padding: 10px 20px;
        }
      }
      img{
        // display: block;
        // margin: 0 auto;
        // position: relative;
        // top: 50%;
        // transform: translateY(-50%);
      }
    }
  }
}
.btn-box{
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.img_box{
  width: 148px;
  height:148px;
  margin-right: 20px;
  display: inline-block;
  position: relative;
  .el-icon-error{
    position: absolute;
    right: -9px;
    top: -9px;
    font-size: 18px;
    color: #F56C6C;
    cursor: pointer;
  }
  .el-image{
    width: 100%;
    height:100%;
  }
}
.pointFixed{
  position: fixed;
}



</style>