udxcms 1.0.9 → 1.0.10

package/dist/components/businessComponents/About.vue

@@ -1,757 +0,0 @@
-<!--
- * @Descripttion:
- * @version:
- * @Author:
- * @Date: 2021-08-10 16:45:41
- * @LastEditors: Lewis
- * @LastEditTime: 2022-03-25 23:48:11
--->
-<template>
-    <div class='cms-about'>
-        <div class='first-page'>
-            <div class='first-box'>
-                <div class='first-title'>
-                    {{$t('cms_about_firstpage_item1_title')}}
-                </div>
-                <div class='first-content'>
-                    {{$t('cms_about_firstpage_item1_content')}}
-                </div>
-            </div>
-            <div class='first-img'>
-                <img :src="require('../../assets/img/cms/about-top.svg')" alt="" />
-            </div>
-        </div>
-        <div class='two-page'>
-            <cms-item :key='0' :content='cmsContentArr[0]'/>
-        </div>
-        <div class='three-page'>
-            <cms-item :key='1' :content='cmsContentArr[1]' img_p='left'/>
-        </div>
-        <div class='four-page'>
-            <div class='title'>{{$t('cms_about_fourpage_title')}}</div>
-            <div class='subtitle'>{{$t('cms_about_fourpage_subtitle')}}</div>
-            <div class='content'>{{$t('cms_about_fourpage_content', {symbol: tokenSymbol})}}</div>
-            <div class='bottom-text'>{{$t('cms_about_fourpage_bottomText')}}</div>
-            <div class='link'>
-                <span>{{$t('cms_about_fourpage_link')}}</span>
-                <svg-icon className="link-arrow" icon-class="arrow-right"></svg-icon>
-            </div>
-        </div>
-        <div class='three-page'>
-            <cms-item :key='2' :content='cmsContentArr[2]' img_p='right'/>
-        </div>
-        <div class='three-page' v-if='false'>
-            <cms-item :key='3' :content='cmsContentArr[3]' img_p='left'/>
-        </div>
-        <div class='three-page'>
-            <cms-item :key='4' :content='cmsContentArr[4]' img_p='right'/>
-        </div>
-        <div class='five-page' v-if='Object.keys(blockOverview).length'>
-            <div class='item'>
-                <div class='val'>{{blockOverview.mined_amount}}</div>
-                <div class='type-title'>{{$t('cms_home_firstpage_item7_mobi_mined', {coin: tokenSymbol})}}</div>
-            </div>
-            <div class='item'>
-                <div class='val'>{{blockOverview.reserve_fund}} {{blockOverview.reserve_fund_symbol}}</div>
-                <div class='type-title'>{{$t('cms_home_firstpage_item7_on_chain')}}</div>
-            </div>
-            <div class='item'>
-                <div class='val'>{{blockOverview.average_APY}}</div>
-                <div class='type-title'>{{$t('cms_home_firstpage_item7_average_apy', {coin: tokenSymbol})}}</div>
-            </div>
-        </div>
-        <div class='six-page'>
-            <div class='six-title'>{{$t('cms_about_sixpage_title')}}</div>
-            <div class='six-subtitle'>{{$t('cms_about_sixpage_subtitle')}}</div>
-            <div class='six-items' v-if='false'>
-                <div class='item'>TZJG</div>
-                <div class='item'></div>
-                <div class='item'></div>
-                <div class='item'></div>
-                <div class='item'></div>
-                <div class='item'></div>
-            </div>
-        </div>
-        <div class='six-page seven-page'>
-            <div class='six-title'>{{$t('cms_about_sevenpage_title')}}</div>
-            <div class='six-subtitle'>{{$t('cms_about_sevenpage_subtitle')}}</div>
-            <div class='seven-items' :style="{'grid-template-columns': 'repeat(' + (linkArr.length <= 3 ? linkArr.length : 3) + ', 23.75rem)'}">
-                <div class='item' v-for='(item, index) in linkArr' :key='index'>
-                    <img :src="item.logo" alt="" />
-                    <div class='content'>
-                        <div class='seven-item-title'>{{item.name}}</div>
-                        <div class='seven-item-subtitle'>{{item.description}}</div>
-                    </div>
-                </div>
-            </div>
-        </div>
-        <div class='six-page eight-page'>
-            <div class='six-title'>{{$t('cms_about_eightpage_title')}}</div>
-            <div class='six-subtitle'>{{$t('cms_about_eightpage_subtitle')}}</div>
-            <div class='eight-items'>
-                <div class='item'>
-                    <img :src="require('../../assets/component_img/index-common/nine-p-img-01.svg')" alt="">
-                    <div class='eight-title'>{{$t('cms_about_eightpage_content_item1')}}</div>
-                </div>
-                <div class='item'>
-                    <img :src="require('../../assets/component_img/index-common/nine-p-img-02.svg')" alt="">
-                    <div class='eight-title'>{{$t('cms_about_eightpage_content_item2')}}</div>
-                </div>
-                <div class='item'>
-                    <img :src="require('../../assets/component_img/index-common/nine-p-img-03.svg')" alt="">
-                    <div class='eight-title'>{{$t('cms_about_eightpage_content_item3')}}</div>
-                </div>
-                <div class='item'>
-                    <img :src="require('../../assets/component_img/index-common/nine-p-img-04.svg')" alt="">
-                    <div class='eight-title'>{{$t('cms_about_eightpage_content_item4', {symbol: tokenSymbol})}}</div>
-                </div>
-                <div class='line'></div>
-            </div>
-            <div class='link'>
-                <span>{{$t('cms_about_tenpage_link')}}</span>
-                <svg-icon className="link-arrow" icon-class="arrow-right"></svg-icon>
-            </div>
-        </div>
-        <!-- <div class='footer' >
-            <div class='logo'>
-                <img :src="logoSrc + '/' + lang + '/w72.png'" alt="">
-                <div class='subtitle'>{{$t('cms_about_footerpage_text')}}</div>
-            </div>
-            <div class='alink'>
-                <div class='item' v-for='(item, index) in linkArr' :key='index'>
-                    <a :href="item.site_url">
-                        <img :src="item.logo" alt="">
-                        <span class='content-span'>{{item.name}}</span>
-                    </a>
-                </div>
-            </div>
-        </div> -->
-    </div>
-</template>
-
-<script>
-    import conf from '../../config/index'
-    import { getBlocksOverview, fetchNetworkList } from '../../api/common'
-    export default {
-        name: 'About',
-        data(){
-            return {
-
-                linkArr: [],
-                lang: localStorage.getItem('language') || conf.baseLanguage,
-                blockOverview: {
-
-                },
-			    networkList: [],
-            }
-        },
-        computed: {
-            logoSrc() {
-                let path = this.$t('site_common_logo_base_url') + window.location.hostname
-                return path
-            },
-            tokenSymbol() {
-                const networkItem = this.networkList.find(item => item.layer.toUpperCase() === 'CPOS');
-                if (networkItem) {
-                    return networkItem.symbol || '';
-                }
-                return '';
-            },
-            cmsContentArr() {
-                return [
-                    {
-                        title: this.$t('cms_about_firstpage_item2_title'),
-                        subtitle: this.$t('cms_about_firstpage_item2_subtitle'),
-                        link: this.$t('cms_about_firstpage_item2_link'),
-                        img: require('../../assets/img/cms/two-pg.png')
-                    },
-                    {
-                        title: this.$t('cms_about_firstpage_item3_title', {site_name: this.$t('site_common_site_name')}),
-                        subtitle: this.$t('cms_about_firstpage_item3_subtitle', {site_name: this.$t('site_common_site_name'), symbol: this.tokenSymbol}),
-                        link: this.$t('cms_about_firstpage_item3_link'),
-                        img: require('../../assets/img/cms/three-pg.png')
-                    },
-                    {
-                        title: this.$t('cms_about_firstpage_item4_title'),
-                        subtitle: this.$t('cms_about_firstpage_item4_subtitle', {symbol: this.tokenSymbol}),
-                        link: this.$t('cms_about_firstpage_item4_link'),
-                        linkColor: 'rgba(18,185,0,1)',
-                        img: require('../../assets/img/cms/five-pg.png')
-                    },
-                    {
-                        title: this.$t('cms_about_firstpage_item5_title'),
-                        subtitle: this.$t('cms_about_firstpage_item5_subtitle', {symbol: this.tokenSymbol}),
-                        link: this.$t('cms_about_firstpage_item5_link'),
-                        img: require('../../assets/img/cms/six-pg.png'),
-                    },
-                    {
-                        title: this.$t('cms_about_firstpage_item6_title'),
-                        subtitle: this.$t('cms_about_firstpage_item6_subtitle', {symbol: this.tokenSymbol}),
-                        link: this.$t('cms_about_firstpage_item6_link'),
-                        img: require('../../assets/img/cms/seven-pg.png'),
-                    }
-                ];
-            },
-        },
-        watch: {
-            '$store.state.coin.commonTokenList'(val) {
-                if(val.length) {
-                     this.dealOverview()
-                }
-            },
-            '$store.state.wallet.wallet': {
-                handler(val) {
-                    if (val && Object.keys(val).length) {
-                        this.dealOverview()
-                    }
-                },
-                immediate: true
-            }
-        },
-        created() {
-            this.fetchNetworkList();
-        },
-        mounted() {
-            this.initLinkArr()
-            this.$nextTick(() => {
-                $Vue.$bus.$on('updateNavList', () => {
-                    this.initLinkArr()
-                })
-            })
-        },
-        methods: {
-            fetchNetworkList() {
-                fetchNetworkList().then(res => {
-                    // console.log('fetchNetworkList res:', res);
-                    this.networkList = res;
-                    this.dealOverview();
-                }).catch(e => e)
-            },
-            dealOverview() {
-                let symbolCoins = this.$store.getters['commonTokenDetail'](this.tokenSymbol, '0')
-                if (Object.keys(symbolCoins).length) {
-                    this.getBlocksOverview()
-                }
-            },
-            initLinkArr() {
-                this.linkArr = this.$t('media_common_media_channel') != 'media_common_media_channel' ? JSON.parse(this.$t('media_common_media_channel')) : []
-            },
-            getBlocksOverview() {
-                let currency = this.$store.state.user.currency || {}
-                let { name, symbol } = currency
-                let currency_symbol = symbol || '$'
-                let currency_name = name || 'USD'
-                getBlocksOverview({currency_symbol:currency_symbol, currency_name:currency_name}).then(res => {
-                    if (res.code == 200) {
-                        this.blockOverview = res.data || {}
-                    }
-                }).catch(e => e)
-            }
-        }
-    }
-</script>
-
-<style lang="less" scoped>
-    .title {
-        font-size: var(--h1);
-        line-height: 1;
-        font-family: FontSemiBold;
-        color: #ffffff;
-    }
-    .title-sm {
-        font-size: 16px;
-        line-height: 25px;
-        font-family: FontMedium;
-        color: #ffffff;
-        margin-top: 8px;
-    }
-    .cms-about {
-        .first-page {
-            display: flex;
-            padding: 0px 25px 48px;
-            justify-content: space-between;
-            flex-wrap: wrap;
-            background: rgba(23,20,27,1);
-            .first-box {
-                order: 2;
-                margin-top: .8em;
-                .first-title {
-                   .title;
-                }
-                .first-content {
-                    margin-top: 20px;
-                    .title-sm;
-                }
-            }
-            .first-img {
-                order: 1;
-                width: 100%;
-                height: auto;
-                img {
-                    width: 100%;
-                    height: auto;
-                }
-            }
-        }
-        .four-page {
-            margin-top: 40px;
-            width: 100%;
-            height: 561px;
-            background: url('../../assets/img/cms/four-h5-bg.png') no-repeat;
-            background-size: cover;
-            padding: 60px 20px;
-            .title {
-                text-align: center;
-                .title;
-            }
-            .subtitle {
-                margin-top: 16px;
-                text-align: center;
-                .title-sm;
-            }
-            .content {
-                .title-sm;
-                margin-top: 32px;
-                font-family: Font;
-                text-align: center;
-            }
-            .bottom-text {
-                .title;
-                margin-top: 16px;
-                font-size: 16px;
-            }
-            .link {
-                .title-sm;
-                margin-top: 16px;
-                font-family: Font;
-                text-align: center;
-                color: rgba(2,113,227,1);
-                .link-arrow {
-                    display: inline-block;
-                    vertical-align: -.2em;
-                    width: 1em;
-                    height: 1em;
-                }
-            }
-        }
-        .five-page {
-            margin-top: 40px;
-            background: linear-gradient(138deg,#e4035d 6%, #38adfd 100%);
-            padding: 62px 0;
-            .item {
-                width: 100%;
-                .val, .type-title {
-                    text-align: center;
-                }
-                .val {
-                    .title;
-                    font-size: 40px;
-                    line-height: 44px;
-                }
-                .type-title {
-                    .title-sm;
-                    margin-top: 10px;
-                    font-size: 16px;
-                    line-height: 20px;
-                }
-            }
-            .item:not(:last-child) {
-                margin-bottom: 85px;
-            }
-        }
-        .six-page {
-            margin-top: 15px;
-            padding: 38px 25px 15px;
-            .six-title {
-                .title;
-                color: var(--text-color-six);
-                text-align: center;
-            }
-            .six-subtitle {
-                .title-sm;
-                font-family: Font;
-                text-align: center;
-                color: var(--text-color-six);
-            }
-            .six-items {
-                margin-top: 30px;
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                grid-template-rows: 86px;
-                gap: 16px;
-                .item {
-                    width: 100%;
-                    height: 86px;
-                    background: rgba(250,250,250,1);
-                    border-radius: 12px;
-                    line-height: 86px;
-                    text-align: center;
-                    font-size: 24px;
-                }
-            }
-        }
-        .seven-page {
-            .seven-items {
-                margin-top: 36px;
-                .item {
-                    display: flex;
-                    background: #fbfbfb;
-                    box-shadow: 0px 4px 11px 0px rgba(1,1,1,0.10);
-                    border-radius: 20px;
-                    height: 88px;
-                    margin-bottom: 25px;
-                    align-items: center;
-                    padding-left: 30px;
-                    img {
-                        width: 48px;
-                        height: 48px;
-                    }
-                    .content {
-                        margin-left: 16px;
-                        .seven-item-title {
-                            .title-sm;
-                            color: var(--text-color-four);
-                            font-size: 20px;
-                            height: 28px;
-                            line-height: 28px;
-                        }
-                        .seven-item-subtitle {
-                            .title-sm;
-                            margin-top: 4px;
-                            height: 24px;
-                            line-height: 24px;
-                            font-size: 16px;
-                            color: var(--text-color-four);
-                        }
-                    }
-                }
-            }
-        }
-        .eight-page {
-            padding-bottom: 55px;
-            .eight-items {
-                margin-top:10px;
-                padding: 0 46px;
-                .item {
-                    margin-top: 40px;
-                    text-align: center;
-                    z-index: 1;
-                    img {
-                        width: 40px;
-                        height: 40px;
-                    }
-                    .eight-title {
-                        .title-sm;
-                        margin-top: 16px;
-                        text-align: center;
-                        color: var(--text-color-six);
-                        font-size: 18px;
-                        line-height: 26px;
-                    }
-                }
-            }
-            .link {
-                .title-sm;
-                margin-top: 50px;
-                font-family: Font;
-                text-align: center;
-                color: rgba(2,113,227,1);
-                .link-arrow {
-                    display: inline-block;
-                    vertical-align: -.2em;
-                    width: 1em;
-                    height: 1em;
-                }
-            }
-            .line {
-                display: none;
-                position: absolute;
-                width: 100%;
-                height: 2px;
-                opacity: 1;
-                background: #d1d1d1;
-                z-index: 0;
-            }
-        }
-        .footer {
-            padding: 40px;
-            background: rgba(0,0,0,1);
-            .logo {
-                text-align: center;
-                img {
-                    height: 32px;
-                    width: auto;
-                }
-                .subtitle {
-                    font-size: 16px;
-                    font-family: FontBold;
-                    text-align: center;
-                    color: #ffffff;
-                    line-height: 20px;
-                }
-            }
-            .alink {
-                margin-top: 46px;
-                display: grid;
-                grid-template-columns: repeat(2, 1fr);
-                .item {
-                    font-size: 14px;
-                    font-family: Font;
-                    text-align: left;
-                    color: #ffffff;
-                    line-height: 21px;
-                    a {
-                        display: flex;
-                        color: white;
-                        height: 40px;
-                        align-items: center;
-                    }
-                    img {
-                        width: 40px;
-                        height: 40px;
-                        display: inline-block;
-                        // filter: invert(1);
-                        margin-right: .5em;
-                    }
-                }
-            }
-        }
-    }
-    @media screen and (max-width: 770px) {
-
-    }
-    // @media screen and (min-width: 780px) {
-
-    // }
-    @media screen and (min-width: 1100px) {
-        .cms-about{
-            .first-page {
-                flex-wrap: nowrap;
-                padding: 0px 11.63rem 0 20rem;
-                .first-box {
-                    order: 1;
-                    width: 37.5rem;
-                    display: flex;
-                    align-content: center;
-                    flex-wrap: wrap;
-                    .first-title {
-                        font-size: 48px;
-                        // line-height: 3.25rem;
-                    }
-                    .first-content {
-                        margin-top: 2rem;
-                        // font-size: 1rem;
-                        // line-height: 1.56rem;
-                    }
-                }
-                .first-img {
-                    order: 2;
-                    width: 50rem;
-                    img {
-                        width: 100%;
-                        height: auto;
-                    }
-                }
-            }
-            .two-page {
-                padding-top: 3.13rem;
-            }
-            .four-page {
-                margin-top: 3.75rem;
-                width: 100%;
-                height: auto;
-                background: url('../../assets/img/cms/four-pc-bg.png') no-repeat;
-                background-size: cover;
-                padding:5.63rem 0 6rem 0;
-                .title {
-                    .title;
-                    text-align: center;
-                    // font-size: 3rem;
-                    // line-height: 3.31rem;
-                }
-                .subtitle {
-                    .title-sm;
-                    // margin-top: .75rem;
-                    text-align: center;
-                    // font-size: 1rem;
-                    // line-height: 1.5rem;
-                }
-                .content {
-                    .title-sm;
-                    width: 54.25rem;
-                    margin: 32px auto 0;
-                    font-family: Font;
-                    text-align: center;
-                    // font-size: 1rem;
-                    // line-height: 1.5rem;
-                }
-                .bottom-text {
-                    .title;
-                    margin-top: 1.5rem;
-                    // font-size: 1rem;
-                    // line-height: 1.5rem;
-                    text-align: center;
-                }
-                .link {
-                    .title-sm;
-                    margin-top: 1.5rem;
-                    font-family: Font;
-                    text-align: center;
-                    color: rgba(2,113,227,1);
-                    .link-arrow {
-                        display: inline-block;
-                        // vertical-align: -.2em;
-                        // width: 1em;
-                        // height: 1em;
-                    }
-                }
-            }
-            .five-page {
-                margin-top: 3.75rem;
-                display: grid;
-                background: linear-gradient(145deg,#eb097c 6%, #6148be 89%);
-                grid-template-columns: repeat(3, 28.75rem);
-                grid-template-rows: 15.5rem;
-                justify-content: center;
-                padding: 0;
-                .item {
-                    padding: 4.5rem 3.44rem;
-                    .val {
-                        .title;
-                        // font-size: 3.13rem;
-                        // line-height: 4.13rem;
-                        white-space: nowrap;
-                    }
-                    .type-title {
-                        .title-sm;
-                        margin-top: .63rem;
-                        // font-size: 1.38rem;
-                        // line-height: 2rem;
-                    }
-                }
-            }
-            .six-page {
-                margin-top: 0px;
-                padding: 100px 0;
-                .six-title {
-                    .title;
-                    color: var(--text-color);
-                    text-align: center;
-                    // font-size: 3rem;
-                }
-                .six-subtitle {
-                    .title-sm;
-                    margin-top: 1.25rem;
-                    font-family: Font;
-                    text-align: center;
-                    color: var(--text-color-six);
-                }
-                .six-items {
-                    margin-top: 80px;
-                    display: grid;
-                    grid-template-columns: repeat(5, 13.5rem);
-                    grid-template-rows: 7.5rem;
-                    gap: 30px;
-                    justify-content: center;
-                    .item {
-                        width: 100%;
-                        height: 7.5rem;
-                        border-radius: 1.25rem;
-                        // line-height: 7.5rem;
-                        text-align: center;
-                        // font-size: 1.88rem;
-                    }
-                }
-            }
-            .seven-page {
-                padding-top: 0px;
-                .seven-items {
-                    display: grid;
-                    margin-top: 5rem;
-                    grid-template-columns: repeat(3, 23.75rem);
-                    grid-template-rows: 5.5rem;
-                    gap:2rem 1.88rem;
-                    justify-content: center;
-                    .item {
-                        border-radius: 1.25rem;
-                    }
-                }
-            }
-            .eight-page {
-                padding-top: 0;
-                .eight-items {
-                    position: relative;
-                    display: grid;
-                    margin-top: 80px;
-                    padding: 0;
-                    grid-template-columns: repeat(4, 13.13rem);
-                    gap: 6.25rem;
-                    justify-content: center;
-                    .item {
-                        margin-top: 0;
-                        background: white;
-                        img {
-                            width: 3.5rem;
-                            height: 3.5rem;
-                        }
-                        .eight-title {
-                            margin-top: 2rem;
-                            // font-size: 1.25rem;
-                            // line-height: 1.75rem;
-                        }
-                    }
-                }
-                .link {
-                    margin-top: 3.75rem;
-                    text-align: center;
-                    .link-arrow {
-                        display: inline-block;
-                        // vertical-align: -.2em;
-                        // width: 1em;
-                        // height: 1em;
-                    }
-                }
-                .line {
-                    display: block;
-                    width: 50rem;
-                    left: 50%;
-                    transform: translate(-50%);
-                    z-index: 0;
-                    top: 2.25rem;
-                }
-            }
-            .footer {
-                display: flex;
-                padding: 40px 48px;
-                background: var(--footer-bg);
-                // padding: 4.38rem 0 6.25rem 16.25rem;
-                .logo {
-                    .subtitle {
-                        margin-top: 2rem;
-                        // font-size: 1rem;
-                        text-align: left;
-                        // line-height: 1.25rem;
-                    }
-                }
-                .alink {
-                    margin-top: 0px;
-                    margin-left: 18.75rem;
-                    display: grid;
-                    grid-template-columns: repeat(4, 1fr);
-                    .item {
-                        // font-size: 1.5rem;
-                        // line-height: 1.25rem;
-                        a {
-                            height: 2.5rem;
-                        }
-                        img {
-                            width: 2.5rem;
-                            height: 2.5rem;
-                            margin-right: .5em;
-                        }
-                    }
-                }
-            }
-        }
-    }
-</style>