972 lines
23 KiB
Vue
972 lines
23 KiB
Vue
<template>
|
|
<view class="index-content-other" v-show="isShow" :style="transition?{opacity: `1`}:{opacity: `0`}">
|
|
<view class="index-content-right">
|
|
<view style="display: flex;">
|
|
<view v-for="(item,index) in tabsArray" :key="index" class="tab" @click="clicktab(index)">
|
|
<view :style="tabnumber===index?{fontWeight:800}:{}" style="z-index: 1;">
|
|
{{item}}
|
|
</view>
|
|
<view class="tab-heng" v-show="tabnumber===index"></view>
|
|
</view>
|
|
</view>
|
|
|
|
<scroll-view scroll-y style="height: calc(100% - 105rpx);" :show-scrollbar="false">
|
|
<view class="scroll-box">
|
|
<view v-for="(item0,index0) in changearray" :key="index0">
|
|
<view class="card" v-if="!item0.cardtype"
|
|
:style="item0.states===1?{border:`2rpx solid red`,boxShadow:`none`}:{}">
|
|
<view class="card-left">
|
|
<view class="card-left-title">
|
|
<view class="left-view">
|
|
<image class="left-view-img" src="/static/index/oldman.png" />
|
|
<view>
|
|
<view class="top-font-line">
|
|
<view class="line-weight">王金凤</view>
|
|
<view class="line-margin">
|
|
女
|
|
</view>
|
|
<view class="">
|
|
80岁
|
|
</view>
|
|
</view>
|
|
<view class="top-font-line">
|
|
<view class="font-gray">
|
|
省医保 | 重度失能 | 正常缴费
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="right-spec">
|
|
<view class="blue-button">
|
|
服务指令
|
|
</view>
|
|
<view class="font-gray-right">
|
|
2025.01.01
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="bottom-balls">
|
|
<view v-for="(item1,index1) in bottomballarray" :key="index1"
|
|
class="one-ball-father">
|
|
<image class="one-ball" :src="item1" />
|
|
</view>
|
|
</view>
|
|
<view class="right-balls">
|
|
<view v-for="(item1,index1) in righttoparray" :key="index1"
|
|
:class="cardarray[index0]?.buttontarget[index1]?`blue-ball-father-target`:`blue-ball-father`"
|
|
@click="cardarray[index0].buttontarget[index1] = !cardarray[index0].buttontarget[index1]">
|
|
<image class="blue-ball"
|
|
:src="cardarray[index0]?.buttontarget[index1]? item1.targeturl : item1.url" />
|
|
</view>
|
|
</view>
|
|
<image class="video-img" src="/static/index/bed.png" />
|
|
<view class="video-bottom">
|
|
<view class="font-bottom-weight">
|
|
护理单元
|
|
</view>
|
|
<view class="bottom-shu">|</view>
|
|
<view class="">
|
|
NUID:2506000001
|
|
</view>
|
|
<view class="bottom-shu">|</view>
|
|
<view class="">
|
|
未命名01
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-right">
|
|
<view class="right-title">
|
|
|
|
<image style="width: 100%;height: 100%;"
|
|
:src="`/static/index/video/videotopright/${item0.states}${item0.states}.png`" />
|
|
<view class="right-other">
|
|
<image class="other-class" :src="rightballarray[item0.states].url" />
|
|
<view class="other-font">
|
|
{{rightballarray[item0.states].name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if="item0.states==1 || !item0.states" style="width: 100%;position: relative;">
|
|
<view class="right-time">
|
|
<view class="right-laba">
|
|
<image class="laba-img" src="/static/index/video/laba.png" />
|
|
</view>
|
|
<view class="right-laba">
|
|
<image class="laba-img" src="/static/index/video/video.png" />
|
|
</view>
|
|
<view class="right-laba">
|
|
<image class="laba-img" src="/static/index/video/txt.png" />
|
|
</view>
|
|
</view>
|
|
<view class="time">
|
|
<view class="time-left">
|
|
<view style="width: 100%;display: flex;justify-content: flex-end;">
|
|
<view class="time-right">
|
|
待执行
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
10:00-10:10
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image class="time-img" src="/static/index/teeth.png" @click="jumptodanyuan" />
|
|
<view class="time-weight">
|
|
准备洁具(口腔)
|
|
</view>
|
|
<view class="time-people-two" style="margin-top: 20rpx;">
|
|
<image class="time-people-img" src="/static/index/cardicons/zhixing.png" />
|
|
<text class="time-people-font">
|
|
单人执行
|
|
</text>
|
|
</view>
|
|
<view class="time-people-two">
|
|
<image class="time-people-img" src="/static/index/cardicons/zhifa.png" />
|
|
<text class="time-people-font">
|
|
王金福 / 李贵田
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="item0.states==2"
|
|
style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
|
|
<image class="fail-img" src="/static/index/video/videotopright/goto.png"
|
|
@click="jumptodanyuan" />
|
|
<view class="fail-text">
|
|
长者外出
|
|
</view>
|
|
</view>
|
|
<view v-if="item0.states==3"
|
|
style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
|
|
<image class="fail-img-spec" src="/static/index/video/videotopright/none.png"
|
|
@click="jumptodanyuan" />
|
|
<view class="fail-text-spec">
|
|
暂无长者入住
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card" v-if="item0.cardtype">
|
|
<view class="card-left">
|
|
<view class="card-left-title">
|
|
<view class="left-view">
|
|
<image class="left-view-img" src="/static/index/badman.png"
|
|
style="width: 70rpx;height: 80rpx;" />
|
|
<view style="margin-left: 10rpx;width: 150rpx;">
|
|
<!-- <view class=""> -->
|
|
<view style="font-size: 35rpx;font-weight: 600;margin-top:20rpx;margin-left: 10rpx;">欧阳三四</view>
|
|
<!-- </view> -->
|
|
<!-- <view class="top-font-line">
|
|
<view class="font-gray">
|
|
13800000000
|
|
</view>
|
|
</view> -->
|
|
</view>
|
|
<view style="display: flex;align-items: center;margin-top: -10rpx;">
|
|
<view
|
|
style="margin-left: 20rpx;display: flex;flex-direction: column;align-items: center;position: relative;"
|
|
v-for="(item,index2) in kufangarray" :key="index2">
|
|
<image class="kufang-img"
|
|
:src="item0.movestates===index2 ? item.targeturl : item.url" />
|
|
<view style="font-size: 25rpx;"
|
|
:style="item0.movestates===index2 ? {color:`#00B4FF`} :{} ">
|
|
{{ item.name }}
|
|
</view>
|
|
<!-- <view class="tab-heng" v-show="item0.movestates===index2"></view> -->
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="bottom-balls">
|
|
<view v-for="(item1,index1) in bottomballarray" :key="index1"
|
|
class="one-ball-father">
|
|
<image class="one-ball" :src="item1" />
|
|
|
|
</view>
|
|
</view>
|
|
<view class="right-balls">
|
|
<view v-for="(item1,index1) in righttoparray" :key="index1"
|
|
:class="cardarray[index0]?.buttontarget[index1]?`blue-ball-father-target`:`blue-ball-father`"
|
|
@click="cardarray[index0].buttontarget[index1] = !cardarray[index0].buttontarget[index1]">
|
|
<image class="blue-ball"
|
|
:src="cardarray[index0]?.buttontarget[index1]? item1.targeturl : item1.url" />
|
|
</view>
|
|
</view>
|
|
<image class="video-img" src="/static/index/bed.png" />
|
|
<view class="video-bottom">
|
|
<view class="font-bottom-weight">
|
|
库房
|
|
</view>
|
|
<view class="bottom-shu">|</view>
|
|
<view class="">
|
|
NUID:2506000001
|
|
</view>
|
|
<view class="bottom-shu">|</view>
|
|
<view class="">
|
|
库房01
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="card-right">
|
|
<view class="right-title">
|
|
<image style="width: 100%;height: 100%;"
|
|
:src="`/static/index/video/videotopright/${item0.states + 4}${item0.states + 4}.png`" />
|
|
<view class="right-other">
|
|
<image class="other-class" :src="rightballarrayspec[item0.states].url" />
|
|
<view class="other-font">
|
|
{{rightballarrayspec[item0.states].name}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view v-if=" !item0.states" style="width: 100%;position: relative;">
|
|
<view class="right-time">
|
|
<view class="right-laba">
|
|
<image class="laba-img" src="/static/index/video/laba.png" />
|
|
</view>
|
|
<view class="right-laba">
|
|
<image class="laba-img" src="/static/index/video/video.png" />
|
|
</view>
|
|
<view class="right-laba">
|
|
<image class="laba-img" src="/static/index/video/txt.png" />
|
|
</view>
|
|
</view>
|
|
<view class="time">
|
|
<view class="time-left">
|
|
<view style="width: 100%;display: flex;justify-content: flex-end;">
|
|
<view class="time-right">
|
|
待执行
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
10:00-10:10
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<image class="time-img" src="/static/index/teeth.png" @click="jumptokufang" />
|
|
<view class="time-weight">
|
|
准备洁具(口腔)
|
|
</view>
|
|
<view class="time-people-two" style="margin-top: 20rpx;">
|
|
<image class="time-people-img" src="/static/index/cardicons/zhixing.png" />
|
|
<text class="time-people-font">
|
|
单人执行
|
|
</text>
|
|
</view>
|
|
<view class="time-people-two">
|
|
<image class="time-people-img" src="/static/index/cardicons/zhifa.png" />
|
|
<text class="time-people-font">
|
|
王金福 / 李贵田
|
|
</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="item0.states==1"
|
|
style="width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;flex-direction: column;">
|
|
<image class="fail-img" style="width: 150rpx;height: 180rpx;"
|
|
src="/static/index/video/videotopright/stop.png" @click="jumptokufang" />
|
|
<view class="fail-text">
|
|
库房已停用
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
|
|
<!--
|
|
<view class="index-content-down">
|
|
长春市朝阳区久泰开运养老服务有限公司
|
|
</view> -->
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, onMounted, watch, nextTick } from 'vue'
|
|
import { onLoad, onShow } from '@dcloudio/uni-app';
|
|
import { defineProps, defineEmits } from 'vue'
|
|
|
|
|
|
const emit = defineEmits(['nav'])
|
|
const props = defineProps({ isShow: { type: Boolean, required: true } })
|
|
|
|
const bottomballarray = ref([
|
|
"/static/index/video/videobottom/0.png",
|
|
"/static/index/video/videobottom/1.png",
|
|
"/static/index/video/videobottom/2.png",
|
|
"/static/index/video/videobottom/3.png",
|
|
"/static/index/video/videobottom/4.png"
|
|
])
|
|
|
|
const rightballarray = ref([
|
|
{
|
|
url: `/static/index/video/videotopright/0.png`,
|
|
name: `入住`
|
|
},
|
|
{
|
|
url: `/static/index/video/videotopright/1.png`,
|
|
name: `预警`
|
|
},
|
|
{
|
|
url: `/static/index/video/videotopright/2.png`,
|
|
name: `外出`
|
|
},
|
|
{
|
|
url: `/static/index/video/videotopright/3.png`,
|
|
name: `空闲`
|
|
},
|
|
|
|
])
|
|
const kufangarray = ref([
|
|
{
|
|
url: `/static/index/video/kufang/00.png`,
|
|
targeturl: `/static/index/video/kufang/01.png`,
|
|
name: `盘点`
|
|
},
|
|
{
|
|
url: `/static/index/video/kufang/10.png`,
|
|
targeturl: `/static/index/video/kufang/11.png`,
|
|
name: `请领`
|
|
},
|
|
{
|
|
url: `/static/index/video/kufang/20.png`,
|
|
targeturl: `/static/index/video/kufang/21.png`,
|
|
name: `退货`
|
|
},
|
|
{
|
|
url: `/static/index/video/kufang/30.png`,
|
|
targeturl: `/static/index/video/kufang/31.png`,
|
|
name: `采购`
|
|
},
|
|
{
|
|
url: `/static/index/video/kufang/40.png`,
|
|
targeturl: `/static/index/video/kufang/41.png`,
|
|
name: `指令`
|
|
},
|
|
|
|
])
|
|
const rightballarrayspec = ref([
|
|
{
|
|
url: `/static/index/video/videotopright/4.png`,
|
|
name: `启用`
|
|
},
|
|
{
|
|
url: `/static/index/video/videotopright/5.png`,
|
|
name: `停用`
|
|
},
|
|
|
|
|
|
])
|
|
|
|
const righttoparray = ref([
|
|
{
|
|
url: `/static/index/video/videoright/00.png`,
|
|
targeturl: `/static/index/video/videoright/01.png`
|
|
},
|
|
{
|
|
url: `/static/index/video/videoright/10.png`,
|
|
targeturl: `/static/index/video/videoright/11.png`
|
|
},
|
|
{
|
|
url: `/static/index/video/videoright/20.png`,
|
|
targeturl: `/static/index/video/videoright/21.png`
|
|
},
|
|
{
|
|
url: `/static/index/video/videoright/30.png`,
|
|
targeturl: `/static/index/video/videoright/31.png`
|
|
},
|
|
{
|
|
url: `/static/index/video/videoright/40.png`,
|
|
targeturl: `/static/index/video/videoright/41.png`
|
|
},
|
|
|
|
])
|
|
|
|
const cardarray = ref([
|
|
{
|
|
cardtype: 0,
|
|
states: 0,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
{
|
|
cardtype: 0,
|
|
states: 1,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
{
|
|
cardtype: 0,
|
|
states: 2,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
{
|
|
cardtype: 0,
|
|
states: 3,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
{
|
|
cardtype: 0,
|
|
states: 0,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
{
|
|
cardtype: 1,
|
|
states: 0,
|
|
movestates: 0,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
{
|
|
cardtype: 1,
|
|
states: 1,
|
|
movestates: 1,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
{
|
|
cardtype: 1,
|
|
states: 0,
|
|
movestates: 2,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
{
|
|
cardtype: 1,
|
|
states: 0,
|
|
movestates: 3,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
{
|
|
cardtype: 1,
|
|
states: 0,
|
|
movestates: 4,
|
|
buttontarget: [false, false, false, false, false]
|
|
},
|
|
])
|
|
const changearray = ref([])
|
|
const transition = ref(true)
|
|
const uuid = ref("")
|
|
const tabsArray = ref(["全部", " 护理单元", "配务室", "库房"])
|
|
|
|
// 区分首次渲染与动态添加
|
|
watch(
|
|
() => props.isShow,
|
|
(newVal, oldVal) => {
|
|
if (!oldVal && newVal) {
|
|
transition.value = false
|
|
setTimeout(() => (transition.value = true), 50)
|
|
tabnumber.value = 0
|
|
changearray.value = JSON.parse(JSON.stringify(cardarray.value))
|
|
|
|
}
|
|
}
|
|
)
|
|
onLoad(() => {
|
|
// tabnumber.value = 0
|
|
changearray.value = JSON.parse(JSON.stringify(cardarray.value))
|
|
|
|
})
|
|
const tabnumber = ref(0)
|
|
const clicktab = (index : number) => {
|
|
if (tabnumber.value !== index) {
|
|
tabnumber.value = index;
|
|
console.log("???", index)
|
|
switch (index) {
|
|
case 0:
|
|
changearray.value = JSON.parse(JSON.stringify(cardarray.value))
|
|
break
|
|
case 1:
|
|
changearray.value = []
|
|
cardarray.value.forEach((element : any) => {
|
|
if (!element.cardtype) {
|
|
changearray.value.push(element)
|
|
}
|
|
})
|
|
break
|
|
case 2:
|
|
changearray.value = []
|
|
break
|
|
// cardarray.value.forEach((element:any)=>{
|
|
// if(!element.cardtype){
|
|
// changearray.value.push(element)
|
|
// }
|
|
// })
|
|
case 3:
|
|
changearray.value = []
|
|
cardarray.value.forEach((element : any) => {
|
|
if (element.cardtype === 1) {
|
|
changearray.value.push(element)
|
|
}
|
|
})
|
|
break
|
|
default:
|
|
return '';
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
const jumptodanyuan = () => {
|
|
uni.navigateTo({
|
|
url: "/pages/Nursing/index"
|
|
});
|
|
}
|
|
|
|
const jumptokufang = () => {
|
|
uni.navigateTo({
|
|
url: "/pages/Warehousing/index"
|
|
});
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.index-content-other {
|
|
width: calc(100% - 170rpx);
|
|
height: 100%;
|
|
transition: opacity 1s ease;
|
|
position: relative;
|
|
}
|
|
|
|
.index-content-down {
|
|
width: calc(100% - 60rpx);
|
|
height: 100rpx;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
}
|
|
|
|
.index-content-right {
|
|
height: calc(100% - 30rpx);
|
|
width: calc(100% - 60rpx);
|
|
background-color: rgba(255, 255, 255, 0.4);
|
|
background-image: url('/static/index/leida/bgc.png');
|
|
background-position: 30% 70%;
|
|
border-radius: 50rpx;
|
|
border: 1rpx solid #fff;
|
|
// box-shadow: 4rpx 8rpx 16rpx 4rpx rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.blue-button {
|
|
margin-left: 30rpx;
|
|
width: 170rpx;
|
|
height: 90rpx;
|
|
border-radius: 30rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 30rpx;
|
|
background: linear-gradient(to bottom, #00C9FF, #0076FF);
|
|
}
|
|
|
|
.big-ball {
|
|
width: 200rpx;
|
|
height: 200rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: -55rpx;
|
|
transform: translateY(-50%);
|
|
border-radius: 50%;
|
|
background-color: rgb(219, 228, 246);
|
|
|
|
.ball {
|
|
width: 150rpx;
|
|
height: 150rpx;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
border-radius: 50%;
|
|
background-color: rgb(207, 221, 241);
|
|
}
|
|
}
|
|
|
|
.tab {
|
|
width: 200rpx;
|
|
height: 100rpx;
|
|
font-size: 32rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
.tab-heng {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: 28rpx;
|
|
transform: translateX(-50%);
|
|
width: 50rpx;
|
|
height: 12rpx;
|
|
border-radius: 10rpx;
|
|
background-color: #00B4FF;
|
|
// background: linear-gradient(to right, #0052C2, #00B4FF);
|
|
}
|
|
}
|
|
|
|
.scroll-box {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.card {
|
|
margin-left: 30rpx;
|
|
// margin-top: 5rpx;
|
|
margin-bottom: 30rpx;
|
|
border: 2rpx solid #fff;
|
|
background: url("/static/index/newpink.png") center/cover, rgba(255, 255, 255, 0.5);
|
|
background-position: 30% 70%;
|
|
width: 1003rpx;
|
|
height: 590rpx;
|
|
border-radius: 20rpx;
|
|
// box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0, 0, 0, 0.3);
|
|
display: flex;
|
|
border-top-right-radius: 40rpx;
|
|
// overflow: hidden;
|
|
|
|
.card-left {
|
|
height: 100%;
|
|
width: 65%;
|
|
position: relative;
|
|
|
|
.card-left-title {
|
|
height: 23%;
|
|
width: 100%;
|
|
padding: 0 20rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
|
|
.left-view {
|
|
display: flex;
|
|
|
|
.left-view-img {
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.card-right {
|
|
height: 100%;
|
|
width: 35%;
|
|
background-color: rgba(205, 222, 246, 0.6);
|
|
position: relative;
|
|
// border-radius: 20rpx;
|
|
border-top-right-radius: 20rpx;
|
|
border-bottom-right-radius: 20rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.top-font-line {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.line-weight {
|
|
font-size: 35rpx;
|
|
font-weight: 600;
|
|
margin-left: 10rpx;
|
|
}
|
|
|
|
.line-margin {
|
|
margin-left: 40rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
.font-gray {
|
|
margin-left: 10rpx;
|
|
margin-top: 10rpx;
|
|
font-size: 25rpx;
|
|
color: #555555;
|
|
}
|
|
}
|
|
|
|
.blue-button {
|
|
width: 140rpx;
|
|
height: 50rpx;
|
|
color: #fff;
|
|
font-size: 25rpx;
|
|
background-color: #01B1FC;
|
|
border-radius: 20rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.font-gray-right {
|
|
margin-top: 10rpx;
|
|
// margin-bottom: 5rpx;
|
|
font-size: 25rpx;
|
|
color: #858585;
|
|
margin-right: 8rpx;
|
|
}
|
|
|
|
.right-spec {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: flex-end;
|
|
}
|
|
|
|
.video-img {
|
|
// margin-top: 10rpx;
|
|
margin-left: 30rpx;
|
|
width: 520rpx;
|
|
height: 370rpx;
|
|
border-radius: 30rpx;
|
|
}
|
|
|
|
.video-bottom {
|
|
width: 100%;
|
|
overflow: hidden;
|
|
height: 70rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
padding-left: 30rpx;
|
|
color: #858585;
|
|
font-size: 24rpx;
|
|
|
|
.font-bottom-weight {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: black;
|
|
}
|
|
|
|
.bottom-shu {
|
|
margin: 0 15rpx;
|
|
|
|
}
|
|
}
|
|
|
|
.bottom-balls {
|
|
position: absolute;
|
|
bottom: 110rpx;
|
|
left: 35%;
|
|
transform: translateX(-35%);
|
|
z-index: 999;
|
|
display: flex;
|
|
|
|
.one-ball-father {
|
|
width: 50rpx;
|
|
height: 50rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgb(111, 111, 111);
|
|
border: 2rpx solid #fff;
|
|
margin: 0 18rpx;
|
|
border-radius: 50%;
|
|
|
|
.one-ball {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-balls {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 140rpx;
|
|
padding-top: 10rpx;
|
|
z-index: 999;
|
|
|
|
.blue-ball {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
}
|
|
|
|
.blue-ball-father {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #E7ECFA;
|
|
border-radius: 20rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
|
|
.blue-ball-father-target {
|
|
width: 65rpx;
|
|
height: 65rpx;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: rgb(215, 240, 254);
|
|
border-radius: 20rpx;
|
|
margin-right: 20rpx;
|
|
margin-bottom: 5rpx;
|
|
}
|
|
}
|
|
|
|
.right-title {
|
|
position: absolute;
|
|
right: -31rpx;
|
|
top: -33rpx;
|
|
width: 250rpx;
|
|
height: 120rpx;
|
|
z-index: 1;
|
|
}
|
|
|
|
.right-other {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.other-class {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
margin-right: 5rpx;
|
|
margin-left: 5rpx;
|
|
}
|
|
|
|
.other-font {
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.time {
|
|
display: flex;
|
|
margin-top: 80rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.time-left {
|
|
background: linear-gradient(to bottom, #7080A1, #263556);
|
|
-webkit-background-clip: text;
|
|
color: transparent;
|
|
font-size: 50rpx;
|
|
font-weight: 600;
|
|
// margin-left: 5rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.time-right {
|
|
width:90rpx;
|
|
height: 35rpx;
|
|
display: flex;
|
|
|
|
// justify-content: flex-end;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #F37B5B;
|
|
color: #fff;
|
|
margin-left: 5rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.time-img {
|
|
width: 240rpx;
|
|
height: 180rpx;
|
|
margin-top: 30rpx;
|
|
margin-left: 30rpx;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.time-weight {
|
|
font-weight: 600;
|
|
font-size: 32rpx;
|
|
margin-left: 40rpx;
|
|
}
|
|
|
|
.time-small {
|
|
padding: 10rpx 30rpx;
|
|
font-size: 20rpx;
|
|
color: #666666;
|
|
}
|
|
|
|
.time-people-two {
|
|
display: flex;
|
|
margin-left: 20rpx;
|
|
align-items: center;
|
|
// margin-top: 20rpx;
|
|
margin-bottom: 5rpx;
|
|
|
|
// flex-direction: column;
|
|
.time-people-img {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
margin-right: 10rpx;
|
|
margin-left: 5rpx;
|
|
|
|
}
|
|
|
|
.time-people-font {
|
|
font-size: 27rpx;
|
|
}
|
|
}
|
|
|
|
.right-time {
|
|
position: absolute;
|
|
top: 40%;
|
|
right: 0;
|
|
transform: translateY(-40%);
|
|
|
|
.right-laba {
|
|
width: 60rpx;
|
|
height: 60rpx;
|
|
margin-right: 5rpx;
|
|
border-top-left-radius: 30rpx;
|
|
border-bottom-left-radius: 30rpx;
|
|
background-color: #fff;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-bottom: 10rpx;
|
|
|
|
.laba-img {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
margin-left: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.fail-img {
|
|
width: 250rpx;
|
|
height: 250rpx;
|
|
}
|
|
|
|
.fail-img-spec {
|
|
width: 400rpx;
|
|
height: 350rpx;
|
|
margin-left: -70rpx;
|
|
}
|
|
|
|
.fail-text {
|
|
margin-top: 15rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.fail-text-spec {
|
|
margin-top: -100rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
.kufang-img {
|
|
width: 35rpx;
|
|
height: 35rpx;
|
|
// margin-bottom: 5rpx;
|
|
}
|
|
|
|
.tab-heng {
|
|
position: absolute;
|
|
left: 50%;
|
|
bottom: -15rpx;
|
|
transform: translateX(-50%);
|
|
width: 40rpx;
|
|
height: 10rpx;
|
|
border-radius: 10rpx;
|
|
// background: linear-gradient(to right, #0052C2, #00B4FF);
|
|
}
|
|
</style> |