gypsy-crm-frontend-vu/components/cwg-custom-footer.vue

<template>
    <view class="custom-footer">
        <view class="footer-description">
            <view class="desc-block">
                <view class="desc-text" v-t="'newSignin.item12'" />
                <view class="desc-text" v-t="'newSignin.item10'" />
                <view class="desc-text" v-t="'newSignin.item11'" />
                <view class="desc-text">
                    <text v-t="'newSignin.item13'" />
                    <a :href="'https://www.' +
                        ho +
                        '.com/doc/Risk-Disclosures-and-Acknowledgements-2020-08.pdf'
                        " target="_blank" v-t="'newSignin.item13_1'" class="desc-link" />
                    <text class="desc-text" v-t="'newSignin.item13_2'" />
                </view>
                <text class="desc-text" v-t="'newSignin.item13_3'" />
                <text class="desc-text" v-t="'newSignin.item13_4'" />
            </view>
        </view>
        <view class="footer-placeholder"></view>
        <view class="footer-links">
            <view v-for="(item, index) in linkList" :key="index" class="link-item" @click="openLink(item)"
                v-t="item.text" />
            <!-- <view class="copyright">© 2008 - 2026. Exness</view> -->
        </view>
    </view>
</template>

<script setup>
import { openLocalPdf } from '@/utils/pdf.js'
const linkList = [
    { text: 'signup.agreemnet2', url: 'pdf/Client_Agreement.pdf' },
    { text: 'signup.agreemnet4', url: 'pdf/Terms&Conditions.pdf' },
    { text: 'signup.agreemnet6', url: 'pdf/Privacy_Policy.pdf' },
    { text: 'news_add_field.OpenAccount.Des2', url: 'pdf/PrivacyPolicy2019_01.pdf' }
]
const openLink = ({url, text}) => {
    openLocalPdf(url, text)
}
</script>

<style lang="scss" scoped>
@import "@/uni.scss";

.custom-footer {
    font-family: var(--f-country-simple-family);
    font-weight: 400;
    line-height: px2rpx(16);
    font-size: px2rpx(12);
    letter-spacing: px2rpx(0.5);
    display: grid;
    grid-template-columns: 1fr;
    margin: px2rpx(16) px2rpx(24);
    margin: px2rpx(64) 0px;

    .footer-description {
        .desc-block {
            margin-bottom: px2rpx(32);

            .desc-text {
                display: inline-block;
                margin-bottom: px2rpx(8);
            }

            .desc-link {
                display: inline-block;
                color: #0066cc;
                text-decoration: underline;
                margin-top: px2rpx(4);
            }
        }
    }

    .footer-placeholder {
        display: block;
    }

    .footer-links {
        display: flex;
        flex-direction: column;
        align-items: flex-start;

        .link-item {
            line-height: px2rpx(20);
            font-size: px2rpx(12);
            letter-spacing: px2rpx(0.5);
            color: #0066cc;
            text-decoration: underline;
            cursor: pointer;

            &:active {
                opacity: 0.7;
            }
        }

        .copyright {
            width: 100%;
            color: #999;
            margin-top: px2rpx(12);
        }
    }
}

@media screen and (min-width: 768px) {
    .custom-footer {
        grid-template-columns: 4fr 2fr;
    }
}

@media screen and (min-width: 992px) {
    .custom-footer {
        grid-template-columns: 8fr 4fr;
    }
}

@media screen and (min-width: 1200px) {
    .custom-footer {
        grid-template-columns: 7fr 1fr 3fr;
    }
}
</style>