1189 lines
27 KiB
Vue
1189 lines
27 KiB
Vue
<template>
|
||
<view class="all-bgc">
|
||
<view class="buttons-father">
|
||
<view class="ipt">
|
||
<input type="text" v-model="plzinfo.pddInfo" 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-buttons">
|
||
<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" @click="addnew">
|
||
<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"
|
||
@scrolltolower="plsbuytolower" :lower-threshold="200">
|
||
<view class="scroll-items">
|
||
<view class="scroll-item" v-for="(item,index) in plsbuy" :key="index" @click="pdurl(item)">
|
||
<view class="scroll-item-title">
|
||
<view class="scroll-title-left">
|
||
<view class="title-font">
|
||
{{ item.pddNo }}
|
||
</view>
|
||
|
||
<view class="title-success" v-if="item.pydNum>0">
|
||
盘盈
|
||
</view>
|
||
<view class="title-error" v-if="item.pkdNum>0">
|
||
盘亏
|
||
</view>
|
||
</view>
|
||
<view class="scroll-title-right">
|
||
{{ item.pddType_dictText }}
|
||
|
||
</view>
|
||
</view>
|
||
<view class="scroll-item-contect">
|
||
<view class="middle-heng"></view>
|
||
<view class="contect-one">
|
||
<view class="contect-title">
|
||
{{ item.pddStartTime?.split(' ')[0] }}
|
||
</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">
|
||
|
||
{{ item.pddEndTime?.split(' ')[0] }}
|
||
</view>
|
||
<view class="middle-heng-father">
|
||
|
||
<view class="middle-ball" v-if="item.pddType!='2'"
|
||
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;">
|
||
{{ item.pddType=='2'?`[ 王嘉尔 ]`: `` }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="scroll-item-end">
|
||
<image class="title-imge" src="/static/home.png" mode="aspectFit"></image>
|
||
<view class="title-font">
|
||
{{ item.nuName}}
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
</scroll-view>
|
||
<defaultr cont="暂无数据" v-if="plsbuy.length==0">
|
||
</defaultr>
|
||
</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">
|
||
<view :class="plzinfo.pddType==``?`more-statues-button-target`:`more-statues-button`"
|
||
@click="plzinfo.pddType=``;firstgetqueryCgdList()">
|
||
全部
|
||
</view>
|
||
<view :class="plzinfo.pddType==`1`?`more-statues-button-target`:`more-statues-button`"
|
||
@click="plzinfo.pddType=`1`;firstgetqueryCgdList()">
|
||
盘点中
|
||
</view>
|
||
<view :class="plzinfo.pddType==`2`?`more-statues-button-target`:`more-statues-button`"
|
||
@click="plzinfo.pddType=`2`;firstgetqueryCgdList()">
|
||
已完成
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<!-- <view class="more-select" style="margin-top: 10rpx;">
|
||
盘点单号
|
||
</view>
|
||
<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> -->
|
||
<view class="more-select">
|
||
盘点人
|
||
</view>
|
||
<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>
|
||
<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="clickkuai(`1`)">
|
||
<view class="selected-kuai" v-if="plzinfo.pydOrPkd!='1,2'&&plzinfo.pydOrPkd!='1'">
|
||
|
||
</view>
|
||
<view class="selected-kuai-target" v-else>
|
||
√
|
||
</view>
|
||
<view class="">
|
||
盘盈单
|
||
</view>
|
||
</view>
|
||
<view class="selected-item" @click="clickkuai(`2`)">
|
||
<view class="selected-kuai" v-if="plzinfo.pydOrPkd!='1,2'&&plzinfo.pydOrPkd!='2'">
|
||
|
||
</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>
|
||
<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>
|
||
</view>
|
||
<tanchuang :show="addshow" font="确定要新增盘点单吗" @back="addshow=false;" @right="addnew"> </tanchuang>
|
||
<errorshow :show="openmessage" :font="errormessage" @close="openmessage=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 { queryPddList, queryPddStartByList,addPddMain } from './api/lunpan.js'
|
||
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);
|
||
const addshow = ref(false)
|
||
const tagsarray = ref(["全部", "盘点中", "已完成"])
|
||
const cgrlist = ref([]);
|
||
|
||
|
||
const getSelectList = () => {
|
||
queryPddStartByList({nuId:uni.getStorageSync('nuId')}).then((res : any) => {
|
||
cgrlist.value = res.result;
|
||
|
||
})
|
||
}
|
||
onMounted(() => {
|
||
firstgetqueryCgdList();
|
||
getSelectList();
|
||
})
|
||
type datetype = {
|
||
start : string,
|
||
end : string
|
||
}
|
||
const dateget = (res : datetype) => {
|
||
plzinfo.startTime = res.start;
|
||
plzinfo.endTime = res.end;
|
||
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.pddType = ``
|
||
break
|
||
case 1:
|
||
plzinfo.pddType = `1`
|
||
break
|
||
case 2:
|
||
plzinfo.pddType = `2`
|
||
break
|
||
|
||
}
|
||
firstgetqueryCgdList()
|
||
}
|
||
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()
|
||
}
|
||
|
||
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.pddInfo = "";
|
||
plzinfo.pddNo = "";
|
||
plzinfo.pddStartBy = "";
|
||
plzinfo.pydOrPkd = "";
|
||
plzinfo.pddType = "";
|
||
plzinfo.startTime = "";
|
||
plzinfo.pddStartBy = ""
|
||
plzinfo.endTime = "";
|
||
changetype(0)
|
||
|
||
setTimeout(() => {
|
||
chongzhiLock = false;
|
||
xiaohui.value = true
|
||
}, 500)
|
||
}
|
||
const plsbuy = ref([])
|
||
const alltotal = ref(0);
|
||
const lefttarget = ref(0)
|
||
const plzinfo = reactive({
|
||
nuId: uni.getStorageSync('nuId'),
|
||
pageNo: 1,
|
||
pageSize: 9,
|
||
canpull: true,
|
||
pddInfo: "",
|
||
pddNo: "",
|
||
pddStartBy: "",
|
||
pydOrPkd: "",
|
||
pddType: "",
|
||
startTime: "",
|
||
endTime: "",
|
||
})
|
||
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(',') : []); // 转成集合方便增删
|
||
|
||
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(',') : '';
|
||
|
||
firstgetqueryCgdList()
|
||
}
|
||
const nomessageshow = ref(false);
|
||
const leftscrolltop = ref(0)
|
||
|
||
const rightarray = ref([]);
|
||
// 检测锁
|
||
const cannomessage = ref(true)
|
||
const rightdonghua = ref(true);
|
||
const firstgetqueryCgdList = () => {
|
||
plzinfo.pageNo = 1;
|
||
plzinfo.canpull = true
|
||
queryPddList(plzinfo).then((res : any) => {
|
||
|
||
// 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
|
||
queryPddList(plzinfo).then((res : any) => {
|
||
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()
|
||
}
|
||
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()
|
||
uni.navigateTo({url:'/pages/procurement/addtory'})
|
||
// setTimeout(()=>{
|
||
// uni.showToast({
|
||
// title: `新增成功`,
|
||
// icon: 'none', // 'none' 表示不带图标
|
||
// duration: 2000
|
||
// })
|
||
// },50)
|
||
}else{
|
||
openmessage.value = true
|
||
errormessage.value = res.message
|
||
}
|
||
})
|
||
}
|
||
|
||
const pdurl = (v)=>{
|
||
console.log(v)
|
||
uni.navigateTo({url:'/pages/procurement/addtory?pddobj='+JSON.stringify(v)})
|
||
}
|
||
</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;
|
||
|
||
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;
|
||
}
|
||
}
|
||
|
||
|
||
.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: 40rpx;
|
||
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;
|
||
}
|
||
}
|
||
}
|
||
.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;
|
||
}
|
||
</style> |