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'" />
                    <cwg-link type="pdf" :title="'newSignin.item13_1'"
                        :url="'pdf/Risk-Disclosures-and-Acknowledgements-2020-08.pdf'" target="_blank"
                        class="desc-link" />
                    <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">
            <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>
</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;
    padding: px2rpx(40) 0 px2rpx(24) 0;
    margin-top: px2rpx(24);
    border-top: 1px solid var(--bs-border-color);

    .footer-description {
        .desc-block {
            .desc-text {
                margin-bottom: px2rpx(8);
                line-height: px2rpx(20);
                color: var(--bs-emphasis-color);
            }

            .desc-link {
                display: inline !important;
                color: #cf1322 !important;
                text-decoration: underline !important;

                :deep(uni-view) {
                    display: inline !important;
                }
            }
        }
    }

    .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: #cf1322;
            text-decoration: underline;
            cursor: pointer;

            &:active {
                opacity: 0.7;
            }
        }

        .copyright {
            width: 100%;
            color: var(--bs-heading-color);
            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>