udxcms 1.0.10 → 1.0.12

package/dist/components/businessComponents/About.vue

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