hldy_app_mini/pages/procurement/inventory.vue

1187 lines
27 KiB
Vue
Raw Normal View History

2025-12-10 16:29:41 +08:00
<template>
<view class="all-bgc">
<view class="buttons-father">
<view class="ipt">
2025-12-12 14:13:40 +08:00
<input type="text" v-model="plzinfo.pddInfo" placeholder="盘点单号/盘点人/盘点日期" @confirm="clickconfirm" />
2025-12-10 16:29:41 +08:00
</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>
2025-12-12 14:13:40 +08:00
<view class="right-buttons">
2025-12-10 16:29:41 +08:00
<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>
2025-12-12 17:30:33 +08:00
<view class="right-button" @click="addshow=true">
2025-12-10 16:29:41 +08:00
<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>
<view class="all-contain" v-show=" !nomessageshow">
<scroll-view scroll-y="true" scroll-with-animation class="all-scroll" :scroll-top="leftscrolltop"
2025-12-12 14:13:40 +08:00
@scrolltolower="plsbuytolower" :lower-threshold="200">
2025-12-10 16:29:41 +08:00
<view class="scroll-items">
2025-12-12 17:30:33 +08:00
<view class="scroll-item" v-for="(item,index) in plsbuy" :key="index" @click="pdurl(item)">
2025-12-10 16:29:41 +08:00
<view class="scroll-item-title">
<view class="scroll-title-left">
<view class="title-font">
2025-12-11 17:30:09 +08:00
{{ item.pddNo }}
2025-12-10 16:29:41 +08:00
</view>
2025-12-11 17:30:09 +08:00
<view class="title-success" v-if="item.pydNum>0">
2025-12-10 16:29:41 +08:00
盘盈
</view>
2025-12-12 14:13:40 +08:00
<view class="title-error" v-if="item.pkdNum>0">
2025-12-10 16:29:41 +08:00
盘亏
</view>
</view>
<view class="scroll-title-right">
2025-12-11 17:30:09 +08:00
{{ item.pddType_dictText }}
2025-12-10 16:29:41 +08:00
</view>
</view>
<view class="scroll-item-contect">
<view class="middle-heng"></view>
<view class="contect-one">
<view class="contect-title">
2025-12-12 14:13:40 +08:00
{{ item.pddStartTime?.split(' ')[0] }}
2025-12-10 16:29:41 +08:00
</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="color: #888888;">
{{ `[ 王嘉尔 ]` }}
</view>
</view>
</view>
<view class="contect-one">
<view class="contect-title">
2025-12-12 14:13:40 +08:00
{{ item.pddEndTime?.split(' ')[0] }}
2025-12-10 16:29:41 +08:00
</view>
<view class="middle-heng-father">
2025-12-12 14:13:40 +08:00
<view class="middle-ball" v-if="item.pddType!='2'"
style="background-color: #EEEEEE;"></view>
2025-12-10 16:29:41 +08:00
<image class="middle-ball-img" v-else src="/static/index/requestform/isok.png" />
</view>
<view class="end-font">
<view>
盘点结束
</view>
<view style="color: #888888;">
2025-12-11 17:30:09 +08:00
{{ item.pddType=='2'?`[ 王嘉尔 ]`: `` }}
2025-12-10 16:29:41 +08:00
</view>
</view>
</view>
</view>
<view class="scroll-item-end">
<image class="title-imge" src="/static/home.png" mode="aspectFit"></image>
<view class="title-font">
2025-12-11 17:30:09 +08:00
{{ item.nuName}}
2025-12-10 16:29:41 +08:00
</view>
</view>
</view>
</view>
</scroll-view>
2025-12-12 14:13:40 +08:00
<defaultr cont="暂无数据" v-if="plsbuy.length==0">
</defaultr>
2025-12-10 16:29:41 +08:00
</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">
确定
</view>
</view>
<view class="more-title">
盘点状态
</view>
<view class="more-statues-father">
2025-12-11 17:30:09 +08:00
<view :class="plzinfo.pddType==``?`more-statues-button-target`:`more-statues-button`"
@click="plzinfo.pddType=``;firstgetqueryCgdList()">
2025-12-10 16:29:41 +08:00
全部
</view>
2025-12-11 17:30:09 +08:00
<view :class="plzinfo.pddType==`1`?`more-statues-button-target`:`more-statues-button`"
@click="plzinfo.pddType=`1`;firstgetqueryCgdList()">
2025-12-10 16:29:41 +08:00
盘点中
</view>
2025-12-11 17:30:09 +08:00
<view :class="plzinfo.pddType==`2`?`more-statues-button-target`:`more-statues-button`"
@click="plzinfo.pddType=`2`;firstgetqueryCgdList()">
2025-12-10 16:29:41 +08:00
已完成
</view>
</view>
2025-12-12 14:13:40 +08:00
<!-- <view class="more-select" style="margin-top: 10rpx;">
2025-12-10 16:29:41 +08:00
盘点单号
</view>
2025-12-12 14:13:40 +08:00
<view class="more-time-select" @click="pandian=true">
<input class="more-gray" v-model="plzinfo.pddInfo" placeholder="请输入盘点单号"
placeholder-style="color: #BFBFBF;" style="margin-left: 30rpx;width: 100%;" @confirm="pandianclick"
@blur="pandianclick"></input>
</view> -->
2025-12-10 16:29:41 +08:00
<view class="more-select">
盘点人
</view>
2025-12-12 14:13:40 +08:00
<view class="more-time-select" @click="pandianren=true">
<input class="more-gray" v-model="peoplename" placeholder="请输入盘点人" placeholder-style="color: #BFBFBF;"
style="margin-left: 30rpx;width: 400rpx;" @input="changeName"></input>
2025-12-10 16:29:41 +08:00
<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>
2025-12-12 14:13:40 +08:00
2025-12-10 16:29:41 +08:00
<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">
2025-12-11 17:30:09 +08:00
<view class="selected-item" @click="clickkuai(`1`)">
<view class="selected-kuai" v-if="plzinfo.pydOrPkd!='1,2'&&plzinfo.pydOrPkd!='1'">
2025-12-12 14:13:40 +08:00
2025-12-10 16:29:41 +08:00
</view>
2025-12-12 14:13:40 +08:00
<view class="selected-kuai-target" v-else>
2025-12-10 16:29:41 +08:00
</view>
<view class="">
盘盈单
</view>
</view>
2025-12-11 17:30:09 +08:00
<view class="selected-item" @click="clickkuai(`2`)">
<view class="selected-kuai" v-if="plzinfo.pydOrPkd!='1,2'&&plzinfo.pydOrPkd!='2'">
2025-12-12 14:13:40 +08:00
2025-12-10 16:29:41 +08:00
</view>
2025-12-12 14:13:40 +08:00
<view class="selected-kuai-target" v-else>
2025-12-10 16:29:41 +08:00
</view>
<view class="">
盘亏单
</view>
</view>
</view>
</view>
</view>
<!-- 日期 -->
<view class="calendar-father" v-show="opendata" v-if="xiaohui">
<calendar @datachange="dateget" />
</view>
2025-12-12 14:13:40 +08:00
<view v-show="opendata" class="mengban" style="background: transparent;" @click="opendata=false;">
2025-12-10 16:29:41 +08:00
</view>
2025-12-12 14:13:40 +08:00
<view v-show="pandian" class="mengban" style="background: transparent;" @click="pandian=false;">
</view>
<!-- 给模糊搜索用的 -->
<view v-show="filteredCgrList.length&&peoplename" class="mengban" style="background: transparent;z-index: 9999;"
@click="closefilteredCgrList"></view>
<view class="input-next" v-if="filteredCgrList.length && peoplename">
<view v-show="filteredCgrList[0].cgBy!=`暂无数据`" class="next-father"
v-for="(item, index) in filteredCgrList.slice(0, 5)" :key="index" @click="clickfilteredCgrList(item)">
{{ item.name }}
</view>
<view class="nomessage" v-if="filteredCgrList[0].cgBy===`暂无数据`">
暂无数据
</view>
2025-12-10 16:29:41 +08:00
</view>
2025-12-12 14:13:40 +08:00
<tanchuang :show="addshow" font="确定要新增盘点单吗" @back="addshow=false;" @right="addnew"> </tanchuang>
<errorshow :show="openmessage" :font="errormessage" @close="openmessage=false" />
2025-12-10 16:29:41 +08:00
</template>
<script setup lang="ts">
import { ref, onMounted, onBeforeUnmount, computed, nextTick, watch, reactive } from 'vue';
import { onShow, onLoad, onHide, onPageScroll } from "@dcloudio/uni-app"
2025-12-12 14:13:40 +08:00
import { queryPddList, queryPddStartByList,addPddMain } from './api/lunpan.js'
2025-12-10 16:29:41 +08:00
import nomessage from './components/nomessage.vue'
import defaultr from './components/default.vue'
import calendar from '@/component/public/calendar.vue'
const xiaohui = ref(true);
const shaixuan = ref(false);
const opendata = ref(false);
const openselect = ref(false);
const manyselect = ref(false);
2025-12-12 14:13:40 +08:00
const addshow = ref(false)
2025-12-10 16:29:41 +08:00
const tagsarray = ref(["全部", "盘点中", "已完成"])
2025-12-12 14:13:40 +08:00
const cgrlist = ref([]);
const getSelectList = () => {
queryPddStartByList({nuId:uni.getStorageSync('nuId')}).then((res : any) => {
cgrlist.value = res.result;
})
}
2025-12-10 16:29:41 +08:00
onMounted(() => {
firstgetqueryCgdList();
2025-12-12 14:13:40 +08:00
getSelectList();
2025-12-10 16:29:41 +08:00
})
type datetype = {
start : string,
end : string
}
const dateget = (res : datetype) => {
plzinfo.startTime = res.start;
plzinfo.endTime = res.end;
2025-12-11 17:30:09 +08:00
firstgetqueryCgdList()
2025-12-10 16:29:41 +08:00
}
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:
2025-12-11 17:30:09 +08:00
plzinfo.pddType = ``
2025-12-10 16:29:41 +08:00
break
case 1:
2025-12-11 17:30:09 +08:00
plzinfo.pddType = `1`
2025-12-10 16:29:41 +08:00
break
case 2:
2025-12-11 17:30:09 +08:00
plzinfo.pddType = `2`
2025-12-10 16:29:41 +08:00
break
2025-12-12 14:13:40 +08:00
2025-12-10 16:29:41 +08:00
}
firstgetqueryCgdList()
}
2025-12-12 14:13:40 +08:00
const pandianren = ref(false)
const peoplename = ref("")
const filteredCgrList = ref([])
// --- 模糊匹配 ---
function fuzzyMatch(text : unknown, q : string) {
const s = String(text ?? '').toLowerCase()
const ql = String(q ?? '').toLowerCase().trim()
if (!ql) return true
if (s.includes(ql)) return true
// subsequence 模糊字符序列
let i = 0
for (let j = 0; j < s.length && i < ql.length; j++) {
if (s[j] === ql[i]) i++
}
return i === ql.length
}
// --- 0.3 秒防抖专用变量 ---
let debounceTimer : number | null = null
/**
* changeName - 防抖搜索0.3 秒后无再次输入才执行
*/
function changeName(res : any) {
console.log("0000",res)
if (!res.detail.value) {
plzinfo.pddStartBy = "";
filteredCgrList.value = [];
firstgetqueryCgdList()
return
}
const keyword = String(
typeof res === 'string' ? res : res?.detail?.value ?? ''
).trim()
// 清除上一次的定时器
if (debounceTimer) clearTimeout(debounceTimer)
// 重新等待 300ms
debounceTimer = setTimeout(() => {
if (!keyword) {
filteredCgrList.value = cgrlist.value.slice()
return
}
filteredCgrList.value = cgrlist.value.filter(item =>
fuzzyMatch(item?.name, keyword)
)
if (!filteredCgrList.value.length) {
filteredCgrList.value.push({ cgBy: `暂无数据` })
}
// console.log("9999",filteredCgrList.value)
// console.log("0000",cgrlist.value)
}, 300)
}
const closefilteredCgrList = () => {
// console.log("?????????")
filteredCgrList.value = [];
peoplename.value = plzinfo.pddStartBy;
firstgetqueryCgdList()
}
const clickfilteredCgrList = (item : any) => {
filteredCgrList.value = [];
plzinfo.pddStartBy = item.name
peoplename.value = plzinfo.pddStartBy;
firstgetqueryCgdList()
}
const pandian = ref(false)
const pandianclick = () => {
pandian.value = false
firstgetqueryCgdList()
}
2025-12-10 16:29:41 +08:00
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;
2025-12-12 14:13:40 +08:00
plzinfo.pddInfo = "";
plzinfo.pddNo = "";
plzinfo.pddStartBy = "";
plzinfo.pydOrPkd = "";
plzinfo.pddType = "";
plzinfo.startTime = "";
plzinfo.pddStartBy = ""
plzinfo.endTime = "";
2025-12-10 16:29:41 +08:00
changetype(0)
setTimeout(() => {
chongzhiLock = false;
xiaohui.value = true
}, 500)
}
const plsbuy = ref([])
const alltotal = ref(0);
const lefttarget = ref(0)
const plzinfo = reactive({
2025-12-11 17:30:09 +08:00
nuId: uni.getStorageSync('nuId'),
2025-12-10 16:29:41 +08:00
pageNo: 1,
2025-12-11 17:30:09 +08:00
pageSize: 9,
2025-12-10 16:29:41 +08:00
canpull: true,
2025-12-11 17:30:09 +08:00
pddInfo: "",
2025-12-12 14:13:40 +08:00
pddNo: "",
pddStartBy: "",
pydOrPkd: "",
pddType: "",
2025-12-10 16:29:41 +08:00
startTime: "",
endTime: "",
})
2025-12-12 14:13:40 +08:00
const clickkuai = (index : string) => {
// index 可以是 '1' 或 '2'(或数字)
const key = String(index);
const cur = plzinfo.pydOrPkd || ''; // 可能为 '' 或 '1' 或 '2' 或 '1,2'
const set = new Set(cur ? cur.split(',') : []); // 转成集合方便增删
2025-12-10 16:29:41 +08:00
2025-12-12 14:13:40 +08:00
if (set.has(key)) set.delete(key);
else set.add(key);
// 保持有顺序 '1,2',空集合 -> 空字符串
const arr = Array.from(set).filter(Boolean).sort((a, b) => a - b);
plzinfo.pydOrPkd = arr.length ? arr.join(',') : '';
2025-12-11 17:30:09 +08:00
firstgetqueryCgdList()
}
2025-12-10 16:29:41 +08:00
const nomessageshow = ref(false);
const leftscrolltop = ref(0)
const rightarray = ref([]);
// 检测锁
const cannomessage = ref(true)
const rightdonghua = ref(true);
const firstgetqueryCgdList = () => {
2025-12-12 14:13:40 +08:00
plzinfo.pageNo = 1;
plzinfo.canpull = true
2025-12-11 17:30:09 +08:00
queryPddList(plzinfo).then((res : any) => {
2025-12-12 14:13:40 +08:00
2025-12-10 16:29:41 +08:00
// 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 < 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
2025-12-12 14:13:40 +08:00
queryPddList(plzinfo).then((res : any) => {
2025-12-10 16:29:41 +08:00
plsbuy.value.push(...res.result.records)
alltotal.value = res.result.total
if (res.result.records.length < plzinfo.pageSize) {
plzinfo.canpull = false;
}
})
}
const serverUrl = ref("")
onLoad(() => {
serverUrl.value = uni.getStorageSync('serverUrl') + '/sys/common/static/';
})
const goback = () => {
uni.navigateBack()
}
2025-12-12 14:13:40 +08:00
const errormessage = ref("")
const openmessage = ref(false)
const addnew = () =>{
addPddMain({nuId:uni.getStorageSync('nuId')}).then((res:any)=>{
// console.log("res",res)
if(res.success){
addshow.value = false
chongzhi()
setTimeout(()=>{
uni.showToast({
title: `新增成功`,
icon: 'none', // 'none' 表示不带图标
duration: 2000
})
},50)
}else{
openmessage.value = true
errormessage.value = res.message
}
2025-12-10 16:29:41 +08:00
})
}
2025-12-12 17:30:33 +08:00
const pdurl = (v)=>{
console.log(v)
uni.navigateTo({url:'/pages/procurement/addtory?pddobj='+JSON.stringify(v)})
}
2025-12-10 16:29:41 +08:00
</script>
<style scoped lang="less">
.all-bgc {
background-color: rgb(239, 240, 244);
padding-left: 2vw;
padding-top: 5.5vh;
}
.buttons-father {
width: 100%;
height: 7.5vh;
display: flex;
position: relative;
.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;
}
}
.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;
2025-12-12 14:13:40 +08:00
2025-12-10 16:29:41 +08:00
image {
width: 1.5vw;
height: 1.5vw;
margin: 0 0.2vw 0 0;
}
2025-12-12 14:13:40 +08:00
2025-12-10 16:29:41 +08:00
}
2025-12-12 14:13:40 +08:00
2025-12-10 16:29:41 +08:00
.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;
}
}
.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;
2025-12-10 17:30:16 +08:00
font-size: 25rpx;
2025-12-10 16:29:41 +08:00
// 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);
}
}
}
2025-12-12 14:13:40 +08:00
2025-12-10 16:29:41 +08:00
.calendar-father {
position: fixed;
top: 100rpx;
left: 60rpx;
width: 700rpx;
height: 600rpx;
background-color: #fff;
z-index: 9998;
}
2025-12-12 14:13:40 +08:00
.selected {
margin-top: 40rpx;
2025-12-10 16:29:41 +08:00
width: 100%;
display: flex;
2025-12-12 14:13:40 +08:00
.selected-item {
2025-12-10 16:29:41 +08:00
width: 50%;
display: flex;
align-items: center;
2025-12-12 14:13:40 +08:00
.selected-kuai {
2025-12-10 16:29:41 +08:00
width: 40rpx;
height: 40rpx;
background-color: #F8F8FA;
border: 2rpx solid #A3A7B6;
border-radius: 10rpx;
margin-right: 20rpx;
}
2025-12-12 14:13:40 +08:00
.selected-kuai-target {
2025-12-10 16:29:41 +08:00
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;
}
}
}
2025-12-12 14:13:40 +08:00
.input-next {
position: fixed;
bottom: 850rpx;
left: 70rpx;
width: 610rpx;
// height: 300rpx;
border-radius: 30rpx;
z-index: 102;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
padding: 40rpx 30rpx;
z-index: 9999;
.next-father {
color: #999;
margin: 10rpx;
font-size: 28rpx;
}
}
.nomessage {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 200rpx;
font-size: 34rpx;
color: #999;
}
2025-12-10 16:29:41 +08:00
</style>