盘点管理视图搭建

merge-requests/1/head
张鑫 5 years ago
parent ef919ce3da
commit a3d587672e

@ -1,7 +1,7 @@
<template> <template>
<div class="checkOperation"> <div class="checkOperation">
<div class="topMenu"> <div class="topMenu">
<a-select default-value="lucy" style="width: 160px;margin-right:25px" @change="handleChange"> <a-select default-value="lucy" style="width: 160px;margin-right:25px">
<a-select-option value="jack"> <a-select-option value="jack">
巷道一 巷道一
</a-select-option> </a-select-option>
@ -9,24 +9,57 @@
巷道二 巷道二
</a-select-option> </a-select-option>
</a-select> </a-select>
<a-select default-value="lucy" style="width: 160px;margin-right:25px" @change="handleChange"> <a-select default-value="a" style="width: 160px;margin-right:25px">
<a-select-option value="jack"> <a-select-option value="a">
左货架 左货架
</a-select-option> </a-select-option>
<a-select-option value="lucy"> <a-select-option value="b">
右货架 右货架
</a-select-option> </a-select-option>
</a-select> </a-select>
<a-select default-value="lucy" style="width: 160px" @change="handleChange"> <a-select default-value="c" style="width: 160px">
<a-select-option value="jack"> <a-select-option value="c">
</a-select-option> </a-select-option>
<a-select-option value="lucy"> <a-select-option value="d">
</a-select-option> </a-select-option>
</a-select> </a-select>
</div>
<div class="carousel-box"> <div class="carousel-box">
<a-carousel class="carousel" ref="carousel"> <a-carousel class="carousel" ref="carousel">
<div class="carousel-page">
<p class="carousel-page-title">工单号223333331123213</p>
<div class="carousel-page-content">
<div class="img-box">
<img
src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1931813381,2486401072&fm=26&gp=0.jpg"
alt="">
<p>操作前照片</p>
</div>
<div class="img-box">
<img
src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3139679339,2066283298&fm=26&gp=0.jpg"
alt="">
<p>操作后照片</p>
</div>
</div>
<div class="carousel-page-footer">
<div class="info-box">
<p>系统登记品规xxxsxxxx</p>
<p>系统登记数量23021</p>
</div>
<div class="status">
未核对
</div>
<div class="status-btn">
<a-button class="btn" type="danger">人工复核</a-button>
<a-button class="btn" type="primary" style="background:#29c12b;border-color:#29c12b;">核对正确
</a-button>
</div>
</div>
</div>
<!--2-->
<div class="carousel-page"> <div class="carousel-page">
<p class="carousel-page-title">工单号223333331123213</p> <p class="carousel-page-title">工单号223333331123213</p>
<div class="carousel-page-content"> <div class="carousel-page-content">
@ -43,20 +76,59 @@
<p>操作后照片</p> <p>操作后照片</p>
</div> </div>
</div> </div>
<div class="carousel-page-footer">
<div class="info-box"> <div class="info-box">
<p>系统登记品规xxxsxxxx</p> <p>系统登记品规xxxsxxxx</p>
<p>系统登记数量23021</p> <p>系统登记数量23021</p>
</div> </div>
<div class="status">
未核对
</div>
<div class="status-btn">
<a-button class="btn" type="danger">人工复核</a-button>
<a-button class="btn" type="primary" style="background:#29c12b;border-color:#29c12b;">核对正确
</a-button>
</div>
</div>
</div>
<!--3-->
<div class="carousel-page">
<p class="carousel-page-title">工单号223333331123213</p>
<div class="carousel-page-content">
<div class="img-box">
<img
src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1520587439,1746635941&fm=26&gp=0.jpg"
alt="">
<p>操作前照片</p>
</div>
<div class="img-box">
<img
src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=274465270,4254987731&fm=26&gp=0.jpg"
alt="">
<p>操作后照片</p>
</div>
</div>
<div class="carousel-page-footer">
<div class="info-box">
<p>系统登记品规xxxsxxxx</p>
<p>系统登记数量23021</p>
</div>
<div class="status">
未核对
</div>
<div class="status-btn">
<a-button class="btn" type="danger">人工复核</a-button>
<a-button class="btn" type="primary" style="background:#29c12b;border-color:#29c12b;">核对正确
</a-button>
</div>
</div> </div>
<div><h3>2</h3></div>
<div><h3>3</h3></div>
<div><h3>4</h3></div>
</a-carousel>
</div> </div>
<div> </a-carousel>
<div @click="prev()"></div>
<div @click="next()"></div>
</div> </div>
<div class="bottom-btn">
<a-button class="btn" @click="prev()"></a-button>
<p>6行3列</p>
<a-button class="btn" @click="next()"></a-button>
</div> </div>
</div> </div>
@ -81,9 +153,10 @@
color: #000000; color: #000000;
} }
.checkOperation {
.carousel-box { .carousel-box {
width: 1200px; width: 900px;
/*border: solid 1px red;*/ /*border: solid 1px blue;*/
.carousel-page { .carousel-page {
display: flex; display: flex;
align-items: center; align-items: center;
@ -91,33 +164,89 @@
&-title { &-title {
color: #009FE3; color: #009FE3;
font-size: 16px;
margin: 0;
padding: 15px 0 10px 25px;
} }
&-content { &-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: left; justify-content: space-between;
} padding-left: 25px;
.img-box { .img-box {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
flex-direction: column; flex-direction: column;
margin-right: 25px; font-size: 17px;
height: 400px;
width: 400px;
img { img {
width: 400px; width: 100%;
height: calc(100% - 25px)
}
p {
height: 25px;
}
} }
} }
&-footer {
.info-box { .info-box {
color: #000000; color: #000000;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
p {
padding: 0 20px;
font-size: 18px;
}
} }
.status {
text-align: center;
font-size: 21px;
}
.status-btn {
display: flex;
align-items: center;
justify-content: center;
.btn {
padding: 25px;
font-size: 17px;
display: flex;
align-items: center;
justify-content: center;
line-height: 0;
margin: 15px 45px;
}
}
}
}
}
.bottom-btn {
width: 900px;
display: flex;
align-items: center;
justify-content: center;
p {
font-size: 18px;
padding: 0;
margin: 0;
}
.btn {
margin: 25px;
}
} }
} }

@ -103,7 +103,7 @@ export default {
this.select = value this.select = value
}, },
tocheckOperation() { tocheckOperation() {
// this.$router.push({name:'checkOperation'}) this.$router.push({name: 'checkOperation'})
} }
}, },
components: {} components: {}

Loading…
Cancel
Save