1356 lines
30 KiB
Vue
1356 lines
30 KiB
Vue
<!-- 动画页 -->
|
||
<template>
|
||
<view>
|
||
<view class="home">
|
||
<image class="all-home" src="/static/index/warehouse/newindexhome/backdro.jpg" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="store tp" @click="housactive(4)">
|
||
<image class="all-home" src="/static/index/warehouse/newindexhome/store.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="store-font" @click="housactive(4)">
|
||
库房
|
||
<view class="font-ball">
|
||
<view class="ball-ball">
|
||
<view class="fin-ball"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="unit-font" @click="housactive(0)">
|
||
护理单元
|
||
<view class="font-ball">
|
||
<view class="ball-ball">
|
||
<view class="fin-ball"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="back-font">
|
||
后勤
|
||
<view class="font-ball">
|
||
<view class="ball-ball">
|
||
<view class="fin-ball"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="office-font" @click="housactive(1)">
|
||
行政办公室
|
||
<view class="font-ball">
|
||
<view class="ball-ball">
|
||
<view class="fin-ball"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="fontroom-font">
|
||
服务大厅
|
||
<view class="font-ball">
|
||
<view class="ball-ball">
|
||
<view class="fin-ball"></view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="storeman tp">
|
||
<donghua width="4vw" height="7vw" :interval="250"
|
||
:links="[...storemanarray, ...storemanarray.slice().reverse()]" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="worker tp">
|
||
<donghua width="4.5vw" height="6vw" :interval="250"
|
||
:links="[...workerarray, ...workerarray.slice().reverse()]" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="line tp">
|
||
<donghua width="100vw" height="100vh" :interval="500" :links="lamparray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="unit" @click="housactive(0)">
|
||
<image class="all-home" src="/static/index/warehouse/newindexhome/un.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="unit-text" :style="{ fontSize: fontSize }">
|
||
{{ fontnumber }}
|
||
</view>
|
||
<view class="unit-image">
|
||
<image class="all-home" src="/static/red.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="office" @click="housactive(1)">
|
||
<image class="all-home" src="/static/index/warehouse/newindexhome/office.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="officer tp" @click="housactive(1)">
|
||
<donghua width="14vw" height="13vw" :interval="250" :links="officerarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="Print tp">
|
||
<donghua width="5vw" height="5vw" :interval="300" :links="Printarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="fontend tp">
|
||
<image class="all-home" src="/static/index/warehouse/newindexhome/reception.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="fontendtable tp">
|
||
<image class="all-home" src="/static/index/warehouse/newindexhome/reception2.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="peopleleft tp">
|
||
<donghua width="7vw" height="8vw" :interval="550" :links="peopleleftarray" :playing="playall"
|
||
:loop="true" />
|
||
</view>
|
||
<view class="peopleright tp">
|
||
<donghua width="7vw" height="8vw" :interval="600" :links="peoplerightarray" :playing="playall"
|
||
:loop="true" />
|
||
</view>
|
||
<view class="door tp">
|
||
<donghua width="17vw" height="16vw" :interval="200" :links="[...doorarray, ...doorarray.slice().reverse()]"
|
||
:playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="ondoor tp">
|
||
<donghua width="5vw" height="6vw" :interval="300" :links="ondoorarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="fontroom tp">
|
||
<image class="all-home" src="/static/index/warehouse/newindexhome/receive.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="button-setting" @click="housactive(7)">
|
||
<image class="button-img" src="/static/index/setting.png" mode="aspectFit"></image>
|
||
</view>
|
||
<view class="button-back" @click="housactive(8)">
|
||
<image class="button-img" src="/static/index/back.png" mode="aspectFit"></image>
|
||
</view>
|
||
<!-- <view class="paizi tp">
|
||
<donghua width="15vw" height="15vw" :interval="300" :links="paiziarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="jiankong tp" @click="housactive(3)">
|
||
<donghua width="15vw" height="15vw" :interval="150" :links="jiankongarray" :playing="playall"
|
||
:loop="true" />
|
||
</view>
|
||
<view class="jiankongtag tp" @click="housactive(3)">
|
||
<view class="blue-bgc">
|
||
中控室
|
||
<view class="triangle-middle"></view>
|
||
</view>
|
||
<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
|
||
</view>
|
||
<view class="wanjie tp" @click="housactive(4)">
|
||
<donghua width="17vw" height="17vw" :interval="300" :links="wanjiearray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="wanjietag tp" @click="housactive(4)">
|
||
<view class="blue-bgc">
|
||
库房
|
||
<view class="triangle-middle"></view>
|
||
</view>
|
||
<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
|
||
</view>
|
||
<view class="juzhen tp" @click.stop="morerule=true">
|
||
<donghua width="17vw" height="17vw" :interval="300" :links="juzhenarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="juzhentag tp" @click.stop="morerule= true">
|
||
<view class="blue-bgc" style="background: #7BC2FF;width: 7vw;">
|
||
指令矩阵
|
||
<view class="triangle-middle" style="border-top: 0.5vw solid #7BC2FF"></view>
|
||
</view>
|
||
<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
|
||
</view>
|
||
<view class="openmore" v-show="morerule" @click.stop>
|
||
<div class="triangle-left"></div>
|
||
<view class="openmore-title">
|
||
指令矩阵
|
||
</view>
|
||
<view class="openmore-gray">
|
||
一体化行政调度，驱动高效运营，智能统筹护理资源，提升照护效率。
|
||
</view>
|
||
<view class="openmore-button">
|
||
<view class="one-button">
|
||
<image class="small-imge" src="/static/index/warehouse/t1.png" mode=""></image>
|
||
护理矩阵
|
||
</view>
|
||
<view class="one-button">
|
||
<image class="small-imge" src="/static/index/warehouse/t2.png" mode=""></image>
|
||
医疗矩阵
|
||
</view>
|
||
<view class="one-button">
|
||
<image class="small-imge" src="/static/index/warehouse/t5.png" mode=""></image>
|
||
库房矩阵
|
||
</view>
|
||
</view>
|
||
<view class="openmore-button">
|
||
<view class="one-button">
|
||
<image class="small-imge" src="/static/index/warehouse/t3.png" mode=""></image>
|
||
行政矩阵
|
||
</view>
|
||
<view class="one-button">
|
||
<image class="small-imge" src="/static/index/warehouse/t4.png" mode=""></image>
|
||
请领矩阵
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="exittag tp" @click="exitshow=true">
|
||
<view class="blue-bgc" style="background: #7BC2FF;width: 7vw;">
|
||
退出
|
||
<view class="triangle-middle" style="border-top: 0.5vw solid #7BC2FF"></view>
|
||
</view>
|
||
<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
|
||
</view>
|
||
<view class="caigou tp" @click="housactive(0)">
|
||
<donghua width="16vw" height="16vw" :interval="150" :links="caigouarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="caigoutag tp" @click="housactive(0)">
|
||
<view class="blue-bgc" style="width: 7vw;">
|
||
服务大厅
|
||
<view class="triangle-middle"></view>
|
||
</view>
|
||
<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
|
||
</view>
|
||
<view class="ruku tp">
|
||
<donghua width="11vw" height="11vw" :interval="300" :links="rukuarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="chuku tp">
|
||
<donghua width="11vw" height="11vw" :interval="300" :links="rukuarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="jianhuo tp" @click="housactive(0)">
|
||
<donghua width="34vw" height="34vw" :interval="150" :links="jianhuoarray" :playing="playall" :loop="true" />
|
||
</view>
|
||
<view class="jianhuotag tp" @click="housactive(0)">
|
||
<view class="blue-bgc" style="width: 7vw;">
|
||
护理单元
|
||
<view class="triangle-middle"></view>
|
||
</view>
|
||
<image class="blue-imge" src="/static/index/warehouse/home/z.png" mode=""></image>
|
||
</view>
|
||
<view class="pandan tp" @click="housactive(5)">
|
||
<image src="/static/index/warehouse/newhome/count.png" mode="widthFix"></image>
|
||
</view>
|
||
|
||
<view class="return tp" @click="housactive(8)">
|
||
<image src="/static/index/warehouse/newhome/return.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="leadtag tp" @click="housactive(8)">
|
||
<view class="gray-bgc">
|
||
长者标签
|
||
<view class="triangle-left"></view>
|
||
<view class="triangle-left-bgc"></view>
|
||
</view>
|
||
</view>
|
||
<view class="settingtag tp" @click="housactive(6)">
|
||
<view class="gray-bgc">
|
||
设置
|
||
<view class="triangle-left"></view>
|
||
<view class="triangle-left-bgc"></view>
|
||
</view>
|
||
</view>
|
||
<view class="lead tp" @click="housactive(7)">
|
||
<image src="/static/index/warehouse/newhome/lead.png" mode="widthFix"></image>
|
||
</view>
|
||
<view class="returntag tp" @click="housactive(7)">
|
||
<view class="gray-bgc">
|
||
行政办公室
|
||
<view class="triangle-left"></view>
|
||
<view class="triangle-left-bgc"></view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="picking tp" @click="housactive(2)">
|
||
<image src="/static/index/warehouse/newhome/picking.png" mode="widthFix"></image>
|
||
</view> -->
|
||
|
||
|
||
<exit :show="exitshow" @close="exitshow=false" />
|
||
<!-- 自动更新组件 -->
|
||
<zy-update ref="zyupgrade" :noticeflag="true" theme="blue" :h5preview="false" oldversion="1.0.0"
|
||
:appstoreflag="true" :autocheckupdate="true"></zy-update>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref, onMounted, reactive, onBeforeUnmount, computed, nextTick } from 'vue';
|
||
import { onBackPress, onShow } from "@dcloudio/uni-app"
|
||
import { queryPadPageList } from '@/pages/watch/api/lunpan.js'
|
||
import ZyUpdate from '@/component/zy-upgrade/zy-upgrade.vue'
|
||
import exit from "@/component/public/exit.vue"
|
||
|
||
onBackPress(() => {
|
||
return true; // 禁止返回手势返回
|
||
})
|
||
const zyupgrade = ref(null);
|
||
const leftMenuArray = ref([])
|
||
const exitshow = ref(false);
|
||
const morerule = ref(false)
|
||
const fontnumber = ref(uni.getStorageSync('orgListName'))
|
||
const fontSize = computed(() => {
|
||
const len = (fontnumber.value || '').length
|
||
if (len === 10) return '1.3vw' // 恰好10字
|
||
if (len < 10) return '1.4vw' // 少于10字
|
||
if (len <= 15) return '1.2vw' // 11~15字
|
||
return '1.1vw' // 超过15字
|
||
})
|
||
// 生命周期钩子
|
||
onShow(() => {
|
||
zyupgrade.value?.check_update();
|
||
queryPadPageList().then((res => {
|
||
leftMenuArray.value = res.result.records;
|
||
|
||
}))
|
||
});
|
||
const filteredMenu = (index : number) => {
|
||
return leftMenuArray.value.filter(item => Number(item.areaFlag) - 1 == index);
|
||
}
|
||
const ondoorarray =
|
||
genPaths(
|
||
'/static/index/warehouse/newindexhome/',
|
||
'gate',
|
||
5, // 张数
|
||
'png',
|
||
0, // 起始索引为 1
|
||
false // 不补零
|
||
)
|
||
const doorarray =
|
||
genPaths(
|
||
'/static/index/warehouse/newindexhome/',
|
||
'door',
|
||
11, // 张数
|
||
'png',
|
||
0, // 起始索引为 1
|
||
false // 不补零
|
||
)
|
||
const peopleleftarray =
|
||
genPaths(
|
||
'/static/index/warehouse/newindexhome/',
|
||
'Front',
|
||
2, // 张数
|
||
'png',
|
||
1, // 起始索引为 1
|
||
false // 不补零
|
||
)
|
||
const peoplerightarray =
|
||
genPaths(
|
||
'/static/index/warehouse/newindexhome/',
|
||
'Front',
|
||
2, // 张数
|
||
'png',
|
||
3, // 起始索引为 1
|
||
false // 不补零
|
||
)
|
||
const storemanarray =
|
||
genPaths(
|
||
'/static/index/warehouse/newindexhome/',
|
||
'Operator',
|
||
8, // 张数
|
||
'png',
|
||
1, // 起始索引为 1
|
||
false // 不补零
|
||
)
|
||
const lamparray =
|
||
genPaths(
|
||
'/static/index/warehouse/newindexhome/',
|
||
'lamp',
|
||
2, // 张数
|
||
'png',
|
||
1, // 起始索引为 1
|
||
false // 不补零
|
||
)
|
||
const workerarray =
|
||
genPaths(
|
||
'/static/index/warehouse/newindexhome/',
|
||
'service',
|
||
8, // 张数
|
||
'png',
|
||
0, // 起始索引为 1
|
||
false // 不补零
|
||
)
|
||
|
||
const officerarray =
|
||
genPaths(
|
||
'/static/index/warehouse/newindexhome/cler',
|
||
'cler1-',
|
||
24, // 张数
|
||
'png',
|
||
1, // 起始索引为 1
|
||
false // 不补零
|
||
)
|
||
const Printarray =
|
||
genPaths(
|
||
'/static/index/warehouse/newindexhome/',
|
||
'printer',
|
||
13, // 张数
|
||
'png',
|
||
1, // 起始索引为 1
|
||
false // 不补零
|
||
)
|
||
// const juzhenarray =
|
||
// genPaths(
|
||
// '/static/index/warehouse/newhome/',
|
||
// 'matrix',
|
||
// 5, // 张数
|
||
// 'png',
|
||
// 0, // 起始索引为 1
|
||
// false // 不补零
|
||
// )
|
||
// const cararray =
|
||
// genPaths(
|
||
// '/static/index/warehouse/newhome/',
|
||
// 'train',
|
||
// 10, // 张数
|
||
// 'png',
|
||
// 1, // 起始索引为 1
|
||
// false // 不补零
|
||
// )
|
||
// const cartarget = ref(0)
|
||
// const paiziarray =
|
||
// genPaths(
|
||
// '/static/index/warehouse/newhome/',
|
||
// 'logo',
|
||
// 3, // 张数
|
||
// 'png',
|
||
// 1, // 起始索引为 1
|
||
// false // 不补零
|
||
// )
|
||
// const jiankongarray =
|
||
// genPaths(
|
||
// '/static/index/warehouse/newhome/',
|
||
// 'monitor',
|
||
// 8, // 张数
|
||
// 'png',
|
||
// 0, // 起始索引为 1
|
||
// false // 不补零
|
||
// )
|
||
// const wanjiearray =
|
||
// genPaths(
|
||
// '/static/index/warehouse/newhome/',
|
||
// 'end',
|
||
// 6, // 张数
|
||
// 'png',
|
||
// 0, // 起始索引为 1
|
||
// false // 不补零
|
||
// )
|
||
// const caigouarray = genPaths(
|
||
// '/static/index/warehouse/newhome/',
|
||
// 'purchase',
|
||
// 8, // 张数
|
||
// 'png',
|
||
// 0, // 起始索引为 1
|
||
// false // 不补零
|
||
// )
|
||
// const rukuarray = genPaths(
|
||
// '/static/index/warehouse/newhome/',
|
||
// 'unit1-',
|
||
// 5, // 张数
|
||
// 'png',
|
||
// 0, // 起始索引为 1
|
||
// false // 不补零
|
||
// )
|
||
// const jianhuoarray = genPaths(
|
||
// '/static/index/warehouse/newhome/',
|
||
// 'Warehouse',
|
||
// 8, // 张数
|
||
// 'png',
|
||
// 1, // 起始索引为 1
|
||
// false // 不补零
|
||
// )
|
||
const playall = ref(false);
|
||
|
||
onMounted(() => {
|
||
playall.value = true;
|
||
// ceshi()
|
||
|
||
})
|
||
|
||
const housedex = ref(0);
|
||
const navurl = ref('')
|
||
const housactive = (index : number) => {
|
||
|
||
housedex.value = index;
|
||
if (index == 0) {
|
||
let data = filteredMenu(0)[0]
|
||
uni.setStorageSync('nuId', data.nuId);
|
||
uni.setStorageSync('nuName', data.nuName);
|
||
uni.setStorageSync('elderId', data.elderInfo ? data.elderInfo?.id : null);
|
||
uni.setStorageSync('NUall', data);
|
||
uni.navigateTo({
|
||
url: '/pages/NursingNew/index'
|
||
})
|
||
}
|
||
if (index == 1) {
|
||
// uni.navigateTo({
|
||
// url: '/pages/recording/recorder'
|
||
// })
|
||
}
|
||
|
||
// if (index == 2) {
|
||
// navurl.value = 'pages/Warehouse/picking'
|
||
// uni.navigateTo({
|
||
// url: '/' + navurl.value
|
||
// })
|
||
// }
|
||
|
||
if (index === 3) {
|
||
uni.navigateTo({
|
||
url: "/pages/controlroom/index"
|
||
})
|
||
}
|
||
if (index == 4) {
|
||
let data = filteredMenu(2)[0]
|
||
uni.setStorageSync('nuId', data.nuId);
|
||
uni.setStorageSync('nuName', data.nuName);
|
||
uni.setStorageSync('elderId', data.elderInfo ? data.elderInfo?.id : null);
|
||
uni.setStorageSync('NUall', data);
|
||
// uni.navigateTo({
|
||
// url: '/pages/Warehouse/warehome',
|
||
// })
|
||
uni.navigateTo({
|
||
url: '/pages/Warehouse/index/index',
|
||
})
|
||
}
|
||
if (index == 6) {
|
||
uni.navigateTo({
|
||
url: '/pages/watch/settings/settings',
|
||
})
|
||
}
|
||
if (index == 7) {
|
||
uni.navigateTo({
|
||
url: '/pages/watch/settings/settings',
|
||
})
|
||
}
|
||
if (index == 8) {
|
||
exitshow.value = true;
|
||
}
|
||
|
||
|
||
}
|
||
|
||
|
||
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}`
|
||
})
|
||
}
|
||
|
||
// // 当前坐标（px）
|
||
// const x = ref(77)
|
||
// const y = ref(60)
|
||
// // 默认过渡时长（s）
|
||
// const duration = ref(0.7)
|
||
// const easing = 'linear' // 柔和的 easing
|
||
|
||
// 样式绑定：translate3d + transition（GPU 加速）
|
||
// const moverStyle = computed(() => {
|
||
// return {
|
||
// position: 'fixed',
|
||
// left: '0',
|
||
// top: '0',
|
||
// width: '7vw', // 图片宽高按需改
|
||
// height: '7vw',
|
||
// transform: `translate3d(${x.value}vw, ${y.value}vw, 0)`,
|
||
// transition: `transform ${duration.value}s ${easing}`,
|
||
// willChange: 'transform'
|
||
// }
|
||
// })
|
||
|
||
// 调用函数：moveTo(pxX, pxY, seconds)
|
||
// function moveTo(pxX, pxY, seconds = 0.6) {
|
||
// // 设置时长（秒），然后直接改坐标
|
||
// duration.value = seconds
|
||
// x.value = pxX
|
||
// y.value = pxY
|
||
// }
|
||
|
||
// const ceshi = () => {
|
||
// moveTo(23, 40.5, 3);
|
||
// cartarget.value = 0
|
||
// setTimeout(() => {
|
||
// cartarget.value = 1
|
||
// moveTo(24.5, 38, 0.5); // 6 秒后执行这个
|
||
// }, 3000);
|
||
// setTimeout(() => {
|
||
// cartarget.value = 2
|
||
// moveTo(35, 32, 2); // 6 秒后执行这
|
||
// }, 3500);
|
||
// setTimeout(() => {
|
||
// cartarget.value = 3
|
||
// moveTo(38, 29.5, 0.5); // 6 秒后执行这个
|
||
// }, 5500);
|
||
// setTimeout(() => {
|
||
// cartarget.value = 4
|
||
// moveTo(63.5, 37.8, 3); // 6 秒后执行这
|
||
// }, 6000);
|
||
// setTimeout(() => {
|
||
// cartarget.value = 5
|
||
// moveTo(91, 21, 3); // 6 秒后执行这个
|
||
// }, 9000);
|
||
// setTimeout(() => {
|
||
// cartarget.value = 6
|
||
// moveTo(90, 19, 0.5); // 6 秒后执行这个
|
||
// }, 12000);
|
||
// setTimeout(() => {
|
||
// cartarget.value = 7
|
||
// moveTo(89, 17, 0.5); // 6 秒后执行这个
|
||
// }, 12500);
|
||
// setTimeout(() => {
|
||
// cartarget.value = 8
|
||
// moveTo(48, 4, 3); // 6 秒后执行这个
|
||
// }, 13000);
|
||
// setTimeout(() => {
|
||
// cartarget.value = 9
|
||
// moveTo(-11, 37.5, 4); // 6 秒后执行这个
|
||
// }, 16000);
|
||
// setTimeout(() => {
|
||
// cartarget.value = 0
|
||
// moveTo(77, 60, 0.0001);
|
||
// }, 20000);
|
||
// setTimeout(() => {
|
||
// ceshi()
|
||
// }, 21000);
|
||
// }
|
||
</script>
|
||
|
||
<style scoped lang="less">
|
||
.home {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
position: fixed;
|
||
z-index: 0;
|
||
}
|
||
|
||
.line {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
overflow: hidden;
|
||
position: fixed;
|
||
z-index: 0;
|
||
top: 10vw;
|
||
left: 0;
|
||
}
|
||
|
||
.all-home {
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
}
|
||
|
||
.store {
|
||
width: 50vw;
|
||
height: 30vw;
|
||
position: fixed;
|
||
top: -4vw;
|
||
left: -3vw;
|
||
z-index: 2;
|
||
}
|
||
|
||
.unit-font {
|
||
width: 9vw;
|
||
height: 3vw;
|
||
position: fixed;
|
||
top: 7.5vw;
|
||
left: 60vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(71, 188, 255, 0.2);
|
||
font-size: 1.5vw;
|
||
color: #0089FE;
|
||
border-radius: 2vw;
|
||
position: relative;
|
||
z-index: 3;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.office-font {
|
||
width: 10vw;
|
||
height: 3vw;
|
||
position: fixed;
|
||
top: 22vw;
|
||
left: 75.5vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(71, 188, 255, 0.2);
|
||
font-size: 1.5vw;
|
||
color: #0089FE;
|
||
border-radius: 2vw;
|
||
position: relative;
|
||
z-index: 3;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.fontroom-font {
|
||
width: 9vw;
|
||
height: 3vw;
|
||
position: fixed;
|
||
top: 30.8vw;
|
||
left: 49vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(71, 188, 255, 0.2);
|
||
font-size: 1.5vw;
|
||
color: #0089FE;
|
||
border-radius: 2vw;
|
||
position: relative;
|
||
z-index: 3;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.back-font {
|
||
width: 7vw;
|
||
height: 3vw;
|
||
position: fixed;
|
||
top: 1vw;
|
||
left: 81vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(71, 188, 255, 0.2);
|
||
font-size: 1.5vw;
|
||
color: #0089FE;
|
||
border-radius: 2vw;
|
||
position: relative;
|
||
z-index: 3;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.store-font {
|
||
width: 7vw;
|
||
height: 3vw;
|
||
position: fixed;
|
||
top: 4vw;
|
||
left: 20vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: rgba(71, 188, 255, 0.2);
|
||
font-size: 1.5vw;
|
||
color: #0089FE;
|
||
border-radius: 2vw;
|
||
position: relative;
|
||
z-index: 3;
|
||
border: 2rpx solid rgba(255, 255, 255, 0.6);
|
||
}
|
||
|
||
.font-ball {
|
||
position: absolute;
|
||
bottom: -2.8vw;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 2vw;
|
||
height: 2vw;
|
||
background-color: #C5DDF9;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.ball-ball {
|
||
width: 1vw;
|
||
height: 1vw;
|
||
border-radius: 50%;
|
||
background-color: #43A0FD;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
|
||
.fin-ball {
|
||
width: 0.5vw;
|
||
height: 0.5vw;
|
||
border-radius: 50%;
|
||
background-color: #fff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.fontend {
|
||
width: 43vw;
|
||
height: 43vw;
|
||
position: fixed;
|
||
bottom: 5vw;
|
||
left: -1.5vw;
|
||
}
|
||
|
||
.fontendtable {
|
||
width: 30vw;
|
||
height: 30vw;
|
||
position: fixed;
|
||
bottom: 1.5vw;
|
||
left: 0vw;
|
||
z-index: 10;
|
||
}
|
||
|
||
.peopleleft {
|
||
width: 7vw;
|
||
height: 8vw;
|
||
position: fixed;
|
||
bottom: 11vw;
|
||
left: 16vw;
|
||
}
|
||
|
||
.peopleright {
|
||
width: 7vw;
|
||
height: 8vw;
|
||
position: fixed;
|
||
bottom: 14vw;
|
||
left: 10.5vw;
|
||
}
|
||
|
||
.fontroom {
|
||
width: 40vw;
|
||
height: 28vw;
|
||
position: fixed;
|
||
bottom: -7vw;
|
||
right: 26vw;
|
||
}
|
||
|
||
.storeman {
|
||
width: 3.8vw;
|
||
height: 6.5vw;
|
||
position: fixed;
|
||
top: 12vw;
|
||
left: 19vw;
|
||
z-index: 3;
|
||
}
|
||
|
||
.worker {
|
||
width: 4.5vw;
|
||
height: 6vw;
|
||
position: fixed;
|
||
top: 13.5vw;
|
||
right: 5vw;
|
||
z-index: 1;
|
||
}
|
||
|
||
.unit {
|
||
width: 53vw;
|
||
height: 53vw;
|
||
position: fixed;
|
||
top: -4vw;
|
||
left: 30vw;
|
||
z-index: 2;
|
||
}
|
||
|
||
.unit-text {
|
||
position: fixed;
|
||
bottom: 28.5vw;
|
||
left: 18vw;
|
||
z-index: 12;
|
||
display: inline-block;
|
||
transform-origin: left top;
|
||
/* 关键：左上角 */
|
||
transform: skewX(29deg) rotate(35deg) scaleY(1.2);
|
||
letter-spacing: -2px;
|
||
/* 负值 = 缩小 */
|
||
font-size: 1.2vw;
|
||
color: #0089FE;
|
||
}
|
||
.unit-image{
|
||
position: fixed;
|
||
bottom: 29.3vw;
|
||
left: 15.5vw;
|
||
z-index: 12;
|
||
display: inline-block;
|
||
transform-origin: left top;
|
||
/* 关键：左上角 */
|
||
transform: skewX(29deg) rotate(35deg) scaleY(1.2);
|
||
letter-spacing: -2px;
|
||
width: 2vw;
|
||
height: 2vw;
|
||
/* 负值 = 缩小 */
|
||
|
||
color: #0089FE;
|
||
}
|
||
.office {
|
||
width: 50vw;
|
||
height: 50vw;
|
||
position: fixed;
|
||
top: 18vw;
|
||
right: -15vw;
|
||
}
|
||
|
||
.officer {
|
||
width: 14vw;
|
||
height: 13vw;
|
||
position: fixed;
|
||
bottom: 16vw;
|
||
right: 2vw;
|
||
z-index: 2;
|
||
}
|
||
|
||
.Print {
|
||
width: 5vw;
|
||
height: 5vw;
|
||
position: fixed;
|
||
bottom: 22vw;
|
||
right: 13vw;
|
||
z-index: 1;
|
||
}
|
||
|
||
.button-setting {
|
||
width: 5vw;
|
||
height: 5vw;
|
||
border-radius: 50%;
|
||
border: 1rpx solid #A3B2CF;
|
||
position: fixed;
|
||
bottom: 2vw;
|
||
right: 9vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(to bottom, #E9EEF8, #D4DBE8);
|
||
z-index: 10;
|
||
}
|
||
|
||
.button-back {
|
||
width: 5vw;
|
||
height: 5vw;
|
||
border-radius: 50%;
|
||
border: 1rpx solid #A3B2CF;
|
||
position: fixed;
|
||
bottom: 2vw;
|
||
right: 3vw;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
background: linear-gradient(to bottom, #E9EEF8, #D4DBE8);
|
||
z-index: 10;
|
||
}
|
||
|
||
.button-img {
|
||
width: 50%;
|
||
height: 50%;
|
||
}
|
||
|
||
.door {
|
||
width: 17vw;
|
||
height: 16vw;
|
||
position: fixed;
|
||
bottom: 0vw;
|
||
left: 0vw;
|
||
}
|
||
|
||
.ondoor {
|
||
width: 5vw;
|
||
height: 6vw;
|
||
position: fixed;
|
||
bottom: -0.5vw;
|
||
left: 9vw;
|
||
}
|
||
|
||
// .tp {
|
||
// image {
|
||
// width: 100%;
|
||
// height: 100%;
|
||
// }
|
||
// }
|
||
|
||
// .paizi {
|
||
// width: 15vw;
|
||
// height: 15vw;
|
||
// position: fixed;
|
||
// bottom: 3.3vw;
|
||
// left: 14.8vw;
|
||
// }
|
||
|
||
// .jiankong {
|
||
// width: 14vw;
|
||
// height: 14vw;
|
||
// position: fixed;
|
||
// top: 7vw;
|
||
// left: 12vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .wanjie {
|
||
// width: 17vw;
|
||
// height: 17vw;
|
||
// position: fixed;
|
||
// top: 9vw;
|
||
// left: 34vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .pandan {
|
||
// width: 9vw;
|
||
// height: 9vw;
|
||
// position: fixed;
|
||
// top: 20.5vw;
|
||
// left: 38vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .caigou {
|
||
// width: 16vw;
|
||
// height: 16vw;
|
||
// position: fixed;
|
||
// top: 34vw;
|
||
// left: 39vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .ruku {
|
||
// width: 11vw;
|
||
// height: 11vw;
|
||
// position: fixed;
|
||
// bottom: 10.5vw;
|
||
// right: 19vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .chuku {
|
||
// width: 11vw;
|
||
// height: 11vw;
|
||
// position: fixed;
|
||
// bottom: 20vw;
|
||
// right: 6vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .return {
|
||
// width: 6.5vw;
|
||
// height: 6.5vw;
|
||
// position: fixed;
|
||
// bottom: 10.5vw;
|
||
// right: 26vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .lead {
|
||
// width: 7vw;
|
||
// height: 7vw;
|
||
// position: fixed;
|
||
// bottom: 19vw;
|
||
// right: 14vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .jianhuo {
|
||
// width: 34vw;
|
||
// height: 34vw;
|
||
// position: fixed;
|
||
// top: 8vw;
|
||
// right: 19vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .picking {
|
||
// width: 10vw;
|
||
// height: 10vw;
|
||
// position: fixed;
|
||
// top: 28.8vw;
|
||
// right: 28vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .blue-bgc {
|
||
// background: linear-gradient(to right, #0385fa, #0195f3);
|
||
// border: 1rpx solid #fff;
|
||
// width: 6.5vw;
|
||
// height: 2.8vw;
|
||
// font-size: 28rpx;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// border-radius: 2vw;
|
||
// color: #fff;
|
||
// position: relative;
|
||
|
||
// .triangle-middle {
|
||
// position: absolute;
|
||
// top: 2.6vw;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// width: 0;
|
||
// height: 0;
|
||
// border-left: 0.5vw solid transparent;
|
||
// border-right: 0.5vw solid transparent;
|
||
// border-top: 0.5vw solid #0385fa;
|
||
// }
|
||
|
||
// .triangle-left-bgc {
|
||
// position: absolute;
|
||
// top: 2.68vw;
|
||
// left: 1.17vw;
|
||
// width: 0;
|
||
// height: 0;
|
||
|
||
// /* 左上是直角的三角形 —— 只要两个边有颜色 */
|
||
// border-top: 0.45vw solid #0385fa;
|
||
// /* 上边 */
|
||
// border-left: 0.55vw solid #0385fa;
|
||
// /* 左边 */
|
||
|
||
// /* 另外两个边透明（保持三角形形状） */
|
||
// border-right: 0.55vw solid transparent;
|
||
// border-bottom: 0.55vw solid transparent;
|
||
// }
|
||
// }
|
||
|
||
// .juzhen {
|
||
// width: 17vw;
|
||
// height: 17vw;
|
||
// position: fixed;
|
||
// top: 20vw;
|
||
// left: 19vw;
|
||
// z-index: 50;
|
||
// }
|
||
|
||
// .exittag {
|
||
// position: fixed;
|
||
// top: 6vw;
|
||
// right: 10.5vw;
|
||
// z-index: 51;
|
||
|
||
// .blue-imge {
|
||
// position: absolute;
|
||
// top: 2.2vw;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// width: 3vw;
|
||
// height: 5vw;
|
||
// }
|
||
// }
|
||
|
||
// .juzhentag {
|
||
// position: fixed;
|
||
// top: 20vw;
|
||
// left: 24vw;
|
||
// z-index: 51;
|
||
|
||
// .blue-imge {
|
||
// position: absolute;
|
||
// top: 2.2vw;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// width: 3vw;
|
||
// height: 5vw;
|
||
// }
|
||
// }
|
||
|
||
// .gray-bgc {
|
||
// background: #e4efff;
|
||
// border: 1rpx solid #60a1ff;
|
||
// width: 8vw;
|
||
// height: 2.8vw;
|
||
// font-size: 28rpx;
|
||
// display: flex;
|
||
// justify-content: center;
|
||
// align-items: center;
|
||
// border-radius: 2vw;
|
||
// color: #0385fa;
|
||
// position: relative;
|
||
|
||
|
||
// .triangle-left-bgc {
|
||
// position: absolute;
|
||
// top: 2.68vw;
|
||
// left: 1.17vw;
|
||
// width: 0;
|
||
// height: 0;
|
||
|
||
// /* 左上是直角的三角形 —— 只要两个边有颜色 */
|
||
// border-top: 0.45vw solid #60a1ff;
|
||
// /* 上边 */
|
||
// border-left: 0.55vw solid #60a1ff;
|
||
// /* 左边 */
|
||
|
||
// /* 另外两个边透明（保持三角形形状） */
|
||
// border-right: 0.55vw solid transparent;
|
||
// border-bottom: 0.55vw solid transparent;
|
||
// }
|
||
|
||
// .triangle-left {
|
||
// position: absolute;
|
||
// top: 2.68vw;
|
||
// left: 1.2vw;
|
||
// width: 0;
|
||
// height: 0;
|
||
|
||
// /* 左上是直角的三角形 —— 只要两个边有颜色 */
|
||
// border-top: 0.4vw solid #e4efff;
|
||
// /* 上边 */
|
||
// border-left: 0.5vw solid #e4efff;
|
||
// /* 左边 */
|
||
|
||
// /* 另外两个边透明（保持三角形形状） */
|
||
// border-right: 0.5vw solid transparent;
|
||
// border-bottom: 0.5vw solid transparent;
|
||
// z-index: 1;
|
||
// }
|
||
// }
|
||
|
||
// .jiankongtag {
|
||
// position: fixed;
|
||
// top: 8vw;
|
||
// left: 16vw;
|
||
// z-index: 51;
|
||
|
||
// .blue-imge {
|
||
// position: absolute;
|
||
// top: 2.2vw;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// width: 3vw;
|
||
// height: 5vw;
|
||
// }
|
||
// }
|
||
|
||
// .pickingtag {
|
||
// position: fixed;
|
||
// top: 28vw;
|
||
// left: 67vw;
|
||
// z-index: 51;
|
||
|
||
// .blue-imge {
|
||
// position: absolute;
|
||
// top: 2.2vw;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// width: 3vw;
|
||
// height: 5vw;
|
||
// }
|
||
// }
|
||
|
||
// .jianhuotag {
|
||
// position: fixed;
|
||
// top: 11vw;
|
||
// left: 58vw;
|
||
// z-index: 51;
|
||
|
||
// .blue-imge {
|
||
// position: absolute;
|
||
// top: 2.2vw;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// width: 3vw;
|
||
// height: 5vw;
|
||
// }
|
||
// }
|
||
|
||
// .wanjietag {
|
||
// position: fixed;
|
||
// top: 11vw;
|
||
// left: 38.5vw;
|
||
// z-index: 51;
|
||
|
||
// .blue-imge {
|
||
// position: absolute;
|
||
// top: 2.2vw;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// width: 3vw;
|
||
// height: 5vw;
|
||
// }
|
||
// }
|
||
|
||
// .caigoutag {
|
||
// position: fixed;
|
||
// top: 35vw;
|
||
// left: 43vw;
|
||
// z-index: 51;
|
||
|
||
// .blue-imge {
|
||
// position: absolute;
|
||
// top: 2.2vw;
|
||
// left: 50%;
|
||
// transform: translateX(-50%);
|
||
// width: 3vw;
|
||
// height: 5vw;
|
||
// }
|
||
// }
|
||
|
||
// .pandantag {
|
||
// position: fixed;
|
||
// top: 21vw;
|
||
// left: 44vw;
|
||
// z-index: 51;
|
||
// }
|
||
|
||
// .returntag {
|
||
// position: fixed;
|
||
// top: 34vw;
|
||
// left: 81vw;
|
||
// z-index: 51;
|
||
// }
|
||
|
||
// .leadtag {
|
||
// position: fixed;
|
||
// top: 44vw;
|
||
// left: 72vw;
|
||
// z-index: 51;
|
||
// }
|
||
|
||
// .settingtag {
|
||
// position: fixed;
|
||
// top: 52vw;
|
||
// right: 15vw;
|
||
// z-index: 51;
|
||
// }
|
||
|
||
// .right-title {
|
||
// position: fixed;
|
||
// right: 2vw;
|
||
// top: 3vw;
|
||
// display: flex;
|
||
// align-items: center;
|
||
|
||
// .title-imge {
|
||
// width: 1.8vw;
|
||
// height: 1.8vw;
|
||
// margin-right: 0.5vw;
|
||
// // margin-top: -0.3vw;
|
||
// }
|
||
|
||
// .title-font {
|
||
// font-size: 32rpx;
|
||
// // margin-left: 3vw;
|
||
// font-weight: 600;
|
||
|
||
// }
|
||
// }
|
||
|
||
// .openmore {
|
||
// position: fixed;
|
||
// top: 30vh;
|
||
// left: 33.5vw;
|
||
// width: 27.7vw;
|
||
// height: 22.5vh;
|
||
// background-color: #fff;
|
||
// z-index: 53;
|
||
// border-radius: 0.5vw;
|
||
// box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
|
||
// padding: 1.5vw 2vw;
|
||
|
||
// .openmore-title {
|
||
// font-size: 1.5vw;
|
||
// font-weight: 600;
|
||
// }
|
||
|
||
// .openmore-gray {
|
||
// font-size: 1vw;
|
||
// color: #999;
|
||
// margin-top: 0.5vw;
|
||
// }
|
||
|
||
// .triangle-left {
|
||
// position: absolute;
|
||
// left: -1vw;
|
||
// top: 3vh;
|
||
// width: 0;
|
||
// height: 0;
|
||
// border-top: 1vw solid transparent;
|
||
// border-bottom: 1vw solid transparent;
|
||
// border-right: 1.2vw solid #fff;
|
||
// }
|
||
|
||
// .openmore-button {
|
||
// display: flex;
|
||
// margin-top: 1.5vw;
|
||
// width: 100%;
|
||
|
||
// // height: 3vw;
|
||
// // background-color: red;
|
||
// .one-button {
|
||
// display: flex;
|
||
// // justify-content: center;
|
||
// align-items: center;
|
||
// height: 1vw;
|
||
// width: 8vw;
|
||
// font-size: 1.2vw;
|
||
|
||
// .small-imge {
|
||
// width: 1.5vw;
|
||
// height: 1.5vw;
|
||
// margin-right: 0.4vw;
|
||
// }
|
||
// }
|
||
// }
|
||
// }
|
||
</style> |