<template>
    <div>
        <nav>
            <headTop />
        </nav>
        <div class="payment-page">
            <div class="main">
                <!-- 标题 -->
                <div class="offer-title">
                    <h1>Our offering today.</h1>
                </div>
                <!-- 第一行 -->
                <div class="two-price">
                    <div class="in-store">
                        <div class="store-title">
                            <h2>In-store</h2>
                        </div>

                        <div class="store-list">
                            <div>
                                <img src="@/assets/payments/icons8-pos-50.png" alt="">
                            </div>
                            <div class="store-info">
                                <h3>Payment Terminals</h3>
                            </div>
                        </div>

                        <div class="store-list">
                            <div>
                                <img src="@/assets/payments/icons8-iphone-50.png" alt="">
                            </div>
                            <div class="store-info">
                                <h3>Worldline Tap on Mobile</h3>
                            </div>
                        </div>

                        <div class="store-list">
                            <div>
                                <img src="@/assets/payments/icons8-options-50.png" alt="">
                            </div>
                            <div class="store-info">
                                <h3>Terminal Integration Options</h3>
                                <p>Linkly or TIM API</p>
                            </div>
                        </div>

                    </div>
                    <div class="online">
                        <div class="online-title">
                            <h2>Online</h2>
                        </div>
                        <div class="online-list">
                            <div class="online-list1">
                                <h3>Multiple Gateway Options</h3>
                                <div class="list-text">
                                    <div class="left-list">
                                        <ul>
                                            <li>Worldline Glo bal <br>Online Pay</li>
                                            <li>ANZ eGate</li>
                                        </ul>
                                    </div>
                                    <div class="right-list">
                                        <ul>
                                            <li>ANZ ePOS</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="online-list2">
                                <div class="online-item">
                                    <div>
                                        <img src="../assets/payments/icons8-imac-32.png" alt="">
                                    </div>
                                    <p>Web</p>
                                </div>
                                <div class="online-item">
                                    <div>
                                        <img src="../assets/payments/icons8-iphone-50.png" alt="">
                                    </div>

                                    <p>Mobile</p>
                                </div>
                                <div class="online-item">
                                    <div>
                                        <img src="../assets/payments/icons8-barcode-32.png" alt="">
                                    </div>

                                    <p>API</p>
                                </div>
                            </div>
                            <div class="online-list3">
                                <p>3D-Secure Supported</p>
                            </div>
                        </div>
                    </div>
                </div>
                <!-- 第二行 -->
                <div class="more-part">
                    <div class="more">
                        <h2>More for your business</h2>
                        <div class="two-content">
                           <div class="left-surchar">
                            <div class="more-list">
                                <div class="more-item">
                                    <div>
                                        <img src="../assets/payments/icons8-arrow-50.png" alt="">
                                    </div>
                                    <div class="more-info">
                                        <h3>Surcharging</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="more-list">
                                <div class="more-item">
                                    <div>
                                        <img src="../assets/payments/icons8-my-computer-50.png" alt="">
                                    </div>
                                    <div>
                                        <div class="more-info">
                                            <h3>Merchant Portal</h3>
                                        </div>
                                        <div class="more-text">
                                            <div class="left-more">
                                                <ul>
                                                    <li>Reporting</li>
                                                    <li>Transactions</li>
                                                </ul>
                                            </div>
                                            <div class="right-more">
                                                <ul>
                                                    <li>Analytics</li>
                                                    <li> Electronic <br>
                                                        statements</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="more-list">
                                <div class="more-item">
                                    <div>
                                        <img src="../assets/payments/icons8-exchange-50.png" alt="">
                                    </div>
                                    <div>
                                        <div class="more-info">
                                            <h3>Settlement Options</h3>
                                        </div>
                                        <div class="more-text">
                                            <div class="left-more">
                                                <ul>
                                                    <li> Net settlement</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 

                        <div class="right-dynamic">
                            <div class="more-list">
                                <div class="more-item">
                                    <div>
                                        <img src="../assets/payments/icons8-dollar-euro-exchange-50.png" alt="">
                                    </div>
                                    <div class="more-info">
                                        <h3>Dynamic Currency Conversion</h3>
                                    </div>
                                </div>
                            </div>
                            <div class="more-list">
                                <div class="more-item">
                                    <div>
                                        <img src="../assets/payments/icons8-notepad-50.png" alt="">
                                    </div>
                                    <div>
                                        <div class="more-info">
                                            <h3>Multiple Pricing Models</h3>
                                        </div>
                                        <div class="more-text">
                                            <div class="left-more">
                                                <ul>
                                                    <li>Blended rate pricing packs</li>
                                                    <li>Interchange++</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="more-list">
                                <div class="more-item">
                                    <div>
                                        <img src="../assets/payments/icons8-headset-50.png" alt="">
                                    </div>
                                    <div>
                                        <div class="more-info">
                                            <h3>24/7 Support</h3>
                                        </div>
                                        <div class="more-text">
                                            <div class="left-more">
                                                <ul>
                                                    <li> Dedicated 24/7 local service & expertise <br> to support you via phone or email</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div> 


                        </div>
                        





                    </div>
                </div>
                <!-- 第三行 -->
                <div class="integrate">
                    <div class="integrate-title">
                        <h2>Integrate with shopping carts & software providers</h2>
                    </div>
                    <div class="integrate-logo">
                        <div class="logo-row1">
                            <div><img src="../assets/payments/shopify.png" alt=""></div>
                            <div><img src="../assets/payments/woo.png" alt=""></div>
                            <div><img src="../assets/payments/BigCommerce.png" alt=""></div>
                            <div><img src="../assets/payments/sales.png" alt=""></div>
                            <div><img src="../assets/payments/sap.png" alt=""></div>
                        </div>
                        <div class="logo-row2">
                            <div><img src="../assets/payments/mageto.png" alt=""></div>
                            <div><img src="../assets/payments/prestashop.png" alt=""></div>
                            <div><img src="../assets/payments/pwa.png" alt=""></div>
                            <div><img src="../assets/payments/shopware.png" alt=""></div>
                            
                        </div>
                    </div>
                </div>
                <!-- 第四行 -->
                <div class="accept">
                    <div class="accept-title">
                        <h2>Accept popular cards & digital wallets</h2>
                    </div>
                    <div class="accept-logo">
                        <div class="accept-row1">
                            <div><img src="../assets/payments/visa.png" alt=""></div>
                            <div><img src="../assets/payments/mastercard.png" alt=""></div>
                            <div><img src="../assets/payments/eftops.png" alt=""></div>
                            <div><img src="../assets/payments/american.png" alt=""></div>
                            <div><img src="../assets/payments/jcb.png" alt=""></div>
                            <div><img src="../assets/payments/unionPay.png" alt=""></div>
                        </div>
                        <div class="accept-row2">
                            <div><img src="../assets/payments/Gpay.png" alt=""></div>
                            <div><img src="../assets/payments/pay.png" alt=""></div>
                            <div><img src="../assets/payments/Diners.png" alt=""></div>
                            <div><img src="../assets/payments/Alipay.png" alt=""></div>
                            <div><img src="../assets/payments/weChat.png" alt=""></div>
                            
                        </div>
                    </div>
                </div>

            </div>
            <footerMenu />
        </div>
    </div>
