udxcms 1.0.9 → 1.0.10

package/dist/components/pageComponents/h5/IndexCommon.vue

@@ -1,896 +0,0 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author:
- * @Date: 2021-05-29 16:04:29
- * @LastEditors: Lewis
- * @LastEditTime: 2021-11-25 20:26:03
--->
-<template>
-    <div class='first-page'>
-       <div class="home" id='first_page'>
-           <Top class="top" :active='active'/>
-            <div class="first-p" :style="{height: innerHeight + 'px'}">
-                <div class='top first-p-new-content'>
-                    <div class='title title_one'>{{$t('cms_home_firstpage_item1_title')}}</div>
-                    <div class='title title_two'>
-                        <span>{{$t('cms_home_firstpage_item1_subtitle')}}</span>
-                        <img :src="require('../../../assets/h5/firstPage/trade-firsrT-title.png')" alt="">
-                    </div>
-                    <div class='bottom_title'>
-                        {{$t('cms_home_firstpage_item1_bottom_text')}}
-                    </div>
-                </div>
-                <div class='bottom'>
-                    <!-- <div class='bottom_title'>
-                        {{$t('cms_home_firstpage_item1_bottom_text')}}
-                    </div> -->
-                    <div class='bottom_btns' @click="goUrl('me-trade-Favorite')">
-                        {{$t('cms_home_firstpage_item1_bottom_btn_text')}}
-                    </div>
-                    <div class='home-arrow'>
-                        <img :src="require('../../../assets/h5/firstPage/arrowDown.png')" class='home-arrow-img'/>
-                    </div>
-                </div>
-            </div>
-            <div class='two-p'>
-                <div class='title'>{{$t('cms_home_firstpage_item2_right_title')}}</div>
-                <div class='subtitle'>{{$t('cms_home_firstpage_item2_right_subtitle')}}</div>
-                <div class='btns-txt'>
-                    <button class='btn' @click="goUrl('trade')">{{$t('cms_home_firstpage_item2_right_btn_text')}}</button>
-                </div>
-                <div class='span-text'>
-                    {{$t('cms_home_firstpage_item2_right_span_text')}}
-                    <img :src="require('../../../assets/h5/firstPage/arrow-right.png')" alt="link-arrow" class='link-arrow'>
-                </div>
-                <div class='img'>
-                    <img :src="require('../../../assets/h5/firstPage/first-p-true-exchange.png')" alt="">
-                </div>
-            </div>
-            <div class='three-p'>
-                <div class='title'>{{$t('cms_home_firstpage_item2_left_title')}}</div>
-                <div class='subtitle'>{{$t('cms_home_firstpage_item2_left_subtitle')}}</div>
-                <div class='items'>
-                    <div class='item'>
-                        <img :src="require('../../../assets/h5/firstPage/Store.svg')" alt="">
-                        <div class='item-text'>
-                            <span>App Store</span>
-                            <img :src="require('../../../assets/h5/firstPage/arrow-right.png')" alt="link-arrow" class='link-arrow'>
-                        </div>
-                    </div>
-                    <div class='item'>
-                        <img :src="require('../../../assets/h5/firstPage/Google.svg')" alt="">
-                        <div class='item-text'>
-                            <span>Google Play</span>
-                            <!-- <svg-icon class="link-arrow" icon-class="arrow-right"></svg-icon> -->
-                            <img :src="require('../../../assets/h5/firstPage/arrow-right.png')" alt="link-arrow" class='link-arrow'>
-                        </div>
-                    </div>
-                    <div class='item'>
-                        <img :src="require('../../../assets/h5/firstPage/APK.svg')" alt="">
-                        <div class='item-text'>
-                            <span>APK Download</span>
-                            <img :src="require('../../../assets/h5/firstPage/arrow-right.png')" alt="link-arrow" class='link-arrow'>
-                        </div>
-                    </div>
-                </div>
-                <img :src="require('../../../assets/h5/firstPage/first-p-link.png')" alt="" class='bottom-img' />
-            </div>
-            <div class='four-p'>
-                <div class='title'>{{$t('cms_home_firstpage_item3_right_title')}}</div>
-                <div class='subtitle'>{{$t('cms_home_firstpage_item3_right_subtitle')}}</div>
-                <img :src="require('../../../assets/h5/firstPage/two-left-img.png')" alt="" class='bottom-img'>
-            </div>
-            <div class='five-p'>
-                <div class='title'>{{$t('cms_home_firstpage_item4_title', {coin: 'Mobi'})}}</div>
-                <div class='subtitle'>{{$t('cms_home_firstpage_item4_mobi_dex', {coin: 'MOBI'})}}</div>
-                <div class='item'>
-                    <div class='item-title'>{{$t('cms_home_firstpage_item4_gas_fee')}}</div>
-                    <div class='item-mobi-val'>~0.01 USD</div>
-                    <div class='item-mobi-old-val'>~40 USD</div>
-                </div>
-                <div class='item'>
-                    <div class='item-title'>{{$t('cms_home_firstpage_item4_trading_efficiency')}}</div>
-                    <div class='item-mobi-val'>~2,000,000 TPS</div>
-                    <div class='item-mobi-old-val'>~10 TPS</div>
-                </div>
-                <div class='item'>
-                    <div class='item-title'>{{$t('cms_home_firstpage_item4_trading_yield')}}</div>
-                    <div class='item-mobi-val'>~ 1000%</div>
-                    <div class='item-mobi-old-val'>~ 100%</div>
-                </div>
-            </div>
-            <div class='six-p'>
-                <div class='title'>{{$t('cms_home_firstpage_item5_title')}}</div>
-                <div class='center-img'>
-                    <img :src="require('../../../assets/h5/firstPage/first-p-six.png')" alt="">
-                </div>
-                <div class='items'>
-                    <img :src="require('../../../assets/h5/firstPage/firstT-03.png')" alt="">
-                    <img :src="require('../../../assets/h5/firstPage/firstT-01.png')" alt="">
-                    <img :src="require('../../../assets/h5/firstPage/firstT-02.png')" alt="">
-                </div>
-                <div class='btns'>
-                    <button @click="goUrl('trade')">{{$t('cms_home_firstpage_item5_btn_text')}}</button>
-                </div>
-                <div class='span-text'>
-                    <span>{{$t('cms_home_firstpage_item5_span_text')}}</span>
-                    <img :src="require('../../../assets/h5/firstPage/arrow-right.png')" alt="link-arrow" class='link-arrow'>
-                </div>
-            </div>
-            <div class='seven-p'>
-                <div class='top'>
-                    <div class='logo'>
-                        <img :src="require('../../../assets/h5/firstPage/logo.svg')" alt="">
-                    </div>
-                    <div class='title'>{{$t('cms_home_firstpage_item6_title')}}</div>
-                </div>
-                <div class='center'>
-                    <div class='title'>{{$t('cms_home_firstpage_item6_left_title')}}</div>
-                    <div class='subtitle'>{{$t('cms_home_firstpage_item6_left_sutitle')}}</div>
-                </div>
-                <div class='span-text'>
-                    <span>{{$t('cms_home_firstpage_item6_span_text')}}</span>
-                    <img :src="require('../../../assets/h5/firstPage/arrow-right.png')" alt="link-arrow" class='link-arrow'>
-                </div>
-                <img :src="require('../../../assets/h5/firstPage/six-p-img-01.svg')" alt="" class='bottom-img' />
-            </div>
-            <div class='eight-p'>
-                <div class='center'>
-                    <div class='title'>{{$t('cms_home_firstpage_item6_right_title')}}</div>
-                    <div class='subtitle'>{{$t('cms_home_firstpage_item6_right_subtitle')}}</div>
-                </div>
-                <div class='span-text'>
-                    <span>{{$t('cms_home_firstpage_item6_span_text')}}</span>
-                    <img :src="require('../../../assets/h5/firstPage/arrow-right.png')" alt="link-arrow" class='link-arrow'>
-                </div>
-                <img :src="require('../../../assets/h5/firstPage/six-p-img-02.png')" alt="" class='bottom-img' />
-            </div>
-            <div class='nine-p' v-if='Object.keys(blockOverview).length'>
-                <div class='item'>
-                    <div class='val'>{{blockOverview.mined_amount}}</div>
-                    <div class='title'>{{$t('cms_home_firstpage_item7_mobi_mined', {coin: 'Mobi'})}}</div>
-                </div>
-                <div class='item'>
-                    <div class='val'>{{blockOverview.reserve_fund}} {{blockOverview.reserve_fund_symbol}}</div>
-                    <div class='title'>{{$t('cms_home_firstpage_item7_on_chain')}}</div>
-                </div>
-                <div class='item'>
-                    <div class='val'>{{blockOverview.average_APY}}</div>
-                    <div class='title'>{{$t('cms_home_firstpage_item7_average_apy', {coin: 'Mobi'})}}</div>
-                </div>
-            </div>
-            <div class='ten-p'>
-                <div class='center'>
-                    <div class='title'>{{$t('cms_home_firstpage_item8_title')}}</div>
-                    <div class='subtitle'>{{$t('cms_home_firstpage_item8_subtitle')}}</div>
-                </div>
-                <div class='items'>
-                    <a class='item' v-for='(item, index) in linkArr' :key='index' :href='item.site' target="_blank">
-                        <img :src="item.logo" alt="">
-                        <div class='content'>
-                            <div class='item-title'>{{item.name}}</div>
-                            <div class='item-subtitle'>{{item.description}}</div>
-                        </div>
-                    </a>
-                </div>
-            </div>
-            <div class='eleven-p'>
-                <div class='center'>
-                    <div class='title'>{{$t('cms_home_firstpage_item9_title')}}</div>
-                    <div class='subtitle'>{{$t('cms_home_firstpage_item9_subtitle')}}</div>
-                </div>
-                <div class='items'>
-                    <div class='item'>
-                        <img :src="require('../../../assets/h5/firstPage/nine-p-img-01.svg')" alt="">
-                        <div class='item-text'>{{$t('cms_home_firstpage_item9_wallet_text1')}}</div>
-                    </div>
-                    <div class='item'>
-                        <img :src="require('../../../assets/h5/firstPage/nine-p-img-02.svg')" alt="">
-                        <div class='item-text'>{{$t('cms_home_firstpage_item9_wallet_text2')}}</div>
-                    </div>
-                    <div class='item'>
-                        <img :src="require('../../../assets/h5/firstPage/nine-p-img-03.svg')" alt="">
-                        <div class='item-text'>{{$t('cms_home_firstpage_item9_wallet_text3')}}</div>
-                    </div>
-                    <div class='item'>
-                        <img :src="require('../../../assets/h5/firstPage/nine-p-img-04.svg')" alt="">
-                        <div class='item-text'>{{$t('cms_home_firstpage_item9_wallet_text4')}}</div>
-                    </div>
-                </div>
-                <div class='span-text'>
-                    <span>{{$t('cms_home_firstpage_item9_btn_text')}}</span>
-                    <img :src="require('../../../assets/h5/firstPage/arrow-right.png')" alt="link-arrow" class='link-arrow'>
-                </div>
-            </div>
-            <div class='twelve-p'>
-                <div class='logo'>
-                    <img class="icon-logo" v-src="'w60.png'" alt="">
-                </div>
-                <div class='smtitle'>{{$t('cms_home_firstpage_item10_logo_text')}}</div>
-                <div class='link-items'>
-                    <a class='item' v-for="(item, index) in linkArr" :key='index' @click="goOtherUrl(item.site)">
-                        <img :src="item.logo" alt="">
-                        <span>{{item.name}}</span>
-                    </a>
-                </div>
-            </div>
-        </div>
-    </div>
-</template>
-
-<script>
-    import { getBlocksOverview } from '../../../api/h5/common'
-    export default {
-        name: 'first-page',
-        data() {
-            return {
-                linkArr: [],
-                scrollTop: 200,
-                active: false,
-                blockOverview: {},
-                innerHeight: window.innerHeight
-            }
-        },
-        watch: {
-            '$store.state.wallet.wallet':{
-                handler: function() {
-                    this.dealOverview()
-                },
-                immediate: true
-            }
-        },
-        mounted() {
-            this.linkArr = this.$t('media_common_media_channel') != 'media_common_media_channel' ? JSON.parse(this.$t('media_common_media_channel')) : []
-            let fn = this.initScroll()
-            let firstPage = document.getElementById('first_page')
-            firstPage.addEventListener("touchmove", fn)
-        },
-        methods: {
-            initScroll() {
-                let firstPage = document.getElementById('first_page')
-                return _.throttle(()=>{
-                    let scrollT = firstPage.scrollTop;
-                    if(scrollT >= this.scrollTop) {
-                        this.active = true;
-                    } else {
-                        this.active = false;
-                    }
-                },50)
-            },
-            goUrl(name) {
-                this.$router.push({
-                    name: name
-                })
-            },
-            goOtherUrl(url) {
-                window.open(url, '_target')
-            },
-            dealOverview() {
-               let dealCoin = this.$store.getters['commonTokenDetail']('MOBI')
-               if (Object.keys(dealCoin).length) this.getBlocksOverview()
-            },
-            getBlocksOverview() {
-                let currency_symbol = this.$store.state.selCurrencySymbol
-                let currency_name = this.$store.state.selCurrency
-                getBlocksOverview({currency_symbol:currency_symbol, currency_name:currency_name}).then(res => {
-                    if (res && res.code == 200) {
-                        this.blockOverview = res.data || {}
-                    }
-                }).catch(e => e)
-            }
-        }
-    }
-</script>
-
-<style lang="less" scoped>
-    .home {
-        position: relative;
-        width: 100vw;
-        height: 100vh;
-        z-index:1;
-        background: #F4F4F8;
-        // background-image: url('~@/assets/img/logo.png');
-        background-size: contain;
-        background-repeat:no-repeat;
-        text-align: center;
-        overflow-y: auto;
-        overflow-x: hidden;
-        .first-p {
-            position: relative;
-            height: 100vh;
-            padding-top: 72px;
-            background-repeat: no-repeat;
-            background-size: cover;
-            background-image: url('../../../assets/h5/firstPage/first-bg.png');
-            background-position: center;
-            display: flex;
-            flex-direction: column;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            .top {
-                padding-top: 20px;
-            }
-            .first-p-new-content {
-                flex: 1;
-                width: 100%;
-                display: flex;
-                align-content: center;
-                flex-wrap: wrap;
-                justify-content: center;
-                .title_one {
-                    margin-top: -40px;
-                    text-align: center;
-                }
-                .title_two {
-                    margin-top: -10px;
-                }
-                .bottom_title {
-                    padding: 0 40px;
-                    margin-top: 18px;
-                    font-size: 28px;
-                    font-family: FontSemiBold;
-                    text-align: center;
-                    color: #ffffff;
-                    line-height: 36px;
-                }
-            }
-            .title {
-                font-size: 16px;
-                font-family: FontSemiBold;
-                text-align: center;
-                color: #ffffff;
-                line-height: 28px;
-                margin-bottom: 4px;
-                img {
-                    margin-left: 10px;
-                    display: inline-block;
-                    height: 1.05em;
-                    width: auto;
-                }
-            }
-            .title_one {
-                color:rgba(255, 255, 255, 1);
-            }
-            .title_two span {
-                font-size: 22px;
-            }
-            .bottom {
-                position: relative;
-                padding-bottom: 58px;
-                .bottom_btns {
-                    margin:0 auto;
-                    width: 336px;
-                    height: 40px;
-                    line-height: 40px;
-                    font-size: 14px;
-                    font-family: FontSemiBold;
-                    text-align: center;
-                    color: #ffffff;
-                    background-repeat: no-repeat;
-                    background-size: cover;
-                    background-image: url('../../../assets/h5/firstPage/first-btns-bg.svg');
-                }
-                .bottom_title {
-                    margin: 26px auto;
-                    width: 234px;
-                    font-size: 20px;
-                    font-family: Font;
-                    text-align: center;
-                    color: #ffffff;
-                    line-height: 32px;
-                }
-                .home-arrow {
-                    position: absolute;
-                    z-index: 2;
-                    width: 100%;
-                    text-align: center;
-                    bottom: 15px;
-                    img {
-                        display: inline-block;
-                        width: 16px;
-                        // transition: all ease-in-out 1.5s;
-                        animation: down-up 1s ease-in-out infinite alternate;
-                        cursor: pointer;
-                    }
-                }
-            }
-        }
-        .two-p {
-            margin: 15px auto;
-            height: 520px;
-            background: white;
-            .title {
-                padding-top: 40px;
-                font-size: 32px;
-                font-family: FontSemiBold;
-                text-align: center;
-                color: var(--text-color-six);
-                line-height: 36px;
-            }
-            .subtitle {
-                margin-top: 10px;
-                font-size: 16px;
-                font-family: Font;
-
-                text-align: center;
-                color: var(--text-color-six);
-                line-height: 25px;
-            }
-            .btns-txt {
-                text-align: center;
-                margin-top: 20px;
-                .btn {
-                    width: 120px;
-                    height: 36px;
-                    border-radius: 18px;
-                    line-height: 36px;
-                    text-align: center;
-                    font-size: 16px;
-                    font-family: Font;
-
-                    color: #ffffff;
-                    background: #0271E3;
-                }
-            }
-            .span-text {
-                margin-top: 16px;
-                font-size: 16px;
-                font-family: Font;
-
-                text-align: center;
-                color: #2488e8;
-            }
-            .img {
-                margin-top: 70px;
-                text-align: center;
-                img {
-                    display: inline-block;
-                    width: 310px;
-                    height: auto;
-                    transform: scale(1.2);
-                }
-            }
-        }
-        .three-p {
-            margin: 15px auto;
-            // height: 520px;
-            background: var(--text-color);
-            .title {
-                padding-top: 40px;
-                font-size: 32px;
-                font-family: FontSemiBold;
-                text-align: center;
-                color: #ffffff;
-                line-height: 36px;
-            }
-            .subtitle {
-                margin-top: 10px;
-                font-size: 16px;
-                font-family: Font;
-
-                text-align: center;
-                color: #ffffff;
-                line-height: 25px;
-            }
-            .items {
-                margin-top: 30px;
-                display: flex;
-                justify-content: center;
-                .item {
-                    text-align: center;
-                    margin-right: 26px;
-                    img {
-                        display: inline-block;
-                        width: 32px;
-                        height: 32px;
-                    }
-                    .item-text {
-                        margin-top: 12px;
-                        font-size: 14px;
-                        font-family: Font;
-
-                        text-align: center;
-                        color: #2488e8;
-                        line-height: 20px;
-                    }
-
-                }
-                .item:last-child {
-                    margin-right: 0;
-                }
-            }
-            .bottom-img {
-                margin: 0 auto;
-                margin-top: 85px;
-                height: 226px;
-                width: auto;
-            }
-        }
-        .four-p {
-            margin: 15px auto;
-            margin-bottom: 0;
-            background: white;
-            padding: 0 30px 20px 30px;
-            .title {
-                padding-top: 40px;
-                font-size: 32px;
-                font-family: FontSemiBold;
-                text-align: center;
-                color: var(--text-color-six);
-                line-height: 40px;
-            }
-            .subtitle {
-                margin-top: 20px;
-                font-size: 16px;
-                font-family: Font;
-
-                text-align: center;
-                color: var(--text-color-six);
-                line-height: 25px;
-            }
-            .bottom-img {
-                margin: 20px auto;
-                margin-top: 38px;
-                width: 300px;
-                height: auto;
-                transform: scale(1.36);
-            }
-        }
-        .five-p {
-            background: white;
-            .title {
-                // height: 160px;
-                background: #f4f4f8;
-                padding: 40px 40px;
-                font-size: 32px;
-                font-family: FontSemiBold;
-                text-align: center;
-                color: var(--text-color-six);
-                line-height: 40px;
-                word-break: break-word;
-            }
-            .subtitle {
-                padding:60px 0;
-                font-size: 32px;
-                font-family: FontSemiBold;
-                text-align: center;
-                color: #151e27;
-                line-height: 32px;
-            }
-            .item {
-                padding-bottom: 60px;
-                .item-title {
-                    font-size: 16px;
-                    font-family: FontMedium;
-                    text-align: center;
-                    color: var(--text-color-six);
-                    line-height: 25px;
-                }
-                .item-mobi-val {
-                    margin-top: 12px;
-                    font-size: 32px;
-                    font-family: FontSemiBold;
-                    text-align: center;
-                    color: #151e27;
-                    line-height: 32px;
-                }
-                .item-mobi-old-val {
-                    margin-top: 12px;
-                    font-size: 16px;
-                    font-family: Font;
-
-                    text-decoration:  line-through;
-                    text-align: center;
-                    color: var(--text-color-placeholder);
-                }
-            }
-        }
-        .six-p {
-            margin-top: 15px;
-            background: var(--text-color);
-            .title {
-                padding: 40px 44px;
-                font-size: 32px;
-                font-family: FontSemiBold;
-                text-align: center;
-                color: #ffffff;
-                line-height: 40px;
-            }
-            .center-img {
-                text-align: center;
-                img {
-                    display: inline-block;
-                    width: 320px;
-                    height: auto;
-                }
-            }
-            .items {
-                margin-top: 36px;
-                display: flex;
-                justify-content: center;
-                img {
-                    margin-right: 40px;
-                    width: 48px;
-                    height: 48px;
-                }
-                img:last-child {
-                    margin-right: 0;
-                }
-            }
-            .btns {
-                text-align: center;
-                margin-top: 40px;
-                button {
-                    width: 120px;
-                    height: 36px;
-                    border-radius: 18px;
-                    line-height: 36px;
-                    font-size: 16px;
-                    font-family: Font;
-
-                    text-align: center;
-                    color: #ffffff;
-                    background: #0271E3;
-
-                }
-            }
-            .span-text {
-                padding: 20px 0 36px 0;
-                text-align: center;
-                font-size: 16px;
-                font-family: Font;
-
-                color: #2488e8;
-                span {
-                    font-size: 16px;
-                }
-            }
-        }
-        .seven-p {
-            background: var(--text-color);
-            .top {
-                padding: 0 46px;
-                background: white;
-                text-align: center;
-                .logo {
-                    text-align: center;
-                    padding-top: 60px;
-                    img {
-                        display: inline-block;
-                        width: 56px;
-                        height: 56px;
-                    }
-                }
-                .title {
-                    padding: 30px 0 60px 0;
-                    font-size: 32px;
-                    font-family: FontSemiBold;
-                    text-align: center;
-                    color: #1d1d1d;
-                    line-height: 40px;
-                }
-            }
-            .center {
-                background: var(--text-color);
-                .title {
-                    padding-top: 40px;
-                    font-size: 32px;
-                    font-family: FontSemiBold;
-                    text-align: center;
-                    color: #F4F4F8;
-                }
-                .subtitle {
-                    margin-top: 12px;
-                    padding: 0 30px;
-                    font-size: 16px;
-                    font-family: Font;
-
-                    text-align: center;
-                    color: #F4F4F8;
-                }
-            }
-            .span-text {
-                margin-top: 20px;
-                font-size: 16px;
-                font-family: Font;
-
-                text-align: center;
-                color: #2488e8;
-            }
-            .bottom-img {
-                margin-top: 28px;
-                width: 100%;
-                height: auto;
-            }
-        }
-
-        .eight-p, .ten-p, .eleven-p {
-            margin-top: 15px;
-            background: white;
-            // padding: 0 30px;
-            .center {
-                padding: 0 30px;
-                .title {
-                    padding-top: 40px;
-                    font-size: 32px;
-                    font-family: FontSemiBold;
-                    text-align: center;
-                    color: var(--text-color-six);
-                    line-height: 36px;
-                }
-                .subtitle {
-                    margin-top: 12px;
-                    text-align: center;
-                    font-size: 16px;
-                    font-family: Font;
-
-                    text-align: center;
-                    color: var(--text-color-six);
-                    line-height: 25px;
-                }
-            }
-            .span-text {
-                margin-top: 20px;
-                font-size: 16px;
-                font-family: Font;
-
-                text-align: center;
-                color: #2488e8;
-            }
-            .bottom-img {
-                margin-top: 28px;
-                width: 100%;
-                height: auto;
-            }
-        }
-        .eight-p {
-            background: var(--text-color);
-            .center .title, .center .subtitle {
-                color: white;
-            }
-        }
-        .nine-p {
-            margin-top: 15px;
-            background: linear-gradient(138deg,#e4035d 6%, #38adfd 100%);
-            padding: 62px 0;
-            text-align: center;
-            .item:not(:last-child) {
-                margin-bottom: 85px;
-            }
-            .item {
-                .val {
-                    font-size: 40px;
-                    font-family: FontSemiBold;
-                    text-align: center;
-                    color: #ffffff;
-                    line-height: 44px;
-                }
-                .title {
-                    margin-top: 10px;
-                    font-size: 16px;
-                    font-family: FontMedium;
-                    text-align: center;
-                    color: #ffffff;
-                    line-height: 20px;
-                }
-            }
-        }
-        .ten-p {
-            padding-bottom: 15px;
-            .items {
-                margin-top: 36px;
-                text-align: center;
-                .item {
-                    margin-bottom: 25px;
-                    width: 325px;
-                    height: 88px;
-                    background: #ffffff;
-                    border-radius: 20px;
-                    box-shadow: 0px 4px 11px 0px rgba(1,1,1,0.10);
-                    display: inline-flex;
-                    padding: 20px;
-                    img {
-                        width: 48px;
-                        height: 48px;
-                    }
-                    .content {
-                        margin-left: 16px;
-                        font-size: 20px;
-                        font-family: FontMedium;
-                        text-align: left;
-                        color: var(--text-color-four);
-                        line-height: 24px;
-                    }
-                    .item-subtitle {
-                        margin-top: 4px;
-                        font-size: 16px;
-                    }
-                }
-            }
-        }
-        .eleven-p {
-            .items {
-                margin-top: 48px;
-                .item {
-                    text-align: center;
-                    margin-bottom: 40px;
-                    img {
-                        display: inline-block;
-                        width: 40px;
-                        height: 40px;
-                    }
-                    .item-text {
-                        margin: 0 auto;
-                        width: 200px;
-                        margin-top: 16px;
-                        font-size: 18px;
-                        font-family: FontMedium;
-                        text-align: center;
-                        color: var(--text-color-six);
-                    }
-                }
-            }
-            .span-text {
-                padding: 10px 0 40px 0;
-            }
-        }
-        .twelve-p {
-            margin-top: 15px;
-            background: #000000;
-            .logo {
-                padding-top: 40px;
-                text-align: center;
-                img {
-                    display: inline-block;
-                    height: 26px;
-                    width: auto;
-                }
-            }
-            .smtitle {
-                margin-top: 20px;
-                font-size: 16px;
-                font-family: FontSemiBold;
-                text-align: center;
-                color: #ffffff;
-                line-height: 20px;
-            }
-            .link-items {
-                padding: 40px;
-                display: flex;
-                justify-content: space-between;
-                flex-wrap: wrap;
-                align-items: flex-start;
-                .item {
-                    display: flex;
-                    width: 50%;
-                    text-align: center;
-                    margin-bottom: 16px;
-                    font-size: 14px;
-                    font-family: Font;
-
-                    color: rgba(255, 255, 255, 0.64);
-                    align-items: center;
-                    img {
-                        width: 32px;
-                        height: 32px;
-                        margin-right: .2em;
-                        // filter: invert(1);
-                    }
-                }
-            }
-        }
-    }
-    .link-arrow {
-        display: inline-block;
-        color: #2488E8;
-        height: .8em !important;
-        width: auto !important;
-        margin-left: .1em;
-        // vertical-align: -.1em;
-    }
-    @keyframes down-up {
-        from { transform:translate3d(0, 10px, 0) }
-        to { transform:translate3d(0, 0px, 0) }
-    }
-</style>