footersNewEN.vue 13 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375
  1. <template>
  2. <div class="footers2">
  3. <div class="autoBox">
  4. <span class="LeftBracket"></span>
  5. <span class="RightBracket"></span>
  6. <div class="centerBracket">
  7. <div class="centerBracket_div1">
  8. <span
  9. style="color: #e0edee;margin-left: -40px;margin-right: 20px;font-size: 14px;">Hosts</span>
  10. <img src="@/assets/img/home/footer/footerLogo.png" alt="" style="height:88%;vertical-align: middle;"
  11. @click="toViewChange">
  12. <!-- href="https://www.geidco.org.cn/" -->
  13. </div>
  14. <div style="margin:0px 0 10px 0;background:#8395b3;border:1px solid #5a729b"></div>
  15. <div class="centerBracket_div4">
  16. <span @click="getAboutMenu('关于我们')" class="cursor">About us</span>
  17. <span>|</span>
  18. <span @click="getAboutMenu('用户协议')" class="cursor">User Agreement</span>
  19. <span>|</span>
  20. <span @click="getAboutMenu('隐私政策')" class="cursor">Privacy Policy</span>
  21. <span>|</span>
  22. <span @click="toViewLega('helpCenter')" class="cursor">Help Center</span>
  23. <span>|</span>
  24. <span @click="cofLogin" class="cursor">Feedback</span>
  25. </div>
  26. <div class="centerBracket_div3"
  27. style="width:100%;min-width: 700px;position: relative;left:50%;transform: translateX(-50%);">
  28. <span>{{ year }} GEIDCO
  29. <span @click="toView" class="cursor">All </span>
  30. <span class="cursor" @click="toNewHome"> rights </span>
  31. <span>reserved. <a style="color:#fff;" class="beianSrc"
  32. href="https://beian.miit.gov.cn/#/Integrated/index"
  33. target="_blank">京ICP备19029734号-3</a>. </span>
  34. <span> &ensp;&ensp; </span>
  35. <span style="text-align: center;color: #fff;font-size: 14px;">
  36. &emsp; E-mail: <span> </span> geidcp-info@geidco.org
  37. </span>
  38. </span>
  39. </div>
  40. </div>
  41. </div>
  42. <div id="dialog">
  43. <el-dialog :visible.sync="dialogVisible" width="30%" ref="dialog" center>
  44. <div style="min-height: 120px;">
  45. <span style="font-size: 23px;text-align: center;display: block;width: 100%;">
  46. The link you visited is about to leave the Enlink Global website. Do you want to continue?
  47. </span>
  48. </div>
  49. <span slot="footer" class="dialog-footer"
  50. style="height: 50px;display: block;width: 100%;color: #ab0d07;font-size: 20px;">
  51. <span style="margin-right:30px;padding: 10px 18px;
  52. background:linear-gradient(#eee, #f1f1f1,#e6e6e6);
  53. border-radius: 10px;cursor: pointer;" @click="toViewChange('1')">
  54. Continue to visit
  55. </span>
  56. <span @click="dialogVisible = false" style="cursor: pointer;">Give up</span>
  57. </span>
  58. </el-dialog>
  59. </div>
  60. <!-- 用户协议 -->
  61. <div>
  62. <el-dialog width="60%"
  63. :title="$i18n.locale == 'en' ? '《User Agreement of Global Energy Interconnection Development and Cooperation Platform》' : '《全球能源互联网发展合作平台用户协议》'"
  64. :visible.sync="innerVisible1" append-to-body>
  65. <!-- <PlatformRegistered ></PlatformRegistered> -->
  66. <iframe v-if="$i18n.locale == 'CN'" width="100%" id="embed" name="main" ref="embed1" height="600px"
  67. :src="srcPdf3" frameborder="0"></iframe>
  68. <iframe v-if="$i18n.locale == 'en'" width="100%" id="embed" name="main" ref="embed1" height="600px"
  69. :src="srcPdf4" frameborder="0"></iframe>
  70. </el-dialog>
  71. <el-dialog width="60%"
  72. :title="$i18n.locale == 'en' ? '《Privacy Policy of Global Energy Interconnection Development and Cooperation Platform》' : '《全球能源互联网发展合作平台隐私政策》'"
  73. :visible.sync="innerVisible2" append-to-body>
  74. <!-- <LegalNotices></LegalNotices> -->
  75. <iframe v-if="$i18n.locale == 'CN'" width="100%" id="embed" name="main" ref="embed2" height="600px"
  76. :src="srcPdf" frameborder="0"></iframe>
  77. <iframe v-if="$i18n.locale == 'en'" width="100%" id="embed" name="main" ref="embed2" height="600px"
  78. :src="srcPdf2" frameborder="0"></iframe>
  79. <!-- <div>asdasdasdasd</div> -->
  80. </el-dialog>
  81. </div>
  82. <!-- 登录提示 -->
  83. <el-dialog :title="$i18n.locale == 'CN' ? '提示' : 'Reminder'" :visible.sync="toViewLogin"
  84. :width="$i18n.locale == 'CN' ? '500px' : '750px'" :height="$i18n.locale == 'CN' ? '300px' : '386px'"
  85. :before-close="toViewLoginChange">
  86. <div style="width: 100%;height: 100%;">
  87. <img src="@/assets/img/loginTips.png" alt="" style="width: 180px;height: 180px;margin-left: 20px;">
  88. <div style="float: right;margin-right: 20px;"
  89. :style="$i18n.locale == 'CN' ? 'width: 49%;margin-top: 10px;' : 'width: 453px;margin-top: -25px;'">
  90. <div style="font-size: 20px;font-weight: normal;color: #333333;
  91. font-family: HiraginoSansGB-W3, HiraginoSansGB;
  92. line-height: 40px;">
  93. This function can be used only after you log in
  94. </div>
  95. <div style="font-size: 16px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
  96. font-weight: normal;color: #666666;line-height: 30px;">
  97. System will be in <span style="color: #0091FF;font-size: 18px;">{{ num }}</span>
  98. {{ $t('common.ReminderThird') }}
  99. </div>
  100. <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
  101. font-weight: normal;color: #666666;line-height: 30px;">
  102. If the page does not automatically jump, please click the following link
  103. </div>
  104. <div style="font-size: 14px;font-family: HiraginoSansGB-W3, HiraginoSansGB;
  105. height:33px;line-height:60px;font-weight: normal;color: #0091FF;">
  106. <span style="margin-left: 40px;" class="cursor" @click="toViewLega('login')">
  107. I want to login
  108. </span>
  109. <span style="margin-left: 10px;" class="cursor" @click="toViewLega('Register')">
  110. I want to register
  111. </span>
  112. </div>
  113. </div>
  114. </div>
  115. </el-dialog>
  116. </div>
  117. </template>
  118. <script>
  119. import { getHelpColumnTree } from '@/api/operation/help/helpCenterEntity';
  120. import Base from "@/views/base/Base";
  121. import { getToken } from '@/utils/auth';
  122. export default {
  123. name: 'Footers',
  124. extends: Base,
  125. data() {
  126. return {
  127. dialogVisible: false,
  128. RegistdialogVisible: false,
  129. innerVisible1: false,
  130. innerVisible2: false,
  131. year: null,
  132. menu: [],
  133. aboutMenu: [],
  134. srcPdf: null,
  135. srcPdf2: null,
  136. srcPdf3: null,
  137. srcPdf4: null,
  138. toViewLogin: false,
  139. img: [{
  140. url: 'Instagram'
  141. }, {
  142. url: 'YouTube'
  143. }, {
  144. url: 'faceBook'
  145. }, {
  146. url: 'in'
  147. }, {
  148. url: 'Twitter'
  149. }, {
  150. url: 'WeChat'
  151. }, {
  152. url: 'microBlog'
  153. }],
  154. num: 0,
  155. timer: null,
  156. }
  157. },
  158. mounted() {
  159. this.srcPdf = '/api/file/pub/def/PrivacyPolicy_CN.pdf';
  160. this.srcPdf2 = '/api/file/pub/def/PrivacyPolicy_EN.pdf';
  161. this.srcPdf3 = '/api/file/pub/def/UserAgreement_CN.pdf';
  162. this.srcPdf4 = '/api/file/pub/def/UserAgreement_EN.pdf';
  163. let date = new Date;
  164. this.year = date.getFullYear();
  165. this.getAboutId()
  166. },
  167. watch: {
  168. "toViewLogin"() {
  169. if (this.toViewLogin == true) {
  170. this.loginTipsChange()
  171. }
  172. }
  173. },
  174. methods: {
  175. //登录跳转
  176. loginTipsChange() {
  177. const that = this;
  178. this.num = 5;
  179. this.timer = setInterval(function () {
  180. if (that.num > 0) {
  181. that.num--;
  182. } else {
  183. if (that.toViewLogin == true) {
  184. clearInterval(that.timer);
  185. that.toViewLega('login')
  186. } else {
  187. clearInterval(that.timer);
  188. }
  189. }
  190. }, 1000)
  191. },
  192. // 判断未登录跳转是否关闭
  193. toViewLoginChange(done) {
  194. this.toViewLogin = false;
  195. this.num = 5;
  196. clearInterval(this.timer);
  197. },
  198. cofLogin() {
  199. let token = getToken();
  200. console.log(!token)
  201. if (!token) {
  202. this.toViewLogin = true;
  203. } else {
  204. this.toViewLega('Feedback')
  205. }
  206. },
  207. //尾页关于我们数据连接处理
  208. getAboutMenu(type) {
  209. this.aboutMenu.forEach(item => {
  210. if (item.name == type) {
  211. this.toViewAbout('helpCenter', item.id);
  212. }
  213. })
  214. },
  215. getIconUrl(url) {
  216. return require("@/assets/img/home/footer/" + url + ".png");
  217. },
  218. toView(router, json, item) {
  219. this.$router.push({ name: 'HomeHistory' });
  220. },
  221. toNewHome() {
  222. this.$router.push({ name: 'homeNew' });
  223. },
  224. toViewLega(router, json, item) {
  225. this.$store.commit('modify', router);
  226. window.localStorage.setItem('router', router);
  227. this.$router.push({ name: router });
  228. },
  229. //跳转关于我们
  230. toViewAbout(router, id) {
  231. this.$store.commit('modify', router);
  232. window.localStorage.setItem('router', router);
  233. const { href } = this.$router.resolve({
  234. name: router,
  235. query: {
  236. key: id
  237. }
  238. });
  239. window.open(href, '_blank');
  240. },
  241. toViewChange(json) {
  242. this.dialogVisible = true;
  243. console.log(this.$refs.dialog.style)
  244. this.$refs.dialog.style.backgroundColor = 'rgba(0,0,0,.8)';
  245. if (json == 1) {
  246. this.dialogVisible = false;
  247. window.open('https://www.geidco.org.cn/');
  248. }
  249. // window.open('https://www.geidco.org')
  250. },
  251. handleClose(done) {
  252. this.RegistdialogVisible = false;
  253. },
  254. //获取关于我们id信息
  255. getAboutId() {
  256. var language = "CN"
  257. getHelpColumnTree(language).then((result) => {
  258. this.aboutMenu = [];
  259. let menuHelp = result.data;
  260. for (let i = 0; i <= menuHelp.length - 1; i++) {
  261. if (menuHelp[i].name == "关于我们" || menuHelp[i].name == "About Us") {
  262. this.aboutMenu = menuHelp[i].children;
  263. console.log(this.aboutMenu)
  264. }
  265. }
  266. })
  267. },
  268. }
  269. }
  270. </script>
  271. <style scoped>
  272. a:hover,
  273. a:active {
  274. color: red !important;
  275. }
  276. a {
  277. text-decoration: none;
  278. }
  279. .footers1 {
  280. height: 170px;
  281. }
  282. .footers2 {
  283. width: 100%;
  284. height: 170px;
  285. background: #0E4891;
  286. }
  287. .LeftBracket {
  288. float: left;
  289. width: 340px;
  290. height: 170px;
  291. background: url('../assets/img/home/LeftBracket.png') no-repeat;
  292. margin-left: 206px;
  293. margin-right: 240px;
  294. }
  295. .RightBracket {
  296. float: left;
  297. width: 340px;
  298. height: 170px;
  299. background: url('../assets/img/home/RightBracket.png') no-repeat;
  300. }
  301. .centerBracket {
  302. position: absolute;
  303. left: 320px;
  304. top: 0;
  305. width: 559px;
  306. height: 170px;
  307. }
  308. .centerBracket_div1 {
  309. margin-top: 10px;
  310. height: 64px;
  311. text-align: center;
  312. cursor: pointer;
  313. }
  314. .centerBracket_div2 {
  315. display: flex;
  316. justify-content: space-between;
  317. flex-wrap: wrap;
  318. padding: 10px 100px;
  319. font-size: 14px;
  320. color: #e0edee;
  321. }
  322. .centerBracket_div4 {
  323. display: flex;
  324. justify-content: space-between;
  325. flex-wrap: wrap;
  326. padding: 10px 70px;
  327. font-size: 14px;
  328. color: #e0edee;
  329. }
  330. .centerBracket_div3 {
  331. text-align: center;
  332. /*display: flex;*/
  333. /*justify-content:space-between;*/
  334. /*flex-wrap:wrap;*/
  335. /*padding: 0px 90px;*/
  336. font-size: 14px;
  337. color: #e0edee;
  338. }
  339. .el-dialog__wrapper,
  340. .background {
  341. background-color: rgba(0, 0, 0, .5) !important;
  342. }
  343. </style>