udxcms 1.0.9 → 1.0.10

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

@@ -1,845 +0,0 @@
-
-<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>