taber.vue 7.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317
  1. <template>
  2. <!-- v-if="ifTable" -->
  3. <div>
  4. <div class="header1">
  5. <div class="header2">
  6. <span
  7. v-for="(i, value) in tabers"
  8. :class="index == value ? 'tabersItem2' : 'tabersItem1'"
  9. @click="tabersChange(i, value)"
  10. >{{ $t(i.label) }}</span
  11. >
  12. </div>
  13. </div>
  14. </div>
  15. </template>
  16. <script>
  17. import Bus from "@/api/bus"; //注意引入
  18. export default {
  19. name: "Taber",
  20. data() {
  21. return {
  22. index: "",
  23. ifTable: false,
  24. tabers: [
  25. {
  26. label: "common.ProjectResources",
  27. value: "projectPresentation",
  28. item: [
  29. {
  30. value: "projectPresentationDetails",
  31. },
  32. ],
  33. },
  34. {
  35. label: "common.NewsData",
  36. value: "realTimeInfo1",
  37. item: [
  38. {
  39. value: "realTimeInfoItemdetails",
  40. },
  41. {
  42. value: "realTimeInfoLatetDevelopment",
  43. },
  44. ],
  45. },
  46. {
  47. label: "common.GlobalData",
  48. value: "realTimeInfo",
  49. // item: [
  50. // {
  51. // value: "realTimeInfoLatetDevelopment",
  52. // },
  53. // ],
  54. },
  55. {
  56. label: "common.CountryInformation",
  57. value: "countryInformation",
  58. item: [
  59. {
  60. value: "countryNationalSpace",
  61. },
  62. ],
  63. },
  64. {
  65. label: "common.EnterpriseShow",
  66. value: "enterprise",
  67. item: [
  68. {
  69. value: "enterpriseDetails",
  70. },
  71. ],
  72. },
  73. {
  74. label: "common.FinancialServices",
  75. value: "financialServices",
  76. item: [
  77. {
  78. value: "FinancialServicesAgency",
  79. },
  80. {
  81. value: "FinancialServiceInvestmentGuide",
  82. },
  83. {
  84. value: "FinancialServiceProjectEvaluation",
  85. },
  86. {
  87. value: "FinancialServicesFundIdeas",
  88. },
  89. {
  90. value: "FinancialServicesAgency",
  91. },
  92. {
  93. value: "FinancialServicesGuideDetails",
  94. },
  95. ],
  96. },
  97. {
  98. label: "common.ThinkTankConsulting",
  99. value: "thinkTankConsulting",
  100. item: [
  101. {
  102. value: "thinkTankConsulting1",
  103. },
  104. {
  105. value: "thinkTankConsulting2",
  106. },
  107. {
  108. value: "ThinkTankArticleDetail",
  109. },
  110. ],
  111. },
  112. {
  113. label: "common.CooperationNetwork",
  114. value: "IntroductionMemberProfile",
  115. item: [
  116. {
  117. value: "IntroductionMemberProfile",
  118. },
  119. {
  120. value: "IntroductionMemberInformation",
  121. },
  122. {
  123. value: "IntroductionMembershipApplication",
  124. },
  125. {
  126. value: "IntroductionAllianceOverview",
  127. },
  128. {
  129. value: "IntroductionAllianceMemberInformation",
  130. },
  131. {
  132. value: "IntroductionApplicationMembership",
  133. },
  134. {
  135. value: "IntroductionGeneralSituation",
  136. },
  137. {
  138. value: "IntroductionPartnerInformation",
  139. },
  140. {
  141. value: "IntroductionCustomService",
  142. },
  143. {
  144. value: "IntroductionFundingApplication",
  145. },
  146. {
  147. value: "IntroductionPresentationDetails",
  148. },
  149. ],
  150. },
  151. {
  152. label: "common.Cooperation&Communication",
  153. value: "cooperationExchange",
  154. item: [
  155. {
  156. value: "cooperationExchangeListDetails",
  157. },
  158. ],
  159. },
  160. {
  161. label: "common.NationalregionalCommissions",
  162. value: "nationalregionalCommittees",
  163. item: [
  164. {
  165. value: "nationalregionalCommissions2",
  166. },
  167. ],
  168. },
  169. // {
  170. // label: "common.ResourceSharing",
  171. // value: "resourceSharing",
  172. // item: [
  173. // {
  174. // value: "resourceSharing1",
  175. // },
  176. // {
  177. // value: "resourceSharingDetails",
  178. // },
  179. // ],
  180. // },
  181. {
  182. label: "common.ConferenceService",
  183. value: "conferenceServices",
  184. },
  185. {
  186. label: "common.ExhibitionService",
  187. value: "exhibitionService2",
  188. item: [
  189. {
  190. value: "ExhibitionService2",
  191. },
  192. ],
  193. },
  194. ],
  195. router: "",
  196. taberDemo: [],
  197. };
  198. },
  199. watch: {
  200. "$store.state.router"() {
  201. this.getSave();
  202. },
  203. "$route.path"() {
  204. let path = this.$route.path.substr(1);
  205. this.$store.commit("modify", path);
  206. window.localStorage.setItem("router", path);
  207. this.getSave();
  208. },
  209. },
  210. created() {
  211. this.$nextTick(() => {
  212. this.getSave();
  213. });
  214. },
  215. methods: {
  216. getSave() {
  217. const that = this;
  218. let path = this.$route.path.substr(1);
  219. this.ifTable = false;
  220. this.tabers.forEach((i, index) => {
  221. if (
  222. (that.$store.state.router && path == i.value) ||
  223. that.$store.state.router == i.value
  224. ) {
  225. console.log(path, i.value, that.$store.state.router);
  226. that.index = index;
  227. that.BusChange(i);
  228. return (that.ifTable = true);
  229. } else if (path && i.item) {
  230. i.item.forEach((a, j) => {
  231. if (path == a.value) {
  232. that.index = index;
  233. that.ifTable = true;
  234. that.BusChange(i);
  235. return;
  236. }
  237. });
  238. }
  239. console.log(this.ifTable);
  240. });
  241. // let arr_filter = this.tabers.filter((x,index)=>{
  242. // return x.value==this.$store.state.router;
  243. // })
  244. // let flag
  245. // console.log(arr_filter)
  246. // if(arr_filter.length>0){
  247. // // this.ifTable=true
  248. // flag = this.tabers.findIndex(item=>{
  249. // return item.label == arr_filter[0].label;
  250. // })
  251. // }else {
  252. // // this.ifTable=false
  253. // }
  254. let indexDemo = this.index;
  255. if (this.index < 6) {
  256. this.tabers.splice(6, 6);
  257. } else {
  258. this.tabers.splice(0, 6);
  259. this.index = indexDemo - 6;
  260. }
  261. },
  262. tabersChange(i, index) {
  263. // console.log("i++++",i,"index+++++",index)
  264. this.index = index;
  265. this.BusChange(i);
  266. if (i.value !== "1") {
  267. this.$router.replace(i.value);
  268. this.$store.commit("modify", i.value);
  269. window.localStorage.setItem("router", i.value);
  270. }
  271. },
  272. BusChange(i) {
  273. Bus.$emit("title", i); //存 Bus.$emit
  274. Bus.$emit("serch", i); //存 Bus.$emit
  275. },
  276. },
  277. };
  278. </script>
  279. <style>
  280. body {
  281. margin: 0;
  282. padding: 0;
  283. }
  284. .header1 {
  285. /* width:1500px; */
  286. height: 60px;
  287. margin: auto;
  288. /* background: #2c558a; */
  289. }
  290. .header2 {
  291. width: 1200px;
  292. height: 60px;
  293. margin: auto;
  294. position: relative;
  295. /* background: skyblue; */
  296. }
  297. .tabersItem1 {
  298. display: inline-block;
  299. text-align: center;
  300. margin: 0 10px;
  301. line-height: 40px;
  302. /* margin-right: 50px; */
  303. cursor: pointer;
  304. color: #fff;
  305. }
  306. .tabersItem2 {
  307. display: inline-block;
  308. text-align: center;
  309. margin: 0 10px;
  310. line-height: 40px;
  311. /* margin-right: 50px; */
  312. color: #fff;
  313. cursor: pointer;
  314. border-bottom: 2px solid #32dd45;
  315. }
  316. </style>