| | |
| | | |
| | | 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) |
| | |
| | | }) |
| | | }) |
| | | } |
| | | |
| | | 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' :{ |
| | |
| | | </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;"> |
| | |
| | | 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> |