trustypay/src/views/index.vue

<template>
    <div class="homeWrap">
        <headTop />
        <div class="home">
            <!-- 弹窗面板 -->
            <div>
                <Panel />
            </div>

            <div class="topBanner">
                <div class="bannerBg">
                    <div class="bannerText">
                        <div class="bannerInfo">
                            <div class="leftHead">
                                <h1>Smart Solutions,<br> Seamless Transactions</h1>
                                <p>Unlock the Future of Payments Today with
                                    TrustyPay</p>
                            </div>
                            <div class="leftContent">
                                <p>Trusty Pay is your Ultimate Payment Partner. Pioneering Tomorrow's Payment Landscape
                                    in Australia. As a locally registered entity, we specialise in cutting-edge payment
                                    technology and solutions for businesses in Retail, Hospitality, and Professional
                                    Services. Our commitment extends beyond transactions; we're your strategic partner
                                    for growth.</p>
                            </div>
                            <div class="saleBtn">
                                <router-link to="/ContactUs"><el-button>Contact Sales</el-button></router-link>
                            </div>
                            <div class="offerCard">
                                <div class="yellowCard">
                                    <h1>Our Offer</h1>
                                </div>
                                <div class="greenCard">
                                    <div class="cardList">
                                        <div class="cardTitle">
                                           <h1>0.81%</h1> 
                                        </div>
                                        <div class="cardText">
                                        <div><p>VISA/MASTERCARD & EFTPOS</p></div>
                                        <div><p>Transaction Fee</p></div>
                                        <div><span>(exc.GST)</span></div>
                                        
                                        </div>
                                        <div class="cardImg">
                                            <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>                                      
                                    </div>

                                    <div class="cardList1">
                                        <div class="cardTitle1">
                                           <h1>2.0%</h1> 
                                        </div>
                                        <div class="cardText1">
                                        <div><p>UPI and alternate Payments</p></div>
                                        <div><span>(exc.GST)</span></div>
                                        
                                        </div>
                                        <div class="cardImg1">
                                            <div><img src="../assets/payments/unionPay.png" alt=""></div>
                                            <div><img src="../assets/payments/Alipay.png" alt=""></div>
                                            <div><img src="../assets/payments/weChat.png" alt=""></div>
                                        </div>                                      
                                    </div>
                                    <div class="cardList2">
                                        <div class="cardTitle2">
                                           <h1>$27.23</h1> 
                                        </div>
                                        <div class="cardText2">
                                        <div><p>Terminal rental (Per month/terminal)</p></div>
                                        <div><span>(exc.GST)</span></div>                                        
                                        </div>                                      
                                    </div>
                                </div>

                            </div>                           
                        </div>
                        <div class="rightText">
                            <img src="../assets/index/Group98.png" alt="">
                        </div>
                    </div>
                </div>
            </div>

            <!-- 图标 -->
            <div class="accept">
                <div class="main">
                    <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>

            <!-- why choose trustyPay -->
            <div class="mainContent8">
                <div class="main">
                    <div class="choose">
                        <h2>Why Choose TrustyPay?</h2>
                    </div>

                    <div class="chooseList">
                        <div class="greenBox">
                            <div class="greenItem"><svg-icon icon-class="choose1" class="icon" /></div>
                            <div class="greenText">Local POC & team Business Growth and support</div>
                        </div>
                        <div class="greenBox">
                            <div class="greenItem"><svg-icon icon-class="choose2" class="icon" /></div>
                            <div class="greenText">Small to Medium Enterprises focus</div>
                        </div>
                        <div class="greenBox">
                            <div class="greenItem"><svg-icon icon-class="choose3" class="icon" /></div>
                            <div class="greenText">Payments made <br> simple</div>
                        </div>
                        <div class="greenBox">
                            <div class="greenItem"><svg-icon icon-class="choose4" class="icon" /></div>
                            <div class="greenText">Reliability through <br> Proven ANz Worldline <br> Solutions</div>
                        </div>
                        <div class="greenBox">
                            <div class="greenItem"><svg-icon icon-class="choose5" class="icon" /></div>
                            <div class="greenText">Competitive <br> pricing</div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- We serve -->

            <!-- Durable and Easy-to-useTerminals for Fast Checkouts -->
            <div class="mainContent">
                <div class="main">
                    <div class="title1">
                        <h2>Durable and Easy-to-use </h2>
                        <h2>Terminals for Fast Checkouts</h2>
                    </div>
                    <div class="subhead">
                        Take payments fast from anywhere - at the counter or on the move
                    </div>
                    <div class="infoList">
                        <!-- 1 -->
                        <div class="infoItem">
                            <div class="bg-b">
                                <svg-icon icon-class="contactless" class="icon" />
                                Contactless
                            </div>
                            <div class="bg-b">
                                <svg-icon icon-class="puzzle" class="icon" />
                                Standalone or Integrated
                            </div>
                        </div>
                        <!-- 2 -->
                        <div class="infoItem">
                            <div class="bg-b">
                                <svg-icon icon-class="payments" class="icon" />
                                Mobile Payments
                            </div>
                            <div class="bg-b">
                                <svg-icon icon-class="security" class="icon" />
                                Password enabled security features
                            </div>
                        </div>
                        <!-- 3 -->
                        <div class="infoItem">
                            <div class="bg-b">
                                <svg-icon icon-class="touch" class="icon" />
                                Multimedia touch screen 3.5"
                            </div>
                            <div class="bg-b">
                                <svg-icon icon-class="usd" class="icon" />
                                Surcharging and Tipping
                            </div>
                        </div>
                        <!-- 4 -->
                        <div class="infoItem">
                            <div class="bg-b">
                                <svg-icon icon-class="printer" class="icon" />
                                Printer
                            </div>
                            <div class="bg-b">
                                <svg-icon icon-class="network" class="icon" />
                                Multi-Network Card Routing
                            </div>
                        </div>
                        <!-- 5 -->
                        <div class="infoItem">
                            <div class="bg-b">
                                <svg-icon icon-class="4G" class="icon" />
                                4G, Wi-Fi, Ethernet & Bluetooth
                            </div>
                            <div class="bg-b">
                                <svg-icon icon-class="conversion" class="icon" />
                                Dynamic Currancy Conversion
                            </div>
                        </div>

                    </div>
                </div>
            </div>

            <!-- Partners -->
            <div class="mainContent2">
                <div class="main">
                    <div class="parTitle">
                        <h2>Partners</h2>
                    </div>
                    <!-- 图标 -->
                    <div class="parImg">
                        <div><img src="@/assets/index/datamesh.png" alt=""></div>
                        <div><img src="@/assets/index/pinch.png" alt=""></div>
                        <div><img src="@/assets/index/touch2Pay.png" alt=""></div>

                    </div>

                    <hr>
                </div>

            </div>

            <!-- tap on Mobile -->
            <div class="mainContent3">
                <div class="main tapContent">
                    <div class="tapTitle">
                        <h2>Tap on Mobile</h2>
                        <p>Make payments a breeze, for you and your customers. Get Tap onMobile, the mobile EFTPOS
                            you've been waiting for.</p>
                        <div class="tapSvg">
                            <svg-icon icon-class="IOS" class="ios" />
                            <svg-icon icon-class="Android" class="android" />
                        </div>
                        <!-- learn more -->
                        <div class="learnMore">
                            <router-link to="/ToonMobile"><el-button class="btnLearn">Learn
                                    more</el-button></router-link>
                        </div>
                    </div>
                    <div class="tapImg">
                        <img src="@/assets/index/Ellipse24.png" alt="">
                    </div>

                </div>
            </div>

            <!-- Innovation 隐藏 -->


            <!-- Plug&play -->
            <div class="mainContent5">
                <div class="main">
                    <div class="plugTitle">
                        <h2>Plug & Play Integrations</h2>
                        <h4>with leading eCommerce Platforms</h4>
                    </div>
                    <div class="plugImg">
                        <div class="plugList1">
                            <div><img src="@/assets/index/sap.png" alt=""></div>
                            <div><img src="@/assets/index/shopify.png" alt=""></div>
                            <div><img src="@/assets/index/sale.png" alt=""></div>
                            <div><img src="@/assets/index/magento.png" alt=""></div>
                            <div><img src="@/assets/index/BigCommerce.png" alt=""></div>
                        </div>
                        <div class="plugList2">
                            <div><img src="@/assets/payments/woo.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>
            <!-- plug列表 -->
            <div class="mainContent6">
                <div class="main">
                    <div class="plugList">
                        <!-- 1 -->
                        <div class="plugItem">
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Hosted Payment Page</div>
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Standalone or Integrated
                            </div>
                        </div>
                        <!-- 2 -->
                        <div class="plugItem">
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Hosted Tokenisation Page
                            </div>
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Password enabled security
                                features</div>
                        </div>
                        <!-- 3 -->
                        <div class="plugItem">
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />All Payment methods
                                available on PSP</div>
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Surcharging and Tipping
                            </div>
                        </div>
                        <!-- 4 -->
                        <div class="plugItem">
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Provisioning API (for
                                settings synchronisation)</div>
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Multi-Network Card Routing
                            </div>
                        </div>
                        <!-- 5 -->
                        <div class="plugItem">
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Pre-configured logic
                                forAutomatic/Delayed Capture</div>
                            <div class="form1"><svg-icon icon-class="circle" class="icon" />Dynamic Currancy Conversion
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- Leveraging partnership标题 -->
            <div class="leverTitle">
                <div class="main">
                    <div>
                        <h2>Leveraging partnership</h2>
                    </div>
                    <div class="withImg">
                        <h4>with </h4>
                        <img src="@/assets/index/leveraging.png" alt="">
                    </div>

                </div>
            </div>

            <!-- Sales Team -->
            <Sales />

            <!-- FAQ -->
            <div class="faqPage">
                <div class="main">
                    <div class="quesTitle">
                        <h2>Frequently Asked Questions</h2>
                    </div>
                    <div class="collapseInfo">
                        <el-collapse v-model="activeNames" @change="handleChange">
                            <el-collapse-item title="What is Trustypay? " name="1">
                                <div>Trustypay, a leading payment solutions company, has strategically partnered with
                                    major payment service providers in Australia. Our mission is to deliver secure and
                                    efficient payment processing services to our valued clients.</div>
                            </el-collapse-item>

                            <el-collapse-item
                                title="What types of businesses can benefit from TrustyPay's payment solutions?"
                                name="2">
                                <div>TrustyPay's payment solutions are designed to benefit businesses of all sizes and
                                    industries, including retailers, service providers, and small business owners.
                                    Whether you operate a brick-and-mortar store, an online shop, or a mobile business,
                                    TrustyPay can help streamline your payment processes and support your growth.</div>
                            </el-collapse-item>

                            <el-collapse-item title="What payment methods does Trustypay support? " name="3">
                                <div>Trustypay supports a wide range of payment methods, including credit cards, debit
                                    cards, digital wallets, and direct bank transfers. Our goal is to offer flexibility
                                    and convenience for both businesses and their customers.</div>
                            </el-collapse-item>
                            <el-collapse-item
                                title="Can I use TrustyPay payment solutions with another business account entity?"
                                name="4">
                                <div>Yes, you can use TrustyPay payment solutions with another business account entity.
                                    It does not interfere with the operation of your existing business account.
                                    Depending on the service you choose, for some users, settlement is processed on the
                                    same day, while for others with different banking partners, settlement typically
                                    occurs on a T+1 basis. TrustyPay ensures seamless integration with various business
                                    account entities to facilitate efficient payment processing.</div>
                            </el-collapse-item>
                            <el-collapse-item title="Do I have access to Merchant Portal? " name="5">
                                <div>Yes, it allows you to get a structured overview of your transactions, settlements
                                    and important details about your business. By using the various filter functions,
                                    you can search for specific transactions and view the relevant details of each
                                    transaction. You can also manually export reports in .xls or .csv, or set up
                                    automatic reporting so the most important reports for you and your business are
                                    emailed directly to you. </div>
                            </el-collapse-item>
                        </el-collapse>
                    </div>


                </div>

            </div>


            <!-- phone and email  -->
            <!-- <div class="phoneEmail">
                <div class="main">
                    <div class="twoCard">
                        <div class="phoneCard">
                            <div style="text-align: center; padding-top: 60px;">
                                <svg-icon icon-class="tel" class="icon" style="width:40px; height: 40px;" />
                            </div>
                            <p>1300 67 61 61</p>
                        </div>
                        <div class="phoneCard">
                            <div style="text-align: center; padding-top: 60px;">
                                <svg-icon icon-class="email" class="icon" style="width: 40px; height: 40px;" />
                            </div>
                            <p>hello@trustypay.com.au</p>                           
                        </div>
                    </div>
                </div>
            </div> -->

            <!-- button -->
            <div class="buttonContainer">

                <div class="bgImage">
                    <div class="leftInfo">
                        <div class="leftText">
                            <h2>Become a part of the future</h2>
                            <p>TrustyPay's solution ensures seamless, secure, and cost-effective transactions, fostering
                                an environment where businesses can flourish by reducing friction in payment processing,
                                SMEs and NFPs can focus on growth and customer satisfaction.</p>
                            <p>TrustyPay provides a suite of innovative Payment Solutions tailored for the unique needs
                                of customers in Australia and South-East Asian community. It's a solution designed to
                                provide a variety of payment options, reduce transaction fees, and integrate emerging
                                technologies like blockchain and mobile payments.</p>
                            <div class="leftBtn">
                                <router-link to="/ContactUs"><el-button plain>Sign up</el-button></router-link>
                            </div>
                        </div>

                    </div>
                </div>
            </div>



            <!-- footer -->
            <footerMenu />
        </div>
    </div>

