udxcms 1.0.3 → 1.0.4

package/dist/views/customService/ecosystem/index.vue

@@ -0,0 +1,374 @@
+<template>
+    <div class="page-apps">
+        <div class="visible-pc">
+            <Header :showMiddleInfo="true" class='page-top'/>
+        </div>
+        <div class="visible-h5">
+            <Top class="top" />
+        </div>
+        <img class="bg" :src="require('../../../assets/apps-bg.svg')" />
+        <div class="container ecosystem-container">
+            <div class="apps-top">
+                <h1>{{ $t('cms_ecosystem_apps_title') }}</h1>
+                <p>{{ $t('cms_ecosystem_apps_subtitle', {siteName: this.$t('site_common_site_name')}) }}</p>
+            </div>
+            <div class="app-tags">
+                <span :class="['tag-item', activeIndex == -1 && 'active']" @click="setItem(-1)">{{$t('cms_ecosystem_apps_all')}}</span>
+                <span
+                    :class="['tag-item', activeIndex == index && 'active']"
+                    v-for="(item, index) in tagList"
+                    :key="index"
+                    @click="setItem(index)"
+                >{{ item.name }}</span>
+            </div>
+            <div class="apps-wrapper">
+                <div
+                    class="apps-item"
+                    v-for="(item, index) in storeList.slice(0, !checkMore ? checkMoreCount : storeList.length)"
+                    :key="index" @click='goUrl(item)'
+                >
+                    <div class="cover" :style="'background-image: url(' + item.image_url + ');'"></div>
+                    <div class="apps-content">
+                        <div class="title">{{ item.title }}</div>
+                        <div class="subtitle">{{ item.brief }}</div>
+                    </div>
+                    <div class="tag-box">
+                        <span class="tag" v-for="(item, index) in item.tagList" :key="index">{{ item }}</span>
+                    </div>
+                </div>
+            </div>
+            <div
+                class="apps-more"
+                v-if="storeList.length >= checkMoreCount && !checkMore"
+                @click="checkMore = true"
+            >
+                <span>{{ $t('cms_ecosystem_apps_learn_more') }}</span>
+                <img class="icon" :src="require('../../../assets/icon-link.svg')" />
+            </div>
+            <div class="apps-bottom">
+                <div class="apps-left">
+                    <div class="tags">
+                        <span class="tag">{{ $t('cms_ecosystem_apps_bottom_left_tag') }}</span>
+                    </div>
+                    <div class="bottom">
+                        <div class="title">{{ $t('cms_ecosystem_apps_bottom_left_title') }}<img class="icon" :src="require('../../../assets/icon-arrow-right.svg')" /></div>
+                        <div class="subtitle">{{ $t('cms_ecosystem_apps_bottom_left_subtitle') }}</div>
+                    </div>
+                </div>
+                <router-link to="/staking" class="apps-right">
+                    <div class="tags">
+                        <span class="tag">{{ $t('cms_ecosystem_apps_bottom_right_tag') }}</span>
+                    </div>
+                    <div class="title">{{ $t('cms_ecosystem_apps_bottom_right_title') }}<img class="icon" :src="require('../../../assets/icon-arrow-right.svg')" /></div>
+                    <div class="subtitle">{{ $t('cms_ecosystem_apps_bottom_right_subtitle') }}</div>
+                </router-link>
+            </div>
+        </div>
+        <div class='ecosystem-footer'>
+            <Footer class='ecosystem-inner-footer'/>
+        </div>
+    </div>
+</template>
+
+<script>
+import { loadImportScript } from '../../../utils/index'
+import conf from '../../../config/index'
+export default {
+    data() {
+        return {
+            storeList: [],
+            storeInitList: [],
+            tags: [],
+            activeIndex: -1,
+            activeText: '',
+            checkMore: false,
+            checkMoreCount: 9,
+            tagList: []
+        }
+    },
+    watch: {
+        activeText(val) {
+            if (!val) this.storeList = this.storeInitList
+            else this.storeList = this.storeInitList.filter(v => {
+                return !!~v.tagList.indexOf(val)
+            })
+        }
+    },
+    mounted() {
+        this.getDappList()
+        this.getTaglist()
+        // this.animationFactory()
+    },
+    methods: {
+        getDappList() {
+            let hostname = window.location.hostname
+            let lang = localStorage.getItem('language')
+            let src = `${conf.sitePath}${hostname}/${lang}/app_store/all/classify_tree.js`
+            this.loading = true
+            loadImportScript(`${conf.sitePath}${hostname}/${lang}/app_store/all/classify_tree.js`, null, 'message').then(res => {
+                console.log('message', res)
+                let dappsList = res || []
+                let storeList = []
+                let tags = []
+                dappsList.map(v => {
+                    if (v.content) {
+                        storeList = storeList.concat(v.content)
+                    }
+                })
+                this.storeList = storeList.map(v => {
+                    v.tagList = v.tags && v.tags.map(tag => {
+                        return tag.name
+                    })
+                    if (v.tagList) tags = tags.concat(v.tagList)
+                    return v
+                })
+                this.storeInitList = Object.assign([], this.storeList)
+                this.tags = Array.from(new Set(tags))
+                console.log('this.storeList', this.storeList, this.tags)
+                this.loading = false
+            })
+        },
+        getTaglist() {
+            let hostname = window.location.hostname
+            let lang = localStorage.getItem('language')
+            let src = `${conf.sitePath}${hostname}/all/app_store/all/all_tag.js`
+            loadImportScript(src, null, 'message').then(res => {
+                console.log('getTaglist', res)
+                this.tagList = Object.assign([], res)
+            })
+        },
+        setItem(index) {
+            this.activeIndex = index
+            this.activeText = index == -1 ? '' : this.tagList[index].name
+        },
+
+        goUrl(item) {
+            item.link && window.open(item.link, '_blank')
+        }
+    }
+}
+</script>
+
+<style lang="less">
+
+.ecosystem-footer {
+    position: relative;
+    z-index: 2;
+}
+
+.page-apps {
+    overflow: hidden;
+	min-height: 100vh;
+    position: relative;
+    // padding-top: 80px;
+    background: black;
+    .page-top {
+        z-index: 20000;
+    }
+    .bg {
+        position: absolute;
+        left: 50%;
+        transform: translateX(-50%);
+        top: -50px;
+        z-index:1;
+    }
+    .container{
+        padding: 20px;
+        position: relative;
+        z-index: 10;
+    }
+
+    .apps-top{
+        color: #fff;
+        max-width: 800px;
+        margin: 100px auto 85px;
+        text-align: center;
+        h1{
+            font-size: 40px;
+        }
+        p{
+            color: rgba(255, 255, 255, 0.82);
+        }
+    }
+    .app-tags {
+        display: flex;
+        width: 100%;
+        justify-content: center;
+        margin-top: 60px;
+        margin-bottom: 60px;
+        flex-wrap: wrap;
+        .tag-item {
+            font-family: FontMedium;
+            padding: 8px 10px;
+            border-radius: 6px;
+            background: rgba(255, 255, 255, 0.12);
+            text-align: center;
+            font-size: 16px;
+            line-height: 16px;
+            margin-right: 16px;
+            color: white;
+            margin-bottom: 16px;
+            cursor: pointer;
+            &:hover {
+                background: rgba(255, 255, 255, 0.42);
+            }
+        }
+        .tag-item.active {
+            background: var(--primary-bg-color);
+        }
+    }
+
+    .apps-wrapper {
+        display: grid;
+        gap: 20px;
+        min-height: 200px;
+        .apps-item {
+            border-radius: 12px;
+            overflow: hidden;
+            position: relative;
+            background: white;
+            .cover {
+                padding-top: 50%;
+                // border-radius: 12px 12px 0 0;
+                // background-color: #eee;
+                background-position: center center;
+                background-repeat: no-repeat;
+                background-size: cover;
+            }
+            .tag-box {
+                position: absolute;
+                z-index: 2;
+                top: 12px;
+                right: 12px;
+                display: flex;
+                justify-content: flex-end;
+                flex-wrap: wrap;
+                .tag {
+                    padding: 6px 10px;
+                    font-size: 12px;
+                    line-height: 16px;
+                    color: white;
+                    border-radius: 8px;
+                    background: rgba(0, 0, 0, 0.4);
+                    margin-left: 0.5em;
+                    font-family: FontMedium;
+                }
+            }
+            .apps-content {
+                padding: 20px;
+                width: 100%;
+                // height: 104px;
+                .title {
+                    font-size: 16px;
+                    font-family: FontMedium;
+                    // color: var(--text-color-secondary);
+                }
+                .subtitle {
+                    margin-top: 6px;
+                    font-size: 14px;
+                    color: var(--text-color-secondary);
+                    font-family: FontRegular;
+                    line-height: 1.5;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
+                    // display: -webkit-box;
+                    // -webkit-line-clamp: 2;
+                    // -webkit-box-orient: vertical;
+                }
+            }
+        }
+    }
+
+    .apps-more {
+        margin-top: 56px;
+        display: flex;
+        justify-content: center;
+        font-size: 20px;
+        line-height: 26px;
+        color: white;
+        cursor: pointer;
+        .icon {
+            margin-left: 10px;
+            width: 24px;
+            transform: rotate(90deg);
+        }
+    }
+
+    .apps-bottom {
+        display: grid;
+        gap: 30px;
+        margin: 100px auto;
+        .apps-left,
+        .apps-right {
+            // padding-top: 42.4779%; // 240 / 565 * 100%
+            overflow: hidden;
+            border-radius: 12px;
+            padding: 30px;
+            background: url("../../../assets/apps-article-cover-1.svg");
+            background-size: cover;
+            background-position: center;
+        }
+        .apps-right {
+            background: url("../../../assets/apps-article-cover-2.svg");
+            background-size: cover;
+            background-position: center;
+        }
+        .tags {
+            .tag {
+                font-size: 12px;
+                line-height: 16px;
+                font-family: FontSemiBold;
+                color: white;
+            }
+        }
+        .title {
+            margin-top: 100px;
+            font-size: 28px;
+            line-height: 36px;
+            color: white;
+            font-weight: 800;
+            .icon{
+                width: 32px;
+                margin-left: 4px;
+            }
+        }
+        .subtitle {
+            margin-top: 8px;
+            font-size: 16px;
+            line-height: 20px;
+            color: rgba(255, 255, 255, 0.82);
+            font-family: FontMedium;
+        }
+    }
+}
+@media screen and (min-width: 768px) {
+    .page-apps {
+        .apps-bottom {
+            grid-template-columns: repeat(2, 1fr);
+        }
+        .apps-wrapper {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .page-apps {
+        // padding-top: 120px;
+        .container{
+            padding: 0;
+        }
+        .apps-top {
+            h1{
+                font-size: 64px;
+            }
+        }
+        .apps-wrapper {
+            grid-template-columns: repeat(3, 1fr);
+        }
+        .apps-bottom {
+            grid-template-columns: repeat(2, 1fr);
+        }
+    }
+}
+</style>

package/dist/views/customService/help/entry.vue

@@ -0,0 +1,29 @@
+<!--  -->
+<template>
+    <router-view />
+</template>
+
+<script>
+export default {
+    name: '',
+    data() {
+        return {
+        };
+    },
+
+    components: {},
+
+    computed: {},
+
+    mounted() {},
+
+    methods: {},
+    
+    beforeDestroy() {
+        sessionStorage.removeItem('helpExpandNode')
+    }
+};
+
+</script>
+<style lang='less' scoped>
+</style>

package/dist/views/customService/help/helpDetail.vue

@@ -0,0 +1,167 @@
+<!-- 文章详情 -->
+<template>
+    <div class="help-detail">
+        <Header class="visible-pc" :showMiddleInfo="true" />
+        <OtherNav class="visible-h5" bottom="10">{{
+            $t("cms_help_bread_title")
+        }}</OtherNav>
+        <div v-if="!loading" class="content" id="js-article-content">
+            <!-- <HelpNav class="nav" :classificationName="classificationName"/> -->
+            <PowxBread :list="bread" class="nav"></PowxBread>
+            <HelpDetail :articleTitle="articleTitle" :updateTime="updateTime" :detailArticle="detailArticle" :articleImg="articleImg"/>
+        </div>
+        <div v-else class="loading-wrap">
+            <site-loading></site-loading>
+        </div>
+        <!-- TODO: footer改为后端配置，全局统一 -->
+        <Footer v-if='!version' class="footer" type="fixed" />
+        <!-- 2mr统一新的页脚 -->
+        <footer-wrap v-else/>
+    </div>
+</template>
+
+<script>
+import HelpDetail from '../../../components/cmsComponents/help/detail.vue'
+import conf from "../../../config/index";
+import { loadImportScript, isPhone} from "../../../utils/index";
+import { mapState } from "vuex";
+import HelpNav from './nav.vue';
+
+export default {
+    name: 'HelpDetailPage',
+    data() {
+        return {
+            loading: true,
+            bread: [
+				{
+					path: "/help",
+					name: this.$t("cms_help_bread_title"),
+				},
+			],
+            classificationName: '',
+            name: '', // 文章对应cdn文件名称
+            classification: '', // 分类
+            articleTitle: '', // 文章标题
+            updateTime: '', // 更新时间
+            detailArticle: '', // 文章详情
+            articleImg: ''
+        };
+    },
+
+    components: {
+        HelpDetail,
+        HelpNav
+    },
+
+    computed: {
+        lang() {
+            return this.$store.state.language
+        },
+        version() {
+			return this.$store.state.siteConfig.footerMsgVersion || ''
+		}
+    },
+
+    watch:{
+        $route(to, from) {
+            this.init();
+        }
+    },
+
+    created() {
+        this.init();
+    },
+
+    methods: {
+        init() {
+            this.bread = [
+				{
+					path: "/help",
+					name: this.$t("cms_help_bread_title"),
+				},
+			];
+            const { name, categoryCode } = this.$route.params;
+            this.name = name;
+            this.classification = categoryCode;
+            this.getDetail();
+
+
+			const el = document.getElementById('js-article-content');
+			el && el.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start',
+                // inline: 'center'
+            });
+        },
+        /**
+         * 获取文章详情
+         */
+        getDetail() {
+            const hostname = window.mainHostname;
+            const url = `${conf.sitePath}${hostname}/${this.lang}/help/${this.classification}/${this.name}.js`
+            loadImportScript(url, null, 'message')
+                .then((res) => {
+                    let { title, description, update_time, type_title, image_url } = res;
+                    const date = new Date(update_time);
+                    const year = date.getFullYear();
+                    const month = date.getMonth() + 1;
+                    const day = date.getDate();
+                    this.articleTitle = title;
+                    this.updateTime = `${month}/${day}/${year}`;
+
+                    // 替换内容
+                    description = description.replace(/\$\{site_name\}/g, this.$t("site_common_site_name"));
+
+                    this.detailArticle = description;
+                    // '<a href=\"/#/help/list#faq_iswallet\" rel=\"nofollow\">go to a</a>'
+                    this.classificationName = type_title;
+                    this.bread.push({
+                        name: type_title
+                    })
+                    // this.articleImg = 'https://d1qu701gfywrk1.cloudfront.net/2021/10/27/bcde1058-2eb3-492a-8513-7009b60a7e24.png';
+                    this.articleImg = image_url;
+                    this.loading = false;
+                })
+                .catch((err) => {
+                    console.error(err);
+                    this.loading = false;
+                });
+        }
+    }
+};
+
+</script>
+<style lang='less' scoped>
+.help-detail{
+    display: flex;
+    flex-direction: column;
+    .content{
+        padding: 0 20px;
+        max-width: 1100px;
+        flex: 1;
+        .nav{
+            border-bottom: 1px solid var(--border-color-base);
+        }
+    }
+    .loading-wrap {
+        flex: auto;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+}
+@media screen and (min-width: 768px) {
+    .help-detail{
+        min-height: 100vh;
+        .content{
+            margin: 0 auto 40px;
+            width: 100%;
+            .nav{
+                margin-bottom: 32px;
+            }
+        }
+    }
+}
+</style>
+