17pdf_front_end/pages/pricing.vue

<template>
    <div>
        <div class="pricing_banner w-full h-340px bg-no-repeat mb-77px pt-86px ">
            <div class=" w-634px h-168px bg-[#d2b99799] my-0 mx-auto text-center text-[#fff] pt-30px">
                <p class="bg_title text-[48px] leading-[1.428571429]">17会员中心</p>
                <p class="bg_text text-[18px] leading-[1.428571429]">文件格式无限转档，纯净无广告，更多进阶功能等你体验</p>
                <button type="button"
                    class="bg_button w-145px h-48px rounded-[29px] text-[18px] leading-[48px] my-22px mx-auto border-0 ">立即订阅</button>
            </div>

        </div>
        <div class="pricing_wrap ">
            <div class="pricing_content first">
                <div class="content_title flex justify-center items-center mb-50px ">
                    <img src="http://cn-file.17pdf.com/website/member_v2/pop_member_decorate2_title.png" alt="引號"
                        class="w-18px h-9px inline-block">
                    <p class="text-[32px] text-[#d5b07d] leading-[48px] inline-block px-24px">会员主打特权</p>
                    <img src="http://cn-file.17pdf.com/website/member_v2/pop_member_decorate1_title.png" alt="引號"
                        class="w-18px h-9px inline-block">
                </div>
                <div class="content_line w-780px mx-auto">
                    <div class="content_box flex justify-between items-center mb-65px">
                        <img src="http://cn-file.17pdf.com/website/pricings/v2/pic_members_removeads.png" alt="AD"
                            class="big_img align-middle">
                        <div class="text_container w-420px pl-20px">
                            <p class="box_title mb-8px text-[24px] leading-[36px] font-bold text-[#333]">移除广告</p>
                            <p class="box_text text-[18px] leading-[27px] text-[#666]">PDF
                                Reader会员拥有移除广告特权，尊享纯净版客户端，办公全程无干扰</p>
                        </div>
                    </div>
                    <div class="content_box flex justify-between items-center mb-65px">
                        <div class="text_container w-420px pl-20px">
                            <p class="box_title mb-8px text-[24px] leading-[36px] font-bold text-[#333]">免费无限转换格式</p>
                            <p class="box_text text-[18px] leading-[27px] text-[#666]">支持PDF to
                                Word、PPT、Excel、TXT、JPG/PNG无限次数转换，高效稳定</p>
                        </div>
                        <img src="http://cn-file.17pdf.com/website/pricings/member_fuction_pic_trans.png" alt=""
                            class="big_img align-middle">
                    </div>
                </div>
                <div class="button_subscribe mt-5px mb-80px text-center">
                    <button type="button"
                        class="bg_button w-330px h-56px rounded-[29px] text-[26px] leading-[56px] text-[#fff] font-medium">立即订阅</button>
                </div>
            </div>
        </div>
    </div>

</template>



<style>
.pricing_banner {
    background: url(http://cn-file.17pdf.com/website/member_v2/members_banner_bg.png) no-repeat;
    background-size: 100% 100%;
}
.bg_button {
    background: linear-gradient(140.3deg, #c6995c, #e7caa3);
}
</style>