Browse Source

修改右侧菜单弹窗样式

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

2
.gitignore

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

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

@ -10,7 +10,8 @@
</template> </template>
<div class="buttomItem"> <div class="buttomItem">
<div class="buttomName">标签标志</div> <div class="buttomName">标签标志</div>
</div> </Popover> </div>
</Popover>
<div class="buttomItem"> <div class="buttomItem">
<div class="buttomName">截图</div> <div class="buttomName">截图</div>
</div> </div>
@ -35,12 +36,12 @@
<script setup lang='ts'> <script setup lang='ts'>
import userEdit from '@/views/page/aside/rightMenuItem/userEdit.vue' import userEdit from '@/views/page/aside/rightMenuItem/userEdit.vue'
import { ref } from 'vue'; import { ref } from 'vue';
import { Popover } from 'ant-design-vue';
import { useStore } from '@/store/index';
const visible = ref(false) const visible = ref(false)
function openUserEdit(){ function openUserEdit() {
visible.value = !visible.value visible.value = !visible.value
}import { Popover } from 'ant-design-vue'; }
import { useStore } from '@/store/index';
let piniaStore = useStore(); let piniaStore = useStore();
function addLabelFn(str: string) { function addLabelFn(str: string) {
piniaStore.updateIsAddLabel({ labelType: str, isAddLabel: true }) piniaStore.updateIsAddLabel({ labelType: str, isAddLabel: true })
@ -49,14 +50,14 @@ function addLabelFn(str: string) {
</script> </script>
<style scoped lang='less'> <style scoped lang='less'>
.buttomList { .buttomList {
position: absolute; position: absolute;
right: 1%; right: 1%;
top: 15%; top: 15%;
width: 80px; width: 80px;
} }
@keyframes rounte { @keyframes rounte {
from { from {
transform: rotate(0deg); transform: rotate(0deg);
} }
@ -64,15 +65,15 @@ function addLabelFn(str: string) {
to { to {
transform: rotate(360deg); transform: rotate(360deg);
} }
} }
.buttomItem { .buttomItem {
position: relative; position: relative;
width: 80px; width: 80px;
height: 80px; height: 80px;
} }
.buttomItem::before { .buttomItem::before {
content: ''; content: '';
background: url(@/assets/images/buttonBG01.png); background: url(@/assets/images/buttonBG01.png);
background-size: 100% 100%; background-size: 100% 100%;
@ -83,14 +84,14 @@ function addLabelFn(str: string) {
left: 5%; left: 5%;
right: 5%; right: 5%;
z-index: 1; z-index: 1;
} }
.buttomItem:hover::before { .buttomItem:hover::before {
background: url(@/assets/images/buttonBG02.png); background: url(@/assets/images/buttonBG02.png);
background-size: 100% 100%; background-size: 100% 100%;
} }
.buttomName { .buttomName {
position: absolute; position: absolute;
top: 50%; top: 50%;
left: 50%; left: 50%;
@ -101,5 +102,13 @@ function addLabelFn(str: string) {
width: 100%; width: 100%;
z-index: 2; z-index: 2;
font-size: 0.8em; font-size: 0.8em;
} }
ul{
padding: 0;
margin: 0;
p:last-child{
margin: 0;
}
}
</style> </style>

Loading…
Cancel
Save