udxcms 1.0.1

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

@@ -0,0 +1,896 @@
+<!--
+ * @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>