Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
b47aad55 by xukangle
Options

fix : 删除home文件

1 parent ad147826
Inline Side-by-side
Showing 1 changed file with 0 additions and 732 deletions
src/views/home.vue deleted 100644 → 0
1 <route lang="yaml">
2 name: home
3 meta:
4 title: 数据资产管理
5 </route>
6 <script lang="ts" setup name="home">
7 import homeDamRegister from './homeDamRegister.vue';
8 import homeDamDataCircule from './homeDamDataCircule.vue';
9 import homeDamDemand from './homeDamDemand.vue';
10 import homeDamAlgorithm from './homeDamAlgorithm.vue';
11 import homeDamFinance from './homeDamFinance.vue';
12 import homeDamMarket from './homeDamMarket.vue';
13
14 const activeName = ref('register');
15
16 const enterCompany = () => {
17 window.open('https://www.csbr.cn/');
18 }
19
20 const logon = () => {
21 window.open('/login');
22 }
23
24 const register = () => {
25 window.open('/register');
26 }
27
28 const companyDesc = ref('国家级数据交易所经纪服务商，为客户提供数据资产登记服务、数据要素及数据产品交易服务、数据要素金融服务等一揽子经纪服务。\n北京传世博润科技有限公司以软硬件一体化的人工智能物流网为基础，结合大数据技术提供数字化综合解决方案，帮助客户在数字经济时代转型为数字化企业的飞跃。');
29
30 const tabsInfo = ref({
31 activeName: "index",
32 tabs: [
33 { label: "首页", name: 'index' },
34 { label: "资产登记服务", name: "dam", description: '' },
35 { label: "数据供给", name: "dataCircule" },
36 { label: "供需信息", name: "demand" },
37 { label: "算法竞赛", name: "algorithm" },
38 { label: "服务工具", name: "market" },
39 { label: "融资服务", name: "service" },
40 ]
41 });
42
43 const homeDamFinanceRef = ref();
44
45 const homeDamDataCirculeRef = ref();
46
47 const homeDamDemandRef = ref();
48
49 const homeDamAlgorithmRef = ref();
50
51 const homeDamMarketRef = ref();
52
53 const tabClick = (val) => {
54 if (val?.props.name == 'dataCircule') {
55 homeDamDataCirculeRef.value.initPage();
56 } else if (val?.props.name == 'demand') {
57 homeDamDemandRef.value.initPage();
58 } else if (val?.props.name == 'algorithm') {
59 homeDamAlgorithmRef.value.initPage();
60 } else if (val?.props.name == 'market') {
61 homeDamMarketRef.value.initPage();
62 } else if (val?.props.name == 'service') {
63 homeDamFinanceRef.value.initPage();
64 }
65 }
66
67 </script>
68
69 <template>
70 <div class="home-full-wrap">
71 <div class="home-container">
72 <div class="logo-header">
73 <img style="width: 120px;height: 36px;margin-left: 27px;" src="../assets/images/logo-white.png" alt="" />
74 <el-tabs v-model="tabsInfo.activeName" class="header-tabs" @tab-click="tabClick">
75 <el-tab-pane v-for="tab in tabsInfo.tabs" :label="tab.label" :name="tab.name">
76 </el-tab-pane>
77 </el-tabs>
78 <div class="logon-btns">
79 <el-button class="logon-btn" @click="register">注册</el-button>
80 <el-button class="logon-btn main-btn" @click="logon">登录</el-button>
81 </div>
82 </div>
83 <div v-show="tabsInfo.activeName == 'index'">
84 <div class="banner">
85 <img style="width: 100%;height: 100%;" src="../assets/images/home-banner.png" alt="" />
86 <div class="header">
87 <div class="header-content">
88 <!-- <div class="header-top">
89 <img src="../assets/images/logo.png" class="logo" />
90 </div> -->
91 <div class="header-bottom">
92 <div class="title">数据资产管理系统</div>
93 <div class="header-right">激活数据流通体系，释放数据要素新质生产力</div>
94 </div>
95 </div>
96 </div>
97 </div>
98 <div class="second-container">
99 <div class="content">
100 <div class="chunk">
101 <img class="effect-img" src="../assets/images/financial-optimization.png" alt="" />
102 </div>
103 <div class="chunk">
104 <img class="effect-img" src="../assets/images/enhance.png" alt="" />
105 </div>
106 <div class="chunk">
107 <img class="effect-img" src="../assets/images/promote-circulation.png" alt="" />
108 </div>
109 <div class="chunk">
110 <img class="effect-img" src="../assets/images/data-element.png" alt="" />
111 </div>
112 </div>
113 </div>
114 <el-tabs class="three-tabs" v-model="activeName">
115 <el-tab-pane label="数据资产登记服务" name="register" class="register">
116 <div class="title-a">确权凭证可交易</div>
117 <div class="step-main">
118 <div class="step-one">
119 <div class="left">1</div>
120 <div class="right">加入数据资产生产体系</div>
121 </div>
122 <div class="step-one">
123 <div class="left">2</div>
124 <div class="right">资源盘点资产规划</div>
125 </div>
126 <div class="step-one">
127 <div class="left">3</div>
128 <div class="right">合规核验权利梳理</div>
129 </div>
130 <div class="step-one">
131 <div class="left">4</div>
132 <div class="right">资产登记确权凭证</div>
133 </div>
134 <div class="step-one">
135 <div class="left">5</div>
136 <div class="right">确定目标资产质量评价</div>
137 </div>
138 <div class="step-one">
139 <div class="left">6</div>
140 <div class="right">确定目标资产价值评估</div>
141 </div>
142 </div>
143 <div class="title-a" style="margin-top: 0px">确权凭证不可交易</div>
144 <div class="step-main">
145 <div class="step-one">
146 <div class="left">1</div>
147 <div class="right">加入数据资产生产体系</div>
148 </div>
149 <div class="step-one">
150 <div class="left">2</div>
151 <div class="right">资源盘点资产规划</div>
152 </div>
153 <div class="step-one">
154 <div class="left">3</div>
155 <div class="right">合规核验权利梳理</div>
156 </div>
157 <div class="step-one">
158 <div class="left">4</div>
159 <div class="right">资产登记确权凭证</div>
160 </div>
161 <div class="step-one" style="background: transparent"></div>
162 <div class="step-one" style="background: transparent"></div>
163 </div>
164 </el-tab-pane>
165 <el-tab-pane label="数据资产入表服务" name="entry" class="entry">
166 <div style="width: 100%; position: relative;">
167 <img style="width: 100%;height: 208px;" src="../assets/images/entry-bg.png" alt="" />
168 <div class="content">
169 <div class="title">提供入表咨询服务</div>
170 <div class="desc">提供权威会计师律师事务所辅导资产入表工作 上市公司 拟上市公司 国有企业 事业单位</div>
171 </div>
172 </div>
173 </el-tab-pane>
174 <el-tab-pane label="数据场内交易服务" name="transactio" class="transactio">
175 <div class="title-a">获取加工及产品经营授权，将数据资源形成数据产品，在可信空间进行买卖双方的交易</div>
176 <div class="step-main">
177 <div class="step-one" style="width: calc(25% - 25px)">
178 <div class="left">1</div>
179 <div class="right">数据产品设计</div>
180 </div>
181 <div class="step-one" style="width: calc(25% - 25px)">
182 <div class="left">2</div>
183 <div class="right">数据产品发布</div>
184 </div>
185 <div class="step-one" style="width: calc(25% - 25px)">
186 <div class="left">3</div>
187 <div class="right">寻找数据需求方</div>
188 </div>
189 <div class="step-one" style="width: calc(25% - 25px)">
190 <div class="left">4</div>
191 <div class="right">撮合成交</div>
192 </div>
193 </div>
194 </el-tab-pane>
195 <el-tab-pane label="数据金融化服务" name="finace" class="finace">
196 <div class="title-a">提供辅导完成数据资产金融化业务，获取以数据资产或数据产品的融资</div>
197 <div class="step-main">
198 <div class="step-one" style="width: calc(33% - 35px)">
199 <div class="left">1</div>
200 <div class="right">提出金融需求</div>
201 </div>
202 <div class="step-one" style="width: calc(33% - 35px)">
203 <div class="left">2</div>
204 <div class="right">寻找资金方</div>
205 </div>
206 <div class="step-one" style="width: calc(33% - 35px)">
207 <div class="left">3</div>
208 <div class="right">撮合成交</div>
209 </div>
210 </div>
211 </el-tab-pane>
212 <el-tab-pane label="治理及挖掘服务" name="governance" class="governance">
213 <div style="width: 100%; position: relative;">
214 <img style="width: 100%;height: 208px;" src="../assets/images/governance-bg.png" alt="" />
215 <div class="content">
216 <div class="title">治理及挖掘服务</div>
217 <div class="desc">提供专业的数据治理服务商为其提供数据治理服务及建议咨询</div>
218 <div class="desc">提供专业的数据挖掘应用服务</div>
219 </div>
220 </div>
221 </el-tab-pane>
222 </el-tabs>
223 <div class="four-container">
224 <div style="height: 100%; width: 100%;">
225 <div class="title">重点领域数据要素乘数效应</div>
226 <div class="desc">12重点领域</div>
227 <img style="width: 100%;margin-bottom: 61px;" src="../assets/images/primary-area.png" alt="" />
228 </div>
229 </div>
230 <div class="company">
231 <div style="height: 100%; width: 100%;">
232 <div class="title">北京传世博润科技有限公司</div>
233 <div class="desc">{{ companyDesc }}</div>
234 <div class="btn-dom">
235 <el-button class="btn" @click="enterCompany">了解我们</el-button>
236 </div>
237 <img style="width: 100%;height: 543px;" src="../assets/images/company-bg.png" alt="" />
238 </div>
239 </div>
240 <div class="exchange">
241 <div class="title">合作交易所</div>
242 <div class="img-main">
243 <img class="img-exchange" src="../assets/images/exchange-beijing.png" alt="" />
244 <img class="img-exchange" src="../assets/images/exchange-guiyang.png" alt="" />
245 <img class="img-exchange" src="../assets/images/exchange-xibu.png" alt="" />
246 <img class="img-exchange" src="../assets/images/exchange-wenzhou.png" alt="" />
247 </div>
248 </div>
249 </div>
250 <homeDamRegister v-show="tabsInfo.activeName == 'dam'"></homeDamRegister>
251 <!-- 数据供给页面 -->
252 <homeDamDataCircule ref="homeDamDataCirculeRef" v-show="tabsInfo.activeName == 'dataCircule'"></homeDamDataCircule>
253 <!-- 供需信息页面 -->
254 <homeDamDemand ref="homeDamDemandRef" v-show="tabsInfo.activeName == 'demand'"></homeDamDemand>
255 <!-- 算法竞赛页面 -->
256 <homeDamAlgorithm ref="homeDamAlgorithmRef" v-show="tabsInfo.activeName == 'algorithm'"></homeDamAlgorithm>
257 <!-- 服务工具 -->
258 <homeDamMarket ref="homeDamMarketRef" v-show="tabsInfo.activeName == 'market'"></homeDamMarket>
259 <homeDamFinance ref="homeDamFinanceRef" v-show="tabsInfo.activeName == 'service'"></homeDamFinance>
260 <div class="footer-link">
261 <div class="link-title">友情链接</div>
262 <div class="link-main">
263 <div class="column">
264 <!-- 目前没找到官网，暂时先不跳转，跟统计局不是同一个。 -->
265 <span class="link-detail" href="https://data.stats.gov.cn" target="_blank">国家数据局</span>
266 <a class="link-detail" href="https://www.miit.gov.cn" target="_blank">中华人民共和国工业和信息化部</a>
267 <a class="link-detail" href="http://www.caict.ac.cn" target="_blank">中国信息通信研究院</a>
268 <a class="link-detail" href="https://www.trimps.ac.cn" target="_blank">公安部第三研究所</a>
269 </div>
270 <div class="column">
271 <a class="link-detail" href="https://www.cufe.edu.cn" target="_blank">中央财经大学</a>
272 <a class="link-detail" href="https://www.henu.edu.cn" target="_blank">河南大学</a>
273 <a class="link-detail" href="https://www.wzu.edu.cn" target="_blank">温州大学</a>
274 </div>
275 <div class="column">
276 <a class="link-detail" href="https://www.landinglawyer.com" target="_blank">上海兰迪律师事务所</a>
277 <a class="link-detail" href="https://www.cairui.com.cn" target="_blank">上海财瑞会计事务所</a>
278 <a class="link-detail" href="https://www.cairui.com.cn" target="_blank">上海财瑞资产评估有限公司</a>
279 </div>
280 <div class="column">
281 <a class="link-detail" href="https://ebanking1.ccb.com.cn" target="_blank">中国建设银行</a>
282 <a class="link-detail" href="https://bankofbeijing.com.cn" target="_blank">北京银行股份有限公司</a>
283 <a class="link-detail" href="https://www.cebbank.com" target="_blank">中国光大银行股份有限公司</a>
284 <a class="link-detail" href="https://www.zybank.com.cn" target="_blank">中原银行股份有限公司</a>
285 <a class="link-detail" href="https://www.shxibank.com" target="_blank">山西银行股份有限公司</a>
286 </div>
287 </div>
288 </div>
289 <div class="footer">
290 <div class="desc">北京传世博润科技有限公司 Copyright @ 2023-2024 <a style="color: #fff" href="https://beian.miit.gov.cn"
291 target="_blank">京ICP备2024044205号 </a>
292 </div>
293 </div>
294 </div>
295 </div>
296 </template>
297
298 <style lang="scss" scoped>
299 .home-full-wrap {
300 height: 100%;
301 width: 100%;
302 overflow-y: auto;
303 overflow-x: hidden;
304 }
305
306 .home-container {
307 display: flex;
308 flex-direction: column;
309 min-height: 100%;
310 }
311
312 .logo-header {
313 height: 48px;
314 display: flex;
315 align-items: center;
316 justify-content: space-between;
317
318 :deep(.header-tabs.el-tabs) {
319 margin-top: 14px;
320 .el-tabs__nav-scroll {
321 display: flex;
322 justify-content: center;
323 }
324
325 .el-tabs__nav-wrap::after {
326 height: 0px;
327 }
328
329 .el-tabs__nav {
330 margin: 0px 20px;
331 }
332
333 .el-tabs__item:focus-visible {
334 box-shadow: none;
335 }
336 }
337 }
338
339 .banner {
340 height: 500px;
341 position: relative;
342
343 .header {
344 width: 100%;
345 height: 100%;
346 display: flex;
347 justify-content: center;
348 align-items: center;
349 color: #fff;
350 position: absolute;
351 left: 0;
352 top: 0;
353
354 .header-content {
355 width: 100%;
356 height: 100%;
357 display: flex;
358 flex-direction: column;
359
360 .header-top {
361 height: 80px;
362 display: flex;
363 align-items: center;
364
365 .logo {
366 margin-left: 40px;
367 height: 40px;
368 }
369 }
370
371 .header-bottom {
372 height: calc(100% - 120px);
373 display: flex;
374 flex-direction: column;
375 justify-content: center;
376 margin-bottom: 40px;
377
378 .title {
379 font-size: 56px;
380 color: #FFFFFF;
381 font-weight: 400;
382 margin-bottom: 18px;
383 display: block;
384 margin-left: 213px;
385 }
386
387 .header-right {
388 font-size: 30px;
389 font-weight: 200;
390 padding-top: 25px;
391 margin-left: 331px;
392 }
393 }
394 }
395 }
396
397 }
398
399 .logon-btns {
400 display: flex;
401 margin-right: 55px;
402 }
403
404 .logon-btn {
405 font-size: 14px;
406 color: #666666;
407 text-align: center;
408 height: 32px;
409 width: 64px;
410 display: block;
411 border-radius: 4px;
412 &.main-btn {
413 background: #0098E6;
414 color: #fff;
415 }
416 }
417
418 .second-container {
419 height: auto;
420 background-color: #fff;
421 display: flex;
422 flex-direction: row;
423 align-items: center;
424 justify-content: center;
425 padding: 32px 20px;
426
427 .content {
428 width: 100%;
429 display: flex;
430 height: 100%;
431 justify-content: space-between;
432
433 .chunk {
434 min-width: 250px;
435 width: 23.5%;
436
437 .effect-img {
438 height: 100%;
439 width: 100%;
440 }
441
442 .text {
443 font-size: 24px;
444 color: #1B1B1B;
445 font-weight: 200;
446 padding-left: 20px;
447 padding-right: 40px;
448 padding-top: 12px;
449 height: 118px;
450 }
451 }
452 }
453 }
454
455 :deep(.three-tabs.el-tabs) {
456 background-color: #EAEDF4;
457
458 .el-tabs__content {
459 padding: 0px 20px;
460 }
461
462 .el-tabs__nav-next,
463 .el-tabs__nav-prev {
464 top: 35px;
465 }
466
467 .el-tabs__nav-scroll {
468 display: flex;
469 flex-direction: row;
470 justify-content: center;
471 padding: 0px 20px;
472
473 .el-tabs__nav {
474 width: 100%;
475 }
476 }
477
478 .el-tabs__active-bar {
479 background-color: #E1822F;
480 }
481
482 .el-tabs__item {
483 height: 110px;
484 width: 256px;
485 font-size: 24px;
486 color: #414141;
487 font-weight: 200;
488 padding-right: 30px;
489 flex: 1;
490
491 &.is-active {
492 color: #E1822F;
493 font-weight: 500;
494 }
495 }
496
497 .el-tab-pane {
498 display: flex;
499 flex-direction: column;
500 align-items: center;
501 }
502
503 .title-a {
504 margin-top: 37px;
505 margin-bottom: 16px;
506 font-size: 24px;
507 color: #2B2B2B;
508 font-weight: 200;
509 width: 100%;
510 }
511
512 .governance,
513 .entry {
514 margin-bottom: 50px;
515 margin-top: 36px;
516 position: relative;
517
518 .content {
519 position: absolute;
520 left: 60px;
521 top: 0;
522 height: 100%;
523 display: flex;
524 flex-direction: column;
525 justify-content: center;
526
527 .title {
528 font-size: 32px;
529 color: #FFFFFF;
530 font-weight: 200;
531 }
532
533 .desc {
534 margin-top: 12px;
535 font-size: 20px;
536 color: #FFFFFF;
537 font-weight: 200;
538 }
539 }
540 }
541
542 .step-main {
543 margin-bottom: 81px;
544 display: flex;
545 width: 100%;
546 justify-content: space-between;
547
548 .step-one {
549 height: 127px;
550 background-image: linear-gradient(90deg, #D96D03 2%, #F1A981 100%);
551 display: flex;
552 min-width: 205px;
553 width: calc(16.7% - 20px);
554
555 .left {
556 display: flex;
557 align-items: center;
558 margin-left: 12px;
559 font-size: 80px;
560 color: #FFFFFF;
561 font-weight: 500;
562 }
563
564 .right {
565 display: flex;
566 align-items: center;
567 margin-left: 8px;
568 margin-right: 24px;
569 font-size: 24px;
570 color: #FFFFFF;
571 font-weight: 200;
572 }
573 }
574 }
575 }
576
577 .four-container {
578 height: auto;
579 display: flex;
580 flex-direction: column;
581 align-items: center;
582 padding: 0px 20px;
583
584 .title {
585 width: 100%;
586 margin-top: 80px;
587 font-size: 40px;
588 color: #242424;
589 line-height: 56px;
590 font-weight: 200;
591 }
592
593 .desc {
594 width: 100%;
595 font-size: 24px;
596 color: #242424;
597 line-height: 33px;
598 font-weight: 200;
599 margin-bottom: 32px;
600 }
601 }
602
603 .company {
604 background: #EAEDF4;
605 display: flex;
606 flex-direction: column;
607 align-items: center;
608 padding: 0px 20px;
609
610 .title {
611 width: 100%;
612 margin-top: 80px;
613 font-size: 40px;
614 color: #2B2B2B;
615 font-weight: 200;
616 height: 56px;
617 }
618
619 .desc {
620 width: 100%;
621 margin-top: 14px;
622 font-size: 20px;
623 color: #2B2B2B;
624 font-weight: 200;
625 white-space: pre-line;
626 line-height: 28px;
627 }
628
629 .btn-dom {
630 width: 100%;
631 }
632
633 .btn {
634 font-size: 18px;
635 margin-top: 21px;
636 margin-bottom: 23px;
637 background: #0759B7;
638 border-radius: 0px;
639 color: #fff;
640 font-weight: 500;
641 padding: 8px 33px;
642 height: 40px;
643 width: 120px;
644 }
645 }
646
647 .exchange {
648 height: 394px;
649 display: flex;
650 flex-direction: column;
651 align-items: center;
652 padding: 0px 20px;
653
654 .title {
655 width: 100%;
656 margin-top: 40px;
657 margin-bottom: 30px;
658 font-size: 40px;
659 color: #2B2B2B;
660 font-weight: 200;
661 }
662
663 .img-main {
664 width: 100%;
665 height: 228px;
666 display: flex;
667 justify-content: space-between;
668
669 .img-exchange {
670 width: 23%;
671 min-width: 230px;
672 }
673 }
674 }
675
676 .footer {
677 height: 60px;
678 display: flex;
679 align-items: center;
680 justify-content: center;
681 background: #2A2B2C;
682
683 .desc {
684 font-size: 14px;
685 color: #FFFFFF;
686 font-weight: 200;
687 }
688 }
689
690 .footer-link {
691 height: 262px;
692 display: flex;
693 flex-direction: column;
694 align-items: flex-start;
695 background: #2A2B2C;
696 padding: 0px 90px;
697
698 .link-title {
699 margin: 28px 0px;
700 font-size: 16px;
701 color: #FFFFFF;
702 font-weight: 600;
703 }
704
705 .link-main {
706 display: flex;
707 flex-direction: row;
708 justify-content: space-between;
709 width: 100%;
710
711 .column {
712 display: flex;
713 flex-direction: column;
714 }
715 .link-detail {
716 font-size: 16px;
717 color: #C9C9C9;
718 line-height: 18px;
719 font-weight: 400;
720 line-height: 24px;
721 margin-bottom: 8px;
722 text-decoration: none;
723 cursor: pointer;
724 }
725 }
726
727 }
728
729 :deep(.el-overlay) {
730 background-color: transparent;
731 }
732 </style>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!