268 lines
5.5 KiB
Vue
268 lines
5.5 KiB
Vue
<template>
|
||
<view class="all-bgc">
|
||
<view class="topcard">
|
||
<!-- <text>盘点单号：101P20251012001</text> -->
|
||
</view>
|
||
<view class="tablist">
|
||
<view class="lefts">
|
||
<view class="pddl">盘点单</view>
|
||
<view class="pdh">101P20251012001</view>
|
||
<view class="nms">梁嘉豪 | 2025.10.12</view>
|
||
<view class="shypk">
|
||
生活用品库
|
||
</view>
|
||
</view>
|
||
<view class="rith">
|
||
<view class="left-selecttype">
|
||
<view :class="selectType===index?`selecttype-target`: `selecttype`"
|
||
v-for="(item,index) in ['全部','已盘点','未盘点','盘盈','盘亏']" @click="changetype(index)">
|
||
{{ item }}
|
||
</view>
|
||
<view class="heng-blue" :style="{ left: `${selectType === 0 ? 11.5 : 10.6 + selectType * 19}%` }">
|
||
</view>
|
||
</view>
|
||
<view class="pdbt">盘点中</view>
|
||
<view class="pdbt">已完成</view>
|
||
</view>
|
||
|
||
</view>
|
||
<view class="list">
|
||
<toryitem></toryitem>
|
||
</view>
|
||
<view class="submit">
|
||
<view>取消盘点</view>
|
||
<view>提交盘点单</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
|
||
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
|
||
import { queryQld } from './api/lunpan.js'
|
||
import toryitem from './common/toryitem.vue'
|
||
const leftscrolltop = ref(0)
|
||
|
||
const selectType = ref(0)
|
||
const changetype = (index : number) => {
|
||
if ((selectType.value == index) && index) {
|
||
return
|
||
}
|
||
leftscrolltop.value = 1
|
||
setTimeout(() => {
|
||
leftscrolltop.value = 0
|
||
}, 50)
|
||
selectType.value = index
|
||
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.pdbt{
|
||
width: 7.1vw;
|
||
height: 3.2vw;
|
||
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
|
||
border-radius: 1.6vw;
|
||
border: 1px solid rgba(3,133,250,0.34);
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #1083F8;
|
||
margin-left: 0.7vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
.submit{
|
||
width: 100%;
|
||
height: 3.2vw;
|
||
margin-top: 0.4vw;
|
||
padding-right: 2vw;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
view{
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
&:nth-child(1){
|
||
width: 8.7vw;
|
||
height: 3.2vw;
|
||
background: #F8F8F8;
|
||
border-radius: 1.6vw;
|
||
border: 1px solid #E5E5E5;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #555555;
|
||
}
|
||
&:nth-child(2){
|
||
width: 10.2vw;
|
||
height: 3.2vw;
|
||
background: linear-gradient(0deg, #CAE0F9, #E9F4FF);
|
||
border-radius: 1.6vw;
|
||
border: 1px solid rgba(3,133,250,0.34);
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #1083F8;
|
||
margin-left: 0.7vw;
|
||
}
|
||
}
|
||
}
|
||
.list{
|
||
width: 100vw;
|
||
height: 50vw;
|
||
margin: 0.8vw auto 0;
|
||
padding:0 0 0 2vw;
|
||
overflow: hidden;
|
||
}
|
||
.tablist{
|
||
width: 100vw;
|
||
height: 3.3vw;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding:0 2vw;
|
||
margin-top: -3.3vw;
|
||
.rith{
|
||
.left-selecttype {
|
||
width: 30vw;
|
||
height: 70rpx;
|
||
border-radius: 40rpx;
|
||
// background-color: #FFFFFF;
|
||
display: flex;
|
||
padding-right: 30rpx;
|
||
padding-left: 15rpx;
|
||
position: relative;
|
||
|
||
|
||
.heng-blue {
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 25rpx;
|
||
height: 8rpx;
|
||
border-radius: 10rpx;
|
||
background-color: #1083F8;
|
||
transition: 0.3s all ease;
|
||
|
||
}
|
||
|
||
.selecttype {
|
||
width: 20%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #999999;
|
||
font-size: 31rpx;
|
||
position: relative;
|
||
|
||
}
|
||
|
||
.selecttype-target {
|
||
width: 20%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #222222;
|
||
font-size: 31rpx;
|
||
font-weight: 600;
|
||
position: relative;
|
||
}
|
||
}
|
||
}
|
||
.lefts{
|
||
height: 100%;
|
||
align-items: center;
|
||
.shypk{
|
||
width: 7.5vw;
|
||
height: 2.3vw;
|
||
background: #DFEFFF;
|
||
border-radius: 0.5vw;
|
||
border: 1px solid #C7D2E4;
|
||
font-weight: 400;
|
||
font-size: 1.2vw;
|
||
color: #1083F8;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 0.9vw;
|
||
}
|
||
.nms{
|
||
font-weight: 400;
|
||
font-size: 1.3vw;
|
||
color: #222222;
|
||
margin-left: 1.3vw;
|
||
|
||
}
|
||
.pdh{
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #222222;
|
||
margin-left: 0.7vw;
|
||
}
|
||
.pddl{
|
||
width: 5.7vw;
|
||
height: 2.2vw;
|
||
background: #DADADA;
|
||
border-radius: 0.5vw;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #555555;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
}
|
||
>view{
|
||
width: 50%;
|
||
display: flex;
|
||
&:nth-child(2){
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
}
|
||
.topcard{
|
||
width: 100vw;
|
||
height: 3.3vw;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
padding:0 2vw;
|
||
text{
|
||
font-weight: bold;
|
||
font-size: 1.8vw;
|
||
color: #222222;
|
||
}
|
||
view{
|
||
width: 7.3vw;
|
||
height: 3.3vw;
|
||
background: #FFFFFF;
|
||
position: absolute;
|
||
right: 2vw;
|
||
top: 0;
|
||
border-radius: 1.65vw;
|
||
border: 1px solid #D9DADC;
|
||
font-weight: 400;
|
||
font-size: 1.4vw;
|
||
color: #222;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0 0 0 0.7vw;
|
||
color: #555555;
|
||
|
||
image {
|
||
width: 1.5vw;
|
||
height: 1.5vw;
|
||
margin: 0 0.2vw 0 0;
|
||
}
|
||
}
|
||
}
|
||
.all-bgc {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background-color: rgb(239, 240, 244);
|
||
padding-top: 4.5vh;
|
||
}
|
||
</style> |