hldy_app_mini/pages/procurement/outbound.vue

1257 lines
30 KiB
Vue
Raw Normal View History

2025-11-19 13:32:22 +08:00
<template>
2025-12-09 15:09:33 +08:00
<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="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> -->
2025-12-10 17:30:16 +08:00
<view class="right-buttons">
<view :class="manyselect?`right-button-blue`:`right-button-white`" @click="startselect()"
2025-12-09 15:09:33 +08:00
v-show="plsbuy[lefttarget]?.status==`1`">
<image :src="`/static/index/warehouse/procurement/picking/piliang${manyselect?`target`:``}.png`" />
<view>
批量选择
</view>
</view>
2025-12-10 17:30:16 +08:00
<view class="right-button" @click="huituiclick()"
v-show="plsbuy[lefttarget]?.status==`1`">
2025-12-09 15:09:33 +08:00
<image src="/static/index/warehouse/procurement/picking/huitui.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="other-contain" v-show=" !nomessageshow">
<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">
2025-12-09 17:02:35 +08:00
<view class="middle-ball"
:style="Number(v.status)<4?{backgroundColor: `#E5E5E5`}:{}"
2025-12-09 15:09:33 +08:00
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"
2025-12-11 10:09:33 +08:00
:src="item.materialInfo?.materialImg?serverUrl+item.materialInfo?.materialImg:'/static/index/procurement/k.png'"
2025-12-09 15:09:33 +08:00
mode="aspectFill"></image>
<view class="left-tages" style="margin-top: -15rpx;">
2025-12-10 16:29:41 +08:00
{{ item.materialInfo.categoryName}}
2025-12-09 15:09:33 +08:00
</view>
<view class="left-tages">
2025-12-10 16:29:41 +08:00
{{ item.materialInfo.typeName}}
2025-12-09 15:09:33 +08:00
</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>
2025-12-09 17:02:35 +08:00
<view class="bottom-buttons" v-show="plsbuy[lefttarget]?.status==`1`">
<!-- <view class="button-gray" @click="quxiao">
2025-12-09 15:09:33 +08:00
取消
2025-12-09 17:02:35 +08:00
</view> -->
2025-12-09 15:09:33 +08:00
<view class="button-blue" @click="chukushow=true">
出库
</view>
</view>
</view>
2025-11-19 13:32:22 +08:00
</view>
</view>
2025-12-09 15:09:33 +08:00
<errorshow :show="openerror" font="注意:只能选择待出库的请领单" @close="openerror=false" />
2025-12-09 17:02:35 +08:00
<errorshow :show="qinglingshow" font="注意:批量选择模式请选择一项或以上的请领单" @close="qinglingshow=false" />
2025-12-10 16:29:41 +08:00
<errorshow :show="chukuerror" :font="chukuvalue" @close="chukuerror=false" />
2025-11-19 13:32:22 +08:00
</template>
2025-12-09 15:09:33 +08:00
<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'
// const props = defineProps({
// isShow: {
// type: Boolean,
// required: true,
// },
// });
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();
})
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
plzinfo.searchContent = ""
changetype(0)
firstgetqueryCgdList()
setTimeout(() => chongzhiLock = false, 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",
// elderId: uni.getStorageSync('NUall').elderId,
// nuId: uni.getStorageSync('nuId')
})
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;
})
2025-12-11 17:30:09 +08:00
}else{
rightarray.value = []
2025-12-09 15:09:33 +08:00
}
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
2025-11-19 13:32:22 +08:00
}
2025-12-09 15:09:33 +08:00
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 = () => {
2025-12-10 17:30:16 +08:00
2025-12-09 15:09:33 +08:00
selectarray.value = [];
manyselect.value = !manyselect.value
2025-12-10 17:30:16 +08:00
if (!manyselect.value) {
2025-12-09 17:02:35 +08:00
lefttarget.value = 0
}
2025-12-09 15:09:33 +08:00
}
2025-12-10 17:30:16 +08:00
const huituiclick = () => {
if(manyselect.value){
console.log("55555")
selectarray.value = [];
manyselect.value = false
leftscrolltop.value = 1
setTimeout(() => {
leftscrolltop.value = 0
}, 50)
}else{
badshow.value = true
}
}
2025-12-09 17:02:35 +08:00
// const quxiao = () => {
// selectarray.value = [];
// manyselect.value = false;
2025-12-10 17:30:16 +08:00
2025-12-09 17:02:35 +08:00
// }
const chukushow = ref(false);
const qinglingshow = ref(false)
2025-12-10 16:29:41 +08:00
const chukuerror = ref(false);
const chukuvalue = ref("")
2025-12-10 17:30:16 +08:00
2025-12-09 15:09:33 +08:00
const chukuclick = () => {
2025-12-10 17:30:16 +08:00
if (manyselect.value && !selectarray.value.length) {
2025-12-09 17:02:35 +08:00
qinglingshow.value = true
return
}
outbound({ qldNo: manyselect.value ? selectarray.value.join(',') : plsbuy.value[lefttarget.value].qldNo }).then((res : any) => {
selectarray.value = [];
manyselect.value = false
2025-12-09 15:09:33 +08:00
chukushow.value = false
plzinfo.pageNo = 1;
2025-12-09 17:02:35 +08:00
lefttarget.value = 0
2025-12-09 15:09:33 +08:00
plzinfo.canpull = true;
leftscrolltop.value = 1
setTimeout(() => {
leftscrolltop.value = 0
}, 50)
lefttarget.value = 0
firstgetqueryCgdList();
2025-12-10 17:30:16 +08:00
console.log("!!!!!!", res)
2025-12-09 15:09:33 +08:00
setTimeout(() => {
2025-12-10 17:30:16 +08:00
if (res.result.status == "success") {
2025-12-10 16:29:41 +08:00
uni.showToast({
title: res.result.message,
icon: 'none', // 'none' 表示不带图标
duration: 3000
})
2025-12-10 17:30:16 +08:00
} else {
2025-12-10 16:29:41 +08:00
chukuerror.value = true;
chukuvalue.value = res.result.message;
}
// uni.showToast({
// title: res.success ? res.result.message : res.message,
// icon: 'none', // 'none' 表示不带图标
// duration: 3000
// })
2025-12-09 15:09:33 +08:00
}, 300)
})
2025-11-19 13:32:22 +08:00
}
</script>
2025-12-09 15:09:33 +08:00
<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;
2025-11-19 13:32:22 +08:00
2025-12-09 15:09:33 +08:00
.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;
}
}
.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: 35%;
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;
2025-12-10 17:30:16 +08:00
font-size: 25rpx;
2025-12-09 15:09:33 +08:00
}
}
}
.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;
}
}
}
}
.left-selecttype {
width: 98%;
height: 80rpx;
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: 25%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #999999;
font-size: 31rpx;
position: relative;
}
.selecttype-target {
width: 25%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
color: #222222;
font-size: 31rpx;
font-weight: 600;
position: relative;
}
}
}
.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;
}
</style>