12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970 |
- <template>
- <div class='picDia'>
- <el-dialog :visible.sync='dialogVisible' width='90%' :close-on-click-modal='false' :show-close='false'>
- <!-- <img
- src='https://ss0.bdstatic.com/94oJfD_bAAcT8t7mm9GUKT-xh_/timg?image&quality=100&size=b4000_4000&sec=1592807833&di=5adf17cda9f46c37696da5b1d0aec9dc&src=http://a3.att.hudong.com/14/75/01300000164186121366756803686.jpg'
- alt
- />-->
- <rotation :key='key' :type='1' v-if='rotationImg.length>0' :rotationImg='rotationImg' style='height:100%;width:100%'></rotation>
- <span class='close' @click='close'>X</span>
- </el-dialog>
- </div>
- </template>
- <script>
- export default {
- data() {
- return {
- dialogVisible: false,
- mode: 'top',
- rotationImg: [],
- key: 1
- }
- },
- methods: {
- showModal(params) {
- this.key++
- this.dialogVisible = true
- this.rotationImg = params
- },
- close() {
- this.dialogVisible = false
- }
- }
- }
- </script>
- <style lang="less" scoped>
- .picDia {
- img {
- width: 100%;
- height: 100%;
- }
- }
- .close {
- display: block;
- position: absolute;
- right: -40px;
- font-size: 20px;
- color: #fff;
- top: -30px;
- z-index: 10;
- cursor: pointer;
- }
- </style>
- <style lang='less'>
- .picDia {
- .el-dialog {
- height: 88%;
- margin-top: 5vh !important;
- position: relative;
- .el-dialog__header {
- padding: 0;
- }
- .el-dialog__body {
- padding: 0;
- height: 100%;
- }
- }
- }
- </style>
|