907 lines
20 KiB
Vue
907 lines
20 KiB
Vue
<template>
|
||
<view class="index-content-other">
|
||
<view class="index-content-right" @click="goback">
|
||
<image class="back-img" :src="`/static/index/settings/back.png`" />
|
||
返回
|
||
</view>
|
||
<view class="left-contain">
|
||
<view class="blue-bgc">
|
||
<image class="all-img" src="/static/index/leida/leftbgc.png" />
|
||
<image class="all-img" style="width: 90%;height: 90%;margin-top: 5%;margin-left: 5%;"
|
||
src="/static/index/leida/bigball.png" />
|
||
|
||
<!-- 旋转雷达部分 -->
|
||
<view class="inset-img" :style="insetStyle">
|
||
<image class="all-img" style="z-index: 2;" src="/static/index/leida/biao.png" />
|
||
<image class="all-img" style="z-index: 1;" src="/static/index/leida/ball.png" />
|
||
<image class="all-img" src="/static/index/leida/shallow.png" />
|
||
</view>
|
||
|
||
<!-- 小球层 -->
|
||
<view class="ball-layer">
|
||
<view v-for="ball in balls" :key="ball.id" class="ball" :style="{
|
||
width: ball.size + 'px',
|
||
height: ball.size + 'px',
|
||
top: ball.top + 'px',
|
||
left: ball.left + 'px',
|
||
backgroundColor: ball.color,
|
||
opacity: ball.opacity
|
||
}"></view>
|
||
</view>
|
||
</view>
|
||
<!-- 进度条 -->
|
||
<view style="width: 100%;display: flex;flex-direction: column;align-items: center;">
|
||
<view class="blue-button" style="margin-top: 0;" :class="targetNumber==-1?'zerotarget':''" @click="cantoggleRun">
|
||
{{ count===100?`扫描`: `扫描` }}
|
||
</view>
|
||
<view class="progress-wrap">
|
||
<view class="progress-inner" :style="{ width: count + '%' }"></view>
|
||
</view>
|
||
<view class="progress-text">{{ count }}%</view>
|
||
|
||
</view>
|
||
|
||
</view>
|
||
<view class="other">
|
||
<scroll-view ref="scrollViewRef" scroll-y class="other-father" :scroll-top="scrollTop">
|
||
<view class="card-father">
|
||
<view class="card" v-for="(allitem, allindex) in cardarray" :key="allindex"
|
||
:class="[ targetNumber===allindex &&infoNumber===-1 ? 'zerotarget' : '', { 'fade-in': allitem.isNew } ]"
|
||
@animationend="onAnimEnd(allitem)">
|
||
<!-- <view class="card-title">
|
||
<view style="font-size: 25rpx;">NUID:{{allitem.nuId}}</view>
|
||
<view class="right-box">护理单元</view>
|
||
</view> -->
|
||
<!-- <view class="card-bottom">
|
||
{{allitem.nuName}}
|
||
<image class="bottom-img" src="@/static/index/leida/rename.png"
|
||
@click="renamenummber=allindex;savevalue=allitem.nuName" />
|
||
</view> -->
|
||
|
||
|
||
<view class="main-title">
|
||
<view class="main-title-font" style="font-weight: 600;font-size: 40rpx;">
|
||
{{allitem.nuName}}
|
||
</view>
|
||
<view class="video-father" :class="targetNumber===allindex && infoNumber===0 ? 'zerotarget' : ''">
|
||
<image class="edit-img" @click=""
|
||
src="/static/index/leida/play.png" />
|
||
</view>
|
||
|
||
</view>
|
||
<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 50rpx;"
|
||
:class="targetNumber===allindex && infoNumber===1 ? 'zerotarget' : ''"
|
||
@click="rename(allindex,allitem) ">
|
||
重命名
|
||
</view>
|
||
<!-- <view class="main-title">
|
||
<view class="main-title-font" style="margin-top: 20rpx;">
|
||
NUID:{{allitem.nuId}}
|
||
</view>
|
||
|
||
</view> -->
|
||
<view class="card-tags">
|
||
<view style="margin-left: 80rpx;">
|
||
NUID:{{allitem.nuId}}
|
||
<!-- {{ allitem.areaFlagName?allitem.areaFlagName:"护理单元" }} -->
|
||
</view>
|
||
|
||
</view>
|
||
<view class="play-img">
|
||
护理单元
|
||
</view>
|
||
<!-- <image class="play-img" src="/static/index/leida/play.png" /> -->
|
||
</view>
|
||
<!-- 弹出层 -->
|
||
<view v-if="renamenummber!==-1" class="popup-any" :style="isdonghua?{opacity:1}:{opacity:0}">
|
||
<view class="mask" @click="renamenummber=-1"></view>
|
||
<view class="rename-father">
|
||
<view class="rename-title">
|
||
重命名
|
||
</view>
|
||
<view style="width: 100%;margin-left: 5rpx;margin-bottom: 20rpx;">
|
||
NUID:{{savenuId}}
|
||
<!-- {{ allitem.areaFlagName?allitem.areaFlagName:"护理单元" }} -->
|
||
</view>
|
||
<view class="rename-input">
|
||
<!-- <image class="left-img" src="@/static/index/click.png" /> -->
|
||
<input class="uni-input" placeholder="请重新命名" v-model="savevalue" />
|
||
<image v-show="savevalue" class="right-img" src="@/static/index/quxiao.png"
|
||
@click="savevalue=``" />
|
||
</view>
|
||
<view class="blue-button" style="width: 200rpx;height: 70rpx;margin-top: 40rpx;"
|
||
@click="changename(savevalue,renamenummber)">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<view class="index-content-down">
|
||
长春市朝阳区久泰开运养老服务有限公司
|
||
</view>
|
||
<arrowkeys @movecard="movecard" />
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, computed, onMounted, onBeforeUnmount, nextTick } from 'vue'
|
||
import { getCardList } from "@/component/Initialization/api.js"
|
||
|
||
const goback = () => {
|
||
uni.navigateBack()
|
||
}
|
||
|
||
/* ------------------ 旋转逻辑 ------------------ */
|
||
const running = ref(true)
|
||
const centerAngle = ref(0)
|
||
const speed = ref(100)
|
||
const renamenummber = ref(-1)
|
||
const savevalue = ref("");
|
||
const savenuId = ref();
|
||
const isdonghua = ref(false)
|
||
// const status = ref(0);
|
||
const rightbutton = ref([
|
||
{ url: '/static/index/leida/00.png', targetUrl: '/static/index/leida/01.png', target: false },
|
||
{ url: '/static/index/leida/10.png', targetUrl: '/static/index/leida/11.png', target: false },
|
||
{ url: '/static/index/leida/20.png', targetUrl: '/static/index/leida/21.png', target: false },
|
||
{ url: '/static/index/leida/30.png', targetUrl: '/static/index/leida/31.png', target: false }
|
||
])
|
||
const cardarray = ref<Array<{ menu : any; isNew : boolean; nuName : string }>>([])
|
||
const relArray = ref([]);
|
||
const scrollTop = ref(0);
|
||
|
||
let rafId : any = null
|
||
function raf(cb : FrameRequestCallback) {
|
||
if (typeof (globalThis as any).requestAnimationFrame === 'function') {
|
||
return (globalThis as any).requestAnimationFrame(cb)
|
||
} else {
|
||
return setTimeout(() => cb(Date.now() as unknown as DOMHighResTimeStamp), 16)
|
||
}
|
||
}
|
||
function caf(id : any) {
|
||
if (typeof (globalThis as any).cancelAnimationFrame === 'function') {
|
||
(globalThis as any).cancelAnimationFrame(id)
|
||
} else {
|
||
clearTimeout(id)
|
||
}
|
||
}
|
||
function nowTime(ts ?: number) {
|
||
if (typeof ts === 'number') return ts
|
||
if ((globalThis as any).performance?.now) {
|
||
return (globalThis as any).performance.now()
|
||
}
|
||
return Date.now()
|
||
}
|
||
|
||
let lastT : number | null = null
|
||
function loop(ts ?: number) {
|
||
const now = nowTime(ts)
|
||
if (!lastT) lastT = now
|
||
const dt = (now - lastT) / 1000
|
||
lastT = now
|
||
|
||
if (running.value) {
|
||
centerAngle.value = (centerAngle.value + speed.value * dt) % 360
|
||
}
|
||
|
||
rafId = raf(loop)
|
||
}
|
||
// 监听动画结束,清除标记
|
||
function onAnimEnd(item : { isNew : boolean }) {
|
||
item.isNew = false
|
||
}
|
||
function cantoggleRun() {
|
||
if (count.value === 100) {
|
||
startCounter()
|
||
toggleRun()
|
||
}
|
||
}
|
||
|
||
function toggleRun() {
|
||
running.value = !running.value
|
||
if (running.value) {
|
||
lastT = nowTime()
|
||
startBallGeneration()
|
||
} else {
|
||
stopBallGeneration()
|
||
}
|
||
}
|
||
const changename = (name, index) => {
|
||
if (name) {
|
||
cardarray.value[index].nuName = name;
|
||
}
|
||
renamenummber.value = -1
|
||
|
||
}
|
||
const insetStyle = computed(() => ({
|
||
transform: `rotate(${centerAngle.value}deg)`
|
||
}))
|
||
|
||
/* ------------------ 小球逻辑 ------------------ */
|
||
interface Ball {
|
||
id : number
|
||
size : number
|
||
top : number
|
||
left : number
|
||
color : string
|
||
opacity : number
|
||
}
|
||
const balls = ref<Ball[]>([])
|
||
let ballTimer : any = null
|
||
let ballId = 0
|
||
|
||
function createBall() {
|
||
const size = Math.random() * 1 + 5
|
||
const left = Math.random() * (200 - size)
|
||
const top = Math.random() * (200 - size)
|
||
const id = ballId++
|
||
const ball : Ball = {
|
||
id,
|
||
size,
|
||
left,
|
||
top,
|
||
color: "#02a9ff",
|
||
opacity: 0
|
||
}
|
||
balls.value.push(ball)
|
||
setTimeout(() => {
|
||
ball.opacity = 1
|
||
}, 20)
|
||
setTimeout(() => {
|
||
ball.opacity = 0
|
||
setTimeout(() => {
|
||
balls.value = balls.value.filter(b => b.id !== id)
|
||
}, 500)
|
||
}, 2000)
|
||
}
|
||
|
||
function startBallGeneration() {
|
||
if (ballTimer) return
|
||
ballTimer = setInterval(() => {
|
||
createBall()
|
||
}, 500)
|
||
}
|
||
function stopBallGeneration() {
|
||
clearInterval(ballTimer)
|
||
ballTimer = null
|
||
}
|
||
|
||
/* ------------------ 进度条逻辑 ------------------ */
|
||
const count = ref(0)
|
||
function startCounter() {
|
||
let start = Date.now()
|
||
let totalTime = 4000
|
||
let pausePoint = Math.floor(Math.random() * 30) + 30 // 30~60
|
||
let paused = false
|
||
let pauseDuration = Math.floor(Math.random() * 500) + 300 // 300~800ms
|
||
let pauseStart = 0
|
||
|
||
function update() {
|
||
let elapsed = Date.now() - start
|
||
|
||
// 到停顿点
|
||
if (!paused && count.value >= pausePoint) {
|
||
paused = true
|
||
pauseStart = Date.now()
|
||
}
|
||
|
||
// 停顿中
|
||
if (paused) {
|
||
if (Date.now() - pauseStart >= pauseDuration) {
|
||
paused = false
|
||
} else {
|
||
setTimeout(update, 16)
|
||
return
|
||
}
|
||
}
|
||
|
||
let progress = Math.min(elapsed / totalTime, 1)
|
||
count.value = Math.floor(progress * 100)
|
||
|
||
if (count.value === 100) {
|
||
toggleRun()
|
||
}
|
||
if (count.value < 100) {
|
||
setTimeout(update, 16)
|
||
}
|
||
}
|
||
getCardList().then(res => {
|
||
res.result.records.forEach((element : any) => {
|
||
element.menu = JSON.parse(JSON.stringify(rightbutton.value))
|
||
element.isNew = true
|
||
})
|
||
relArray.value = []
|
||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||
relArray.value.push(JSON.parse(JSON.stringify((res.result.records[0]))))
|
||
|
||
suiji()
|
||
})
|
||
setTimeout(update, 16)
|
||
}
|
||
// 随机生成并逐个添加卡片
|
||
function suiji() {
|
||
const n = relArray.value.length
|
||
cardarray.value = []
|
||
const randomWeights = Array.from({ length: n }, () => Math.random())
|
||
const totalWeight = randomWeights.reduce((a, b) => a + b, 0)
|
||
const intervals = randomWeights.map((w) => (w / totalWeight) * 4000)
|
||
let cumulative = 0
|
||
for (let i = 0; i < n; i++) {
|
||
cumulative += intervals[i]
|
||
setTimeout(async () => {
|
||
cardarray.value.push(relArray.value[i])
|
||
// 当卡片总数为 5,7,9,... 时滚动到底部
|
||
const len = cardarray.value.length
|
||
}, cumulative)
|
||
}
|
||
}
|
||
const rename = (index : number, item : any) => {
|
||
renamenummber.value = index;
|
||
savevalue.value = item.nuName;
|
||
savenuId.value = item.nuId
|
||
isdonghua.value = false;
|
||
setTimeout(() => {
|
||
isdonghua.value = true;
|
||
}, 50)
|
||
}
|
||
/* ------------------ 生命周期 ------------------ */
|
||
onMounted(() => {
|
||
init()
|
||
})
|
||
const init = () => {
|
||
lastT = nowTime()
|
||
rafId = raf(loop)
|
||
startBallGeneration()
|
||
startCounter()
|
||
}
|
||
const targetNumber = ref(-1)
|
||
const infoNumber = ref(-1)
|
||
const movecard = (where : number) => {
|
||
if (count.value !== 100) {
|
||
return
|
||
}
|
||
switch (where) {
|
||
case 0:
|
||
|
||
if (infoNumber.value === 0) {
|
||
infoNumber.value = 1
|
||
return
|
||
} else if (infoNumber.value === 1) {
|
||
infoNumber.value = 0
|
||
return
|
||
}
|
||
|
||
if (targetNumber.value - 2 < -1) {
|
||
targetNumber.value = -1
|
||
} else {
|
||
targetNumber.value = targetNumber.value - 2
|
||
ensureVisible(targetNumber.value)
|
||
}
|
||
break
|
||
case 1:
|
||
if (infoNumber.value === 0) {
|
||
infoNumber.value = 1
|
||
return
|
||
} else if (infoNumber.value === 1) {
|
||
infoNumber.value = 0
|
||
return
|
||
}
|
||
if (targetNumber.value + 1 > cardarray.value.length - 1) {
|
||
|
||
} else {
|
||
targetNumber.value++
|
||
ensureVisible(targetNumber.value)
|
||
}
|
||
break
|
||
case 2:
|
||
if (infoNumber.value === 0) {
|
||
infoNumber.value = 1
|
||
return
|
||
} else if (infoNumber.value === 1) {
|
||
infoNumber.value = 0
|
||
return
|
||
}
|
||
if (targetNumber.value + 1 === cardarray.value.length - 1 || targetNumber.value === -1) {
|
||
targetNumber.value++
|
||
ensureVisible(targetNumber.value)
|
||
}
|
||
else if (targetNumber.value + 2 > cardarray.value.length - 1) {
|
||
|
||
} else {
|
||
targetNumber.value = targetNumber.value + 2
|
||
ensureVisible(targetNumber.value)
|
||
}
|
||
break
|
||
case 3:
|
||
if (infoNumber.value === 0) {
|
||
infoNumber.value = 1
|
||
return
|
||
} else if (infoNumber.value === 1) {
|
||
infoNumber.value = 0
|
||
return
|
||
}
|
||
if (targetNumber.value !== -1) {
|
||
targetNumber.value--
|
||
ensureVisible(targetNumber.value)
|
||
}
|
||
break
|
||
case 4:
|
||
if(infoNumber.value ===1){
|
||
rename(targetNumber.value,cardarray.value[targetNumber.value])
|
||
return
|
||
}
|
||
if (targetNumber.value === -1) {
|
||
cantoggleRun()
|
||
} else {
|
||
infoNumber.value = 0;
|
||
}
|
||
|
||
break
|
||
case 5:
|
||
if(infoNumber.value !==-1){
|
||
infoNumber.value = -1
|
||
}else{
|
||
goback()
|
||
}
|
||
|
||
break
|
||
}
|
||
}
|
||
onBeforeUnmount(() => {
|
||
if (rafId != null) caf(rafId)
|
||
stopBallGeneration()
|
||
})
|
||
function ensureVisible(index : number) {
|
||
const count = cardarray.value.length
|
||
const COLS = 2
|
||
const ROW_HEIGHT = 245
|
||
const SCROLL_HEIGHT = 475 // scroll-view 固定高度
|
||
if (index < 0) index = 0
|
||
if (index >= count) index = count - 1
|
||
|
||
nextTick(() => {
|
||
const rowIndex = Math.floor(index / COLS)
|
||
const rowTop = rowIndex * ROW_HEIGHT
|
||
const rowBottom = rowTop + ROW_HEIGHT
|
||
|
||
const visibleTop = scrollTop.value
|
||
const visibleBottom = visibleTop + SCROLL_HEIGHT
|
||
|
||
let newTop = scrollTop.value
|
||
|
||
if (rowTop < visibleTop) {
|
||
// 目标行在可视区上方 -> 向上滚到该行顶部
|
||
newTop = rowTop
|
||
} else if (rowBottom > visibleBottom) {
|
||
// 目标行在可视区下方 -> 向下滚到让该行显示在底部可见
|
||
newTop = rowBottom - SCROLL_HEIGHT
|
||
} // 否则已经可见,不变
|
||
|
||
// 限制范围,避免越界
|
||
const totalRows = Math.ceil(count / COLS)
|
||
const totalHeight = totalRows * ROW_HEIGHT
|
||
const maxTop = Math.max(0, totalHeight - SCROLL_HEIGHT)
|
||
|
||
if (newTop < 0) newTop = 0
|
||
if (newTop > maxTop) newTop = maxTop
|
||
|
||
scrollTop.value = Math.round(newTop)
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.index-content-other {
|
||
width: 100%;
|
||
height: 100%;
|
||
position: relative;
|
||
background-color: #EFF0F4;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.index-content-down {
|
||
position: absolute;
|
||
bottom: 40rpx;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.index-content-right {
|
||
position: absolute;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
padding-top: 100rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.back-img {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
margin-left: 100rpx;
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.all-img {
|
||
position: absolute;
|
||
top: 0%;
|
||
left: 0%;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.blue-bgc {
|
||
width: 600rpx;
|
||
height: 600rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.inset-img {
|
||
width: 400rpx;
|
||
height: 400rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.ball-layer {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
width: 200px;
|
||
height: 200px;
|
||
transform: translate(-50%, -50%);
|
||
z-index: 999;
|
||
}
|
||
|
||
.ball {
|
||
position: absolute;
|
||
border-radius: 50%;
|
||
transition: opacity 0.5s ease;
|
||
z-index: 10;
|
||
}
|
||
|
||
/* 进度条样式 */
|
||
.progress-wrap {
|
||
width: 60%;
|
||
height: 13px;
|
||
background-color: #E6E9EE;
|
||
border-radius: 9999px;
|
||
overflow: hidden;
|
||
margin-top: 30px;
|
||
}
|
||
|
||
.progress-inner {
|
||
height: 100%;
|
||
background-image: linear-gradient(90deg, #0097FF 0%, #007CFF 100%);
|
||
border-radius: inherit;
|
||
transition: width 0.2s ease;
|
||
}
|
||
|
||
.progress-text {
|
||
margin-top: 8px;
|
||
font-size: 28rpx;
|
||
color: #007CFF;
|
||
}
|
||
|
||
.blue-button {
|
||
margin-top: 30rpx;
|
||
width: 250rpx;
|
||
height: 90rpx;
|
||
border-radius: 40rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #007CFF;
|
||
font-size: 30rpx;
|
||
background-color: #ddf0ff;
|
||
border: 1rpx solid #007CFF;
|
||
}
|
||
|
||
.other {
|
||
width: 50%;
|
||
height: 100%;
|
||
margin-left: 100rpx;
|
||
}
|
||
|
||
.other-father {
|
||
margin-top: 200rpx;
|
||
height: 950rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.card-father {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.card {
|
||
width: 45%;
|
||
margin-left: 4%;
|
||
height: 450rpx;
|
||
box-shadow: 3rpx 6rpx 12rpx 3rpx rgba(206, 206, 206, 0.5);
|
||
background-color: #f4f5f7;
|
||
border-radius: 30rpx;
|
||
margin-top: 5rpx;
|
||
margin-bottom: 35rpx;
|
||
padding: 0 25rpx;
|
||
position: relative;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
flex-direction: column;
|
||
overflow: hidden;
|
||
|
||
|
||
}
|
||
|
||
.card-title {
|
||
width: 100%;
|
||
height: 130rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
|
||
|
||
/* 旋转动画 */
|
||
@keyframes spin {
|
||
from {
|
||
transform: rotate(0deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes spinx {
|
||
from {
|
||
transform: rotate(-70deg);
|
||
}
|
||
|
||
to {
|
||
transform: rotate(290deg);
|
||
}
|
||
}
|
||
|
||
/* 新卡片淡入动画 */
|
||
@keyframes fadeIn {
|
||
from {
|
||
opacity: 0;
|
||
transform: translateY(10rpx);
|
||
}
|
||
|
||
to {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
}
|
||
|
||
.fade-in {
|
||
animation: fadeIn 0.4s ease-out forwards;
|
||
}
|
||
|
||
.index-content-title {
|
||
position: absolute;
|
||
top: 60rpx;
|
||
left: 60rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.shu {
|
||
width: 20rpx;
|
||
height: 50rpx;
|
||
background: linear-gradient(to right, #0052C2, #00B4FF);
|
||
border-radius: 20rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
|
||
.shu-font {
|
||
color: #415273;
|
||
font-size: 35rpx;
|
||
}
|
||
|
||
}
|
||
|
||
.right-box {
|
||
background: rgb(0, 171, 255);
|
||
width: 160rpx;
|
||
height: 65rpx;
|
||
border-radius: 20rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
color: #fff;
|
||
}
|
||
|
||
.card-bottom {
|
||
margin-top: 17rpx;
|
||
margin-left: 10rpx;
|
||
display: flex;
|
||
|
||
.bottom-img {
|
||
width: 38rpx;
|
||
height: 38rpx;
|
||
margin-left: 30rpx;
|
||
}
|
||
}
|
||
|
||
.left-contain {
|
||
margin-right: 80rpx;
|
||
}
|
||
|
||
.main-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-top: 70rpx;
|
||
margin-bottom: 10rpx;
|
||
}
|
||
|
||
.edit-img {
|
||
width: 40rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.card-tags {
|
||
position: absolute;
|
||
top: 50rpx;
|
||
left: 0rpx;
|
||
// background: linear-gradient(to right,#57B8FF,#0097FF);
|
||
width: 200rpx;
|
||
height: 65rpx;
|
||
font-size: 25rpx;
|
||
// color: #fff;
|
||
// border-radius: 35rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.play-img {
|
||
position: absolute;
|
||
top: 50rpx;
|
||
right: 30rpx;
|
||
width: 130rpx;
|
||
height: 55rpx;
|
||
font-size: 26rpx;
|
||
border-radius: 35rpx;
|
||
border: 2rpx solid #999;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.rename-father {
|
||
position: fixed;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: 600rpx;
|
||
height: 420rpx;
|
||
border-radius: 30rpx;
|
||
box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
|
||
background-color: #fff;
|
||
display: flex;
|
||
// justify-content: center;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
padding: 0 30rpx;
|
||
z-index: 999;
|
||
|
||
.rename-title {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
// border-bottom: 2rpx solid rgb(245, 245, 245);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
// margin: 30rpx 0;
|
||
margin-top: 30rpx;
|
||
margin-bottom: 20rpx;
|
||
font-size: 32rpx;
|
||
}
|
||
|
||
.rename-gray {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
// justify-content: center;
|
||
color: rgb(167, 167, 167);
|
||
align-items: center;
|
||
}
|
||
|
||
.rename-input {
|
||
width: 100%;
|
||
height: 80rpx;
|
||
display: flex;
|
||
background-color: rgb(245, 246, 250);
|
||
border-radius: 20rpx;
|
||
color: rgb(167, 167, 167);
|
||
align-items: center;
|
||
padding: 0 20rpx;
|
||
position: relative;
|
||
|
||
.uni-input {
|
||
font-size: 25rpx;
|
||
width: 100%;
|
||
}
|
||
|
||
.left-img {
|
||
width: 50rpx;
|
||
height: 50rpx;
|
||
margin-right: 15rpx;
|
||
}
|
||
|
||
.right-img {
|
||
position: absolute;
|
||
right: 30rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.popup-any {
|
||
position: fixed;
|
||
inset: 0;
|
||
z-index: 999;
|
||
/* 初始透明度 */
|
||
opacity: 0;
|
||
/* 播放动画:名称 fadeIn,时长 0.5s,缓动函数 ease,保持最后状态 */
|
||
transition: opacity 0.5s ease;
|
||
backdrop-filter: blur(1rpx);
|
||
background-color: rgba(236, 237, 241, 0.4);
|
||
/* 添加毛玻璃效果 */
|
||
z-index: 999;
|
||
}
|
||
|
||
.mask {
|
||
position: absolute;
|
||
inset: 0;
|
||
}
|
||
.video-father{
|
||
width: 60rpx;
|
||
height: 60rpx;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin-left: 15rpx;
|
||
}
|
||
.zerotarget {
|
||
--color: #99C9FD;
|
||
--thick: 2px;
|
||
--radius: 30rpx;
|
||
--outline-offset: 0rpx;
|
||
/* 外扩多少 */
|
||
/* 内层虚线(你现在用的) */
|
||
border-radius: var(--radius);
|
||
background-color: white;
|
||
/* 内部背景 */
|
||
animation: scalePulse 360ms cubic-bezier(.2, .8, .2, 1);
|
||
/* 外层虚线:放在 outline(不会影响元素尺寸) */
|
||
outline: var(--thick) dashed var(--color);
|
||
outline-offset: var(--outline-offset);
|
||
|
||
/* 保证文本 / 子元素在最上层 */
|
||
position: relative;
|
||
z-index: 0;
|
||
}
|
||
</style> |