FinancialServicesBox.vue 5.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195
  1. <template>
  2. <div style="width: 100%;background:#fff;margin-top: 10px">
  3. <div class="autoBox" style="padding-top: 20px">
  4. <div class="crumbs">
  5. <el-breadcrumb separator="/">
  6. <el-breadcrumb-item :to="{ path: 'home' }" replace>{{$t('common.Home')}}</el-breadcrumb-item>
  7. <el-breadcrumb-item :to="{ path: 'financialServices' }" replace>{{$t('common.FinancialServices')}}</el-breadcrumb-item>
  8. <el-breadcrumb-item v-if="navBar!==''">{{$t(navBar)}}</el-breadcrumb-item>
  9. </el-breadcrumb>
  10. </div>
  11. </div>
  12. <!-- 左侧菜单导航 -->
  13. <div class="autoBox box1">
  14. <div style="height: 800px;" class="userItemClass">
  15. <div style="width: 100%;height: 50px;text-align: center;line-height: 50px;color: #fff;background: #2C558A;border-radius: 6px;" class="cursor" @click="toView('FinancialServiceInvestmentGuide')">{{$t('common.FinancialServices')}}</div>
  16. <el-row class="tac" style="text-align: center">
  17. <el-col :span="24">
  18. <el-menu
  19. class="el-menu-vertical-demo"
  20. @select="handleOpen"
  21. @close="handleClose"
  22. :default-active="navRouter"
  23. router
  24. >
  25. <el-menu-item style="overflow: hidden;text-overflow: ellipsis;white-space: nowrap;border: 1px solid rgba(216, 216, 216,.5);" :index="nav.router" v-for="(nav,num) in navs">{{$t(nav.label)}}</el-menu-item>
  26. </el-menu>
  27. </el-col>
  28. </el-row>
  29. </div>
  30. <!--金融内容内容显示 -->
  31. <div style="width: 81%;float: right;">
  32. <router-view/>
  33. </div>
  34. </div>
  35. <div style="clear: both;"></div>
  36. </div>
  37. </template>
  38. <script>
  39. import InvestmentGuide from './FinancialServiceInvestmentGuide.vue'
  40. export default {
  41. name: 'FinancialServicesBox',
  42. components:{InvestmentGuide},
  43. data () {
  44. return {
  45. navRouter:this.$route.name,
  46. i:0,
  47. user:true,
  48. locale:'',
  49. videoBox:1500,
  50. navBar:'',
  51. navs:[
  52. {
  53. label:'common.FinancialInstitutions',
  54. router:'FinancialServicesAgency',
  55. value:'FinancialServicesAgency',
  56. },{
  57. label:'common.InvestmentGuide',
  58. router:'FinancialServiceInvestmentGuide',
  59. value:'FinancialServiceInvestmentGuide',
  60. },{
  61. label:'common.ProjectAppraisal',
  62. router:'FinancialServiceProjectEvaluation',
  63. value:'FinancialServiceProjectEvaluation',
  64. },{
  65. label:'common.FundIdeas',
  66. router:'FinancialServicesFundIdeas',
  67. value:'FinancialServicesFundIdeas',
  68. }
  69. ],
  70. }
  71. },
  72. watch:{
  73. },
  74. mounted(){
  75. this.locale= this.$i18n.locale
  76. console.log(this.$i18n.locale,'this.$i18n.localethis.$i18n.localethis.$i18n.locale');
  77. this.navBar = this.$route.query.key.title
  78. },
  79. methods:{
  80. toView(router,json){
  81. console.log(router.json,'------------------------点击导航-')
  82. this.lable = this.navs.label;
  83. console.log(navRouter,'-------------默认导航')
  84. this.$router.push({name:router,query:{key:json}})
  85. },
  86. handleOpen(key, keyPath) {
  87. console.log(key, keyPath);
  88. this.navs.forEach((i,index)=>{
  89. if(i.router==key){
  90. return this.navBar=i.label;
  91. }
  92. })
  93. },
  94. handleClose(key, keyPath) {
  95. console.log(key, keyPath);
  96. this.$store.commit('modify', key)
  97. },
  98. }
  99. }
  100. </script>
  101. <!-- Add "scoped" attribute to limit CSS to this component only -->
  102. <style scoped>
  103. .box {
  104. margin-top: 10px;
  105. background: #fff;
  106. /* height: 500px; */
  107. padding: 20px 0;
  108. min-height: 0px;
  109. }
  110. .crumbs {
  111. margin-left: 20px;
  112. }
  113. .box1 {
  114. padding: 0;
  115. /* transform: translateX(-20px); */
  116. margin-top: 15px;
  117. height: 700px;
  118. }
  119. body {
  120. margin: 0;
  121. }
  122. .el-carousel__item div:nth-child(1) {
  123. font-size: 18px;
  124. margin: 0;
  125. float: left;
  126. width: 70%;
  127. }
  128. .el-carousel__item div:nth-child(2) {
  129. font-size: 18px;
  130. margin: 0;
  131. float: right;
  132. width: 30%;
  133. }
  134. .el-carousel__item:nth-child(n) {
  135. background-color: #ecedef;
  136. color: #000;
  137. }
  138. .cool >>>.el-carousel__container {
  139. height: 350px;
  140. }
  141. .initData {
  142. height: 1200px;
  143. }
  144. .initData li {
  145. width: 49%;
  146. height: 600px;
  147. float: left;
  148. }
  149. .initData li:nth-child(2n-1){
  150. margin-right: 15px;
  151. }
  152. .recommend {
  153. margin-top:15px;
  154. margin-left: 10px;
  155. }
  156. .recommend li{
  157. display: inline-block;
  158. width: 212px;
  159. /* height: 130px; */
  160. text-align: center;
  161. margin-right: 15px;
  162. }
  163. .el-col-12 {
  164. width: 100%;
  165. }
  166. .el-submenu .el-menu-item {
  167. min-width: 0;
  168. border:none;
  169. }
  170. .userItemClass {
  171. width:200px;
  172. background: #fff;
  173. float: left;
  174. }
  175. .el-menu{
  176. border: none;
  177. }
  178. </style>