255 lines
4.5 KiB
Vue
255 lines
4.5 KiB
Vue
<template>
|
||
<view>
|
||
<view class="crkcard guodu" :class="crk?'':'uncrkcard'">
|
||
<view class="titletop">
|
||
出入库
|
||
</view>
|
||
<view class="select">
|
||
<view>
|
||
<view>全部</view>
|
||
<view>日期从近到远
|
||
<image src="/static/index/hulilist/xia.png" mode="aspectFill"></image>
|
||
</view>
|
||
</view>
|
||
<view>
|
||
<text>总计:100笔</text>
|
||
<text>出库：50</text>
|
||
<text>入库：50</text>
|
||
</view>
|
||
</view>
|
||
<scroll-view scroll-y="true" class="crkscroll">
|
||
<view class="cgrk" v-for="(v,i) in 15" :key='i'>
|
||
<view>
|
||
<text>采购入库</text>
|
||
<text>服务指令:生活用品请领</text>
|
||
<text>2025-02-13 17:29:18</text>
|
||
</view>
|
||
<view>
|
||
<text :class="i>5?'c':'l'">+50</text>
|
||
<text>库存：96</text>
|
||
<text>摘要:服务指令</text>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
props:{
|
||
crk:false
|
||
},
|
||
data() {
|
||
return {
|
||
|
||
};
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
// 出入库
|
||
.guodu {
|
||
transition: .4s;
|
||
-webkit-transform-style: preserve-3d;
|
||
-webkit-overflow-scrolling: touch;
|
||
}
|
||
.uncrkcard {
|
||
top: -86vw !important;
|
||
}
|
||
|
||
.crkcard {
|
||
width: 36vw;
|
||
height: 85vh;
|
||
background: rgba(255, 255, 255, 1);
|
||
box-shadow: 0rpx 0rpx 1vw 0rpx rgba(171, 171, 172, 0.29);
|
||
border-radius: 1.6vw;
|
||
position: fixed;
|
||
right: 32vw;
|
||
top: 7vw;
|
||
padding: 1.7vw;
|
||
z-index: 112;
|
||
.titletop{
|
||
width: 100%;
|
||
height: 3.5vw;
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #333333;
|
||
line-height: 2.5vw;
|
||
}
|
||
|
||
.crkscroll {
|
||
width: 100%;
|
||
height: calc(85vh - 14vw);
|
||
|
||
.cgrk {
|
||
width: 100%;
|
||
height: 11vw;
|
||
background: rgba(236, 237, 239, 0.4);
|
||
border-radius: 1.6vw;
|
||
margin: 0.8vw auto 0;
|
||
padding: 1.8vw 1.6vw;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
>view {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
|
||
&:nth-child(1) {
|
||
text {
|
||
|
||
&:nth-child(2),
|
||
&:nth-child(3) {
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #888888;
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
font-weight: bold;
|
||
font-size: 1.5vw;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
.c {
|
||
color: #FF6600 !important;
|
||
}
|
||
|
||
.l {
|
||
color: #0076D6 !important;
|
||
}
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #888888;
|
||
text-align: right;
|
||
|
||
&:nth-child(2) {
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #333333;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.select {
|
||
width: 100%;
|
||
height: 7vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
padding: 1vw 0 0 1.5vw;
|
||
|
||
>view {
|
||
display: flex;
|
||
margin-left: 1.5vw;
|
||
&:nth-child(2) {
|
||
justify-content: space-between;
|
||
|
||
text {
|
||
font-weight: 400;
|
||
font-size: 1.5vw;
|
||
color: #555555;
|
||
}
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
justify-content: flex-end;
|
||
|
||
view {
|
||
min-width: 5vw;
|
||
height: 2.6vw;
|
||
border-radius: 1.3vw;
|
||
border: 1px solid #DCDCDC;
|
||
padding: 0 1.4vw;
|
||
align-items: center;
|
||
display: flex;
|
||
align-items: center;
|
||
margin: 0 0.5vw;
|
||
|
||
image {
|
||
width: 0.7vw;
|
||
height: 0.5vw;
|
||
margin-left: 0.4vw;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.shopcont {
|
||
width: 100%;
|
||
height: 10vw;
|
||
background: rgba(236, 237, 239, 0.3);
|
||
border-bottom: 1px solid #DCDCDC;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.cont {
|
||
width: 26vw;
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
position: relative;
|
||
padding: 2vw 0;
|
||
|
||
view {
|
||
&:nth-child(4) {
|
||
width: 5vw;
|
||
height: 5vw;
|
||
background: rgba(236, 237, 239, 1);
|
||
border-radius: 1.4vw;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
font-weight: 400;
|
||
font-size: 1vw;
|
||
position: absolute;
|
||
color: #888888;
|
||
top: 2.5vw;
|
||
right: 1.8vw;
|
||
padding: 0.5vw 0;
|
||
|
||
text {
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #555555;
|
||
}
|
||
}
|
||
|
||
&:nth-child(2),
|
||
&:nth-child(3) {
|
||
font-weight: 400;
|
||
font-size: 1.1vw;
|
||
color: #888888;
|
||
}
|
||
|
||
&:nth-child(1) {
|
||
font-weight: bold;
|
||
font-size: 1.4vw;
|
||
color: #212327;
|
||
}
|
||
}
|
||
}
|
||
|
||
.img {
|
||
width: 10vw;
|
||
height: 9vw;
|
||
}
|
||
}
|
||
}
|
||
</style>
|