pic.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. <template name="pic">
  2. <view class="cover cover-height">
  3. <image @load="loadImg" @click="Dever.viewPic([item.pic], item.pic)" :src="item.pic" mode="widthFix" :class="['default', 'slide-image', 'slide-image-'+item.type]" style="height:auto"></image>
  4. <dever-position :item="item.text" :down="item.pic" :button="item.is_button"></dever-position>
  5. </view>
  6. </template>
  7. <script>
  8. import deverPosition from "@/lib/dever/components/position.vue";
  9. export default {
  10. name: "pic",
  11. props: {
  12. control : {
  13. type : Object,
  14. value : null
  15. },
  16. item : {
  17. type : Object,
  18. value : null
  19. },
  20. index : 0,
  21. pic_index : 0,
  22. },
  23. methods:{
  24. loadImg : function(e) {
  25. var height = e.detail.height / (e.detail.width / this.Dever.config.system.windowWidth);
  26. this.$emit('setHeight', this.pic_index, height);
  27. }
  28. },
  29. components:{
  30. deverPosition
  31. }
  32. }
  33. </script>
  34. <style>
  35. .cover{
  36. position: relative;
  37. width: 100%;
  38. height: 100%;
  39. }
  40. .cover-height{
  41. overflow: auto;
  42. position: absolute;
  43. top:0;
  44. left:0;
  45. width:100%;
  46. height:100%;
  47. }
  48. .slide-image {
  49. }
  50. .slide-image-1 {
  51. width: 750rpx;
  52. height: 1386rpx;
  53. display: block;
  54. }
  55. .slide-image-2 {
  56. width: 2000rpx;
  57. height: 100%;
  58. display: block;
  59. }
  60. .long-wrapper {
  61. position: relative;
  62. }
  63. </style>