</template>

<script>

import headTop from '@/components/headTop.vue';
import SvgIcon from '@/components/svgIcon.vue';
import footerMenu from '@/components/footerMenu.vue';
import Panel from '@/components/Panel.vue';
import Sales from '@/components/Sales.vue';


export default {
    name: 'index',
    components: {
        headTop,
        SvgIcon,
        footerMenu,
        Panel,
        Sales,

    },
    data() {
        return {
            index: 1,
            isShow: true,
            input: '',
            activeNames: ['1'],

        }
    },
    created() {
        // 获取window的宽度
        let width = window.innerWidth;
        if (width < 768) {
            window.confirm('We are currently undergoing maintenance for the adaptive functions on the mobile end. We apologize for any inconvenience caused.');
        }
    },

    methods: {
        handleChange(val) {
            console.log(val);
        },



    }
}
</script>

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

hr {
    width: 900px;
    border: none;
    height: 2px;
    background: linear-gradient(to right, #00A0E8, #99C938, #FFF436);
}

.topBanner {
    .bannerBg {
        width: 100%;
        height: 620px;
        background: url("@/assets/index/bannerBg.png") no-repeat;
        background-size: cover;
    }

    .bannerText {
        display: flex;
        justify-content: center;
        gap: 30px;

        .bannerInfo {

            width: 630px;
            margin-top: 50px;

            .leftHead {
                margin-top: 30px;

                h1 {
                    color: #fff;
                    font-size: 38px;
                    margin: 0;
                }

                h2 {
                    color: #fff;
                    font-size: 24px;
                    font-weight: 400;

                }

                p {
                    color: #fff;
                    font-size: 24px;
                }
            }

            .leftContent {
                p {
                    color: #fff;
                    font-size: 16px;
                    line-height: 24px;
                }
            }

            .saleBtn {
                .el-button {
                    width: 200px;
                    height: auto;
                    margin-top: 10px;
                    color: #72c8f2;
                    border-radius: 8px;
                    font-size: 20px;
                }
            }

            .offerCard {
                width: 530px;
                height: auto;
                position: relative;

                .yellowCard {
                    position: absolute;
                    width: 90px;
                    height: 90px;
                    background: #fcf558;
                    border-radius: 50%;
                    right: 0;
                    top: -34px;
                    z-index: 1;
                    h1 {
                        font-size: 22px;
                        text-align: center;
                    }
                }

                .greenCard {
                    position: absolute;
                    top:30px;
                    .cardList {
                        width: 530px;
                        height: 95px;
                        background: #a7de50;
                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
                        border-radius: 12px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .cardTitle{                          

                            h1{
                                margin: 0;
                                color: #fff;
                            }
                        }
                        .cardText{
                            margin-left: 18px;
                            p{
                                color: #fff;
                                margin: 0;
                            }
                            span{
                                color: #fff;
                                font-size: 12px;
                            }
                        }
                       .cardImg{
                        display: flex;
                        align-items: center;
                        margin-top: 30px;
                        gap: 8px;
                        img{
                            width: 50px;
                            height: auto;
                        }
                       }
                    }
                    .cardList1 {
                        width: 530px;
                        height: 95px;
                        background: #a7de50;
                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
                        border-radius: 12px;
                        display: flex;
                        align-items: center;                     
                        margin-top: 15px;
                       
                        .cardTitle1{                          
                            margin-left: 15px;
                            h1{
                                margin: 0;
                                color: #fff;
                            }
                        }
                        .cardText1{
                            margin-left: 34px;
                            p{
                                color: #fff;
                                margin: 0;
                            }
                            span{
                                color: #fff;
                                font-size: 12px;
                            }
                        }
                       .cardImg1{
                        display: flex;
                        align-items: center;
                        margin-top: 30px;
                        gap: 8px;
                        img{
                            width: 50px;
                            height: auto;
                        }
                       }
                    }
                    .cardList2 {
                        width: 530px;
                        height: 95px;
                        background: #a7de50;
                        box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
                        border-radius: 12px;
                        display: flex;
                        align-items: center;
                        margin-top: 15px;
                        .cardTitle2{                          
                            margin-left: 12px;
                            h1{
                                margin: 0;
                                color: #fff;
                            }
                        }
                        .cardText2{
                            margin-left: 15px;
                            p{
                                color: #fff;
                                margin: 0;
                            }
                            span{
                                color: #fff;
                                font-size: 12px;
                            }
                        }

                    }
                }
            }          
        }

        .rightText {
            margin-top: 30px;

            img {
                width: 627px;
                height: 1197px;
            }
        }

    }

}

// 图标
.accept {
    margin: auto;
    // width: 1200px;
    height: auto;
    // background: #f5f7f5;
    border-radius: 30px;
    margin-top: 280px;

    .accept-title {
        h2 {
            margin: 0;
            font-size: 44px;
            color: #1a5271;
            padding: 70px 0;
            text-align: center;
        }
    }

    .accept-logo {
        .accept-row1 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 70px;
            gap: 70px;

            img {
                width: 120px;
                height: auto;
            }
        }

        .accept-row2 {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 20px 70px;
            gap: 100px;

            img {
                width: 130px;
                height: auto;
            }
        }
    }
}

