Browse Source

修改右侧菜单弹窗样式

master
chendingwei 2 years ago
parent
commit
3e9011d342
  1. 2
      .gitignore
  2. 145
      src/views/page/Aside/cameraRightMenu.vue

2
.gitignore

@ -24,5 +24,3 @@ dist-ssr
*.sw?
/components.d.ts
/components.d.ts
/components.d.ts

145
src/views/page/Aside/cameraRightMenu.vue

@ -10,37 +10,38 @@
</template>
<div class="buttomItem">
<div class="buttomName">标签标志</div>
</div> </Popover>
<div class="buttomItem">
<div class="buttomName">截图</div>
</div>
<div class="buttomItem">
<div class="buttomName">录像</div>
</div>
<div class="buttomItem">
<div class="buttomName">3D缩放</div>
</div>
<div class="buttomItem">
<div class="buttomName">设备标记</div>
</div>
<div class="buttomItem">
<div class="buttomName">工具箱</div>
</div>
<div class="buttomItem" @click="openUserEdit">
<div class="buttomName">设置</div>
</div>
</Popover>
<div class="buttomItem">
<div class="buttomName">截图</div>
</div>
<div class="buttomItem">
<div class="buttomName">录像</div>
</div>
<div class="buttomItem">
<div class="buttomName">3D缩放</div>
</div>
<div class="buttomItem">
<div class="buttomName">设备标记</div>
</div>
<div class="buttomItem">
<div class="buttomName">工具箱</div>
</div>
<div class="buttomItem" @click="openUserEdit">
<div class="buttomName">设置</div>
</div>
</div>
</template>
<script setup lang='ts'>
import userEdit from '@/views/page/aside/rightMenuItem/userEdit.vue'
import { ref } from 'vue';
import { Popover } from 'ant-design-vue';
import { useStore } from '@/store/index';
const visible = ref(false)
function openUserEdit(){
function openUserEdit() {
visible.value = !visible.value
}import { Popover } from 'ant-design-vue';
import { useStore } from '@/store/index';
}
let piniaStore = useStore();
function addLabelFn(str: string) {
piniaStore.updateIsAddLabel({ labelType: str, isAddLabel: true })
@ -49,57 +50,65 @@ function addLabelFn(str: string) {
</script>
<style scoped lang='less'>
.buttomList {
position: absolute;
right: 1%;
top: 15%;
width: 80px;
}
@keyframes rounte {
from {
transform: rotate(0deg);
}
.buttomList {
position: absolute;
right: 1%;
top: 15%;
width: 80px;
}
to {
transform: rotate(360deg);
}
@keyframes rounte {
from {
transform: rotate(0deg);
}
.buttomItem {
position: relative;
width: 80px;
height: 80px;
to {
transform: rotate(360deg);
}
}
.buttomItem::before {
content: '';
background: url(@/assets/images/buttonBG01.png);
background-size: 100% 100%;
position: absolute;
animation: rounte 5s linear infinite;
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
z-index: 1;
}
.buttomItem {
position: relative;
width: 80px;
height: 80px;
}
.buttomItem:hover::before {
background: url(@/assets/images/buttonBG02.png);
background-size: 100% 100%;
}
.buttomItem::before {
content: '';
background: url(@/assets/images/buttonBG01.png);
background-size: 100% 100%;
position: absolute;
animation: rounte 5s linear infinite;
top: 5%;
bottom: 5%;
left: 5%;
right: 5%;
z-index: 1;
}
.buttomItem:hover::before {
background: url(@/assets/images/buttonBG02.png);
background-size: 100% 100%;
}
.buttomName {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
line-height: 3vw;
width: 100%;
z-index: 2;
font-size: 0.8em;
}
ul{
padding: 0;
margin: 0;
p:last-child{
margin: 0;
}
}
.buttomName {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
color: #fff;
line-height: 3vw;
width: 100%;
z-index: 2;
font-size: 0.8em;
}
</style>

Loading…
Cancel
Save