<!--
|
* @Author: shuishen 1109946754@qq.com
|
* @Date: 2022-11-09 13:51:23
|
* @LastEditors: shuishen 1109946754@qq.com
|
* @LastEditTime: 2023-01-02 14:18:14
|
* @FilePath: \srs-police-affairs\src\components\shrink\index.vue
|
* @Description:
|
*
|
* Copyright (c) 2022 by shuishen 1109946754@qq.com, All Rights Reserved.
|
-->
|
<template>
|
<div class="shrink-box" @click="shrinkClick">{{ str }}</div>
|
</template>
|
|
<script>
|
export default {
|
name: 'shrink',
|
data () {
|
return {
|
str: '<<',
|
}
|
},
|
methods: {
|
shrinkClick () {
|
this.$parent.contentShow = !this.$parent.contentShow
|
if (this.$parent.contentShow == true) {
|
this.str = '<<'
|
document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
|
document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
|
document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
|
|
} else {
|
this.str = '>>'
|
document.querySelector('.dc-container .dc-zoom-controller').classList.add('shrink-btn')
|
document.querySelector('.screen-full-btn').classList.add('shrink-btn')
|
document.querySelector('.image-switch-icon-btn').classList.add('shrink-btn')
|
}
|
}
|
},
|
|
beforeDestroy () {
|
document.querySelector('.dc-container .dc-zoom-controller').classList.remove('shrink-btn')
|
document.querySelector('.screen-full-btn').classList.remove('shrink-btn')
|
document.querySelector('.image-switch-icon-btn').classList.remove('shrink-btn')
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.shrink-box {
|
position: absolute;
|
top: 0;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
margin: auto;
|
z-index: 99;
|
|
width: 36px;
|
height: 88px;
|
line-height: 88px;
|
text-align: center;
|
|
background: $bg-color;
|
color: #fff;
|
|
border-radius: 0 10px 10px 0;
|
|
cursor: pointer;
|
}
|
</style>
|
