udxcms 1.0.10 → 1.0.12

package/dist/components/businessComponents/FooterPointx.vue

@@ -0,0 +1,374 @@
+<template>
+<div  :class="['theme-' + themeMode,'footer', siteName]">
+    <ul class="contentWidth" v-theme="footerSet.contentWidth">
+        <li class='logo-c'>
+            <p>
+                <img :src="logoSrc" class="logo visible-pc" :style="{height: commonConf.logoHeight, width: 'auto'}" />
+                <img :src="logoSrc" class="logo visible-h5" :style="{height: commonConf.mobileLogoHeight ? commonConf.mobileLogoHeight : parseInt(commonConf.logoHeight) / 3 * 2 + 'px', width: 'auto'}" />
+            </p>
+            <slot name='footer-msg'>
+            </slot>
+        </li>
+        <li class="content content-pc visible-pc" v-theme="footerSet.content">
+            <div :class="['link-list', navList.length < 3 && 'link-list-left']">
+                <div class='line-item' v-for='(item, index) in navList' :key='index'>
+                    <div class='title' :style="{'padding-left': footerSet.linkItem['padding-left']}">{{item.bar_name}}</div>
+                    <div class='link' :style="{'padding-left': footerSet.linkItem['padding-left']}" v-for='(link, linkIndex) in item.child' :key='linkIndex' @click='goUrl(link.click_url)'>
+                        {{link.bar_name}}
+                    </div>
+                </div>
+            </div>
+        </li>
+        <li class="content content-h5 visible-h5">
+            <div class='link-list'>
+                <div class='line-item' v-for='(item, index) in navList' :key='index'>
+                    <div class='title' :style="{'text-align': commonConf.footerPosition}">{{item.bar_name}}</div>
+                    <div class='link' :style="{'text-align': commonConf.footerPosition}" v-for='(link, linkIndex) in item.child' :key='linkIndex' @click='goUrl(link.click_url)'>
+                        {{link.bar_name}}
+                    </div>
+                </div>
+            </div>
+        </li>
+        <li class='site-icon' v-theme="footerSet.siteIcon">
+            <a v-for="(item, index) in linkArr" :key='index' class='line-icon' :href='item.site' target="_blank">
+                <img :src="item.logo" alt="" />
+            </a>
+        </li>
+    </ul>
+    <slot></slot>
+</div>
+</template>
+
+<script>
+import conf from "../../config/index";
+import config from '../../config/index'
+import {
+    getStyleObj
+} from '../../utils/index'
+import themeMixin from "../../mixins/themeMixin-votex";
+export default {
+    name: "",
+    mixins: [themeMixin],
+    props: {
+        titleType: {
+            type: String,
+            default: config.siteTitle
+        }
+    },
+
+    data() {
+        return {
+            sitePath: conf.sitePath,
+            siteLogo: conf.siteLogo,
+            lang: localStorage.getItem("language") || conf.baseLanguage,
+            linkArr: [],
+            commonConf: {},
+            // navList: [],
+            footerSet: {
+                contentWidth: {},
+                content: {},
+                linkList: {},
+                siteIcon: {},
+                linkItem: {}
+            }
+        };
+    },
+
+    computed: {
+        logoSrc() {
+            return 'https://d1qu701gfywrk1.cloudfront.net/2024/03/28/aeaa402f-75a5-4704-8220-1a13adfeb92b.png'
+            // let path =
+            //     this.$t("site_common_logo_base_url") +
+            //     (window.location.host.indexOf(conf.localHostIp) == -1 ?
+            //         window.location.hostname :
+            //         conf.testSite) + '/en_US/w72.png';
+            // if(this.themeMode === 'light' && this.$store.state.themeConfig['logo']?.light) {
+            //     path = this.sitePath +location.hostname + this.$store.state.themeConfig['logo']?.light
+            // }        
+            // return path;
+        },
+        siteName() {
+            return this.$store.state.theme?.common?.common_conf?.indexType;
+        },
+
+        footerMenus() {
+            return this.$store.state.navigation.footer;
+        },
+        navList() {
+            let parentNavList = this.footerMenus.filter(v => !v.parent_id)
+            let childNavList = this.footerMenus.filter(v => v.parent_id)
+            return parentNavList.map(v => {
+                v.child = childNavList.filter(child => v.id == child.parent_id).sort((a, b) => a.sort - b.sort);
+                return v;
+            }).sort((a, b) => a.sort - b.sort < 0 ? -1 : 1);
+        }
+    },
+
+    mounted() {
+        this.getMediasFunc();
+        this.getCommonConf()
+    },
+
+    methods: {
+        getCommonConf() {
+            let pageName = this.$route.name
+            let styleObj = getStyleObj(pageName, ['commonConf'])
+            let {
+                commonConf
+            } = styleObj
+            this.commonConf = commonConf
+            let footerSet = this.commonConf.footerSet || {}
+            Object.keys(footerSet).map(v => {
+                this.footerSet[v] = footerSet[v]
+            })
+            // console.log('this.commonConf', this.commonConf)
+        },
+        getMediasFunc() {
+            this.linkArr = this.$t("media_common_media_channel") != "media_common_media_channel" ?
+                JSON.parse(this.$t("media_common_media_channel")) : [];
+            // let navList = this.$t('site_common_footer_navigation_bar') != 'site_common_footer_navigation_bar' ? JSON.parse(this.$t('site_common_footer_navigation_bar')) : []
+            // let parentNavList = navList.filter(v => !v.parent_id)
+            // let childNavList = navList.filter(v => v.parent_id)
+            // this.navList = parentNavList.map(v => {
+            //     v.child = childNavList.filter(child => v.id == child.parent_id).sort((a, b) => a.sort - b.sort);
+            //     return v;
+            // }).sort((a, b) => a.sort - b.sort < 0 ? -1 : 1)
+
+        },
+        goUrl(url) {
+            if (!url) return
+            if (url.startsWith('http') || url.startsWith('https')) {
+                window.open(url, url)
+            } else if (url.startsWith('/')) {
+                this.$router.push({
+                    path: url
+                })
+            } else {
+                this.$router.push({
+                    path: '/' + url
+                })
+            }
+        }
+    }
+};
+</script>
+
+<style lang="less" scoped>
+.footer {
+    border-top: 1px solid var(--border-line-color);
+    background: var(--footer-bg) !important;
+    width: 100%;
+    padding: 40px 16px 80px;
+    z-index: 6999;
+    .contentWidth {
+        // .heartWidth;
+        display: flex;
+        justify-content: flex-start;
+        flex-wrap: wrap;
+        padding: 0 !important;
+        // padding: 0 16px !important;
+
+        .content {
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: flex-start;
+            align-items: center;
+            margin-top: 40px;
+            width: 100%;
+            &.content-pc {
+                display: none;
+            }
+            &.content-h5 {
+                display: flex;
+            }
+            .logo-c {
+                text-align: left;
+                width: 100%;
+
+                .logo {
+                    width: 132px;
+                    height: auto;
+                    color: white;
+                    font-family: Manrope;
+                    font-style: normal;
+                    font-weight: bold;
+                    font-size: 20px;
+                    letter-spacing: 3px;
+                    text-transform: uppercase;
+                    color: #ffffff;
+                }
+            }
+
+            .link-list {
+                display: grid;
+                width: 100%;
+                grid-template-columns: repeat(2, 1fr);
+                padding-left: 8px;
+
+                .line-item:not(:last-child) {
+                    margin-bottom: 20px;
+                }
+
+                .title {
+                    text-align: left;
+                    font-family: FontMedium;
+                    color: var(--footer-color);
+                    margin-bottom: 16px;
+                    font-size: 18px;
+                    line-height: 1;
+                }
+
+                .link {
+                    text-align: left;
+
+                    font-size: 14px;
+                    color: var(--footer-link-color);
+                    cursor: pointer;
+                    line-height: 1;
+                    white-space: nowrap;
+                    &:hover {
+                        color: var(--text-color-third);
+                    }
+
+                    &:not(:last-child) {
+                        margin-bottom: 8px;
+                    }
+                }
+            }
+        }
+
+        .site-icon {
+            margin-top: 40px;
+            display: flex;
+            .line-icon {
+                display: inline-block;
+                width: 32px;
+                height: 32px;
+                // border-radius: 50%;
+                cursor: pointer;
+
+                // background: var(--text-color);
+                img {
+                    width: 32px;
+                    height: 32px;
+                    // border-radius: 50%;
+                }
+
+                &:not(:last-child) {
+                    margin-right: 20px;
+                }
+            }
+        }
+    }
+}
+
+.isFxied {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    z-index: 9999;
+}
+
+@media screen and (min-width: 768px) {
+    .footer {
+        padding: 80px 30px !important;
+        .contentWidth {
+            padding: 0 !important;
+            flex-wrap: nowrap;
+            .logo-c {
+                text-align: left;
+                .logo {
+                    transform: translateY(-50%);
+                    height: 40px;
+                    width: auto;
+                }
+            }
+            .content {
+                margin-left: var(--footer-content-left);
+                // margin-left: 104px;
+                margin-top: 0;
+                flex: 1;
+                &.content-pc {
+                    display: flex;
+                }
+                &.content-h5 {
+                    display: none;
+                }
+                .link-list {
+                    padding: 0;
+                    width: 100%;
+
+                    .line-item {
+                        margin-bottom: 0px;
+                        padding-right: 30px;
+                    }
+
+                    grid-template-columns: repeat(3, 1fr);
+
+                    .title {
+                        text-align: left;
+                        font-size: 18px;
+                        margin-bottom: 28px;
+                    }
+                    .link {
+                        text-align: left;
+                        font-size: 16px;
+
+                        &:not(:last-child) {
+                            margin-bottom: 20px;
+                        }
+                    }
+                }
+            }
+
+            .site-icon {
+                text-align: left;
+                margin-top: 0;
+            }
+        }
+    }
+}
+
+@media screen and (min-width: 1200px) {
+    .footer {
+        padding: 80px 30px !important;
+        .contentWidth {
+            .content {
+                .link-list {
+                        padding: 0;
+                        width: 100%;
+
+                        .line-item {
+                            margin-bottom: 0px;
+                            padding-right: 30px;
+                            min-width: fit-content;
+                        }
+                        display: flex;
+                        justify-content: space-around;
+                        align-items: flex-start;
+                    &.link-list-left {
+                        justify-content: flex-start;
+                    }
+                }
+            }
+        }
+
+    }
+}
+@media screen and (max-width: 1360px) {
+    .footer {
+        .contentWidth {
+            .site-icon {
+                display: flex;
+                padding-left: 0;
+            }
+        }
+    }
+}
+
+.IndexDex {
+    ul li.site-icon{
+        filter:invert(1);
+    }
+}
+</style>

