|
@@ -4,22 +4,22 @@
|
|
|
*@info:图片轮播
|
|
|
*/
|
|
|
<template>
|
|
|
- <div :class='[type==1?"rotationFull":(type==3?"rotationFullYlt":"rotation")]'>
|
|
|
- <div v-if='rotationImg.length==1' 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
|
|
|
- />-->
|
|
|
- <img :src='rotationImg[0].url' alt ref='imgWidth' />
|
|
|
- <!-- <img src='./3440.jpg' alt /> -->
|
|
|
+ <div :class='[type==1?"rotationFull":(type==3?"rotationFullYlt":"rotation")]' class='wanda-rotation'>
|
|
|
+ <!-- <div v-if='rotationImg.length==1' class='rotationCon'>
|
|
|
+ <img :src='rotationImg[0].url' alt />
|
|
|
</div>
|
|
|
<el-carousel v-else trigger='click' style='height:100%;width:100%' :interval='5000' arrow='always' @change='changePic' :loop='false'>
|
|
|
<el-carousel-item v-for='(item,index) in rotationImg' :key='index'>
|
|
|
<img :src='item.url' alt />
|
|
|
</el-carousel-item>
|
|
|
+ </el-carousel>-->
|
|
|
+ <el-carousel style='height:100%;width:100%' :interval='5000' arrow='always' @change='changePic'>
|
|
|
+ <el-carousel-item v-for='(item,index) in fileList' :key='index'>
|
|
|
+ <img :src='item.url' alt style=' width: 100%; height: 100%;object-fit: cover;' />
|
|
|
+ </el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
-</template>
|
|
|
+</template>s
|
|
|
<script>
|
|
|
export default {
|
|
|
name: 'Rotation',
|
|
@@ -27,8 +27,24 @@ export default {
|
|
|
data() {
|
|
|
return {
|
|
|
rotationImgs: [{ url: require('@/assets/images/login_back.png') }],
|
|
|
- myImg: 'http://10.199.204.168:9080/doclinks/MANAGEINS/2020061921294136524467354供电系统原理图.png',
|
|
|
- imgInfo: {}
|
|
|
+ fileList: [
|
|
|
+ {
|
|
|
+ name: 'food.jpeg',
|
|
|
+ url: require('@/assets/imgs/2020.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'food2.jpeg',
|
|
|
+ url: require('@/assets/imgs/20200.png')
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'food.jpeg',
|
|
|
+ url: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: 'food2.jpeg',
|
|
|
+ url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
|
|
|
+ }
|
|
|
+ ]
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
@@ -36,129 +52,90 @@ 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 && this.rotation.length > 0) {
|
|
|
- console.log(this.rotation.length)
|
|
|
- }
|
|
|
- this.getImgInfo()
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|
|
|
-.rotation {
|
|
|
- width: 100%;
|
|
|
+.wanda-rotation {
|
|
|
height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .rotationCon {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- text-align: center;
|
|
|
- // display: flex;
|
|
|
+ /deep/ .el-carousel__button {
|
|
|
+ background-color: rgba(2, 91, 170, 1);
|
|
|
}
|
|
|
- img {
|
|
|
- // max-width: 100%;
|
|
|
- // max-height: 100%;
|
|
|
- // display: block;
|
|
|
- // margin: auto;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
+ /deep/ .el-carousel__arrow {
|
|
|
+ background-color: #00000050;
|
|
|
}
|
|
|
-}
|
|
|
-.rotationFull {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: auto;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .rotationCon {
|
|
|
- height: 100%;
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- }
|
|
|
- img {
|
|
|
- max-width: 100%;
|
|
|
- max-height: 100%;
|
|
|
- display: block;
|
|
|
- margin: auto;
|
|
|
- // min-width: 100%;
|
|
|
- }
|
|
|
-}
|
|
|
-.rotationFullYlt {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- overflow: hidden;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- // 轮播图适配
|
|
|
/deep/ .el-carousel__container {
|
|
|
- height: 100% !important;
|
|
|
- }
|
|
|
- .rotationCon {
|
|
|
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">
|
|
|
-.rotation,
|
|
|
-.rotationFull {
|
|
|
- .el-carousel__item h3 {
|
|
|
- color: #475669;
|
|
|
- font-size: 14px;
|
|
|
- opacity: 0.75;
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
|
|
|
- .el-carousel__item:nth-child(2n) {
|
|
|
- background-color: #99a9bf;
|
|
|
- }
|
|
|
+// .rotation {
|
|
|
+// width: 100%;
|
|
|
+// height: 100%;
|
|
|
+// overflow: hidden;
|
|
|
+// display: flex;
|
|
|
+// justify-content: center;
|
|
|
+// align-items: center;
|
|
|
+// .rotationCon {
|
|
|
+// height: 100%;
|
|
|
+// width: 100%;
|
|
|
+// text-align: center;
|
|
|
+// }
|
|
|
+// img {
|
|
|
|
|
|
- .el-carousel__item:nth-child(2n + 1) {
|
|
|
- background-color: #d3dce6;
|
|
|
- }
|
|
|
- .el-carousel__container {
|
|
|
- height: 100% !important;
|
|
|
- }
|
|
|
- .el-carousel__button {
|
|
|
- height: 3px;
|
|
|
- width: 16px;
|
|
|
- border-radius: 2px;
|
|
|
- opacity: 0.5;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|
|
|
+// width: 100%;
|
|
|
+// height: 100%;
|
|
|
+// object-fit: cover;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// .rotationFull {
|
|
|
+// width: 100%;
|
|
|
+// height: 100%;
|
|
|
+// overflow: auto;
|
|
|
+// display: flex;
|
|
|
+// justify-content: center;
|
|
|
+// align-items: center;
|
|
|
+// .rotationCon {
|
|
|
+// height: 100%;
|
|
|
+// width: 100%;
|
|
|
+// display: flex;
|
|
|
+// }
|
|
|
+// img {
|
|
|
+// max-width: 100%;
|
|
|
+// max-height: 100%;
|
|
|
+// display: block;
|
|
|
+// margin: auto;
|
|
|
+// }
|
|
|
+// }
|
|
|
+// .rotationFullYlt {
|
|
|
+// width: 100%;
|
|
|
+// height: 100%;
|
|
|
+// overflow: hidden;
|
|
|
+// display: flex;
|
|
|
+// justify-content: center;
|
|
|
+// align-items: center;
|
|
|
+// /deep/ .el-carousel__container {
|
|
|
+// height: 100% !important;
|
|
|
+// }
|
|
|
+// .rotationCon {
|
|
|
+// height: 100%;
|
|
|
+// width: 100%;
|
|
|
+// overflow: auto;
|
|
|
+// }
|
|
|
+// /deep/ .el-carousel__item {
|
|
|
+// text-align: center;
|
|
|
+// background: #fff;
|
|
|
+// }
|
|
|
+// img {
|
|
|
+
|
|
|
+// height: 100%;
|
|
|
+
|
|
|
+// }
|
|
|
+// }
|
|
|
+</style>
|