udxcms 1.0.1

package/dist/components/businessComponents/CustomAnnounceModal.vue

@@ -0,0 +1,204 @@
+<template>
+    <a-modal
+        :visible="visible"
+        :width="width"
+        :title="title || ''"
+        centered
+        :footer="footer"
+        wrapClassName="custom-announce-modal"
+        @cancel="onClose"
+        @ok="onClose">
+        <div class='custom-announce-box'>
+            <div class='custom-announce-title'>{{ service.title }}
+                <a
+                    class='whitepaper-down opcHover'
+                    download='finilename'
+                    :href='service.file_url'
+                    v-if='!service.content && service.file_url'>
+                        <img src='../../assets/download-annoumment.png'>
+                        {{ $t('cms_announcement_download') }}
+                </a>
+            </div>
+            <div class='content' v-html='service.content'>
+            </div>
+            <!-- 产品确定没有配置内容，但是上传了PDF了，才展示pdf -->
+            <pdf v-show="!service.content && service.file_url" v-for="i in numPages" :key="i" :page="i" :src="pdfSrc"
+                style="width: 100vw;overflow:hidden"></pdf>
+        </div>
+    </a-modal>
+</template>
+
+<script>
+// import pdf from 'vue-pdf'
+import conf from '@/config/index';
+import { loadImportCacheScript } from '@/utils/index';
+/**
+ * 统一弹窗公告内容组件 组件
+ *
+ * emit 事件：
+ * $emit("close");
+ */
+export default {
+    name: "CustomAnnounceModal",
+    // components: {
+    //     pdf
+    // },
+    props: {
+        // a-modal的属性。
+        visible: Boolean,
+        title: String,
+        // 公告管理的分组编码
+        groupCode: String,
+        // 公告管理的公告编码
+        code: String,
+        width: {
+            type: Number,
+            default: () => 600,
+        },
+        footer: {
+            type: String,
+            default: () => null,
+        },
+
+    },
+    data() {
+        return {
+            // 服务协议
+            service: {
+                title: '',
+                content: '',
+                file_url: '',
+                type: ''
+            },
+            numPages: 0,
+            pdfSrc: '',
+        };
+    },
+    computed: {
+        lang() {
+            return this.$store.state.language
+        },
+    },
+    watch: {
+        lang(val) {
+            this.loadTermsInfo();
+        },
+    },
+    created() {
+        this.loadTermsInfo();
+    },
+    methods: {
+        onClose() {
+            debugger
+            this.$emit('close');
+        },
+        async loadTermsInfo() {
+            let localhostName =  window.location.hostname
+            let fileName = `${conf.sitePath}${localhostName}/${this.lang}/announcement/${this.groupCode}/${this.code}.js`
+            console.log('fileName:', fileName)
+            loadImportCacheScript(fileName, null, 'message').then(res => {
+                this.service.title = res.title || '';
+                this.service.content = res.description || '';
+                this.service.file_url = res.file_url || '';
+                this.service.type = res.type || '';
+                if (this.service.file_url.length) {
+                    this.isPdf(this.service.file_url)
+                }
+            }).catch(e => e)
+        },
+        isPdf(url) {
+            if(url && url.toLowerCase().endsWith('.pdf')) {
+                this.pdfSrc = pdf.createLoadingTask(url);
+                this.pdfSrc.promise.then(pdf => {
+                    this.numPages = pdf.numPages;
+                }).catch(e => e);
+            }
+        },
+    },
+};
+</script>
+<style lang="less">
+.custom-announce-modal {
+    .custom-announce-box {
+        // width: 350px;
+        min-height: 400px;
+        position: relative;
+        // margin-top: -40px;
+        .custom-announce-title {
+            // position: absolute;
+            z-index: 2;
+            padding: 0;
+            font-size: 18px;
+            line-height: 24px;
+            font-family: Font;
+            color: var(--text-color);
+            text-align: center;
+            // top: -20px;
+            // left: 0;
+            // right: 0;
+        }
+        .whitepaper-down {
+            position: absolute;
+            z-index: 3;
+            right: 40px;
+            top: 40px;
+            bottom: 0;
+            height: 100%;
+            font-size: 14px;
+            font-family: Font;
+            font-weight: 400;
+            text-align: left;
+            color: var(--text-color);
+            cursor: pointer;
+            float: right;
+            img {
+                height: 12px;
+                width: 12px;
+                margin-right: 0em;
+                filter: grayscale(1);
+                vertical-align: middle;
+            }
+        }
+        .content {
+            font-size: 14px;
+            font-family: Font;
+            color: var(--text-color);
+            text-align: left;
+            line-height: 24px;
+            padding: 0 20px 20px 20px;
+            max-height: 460px;
+            overflow: auto;
+            max-width: calc(100vw - 80px);
+            padding-left: 0;
+        }
+        &>span {
+            width: 100% !important;
+        }
+    }
+}
+@media screen and (min-width: 768px) {
+    .custom-announce-modal {
+        .custom-announce-box {
+            // width: 600px;
+            .custom-announce-title {
+                font-size: 24px;
+            }
+            .content {
+                padding-left: 20px;
+            }
+        }
+    }
+}
+@media screen and (min-width: 1200px) {
+    .custom-announce-modal {
+        .custom-announce-box {
+            .content {
+                padding-left: 20px;
+            }
+        }
+    }
+}
+.custom-announce-box   .content div {
+    line-height: 20px;
+}
+</style>

package/dist/components/businessComponents/Flag.vue

@@ -0,0 +1,45 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-03 20:15:55
+ * @LastEditTime: 2021-08-02 18:47:29
+ * @LastEditors: Lewis
+ * @Description:    
+-->
+<template>
+    <div class="flag" :style="{'backgroundPosition':backgroundPosition, background: require('../../assets/img/flag2.png')}"></div>
+</template>
+
+<script>
+export default {
+    name: "Flag",
+    props: {
+        name: {
+            type: String,
+            default: ""
+        },
+        size: {
+            type: Number,
+            default: 18
+        },
+        sort: {
+            type: String,
+            default: '1'
+        }
+    },
+    computed: {
+        backgroundPosition: function() {
+            let positionLocal = this.size * (this.sort - 1)
+            return `-${positionLocal}px 0px`
+        }
+    },
+    
+}
+</script>
+
+<style lang="less" scoped>
+    .flag {
+        width: 30px;
+        height: 30px;
+        background-size: cover;
+    }
+</style>

package/dist/components/businessComponents/Footer.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() {
+            
+            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>