udxcms 1.0.1

package/dist/components/pageComponents/index/IndexExchange.vue

@@ -0,0 +1,490 @@
+<!--
+ * @Descripttion:
+ * @version:
+ * @Author:
+ * @Date: 2021-04-20 11:15:15
+ * @LastEditors: Lewis
+ * @LastEditTime: 2022-03-26 22:50:21
+-->
+<template>
+    <div class='home-header'>
+        <Header :scrollTop="500" :hideArr='hideArr' :childPage='tabIndex'/>
+        <fullpage ref='allPage' @moveEnded='moveEnded'>
+            <div slot="section">
+                <div class='home-item home-item-first'>
+                    <video class='home-video' :src='videoUrl' v-show='showVideo' @error='endVideoFunc' @ended='endVideoFunc' preload muted @canplaythrough='playVideo' id='video'/>
+                    <transition name='homeFade'>
+                        <div class='home-content home-content-first' v-if='videoEnd == 1'>
+                            <div class='center-box'>
+                                <div class='container'>
+                                    <div class='c-logo'>
+                                        <img :src="logoSrc + '/' + language +'/w72.png'" class='imgsvg' alt="">
+                                    </div>
+                                    <div class='c-title'>
+                                        <span>WE</span>
+                                        <span>Define the Next Exchange</span>
+                                    </div>
+                                    <div class='c-title-sm'>The world’s first ultra-high frequency, centralized and decentralized trading platform with a perfect blend</div>
+                                    <div class='c-btns'>
+                                        <button class='btn' @click='dealUrl'>GET STARTED</button>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class='home-bottom-inner'>
+                                <div class='home-arrow'>
+                                    <img :src="require('../../../assets/img/arrowDown.png')" class='home-arrow-img' @click='goPage(1)'/>
+                                </div>
+                            </div>
+                        </div>
+                    </transition>
+                </div>
+            </div>
+            <div slot="section">
+                <div class='home-item home-item-two'>
+                    <exbangTwo />
+                </div>
+            </div>
+        </fullpage>
+    </div>
+</template>
+
+<script>
+    import { getLocation } from "../../../api/common"
+    import SubComfirm from './component/SubComfirm'
+    import exbangTwo from './component/exbang-two'
+    import conf from '../../../config/index'
+    export default {
+        name: 'home',
+        components: {
+            SubComfirm,
+            exbangTwo
+        },
+        computed: {
+            uid() {
+                return this.$store.state.user.userInfo && this.$store.state.user.userInfo.id || ''
+            },
+            subToast() {
+                return {
+                    title: this.$t('marketing_home_confirm'),
+                    content: this.$t('marketing_home_remined')
+                }
+            },
+            showTipTool() {
+                return this.tabIndex > 0
+            },
+            logoSrc() {
+                let path = this.$t('site_common_logo_base_url') + (window.location.host.indexOf(conf.localHostIp) == -1 ? window.location.hostname: conf.testSite)
+                return path
+            }
+        },
+        data() {
+            return {
+                type: 1,
+                showToast: false,
+                showVideo: false,
+                videoUrl: '',
+                videoEnd: 1,
+                videoTime: null,
+                styleConf: [{left: '500px', top: '200px'}, {left: '200px', top: '350px'}, {left: '800px', top: '400px'}, {bottom: '150px', right: '100px'}],
+                tabIndex: 1,
+                language: localStorage.getItem('language') || conf.baseLanguage,
+            }
+        },
+        created() {
+            this.init()
+        },
+        methods: {
+            init() {
+                let Location = this.$store.state.user.location || {}
+                if (!Object.keys(Location).length) {
+                    getLocation().then(res => {
+                        let { data, code } = res.data
+                        if (code == 200) {
+                            this.$store.commit('setLocation', data.country)
+                            this.$store.commit('setCurrency', data.currency)
+                        }
+                    }).catch(e => e)
+                }
+                this.initVideo()
+            },
+            dealUrl() {
+                if (this.uid) {
+                    this.$router.push({
+                        path: '/market/home'
+                    })
+                } else {
+                    this.$router.push({
+                        path: '/user/login'
+                    })
+                }
+            },
+            initVideo() {
+                let videoCount = localStorage.getItem('videoCount')
+                if (videoCount && videoCount > 0) {
+                    this.videoUrl = this.$t('site_common_advertise_video_url')
+                }
+            },
+            playVideo() {
+                this.$nextTick(() => {
+                    let video = document.getElementById('video')
+                    video.play()
+                    this.showVideo = true
+                    this.videoEnd = 0
+                })
+            },
+            endVideoFunc() {
+                this.showVideo = false
+                this.videoEnd = 1
+                let videoCount = localStorage.getItem('videoCount')
+                if (typeof videoCount !== 'object') {
+                    videoCount--
+                    localStorage.setItem('videoCount', videoCount)
+                }
+            },
+            goPage(num) {
+                this.$refs.allPage.next()
+            },
+            moveEnded(index) {
+                this.tabIndex = index
+            },
+            goAnnoument(type) {
+                this.$router.push({
+                    path: '/cms/announcement/announcement?type=' + type
+                })
+            },
+        },
+        beforeDestroy() {
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .home-header /deep/ .contentWidth {
+        width: 100%;
+        padding: 0 30px;
+    }
+    .home-item {
+        position: relative;
+        width: 100%;
+        height: 100%;
+        text-align: center;
+        // background-color:#0B0E12;
+        // background:rgba(255,255,255,1);
+        .home-video {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            z-index: 2;
+            object-fit: cover;
+        }
+        img {
+            width: 100%;
+            height: 100%;
+        }
+        .home-item-2 {
+            height: 100vh;
+            width: auto;
+        }
+        .home-content {
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            z-index: 3;
+            padding-top: 60px;
+            // background: rgba(0,0,0, 1);
+            .title {
+                margin-top: 86px;
+                line-height: 40px;
+                height: 40px;
+                font-family: FontMedium;
+                text-align: center;
+                color: rgba(255, 255, 255, .6);
+                font-size: 32px;
+            }
+            .title-two {
+                margin-top: 22px;
+                font-size: 32px;
+                font-family: FontMedium;
+
+                text-align: center;
+                color: #ffffff;
+                img {
+                    width: 202px;
+                    height: 22px;
+                    margin-left: 6px;
+                }
+            }
+            .title-three {
+                width: 600px;
+                font-size: 20px;
+                margin:0 auto;
+                line-height: 26px;
+                margin-bottom: 16px;
+                color: rgba(255, 255, 255, .9);
+            }
+            .home-bottom-inner {
+                position: absolute;
+                bottom: 40px;
+                width: 100%;
+                .home-arrow {
+                    margin-top: 22px;
+                    text-align: center;
+                    .mouse-icon {
+                        display: inline-block;
+                        width: 16px;
+                        height: 26px;
+                        border: 1px solid rgba(255, 255, 255, .5);
+                        border-radius: 10px;
+                        text-align: center;
+                        padding-top: 2px;
+                        div {
+                            display: inline-block;
+                            width: 2px;
+                            height: 5px;
+                            background: #ffffff;
+                            border-radius: 2px;
+                        }
+                    }
+                    img {
+                        width: 28px;
+                        height: 28px;
+                        // transition: all ease-in-out 1.5s;
+                        animation: down-up 1s ease-in-out infinite alternate;
+                        cursor: pointer;
+                    }
+                }
+            }
+
+            .home-item-title2 {
+                padding-top: 86px;
+                text-align: center;
+                font-size: 40px;
+                color: #ffffff;
+                line-height: 40px;
+                font-family: FontMedium;
+            }
+            .sub-progress {
+                margin-top: 223px;
+                display: flex;
+                justify-content: center;
+            }
+            .center-box {
+                position: absolute;
+                z-index: 2;
+                width: 1170px;
+                display: flex;
+                justify-content: space-between;
+                top: 50%;
+                left: 50%;
+                transform: translateX(-50%) translateY(-50%);
+            }
+            .container {
+                width: 570px;
+                text-align: left;
+                .c-logo {
+                    margin-bottom: 20px;
+                    .imgsvg {
+                        height: 24px;
+                        width: auto;
+                    }
+                }
+                .c-title {
+                    margin-bottom: 24px;
+                    font-size: 56px;
+                    font-family: FontBold;
+                    text-align: left;
+                    color: #FFFFFF;
+                    line-height: 64px;
+                    span:first-child {
+                        color: var(--primary-color);
+                        margin-right: .4em;
+                    }
+                }
+                .c-title-sm {
+                    margin-bottom: 88px;
+                    font-size: 22px;
+                    font-family: Font;
+
+                    text-align: left;
+                    color: #ffffff;
+                    line-height: 36px;
+                }
+                .c-btns {
+                    .btn {
+                        width: 180px;
+                        height: 50px;
+                        line-height: 50px;
+                        border-radius: 25px;
+                        background: rgba(251,252,255,0.60);
+                        filter: blur(.2px);
+                        color: #1a1a1a;
+                        font-size: 18px;
+                        cursor: pointer;
+                    }
+                }
+            }
+            .mark-highlight {
+                width: 570px;
+                transform: translateY(300px);
+                .mark-msg {
+                    display: flex;
+                    justify-content: flex-start;
+                    border-bottom: 1px solid #ffffff;
+                    .mark-item {
+                        text-align: left;
+                        .symbol img {
+                            height: 30px;
+                            width: 30px;
+                        }
+                        .mark-title {
+                            margin: 24px 0 30px 0;
+                            font-size: 12px;
+                            font-family: Font;
+
+                            text-align: center;
+                            color: #ffffff;
+                            line-height: 12px;
+
+                        }
+                    }
+                    .mark-item:first-child {
+                        margin-right: 102px;
+                    }
+                }
+                .mark-more {
+                    margin-top: 48px;
+                    display: flex;
+                    justify-content: flex-end;
+                    .dot {
+                        width: 48px;
+                        height: 48px;
+                        line-height: 48px;
+                        border-radius: 50%;
+                        border: 1px solid #ffffff;
+                        text-align: center;
+                        margin-left: 30px;
+                        color: white;
+                        font-size: 14px;
+                        font-family: Font;
+                    }
+                }
+            }
+        }
+    }
+    .home-item-first, .home-item-two {
+        background-image: url(../../../assets/img/firstT-bg-01.jpg);
+        background-size: cover;
+        background-position: center;
+    }
+    .home-item-two {
+        background-image: url(../../../assets/img/firstT-bg-02.jpg);
+    }
+    .home-bottom {
+        position: absolute;
+        bottom: 90px;
+        width: 100%;
+        .home-bottom-text {
+            line-height: 50px;
+            font-size: 20px;
+            font-family: FontMedium;
+            text-align: center;
+            color: #ffffff;
+            div {
+                margin-bottom: 10px;
+            }
+        }
+        .home-btns {
+            margin: 0 auto;
+            text-align: center;
+        }
+        .home-sm-btns {
+            margin-top: 16px;
+            font-size: 14px;
+            font-family: Font;
+            text-align: center;
+            color: #c0c3cc;
+            line-height: 14px;
+            justify-content: center;
+            text-decoration: underline;
+            cursor: pointer;
+            .img {
+                width:16px;
+                height: 16px;
+                margin-right: 6px;
+            }
+            .white-paper {
+                padding-right:18px;
+                height: 16px;
+                line-height: 16px;
+                font-size: 14px;
+                color: #C0C3CC;
+                font-family: FontMedium;
+
+                text-decoration: underline;
+                margin-right: 20px;
+                border-right: 1px solid #C0C3CC;
+            }
+        }
+        button {
+            width: 256px;
+            height: 48px;
+            line-height: 48px;
+            text-align: center;
+            font-size: 16px;
+            color: #f5f6fa;
+            font-family:  Font;
+            border-radius: 24px;
+        }
+        button:hover {
+            opacity: .8;
+        }
+        .btns-center {
+            width: 400px;
+            height: 48px;
+            border:3px solid #3c9be0;
+            line-height: 1;
+            text-align: center;
+            border-radius: 24px;
+            background: none;
+            font-size: 16px;
+            color: #3c9be0;
+        }
+        .btns-left {
+            margin-right: 32px;
+            border: 1px solid rgba(255, 255, 255, .2);
+            background:  rgba(255, 255, 255, 0);
+        }
+        .btns-right {
+            background: rgba(255, 255, 255, .1);
+            color: #ffffff;
+        }
+    }
+    .homeFade-enter-active, .homeFade-leave-active {
+        transition: opacity .5s;
+    }
+    .homeFade-enter, .homeFade-leave-active {
+        opacity: 0;
+    }
+    @keyframes down-up {
+        from { transform:translate3d(0, 10px, 0) }
+        to { transform:translate3d(0, 0px, 0) }
+    }
+
+    .home-content-btns {
+        position: absolute;
+        z-index: 2;
+        bottom: 30px;
+        width: 120px;
+        height: 40px;
+        line-height: 40px;
+        background: rgb(146 146 146);
+        border-radius: 6px;
+        font-size: 16px;
+        text-align: center;
+        color: white;
+    }
+</style>