|
|
@@ -1,40 +1,45 @@
|
|
|
<template>
|
|
|
- <header>
|
|
|
- <div v-if="project">项目 - {{ project.name }}</div>
|
|
|
+ <header v-show="!fscChecked">
|
|
|
+ <div v-if="project">{{ project.projectName }}</div>
|
|
|
</header>
|
|
|
<article>
|
|
|
<main>
|
|
|
<div class="split" v-if="source">
|
|
|
- <iframe ref="sourceFrame" :src="`smart-laser.html?m=${source.num}&dev`" frameborder="0" @load="onLoadSource"></iframe>
|
|
|
- <div class="tools">
|
|
|
+ <iframe ref="sourceFrame" :src="sourceURL" frameborder="0" @load="onLoadSource"></iframe>
|
|
|
+ <!-- <div class="tools">
|
|
|
<div class="item-mode">
|
|
|
<div class="iconfont icon-show_roaming_normal" :class="{ active: mode == 0 }" @click="onModeChange(0)"></div>
|
|
|
<div class="iconfont icon-show_more" :class="{ active: mode == 1 }" @click="onModeChange(1)"></div>
|
|
|
</div>
|
|
|
- <div class="item-date" v-if="target">
|
|
|
- <span class="prev" @click="onPrevDate('source')"><i class="iconfont icon-show_back"></i></span>
|
|
|
- <span @click="onPickDate('source')">{{ source.date }}</span>
|
|
|
- <span class="next" @click="onNextDate('source')"><i class="iconfont icon-show_back"></i></span>
|
|
|
+ </div> -->
|
|
|
+ <div class="tools" v-show="!fscChecked && !bimChecked">
|
|
|
+ <div class="item-date">
|
|
|
+ <calendar name="source" :value="sourceDate" :highlighted="highlighted" @selected="onSelected" @prev="onPrevDate" @next="onNextDate"></calendar>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="split" v-if="target">
|
|
|
- <iframe ref="targetFrame" :src="`smart-bim.html?m=${target.num}`" frameborder="0" @load="onLoadTarget"></iframe>
|
|
|
+ <iframe ref="targetFrame" :src="targetURL" frameborder="0" @load="onLoadTarget"></iframe>
|
|
|
+ <div class="tools" v-show="!fscChecked && !bimChecked">
|
|
|
+ <div class="item-date">
|
|
|
+ <calendar name="target" :value="targetDate" :highlighted="highlighted" @selected="onSelected" @prev="onPrevDate" @next="onNextDate"></calendar>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="tools" v-if="source">
|
|
|
- <div class="item-date" v-if="!target">
|
|
|
- <span class="prev" @click="onPrevDate()"><i class="iconfont icon-show_back"></i></span>
|
|
|
- <span @click="onPickDate('all')">{{ source.date }}</span>
|
|
|
- <span class="next" @click="onNextDate()"><i class="iconfont icon-show_back"></i></span>
|
|
|
+ <div class="model">
|
|
|
+ <div class="bim" :class="{ active: bimChecked, disable: true }" v-show="!fscChecked">
|
|
|
+ <div @click="onBimChecked">
|
|
|
+ <i class="iconfont icon-BIM"></i>
|
|
|
+ <span>BIM</span>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
- <div class="item-split" @click="onCompare">
|
|
|
- <i class="iconfont icon-size-o"></i>
|
|
|
+ <div class="dbs" :class="{ active: dbsChecked }" @click="onDbsChecked" v-show="!fscChecked">
|
|
|
+ <i class="iconfont icon-split_screen"></i>
|
|
|
+ <span>分屏</span>
|
|
|
</div>
|
|
|
- </div>
|
|
|
- <div class="popup" v-if="source && datepickName">
|
|
|
- <div>
|
|
|
- <span @click="onPickClose"><i class="iconfont icon-close"></i></span>
|
|
|
- <datepicker language="zh" :inline="true" :value="datepickValue" :highlighted="highlighted" @selected="onSelected"></datepicker>
|
|
|
+ <div class="fsc" :class="{ active: fscChecked }" @click="onFscChecked">
|
|
|
+ <i class="iconfont" :class="[fscChecked ? 'icon-full_screen_selected' : 'icon-full_screen_normal']"></i>
|
|
|
+ <span>全屏</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</main>
|
|
|
@@ -42,12 +47,18 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import Datepicker from '@/components/datepicker/Datepicker'
|
|
|
-import { ref, onActivated, onDeactivated, reactive, onMounted, computed } from 'vue'
|
|
|
+import { ref, onMounted, computed } from 'vue'
|
|
|
+import { http } from '@/utils/request'
|
|
|
+import browser from '@/utils/browser'
|
|
|
+import Calendar from '@/components/calendar'
|
|
|
import ConvertViews from '@/utils/ConvertViews'
|
|
|
-
|
|
|
-let sourceApp = null, sourceSceneName
|
|
|
-let targetApp = null
|
|
|
+
|
|
|
+let sourceApp = null,
|
|
|
+ targetApp = null
|
|
|
+
|
|
|
+const bimChecked = ref(null)
|
|
|
+const dbsChecked = ref(null)
|
|
|
+const fscChecked = ref(null)
|
|
|
|
|
|
const views = new ConvertViews()
|
|
|
const datepickName = ref(null)
|
|
|
@@ -58,92 +69,135 @@ const mode = ref(0)
|
|
|
const source = ref(null)
|
|
|
const target = ref(null)
|
|
|
const project = ref(null)
|
|
|
-const projects = reactive([{ pid: '001', name: '五楼办公区', num: 'SS-t-bFMqa1dqUU', date: '2022-09-01' }])
|
|
|
-const scenes = reactive([
|
|
|
- { pid: '001', num: 'SS-t-bFMqa1dqUU', date: '2022-09-01' },
|
|
|
- { pid: '001', num: 'SS-t-xp9BDKfzhR', date: '2022-09-03' },
|
|
|
- { pid: '001', num: 'SS-t-lc5OWhZPaC', date: '2022-09-05' },
|
|
|
- { pid: '001', num: 'SS-t-Y6gLRFwxE5', date: '2022-09-10' },
|
|
|
-])
|
|
|
+
|
|
|
+const scenes = computed(() => {
|
|
|
+ if (!project.value) {
|
|
|
+ return []
|
|
|
+ }
|
|
|
+ return project.value.sceneList.map(item => {
|
|
|
+ return {
|
|
|
+ num: item.num,
|
|
|
+ type: item.type,
|
|
|
+ createTime: item.createTime,
|
|
|
+ }
|
|
|
+ })
|
|
|
+})
|
|
|
+const sourceURL = computed(() => {
|
|
|
+ if (bimChecked.value) {
|
|
|
+ return `smart-bim.html?m=${source.value.num}`
|
|
|
+ }
|
|
|
+
|
|
|
+ if (source.value.type < 2) {
|
|
|
+ // 看看、看见场景
|
|
|
+ return `smart-kankan.html?m=${source.value.num}&dev`
|
|
|
+ } else {
|
|
|
+ // 深时场景
|
|
|
+ return `smart-laser.html?m=${source.value.num}&dev`
|
|
|
+ }
|
|
|
+})
|
|
|
+const targetURL = computed(() => {
|
|
|
+ if (bimChecked.value) {
|
|
|
+ return `smart-bim.html?m=${source.value.num}`
|
|
|
+ }
|
|
|
+
|
|
|
+ if (source.value.type < 2) {
|
|
|
+ // 看看、看见场景
|
|
|
+ return `smart-kankan.html?m=${target.value.num}&dev`
|
|
|
+ } else {
|
|
|
+ // 深时场景
|
|
|
+ return `smart-laser.html?m=${target.value.num}&dev`
|
|
|
+ }
|
|
|
+})
|
|
|
+const sourceDate = computed(() => {
|
|
|
+ if (source.value) {
|
|
|
+ return source.value.createTime.toDate()
|
|
|
+ }
|
|
|
+})
|
|
|
+
|
|
|
+const targetDate = computed(() => {
|
|
|
+ if (target.value) {
|
|
|
+ return target.value.createTime.toDate()
|
|
|
+ }
|
|
|
+})
|
|
|
const highlighted = computed(() => {
|
|
|
let dates = []
|
|
|
if (datepickName.value) {
|
|
|
- dates = scenes.map(item => item.date.toDate())
|
|
|
+ dates = scenes.map(item => item.createTime.toDate())
|
|
|
}
|
|
|
return {
|
|
|
dates: dates,
|
|
|
}
|
|
|
})
|
|
|
|
|
|
-const getView = ()=>{
|
|
|
+const getView = () => {
|
|
|
let camera = sourceApp.viewer.mainViewport.camera
|
|
|
return {
|
|
|
- position : camera.position,
|
|
|
- quaternion : camera.quaternion,
|
|
|
- fov : camera.fov
|
|
|
+ position: camera.position,
|
|
|
+ quaternion: camera.quaternion,
|
|
|
+ fov: camera.fov,
|
|
|
}
|
|
|
-}
|
|
|
+}
|
|
|
|
|
|
-const initConvertView = (noNeedBindEvent) => {
|
|
|
- if(sourceApp && targetApp ){
|
|
|
- views.init(sourceApp, targetApp , sourceApp.viewer.inputHandler.domElement, 'laser', getView(),
|
|
|
- sourceApp.viewer.images360.panos.slice(0,2).map(e=>e.position), )
|
|
|
+const initConvertView = noNeedBindEvent => {
|
|
|
+ if (sourceApp && targetApp) {
|
|
|
+ views.init(
|
|
|
+ sourceApp,
|
|
|
+ targetApp,
|
|
|
+ sourceApp.viewer.inputHandler.domElement,
|
|
|
+ 'laser',
|
|
|
+ getView(),
|
|
|
+ sourceApp.viewer.images360.panos.slice(0, 2).map(e => e.position)
|
|
|
+ )
|
|
|
}
|
|
|
}
|
|
|
|
|
|
const onLoadSource = () => {
|
|
|
-
|
|
|
- if(views.loaded){
|
|
|
- views.clear({dontClearTarget:true})
|
|
|
+ if (bimChecked.value) {
|
|
|
+ // BIM单屏模式
|
|
|
+ return
|
|
|
}
|
|
|
|
|
|
+ if (views.loaded) {
|
|
|
+ views.clear({ dontClearTarget: true })
|
|
|
+ }
|
|
|
|
|
|
sourceApp = sourceFrame.value.contentWindow
|
|
|
sourceApp.loaded.then(sdk => {
|
|
|
if (mode.value != 0) {
|
|
|
sdk.scene.changeMode(mode.value)
|
|
|
}
|
|
|
-
|
|
|
- window.viewer1 = sourceApp.viewer
|
|
|
-
|
|
|
- viewer1.mainViewport.view.minPitch+=0.01//防止bim垂直视角上的闪烁（似乎是因 up 要乘以某矩阵导致微小偏差所致）
|
|
|
- viewer1.mainViewport.view.minPitch-=0.01
|
|
|
-
|
|
|
-
|
|
|
+
|
|
|
+ window.viewer1 = sourceApp.viewer
|
|
|
+
|
|
|
+ viewer1.mainViewport.view.minPitch += 0.01 //防止bim垂直视角上的闪烁（似乎是因 up 要乘以某矩阵导致微小偏差所致）
|
|
|
+ viewer1.mainViewport.view.minPitch -= 0.01
|
|
|
+
|
|
|
initConvertView()
|
|
|
- sourceSceneName = sourceApp.Potree.settings.number
|
|
|
- sourceApp.viewer.addEventListener('camera_changed', e => {
|
|
|
- targetApp && views.receive( getView() )
|
|
|
- })
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- sourceApp.canChangePos = ()=>{
|
|
|
+
|
|
|
+ sourceApp.viewer.addEventListener('camera_changed', e => {
|
|
|
+ targetApp && views.receive(getView())
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
+ sourceApp.canChangePos = () => {
|
|
|
return sourceApp.Potree.settings.displayMode != 'showPanos'
|
|
|
}
|
|
|
-
|
|
|
}
|
|
|
-const onLoadTarget = () => {
|
|
|
-
|
|
|
+const onLoadTarget = () => {
|
|
|
targetApp = targetFrame.value.contentWindow
|
|
|
-
|
|
|
- targetApp.loaded.then(viewer=>{
|
|
|
+
|
|
|
+ targetApp.loaded.then(viewer => {
|
|
|
window.viewer2 = targetApp.viewer
|
|
|
- initConvertView()
|
|
|
+ initConvertView()
|
|
|
})
|
|
|
-
|
|
|
}
|
|
|
|
|
|
-
|
|
|
-views.addEventListener('sendCameraData',(e)=>{ //同步右侧数据
|
|
|
+views.addEventListener('sendCameraData', e => {
|
|
|
+ //同步右侧数据
|
|
|
sourceApp.viewer.mainViewport.view.position.copy(e.data.position)
|
|
|
sourceApp.viewer.mainViewport.view.lookAt(e.data.target)
|
|
|
-
|
|
|
})
|
|
|
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
const onModeChange = targetMode => {
|
|
|
if (sourceApp) {
|
|
|
sourceApp.loaded.then(sdk => sdk.scene.changeMode(targetMode))
|
|
|
@@ -163,6 +217,7 @@ const onPickClose = () => {
|
|
|
datepickValue.value = null
|
|
|
}
|
|
|
const onSelected = payload => {
|
|
|
+ alert(payload)
|
|
|
if (!payload) {
|
|
|
return
|
|
|
}
|
|
|
@@ -193,7 +248,7 @@ const onSelected = payload => {
|
|
|
|
|
|
datepickName.value = null
|
|
|
}
|
|
|
-const onCompare = () => {
|
|
|
+const onSplit = () => {
|
|
|
if (target.value) {
|
|
|
target.value = null
|
|
|
targetApp = null
|
|
|
@@ -212,55 +267,128 @@ const onCompare = () => {
|
|
|
|
|
|
const onPrevDate = name => {
|
|
|
let scene = null
|
|
|
- if (!name || name == 'source') {
|
|
|
+ if (name == 'source') {
|
|
|
scene = source
|
|
|
} else {
|
|
|
scene = target
|
|
|
}
|
|
|
- let index = scenes.findIndex(item => item.num == scene.value.num)
|
|
|
+ let index = scenes.value.findIndex(item => item.num == scene.value.num)
|
|
|
if (index == -1) {
|
|
|
return
|
|
|
}
|
|
|
if (--index == -1) {
|
|
|
- index = scenes.length - 1
|
|
|
+ index = scenes.value.length - 1
|
|
|
}
|
|
|
|
|
|
- scene.value = scenes[index]
|
|
|
+ scene.value = scenes.value[index]
|
|
|
}
|
|
|
const onNextDate = name => {
|
|
|
let scene = null
|
|
|
- if (!name || name == 'source') {
|
|
|
+ if (name == 'source') {
|
|
|
scene = source
|
|
|
} else {
|
|
|
scene = target
|
|
|
}
|
|
|
- let index = scenes.findIndex(item => item.num == scene.value.num)
|
|
|
+ let index = scenes.value.findIndex(item => item.num == scene.value.num)
|
|
|
if (index == -1) {
|
|
|
return
|
|
|
}
|
|
|
- if (++index > scenes.length - 1) {
|
|
|
+ if (++index > scenes.value.length - 1) {
|
|
|
index = 0
|
|
|
}
|
|
|
-
|
|
|
- scene.value = scenes[index]
|
|
|
+
|
|
|
+ scene.value = scenes.value[index]
|
|
|
}
|
|
|
|
|
|
-onMounted(() => {
|
|
|
- project.value = projects[0]
|
|
|
- if (project.value) {
|
|
|
- source.value = scenes[0] //scenes.find(item => item.num == project.value.num)
|
|
|
+// bim点击
|
|
|
+const onBimChecked = () => {
|
|
|
+ if (bimChecked.value) {
|
|
|
+ bimChecked.value = false
|
|
|
+ } else {
|
|
|
+ bimChecked.value = true
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 分屏点击
|
|
|
+const onDbsChecked = () => {
|
|
|
+ dbsChecked.value = !dbsChecked.value
|
|
|
+ if (dbsChecked.value) {
|
|
|
+ if (bimChecked.value) {
|
|
|
+ // BIM分屏
|
|
|
+ } else {
|
|
|
+ // 四维看看、激光场景分屏
|
|
|
+ let index = scenes.value.findIndex(item => item.num == source.value.num)
|
|
|
+ if (index == -1) {
|
|
|
+ return
|
|
|
+ }
|
|
|
+ if (++index > scenes.value.length - 1) {
|
|
|
+ index = 0
|
|
|
+ }
|
|
|
+ target.value = scenes.value[index]
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ target.value = null
|
|
|
+ targetApp = null
|
|
|
+ views.clear()
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 全屏点击
|
|
|
+const onFscChecked = () => {
|
|
|
+ let element = document.documentElement
|
|
|
+
|
|
|
+ fscChecked.value = !fscChecked.value
|
|
|
+
|
|
|
+ if (fscChecked.value) {
|
|
|
+ if (element.requestFullscreen) {
|
|
|
+ element.requestFullscreen()
|
|
|
+ } else if (element.webkitRequestFullScreen) {
|
|
|
+ element.webkitRequestFullScreen()
|
|
|
+ } else if (element.mozRequestFullScreen) {
|
|
|
+ element.mozRequestFullScreen()
|
|
|
+ } else if (element.msRequestFullscreen) {
|
|
|
+ element.msRequestFullscreen()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (document.exitFullscreen) {
|
|
|
+ document.exitFullscreen()
|
|
|
+ } else if (document.webkitCancelFullScreen) {
|
|
|
+ document.webkitCancelFullScreen()
|
|
|
+ } else if (document.mozCancelFullScreen) {
|
|
|
+ document.mozCancelFullScreen()
|
|
|
+ } else if (document.msExitFullscreen) {
|
|
|
+ document.msExitFullscreen()
|
|
|
+ }
|
|
|
}
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+ const projectId = browser.valueFromUrl('projectId') || 1
|
|
|
+ http.get(`smart-site/project/info?projectId=${projectId}`)
|
|
|
+ .then(response => {
|
|
|
+ if (response.success) {
|
|
|
+ project.value = response.data
|
|
|
+ if (project.value.sceneList.length) {
|
|
|
+ source.value = project.value.sceneList[project.value.sceneList.length - 1]
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ alert('获取数据失败')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ alert('服务器连接失败')
|
|
|
+ })
|
|
|
})
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
header {
|
|
|
height: 60px;
|
|
|
- background-color: rgba(0, 0, 0, 0.8);
|
|
|
+ background-color: #1a1b1d;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 16px;
|
|
|
}
|
|
|
article {
|
|
|
display: flex;
|
|
|
@@ -315,117 +443,90 @@ main {
|
|
|
height: 100%;
|
|
|
overflow: hidden;
|
|
|
position: relative;
|
|
|
- .tools {
|
|
|
- width: 100%;
|
|
|
- padding-left: 20px;
|
|
|
- padding-right: 20px;
|
|
|
- justify-content: space-between;
|
|
|
- left: 0;
|
|
|
- transform: none;
|
|
|
- .item-mode {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-around;
|
|
|
- height: 34px;
|
|
|
- border-radius: 17px;
|
|
|
- background-color: rgba(0, 0, 0, 0.3);
|
|
|
- > div {
|
|
|
- position: relative;
|
|
|
- margin-left: 20px;
|
|
|
- margin-right: 20px;
|
|
|
- cursor: pointer;
|
|
|
- &.active {
|
|
|
- color: #00c8af;
|
|
|
- }
|
|
|
- }
|
|
|
- i {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // .tools {
|
|
|
+ // width: 100%;
|
|
|
+ // padding-left: 20px;
|
|
|
+ // padding-right: 20px;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // left: 0;
|
|
|
+ // transform: none;
|
|
|
+ // .item-mode {
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // justify-content: space-around;
|
|
|
+ // height: 34px;
|
|
|
+ // border-radius: 17px;
|
|
|
+ // background-color: rgba(0, 0, 0, 0.3);
|
|
|
+ // > div {
|
|
|
+ // position: relative;
|
|
|
+ // margin-left: 20px;
|
|
|
+ // margin-right: 20px;
|
|
|
+ // cursor: pointer;
|
|
|
+ // &.active {
|
|
|
+ // color: #00c8af;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // i {
|
|
|
+ // font-size: 18px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
}
|
|
|
- .tools {
|
|
|
+ .model {
|
|
|
position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- bottom: 10px;
|
|
|
+ left: 50px;
|
|
|
+ bottom: 40px;
|
|
|
z-index: 1000;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- i {
|
|
|
- font-size: 18px;
|
|
|
- }
|
|
|
- .item-date {
|
|
|
- position: relative;
|
|
|
- height: 34px;
|
|
|
- border-radius: 17px;
|
|
|
- background-color: rgba(0, 0, 0, 0.3);
|
|
|
- padding: 0 30px;
|
|
|
+ flex-direction: column;
|
|
|
+ > div {
|
|
|
+ cursor: pointer;
|
|
|
+ width: 50px;
|
|
|
+ height: 50px;
|
|
|
+ margin-top: 16px;
|
|
|
+ background: rgba(27, 27, 28, 0.8);
|
|
|
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ border-radius: 47px 47px 47px 47px;
|
|
|
+ border: 1px solid #000000;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
align-items: center;
|
|
|
- margin-left: 10px;
|
|
|
- margin-right: 10px;
|
|
|
- span {
|
|
|
- cursor: pointer;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ &.disable {
|
|
|
+ opacity: 0.3;
|
|
|
+ cursor: default;
|
|
|
+ > div {
|
|
|
+ pointer-events: none;
|
|
|
+ }
|
|
|
}
|
|
|
- .prev,
|
|
|
- .next {
|
|
|
- position: absolute;
|
|
|
- left: 5px;
|
|
|
+ > div {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
}
|
|
|
- .next {
|
|
|
- left: auto;
|
|
|
- right: 5px;
|
|
|
- transform: rotate(180deg);
|
|
|
+ &.active {
|
|
|
+ color: #0076f6;
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ font-size: 12px;
|
|
|
+ padding-top: 1px;
|
|
|
+ transform: scale(0.8);
|
|
|
}
|
|
|
- }
|
|
|
-
|
|
|
- .item-split {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- width: 34px;
|
|
|
- height: 34px;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: rgba(0, 0, 0, 0.3);
|
|
|
- cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
- .popup {
|
|
|
+ .tools {
|
|
|
position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
width: 100%;
|
|
|
- height: 100%;
|
|
|
+ bottom: 40px;
|
|
|
z-index: 1000;
|
|
|
display: flex;
|
|
|
- align-items: center;
|
|
|
justify-content: center;
|
|
|
- > div {
|
|
|
- position: relative;
|
|
|
- color: #444;
|
|
|
- span {
|
|
|
- position: absolute;
|
|
|
- right: -20px;
|
|
|
- top: -20px;
|
|
|
- cursor: pointer;
|
|
|
- background-color: rgba(0, 0, 0, 0.3);
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- border-radius: 50%;
|
|
|
- z-index: 1000;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
- i {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
+ align-items: center;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
}
|
|
|
</style>
|
|
|
@@ -435,13 +536,42 @@ main {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
}
|
|
|
+.vuejs3-datepicker__calendar {
|
|
|
+ background: rgba(27, 27, 28, 0.8);
|
|
|
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
|
|
|
+ border-radius: 4px 4px 4px 4px;
|
|
|
+ opacity: 1;
|
|
|
+ border: 1px solid #000000;
|
|
|
+ filter: blur(undefinedpx);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
.vuejs3-datepicker__calendar-topbar {
|
|
|
display: none !important;
|
|
|
}
|
|
|
+.vuejs3-datepicker__calendar header .up:not(.disabled):hover {
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ color: #fff;
|
|
|
+}
|
|
|
+
|
|
|
+.vuejs3-datepicker__calendar header .prev:after {
|
|
|
+ border-left: 1px solid #fff;
|
|
|
+ border-bottom: 1px solid #fff;
|
|
|
+}
|
|
|
+.vuejs3-datepicker__calendar header .prev:not(.disabled):hover {
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
+
|
|
|
+.vuejs3-datepicker__calendar header .next:after {
|
|
|
+ border-top: 1px solid #fff;
|
|
|
+ border-right: 1px solid #fff;
|
|
|
+}
|
|
|
+.vuejs3-datepicker__calendar header .next:not(.disabled):hover {
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+}
|
|
|
.highlighted {
|
|
|
background: #4ebde1 !important;
|
|
|
}
|
|
|
.selected {
|
|
|
- background: #00c8af !important;
|
|
|
+ background: #0076f6 !important;
|
|
|
}
|
|
|
</style>
|
