FinancialServicesFundIdeas.vue 6.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161
  1. <template>
  2. <div class="autoBox box">
  3. <div class="crumbs">
  4. <el-breadcrumb separator="/">
  5. <el-breadcrumb-item :to="{ path: 'home' }">{{$t('common.Home')}}</el-breadcrumb-item>
  6. <el-breadcrumb-item :to="{ path: 'financialServices' }">{{$t('common.FinancialServices')}}</el-breadcrumb-item>
  7. <el-breadcrumb-item>{{$t('common.FundIdeas')}}</el-breadcrumb-item>
  8. </el-breadcrumb>
  9. </div>
  10. <div style="background:#fff;margin-top: 14px;padding: 0 20px">
  11. <div style="width: 100%;height:50px;color: #fff;background: #2C558A;;text-align: center;font-size: 28px;font-weight: 700;line-height: 50px;border-radius: 6px;">{{$t('common.FundIdeas')}}</div>
  12. <!-- <div class="fundBox" v-for="(item,index) in change" @click="toView(item.id,item.baseEntityId,index)">-->
  13. <div class="fundBox" v-for="(item,index) in change" @click="toView('FinancialServicesIdeasDetails2',item.baseEntityId)">
  14. <div style="width:280px;height:209px;float: left;">
  15. <img v-show="item.photo" :src="'api/file/pub/' + item.photo" alt="" width="100%" height="100%">
  16. <img v-show="!item.photo" src="@/assets/img/financialService/FundLog.png" alt="" width="100%" height="100%">
  17. </div>
  18. <div class="fundList">
  19. <div style="display: inline-block;width:100%;">
  20. <span style="font-size: 30px;color: #666666;font-weight: 600;">{{item.title}}</span>
  21. <div style="font-size: 16px;color: #666666;font-weight: normal;margin-top: 12px">{{item.subtitle}}</div>
  22. <div style="margin-top: 30px;width: 100%;color: #4f81bd;" >
  23. <div class="markSty" :style="$i18n.locale=='zh'?'width:120px;height:100px':'width:150px;height:138px'" v-for="(markItem,markIndex) in mark[index]" v-if="markItem">
  24. <img v-show="markIndex==0 && index/2==0" :src="getImg(('Fund'+(num)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
  25. <img v-show="markIndex==1 && index/2==0" :src="getImg(('Fund'+(num+1)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
  26. <img v-show="markIndex==2 && index/2==0" :src="getImg(('Fund'+(num+2)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
  27. <img v-show="markIndex==0 && index/2!==0" :src="getImg(('Fund'+(num+3)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
  28. <img v-show="markIndex==1 && index/2!==0" :src="getImg(('Fund'+(num+4)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
  29. <img v-show="markIndex==2 && index/2!==0" :src="getImg(('Fund'+(num+5)+'.png'),index)" alt="" style="width: 42px;height: 42px;margin-top: 20px">
  30. <div style="margin-top: 10px;">{{markItem}}</div>
  31. </div>
  32. </div>
  33. </div>
  34. <!-- <i class="el-icon-arrow-right" style="font-size: 80px;float: right;line-height: 175px;color: #666666;width: 4%;margin-right: 20px"></i>-->
  35. </div>
  36. <div style="clear: both"></div>
  37. </div>
  38. </div>
  39. </div>
  40. </template>
  41. <script>
  42. import {getBaseFundIdeasInfos} from '@/api/financialService/baseFundIdeasInfo'
  43. export default{
  44. name:'FinancialServicesFundIdeas',
  45. data(){
  46. return{
  47. change:[],
  48. mark:[],
  49. showAddress:'',
  50. num:'1'-0,
  51. params:{
  52. pageSize:"5",
  53. pageNo:"1",
  54. language:'',
  55. statusDict:'2'
  56. }
  57. }
  58. },
  59. mounted() {
  60. this.getData()
  61. },
  62. watch: {
  63. '$i18n.locale'(){
  64. this.getData();
  65. },
  66. },
  67. methods:{
  68. toView(router,json){
  69. this.$router.push({
  70. name:router,
  71. query:{key:json}
  72. })
  73. },
  74. // toView(router,json,index){
  75. // if(index == 0){
  76. // this.showAddress = "FinancialServicesIdeasDetails1"
  77. // }else if(index == 1){
  78. // this.showAddress = "FinancialServicesIdeasDetails2"
  79. // }else{
  80. // this.showAddress = "FinancialServicesIdeasDetails"
  81. // }
  82. // this.$router.push({
  83. // name:this.showAddress,
  84. // query:{key:json}
  85. // })
  86. // console.log(router,json,index)
  87. //
  88. // },
  89. getData(){
  90. this.params.language = this.$i18n.locale.toUpperCase();
  91. getBaseFundIdeasInfos(this.params).then((res)=>{
  92. this.change = res.data.baseFundIdeasInfos;
  93. this.mark=[];
  94. for(let i=0;i<this.change.length;i++){
  95. this.mark.push(this.change[i].keyword.split(','));
  96. }
  97. })
  98. },
  99. getImg(url,index){
  100. return require("@/assets/img/financialService/" + url);
  101. }
  102. }
  103. }
  104. </script>
  105. <style scoped>
  106. .box {
  107. margin-top: 10px;
  108. background: #fff;
  109. /* height: 500px; */
  110. padding: 20px 0;
  111. }
  112. .crumbs {
  113. margin-left: 20px;
  114. }
  115. body {
  116. margin: 0;
  117. }
  118. p{
  119. margin: 0;
  120. padding: 0;
  121. }
  122. .fundBox{
  123. margin-top: 40px;
  124. border-bottom: 1px solid#e4e4e4;
  125. cursor: pointer;
  126. }
  127. .fundList{
  128. width: 60%;
  129. float: left;
  130. margin-left: 70px;
  131. }
  132. .markSty{
  133. border:1px solid #44D7B6;
  134. margin :0 20px 20px 0;
  135. display: inline-block;
  136. text-align: center;
  137. overflow: hidden;
  138. font-size: 16px;
  139. /*text-overflow: ellipsis;*/
  140. /*white-space: nowrap;*/
  141. /*display: -webkit-box;*/
  142. /*-moz-box-orient: vertical;*/
  143. /*-webkit-line-clamp:2;*/
  144. }
  145. .markSty1{
  146. }
  147. .markSty1{
  148. }
  149. </style>