</template>
<script>
import headTop from '@/components/headTop.vue'
import footerMenu from '@/components/footerMenu.vue'
// import svgIcon from '@/components/svgIcon.vue'
export default {
    name: 'Privacy',
    data() {
        return {

        }
    },

    components: {
        headTop,
        footerMenu,
        // svgIcon
    }
}
</script>

<style lang="less" scoped>
.main {
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1;
}

.payment-page {
    // 标题
    .offer-title {
        margin-top: 100px;
        line-height: 36px;

        h1 {
            margin: 50px 0px;
            color: #1a5271;
            font-size: 46px;
        }
    }
    // 第一行
    .two-price {
        display: flex;
        gap: 30px;

        .in-store {
            width: 700px;
            height: 340px;
            background: #f5f7f5;
            border-radius: 30px;
        }

        .store-title {
            h2 {
                margin: 0;
                color: #1a5271;
                padding: 20px;
            }
        }

        .store-list {
            display: flex;
            padding: 10px 30px;

            img {
                width: 50px;
                height: 50px;
            }

            .store-info {
                padding: 10px 0px 10px 40px;

                h3 {
                    margin: 0;
                    color: #1a5271;

                }

                p {
                    color: #1a5271;
                    margin: 0;
                }
            }

        }

        .online {
            width: 700px;
            height: 340px;
            background: #f5f7f5;
            border-radius: 30px;
        }

        .online-title {
            h2 {
                margin: 0;
                color: #1a5271;
                padding: 20px;
            }
        }

        .online-list {
            .online-list1 {
                padding-left: 20px;

                h3 {
                    margin: 0;
                    color: #1a5271;

                }
            }

            .list-text {
                display: flex;
                gap: 30px;
            }

            .online-list2 {
                display: flex;
                justify-content: space-around;

                .online-item {
                    display: flex;
                    justify-content: space-around;

                    img {
                        width: 50px;
                        height: 50px;
                    }

                    p {
                        padding-left: 20px;
                    }
                }
            }

            .online-list3 {
                p {
                    padding-left: 40px;
                }
            }
        }
    }
    // 第二行
    .more {
        // width: 1400;
        height: auto;
        background: #f5f7f5;
        border-radius: 30px;
        margin-top: 30px;
        h2 {
            margin: 0;
            color: #1a5271;
            padding: 20px;
        }
        .two-content{
            display: flex;
            padding-bottom: 10px;
            .left-surchar{
                margin-left: 10px;
            }
            .more-list {
            display: flex;

            .more-item {
                display: flex;
                padding: 10px 30px;

                img {
                    width: 50px;
                    height: 50px;
                }

                .more-info {
                    padding: 10px 0px 10px 40px;

                    h3 {
                        margin: 0;
                        color: #1a5271;
                    }
                }

                .more-text {
                    display: flex;
                }

                ul {
                    margin: 0;
                //   margin-left: 20px;
                }
            }
           
        }
         .right-dynamic{
                margin-left: 160px;
            }
        }   

      
    }

    // 第三行
.integrate{
    width: 1400;
    height: auto;
    background: #f5f7f5;
    border-radius: 30px;
    margin-top: 30px;
    .integrate-title{
        h2{
            margin: 0;
            color: #1a5271;
            padding: 20px;
        }
    }
    .integrate-logo{        
        .logo-row1{
            display: flex;
            align-items: center;
            padding:20px 60px;
            gap: 120px;
            img{
                width: 120px;
                height: auto;
            }
        }
        .logo-row2{
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 20px 100px;
            gap: 100px;
            img{
                width: 120px;
                height: auto;
            }
        }
    }
}
// 第四行
.accept{
    width: auto;
    height: auto;
    background: #f5f7f5;
    border-radius: 30px;
    margin-top: 30px;
    margin-bottom: 80px;
    .accept-title{
        h2{
            margin: 0;
            color: #1a5271;
            padding: 20px;
        }
    }
    .accept-logo{        
        .accept-row1{
            display: flex;
            align-items: center;
            padding:20px 40px;
            gap: 80px;
            img{
                width: 120px;
                height: auto;
            }
        }
        .accept-row2{
            display: flex;
            align-items: center;
            padding: 20px 40px;
            gap: 110px;
            img{
                width: 130px;
                height: auto;
            }
        }
    }
}

}
</style>