794 lines
20 KiB
Vue
794 lines
20 KiB
Vue
<template>
|
||
<view class="backgroundContainer" @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>
|
||
<!-- 左侧菜单 -->
|
||
<leftcontent :list="arrlist" @navurl="navurl" :userInfo="userInfo"></leftcontent>
|
||
<!-- 主页 -->
|
||
<!-- <index :isShow="menuIndex==0" v-if="swipedex==0&&!specialPage" @swip="swip" @gospecial="gospecial" /> -->
|
||
<index :isShow="menuIndex==0" v-if="swipedex==0&&!specialPage" @swip="swip" @gospecial="gospecial" />
|
||
<!-- 新主页 -->
|
||
|
||
<bignurse :isshow="menuIndex==0"
|
||
v-if="swipedex==0&&specialPage==1&&uni.getStorageSync('elderId')&&uni.getStorageSync('nuId')" />
|
||
<!-- 户嘱页 -->
|
||
<newnurse :isshow="menuIndex==1" v-if="swipedex==1" :canmove="startmoveit" :sendxy="targetrule" :isblue='isblue' :howtomove="howtomove"
|
||
:targetrule="targetrule" @handsend="handsend" @rulepush="rulepush" />
|
||
<!-- 医嘱 -->
|
||
<doctorask v-if="swipedex==2&&uni.getStorageSync('elderId')&&uni.getStorageSync('nuId')" />
|
||
<logistics :isshow="menuIndex==3"
|
||
v-if="swipedex==3&&uni.getStorageSync('elderId')&&uni.getStorageSync('nuId')" />
|
||
|
||
<invoicing :isshow="menuIndex==6"
|
||
v-if="swipedex==6&&uni.getStorageSync('elderId')&&uni.getStorageSync('nuId')" />
|
||
|
||
<!-- 医嘱页 -->
|
||
<!-- <logistics :isShow="menuIndexshowfourth" v-if="menuIndex==3" /> -->
|
||
<requestform :isShow="menuIndex==4" v-if="swipedex==4" />
|
||
<!-- 设备页 -->
|
||
<equipment :isShow="menuIndex==5" v-if="swipedex==5" />
|
||
<!-- 没有数据 -->
|
||
<view class="nomessageclass" :style="messageopit?{opacity: `1`}:{opacity: `0`}"
|
||
v-if="(menuIndex == 1 || menuIndex == 2) && (!uni.getStorageSync('elderId') ||!uni.getStorageSync('nuId'))">
|
||
<defaultr cont="暂无老人入住"></defaultr>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
||
import { queryPadPageList, getPermissionList } from '@/pages/watch/api/lunpan.js'
|
||
import index from "./component/index.vue"
|
||
import newnurse from "./component/nurse/newindex.vue"
|
||
import equipment from "./component/equipment.vue"
|
||
import logistics from "./component/logistics/index.vue"
|
||
import invoicing from "./component/invoicing/index.vue"
|
||
|
||
import requestform from "./component/pleasetake/takehome.vue"
|
||
import doctorask from "./component/doctorask/doctorask.vue"
|
||
// import nurse from "./component/nurse/index.vue"
|
||
import bignurse from "./component/nurse/bigindex.vue"
|
||
import { onBackPress, onShow } from '@dcloudio/uni-app';
|
||
import { getNcPackagelist } from './component/nurse/api.js'
|
||
import leftcontent from "./component/leftcontent/leftcontent.vue"
|
||
import defaultr from '@/pages/procurement/components/default.vue';
|
||
|
||
onBackPress(() => {
|
||
if (specialPage.value) {
|
||
specialPage.value--
|
||
return true; // 禁止返回手势返回
|
||
} else {
|
||
return false; // 禁止返回手势返回
|
||
}
|
||
|
||
})
|
||
|
||
const listarr = ref([]);
|
||
onMounted(() => {
|
||
menuIndex.value = 0;
|
||
swipedex.value = 0;
|
||
|
||
getNcPackagelist().then((res : any) => {
|
||
//缓存指令包
|
||
// console.log("缓存指令包", res)
|
||
uni.setStorageSync("Packagelist", res.result)
|
||
})
|
||
getPermissionList({ employessId: uni.getStorageSync('userInfo').employessId }).then(res => {
|
||
listarr.value = res.result;
|
||
// console.log("这个是啥", listarr.value)
|
||
})
|
||
})
|
||
const gospecial = (index : number) => {
|
||
specialPage.value = index
|
||
}
|
||
// 通用的生成函数
|
||
function genPaths(base, prefix, count, ext = 'png', startIndex = 0, pad = false) {
|
||
return Array.from({ length: count }, (_, i) => {
|
||
const idx = pad
|
||
? String(i + startIndex).padStart(2, '0')
|
||
: i + startIndex
|
||
return `${base}/${prefix}${idx}.${ext}`
|
||
})
|
||
}
|
||
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/q0.png', urls: '/static/shouye/sy/q1.png', type: 'kzgn_hqjz' },
|
||
{ name: '库房', url: '/static/shouye/sy/l0.png', urls: '/static/shouye/sy/l1.png', type: 'kzgn_kfjz' },
|
||
])
|
||
const specialPage = ref(0)
|
||
const navurl = (e, v) => {
|
||
swipedex.value = -1;
|
||
specialPage.value = 0
|
||
switch (v.type) {
|
||
case 'hldy':
|
||
swipedex.value = 0;
|
||
setTimeout(() => {
|
||
menuIndex.value = 0;
|
||
}, 100)
|
||
// console.log('护理单元')
|
||
break;
|
||
case 'kzgn_hljz':
|
||
swipedex.value = 1;
|
||
setTimeout(() => {
|
||
menuIndex.value = 1;
|
||
}, 100)
|
||
// console.log('护理矩阵')
|
||
break;
|
||
case 'kzgn_yljz':
|
||
swipedex.value = 2;
|
||
setTimeout(() => {
|
||
menuIndex.value = 2;
|
||
}, 100)
|
||
// console.log('医疗矩阵')
|
||
break;
|
||
case 'kzgn_hqjz':
|
||
swipedex.value = 3;
|
||
setTimeout(() => {
|
||
menuIndex.value = 3;
|
||
}, 100)
|
||
// console.log('后勤矩阵')
|
||
break;
|
||
case 'kzgn_kfjz':
|
||
swipedex.value = 6;
|
||
setTimeout(() => {
|
||
menuIndex.value = 6;
|
||
}, 100)
|
||
//console.log('库房')
|
||
break;
|
||
case 'kf_cg':
|
||
//console.log('采购')
|
||
break;
|
||
case 'kf_jh':
|
||
//console.log('拣货')
|
||
break;
|
||
case 'kf_wj':
|
||
//console.log('完结')
|
||
break;
|
||
case 'hldy_ql':
|
||
swipedex.value = 4;
|
||
setTimeout(() => {
|
||
menuIndex.value = 4;
|
||
}, 100)
|
||
//console.log('请领')
|
||
break;
|
||
case 'kf_th':
|
||
//console.log('退货')
|
||
break;
|
||
case 'kf_pd':
|
||
//console.log('盘点')
|
||
break;
|
||
case 'wl':
|
||
swipedex.value = 5;
|
||
setTimeout(() => {
|
||
menuIndex.value = 5;
|
||
}, 100)
|
||
//console.log('物联')
|
||
break;
|
||
case 'back':
|
||
uni.navigateBack()
|
||
//console.log('物联')
|
||
break;
|
||
|
||
default:
|
||
break;
|
||
}
|
||
//
|
||
|
||
}
|
||
const arrlist = ref([
|
||
{ name: '首页', url: '/static/shouye/sy/h0.png', urls: '/static/shouye/sy/h1.png', type: 'hldy' }
|
||
])
|
||
const swip = () => {
|
||
let nuId = uni.getStorageSync('nuId');
|
||
let arrs = [];
|
||
listarr.value.forEach(item => {
|
||
if (item.nuId == nuId) {
|
||
arrs = 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/sy/h0.png', urls: '/static/shouye/sy/h1.png', type: 'hldy' }];
|
||
let tbr = [];
|
||
// console.log("xxxx",arr)
|
||
if (arr) {
|
||
arr.forEach((v, i) => {
|
||
let obj = arrs.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/l0.png', urls: '/static/shouye/sy/l1.png', type: 'hldy_ql' },
|
||
{ name: '物联', url: '/static/shouye/sy/g0.png', urls: '/static/shouye/sy/g1.png', type: 'wl' },
|
||
{ name: '返回', url: '/static/shouye/sy/f0.png', urls: '/static/shouye/sy/f1.png', type: 'back' }
|
||
]
|
||
arrlist.value.push(...back);
|
||
// navurl(0,arrlist.value[0])
|
||
}))
|
||
}
|
||
// 当前选中的菜单索引
|
||
const menuIndex = ref<number>(-1);
|
||
const swipedex = ref<number>(-1);
|
||
const menuIndexshow = ref<boolean>(false);
|
||
const menuIndexshowsecond = ref<boolean>(false);
|
||
const menuIndexshowfourth = ref<boolean>(false);
|
||
const menuIndexshowfifth = ref<boolean>(false);
|
||
const messageopit = ref<boolean>(false);
|
||
|
||
// 变更菜单
|
||
const changeMenu = (index : number) => {
|
||
if (index === menuIndex.value) {
|
||
return
|
||
}
|
||
menuIndex.value = index;
|
||
menuIndexshow.value = false
|
||
menuIndexshowsecond.value = false
|
||
menuIndexshowfourth.value = false;
|
||
menuIndexshowfifth.value = false
|
||
if (index === arrlist.value.length - 1) {
|
||
uni.navigateBack()
|
||
return
|
||
}
|
||
setTimeout(() => {
|
||
switch (index) {
|
||
case 0:
|
||
menuIndexshow.value = true
|
||
break;
|
||
case 1:
|
||
menuIndexshowsecond.value = true
|
||
nomesssageshow()
|
||
break;
|
||
case 2:
|
||
|
||
nomesssageshow()
|
||
break;
|
||
case 3:
|
||
menuIndexshowfourth.value = true
|
||
break;
|
||
case 4:
|
||
menuIndexshowfifth.value = true;
|
||
break;
|
||
case 5:
|
||
menuIndexshowfourth.value = true
|
||
break;
|
||
|
||
default:
|
||
}
|
||
}, 50)
|
||
};
|
||
const clientX = ref(0);
|
||
const clientY = ref(0);
|
||
const savename = ref("")
|
||
|
||
|
||
// 生命周期钩子
|
||
onMounted(() => {
|
||
|
||
//首次加载和跳转回来需要重新做个动画
|
||
setTimeout(() => {
|
||
changeMenu(menuIndex.value)
|
||
}, 50)
|
||
|
||
menuIndexshow.value = false
|
||
setTimeout(() => {
|
||
menuIndexshow.value = true
|
||
}, 50)
|
||
|
||
});
|
||
|
||
const nomesssageshow = () => {
|
||
messageopit.value = false;
|
||
setTimeout(() => {
|
||
messageopit.value = true;
|
||
}, 200)
|
||
}
|
||
const userInfo = 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 (!movelook.value.url) {
|
||
movelook.value.url = `/static/index/sharelogo.png`
|
||
}
|
||
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 >= 147 &&
|
||
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 lang="less" scoped>
|
||
.backgroundContainer {
|
||
display: flex;
|
||
position: relative;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
z-index: 9999;
|
||
background-color: #f4f4f4;
|
||
}
|
||
|
||
.nomessageclass {
|
||
width: 100vw;
|
||
transition: opacity 1s ease;
|
||
}
|
||
|
||
.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> |