17pdf_front_end/pages/pricing.vue

<!--
 * @Description: 
 * @Author: 欧阳承珺
 * @LastEditors: 欧阳承珺
 * @Date: 2022-10-26 16:53:24
 * @LastEditTime: 2022-11-14 11:37:46
-->
<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"
            @click="handlSubmit"
        >
            立即订阅
        </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"
            @click="handlSubmit"
            >
            立即订阅
            </button>
        </div>
        </div>
    </div>
    <el-dialog
        :visible.sync="visiable"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        width="480px"
        append-to-body
        center>
        <div class="changepwd-tittle">
            <p class="text-20px text-center text-$btn-color-primary">提示</p>
        </div>
        <div class="text-16px text-[#707070] text-center my-30px">
            您还未登录或注册，请先<span class="text-$btn-color-primary cursor-pointer" @click="login">登录</span>或<span class="text-$btn-color-primary cursor-pointer" @click="register">注册</span>
        </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
        visiable: false
    }
  },
  head() {
    return {
      title: '订阅PDF套餐，体验更多格式转档服务与云端空间',
      meta: [
        {
          name: 'keywords',
          content: 'PDF转pptx，PDF转docx，ai转psd，pdf转xlsx'
        },
        {
        hid: 'description',
        content: '17PDF套餐订阅中心，免费会员注册，订阅基础套餐和商务套餐享有更多文件格式转换券及加云云端空间，成就您移动无纸化办公！'
       },
      ]
    }
  },
  methods: {
    handlSubmit() {
      if (!this.$store.state.token) {
        this.visiable = true
        return
      }
      this.$store.commit('OPEN_LOGIN', true)
      this.$store.commit('SET_INTERFACE', 'vip')
    },
    login() {
      this.visiable = false
      this.$store.commit('OPEN_LOGIN', true)
      this.$store.commit('SET_INTERFACE', 'login')
    },
    register() {
      this.visiable = false
      this.$store.commit('OPEN_LOGIN', true)
      this.$store.commit('SET_INTERFACE', 'register')
    }
  },
}
</script>

<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>