.mainContent {
    margin: 0 auto;

    .title1 {
        h2 {
            margin: 0;
            text-align: center;
            color: #1a5271;
            font-size: 44px;
            font-weight: 600;
        }

    }

    .subhead {
        color: #1a5271;
        text-align: center;
        font-size: 26px;
        padding: 30px;
    }

    .infoList {
        margin-left: 220px;

        .infoItem {
            display: flex;
            gap: 40px;

            .bg-b {
                margin-top: 26px;
                width: 400px;
                height: 70px;
                border-radius: 10px;
                background-color: #60c5f4;
                box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
                line-height: 70px;
                color: #1a5271;

                .icon {
                    width: 40px;
                    height: 40px;
                    padding: 0px 20px;
                }
            }
        }


    }
}

.mainContent2 {
    margin-top: 100px;
    background: #f8f8f8;

    .parTitle {
        h2 {
            color: #1a5271;
            text-align: center;
            font-weight: 600;
            font-size: 46px;
            margin: 0;
            padding-top: 40px;
        }
    }

    .parImg {
        padding: 60px 0px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 100px;

        img {
            width: 200px;
            height: auto;
        }
    }

}

.tapContent {
    display: flex;
    gap: 140px;
    padding-left: 100px;

    .tapTitle {
        margin-top: 100px;
        padding: 0px 44px 20px 0px;

        h2 {
            font-size: 44px;
            color: #1a5271;
            font-weight: 600;
        }

        p {
            font-size: 24px;
            color: #1a5271;
            line-height: 42px;

        }

        .learnMore {
            margin: 60px 0;

            .btnLearn {
                width: 190px;
                padding: 14px;
                font-size: 20px;
                color: #fff;
                border-radius: 10px;
                background: #46b0ed;
            }
        }

        .tapSvg {
            .ios {
                width: 50px;
                height: 50px;
                padding: 0 20px 0 0;
            }

            .android {
                width: 60px;
                height: 60px;
            }
        }
    }

    .tapImg {
        img {
            width: 622px;
            height: 596px;
            padding: 130px 70px 0px 0px;
        }
    }
}

