wuyouming666
2024-04-24 52850f1dccd5a59581d6bb1db8d29ba9b8a32369
UI-Project/src/views/Slicecage/slicecage.vue
@@ -6,9 +6,20 @@
import { ref } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { tr } from "element-plus/es/locale";
const dialogFormVisible = ref(false)
const dialogFormVisiblea = ref(false)
const dialogFormVisibleb = ref(false)
const carposition1 = ref(40);
const carposition2 = ref(200);
const timers1 =ref(true);
const timers2 =ref(true);
const cellshow=ref(false);
const cellshow1=ref(true);
const cellshow2=ref(true);
const million=ref(0);
const million1=ref(0);
const currentPage4 = ref(4)
const pageSize4 = ref(100)
@@ -59,6 +70,62 @@
      })
    })
}
  var timer=setInterval(() => {
    console.log(million.value,million1.value);
    million.value+=1;
    if(million.value-million1.value!==12){
      if(million.value-million1.value>=2){
        if(carposition1.value==200){
          timers1.value=false;
        }else if(carposition1.value==40){
          timers1.value=true;
        }
        if(timers1.value==true){
          carposition1.value=carposition1.value+16;
        }else{
          carposition1.value=carposition1.value-16;
        }
        if(carposition2.value==200){
          timers2.value=false;
        }else if(carposition2.value==40){
          timers2.value=true;
        }
        if(timers2.value==true){
          carposition2.value+=16;
        }else{
          carposition2.value-=16;
        }
      }else{
      }
    }else{
      million1.value=million.value;
      if(cellshow.value==true){
        cellshow.value=false;
      }else{
        cellshow.value=true;
      }
      if(cellshow1.value==true){
        cellshow1.value=false;
      }else{
        cellshow1.value=true;
      }
      if(cellshow2.value==true){
        cellshow2.value=false;
      }else{
        cellshow2.value=true;
      }
    }
  }, 1000);
const getTableRow = (row,type) =>{
  switch (type) {
    case 'edit' :{
@@ -249,17 +316,23 @@
                    </el-col>
                </div> -->
    </div>
    <div id="awatch">
    <!-- <div id="awatch">
  <img src="../../assets/cp.png" alt="" style="width: 70%;height: 70%;margin-left: 160px;">
</div>
</div> -->
<!-- // 父级框 -->
   <!-- <div class="img-list">   -->
   <!-- // 浮在上方的图片  -->
  <!-- <img class="check-img" src="../../assets/lpl.jpg" alt="" style="width: 13%;height: 12%;margin-left: 160px;"> -->
  <!-- <img class="check-imga" src="../../assets/lpl.jpg" alt="" style="width: 13%;height: 12%;margin-left: 160px;"> -->
   <!-- // 底图 -->
  <!-- <img class="data-img " src="../../assets/dlpl.png" alt="" style="width: 1200px;height: 400px;margin-left: 130px;margin-top: 50px;"> -->
   <!-- </div> -->
<div class="img-dlpl" >
    <div class="img-car1" :style="'z-index:999;left:247px;top:' + carposition1 + 'px;position:absolute;'">
      <div v-show="cellshow1" style="margin-top:10px;width:200px;height:5px;background-color:red;"></div>
    </div>
    <div class="img-car2" :style="'z-index:999;left:704px;top:' + carposition2 + 'px;position:absolute;'">
      <div v-show="cellshow2" style="margin-top:10px;width:200px;height:5px;background-color:red;"></div>
    </div>
    <div v-show="cellshow" style="width: 200px;height: 5px;position: absolute;top:60px;left: 490px;background-color: red;">
    </div>
</div>
  </div>
<el-dialog v-model="dialogFormVisible" top="12vh" width="85%" title="请确认玻璃信息" >
  <div style="margin-left: 50px;margin-bottom: 10px;">
@@ -512,9 +585,63 @@
  width: 3.3125rem;
  height: 2.9375rem;
  top:15rem;
  right: 29rem;
  right: 28.5rem;
  z-index: 10;
  
}
.vertical {
    width: 45px;
    height: 25px;
    background-color: #409EFF;
    top: 485px; /* 初始位置 */
    left: 899px; /* 水平居中 */
    transform: translateX(-50%);
    animation: move-vertical 6s infinite; /* 从上到下动画,持续6秒,无限循环 */
}
@keyframes move-vertical {
    0% {
        top: 485px; /* 起始位置 */
    }
    100% {
        top: calc(100% - 210px); /* 从上到下结束位置 */
    }
}
.img-dlpl{
  margin-left: 200px;
  background-image:url('../../assets/dlpl.png');
  background-repeat: no-repeat;
    background-attachment: local;
    min-height: 400px;
    width: 1200px;
    max-width: 100%;
    background-size: 1200px 400px;
    overflow: hidden;
    position:relative
}
.img-car1{
  background-image:url('../../assets/lpl.jpg');
  position: absolute;
  background-repeat: no-repeat;
    background-attachment: local;
    min-height: 200px;
    width: 200px;
    max-width: 100%;
    background-size: 200px 70px;
    overflow: hidden;
    position:relative
}
.img-car2{
  background-image:url('../../assets/lpla.jpg');
  position: absolute;
  background-repeat: no-repeat;
    background-attachment: local;
    min-height: 200px;
    width: 200px;
    max-width: 100%;
    background-size: 200px 70px;
    overflow: hidden;
    position:relative
}
</style>