RelevantIndicators.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115
  1. <template>
  2. <view class="relevant">
  3. <view class="relevantTitle">{{ $i18n.locale=='zh'?'相关指标':'Other' }}</view>
  4. <view class="page-section swiper">
  5. <view class="page-section-spacing">
  6. <swiper v-if="dataList.length>4" class="swiper" :interval="interval" :duration="duration" :display-multiple-items="4">
  7. <swiper-item v-for="(item,index) in dataList" :key="'iconitem'+index" @click="emitItem(item)">
  8. <view class="swiper-item">
  9. <view class="icon">
  10. <!-- <img :src="item.icon" alt=""/>-->
  11. <u-image :src="item.icon!=undefined?item.icon:require('@/static/img/infomationdata/dianli/yongdian.png')" mode="widthFix" alt="" width="100%"></u-image>
  12. </view>
  13. <view class="labeltext">{{item.label}}</view>
  14. </view>
  15. </swiper-item>
  16. </swiper>
  17. <view v-else class="swiper">
  18. <view style="width: 25%;display: inline-block;" v-for="(item,index) in dataList" :key="'iconitem'+index" @click="emitItem(item)">
  19. <view class="swiper-item">
  20. <view class="icon">
  21. <u-image :src="item.icon!=undefined?item.icon:require('@/static/img/infomationdata/dianli/yongdian.png')" mode="widthFix" alt="" width="100%"></u-image>
  22. </view>
  23. <view class="labeltext">{{item.label}}</view>
  24. </view>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. </template>
  31. <script>
  32. export default {
  33. name:'RelevantIndicator',
  34. props:{
  35. dataList:{
  36. type:Array,
  37. default:()=>[]
  38. }
  39. },
  40. data(){
  41. return {
  42. indicatorDots: true,
  43. autoplay: true,
  44. interval: 2000,
  45. duration: 500
  46. }
  47. },
  48. methods:{
  49. changeIndicatorDots(e) {
  50. this.indicatorDots = !this.indicatorDots
  51. },
  52. changeAutoplay(e) {
  53. this.autoplay = !this.autoplay
  54. },
  55. intervalChange(e) {
  56. this.interval = e.target.value
  57. },
  58. durationChange(e) {
  59. this.duration = e.target.value
  60. },
  61. emitItem(item){
  62. this.$emit('showRelevant',item)
  63. }
  64. }
  65. }
  66. </script>
  67. <style scoped lang="scss">
  68. .swiper-item{
  69. font-size:26upx;
  70. margin:20upx 20upx;
  71. text-align:center;
  72. cursor:pointer;
  73. .icon{
  74. position:relative;
  75. overflow:hidden;
  76. max-width:100upx;
  77. margin:20upx auto 10upx;
  78. img{
  79. display:block;
  80. width:100%;
  81. }
  82. }
  83. .labeltext{
  84. width:100%;
  85. //overflow:hidden;
  86. //text-overflow:ellipsis;
  87. //white-space: nowrap;
  88. word-break: break-all;
  89. text-overflow: ellipsis;
  90. overflow: hidden;
  91. display: -webkit-box;
  92. -webkit-line-clamp: 2;
  93. -webkit-box-orient: vertical;
  94. }
  95. }
  96. .relevantTitle{
  97. padding:20upx;
  98. position:relative;
  99. overflow:hidden;
  100. text-indent:10upx;
  101. }
  102. .relevantTitle:after{
  103. content:"";
  104. width:6upx;
  105. height:30upx;
  106. background:#1777FE;
  107. position:absolute;
  108. left:10upx;
  109. top:50%;
  110. text-indent:8upx;
  111. margin-top:-18upx;
  112. }
  113. </style>