盘点管理视图搭建

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,54 +9,126 @@
巷道二 巷道二
</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 class="carousel-box"> </div>
<a-carousel class="carousel" ref="carousel"> <div class="carousel-box">
<div class="carousel-page"> <a-carousel class="carousel" ref="carousel">
<p class="carousel-page-title">工单号223333331123213</p> <div class="carousel-page">
<div class="carousel-page-content"> <p class="carousel-page-title">工单号223333331123213</p>
<div class="img-box"> <div class="carousel-page-content">
<img <div class="img-box">
src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1520587439,1746635941&fm=26&gp=0.jpg" <img
alt=""> src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1931813381,2486401072&fm=26&gp=0.jpg"
<p>操作前照片</p> alt="">
</div> <p>操作前照片</p>
<div class="img-box"> </div>
<img <div class="img-box">
src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=274465270,4254987731&fm=26&gp=0.jpg" <img
alt=""> src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3139679339,2066283298&fm=26&gp=0.jpg"
<p>操作后照片</p> alt="">
</div> <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">
<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>
<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>
<div><h3>2</h3></div> <div class="carousel-page-footer">
<div><h3>3</h3></div> <div class="info-box">
<div><h3>4</h3></div> <p>系统登记品规xxxsxxxx</p>
</a-carousel> <p>系统登记数量23021</p>
</div> </div>
<div> <div class="status">
<div @click="prev()"></div> 未核对
<div @click="next()"></div> </div>
</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>
</a-carousel>
</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,43 +153,100 @@
color: #000000; color: #000000;
} }
.carousel-box { .checkOperation {
width: 1200px; .carousel-box {
/*border: solid 1px red;*/ width: 900px;
.carousel-page { /*border: solid 1px blue;*/
display: flex; .carousel-page {
align-items: center;
justify-content: left;
&-title {
color: #009FE3;
}
&-content {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: left; justify-content: left;
}
.img-box { &-title {
display: flex; color: #009FE3;
align-items: center; font-size: 16px;
justify-content: center; margin: 0;
flex-direction: column; padding: 15px 0 10px 25px;
margin-right: 25px; }
&-content {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 25px;
.img-box {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
font-size: 17px;
height: 400px;
width: 400px;
img {
width: 100%;
height: calc(100% - 25px)
}
img { p {
width: 400px; height: 25px;
}
}
}
&-footer {
.info-box {
color: #000000;
display: flex;
align-items: 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;
}
}
} }
} }
}
.info-box { .bottom-btn {
color: #000000; width: 900px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: 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