.faqPage {
    margin-top: 100px;

    .quesTitle {
        h2 {
            text-align: center;
            color: #1a5271;
            font-size: 42px;
        }
    }


    .collapseInfo {
        width: 900px;
        margin: auto;
        padding: 24px 0;

        .el-collapse {
            border-top: none;
            border-bottom: none;

            .el-collapse-item {
                padding: 10px 0;
            }
        }

        .el-collapse-item__header {
            border-radius: 10px;
            background: #fdfab5;
            border-bottom: none;
            height: 80px;
            padding-left: 30px;
            color: #6a6721;
            font-size: 16px;

            .el-collapse-item__arrow {
                font-weight: 600;
                padding-right: 20px;
            }
        }

        .el-collapse-item__wrap {
            border-bottom: none;

            .el-collapse-item__content {

                padding: 40px 30px;
                color: #73702e;
                font-size: 16px;
            }
        }
    }

}



.mainContent4 {
    margin-top: 60px;

    h2 {
        color: #1a5271;
        text-align: center;
        font-size: 44px;
    }

    .innovationPart {
        display: flex;
        margin: 0 auto;

        .innovationInfo {
            width: 400px;
            padding-top: 160px;
            color: #1a5271;
        }

        p {
            line-height: 28px;
        }
    }
}

