hldy_app_mini/pages/procurement/inventory.vue

1862 lines
43 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="all-bgc">
<view class="buttons-father">
<view class="ipt">
<input type="text" v-model="plzinfo.searchContent" placeholder="盘点单号/盘点人/盘点日期"
@confirm="clickconfirm" />
</view>
<view class="scr" @click="clickconfirm">
检索
</view>
<view :class="openselect?`shx-target`:`shx`" @click="openselect = true">
<image :src="`/static/index/purchaseorder/select${openselect?`target`:``}.png`" mode="aspectFill">
</image>
<view class="shx-font">
筛选
</view>
</view>
<view class="shx" @click="chongzhi">
<image src="/static/index/requestform/chongzhi.png" mode="aspectFill"></image>
<view class="shx-font">
重置
</view>
</view>
<!-- <view class="right-button" @click="badshow=true" v-show="plsbuy[lefttarget]?.status==`1`">
<image src="/static/index/warehouse/procurement/picking/bebad.png" />
<view>
作废
</view>
</view> -->
<view class="right-buttons" @click="startselect()">
<!-- <view :class="manyselect?`right-button-blue`:`right-button-white`"
v-show="plsbuy[lefttarget]?.status==`1`">
<image :src="`/static/index/warehouse/procurement/picking/piliang${manyselect?`target`:``}.png`" />
<view>
批量选择
</view>
</view> -->
<view class="left-selecttype">
<view :class="selectType===index?`selecttype-target`: `selecttype`"
v-for="(item,index) in tagsarray" @click="changetype(index)">
{{ item }}
</view>
<view class="heng-blue" :style="{ left: `${selectType === 0 ? 18 : 18 + selectType * 30}%` }">
</view>
</view>
<view class="right-button">
<image src="/static/index/requestform/addnew.png" />
<view>
新增
</view>
</view>
<view class="contain-right-button" @click="goback">
<image class="buttont-img" style="margin-top: 4rpx;" src="/static/index/purchaseorder/back.png" />
<view class="button-font">
返回
</view>
</view>
</view>
<nomessage cont="暂无数据" :show="nomessageshow" />
<view class="zhedang" v-if="nomessageshow"></view>
</view>
<tanchuang :show="badshow" font="确定要回退这个请领单吗" @back="badshow=false;" @right="huitui"> </tanchuang>
<tanchuang :show="chukushow" font="确定要出库吗" @back="chukushow=false;" @right="chukuclick"> </tanchuang>
<view class="all-contain" v-show=" !nomessageshow">
<scroll-view scroll-y="true" scroll-with-animation class="all-scroll" :scroll-top="leftscrolltop"
:lower-threshold="200">
<view class="scroll-items">
<view class="scroll-item" v-for="(item,index) in [1,1,1,1,1,1,1,1,1,1,1,1,1]" :key="index">
<view class="scroll-item-title">
<view class="scroll-title-left">
<view class="title-font">
101P20251020001
</view>
<view class="title-success" v-if="index>3">
盘盈
</view>
<view class="title-error" v-if="index<5 && index">
盘亏
</view>
</view>
<view class="scroll-title-right">
{{ index?`已完成`:`盘点中` }}
</view>
</view>
<view class="scroll-item-contect">
<view class="middle-heng"></view>
<view class="contect-one">
<view class="contect-title">
2025.10.03
</view>
<view class="middle-heng-father">
<!-- <view class="middle-ball"></view> -->
<image class="middle-ball-img" src="/static/index/requestform/isok.png" />
</view>
<view class="end-font">
<view>
{{ `盘点中`}}
</view>
<view style="color: #888888;">
{{ `[ 王嘉尔 ]` }}
</view>
</view>
</view>
<view class="contect-one">
<view class="contect-title">
{{ index?`2025.10.03`: ``}}
</view>
<view class="middle-heng-father">
<view class="middle-ball" v-if="!index" style="background-color: #EEEEEE;"></view>
<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
</view>
<view class="end-font">
<view>
盘点结束
</view>
<view style="color: #888888;">
{{ index?`[ 王嘉尔 ]`: `` }}
</view>
</view>
</view>
</view>
<view class="scroll-item-end">
<image class="title-imge" src="/static/home.png" mode="aspectFit"></image>
<view class="title-font">
生活用品库
</view>
</view>
</view>
</view>
</scroll-view>
<!-- <view class="other-contain-left">
<view class="left-selecttype">
<view :class="selectType===index?`selecttype-target`: `selecttype`"
v-for="(item,index) in tagsarray" @click="changetype(index)">
{{ item }}
</view>
<view class="heng-blue" :style="{ left: `${selectType === 0 ? 14 : 13.5 + selectType * 23.5}%` }">
</view>
</view>
<scroll-view scroll-y="true" scroll-with-animation class="left-menu-scroll" :scroll-top="leftscrolltop"
@scrolltolower="plsbuytolower" :lower-threshold="200">
<view style="height: 1%;"></view>
<view class="pls-card" v-for="(v,i) in plsbuy" :key='i' @click="clickLeftMenu(i,v)"
:style="{borderColor: manyselect ? (selectarray.includes(v.qldNo) ? '' : 'transparent'): (i === lefttarget ? '' : 'transparent'),background: manyselect ? (selectarray.includes(v.qldNo) ? '' : 'rgba(255,255,255,0.6)') : (i === lefttarget ? '' : 'rgba(255,255,255,0.6)')}">
<view
style="background: #ff5757;position: absolute;width: 1.3vw;height: 1.3vw;border-radius: 50%;right: -0.5vw;top: -0.2vw;"
v-if="v.izYgRead=='N'">
</view>
<view class="pls-card-title">
<view class="middle-title-spec">
请领单号
</view>
<view class="title-left">
{{ v.qldNo }}
</view>
</view>
<view class="pls-card-middle">
<view class="middle-heng"></view>
<view class="pls-card-middle-one">
<view class="middle-title">
{{ v.tjTime.replace(/-/g, '.') }}
</view>
<view class="middle-heng-father">
<image class="middle-ball-img" src="/static/index/requestform/isok.png" />
</view>
<view class="end-font">
<view>
待出库
</view>
<view style="font-size: 25rpx;">
{{ "[ " + v.tjByName + " ]" }}
</view>
</view>
</view>
<view class="pls-card-middle-one">
<view class="middle-title"
:style=" v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
{{
Number(v.status)>1?
v?.status === '2'
? v.zfTime?.slice(0,10).replace(/-/g, '.')
: v?.status === '3'
? v.htTime?.slice(0,10).replace(/-/g, '.')
: v.ckTime?.slice(0,10).replace(/-/g, '.')
: ""
}}
</view>
<view class="middle-heng-father">
<image class="middle-ball-img" style="width: 32rpx;height: 32rpx;"
v-if="v?.status === '2' || v?.status === '3'"
src="/static/index/requestform/iserror.png" />
<view class="middle-ball" style="background-color: #1083F8;"
v-else-if="Number(v.status)==1">
</view>
<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
</view>
<view class="end-font">
<view :style="v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
{{
v?.status === '2'
? `已作废`
: v?.status === '3'
? `已回退`
: `已出库`
}}
</view>
<view style="font-size: 25rpx;" v-if="Number(v.status)>1"
:style=" v?.status === '2' || v?.status === '3' ?{color:`#FF5757`}:{}">
{{ "[ " + (v?.status === '2'
? v?.zfByName
: v?.status === '3'
? v?.htByName
: v?.ckByName)+ " ]" }}
</view>
</view>
</view>
<view class="pls-card-middle-one">
<view class="middle-title">
{{ Number(v.status)==5 ? v.shTime?.slice(0,10).replace(/-/g, '.') :""}}
</view>
<view class="middle-heng-father">
<view class="middle-ball"
:style="Number(v.status)<4?{backgroundColor: `#E5E5E5`}:{}"
v-if="Number(v.status)!=5"></view>
<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
</view>
<view class="end-font">
<view v-if="v?.cgdType!='9'">
已收货
</view>
<view style="font-size: 25rpx;" v-if="Number(v.status)==5">
{{ "[ " + v.shByName + " ]" }}
</view>
</view>
</view>
</view>
<view class="pls-card-end">
<view class="end-left">
<image class="end-left-img" src="/static/index/requestform/gongyingshang.png" />
<view class="end-left-font">
{{ v.nuName }}
</view>
</view>
<view :class="v?.status === '2' || v?.status === '3' ?`tag-fail`:`tag-success`">
{{ v.statusText }}
</view>
</view>
</view>
</scroll-view>
</view> -->
<!-- <view class="other-contain-right">
<scroll-view scroll-y="true" scroll-with-animation class="right-contain">
<view class="right-ones">
<view class="right-one" v-for="(item,index) in rightarray" :key="index">
<view class="right-one-left">
<image class="left-image"
:src="item.materialInfo.materialImg?serverUrl+item.materialInfo.materialImg:'/static/index/procurement/k.png'"
mode="aspectFill"></image>
<view class="left-tages" style="margin-top: -15rpx;">
{{ item.materialInfo.categoryName}}
</view>
<view class="left-tages">
{{ item.materialInfo.typeName}}
</view>
</view>
<view class="right-one-right">
<view class="right-title">
{{ item.materialInfo.materialName }}
</view>
<view class="right-setting">
规格型号
</view>
<view class="right-mm">
{{ item.materialInfo.materialNo }}
</view>
<view class="right-down">
<view class="">
<view class="right-first-num">
{{ item.qlNum }}
</view>
<view class="right-first-type">
请领数量
</view>
</view>
<view class="right-shu"></view>
<view class="">
<view class="right-first-num" style="font-weight: 500;">
{{ item.materialInfo.materialUnits }}
</view>
<view class="right-first-type">
请领单位
</view>
</view>
</view>
</view>
</view>
</view>
<defaultr cont="暂无数据" v-if="rightarray.length==0 && rightdonghua"
style="width: 30%;height: 30%;position: absolute;">
</defaultr>
</scroll-view>
<view class="bottom-buttons" v-show="plsbuy[lefttarget]?.status==`1`">
<view class="button-blue" @click="chukushow=true">
出库
</view>
</view>
</view> -->
</view>
<view v-show="openselect" class="mengban" @click="openselect=false"></view>
<view class="left-select-more" v-show="openselect" @click="opendata=false">
<view class="more-bottom">
<view class="bottom-left" @click="chongzhi">
重置
</view>
<view class="bottom-right" @click="openselect=false">
确定
<text style="font-size: 25rpx;margin-top: 5rpx;" v-if="alltotal">
{{ alltotal }}采购单)
</text>
</view>
</view>
<view class="more-title">
盘点状态
</view>
<view class="more-statues-father">
<view :class="plzinfo.cgdType==`0,1`?`more-statues-button-target`:`more-statues-button`"
@click="plzinfo.cgdType=`0,1`;">
全部
</view>
<view :class="plzinfo.cgdType==`0`?`more-statues-button-target`:`more-statues-button`"
@click="plzinfo.cgdType=`0`;">
盘点中
</view>
<view :class="plzinfo.cgdType==`1`?`more-statues-button-target`:`more-statues-button`"
@click="plzinfo.cgdType=`1`;">
已完成
</view>
</view>
<view class="more-select" style="margin-top: 10rpx;">
盘点单号
</view>
<view class="more-time-select">
<input class="more-gray" placeholder="请输入采购人" placeholder-style="color: #BFBFBF;"
style="margin-left: 30rpx;width: 400rpx;"></input>
<image class="select-img" src="/static/index/warehouse/procurement/picking/center.png" />
</view>
<view class="more-select">
盘点人
</view>
<view class="more-time-select">
<input class="more-gray" placeholder="请输入供应商" placeholder-style="color: #BFBFBF;"
style="margin-left: 30rpx;width: 400rpx;"></input>
<image class="select-img" src="/static/index/warehouse/procurement/picking/center.png" />
</view>
<view class="more-time">
盘点日期
</view>
<view class="more-time-select" @click.stop="opendata=!opendata">
<view class="more-gray" v-show="!plzinfo.startTime">
开始日期
</view>
<view class="more-black" v-show="plzinfo.startTime">
{{ plzinfo.startTime }}
</view>
<view style="font-size: 32rpx;margin-left: 10rpx;">
</view>
<view class="more-gray" v-show="!plzinfo.endTime">
结束日期
</view>
<view class="more-black" v-show="plzinfo.endTime">
{{ plzinfo.endTime }}
</view>
<image class="more-img" src="/static/index/warehouse/procurement/picking/data.png" />
</view>
<view class="more-select">
盘盈/盘亏
</view>
<view class="selected">
<view class="selected-item" @click="plzinfo.get=!plzinfo.get">
<view class="selected-kuai" v-if="!plzinfo.get">
</view>
<view class="selected-kuai-target" v-else >
</view>
<view class="">
盘盈单
</view>
</view>
<view class="selected-item" @click="plzinfo.lose=!plzinfo.lose">
<view class="selected-kuai" v-if="!plzinfo.lose">
</view>
<view class="selected-kuai-target" v-else >
</view>
<view class="">
盘亏单
</view>
</view>
</view>
</view>
</view>
<!-- 日期 -->
<view class="calendar-father" v-show="opendata" v-if="xiaohui">
<calendar @datachange="dateget" />
</view>
<view
v-show="opendata"
class="mengban"
style="background: transparent;"
@click="opendata=false;">
</view>
<errorshow :show="openerror" font="注意:只能选择待出库的请领单" @close="openerror=false" />
<errorshow :show="qinglingshow" font="注意:批量选择模式请选择一项或以上的请领单" @close="qinglingshow=false" />
</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, queryQldWlInfo, newtransRead, orderReturn, outbound } from './api/lunpan.js'
import nomessage from './components/nomessage.vue'
import defaultr from './components/default.vue'
import calendar from '@/component/public/calendar.vue'
// const props = defineProps({
// isShow: {
// type: Boolean,
// required: true,
// },
// });
const xiaohui = ref(true);
const shaixuan = ref(false);
const opendata = ref(false);
const openselect = ref(false);
const manyselect = ref(false);
const tagsarray = ref(["全部", "盘点中", "已完成"])
// const nottrue = Array(10).fill(null)
// 使用watch监听isShow变化
const transition = ref(false);
// watch(
// () => props.isShow,
// (newVal, oldVal) => {
// // 当旧值为false新值为true时延迟0.2秒调用方法
// if (!oldVal && newVal) {
// transition.value = false;
// firstgetqueryCgdList();
// setTimeout(() => {
// transition.value = true;
// }, 50)
// } else {
// transition.value = false;
// }
// }
// )
onMounted(() => {
firstgetqueryCgdList();
})
type datetype = {
start : string,
end : string
}
const dateget = (res : datetype) => {
plzinfo.startTime = res.start;
plzinfo.endTime = res.end;
}
const lanjie = ref(false);
const selectType = ref(0)
const changetype = (index : number) => {
if ((selectType.value == index) && index) {
return
}
leftscrolltop.value = 1
setTimeout(() => {
leftscrolltop.value = 0
}, 50)
lefttarget.value = 0
selectType.value = index
plzinfo.pageNo = 1;
plzinfo.canpull = true;
switch (index) {
case 0:
plzinfo.status = `1,4,5`
break
case 1:
plzinfo.status = `1`
break
case 2:
plzinfo.status = `4`
break
case 3:
plzinfo.status = `5`
break
}
firstgetqueryCgdList()
}
const clickconfirm = () => {
if (chongzhiLock) return
chongzhiLock = true
plzinfo.pageNo = 1;
plzinfo.canpull = true;
lefttarget.value = 0
firstgetqueryCgdList()
leftscrolltop.value = 1
setTimeout(() => {
leftscrolltop.value = 0
}, 10)
setTimeout(() => chongzhiLock = false, 500)
}
let chongzhiLock = false
const chongzhi = () => {
if (chongzhiLock) return
chongzhiLock = true
xiaohui.value = false;
plzinfo.searchContent = ""
plzinfo.startTime = ""
plzinfo.endTime = ""
plzinfo.get = false
plzinfo.lose = false
changetype(0)
firstgetqueryCgdList()
setTimeout(() => {
chongzhiLock = false;
xiaohui.value = true
}, 500)
}
const plsbuy = ref([])
const alltotal = ref(0);
const lefttarget = ref(0)
const plzinfo = reactive({
pageNo: 1,
pageSize: 5,
canpull: true,
searchContent: "",
status: "1,4,5",
cgdType: "0,1",
startTime: "",
endTime: "",
get:false,
lose:false
})
const nomessageshow = ref(false);
const leftscrolltop = ref(0)
const rightarray = ref([]);
// 检测锁
const cannomessage = ref(true)
const rightdonghua = ref(true);
const firstgetqueryCgdList = () => {
queryQld(plzinfo).then((res : any) => {
transition.value = true;
// console.log("kankan", plzinfo, res)
if (((res.message === "缺少参数") || (!res.result?.total)) && cannomessage.value) {
nomessageshow.value = true;
return
}
cannomessage.value = false
plsbuy.value = []
plsbuy.value.push(...res.result.records)
alltotal.value = res.result.total
if (res.result.records.length) {
rightdonghua.value = false;
queryQldWlInfo({ qldNo: res.result.records[0].qldNo }).then((element : any) => {
rightarray.value = []
rightarray.value.push(...element.result)
rightdonghua.value = true;
})
}
if (res.result.records.length < plzinfo.pageSize) {
plzinfo.canpull = false;
}
})
}
const setout = ref(true)
let times = null
const plsbuytolower = () => {
if (!setout.value) { return }
plzinfo.pageNo++;
getqueryCgdList()
setout.value = false
times = setTimeout(() => {
setout.value = true
}, 500)
}
//获得采购单列表
const getqueryCgdList = () => {
if (!plzinfo.canpull) return
queryQld(plzinfo).then((res : any) => {
// console.log("???加载", res.result.records)
plsbuy.value.push(...res.result.records)
alltotal.value = res.result.total
if (res.result.records.length < plzinfo.pageSize) {
plzinfo.canpull = false;
}
})
}
const openerror = ref(false)
const clickLeftMenu = (index : any, item : any) => {
let num = Math.ceil((index + 1))
leftscrolltop.value = (num - 2) * 175.4;
if (item.izYgRead == 'N') {
let param = {
status: `yg`,
qldNo: plsbuy.value[index].qldNo,
}
newtransRead(param).then((res : any) => {
if (res.success) {
item.izYgRead = 'Y'
}
})
}
if (manyselect.value) {
if (item.status == `1`) {
if (selectarray.value.includes(item.qldNo)) {
// 删除
selectarray.value = selectarray.value.filter(v => v !== item.qldNo)
} else {
// 加入
selectarray.value.push(item.qldNo)
}
} else {
openerror.value = true
}
return
}
lefttarget.value = index;
rightdonghua.value = false;
queryQldWlInfo({ qldNo: plsbuy.value[index].qldNo }).then((element : any) => {
rightarray.value = [];
rightarray.value.push(...element.result)
rightdonghua.value = true;
})
// form.cgdId = plsbuy.value[index].id
// form.pageNo = 1
// form.canpull = true;
// // console.log("!!!!",form)
// queryCgdInfoList(form).then(res => {
// InvoicingList.value = []
// // console.log("数据呢", res.result.records)
// InvoicingList.value.push(...res.result.records);
// if (form.pageNo) {
// clickmiddle(0);
// }
// })
}
const serverUrl = ref("")
onLoad(() => {
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
})
const badshow = ref(false)
const huitui = () => {
orderReturn({ qldNo: plsbuy.value[lefttarget.value].qldNo }).then((res : any) => {
// console.log('回退', res)
badshow.value = false
if (res.success) {
plsbuy.value[lefttarget.value] = res.result.result
} else {
plzinfo.pageNo = 1;
plzinfo.canpull = true;
leftscrolltop.value = 1
setTimeout(() => {
leftscrolltop.value = 0
}, 50)
lefttarget.value = 0
firstgetqueryCgdList();
}
setTimeout(() => {
uni.showToast({
title: res.success ? res.result.message : res.message,
icon: 'none', // 'none' 表示不带图标
duration: 3000
})
}, 300)
})
}
// const shouhuoshow = ref(false)
// const shouhuo = () => {
// // let param = {
// // qldNo: plsbuy.value[lefttarget.value].qldNo,
// // elderId: uni.getStorageSync('NUall').elderId,
// // nuId: uni.getStorageSync('nuId')
// // }
// // confirmReceipt(param).then((res : any) => {
// // console.log('收货', param, res)
// // shouhuoshow.value = false
// // if (res.success) {
// // plsbuy.value[lefttarget.value] = res.result.result
// // } else {
// // plzinfo.pageNo = 1;
// // leftscrolltop.value = 1
// // setTimeout(() => {
// // leftscrolltop.value = 0
// // }, 50)
// // lefttarget.value = 0
// // plzinfo.canpull = true;
// // firstgetqueryCgdList();
// // }
// // setTimeout(() => {
// // uni.showToast({
// // title: res.success ? res.result.message : res.message,
// // icon: 'none', // 'none' 表示不带图标
// // duration: 3000
// // })
// // }, 300)
// // })
// }
const goback = () => {
uni.navigateBack()
}
const selectarray = ref([]);
const startselect = () => {
selectarray.value = [];
manyselect.value = !manyselect.value
if (!manyselect.value) {
lefttarget.value = 0
}
}
// const quxiao = () => {
// selectarray.value = [];
// manyselect.value = false;
// }
const chukushow = ref(false);
const qinglingshow = ref(false)
const chukuclick = () => {
if (manyselect.value && !selectarray.value.length) {
qinglingshow.value = true
return
}
outbound({ qldNo: manyselect.value ? selectarray.value.join(',') : plsbuy.value[lefttarget.value].qldNo }).then((res : any) => {
selectarray.value = [];
manyselect.value = false
chukushow.value = false
plzinfo.pageNo = 1;
lefttarget.value = 0
plzinfo.canpull = true;
leftscrolltop.value = 1
setTimeout(() => {
leftscrolltop.value = 0
}, 50)
lefttarget.value = 0
firstgetqueryCgdList();
setTimeout(() => {
uni.showToast({
title: res.success ? res.result.message : res.message,
icon: 'none', // 'none' 表示不带图标
duration: 3000
})
}, 300)
})
}
</script>
<style scoped lang="less">
.all-bgc {
background-color: rgb(239, 240, 244);
// padding: 2vw;
padding-left: 2vw;
padding-top: 5.5vh;
}
.right-container-tem {
display: flex;
.right-container-tem-text {
font-size: 30rpx;
margin-right: 20rpx;
}
.right-container-tem-img {
width: 38rpx;
height: 38rpx;
}
}
.buttons-father {
width: 100%;
height: 7.5vh;
// transition: opacity 1s ease;
display: flex;
position: relative;
// background-color: rgb(239, 240, 244);
// padding-top: 5vh;
.ipt {
display: flex;
align-items: center;
width: 20vw;
background: #E2E4E9;
border-radius: 1.65vw;
height: 3.3vw;
image {
width: 2.2vw;
height: 2.2vw;
margin: 0 0.5vw;
}
input {
width: 18vw;
height: 3.5vw;
font-size: 1.4vw;
padding-left: 1.6vw;
}
}
.scr {
border-radius: 1.65vw;
font-weight: 400;
font-size: 1.4vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 0.7vw;
background-color: #fff;
border: 1px solid #D9DADC;
color: #555555;
width: 6.5vw;
height: 3.3vw;
}
.shx {
width: 6.5vw;
height: 3.3vw;
background-color: #fff;
border-radius: 1.65vw;
border: 1px solid #D9DADC;
font-weight: 400;
font-size: 1.4vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 0.5vw;
color: #555555;
image {
width: 1.5vw;
height: 1.5vw;
margin: 0 0.2vw 0 0;
}
}
.right-button {
width: 7vw;
height: 3.3vw;
background-color: #fff;
border-radius: 1.65vw;
border: 1px solid #D9DADC;
font-weight: 400;
font-size: 1.4vw;
display: flex;
justify-content: center;
align-items: center;
color: #555555;
image {
width: 1.5vw;
height: 1.5vw;
margin: 0.1vw 0.2vw 0 0;
}
}
.right-button-white {
width: 10vw;
height: 3.3vw;
background-color: #fff;
border-radius: 1.65vw;
border: 1px solid #D9DADC;
font-weight: 400;
font-size: 1.4vw;
display: flex;
justify-content: center;
align-items: center;
color: #555555;
margin-right: 15rpx;
image {
width: 1.5vw;
height: 1.5vw;
margin: 0.1vw 0.2vw 0 0;
}
}
.right-button-blue {
width: 10vw;
height: 3.3vw;
background-color: #fff;
border-radius: 1.65vw;
border: 1px solid #1083F8;
font-weight: 400;
font-size: 1.4vw;
display: flex;
justify-content: center;
align-items: center;
color: #1083F8;
margin-right: 15rpx;
image {
width: 1.5vw;
height: 1.5vw;
margin: 0.1vw 0.2vw 0 0;
}
}
.shx-target {
width: 6.5vw;
height: 3.3vw;
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
border: 1rpx solid #1083F8;
border-radius: 1.65vw;
font-weight: 400;
font-size: 1.4vw;
display: flex;
justify-content: center;
align-items: center;
margin: 0 0 0 0.5vw;
color: #1083F8;
image {
width: 1.5vw;
height: 1.5vw;
margin: 0 0.2vw 0 0;
}
}
.right-button:active,
.scr:active,
.shx:active {
color: #1083F8;
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
border: 1rpx solid #1083F8;
transition: .4s;
-webkit-transform-style: preserve-3d;
-webkit-overflow-scrolling: touch;
}
}
.other-contain {
width: 100%;
height: 87vh;
display: flex;
// background-color: rgb(239, 240, 244);
// transition: opacity 1s ease;
.other-contain-left {
width: 32%;
height: 100%;
.left-menu-scroll {
margin-top: 3%;
height: 91%;
width: 100%;
// position: relative;
// overflow: auto;
// background-color: red;
.pls-card {
width: 98%;
height: 25.3vh;
border: #0f9fff 3rpx solid;
background-color: #fff;
border-radius: 40rpx;
margin-bottom: 1.5vh;
// margin: 1vh 0;
padding: 0 30rpx;
position: relative;
.pls-card-title {
height: 5.5vh;
width: 105%;
display: flex;
justify-content: space-between;
align-items: flex-end;
padding-left: 10rpx;
padding-right: 35rpx;
.middle-title-spec {
color: #888888;
font-size: 29rpx;
}
.title-left {
font-weight: 600;
font-size: 34rpx;
// color: #888888;
}
.title-right {
display: flex;
align-items: flex-end;
font-size: 30rpx;
position: relative;
.title-right-big {
font-weight: 600;
font-size: 40rpx;
margin-right: 35rpx;
color: #555555;
}
.title-right-img {
position: absolute;
right: -10rpx;
bottom: 6rpx;
width: 40rpx;
height: 40rpx;
}
}
}
.pls-card-middle {
width: 100%;
height: 11vh;
margin-top: 1.5vh;
display: flex;
position: relative;
.middle-heng {
position: absolute;
left: 4%;
top: 34%;
transform: translateY(-35%);
width: 92%;
height: 2px;
/* 虚线粗细 */
background-image: repeating-linear-gradient(to right,
#E5E5E5 0,
#E5E5E5 6px,
transparent 6px,
transparent 10px);
}
.pls-card-middle-one {
width: 33.3%;
height: 100%;
// background-color: yellow;
.middle-title {
width: 100%;
height: 2.1vh;
// background-color: #007CFF;
color: #888888;
text-align: center;
font-size: 25rpx;
overflow: hidden;
}
.middle-heng-father {
width: 100%;
height: 4vh;
position: relative;
.middle-ball-img {
width: 35rpx;
height: 35rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.middle-ball {
width: 20rpx;
height: 20rpx;
background-color: #1083F8;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
}
.end-font {
width: 100%;
height: 6vh;
text-align: center;
color: #666666;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 25rpx;
}
}
}
.pls-card-end {
width: 100%;
height: 6vh;
display: flex;
justify-content: space-between;
position: relative;
padding-left: 15rpx;
margin-top: 10rpx;
.end-left {
height: 100%;
display: flex;
align-items: center;
.end-left-img {
width: 35rpx;
height: 35rpx;
}
.end-left-font {
margin-top: 3rpx;
width: 400rpx;
// background-color: #007CFF;
// font-size: 26rpx;
color: #666666;
margin-left: 3rpx;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
}
.tag-fail {
width: 120rpx;
height: 50rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FDEBEC;
color: #FF5757;
border: 1rpx solid #FF5757;
position: absolute;
right: 0rpx;
bottom: 20rpx;
}
.tag-success {
width: 120rpx;
height: 50rpx;
border-radius: 30rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #ECF6FF;
color: #1083F8;
border: 1rpx solid #1083F8;
position: absolute;
right: 0rpx;
bottom: 20rpx;
}
}
}
}
}
.other-contain-right {
width: 65%;
margin-left: 1%;
height: 98%;
background-color: #fff;
border-radius: 40rpx;
position: relative;
.right-contain {
width: 100%;
height: 95%;
margin-top: 20rpx;
display: flex;
flex-wrap: wrap;
position: relative;
.right-ones {
display: flex;
width: 100%;
flex-wrap: wrap;
padding-left: 20rpx;
padding-bottom: 80rpx;
.right-one {
width: 630rpx;
height: 270rpx;
margin-left: 20rpx;
margin-top: 15rpx;
background-color: #F9F9F9;
border-radius: 30rpx;
display: flex;
.right-one-left {
height: 100%;
width: 40%;
display: flex;
flex-direction: column;
align-items: center;
.left-image {
width: 150rpx;
height: 150rpx;
// margin: 15rpx 0;
margin-top: 10rpx;
margin-bottom: 15rpx;
// margin-top: 5rpx;
}
.left-tages {
width: 130rpx;
height: 43rpx;
border-radius: 30rpx;
display: flex;
justify-content: center;
align-items: center;
color: #555555;
border: 1rpx solid #D2D2D2;
margin-top: 5rpx;
font-size: 23rpx;
}
}
.right-one-right {
height: 100%;
width: 60%;
.right-title {
font-size: 34rpx;
font-weight: 600;
margin-top: 25rpx;
color: #222222;
width: 300rpx;
overflow: hidden;
/* 必须 */
white-space: nowrap;
/* 强制单行 */
text-overflow: ellipsis;
/* 显示省略号 */
}
.right-setting {
color: #888888;
margin-top: 5rpx;
font-size: 25rpx;
}
.right-mm {
color: #555555;
font-size: 28rpx;
}
.right-down {
display: flex;
margin-top: 15rpx;
.right-first-num {
font-size: 35rpx;
color: #555555;
font-weight: 600;
}
.right-first-type {
color: #888888;
font-size: 23rpx;
}
.right-shu {
width: 2rpx;
height: 50rpx;
background-color: #C9C9C9;
margin: 0 40rpx;
margin-top: 10rpx;
}
}
}
}
}
}
}
}
.bottom-buttons {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 10%;
display: flex;
justify-content: flex-end;
align-items: center;
background-color: #fff;
border-radius: 40rpx;
}
.button-gray {
background-color: #f8f8f8;
color: #555555;
display: flex;
align-items: center;
justify-content: center;
color: #555555;
width: 180rpx;
height: 70rpx;
border-radius: 40rpx;
margin-right: 30rpx;
}
.button-blue {
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
border: 1rpx solid #1083F8;
color: #1083F8;
display: flex;
align-items: center;
justify-content: center;
width: 180rpx;
height: 70rpx;
border-radius: 40rpx;
margin-right: 60rpx;
}
.button-gray:active {
color: #1083F8;
background: linear-gradient(-45deg, rgba(223, 244, 252, 1), rgba(204, 228, 249, 0.43));
border: 1rpx solid #1083F8;
transition: .4s;
-webkit-transform-style: preserve-3d;
-webkit-overflow-scrolling: touch;
}
.right-buttons {
position: absolute;
right: 1.8vw;
top: 0;
display: flex;
.contain-right-button {
width: 7.3vw;
height: 3.3vw;
background: #FFFFFF;
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;
}
}
}
.zhedang {
position: fixed;
width: 50%;
right: 0;
top: 0;
height: 500rpx;
background-color: #fff;
}
.left-selecttype {
width: 450rpx;
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: 33.3%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #999999;
font-size: 31rpx;
position: relative;
}
.selecttype-target {
width: 33.3%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #222222;
font-size: 31rpx;
font-weight: 600;
position: relative;
}
}
.all-contain {
width: 100%;
height: 87vh;
.all-scroll {
width: 100%;
height: 100%;
// background-color: red;
.scroll-items {
width: 100%;
display: flex;
flex-wrap: wrap;
.scroll-item {
width: 31.95%;
margin-right: 1%;
margin-bottom: 1%;
height: 355rpx;
background-color: #fff;
border-radius: 30rpx;
// padding: 0 1%;
padding-left: 40rpx;
padding-right: 30rpx;
.scroll-item-title {
width: 100%;
height: 30%;
// background-color: red;
display: flex;
justify-content: space-between;
align-items: center;
.scroll-title-left {
font-weight: 600;
font-size: 32rpx;
color: #222;
margin-top: 10rpx;
display: flex;
.title-font {
margin-right: 10rpx;
}
.title-success {
width: 65rpx;
height: 40rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(3, 133, 250, 0.1);
font-size: 25rpx;
font-weight: 500;
color: #1083F8;
border: 2rpx solid #1083F8;
margin-left: 5rpx;
border-radius: 5rpx;
}
.title-error {
width: 65rpx;
height: 40rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: #FFF1F1;
font-size: 25rpx;
font-weight: 500;
color: #FF5757;
border: 2rpx solid #FF5757;
margin-left: 5rpx;
border-radius: 5rpx;
}
}
.scroll-title-right {
width: 130rpx;
height: 65rpx;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(3, 133, 250, 0.1);
border-radius: 40rpx;
color: #1083F8;
border: 1rpx solid #1083F8;
margin-top: 10rpx;
}
}
.scroll-item-contect {
width: 100%;
// height: 48%;
display: flex;
position: relative;
.middle-heng-father {
width: 100%;
height: 4vh;
position: relative;
.middle-ball-img {
width: 35rpx;
height: 35rpx;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.middle-ball {
width: 20rpx;
height: 20rpx;
background-color: #1083F8;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
}
}
.middle-heng {
position: absolute;
left: 3%;
top: 38.5%;
transform: translateY(-35%);
width: 92%;
height: 2px;
/* 虚线粗细 */
background-image: repeating-linear-gradient(to right,
#E5E5E5 0,
#E5E5E5 6px,
transparent 6px,
transparent 10px);
}
.contect-one {
width: 50%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
.contect-title {
color: #888888;
height: 35rpx;
font-size: 26rpx;
}
.end-font {
width: 100%;
// height: 6vh;
text-align: center;
color: #666666;
font-size: 25rpx;
// overflow: hidden;
// text-overflow: ellipsis;
// white-space: nowrap;
}
}
}
.scroll-item-end {
width: 100%;
display: flex;
justify-content: flex-end;
align-items: center;
margin-top: 15rpx;
.title-imge {
width: 1.8vw;
height: 1.8vw;
margin-right: 0.3vw;
}
.title-font {
font-size: 28rpx;
margin-right: 10rpx;
color: #555555;
margin-top: 8rpx;
}
}
}
}
}
}
.mengban {
width: 100vw;
height: 100vh;
position: fixed;
top: 0;
left: 0;
z-index: 100;
background: RGBA(239, 240, 244, 0.55);
}
.left-select-more {
position: absolute;
top: 12%;
left: 2%;
width: 31%;
height: 87%;
background-color: #fff;
border-radius: 30rpx;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
z-index: 9997;
padding: 0 50rpx;
.more-bottom {
position: absolute;
bottom: 60rpx;
right: 50rpx;
display: flex;
.bottom-left {
padding: 0 50rpx;
height: 80rpx;
color: #888888;
background-color: #F8F8FA;
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 32rpx;
margin-right: 12rpx;
}
.bottom-right {
padding: 0 50rpx;
height: 80rpx;
color: #0385FA;
border: 1rpx solid #0385FA;
// background-color: #F8F8FA;
background: linear-gradient(to bottom, #E9F4FF, #CAE0F9);
border-radius: 40rpx;
display: flex;
justify-content: center;
align-items: center;
font-size: 30rpx;
}
}
.more-title {
margin-top: 55rpx;
font-size: 30rpx;
}
.more-time {
margin-top: 30rpx;
font-size: 30rpx;
}
.more-select {
margin: 30rpx 0;
font-size: 30rpx;
}
.more-time-select {
margin-top: 30rpx;
width: 100%;
height: 7vh;
display: flex;
align-items: center;
background-color: #F8F8FA;
border-radius: 30rpx;
position: relative;
.more-gray {
color: #BFBFBF;
font-size: 30rpx;
width: 200rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20rpx;
}
.more-black {
font-size: 28rpx;
width: 200rpx;
display: flex;
justify-content: center;
align-items: center;
margin-left: 20rpx;
}
.more-img {
width: 35rpx;
height: 35rpx;
margin-left: 15rpx;
}
.select-img {
position: absolute;
right: 40rpx;
top: 50%;
transform: translateY(-50%);
width: 25rpx;
height: 18rpx;
}
}
.more-statues-father {
width: 103%;
height: 7vh;
margin-top: 30rpx;
display: flex;
margin-left: -10rpx;
// background-color: green;
justify-content: space-between;
// align-items: center;
.more-statues-gray {
color: #888888;
font-size: 28rpx;
}
.more-statues-button {
width: 30%;
// margin-right: 2%;
margin: 0 1%;
height: 5.5vh;
border-radius: 40rpx;
font-size: 28rpx;
background-color: #fff;
border: 1rpx solid #D9DADC;
color: #555555;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
.more-statues-button-target {
width: 30%;
margin: 0 1%;
height: 5.5vh;
border-radius: 40rpx;
font-size: 28rpx;
background-color: #fff;
border: 1rpx solid #0da6f8;
color: #0da6f8;
display: flex;
justify-content: center;
align-items: center;
box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
}
}
}
.calendar-father {
position: fixed;
top: 100rpx;
left: 60rpx;
width: 700rpx;
height: 600rpx;
background-color: #fff;
z-index: 9998;
}
.selected{
margin-top: 20rpx;
width: 100%;
display: flex;
.selected-item{
width: 50%;
display: flex;
align-items: center;
.selected-kuai{
width: 40rpx;
height: 40rpx;
background-color: #F8F8FA;
border: 2rpx solid #A3A7B6;
border-radius: 10rpx;
margin-right: 20rpx;
}
.selected-kuai-target{
width: 40rpx;
height: 40rpx;
background-color: #F8F8FA;
border: 2rpx solid #1083F8;
color: #1083F8;
font-weight: 600;
border-radius: 10rpx;
margin-right: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
}
}
</style>