package/dist/components/businessComponents/Header.vue

@@ -0,0 +1,169 @@
+<!--
+ * @Author: Lewis
+ * @Date: 2020-11-16 14:38:46
+ * @LastEditTime: 2022-08-24 00:11:53
+ * @LastEditors: Lewis
+ * @Description: update logoIcon
+-->
+
+<template>
+    <div class='header'>
+        <component :is="componentId" :scrollTop='scrollTop' :showMiddleInfo='showMiddleInfo' :navList='navList' :styleConf='styleConf' :commonConf='commonConf' :hideArr='hideArr' :commonHeader='commonHeader' :showUnit='showUnit' :hideWalletBtn='hideWalletBtn' ref='head'></component>
+    </div>
+</template>
+<script>
+import { isUserCenter, onEvents, getStyleObj } from '../../utils/index'
+const header = {
+    name: "Header",
+    components: {},
+    props: {
+        componentName: {
+            type: String,
+            default: ''
+        },
+        showMiddleInfo: {
+            type: Boolean,
+            default: true
+        },
+        scrollTop: {
+            type: Number,
+            default: 500,
+        },
+        childPage: {
+            type: Number,
+            default: 1
+        }
+    },
+    data() {
+        return {
+            // navList: [],
+            componentId: '',
+            styleConf: {},
+            commonConf: {},
+            indexStyleList: [],
+            hideArr: [],
+            userCenter: isUserCenter(),
+            commonHeader: {},
+            showUnit: ''
+        }
+    },
+	computed: {
+        hideWalletBtn() {
+            return this.$route.name == 'login'
+        },
+        headerMenus() {
+            return this.$store.state.navigation.header;
+        },
+        // 判断是否中心化
+        accountIsCustody() {
+            return this.$store.getters.accountIsCustody;
+        },
+        navList() {
+            console.log('this.accountIsCustody:', this.accountIsCustody)
+            let parentNavList = this.headerMenus.filter(v => !v.parent_id && v.client == 'WEB' && (v.type == 'COMMON' || v.type == 'UNMANAGED' && !this.accountIsCustody || v.type == 'MANAGED' && this.accountIsCustody))
+            let childNavList = this.headerMenus.filter(v => v.parent_id && v.client == 'WEB' && (v.type == 'COMMON' || v.type == 'UNMANAGED' && !this.accountIsCustody || v.type == 'MANAGED' && this.accountIsCustody))
+            childNavList.map(v => {
+                v.child = childNavList.filter(child => v.id == child.parent_id).sort((a, b) => a.sort - b.sort);
+            })
+            return parentNavList.map(v => {
+                v.child = childNavList.filter(child => v.id == child.parent_id).sort((a, b) => a.sort - b.sort);
+                return v;
+            }).sort((a, b) => a.sort - b.sort < 0 ? -1 : 1);
+        }
+    },
+    watch: {
+        childPage(val, oldVal) {
+            if(val != oldVal) {
+                if (this.indexStyleList.length) {
+                    this.styleConf = this.indexStyleList[this.childPage - 1]
+                } else {
+                    this.dealTheme()
+                }
+            }
+        }
+    },
+    mounted() {
+        let siteModel = this.$store.state.common.siteModel
+        if (siteModel == 5) {
+            this.hideArr.push('mobi')
+        }
+        if (!this.navList.length) {
+            if (this.userCenter) {
+                this.componentId = this.componentName || 'header_a'
+            } else {
+                this.componentId = this.componentName || 'header_b'
+            }
+            // this.dealSite()
+        }
+        this.dealTheme()
+        this.$nextTick(() => {
+            onEvents('updateStyle', styleObj => {
+                if (typeof styleObj != 'undefined') {
+                    this.styleConf = styleObj
+                } else {
+                    this.dealTheme()
+                }
+            })
+            // onEvents('updateNavList', () => {
+            //     this.dealSite()
+            // })
+        })
+    },
+    methods: {
+        // dealSite() {
+        //     // let navList = this.$t('site_common_header_navigation_bar') != 'site_common_header_navigation_bar' ? JSON.parse(this.$t('site_common_header_navigation_bar')) : []
+        //     let navList = this.$store.state.navigation.header;
+        //     let parentNavList = navList.filter(v => !v.parent_id && v.client == 'WEB')
+        //     let childNavList = navList.filter(v => v.parent_id && v.client == 'WEB')
+        //     this.navList = parentNavList.map(v => {
+        //         v.child = childNavList.filter(child => v.id == child.parent_id).sort((a, b) => a.sort - b.sort);
+        //         return v;
+        //     }).sort((a, b) => a.sort - b.sort < 0 ? -1 : 1)
+        //     console.log('navList', this.navList)
+        // },
+        dealTheme() {
+            if (this.componentName) {
+                this.componentId = this.componentName;
+                // this.componentId = 'header_b'
+                return ;
+            }
+            let pageName = this.$route.name
+            let styleObj = getStyleObj(pageName, ['commonConf', 'commonHeader', 'styleConf', 'indexStyleList'])
+            let {commonConf, commonHeader, indexStyleList, styleConf} = styleObj
+            this.commonConf = commonConf
+            this.commonHeader = commonHeader
+            this.styleConf = styleConf
+            this.indexStyleList = indexStyleList
+            let componentName = this.commonConf.indexHeader || ''
+            this.showUnit = this.commonConf.showUnit || ''
+            if (Object.keys(this.commonConf).length) {
+                this.$store.commit('setCommonConf', this.commonConf)
+            }
+            // this.componentId = 'header_dex' || componentName || 'header_b'
+            this.componentId = componentName || 'header_b'
+            // this.componentId = 'header_b'
+        }
+    }
+}
+
+const requireComponents = require.context(
+	'../pageComponents/header',
+	true,
+	/[a-zA-Z]\w+\.vue$/
+)
+requireComponents.keys().forEach(fileName => {
+	let componentConf = requireComponents(fileName);
+	let componentName = fileName.split('/')
+				.pop()
+				.replace(/\.\w+$/, '')
+	header.components[componentName] = componentConf.default
+ })
+// console.log('header', header)
+export default header
+</script>
+<style lang="less" scoped>
+    .header {
+        height: fit-content;
+        position: relative;
+    }
+</style>

package/dist/components/businessComponents/HeaderNetworkSelect.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="header-network-select">
+		<NetworkSelect :mode="mode" :networks="walletNetworks" :defaultChainId="chainId" @change="changeChain" />
+	</div>
+</template>
+
+<script>
+// 未连接钱包时使用。
+export default {
+	name: "HeaderNetworkSelect",
+	props: {
+		mode: {
+			type: String,
+			default: () => "",
+		},
+	},
+	data() {
+		return {
+			dropMenuVisible: false,
+		};
+	},
+	computed: {
+		chainId() {
+			return this.$store.state.chainId;
+		},
+		walletNetworks() {
+			return this.$store.getters.walletNetworks;
+		}
+	},
+	methods: {
+		async changeChain(chainId) {
+			this.$store.commit("setChainId", chainId);
+		}
+	},
+};
+</script>
+
+<style lang="less">
+.header-network-select{
+	min-width: 180px;
+}
+</style>