udxcms 1.0.1

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

@@ -0,0 +1,491 @@
+<template>
+    <div class="pointx-container">
+        <!-- Header -->
+        <div class="visible-pc">
+			<Header/>
+		</div>
+		<div class="visible-h5">
+			<Top class="top" />
+		</div>
+        <!-- top -->
+        <div class='pointx-top container'>
+            <div class='pointx-desc'>
+                <img src="../../../assets/component_img/index-pointx/PointX.png" alt="" />
+                <div class='pointx-desc-tips'>Onboarding the next billion users</div>
+            </div>
+            <div class='pointx-top-btn'>
+                <a-button class='explore'>explore</a-button>
+                <a-button class='create'>create</a-button>
+            </div>
+        </div> 
+
+        <div class='pointx-why container'>
+            <div class='pointx-why-title'>WHY POINTX?</div>
+            <div class='pointx-why-items'>
+                <div  class='pointx-why-item'>
+                    <img src="../../../assets/component_img/index-pointx/why-1.png" alt="">
+                    <div class='desc'>zkSBT Privacy Protection (zkDID/zkSBT)</div>
+                </div>
+                <div  class='pointx-why-item'>
+                    <img src="../../../assets/component_img/index-pointx/why-2.png" alt="">
+                    <div class='desc'>Professional on-chain behavior verification</div>
+                </div>
+                <div  class='pointx-why-item'>
+                    <img src="../../../assets/component_img/index-pointx/why-3.png" alt="">
+                    <div class='desc'>Customized Service</div>
+                </div>
+                <div  class='pointx-why-item'>
+                    <img src="../../../assets/component_img/index-pointx/why-4.png" alt="">
+                    <div class='desc'>Up to 10 Off-chain verified tunnels （e.g. TG/TW/DC/Facebook/Ins）</div>
+                </div>
+            </div>
+        </div>
+
+        <div class='pointx-trending container'>
+            <div class='p-x-trending-top'>
+                <div class='p-x-title'>TRENDING CAMPAIGNS</div>
+                <div class='p-x-view-all' @click="checkDetail('campaign')">
+                    <span>View All</span>
+                    <img src="../../../assets/component_img/index-pointx/arrow.png" alt="">
+                </div>
+            </div>
+            <div class='p-x-trending-items'>
+                <campaignsItem v-for='(item, index) in campaignList' :key='index' :campaignsData='item'></campaignsItem>
+            </div>
+        </div>
+
+        <div class='pointx-discover container'>
+            <div class='p-x-discover-top'>
+                <div class='p-x-title'>Discover Spaces</div>
+                <div class='p-x-view-all' @click="checkDetail('space')">
+                    <span>View All</span>
+                    <img src="../../../assets/component_img/index-pointx/arrow.png" alt="">
+                </div>
+            </div>
+            <div class='p-x-discover-items'>
+                <spaceItem v-for="(item, index) in spaceList" :key='index' :spaceData='item'></spaceItem>
+            </div>
+        </div>
+
+        <div class='pointx-roadmap container'>
+            <div class='pointx-roadmap-title'>
+                <span>ROADMAP</span>
+                <div class='pointx-roadmap-line'></div>
+            </div>
+            <div class='pointx-roadmap-img'>
+                <img src="../../../assets/component_img/index-pointx/roadmap.png" alt="">
+            </div>
+        </div>
+
+        <div class='pointx-ecosystems container'>
+            <div class='p-x-discover-top'>
+                <div class='p-x-title'>ECOSYSTEMS</div>
+                <div class='p-x-view-all'>
+                    <span>View All</span>
+                    <img src="../../../assets/component_img/index-pointx/arrow.png" alt="">
+                </div>
+            </div>
+            <div class='p-x-discover-content'>
+                <div :class="['container', 'p-x-discover-section', backerList.length > 6 && partnerMode == 'scroll' && 'p-x-discover-scroll']">
+                    <div class='partner-box' v-if="partnerMode == 'scroll' && backerList.length > 6">
+                        <Partnermedias :partnerList='backerList' />
+                    </div>
+                    <!-- <div class='partner-box' v-if="partnerMode == 'scroll' && backerList.length > 6">
+                        <Partnermedias :partnerList='backerList.slice(-Math.round(backerList.length / 2))' direction='right' />
+                    </div> -->
+                    <div class="backer-wrapper" v-if="partnerMode != 'scroll' || backerList.length <= 6">
+                        <div v-for="(item, index) in backerList" :key="index" class="backer-item">
+                            <a :href="item.site" target="_blank">
+                                <img class="img1" :src="item.logo" alt="" />
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <FooterPointx class='pointx-footer'/>
+    </div>
+</template>
+
+<script>
+import campaignsItem from "./component/campaigns-item.vue"
+import spaceItem from "./component/space-item.vue"
+export default {
+    name: "home",
+    components: {
+        campaignsItem,
+        spaceItem
+    },
+    data() {
+        return {
+            partnerMode: '',
+            backerList: [],
+            campaignList: [{
+                title: 'AANN.ai',
+                subtitle: 'AANN.ai - 10 000 000 $A...',
+                bg: require('../../../assets/component_img/index-pointx/Subtract0.png'),
+                icon: require('../../../assets/component_img/index-pointx/hand-icon.png'),
+                tags: [{
+                    name: 'whitellst',
+                    active: true
+                }, {
+                    name: '100 Points',
+                    active: false
+                }],
+                logoColor: '#FFB41A'
+            },{
+                title: 'AANN.ai',
+                subtitle: 'AANN.ai - 10 000 000 $A...',
+                bg: require('../../../assets/component_img/index-pointx/Subtract1.png'),
+                icon: require('../../../assets/component_img/index-pointx/hand-icon.png'),
+                tags: [{
+                    name: 'CAP',
+                    active: true
+                }],
+                logoColor: '#AA76FF'
+            }, {
+                title: 'AANN.ai',
+                subtitle: 'AANN.ai - 10 000 000 $A...',
+                bg: require('../../../assets/component_img/index-pointx/Subtract2.png'),
+                icon: require('../../../assets/component_img/index-pointx/hand-icon.png'),
+                tags: [{
+                    name: 'NFT',
+                    active: true
+                }],
+                logoColor: '#5C6D1F'
+            }, {
+                title: 'AANN.ai',
+                subtitle: 'AANN.ai - 10 000 000 $A...',
+                bg: require('../../../assets/component_img/index-pointx/Subtract3.png'),
+                icon: require('../../../assets/component_img/index-pointx/hand-icon.png'),
+                tags: [{
+                    name: '100 USDT',
+                    active: true
+                }],
+                logoColor: '#EDFF41',
+                starColor: '#000'
+            }],
+            spaceList: [{
+                title: 'SyncSwap',
+                bg: require('../../../assets/component_img/index-pointx/space-bg.png'),
+                logo: require('../../../assets/component_img/index-pointx/space-1.png'),
+                tags: [{
+                    name: 'Defi',
+                    active: true
+                }]
+            },{
+                title: 'Manta Network',
+                bg: require('../../../assets/component_img/index-pointx/space-bg.png'),
+                logo: require('../../../assets/component_img/index-pointx/space-2.png'),
+                tags: [{
+                    name: 'Infrastructure',
+                    active: true
+                }]
+            }, {
+                title: 'SyncSwap',
+                bg: require('../../../assets/component_img/index-pointx/space-bg.png'),
+                logo: require('../../../assets/component_img/index-pointx/space-3.png'),
+                tags: [{
+                    name: 'Other',
+                    active: true
+                }]
+            },{
+                title: 'SyncSwap',
+                bg: require('../../../assets/component_img/index-pointx/space-bg.png'),
+                logo: require('../../../assets/component_img/index-pointx/space-4.png'),
+                tags: [{
+                    name: 'Other',
+                    active: true
+                }]
+            },{
+                title: 'SyncSwap',
+                bg: require('../../../assets/component_img/index-pointx/space-bg.png'),
+                logo: require('../../../assets/component_img/index-pointx/space-5.png'),
+                tags: [{
+                    name: 'Other',
+                    active: true
+                }]
+            }],
+            partnerMode: 'scroll'
+        }
+    },
+    created() {
+        this.getOurBackerList();
+    },
+    computed: {
+        // partnerMode() {
+        //     return this.$store.state.partnerMode
+        // }
+    },
+    methods: {
+        getOurBackerList() {
+            // this.backerList = this.$t("media_common_backer_channel") !=  "media_common_backer_channel" ?  JSON.parse(this.$t("media_common_backer_channel")) : [];
+            this.backerList = [{
+                site: 'https://polygon.technology/home',
+                logo: require('../../../assets/component_img/index-pointx/polygon.png'),
+            }, {
+                site:  'https://solanamobile.com/',
+                logo: require('../../../assets/component_img/index-pointx/solana.png'),
+            },{
+                site: 'https://polygon.technology/home',
+                logo: require('../../../assets/component_img/index-pointx/polygon.png'),
+            },{
+                site:  'https://solanamobile.com/',
+                logo: require('../../../assets/component_img/index-pointx/solana.png'),
+            },{
+                site: 'https://polygon.technology/home',
+                logo: require('../../../assets/component_img/index-pointx/polygon.png'),
+            }, {
+                site:  'https://solanamobile.com/',
+                logo: require('../../../assets/component_img/index-pointx/solana.png'),
+            },{
+                site: 'https://polygon.technology/home',
+                logo: require('../../../assets/component_img/index-pointx/polygon.png'),
+            },{
+                site:  'https://solanamobile.com/',
+                logo: require('../../../assets/component_img/index-pointx/solana.png'),
+            },{
+                site: 'https://polygon.technology/home',
+                logo: require('../../../assets/component_img/index-pointx/polygon.png'),
+            }]
+        },
+        checkDetail(type) {
+            console.log('checkDetail:', type)
+            this.$router.push({
+                path: `/${type}`
+            })
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+    .pointx-container {
+        background: #010601;
+        // padding-top: 30px;
+        overflow: hidden;
+        .container {
+            width: 1220px;
+            margin: 0 auto;
+        }
+        .pointx-top {
+            background-image: url('../../../assets/component_img/index-pointx/bill-background.png');
+            background-repeat: no-repeat;
+            background-size: 100% auto;
+            width: 1220px;
+            height: 770px;
+            padding-top: 210px;
+            & .pointx-desc {
+                img {
+                    height: auto;
+                    width: 280px;
+                }
+                .pointx-desc-tips {
+                    font-size: 40px;
+                    color: white;
+                    font-family: MFontBold;
+                    margin-top: 20px;
+                    text-shadow: -1px -1px 0 rgba(0,0,0, .8),  /* 左上角描边 */  
+                        1px -1px 0 rgba(0,0,0, .8),  /* 右上角描边 */  
+                        -1px 1px 0 rgba(0,0,0, .8),  /* 左下角描边 */  
+                        1px 1px 0 rgba(0,0,0, .8),
+                        2px 4px 5px white;   /* 右下角描边 */  
+                }
+            }
+            .pointx-top-btn {
+                margin-top: 180px;
+                .explore, .create {
+                    width: 170px;
+                    height: 64px;
+                    border-radius: 5px;
+                    color: #000;
+                    font-size: 24px;
+                    font-family: CFontBold;
+                    margin-right: 40px;
+                    background: #A5FF87;
+                }
+                .create {
+                    background: #E4FC8B;
+                }
+            }
+        }
+
+        .pointx-why {
+            margin-top: 60px;
+            .pointx-why-title {
+                text-align: center;
+                font-family: CFontBold;
+                font-size: 48px;
+                color: #A5FF87;
+            }
+            .pointx-why-items {
+                margin-top: 60px;
+                display: grid;
+                gap: 14px;
+                grid-template-columns: repeat(4, 1fr);
+                .pointx-why-item {
+                    border: 1px solid #EEFF8B;
+                    border-radius: 10px;
+                    height: 258px;
+                    padding-top: 40px;
+                    text-align: center;
+                    img {
+                        width: 100px;
+                        height: 100px;
+                        margin-bottom: 15px;
+                    }
+                    .desc {
+                        margin: 0 auto;
+                        width: 220px;
+                        font-size: 18px;
+                        line-height: 25px;
+                        font-family: MFont;
+                        white-space: break-spaces;
+                        text-align: center;
+                    }
+                }
+            }
+        }
+
+        .p-x-title {
+            font-size: 36px;
+            font-family: CFontBold;
+            color: #A5FF87;
+        }
+
+        .p-x-view-all  {
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+            span {
+                font-family: MFont;
+                font-size: 24px;
+            }
+            img {
+                width: 16px;
+                height: 16px;
+                margin-left: 12px;
+            }
+        }
+        .pointx-trending {
+            margin-top: 150px;
+            .p-x-trending-top {
+                display: flex;
+                justify-content: space-between;
+            }
+            .p-x-trending-items {
+                margin-top: 60px;
+                display: grid;
+                grid-template-columns: repeat(4, 1fr);
+                gap: 18px;
+            }
+        }
+
+        .pointx-discover {
+            margin-top: 150px;
+            .p-x-discover-top {
+                display: flex;
+                justify-content: space-between;
+            }
+            .p-x-discover-items {
+                margin-top: 66px;
+                display: grid;
+                grid-template-columns: repeat(5, 1fr);
+                gap: 16px;
+            }
+        }
+
+        .pointx-roadmap {
+            margin-top: 160px;
+            .pointx-roadmap-title {
+                position: relative;
+                font-size: 36px;
+                text-align: center;
+                span {
+                    position: relative;
+                    padding: 0 40px;
+                    z-index: 2;
+                    font-family: CFontBold;
+                    background: #010601;
+                }
+                .pointx-roadmap-line {
+                    position: absolute;
+                    background: linear-gradient(to right, #010601 0%, #A5FF87 50%, #010601 100%); 
+                    height: 4px;
+                    z-index: 1;
+                    width: 100%;
+                    top: 50%;
+                }
+            }
+        }
+
+        .pointx-ecosystems {
+            margin-top: 160px;
+            .p-x-discover-top {
+                display: flex;
+                justify-content: space-between;
+            }
+            .p-x-discover-content {
+                margin-top: 60px;
+            }
+        }
+
+        .p-x-discover-section {
+            display: grid;
+            gap: 40px;
+            padding-bottom: 100px;
+            &.p-x-discover-scroll {
+                max-width: 100vw;
+                width: 100vw;
+            }
+            .partner-box {
+                width: 100vw;
+            }
+            .backer-wrapper {
+                display: grid;
+                gap: 20px;
+                grid-template-columns: repeat(2, 1fr);
+            }
+
+            .backer-item {
+                background-color: #1E1C24;
+                border-radius: 9px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                padding: 12px 0;
+
+                img {
+                    width: 120px;
+                    height: 48px;
+                    object-fit: contain;
+                }
+            }
+        }
+        /deep/  .pointx-footer {
+            background: #010C07 !important;
+            .contentWidth {
+                width: 1240px;
+                margin: 0 auto;
+                .site-icon {
+                    display: none;
+                }
+                .link-list.link-list-left {
+                    justify-content: flex-end;
+                    .line-item {
+                        margin-left: 160px;
+                        .title {
+                            font-family: MFontBold;
+                            font-size: 20px;
+                            font-style: italic;
+                        }
+                        .link {
+                            font-family: MFont;
+                            font-size: 16px;
+                        }
+                    }
+                }
+            }
+        }      
+    }
+</style>