772 lines
20 KiB
Vue
772 lines
20 KiB
Vue
<template>
|
||
<view>
|
||
<view class="flex" @touchmove.stop="getxy" @touchend.stop="cleanall">
|
||
<!-- 手指拖动 -->
|
||
<view class="box" :style="boxStyle" v-if="!whoisit">
|
||
<view class="title-time-blue">
|
||
<image class="blue-img" lazy-load src="/static/index/target.png" />
|
||
</view>
|
||
|
||
<image class="card-icon" :src="movelook.url" mode="aspectFill"></image>
|
||
<view class="card-text" style="margin-top: 0;" :style="movelook.title.length>6?{fontSize:`24rpx`}:{}">
|
||
{{ movelook.title }}
|
||
</view>
|
||
|
||
</view>
|
||
<view class="card-box" :style="boxStyle" v-if="whoisit">
|
||
<view class="title-time-blue-card">
|
||
<image class="blue-img" src="/static/index/bluetarget.png" />
|
||
</view>
|
||
<view class="card-bao" v-if="simpleobj.izPackage==`Y`">
|
||
包
|
||
</view>
|
||
<view class="title-time-border-hisOk">
|
||
<view class="title-time">
|
||
<view class="title-time-font-rel">
|
||
{{ splitString(simpleobj.directiveName)[0]}}
|
||
</view>
|
||
<view v-if="splitString(simpleobj.directiveName)[1]" class="title-time-font-tags">
|
||
({{ splitString(simpleobj.directiveName)[1]}})
|
||
</view>
|
||
<view class="card-time">
|
||
|
||
<view class="weight-time">
|
||
{{ simpleobj.startTime }}
|
||
<text style="margin: 0 3rpx;">
|
||
-
|
||
</text>
|
||
{{ simpleobj.endTime }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="delete-view" :style="isblue==`3`?{backgroundColor: `rgba(255, 239, 239, 0.8)`}:{}"
|
||
v-if="!startmoveit&&whoisit">
|
||
<image class="delete-img" :src="`/static/index/trash${isblue==`3`?`target`:``}.png`" />
|
||
</view>
|
||
<view class="left">
|
||
<leftcontent :list="arrlist" @navurl="navurl" :userInfo="userInfo"></leftcontent>
|
||
</view>
|
||
<view class="boxrt">
|
||
<index :isShow="menuop == 0" v-if="swipdex == 0" @swip="swip" />
|
||
<material :isShow="menuop == 1" v-if="swipdex == 1&&!specialPage" ref="materials"
|
||
@changepages="changeNumber"></material>
|
||
<materialcar v-if="swipdex == 1&&specialPage==1"></materialcar>
|
||
<purchaseorder v-if="swipdex == 1&&specialPage==2"></purchaseorder>
|
||
|
||
<picking :isShow="menuop == 2" v-if="swipdex == 2"></picking>
|
||
<finish :isShow="menuop == 3" v-if="swipdex == 3"></finish>
|
||
<outbound :isShow="menuop == 4" v-if="swipdex == 4"></outbound>
|
||
<retstock :isShow="menuop == 5" v-if="swipdex == 5"></retstock>
|
||
<inventory :isShow="menuop == 6 " v-if="swipdex == 6&& !specialPage" ref="inventorys"
|
||
@changepages="changepages"></inventory>
|
||
<addtory :isShow="menuop == 6" v-if="swipdex == 6&&specialPage=='1'" :specialitem="specialitem">
|
||
</addtory>
|
||
<!-- <nurse :isshow="menuop == 7" v-if="swipdex==7&&uni.getStorageSync('nuId')" /> -->
|
||
<!-- <invoicing :isshow="menuop == 8" v-if="swipdex==8&&uni.getStorageSync('nuId')" /> -->
|
||
<logistics :isshow="menuop == 9" v-if="swipdex==9&&uni.getStorageSync('nuId')" />
|
||
<!-- <warehousematrix :isshow="menuop == 10" v-if="swipdex==10&&uni.getStorageSync('nuId')" /> -->
|
||
<warehousematrix :isshow="menuop==10" v-if="swipdex==10" :canmove="startmoveit" :sendxy="targetrule"
|
||
:isblue='isblue' :howtomove="howtomove" :targetrule="targetrule" @handsend="handsend"
|
||
@rulepush="rulepush" @cleanall="cleanall" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||
import { onShow, onLoad, onHide, onPageScroll, onBackPress } from "@dcloudio/uni-app"
|
||
import { queryPadPageList, getPermissionList } from '@/pages/watch/api/lunpan.js'
|
||
import leftcontent from "@/pages/NursingNew/component/leftcontent/leftcontent.vue"
|
||
import material from "@/pages/procurement/material.vue";
|
||
import materialcar from "@/pages/procurement/materialcar.vue";
|
||
import purchaseorder from "@/pages/procurement/purchaseorder.vue";
|
||
import { getNcPackagelist } from '@/pages/NursingNew/component/nurse/api.js'
|
||
|
||
import index from "./component/index.vue"
|
||
|
||
import picking from "../picking.vue";
|
||
|
||
import finish from "@/pages/Warehouse/finish.vue"
|
||
import outbound from "@/pages/procurement/outbound.vue";
|
||
import inventory from "@/pages/procurement/inventory.vue";
|
||
import addtory from "@/pages/procurement/addtory.vue";
|
||
import retstock from "@/pages/procurement/retstock.vue";
|
||
|
||
// import logistics from "@/pages/NursingNew/component/logistics/index.vue"
|
||
import warehousematrix from "@/pages/NursingNew/component/warehousematrix/newindex.vue"
|
||
import logistics from "@/pages/NursingNew/component/logistics/index.vue"
|
||
// import nurse from "@/pages/NursingNew/component/nurse/index.vue"
|
||
|
||
const tabbrarr = ref([
|
||
{ name: '护理', url: '/static/shouye/sy/n0.png', urls: '/static/shouye/sy/n1.png', type: 'kzgn_hljz' },
|
||
{ name: '医疗', url: '/static/shouye/sy/y0.png', urls: '/static/shouye/sy/y1.png', type: 'kzgn_yljz' },
|
||
{ name: '后勤', url: '/static/shouye/sy/l0.png', urls: '/static/shouye/sy/l1.png', type: 'kzgn_hqjz' },
|
||
{ name: '库房', url: '/static/shouye/sy/l0.png', urls: '/static/shouye/sy/l1.png', type: 'kzgn_kfjz' },
|
||
])
|
||
const menuop = ref(0)
|
||
const swipdex = ref(0)
|
||
|
||
onBackPress(() => {
|
||
if (specialPage.value) {
|
||
specialPage.value = 0
|
||
return true; // 禁止返回手势返回
|
||
} else {
|
||
return false; // 禁止返回手势返回
|
||
}
|
||
})
|
||
// 当前选中的菜单索引
|
||
const menuIndex = ref<number>(-1);
|
||
const swipedex = ref<number>(-1);
|
||
onMounted(() => {
|
||
menuIndex.value = 0;
|
||
swipedex.value = 0;
|
||
|
||
getNcPackagelist(`3`).then((res : any) => {
|
||
//缓存指令包
|
||
// console.log("缓存指令包", res)
|
||
uni.setStorageSync("Packagelist1", res.result)
|
||
})
|
||
getPermissionList({ employeesId: uni.getStorageSync('userInfo').employeesId }).then(res => {
|
||
listarr.value = res.result;
|
||
// console.log("这个是啥", listarr.value)
|
||
})
|
||
})
|
||
const gospecial = (index : number) => {
|
||
specialPage.value = index
|
||
}
|
||
const specialPage = ref(0)
|
||
const specialitem = ref({})
|
||
const changepages = (item : any) => {
|
||
specialPage.value = 1
|
||
specialitem.value = item
|
||
}
|
||
const changeNumber = (item : any) => {
|
||
specialPage.value = item
|
||
// specialitem.value = item
|
||
}
|
||
// onMounted(() => {
|
||
// // 处理响应式
|
||
// navurl(0)
|
||
// })
|
||
// onShow(()=>{
|
||
// navurl(0,arrlist[0])
|
||
// })
|
||
const navurl = (e : number, v : any) => {
|
||
// 最后一个直接返回
|
||
menuop.value = -1;
|
||
swipdex.value = -1;
|
||
specialPage.value = 0;
|
||
setTimeout(() => {
|
||
switch (v.type) {
|
||
case 'sy':
|
||
swipdex.value = 0;
|
||
setTimeout(() => {
|
||
menuop.value = 0
|
||
}, 100)
|
||
break;
|
||
case 'kf_cg':
|
||
swipdex.value = 1;
|
||
setTimeout(() => {
|
||
menuop.value = 1
|
||
}, 100)
|
||
break;
|
||
case 'kf_jh':
|
||
swipdex.value = 2;
|
||
setTimeout(() => {
|
||
menuop.value = 3
|
||
}, 100)
|
||
break;
|
||
case 'kf_wj':
|
||
swipdex.value = 3;
|
||
setTimeout(() => {
|
||
menuop.value = 3
|
||
}, 100)
|
||
break;
|
||
case 'kf_ql':
|
||
swipdex.value = 4;
|
||
setTimeout(() => {
|
||
menuop.value = 4
|
||
}, 100)
|
||
break;
|
||
case 'kf_th':
|
||
swipdex.value = 5;
|
||
setTimeout(() => {
|
||
menuop.value = 5
|
||
}, 100)
|
||
break;
|
||
case 'kf_pd':
|
||
swipdex.value = 6;
|
||
setTimeout(() => {
|
||
menuop.value = 6
|
||
}, 100)
|
||
break;
|
||
case 'kzgn_hljz':
|
||
swipdex.value = 7;
|
||
setTimeout(() => {
|
||
menuop.value = 7;
|
||
}, 100)
|
||
console.log('护理矩阵')
|
||
break;
|
||
case 'kzgn_yljz':
|
||
swipdex.value = 7;
|
||
setTimeout(() => {
|
||
menuop.value = 7;
|
||
}, 100)
|
||
console.log('医疗矩阵')
|
||
break;
|
||
case 'kzgn_hqjz':
|
||
swipdex.value = 9;
|
||
setTimeout(() => {
|
||
menuop.value = 9;
|
||
}, 100)
|
||
console.log('后勤矩阵')
|
||
break;
|
||
case 'kzgn_kfjz':
|
||
swipdex.value = 10;
|
||
setTimeout(() => {
|
||
menuop.value = 10;
|
||
}, 100)
|
||
console.log('库房')
|
||
break;
|
||
case 'back':
|
||
uni.navigateBack()
|
||
uni.navigateBack()
|
||
break;
|
||
|
||
default:
|
||
break;
|
||
}
|
||
}, 10)
|
||
}
|
||
const arrlist = ref([])
|
||
const listarr = ref([])
|
||
const swip = () => {
|
||
let nuId = uni.getStorageSync('nuId');
|
||
getPermissionList({ employeesId: uni.getStorageSync('userInfo').employeesId }).then(res => {
|
||
res.result.forEach(item => {
|
||
if (item.nuId == nuId) {
|
||
listarr.value = item.dataList
|
||
}
|
||
})
|
||
})
|
||
let nuName = uni.getStorageSync('nuName')
|
||
queryPadPageList({ 'pageNo': -1, 'nuName': nuName }).then((res => {
|
||
let arr = res.result.records[0].permissionList;
|
||
arrlist.value = [
|
||
{ name: '首页', url: '/static/shouye/ck/h0.png', urls: '/static/shouye/ck/h1.png', type: 'sy' },
|
||
{ name: '采购', url: '/static/shouye/ck/c0.png', urls: '/static/shouye/ck/c1.png', type: 'kf_cg' },
|
||
{ name: '拣货', url: '/static/shouye/ck/j0.png', urls: '/static/shouye/ck/j1.png', type: 'kf_jh' },
|
||
{ name: '完结', url: '/static/shouye/ck/w0.png', urls: '/static/shouye/ck/w1.png', type: 'kf_wj' },
|
||
{ name: '请领出库', url: '/static/shouye/ck/q0.png', urls: '/static/shouye/ck/q1.png', type: 'kf_ql' },
|
||
{ name: '退货入库', url: '/static/shouye/ck/t0.png', urls: '/static/shouye/ck/t1.png', type: 'kf_th' },
|
||
{ name: '库存盘点', url: '/static/shouye/ck/p0.png', urls: '/static/shouye/ck/p1.png', type: 'kf_pd' },
|
||
];
|
||
let tbr = [];
|
||
if (arr) {
|
||
arr.forEach((v, i) => {
|
||
let obj = listarr.value.find(item =>
|
||
item.menuCode == v.menuCode
|
||
);
|
||
if (obj) {
|
||
tbr.push(v)
|
||
}
|
||
})
|
||
tbr.forEach(item => {
|
||
let obj = tabbrarr.value.find(r =>
|
||
r.type == item.menuCode
|
||
);
|
||
if (obj) {
|
||
arrlist.value.push(obj);
|
||
}
|
||
})
|
||
}
|
||
|
||
let back = [
|
||
{ name: '返回', url: '/static/shouye/sy/f0.png', urls: '/static/shouye/sy/f1.png', type: 'back' },
|
||
]
|
||
arrlist.value.push(...back);
|
||
}))
|
||
}
|
||
const materials = ref<InstanceType<typeof ChildComponent>>();
|
||
const inventorys = ref<InstanceType<typeof ChildComponent>>()
|
||
const userInfo = ref({})
|
||
onShow(() => {
|
||
userInfo.value = uni.getStorageSync('userInfo');
|
||
if (menuop.value == 1) {
|
||
materials.value.gwcsx();
|
||
}
|
||
if (menuop.value == 6) {
|
||
inventorys.value.firstgetqueryCgdList()
|
||
}
|
||
})
|
||
const clientX = ref(0);
|
||
const clientY = ref(0);
|
||
const savename = ref("")
|
||
|
||
|
||
onShow(() => {
|
||
userInfo.value = uni.getStorageSync('userInfo');
|
||
})
|
||
const box = ref(null);
|
||
const boxStyle = ref({
|
||
transform: 'translate3d(-500px, -500px, 0px)',
|
||
});
|
||
|
||
function handmove(wh : number[]) {
|
||
// 直接更新 transform（父组件可频繁调用）
|
||
const nx = Number(wh[0]) || 0;
|
||
const ny = Number(wh[1]) || 0;
|
||
// console.log("----", nx, ny)
|
||
if (whoisit.value) {
|
||
boxStyle.value = {
|
||
transform: `translate3d(${nx - 70}px, ${ny - 60}px, 0)`
|
||
};
|
||
} else {
|
||
boxStyle.value = {
|
||
transform: `translate3d(${nx - 100}px, ${ny - 70}px, 0)`
|
||
};
|
||
|
||
}
|
||
|
||
}
|
||
const movelook = ref({
|
||
url: "",
|
||
title: "",
|
||
type: 0
|
||
})
|
||
const startmoveit = ref(true)
|
||
const whoisit = ref(0);
|
||
const simpleobj = ref({
|
||
startTime: "",
|
||
endTime: "",
|
||
directiveName: "",
|
||
izPackage: '',
|
||
})
|
||
|
||
function handsend(look : any) {
|
||
isblue.value = 0;
|
||
// console.log("look",look)
|
||
if (look.levle) {
|
||
whoisit.value = 0;
|
||
|
||
movelook.value.url = uni.getStorageSync('imagebase') + look.immediateFileFocus;
|
||
if (!look.immediateFileFocus) {
|
||
movelook.value.url = `/static/logotarget.png`
|
||
}
|
||
console.log("咋没了", movelook.value.url)
|
||
movelook.value.title = look.title;
|
||
movelook.value.type = 0;
|
||
startmoveit.value = false
|
||
} else if (look.packageName) {
|
||
whoisit.value = 0;
|
||
movelook.value.url = `/static/index/packtarget.png`
|
||
movelook.value.title = look.packageName;
|
||
movelook.value.type = 1;
|
||
startmoveit.value = false
|
||
}
|
||
|
||
else {
|
||
whoisit.value = 1;
|
||
simpleobj.value.startTime = look.startTime;
|
||
simpleobj.value.endTime = look.endTime;
|
||
simpleobj.value.directiveName = look.directiveName;
|
||
simpleobj.value.izPackage = look.izPackage;
|
||
startmoveit.value = false
|
||
}
|
||
}
|
||
|
||
//节流函数
|
||
function throttle(fn, delay) {
|
||
let lastExecutionTime = 0;
|
||
return function (...args) {
|
||
const now = Date.now();
|
||
if (now - lastExecutionTime >= delay) {
|
||
lastExecutionTime = now;
|
||
fn.apply(this, args);
|
||
}
|
||
};
|
||
}
|
||
const canTrigger = ref(true);
|
||
//全局获得x轴和y轴
|
||
const animation = uni.createAnimation({
|
||
duration: 0,
|
||
timingFunction: 'linear',
|
||
delay: 0
|
||
});
|
||
const animationData = ref({});
|
||
let ticking = false;
|
||
let handle = null;
|
||
const sendxy = ref([0, 0])
|
||
const isblue = ref(0)
|
||
const getxyrel = (event) => {
|
||
event.preventDefault()
|
||
// console.log("////",)
|
||
if (!startmoveit.value) {
|
||
const touch = event.touches[0];
|
||
const a = touch.clientX.toFixed(2);
|
||
const b = touch.clientY.toFixed(2);
|
||
|
||
isblue.value = inArea(a, b)
|
||
// console.log(a, b)
|
||
handmove([a, b])
|
||
if (whoisit.value) {
|
||
detectorMove(a, b); // ← 替换原来的 handmove([a,b])
|
||
}
|
||
}
|
||
}
|
||
const rules = ref([])
|
||
const rulepush = (array : any) => {
|
||
targetrule.value = [-1, -1]
|
||
rules.value = array
|
||
}
|
||
const targetrule = ref([-1, -1])
|
||
function inArea(x, y) {
|
||
if (!whoisit.value) {
|
||
if (x >= 790 &&
|
||
x <= 1062 &&
|
||
y >= 37 &&
|
||
y <= 255) {
|
||
return 1
|
||
} else {
|
||
return 0
|
||
}
|
||
} else {
|
||
// console.log("000",x)
|
||
if (x > 1000) {
|
||
return 3
|
||
}
|
||
|
||
for (let i = rules.value.length - 1; i >= 0; i--) {
|
||
const it = rules.value[i]
|
||
if (x >= it.left && x <= it.right && y >= it.top && y <= it.bottom) {
|
||
const raw0 = it.dataset?.index0
|
||
const raw1 = it.dataset?.index1
|
||
const n0 = raw0 === undefined ? NaN : Number(raw0)
|
||
const n1 = raw1 === undefined ? NaN : Number(raw1)
|
||
if (!isNaN(n0) && !isNaN(n1)) {
|
||
if (n0 != targetrule.value[0] || n1 != targetrule.value[1]) {
|
||
targetrule.value = [n0, n1]
|
||
}
|
||
return 2
|
||
}
|
||
}
|
||
}
|
||
// 没找到匹配项，设为 [-1, -1] 并返回 0
|
||
if (targetrule.value[0] !== -1 || targetrule.value[1] !== -1) {
|
||
targetrule.value = [-1, -1]
|
||
}
|
||
return 2
|
||
}
|
||
}
|
||
const getxy = throttle(getxyrel, 40);
|
||
const cleanall = (event) => {
|
||
// setTimeout(()=>{
|
||
if (whoisit.value) {
|
||
detectorEnd(); // ← 替换原来的 handmove([a,b])
|
||
}
|
||
handmove([-200, -200])
|
||
startmoveit.value = true;
|
||
// },100)
|
||
}
|
||
// 切割bigArray
|
||
function splitString(str) {
|
||
// 使用正则表达式找到所有括号的内容
|
||
let result = [];
|
||
let remainingStr = str;
|
||
// 正则匹配最外层括号（支持全角和半角）
|
||
let regex = /([^（(]*)[（(]([^）)]+)[）)]/;
|
||
while (regex.test(remainingStr)) {
|
||
let match = remainingStr.match(regex);
|
||
if (match) {
|
||
// 添加括号前的部分（去掉空白）
|
||
if (match[1].trim()) {
|
||
result.push(match[1].trim());
|
||
}
|
||
// 添加括号内的内容
|
||
if (match[2].trim()) {
|
||
result.push(match[2].trim());
|
||
}
|
||
// 更新剩余的字符串
|
||
remainingStr = remainingStr.replace(match[0], '').trim();
|
||
}
|
||
}
|
||
// 如果最后还有剩余部分，也加入结果
|
||
if (remainingStr.trim()) {
|
||
result.push(remainingStr.trim());
|
||
}
|
||
return result;
|
||
}
|
||
// ---------- 配置 ----------
|
||
const HOLD_MS = 350; // 0.5s 窗口
|
||
const RESET_MS = 100; // 0.1s 占位
|
||
|
||
// 判断方向（返回 [-1/0/1, -1/0/1]：x方向, y方向）
|
||
function getDir(x, y) {
|
||
const dx = (x <= 150 ? -1 : (x >= 710 && x < 825 ? 1 : 0));
|
||
const dy = (y <= 80 ? -1 : (y >= 550 ? 1 : 0));
|
||
return [dx, dy];
|
||
}
|
||
|
||
const howtomove = ref([2, 2])
|
||
|
||
// ---------- 状态 ----------
|
||
let windowTimer = null; // 500ms 的计时器 id
|
||
let windowStartDir = null; // 初始方向数组 [dx,dy]
|
||
let windowValid = false; // 在窗口期间是否一直保持初始方向
|
||
let inCooldown = false; // 触发后 0.1s 的占位期间，忽略新窗口
|
||
|
||
// 触发回调（你可以改成发事件或改成 setState）
|
||
function onDetected(arr) {
|
||
howtomove.value = arr
|
||
// console.log('DETECT ->', arr); // 例如 [1,1] 或 [-1,-1] 或 [2,2]
|
||
// 在这里把 arr 发给你的业务：比如更新某个 ref / 调用方法等
|
||
}
|
||
|
||
// 窗口到期时处理
|
||
function finishWindow() {
|
||
windowTimer = null;
|
||
// 如果窗口期间一直有效 且 方向不是 [0,0]
|
||
if (windowValid && windowStartDir && (windowStartDir[0] !== 0 || windowStartDir[1] !== 0)) {
|
||
onDetected(windowStartDir.slice()); // 立即返回方向
|
||
inCooldown = true;
|
||
// 0.1s 后返回占位 [2,2]，并结束 cooldown
|
||
setTimeout(() => {
|
||
onDetected([2, 2]);
|
||
inCooldown = false;
|
||
}, RESET_MS);
|
||
}
|
||
// 清理窗口状态（等待下一次 move 启动新窗口）
|
||
windowStartDir = null;
|
||
windowValid = false;
|
||
}
|
||
|
||
// 在 touchmove/getxyrel 中调用：传入数字 x,y
|
||
function detectorMove(x, y) {
|
||
if (inCooldown) return; // 占位期间忽略输入
|
||
|
||
const dir = getDir(x, y); // [dx,dy]
|
||
|
||
if (!windowTimer) {
|
||
// 没有在计时：开启一个新窗口
|
||
windowStartDir = dir.slice ? dir.slice() : [dir[0], dir[1]];
|
||
windowValid = true;
|
||
windowTimer = setTimeout(finishWindow, HOLD_MS);
|
||
return;
|
||
}
|
||
|
||
// 已在窗口中：只要方向与初始方向不同就把窗口标为无效
|
||
if (dir[0] !== windowStartDir[0] || dir[1] !== windowStartDir[1]) {
|
||
windowValid = false;
|
||
}
|
||
}
|
||
|
||
// 在 touchend / touchcancel 时调用，清理所有状态
|
||
function detectorEnd() {
|
||
if (windowTimer) {
|
||
clearTimeout(windowTimer);
|
||
windowTimer = null;
|
||
}
|
||
windowStartDir = null;
|
||
windowValid = false;
|
||
inCooldown = false;
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.flex {
|
||
|
||
display: flex;
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100vh;
|
||
background-color: #f4f4f4;
|
||
overflow: hidden;
|
||
z-index: 12;
|
||
}
|
||
|
||
.left {
|
||
width: 8.2vw;
|
||
height: 100vh;
|
||
|
||
}
|
||
|
||
.boxrt {
|
||
width: calc(100vw - 8.2vw);
|
||
background: RGBA(239, 240, 244, 1);
|
||
display: flex;
|
||
// padding-left: 1vw;
|
||
padding-top: 0.8vw;
|
||
}
|
||
|
||
.box {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 190rpx;
|
||
height: 140rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
will-change: transform;
|
||
pointer-events: none;
|
||
z-index: 200;
|
||
border: 2rpx dashed #0089FE;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.card-icon {
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
/* margin-bottom: 10rpx; */
|
||
}
|
||
|
||
.card-text {
|
||
margin-top: -10rpx;
|
||
color: #0089FE;
|
||
font-size: 26rpx;
|
||
}
|
||
|
||
.title-time-blue {
|
||
/* 你的定位与尺寸保持不变 */
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 107%;
|
||
height: 105%;
|
||
z-index: 10;
|
||
|
||
.blue-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
}
|
||
|
||
.card-box {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 259rpx;
|
||
height: 245rpx;
|
||
border-radius: 20rpx;
|
||
background: #fff;
|
||
will-change: transform;
|
||
pointer-events: none;
|
||
z-index: 200;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
|
||
.title-time-blue-card {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 98%;
|
||
height: 98%;
|
||
z-index: 10;
|
||
|
||
.blue-img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.card-bao {
|
||
position: absolute;
|
||
left: 35rpx;
|
||
top: 110rpx;
|
||
width: 32rpx;
|
||
height: 32rpx;
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background-color: #4690FF;
|
||
color: #fff;
|
||
border-radius: 5rpx;
|
||
}
|
||
|
||
.title-time-border-hisOk {
|
||
border: 2rpx solid #D4E4FE;
|
||
width: calc(100% - 15rpx);
|
||
height: calc(100% - 15rpx);
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
background-color: #F6F9FF;
|
||
flex-direction: column;
|
||
font-size: 30rpx;
|
||
overflow: hidden;
|
||
border: 2rpx solid #46B2F6;
|
||
|
||
.title-time {
|
||
display: flex;
|
||
width: 100%;
|
||
position: relative;
|
||
height: 100%;
|
||
padding: 25rpx;
|
||
padding-top: 18rpx;
|
||
flex-direction: column;
|
||
|
||
.title-time-font-rel {
|
||
margin-top: 9rpx;
|
||
font-size: 33rpx;
|
||
font-weight: 800;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: black;
|
||
}
|
||
|
||
.title-time-font-tags {
|
||
font-size: 24rpx;
|
||
font-weight: 600;
|
||
/* margin-bottom: 5rpx; */
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
color: #999;
|
||
}
|
||
|
||
.card-time {
|
||
position: absolute;
|
||
bottom: 30rpx;
|
||
left: 30rpx;
|
||
font-size: 30rpx;
|
||
|
||
.weight-time {
|
||
display: flex;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
|
||
.delete-view {
|
||
position: fixed;
|
||
right: -950rpx;
|
||
top: 3%;
|
||
width: 1100rpx;
|
||
height: 1100rpx;
|
||
border-radius: 50%;
|
||
background-color: rgba(238, 240, 248, 0.4);
|
||
z-index: 150;
|
||
|
||
.delete-img {
|
||
position: absolute;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
left: 50rpx;
|
||
width: 60rpx;
|
||
height: 65rpx;
|
||
}
|
||
}
|
||
</style> |