|
@@ -5,7 +5,15 @@
|
|
|
*/
|
|
|
<template>
|
|
|
<div :class='[type==1?"rotationFull":(type==3?"rotationFullYlt":"rotation")]'>
|
|
|
- <div v-if='rotationImg.length==1' class='rotationCon'>
|
|
|
+ <div v-if='rotationImg.length==1 && size=="width"' class='rotationConType'>
|
|
|
+ <!-- <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
|
|
|
+ />-->
|
|
|
+ <img :src='rotationImg[0].url' alt ref='imgWidth' />
|
|
|
+ <!-- <img src='./3440.jpg' alt /> -->
|
|
|
+ </div>
|
|
|
+ <div v-else-if='rotationImg.length==1 && size=="height"' class='rotationCon'>
|
|
|
<!-- <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
|
|
@@ -23,7 +31,7 @@
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'Rotation',
|
|
|
- props: ['rotationImg', 'type'],
|
|
|
+ props: ['rotationImg', 'type', 'size'],
|
|
|
data() {
|
|
|
return {
|
|
|
rotationImgs: [{ url: require('@/assets/images/login_back.png') }],
|
|
@@ -36,27 +44,12 @@ export default {
|
|
|
if (this.type == 2) {
|
|
|
this.$emit('scan', val + 1)
|
|
|
}
|
|
|
- },
|
|
|
- getImgInfo() {
|
|
|
- let img = new Image()
|
|
|
- img.src = this.myImg
|
|
|
- const vm = this
|
|
|
- img.onload = function() {
|
|
|
- vm.$set(vm.imgInfo, 'width', img.width)
|
|
|
- vm.$set(vm.imgInfo, 'height', img.height)
|
|
|
- console.log(vm.imgInfo) // 打印图片信息
|
|
|
- }
|
|
|
- console.log(this.$refs.imgWidth)
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
if (this.type == 2) {
|
|
|
this.changePic(1)
|
|
|
}
|
|
|
- if (this.rotation.length > 0) {
|
|
|
- console.log(this.rotation.length)
|
|
|
- }
|
|
|
- this.getImgInfo()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
@@ -132,6 +125,23 @@ export default {
|
|
|
// width: 100%;
|
|
|
// min-height: 100%;
|
|
|
}
|
|
|
+ .rotationConType {
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ /deep/ .el-carousel__item {
|
|
|
+ text-align: center;
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 100%;
|
|
|
+ // height: 100%;
|
|
|
+ // object-fit: fill;
|
|
|
+ // min-width: 100%;
|
|
|
+ // width: 100%;
|
|
|
+ // min-height: 100%;
|
|
|
+ }
|
|
|
}
|
|
|
</style>
|
|
|
<style lang="less">
|