FinancialServices.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501
  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>{{$t('common.FinancialServices')}}</el-breadcrumb-item>
  7. </el-breadcrumb>
  8. </div>
  9. <div class="projectBox">
  10. <!-- 项目列表 -->
  11. <ul style="width:75%;float:left">
  12. <li style="width:100%">
  13. <div class="initListBox" v-for="(item,index) in init" :key="item.id" @click="toView(item.id,item)">
  14. <div style="height: 200px;position: relative">
  15. <img :src="getIconImg('financial'+(index+1)+'.png')" alt style="width: 100%;height: 100%;position:absolute;top: 0;left: 0"/>
  16. <div style="position: absolute;left: 0;width: 278px;height: 200px;">
  17. <img :src="getIconImg((index+1)+'.png')" alt style="width: 100%;height: 100%; border: 1px solid #E4E4E4;"/>
  18. <div class="inilistTitle">
  19. <span>{{$t(item.title)}}</span>
  20. </div>
  21. </div>
  22. <div class="initDetail">
  23. {{$t(item.label)}}
  24. </div>
  25. <div class="initTip">
  26. <img :src="getIconImg('tip'+(index+1)+'.png')" alt="" style="width:100%;">
  27. </div>
  28. <div style="clear: both"></div>
  29. </div>
  30. </div>
  31. </li>
  32. </ul>
  33. <div class="relevan">
  34. <!-- 投融资相关资讯 -->
  35. <div class="relevanInformation">
  36. <div class="informationTitle">{{$t('common.relatedNews')}}</div>
  37. <div class="informationList">
  38. <ul>
  39. <li v-for="(infoItem,index) in informationList" @click="toShowDetails('realTimeInfoItemdetails',infoItem.baseEntityId)">
  40. <div class="list" >
  41. <div style="height: 100%;width:20px;float: left ">
  42. <div class="sort" :style="index==0?'background:#FF2233;color:#fff':index==1?'background:#FF5900;color:#fff':index==2?'background:#FFA602;color:#fff':'background:#F4F4F5;color:#A5A9B3'">{{index+1}}</div>
  43. </div>
  44. <div style="margin-left: 15px;float: left;width:86%" :style="$i18n.locale=='zh'?'overflow: hidden;text-overflow: ellipsis;white-space: nowrap;':''"> {{infoItem.title}}</div>
  45. </div>
  46. <!-- <div class="hostText" v-if="infoItem.click === maxNum">{{$t('common.Hot')}}</div>-->
  47. </li>
  48. </ul>
  49. </div>
  50. </div>
  51. <!-- 投融资相关会议-->
  52. <div class="relevanMeeting">
  53. <div class="informationTitle">{{$t('common.InvestmentFinancing')}}</div>
  54. <div class="informationList">
  55. <ul>
  56. <li v-for="(infoItem,index) in meetingList" style="height: 200px">
  57. <img :src="'./api/file/pub/'+infoItem.meetingPicUrl" alt="" class="meetingImg" @click="toShowDetails('ConferenceResult',infoItem.id)">
  58. </li>
  59. </ul>
  60. </div>
  61. </div>
  62. </div>
  63. </div>
  64. <div style="clear: both;"></div>
  65. </div>
  66. </template>
  67. <script>
  68. import Base from "@/views/base/Base";
  69. import HeaderItem from "@/components/headerItem";
  70. import tabers from "@/components/taber";
  71. import footers from "@/components/footers";
  72. import Screen from "@/components/screen";
  73. import moment from "moment";
  74. import {financeInfoList} from "../../api/financialService/cmsInformationViews";
  75. import {getConfrences} from "../../api/meeting/meetingOutInfo";
  76. export default {
  77. name: "financialServices",
  78. components: { tabers, HeaderItem, footers, Screen, moment },
  79. extends: Base,
  80. data() {
  81. return {
  82. index: 0,
  83. indexCurrent:0,
  84. imgIndex:1,
  85. loading: true,
  86. maxNum:0,
  87. projectFaIcon:2,
  88. screen1: {
  89. value: "common.Region",
  90. item: [],
  91. },
  92. screen3:{
  93. value:'common.Byletter',
  94. item:[
  95. {
  96. value:null,
  97. ifValue:true,
  98. label:'common.All'
  99. },{
  100. ifValue:false,
  101. value:'A',
  102. label:'A'
  103. },{
  104. ifValue:false,
  105. value:'B',
  106. label:'B'
  107. },{
  108. ifValue:false,
  109. value:'C',
  110. label:'C'
  111. },{
  112. ifValue:false,
  113. value:'D',
  114. label:'D'
  115. },{
  116. ifValue:false,
  117. value:'E',
  118. label:'E'
  119. },{
  120. ifValue:false,
  121. value:'F',
  122. label:'F'
  123. },{
  124. ifValue:false,
  125. value:'G',
  126. label:'G'
  127. },{
  128. ifValue:false,
  129. value:'H',
  130. label:'H'
  131. },{
  132. ifValue:false,
  133. value:'I',
  134. label:'I'
  135. },{
  136. ifValue:false,
  137. value:'J',
  138. label:'J'
  139. },{
  140. ifValue:false,
  141. value:'K',
  142. label:'K'
  143. },{
  144. ifValue:false,
  145. value:'L',
  146. label:'L'
  147. },{
  148. ifValue:false,
  149. value:'M',
  150. label:'M'
  151. },{
  152. ifValue:false,
  153. value:'N',
  154. label:'N'
  155. },{
  156. ifValue:false,
  157. value:'O',
  158. label:'O'
  159. },{
  160. ifValue:false,
  161. value:'P',
  162. label:'P'
  163. },{
  164. ifValue:false,
  165. value:'Q',
  166. label:'Q'
  167. },{
  168. ifValue:false,
  169. value:'R',
  170. label:'R'
  171. },{
  172. ifValue:false,
  173. value:'S',
  174. label:'S'
  175. },{
  176. ifValue:false,
  177. value:'T',
  178. label:'T'
  179. },{
  180. ifValue:false,
  181. value:'U',
  182. label:'U'
  183. },{
  184. ifValue:false,
  185. value:'V',
  186. label:'V'
  187. },{
  188. ifValue:false,
  189. value:'W',
  190. label:'W'
  191. },{
  192. ifValue:false,
  193. value:'X',
  194. label:'X'
  195. },{
  196. ifValue:false,
  197. value:'Y',
  198. label:'Y'
  199. },{
  200. ifValue:false,
  201. value:'Z',
  202. label:'Z'
  203. }],
  204. },
  205. informationList:[],
  206. meetingList:[],
  207. init: [
  208. {
  209. id:1,
  210. title:'common.FinancialInstitutions',
  211. label:'common.FinancialInstitutionsContent',
  212. },
  213. {
  214. id:2,
  215. title:'common.InvestmentGuide',
  216. value:'FinancialServiceInvestmentGuide',
  217. label:'common.InvestmentGuideContent',
  218. },
  219. {
  220. id:3,
  221. title:'common.ProjectAppraisal',
  222. value:'FinancialServiceProjectEvaluation',
  223. label:'common.ProjectAppraisalContent',
  224. },
  225. {
  226. id:4,
  227. title:'common.FundIdeas',
  228. value:'FinancialServicesFundIdeas',
  229. label:'common.FundIdeasContent',
  230. },
  231. ],
  232. clickNum:{},
  233. dict: {},
  234. recommend: [],
  235. Initials:'',
  236. informationNumMap:{},
  237. };
  238. },
  239. mounted() {
  240. // this.getData();// 请求字典值
  241. // this.getBase();// 请求数据
  242. // this.hotMax();
  243. this.getinformation();
  244. this.getmeetingList();
  245. this.$store.commit('modify', 'FinancialServices');
  246. window.localStorage.setItem('router', 'FinancialServices');
  247. },
  248. watch: {
  249. '$i18n.locale'(){
  250. // this.changeLanguage();
  251. this.getinformation();
  252. },
  253. },
  254. methods: {
  255. // changeLanguage(){
  256. // // this.getBase();
  257. // if(this.$i18n.locale=='en'){
  258. // this.init = this.initEN;
  259. // }else{
  260. // this.init = this.initZH;
  261. // }
  262. // },
  263. closeMask () {
  264. let path=this.$route.path.substr(1);
  265. this.$store.state.router=path;
  266. window.onload()
  267. },
  268. getIconImg(url) {
  269. return require("@/assets/img/financialService/" + url);
  270. },
  271. toShowDetails(router,json){
  272. this.$router.push({
  273. name:router,
  274. query:{
  275. key:json,
  276. }
  277. })
  278. },
  279. toView(router, json) {
  280. this.indexCurrent = 1;
  281. if(router===1){
  282. this.$router.push({
  283. name: 'FinancialServicesAgency',
  284. id:router,
  285. query:{
  286. key:json.id,
  287. }
  288. })
  289. console.log(this.indexCurrent)
  290. }else {
  291. this.$router.push({
  292. name:json.value,
  293. id:router,
  294. value:this.init.value,
  295. query:{
  296. key:json,
  297. }
  298. })
  299. }
  300. console.log(router,json)
  301. },
  302. getinformation(){
  303. const that = this;
  304. let infoPrams = {
  305. pageSize:5,
  306. pageNo:1,
  307. language:this.$i18n.locale.toUpperCase(),
  308. };
  309. financeInfoList(infoPrams).then((res)=>{
  310. this.informationList = res.data;
  311. console.log(res,'------------------------投融资咨询')
  312. });
  313. },
  314. getmeetingList(){
  315. getConfrences().then((res)=>{
  316. let meetingLength = res.data.meetingBasicInfos.length;
  317. this.meetingList = [];
  318. for(let i=0;i<meetingLength;i++){
  319. if(i<2){
  320. this.meetingList.push(res.data.meetingBasicInfos[i])
  321. }
  322. }
  323. })
  324. },
  325. }
  326. };
  327. </script>
  328. <!-- Add "scoped" attribute to limit CSS to this component only -->
  329. <style scoped>
  330. .box {
  331. margin-top: 10px;
  332. background: #fff;
  333. /* height: 500px; */
  334. padding: 20px 0;
  335. }
  336. .crumbs {
  337. margin-left: 20px;
  338. }
  339. body {
  340. margin: 0;
  341. }
  342. li {
  343. display: inline-block;
  344. color: #1251a7;
  345. }
  346. .recommend {
  347. margin-top: 15px;
  348. margin-left: 100px;
  349. }
  350. .recommend li {
  351. display: inline-block;
  352. width: 170px;
  353. /* height: 130px; */
  354. text-align: center;
  355. margin-right: 15px;
  356. }
  357. .initListBox {
  358. height: 215px;
  359. margin-top: 20px;
  360. margin-left: 20px;
  361. font-size:14px;
  362. color: #333;
  363. min-height: 200px;
  364. position: relative;
  365. border-bottom: 1px solid #E4E4E4;
  366. }
  367. .initDetail{
  368. width: 438px;
  369. float: left;
  370. margin-left: 300px;
  371. margin-top: auto;
  372. font-size: 16px;
  373. line-height: 30px;
  374. display: inline-block;
  375. overflow: hidden;
  376. text-overflow: ellipsis;
  377. display: -webkit-box;
  378. -webkit-box-orient:vertical;
  379. -webkit-line-clamp:5;
  380. margin-top: 30px
  381. }
  382. .projectBox{
  383. width: 100%;
  384. }
  385. .relevan{
  386. width:25%;
  387. float:right;
  388. }
  389. .relevanInformation{
  390. padding: 0 20px;
  391. overflow: hidden;
  392. }
  393. .relevanMeeting{
  394. padding: 0 20px;
  395. overflow: hidden;
  396. }
  397. .informationList{
  398. width: 100%;
  399. font-size: 14px;
  400. }
  401. .informationTitle{
  402. padding-bottom: 10px;
  403. color:#2C558A ;
  404. border-bottom: 1px solid #2C558A;
  405. font-weight: 600;
  406. }
  407. .informationList ul{
  408. margin-top: 14px;
  409. }
  410. .informationList ul li{
  411. width: 100%;
  412. margin-bottom: 24px;
  413. color: #666666;
  414. cursor: pointer;
  415. }
  416. .informationList ul li .list{
  417. width: 100%;
  418. display: inline-block;
  419. }
  420. list2{
  421. }
  422. .meetingImg{
  423. width: 100%;
  424. height: 100%;
  425. cursor: pointer;
  426. }
  427. .initTip{
  428. width: 57px;
  429. height: 57px;
  430. float: right;
  431. position: relative;
  432. cursor: pointer;
  433. top: 35%;
  434. right: 20px;
  435. }
  436. .initTip span{
  437. font-size: 24px;
  438. color: #BEA684;
  439. }
  440. .sort{
  441. width: 20px;
  442. height: 20px;
  443. display: inline-block;
  444. text-align: center;
  445. line-height: 20px;
  446. border-radius: 4px;
  447. }
  448. .hostText{
  449. float:right;
  450. width: 16px;
  451. height: 16px;
  452. background: #E84C3D;
  453. color:#fff;
  454. line-height: 16px;
  455. text-align: center;
  456. }
  457. .inilistTitle{
  458. height:40px;
  459. width:100%;
  460. position: absolute;
  461. bottom:-1px;
  462. left: 1px;
  463. backdrop-filter:blur(4px) ;
  464. background-color:rgb(183 183 183 / 36%);
  465. z-index:999;
  466. color:#fff;
  467. font-size: 18px;
  468. line-height: 40px;
  469. text-align: center;
  470. }
  471. </style>