.mainContent5 {
    margin-top: 90px;
    padding-bottom: 60px;
    box-shadow: 0px 14px 17px 0px #0000000A;

    .plugTitle {
        text-align: center;
        color: #1a5271;
        padding-bottom: 50px;

        h2 {
            font-size: 48px;
        }

        h4 {
            font-size: 28px;
        }
    }

    .plugImg {
        .plugList1 {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 60px;

            img {
                width: 200px;
                height: auto;
            }
        }

        .plugList2 {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-top: 40px;
            gap: 60px;

            img {
                width: 160px;
                height: auto;
            }
        }
    }
}

.mainContent6 {
    padding-top: 100px;
    width: 1000px;
    margin: 0 auto;

    .plugList {
        margin-bottom: 100px;

        .plugItem {
            display: flex;
            gap: 40px;

            .form1 {
                margin-top: 26px;
                width: 490px;
                height: 70px;
                border-radius: 10px;
                background-color: #fff;
                box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
                line-height: 70px;
                color: #1a5271;

                .icon {
                    width: 20px;
                    height: 20px;
                    padding: 0px 20px;
                }
            }
        }
    }


}

// Why Choose TrustyPay?
.mainContent8 {
    margin-top: 100px;

    .choose {
        text-align: center;

        h2 {
            color: #1a5271;
            font-size: 44px;
        }
    }

    .chooseList {
        display: flex;
        justify-content: space-around;
        margin: 86px 0px;

        .greenBox {
            width: 200px;
            margin: 0 auto;

            .greenItem {
                margin: 0 auto;
                width: 130px;
                height: 130px;
                border-radius: 50%;
                background: #a7de50;

                .icon {
                    width: 60px;
                    height: 60px;
                    padding: 35px 35px;
                }

            }

            .greenText {
                margin: 0 auto;
                text-align: center;
                color: #527410;
                padding: 20px 0px;
                line-height: 22px;
            }
        }

    }
}

