unitIntroduction.vue 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
  1. <template>
  2. <view class="unitIntroduction">
  3. <view class="unitImbBox">
  4. <view class="unitImg">
  5. <view class="hz-title">{{$t('common.TitleTop')}}</view>
  6. <view class="zj-title">{{$t('common.TitleBottom')}}</view>
  7. </view>
  8. </view>
  9. <view class="unit-explain">
  10. {{$t('common.CooperationUnitIntroduction')}}
  11. </view>
  12. <view class="unit-cooperation">
  13. <view class="unit-title">{{$t('common.AgreementMoUPartners')}}</view>
  14. <view class="unit-wrap">
  15. <u-row gutter="16">
  16. <u-col span="12" v-for="(item,index) in unitInitData" :key="index">
  17. <view class="unit-item" @click="toViewDetails(item)">
  18. <image v-if="memberUnits[item.unitId]" class="xin" src="../../../static/img/cooperationNetwork/xin.png" mode=""></image>
  19. <text>{{$i18n.locale === 'zh'?item.unitZhName : item.unitEnName}}</text>
  20. </view>
  21. </u-col>
  22. </u-row>
  23. </view>
  24. </view>
  25. </view>
  26. </template>
  27. <script>
  28. export default {
  29. data() {
  30. return {
  31. detailShow: false,
  32. params: {
  33. pageSize: '',
  34. language: '',
  35. unitZhName: '',
  36. unitEnName: ''
  37. },
  38. unitInitData: [],
  39. memberUnits: {},
  40. }
  41. },
  42. mounted() {
  43. this.get();
  44. },
  45. methods: {
  46. async get() {
  47. this.params.language = this.$i18n.locale.toUpperCase();
  48. const res = await this.$myRequest({
  49. url: '/project/baseCooperationUnits/',
  50. data: this.params
  51. });
  52. // console.log(res);
  53. if (res.data) {
  54. this.unitInitData = res.data.baseCooperationUnits;
  55. this.memberUnits = res.data.memberUnits;
  56. }
  57. },
  58. toViewDetails(data) {
  59. this.$emit('popup-event',data);
  60. }
  61. }
  62. }
  63. </script>
  64. <style lang="scss" scoped>
  65. .unitIntroduction {
  66. .unitImbBox {
  67. padding: 20upx 30upx 0;
  68. background-color: #FFFFFF;
  69. }
  70. .unitImg {
  71. width: 100%;
  72. height: 340upx;
  73. background: url(../../../static/img/cooperationNetwork/unit.png) no-repeat;
  74. background-size: 100% 100%;
  75. color: #FFFFFF;
  76. text-align: center;
  77. padding-top: 100upx;
  78. .hz-title {
  79. font-size: 34upx;
  80. margin-bottom: 20upx;
  81. }
  82. .zj-title {
  83. font-size: 30upx;
  84. }
  85. }
  86. .unit-explain {
  87. padding: 20upx 30upx;
  88. background-color: #FFFFFF;
  89. font-size: 26upx;
  90. line-height: 46upx;
  91. color: #333333;
  92. text-indent: 2em;
  93. }
  94. .unit-cooperation {
  95. padding: 20upx 30upx;
  96. margin-top: 20upx;
  97. background-color: #FFFFFF;
  98. .unit-title {
  99. font-size: 30upx;
  100. color: #333333;
  101. margin-bottom: 20upx;
  102. font-weight: bold;
  103. position: relative;
  104. padding-left: 20upx;
  105. }
  106. .unit-title:before {
  107. width: 10upx;
  108. height: 32upx;
  109. content: '';
  110. position: absolute;
  111. left: 0;
  112. top: 6upx;
  113. background-color: #6DD400;
  114. }
  115. .unit-wrap {
  116. margin: -16upx -8upx 0;
  117. .unit-item {
  118. padding: 15upx 15upx 15upx 60upx;
  119. box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  120. font-size: 28upx;
  121. color: #333333;
  122. margin-top: 15upx;
  123. background-color: #FFFFFF;
  124. border-radius: 10upx;
  125. position: relative;
  126. .xin {
  127. width: 36upx;
  128. height: 30upx;
  129. position: absolute;
  130. left: 15upx;
  131. top: 50%;
  132. transform: translateY(-50%);
  133. }
  134. }
  135. }
  136. }
  137. }
  138. </style>