udxcms 1.0.1

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

@@ -0,0 +1,845 @@
+
+<template>
+    <div class="dex-page-home">
+        <div class="visible-pc">
+            <Header />
+        </div>
+        <div class="visible-h5">
+            <Top :logoPosition='commonConf.logoPosition' />
+        </div>
+        <div class="dex-page-content">
+            <section class="first-page">
+                <div class="content">
+                    <div class='title'>The Social Blockchain for 
+                        Tomorrow’s Connections</div>
+                    <div class='title-img'>
+                        <img :src="require('../../../assets/img/morse-dex/first-title.png')" alt="">
+                    </div>
+                    <div class='first-btn'>
+                        <div class="btn" @click="goTrade">
+                            Trade Now →
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section class='second'>
+                <div class="second-top content">
+                    <div class="second-title">
+                        <span>
+                            Explore the 
+                            <span class='text-bg'>SOFA</span>
+                            Ecosystem
+                        </span>
+                    </div>
+                    <div class='ecosystem-box'>
+                        <Swiper ref="mySwiper" :options="isMobile ? swiperH5Options : swiperPcOptions" class='items'>
+                            <swiper-slide v-for='(item, index) in ecosystem' :key='index'>
+                                <div :class="['item', item.isModel && 'item-d']">
+                                    <img :src="item.img" alt="">
+                                    <div>{{item.title}}</div>
+                                </div>
+                            </swiper-slide>
+                        </Swiper>
+                        <div class='swiper-button prev swiper-button-prev'>
+                            <img :src="require('../../../assets/img/morse-dex/arrow.png')" >
+                        </div>
+                        <div class='swiper-button next swiper-button-next'>
+                            <img :src="require('../../../assets/img/morse-dex/arrow.png')" >
+                        </div>
+                    </div>
+                    <div class="second-subtitle">
+                        <span class="title">
+                            Key Features of the
+                            <span class='text-bg'>SOFA</span>  Blockchain
+                        </span>
+
+                        <div class="description">High Performanceand Scalability</div>
+                    </div>
+
+                    <div class='second-bottom-msg'>
+                        <div class="msg-item">
+                            <img :src="require('../../../assets/img/morse-dex/second-item-1.png')" alt="">
+                            <div class="title">Low Latency:</div>
+                            <div class='detail'>With rapid transaction confirmation times, SOFA ensures seamless user experiences, making it ideal for real-time social interactions and payment scenairos</div>
+                        </div>
+                        <div class="msg-item">
+                            <img :src="require('../../../assets/img/morse-dex/second-item-2.png')" alt="">
+                            <div class="title">High TOS:</div>
+                            <div class='detail'>SOFA can process thousands of transactions per second, ensuring smooth operations for social applications and payment systems,</div>
+                        </div>
+                    </div>
+                </div>
+
+                <div class="second-bottom">                
+                    <div class="second-bottom-card content">
+                        <div class="title">
+                            Efficient Consensus Mechanism
+                        </div>
+                        <div class="card-content">
+                            <img :src="require('../../../assets/img/morse-dex/third-img.png')" alt="">
+                            <div class="detail">
+                                <div class="detail-title">By using a Proof-of-Stake (PoS) system</div>
+                                <div class="detail-content">SOFA ensures energy efficiency, scalability, and security. Validators are incentivized through gas fees and block rewards, with a fast block time ensuring smooth network operation.</div>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </section>
+
+            <section class="third">
+                <div class='content'>
+                    <div class='title'>Cross-Chain Compatibility and Interoperability</div>
+                    <div class='third-box'>
+                        <div class="third-item">
+                            <img :src="require('../../../assets/img/morse-dex/third-item-1.png')" alt="" class='icon'>
+                            <div class='title'>Cross-Chain Bridges:</div>
+                            <div class='detail'>With SOFA’s cross-chain bridge technology, users can easily transfer assets between SOFA and other blockchains, facilitating multi-chain integration.</div>
+                        </div>
+                        <div class="third-item">
+                            <img :src="require('../../../assets/img/morse-dex/third-item-2.png')" alt="" class='icon'>
+                            <div class='title'>Interoperability:</div>
+                            <div class='detail'>Supports cross-chain asset transactions and smart contract calls, enhancing the flexibility of blockchain applications.</div>
+                        </div>
+                    </div>
+
+                    <div class="third-bottom-card">
+                        <div class="title">
+                            Robust Payment Solutions
+                        </div>
+                        <div class="card-content">
+                            <img :src="require('../../../assets/img/morse-dex/third-card.png')" alt="">
+                            <div class="detail">
+                                <div class="detail-title">In addition to its social capabilities:</div>
+                                <div class="detail-content">SOFA offers a powerful payment infrastructure, enabling decentralized global payments and cross-border transfers.</div>
+                            </div>
+                        </div>
+                    </div>
+                </div> 
+            </section>
+        </div>
+        <Footer class='index-dex' />
+    </div>
+</template>
+
+<script>
+import { fetchNetworkList } from '../../../api/common';
+import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
+import { isMobile } from '../../../utils/index'
+export default {
+    name: "index-morse",
+    components: {
+        Swiper,
+        SwiperSlide
+    },
+    data() {
+        return {
+            apiUrl: '',
+            marketUrl: '/market',
+            mobieMarketUrl: '/market-mobile',
+            networkList: [],
+            commonConf: {
+                logoPosition: 'center',
+                topBannerType: 'dex'
+            },
+            activeI: 0,
+            ecosystem: [{
+                img: require('../../../assets/img/morse-dex/e-item-1.png'),
+                title: 'Morse-Chat'
+            },{
+                img: require('../../../assets/img/morse-dex/e-item-2.png'),
+                title: 'Sofa Dex'
+            },{
+                img: require('../../../assets/img/morse-dex/e-item-3.png'),
+                title: 'Sofa Wallet'
+            },{
+                img: require('../../../assets/img/morse-dex/blabla.png'),
+                title: 'Blabla'
+            },{
+                img: require('../../../assets/img/morse-dex/dory.png'),
+                title: 'Dory'
+            },{
+                img: require('../../../assets/img/morse-dex/fishing.png'),
+                title: 'fantasy',
+                isModel: 1
+            },{
+                img: require('../../../assets/img/morse-dex/buddha.png'),
+                title: 'buddha path',
+                isModel: 1
+            }],
+            isMobile: false,
+            swiperPcOptions: {
+                slidesPerView: 3,
+                slidesPerGroup: 1,
+                navigation: {
+                    nextEl: '.next',
+                    prevEl: '.prev',
+                },
+                freeMode: true,
+            },
+            swiperH5Options: {
+                slidesPerView: 1.8,
+                slidesPerGroup: 1,
+                centeredSlides: true,
+                navigation: {
+                    nextEl: '.next',
+                    prevEl: '.prev',
+                },
+                freeMode: true,
+                spaceBetween: 40
+            },
+        };
+    },
+    computed: {
+        resizeChangeCount() {
+            return this.$store.state.resizeChangeCount
+        },
+        siteConfig() {
+            return this.$store.state.siteConfig;
+        },
+        tradeUrl() {
+            return this.siteConfig.tradeUrl || '';
+        },
+    },
+    watch: {
+        resizeChangeCount() {
+            this.checkIsMobile()
+        }
+    },
+    created() {
+        this.init();
+    },
+    methods: {
+        goTrade(item) {
+            let pathUrl = '/trade?symbol=' + item.symbol;
+            this.$router.push(pathUrl)
+        },
+        init() {
+            this.fetchNetworkList();
+            this.checkIsMobile()
+        },
+        fetchNetworkList() {
+            fetchNetworkList().then(res => {
+                this.networkList = res;
+            }).catch(e => e)
+        },
+        checkTrade(item) {
+            this.$router.push({
+                path: `/trade/spot?symbol=${item.coin_symbol}-${item.base_symbol}`
+            })
+        },
+        checkIsMobile() {
+            this.isMobile = isMobile()
+            if (this.isMobile) {
+                this.$nextTick(() => {
+                    this.$refs.mySwiper.$swiper.slideTo(1, 1000, false)
+                })
+            }
+        },
+        goTrade() {
+            this.$router.push({
+                path: this.tradeUrl
+            })
+        }
+    },
+    beforeDestroy() {
+    },
+};
+</script>
+
+<style lang="less" scoped>
+.vw(@px) {
+	@p: (@px / 1920) * 100vw;
+	@m: (@px / 390) * 100vw;
+}
+.dex-page-home {
+    position: relative;
+    background: white;
+    color: var(--morseTextColor);
+    overflow: hidden;
+
+    .dex-bg {
+        background: linear-gradient(90deg, rgba(59, 130, 246, 1), rgba(16, 185, 129, 1));
+    }
+
+    .text-bg {
+        background: linear-gradient(90deg, rgba(59, 130, 246, 1), rgba(16, 185, 129, 1));
+        background-clip: text;
+        color: transparent;
+        -webkit-text-fill-color: transparent;
+    }
+
+    .dex-page-content .content{
+        max-width: .vw(1250)[@p];
+        margin: 0 auto;
+    }
+
+    .first-page {
+        height: .vw(700)[@p];
+        width: 100%;
+        background: url('../../../assets/img/morse-dex/top-bg-2.png'), url('../../../assets/img/morse-dex/top-bg-1.png');
+        background-size: .vw(1304)[@p] .vw(700)[@p], .vw(1304)[@p] .vw(700)[@p];
+        background-position: 0 0, .vw(616)[@p] 0;
+        background-repeat: no-repeat;
+        .content {
+            display: flex;
+            justify-content: center;
+            flex-wrap: wrap;
+        }
+        .title {
+            padding-top: .vw(100)[@p];
+            width: .vw(778)[@p];
+            font-size: .vw(48)[@p];
+            line-height: .vw(64)[@p];
+            color: rgba(0, 0, 0, 1);
+            margin: 0 auto;
+            text-align: center;
+        }
+        .title-img {
+            margin-top: .vw(28)[@p];
+            text-align: center;
+            img {
+                height: .vw(176)[@p];
+                width: auto;
+            }
+        }
+        .first-btn {
+            width: 100%;
+            text-align: center;
+        }
+        .btn {
+            margin-top: .vw(104)[@p];
+            width: .vw(218)[@p];
+            height: .vw(64)[@p];
+            border-radius: .vw(40)[@p];
+            display: inline-flex;
+            justify-content: center;
+            align-items: center;
+            cursor: pointer;
+            color: white;
+            font-size: .vw(24)[@p];
+            .dex-bg;
+            &:hover {
+                animation: btnF 0.3s ease-in-out;
+            }
+        }
+    }
+
+    .second {
+        background-image: url('../../../assets/img/morse-dex/second-bg.png'), url('../../../assets/img/morse-dex/second-bg-2.png');
+        background-position: 0 0, 0 120%;
+        background-size: 100% auto, 100% auto;
+        background-repeat: no-repeat;
+        .second-title {
+            padding-top: .vw(100)[@p];
+            text-align: center;
+            font-size: .vw(64)[@p];
+            line-height: .vw(80)[@p];
+            color: rgba(0, 0, 0, 1);
+        }
+
+        .ecosystem-box {
+            position: relative;
+
+            .swiper-button-prev {
+                position: absolute;
+                z-index: 2;
+                left: -60px;
+                &::after {
+                    display: none;
+                }
+            }
+
+            .swiper-button-next {
+                position: absolute;
+                z-index: 2;
+                right: -40px;
+                img {
+                    transform: rotate(180deg);
+                }
+                &::after {
+                    display: none;
+                }
+            }
+        }
+
+        .items {
+            display: flex;
+            justify-content: center;
+            margin-top: .vw(66)[@p];
+            gap: .vw(26)[@p];
+            .item {
+                width: .vw(380)[@p];
+                height: .vw(260)[@p];
+                border-radius: .vw(24)[@p];
+                background: #F4F6FA;
+                display: flex;
+                align-content: center;
+                flex-wrap: wrap;
+                
+                img {
+                    width: .vw(96)[@p];
+                    height: .vw(96)[@p];
+                    margin: 0 auto;
+                }
+                div {
+                    margin-top: .vw(12)[@p];
+                    font-size: .vw(32)[@p];
+                    line-height: .vw(48)[@p];
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 1);
+                    width: 100%;
+                    text-align: center;
+                }
+
+                &:hover:not(.item-d) {
+                    .dex-bg;
+                }
+
+                &.item-d {
+                    position: relative;
+                    &::before {
+                        content: ' ';
+                        position: absolute;
+                        z-index: 2;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        backdrop-filter: blur(10px);
+                        background: rgba(128, 128, 128, .4);
+                        border-radius: .vw(24)[@p];
+                    }
+                    &::after {
+                        content: "敬请期待";
+                        position: absolute;
+                        z-index: 3;
+                        top: 0;
+                        left: 0;
+                        right: 0;
+                        bottom: 0;
+                        font-size: 32px;
+                        color: white;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                    }
+                }
+            }
+        }
+
+        .second-subtitle {
+            margin-top: .vw(80)[@p];
+            text-align: center;
+            .description, .title {
+                display: inline-block;
+                width: .vw(858)[@p];
+                margin: 0 auto;
+                font-size: .vw(64)[@p];
+                line-height: .vw(80)[@p];
+                color: #04060B;
+                word-wrap: break-word;
+            }
+
+            .description {
+                margin-top: .vw(80)[@p];
+                font-size: .vw(56)[@p];
+                font-weight: 700;
+                text-align: center;
+            }
+        }
+
+        .second-bottom-msg {
+            width: .vw(1200)[@p];
+            margin: .vw(60)[@p] auto;
+            display: flex;
+            justify-content: space-between;
+            padding: 0 .vw(80)[@p];
+            .msg-item {
+                width: .vw(560)[@p];
+                img {
+                    width: .vw(100)[@p];
+                    height: .vw(100)[@p];
+                }
+                .title {
+                    margin-top: .vw(32)[@p];
+                    font-size: .vw(32)[@p];
+                    font-weight: 500;
+                    color: rgba(0, 0, 0, 1);
+                }
+                .detail {
+                    margin-top: .vw(24)[@p];
+                    font-size: .vw(18)[@p];
+                    color: rgba(0, 0, 0, 0.60);
+                    line-height: .vw(24)[@p];
+                }
+            }
+        }
+        .second-bottom {
+            padding-top: .vw(240)[@p];
+            background-position: 0 100%;
+            .second-bottom-card {
+                width: .vw(1200)[@p];
+                margin: 0 auto;
+                padding: .vw(80)[@p] .vw(100)[@p];
+                border-radius: .vw(40)[@p];
+                background: rgba(255, 255, 255, 0.80);
+                box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.10);
+                backdrop-filter: blur(8px);
+                .title {
+                    text-align: center;
+                    font-size: .vw(56)[@p];
+                    color: #000;
+                    font-weight: 700;
+                    white-space: nowrap;
+                }
+                .card-content {
+                    display: flex;
+                    margin-top: .vw(44)[@p];
+                    img {
+                        width: .vw(480)[@p];
+                        height: auto;
+                        border-radius: .vw(16)[@p];
+                    }
+                    .detail {
+                        padding: .vw(50)[@p] 0 0 .vw(40)[@p];
+                        .detail-title {
+                            font-size: .vw(32)[@p];
+                            color: #000;
+                            font-weight: 500;
+                            line-height: .vw(32)[@p];
+                        }
+                        .detail-content {
+                            margin-top: .vw(32)[@p];
+                            font-size: .vw(20)[@p];
+                            line-height: .vw(22)[@p];
+                            color: rgba(0, 0, 0, 0.60);
+                        }
+                    }
+                }
+            }
+        }
+    }
+    .third {
+        padding-top: .vw(204)[@p];
+        background-image: url('../../../assets/img/morse-dex/second-bg-2.png');
+        background-position: 0 -120%;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        padding-bottom: .vw(104)[@p];
+        .content {
+            .title {
+                font-size: .vw(56)[@p];
+                color: #000;
+                font-weight: 700;
+            }
+            .third-box {
+                padding: .vw(60)[@p] .vw(30)[@p] 0;
+                display: flex;
+                justify-content: space-between;
+                .third-item {
+                    width: .vw(560)[@p];
+                    img {
+                        width: .vw(100)[@p];
+                        height: .vw(100)[@p];
+                    }
+                    .title {
+                        margin-top: .vw(32)[@p];
+                        font-size: .vw(32)[@p];
+                        color: #000;
+                    }
+                    .detail {
+                        margin-top: .vw(24)[@p];
+                        font-size: .vw(18)[@p];
+                        color: rgba(0, 0, 0, 0.60);
+                        letter-spacing: -0.2px;
+                        line-height: .vw(24)[@p];
+                    }
+                }
+            }
+
+            .third-bottom-card {
+                margin-top: .vw(200)[@p];
+                padding: .vw(80)[@p] .vw(100)[@p];
+                border-radius: .vw(40)[@p];
+                background: rgba(255, 255, 255, 0.80);
+                box-shadow: 0px 8px 32px 0px rgba(0, 0, 0, 0.10);
+                backdrop-filter: blur(8px);
+                .title {
+                    padding-top: 0;
+                    text-align: center;
+                    font-size: .vw(56)[@p];
+                    color: #000;
+                    font-weight: 700;
+                    white-space: nowrap;
+                }
+                .card-content {
+                    display: flex;
+                    margin-top: .vw(44)[@p];
+                    img {
+                        width: .vw(480)[@p];
+                        height: auto;
+                        border-radius: .vw(16)[@p];
+                    }
+                    .detail {
+                        padding: .vw(50)[@p] 0 0 .vw(40)[@p];
+                        .detail-title {
+                            font-size: .vw(32)[@p];
+                            color: #000;
+                            font-weight: 500;
+                            line-height: .vw(32)[@p];
+                        }
+                        .detail-content {
+                            margin-top: .vw(32)[@p];
+                            font-size: .vw(20)[@p];
+                            line-height: .vw(22)[@p];
+                            color: rgba(0, 0, 0, 0.60);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+@media screen and (max-width: 768px) {
+    .home-dex-btn {
+        font-size: 16px;
+        width: 209px;
+        height: 56px;
+        color: white;
+    }
+
+    .dex-page-home {
+        .dex-page-content .content {
+            max-width: 100vw;
+        }
+        .first-page {
+            background-position: -60px 0, calc(100% + 60px), 0;
+            .title {
+                padding-top: 20px;
+                width: 80%;
+                font-size: 18px;
+                line-height: 22px;
+            }
+
+            .title-img {
+                margin-top: 14px;
+                text-align: center;
+                img {
+                    height: auto;
+                    width: 80%;
+                }
+            }
+
+            .btn {
+                margin-top: 20px;
+                width: 120px;
+                height: 30px;
+                border-radius: 20px;
+                font-size: 14px;
+            }
+        }
+
+        .second {
+            .second-title {
+                padding-top: 60px;
+                text-align: center;
+                font-size: 14px;
+                line-height: 18px;
+            }
+            .items {
+                margin-top: 30px;
+                gap: 26px;
+                .item {
+                    width: 200px;
+                    height: 136px;
+                    border-radius: 4px;
+                    img {
+                        width: 56px;
+                        height: 56px;
+                        margin: 0 auto;
+                    }
+                    div {
+                        margin-top: 4%;
+                        font-size: 16px;
+                        line-height: 18px
+                    }
+                    &.item-d {
+                        &::after {
+                            font-size: 18px;
+                        }
+                    }
+                }
+            }
+
+            .second-subtitle {
+                margin-top: 40px;
+                .description, .title {
+                    width: 80%;
+                    margin: 0 auto;
+                    font-size: 24px;
+                    line-height: 26px;
+                }
+    
+                .description {
+                    margin-top: 20px;
+                    font-size: 18px;
+                }
+            }
+
+            .second-bottom-msg {
+                width: 94%;
+                margin: 20 auto;
+                padding: 0 10px;
+                flex-wrap: wrap;
+                .msg-item {
+                    width: 100%;
+                    margin-top: 10px;
+                    img {
+                        width: 40px;
+                        height: 40px;
+                    }
+                    .title {
+                        margin-top: 10px;
+                        font-size: 18px;
+                    }
+                    .detail {
+                        margin-top: 8px;
+                        font-size: 14px;
+                        color: rgba(0, 0, 0, 0.60);
+                        line-height: 16px;
+                    }
+                }
+            }
+
+            .second-bottom {
+                padding-top: 20px;
+                background-position: 0 100%;
+                .second-bottom-card {
+                    width: 94%;
+                    margin: 0 auto;
+                    padding: 12px 10px;
+                    border-radius: 10px;
+                    backdrop-filter: blur(8px);
+                    .title {
+                        font-size: 20px;
+                    }
+                    .card-content {
+                        display: flex;
+                        margin-top: 10px;
+                        flex-wrap: wrap;
+                        img {
+                            width: 100%;
+                            height: auto;
+                            border-radius: 16px;
+                        }
+                        .detail {
+                            padding: 10px 0 0 0;
+                            .detail-title {
+                                font-size: 16px;
+                                line-height: 20px;
+                            }
+                            .detail-content {
+                                margin-top: 8px;
+                                font-size: 14px;
+                                line-height: 16px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+
+        .third {
+            padding-top: 40px;
+            .content {
+                .title {
+                    font-size: 20px;
+                    text-align: center;
+                }
+                .third-box {
+                    width: 94%;
+                    padding: 12px 10px;
+                    flex-wrap: wrap;
+                    .third-item {
+                        width: 100%;
+                        padding: 12px 10px;
+                        margin-bottom: 12px;
+                        img {
+                            width: 40px;
+                            height: 40px;
+                        }
+                        .title {
+                            margin-top: 10px;
+                            font-size: 16px;
+                            color: #000;
+                            text-align: left;
+                        }
+                        .detail {
+                            margin-top: 8px;
+                            font-size: 14px;
+                            letter-spacing: -0.2px;
+                            line-height: 16px;
+                        }
+                    }
+                }
+    
+                .third-bottom-card {
+                    margin: 10px auto;
+                    padding: 12px 10px;
+                    border-radius: 12px;
+                    width: 94%;
+                    .title {
+                        font-size: 20px;
+                    }
+                    .card-content {
+                        display: flex;
+                        margin-top: 10px;
+                        flex-wrap: wrap;
+                        img {
+                            width: 100%;
+                            height: auto;
+                            border-radius: 14px;
+                        }
+                        .detail {
+                            padding: 10px 0 0 0;
+                            .detail-title {
+                                font-size: 16px;
+                                line-height: 18px;
+                            }
+                            .detail-content {
+                                margin-top: 8px;
+                                font-size: 14px;
+                                line-height: 16px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .dex-page-home {
+        .container {
+            margin-left: auto;
+            margin-right: auto;
+        }
+    }
+}
+
+@keyframes btnF {
+    0% {
+        transform: scale(1);
+    }
+    50% {
+        transform: scale(0.95);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+</style>