.leverTitle {
    margin-top: 150px;
    text-align: center;

    h2 {
        font-size: 64px;
        color: #1a5271;
    }

    .withImg {
        display: flex;
        justify-content: center;

        img {
            width: 444px;
            height: auto;
        }

        h4 {
            font-size: 30px;
            color: #1a5271;
        }
    }
}


// .phoneEmail {
//     .twoCard {
//         display: flex;
//         justify-content: center;
//         gap: 40px;
//         padding: 80px 0px;

//         .phoneCard {
//             width: 450px;
//             height: 250px;
//             border-radius: 12px;
//             // box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 0 6px rgba(0, 0, 0, .04);
//             box-shadow: 0px 15px 34px 0px #0000001A;

//             p {
//                 font-size: 18px;
//                 font-weight: 600;
//                 color: #005372;
//                 text-align: center;
//                 padding-top: 16px;
//             }


//         }
//     }
// }

.buttonContainer {

    .bgImage {
        // width: 1440px;
        // height: 731px;
        background: url(@/assets/index/BottomImage.png) no-repeat center center;
        background-size: cover;
    }

    .leftInfo {
        width: 64.375rem;
        height: 56.25rem;
        background-color: #33C6F4;
        opacity: 92%;

        .leftText {
            width: 440px;
            height: auto;
            margin: auto;
            padding-top: 100px;

            h2 {
                font-size: 48px;
                color: #fff;
            }

            p {
                font-size: 16px;
                color: #fff;
                line-height: 24px;
            }

            .leftBtn {
                padding-top: 30px;

                .el-button {
                    width: 120px;
                    height: 38px;
                    border-radius: 8px;
                    color: #47aae9;
                }
            }
        }
    }
}
</style>