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

<template>
    <view class="custom-footer">

        <view class="container">
            <view>
                © 2026 CWG Markets
            </view>
            <view class="footer-links">
                <cwg-link type="pdf" :title="item.text" :url="item.url" target="_blank"
                    v-for="(item, index) in linkList" :key="index" class="link-item" />
            </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);

    padding: px2rpx(16) 0;
    border-top: 1px solid var(--bs-border-color);

    .container {
        max-width: px2rpx(1320);
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        padding: 0;
        color: var(--bs-emphasis-color);

        @media screen and (max-width: 1504px) {
            padding: 0 px2rpx(16);
        }
    }

    .footer-links {
        display: flex;
        gap: px2rpx(12);

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

            &:active {
                opacity: 0.7;
            }
        }

        .copyright {
            width: 100%;
            color: var(--bs-heading-color);
            margin-top: px2rpx(12);
        }
    }
}

@media screen and (max-width: 768px) {
    .container {
        padding: px2rpx(16) px2rpx(24);
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>