123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342 |
- <template>
- <div class="page_vip">
- <tit :tname="name"/>
- <!-- 顶部nav切换 -->
- <div class="vip_nav">
- <p v-for="(item,index) in navs" :key="index" @click="addClass(index)" v-bind:class="{active:index==current}">
- {{ item.text }}
- </p>
- </div>
- <!-- end:顶部nav切换 -->
-
- <!-- 会员详情切换 -->
- <div class="vip_content">
- <div class="slide_box clear-both">
- <!-- 招投标会员 -->
- <div class="vip_item vip_ztb">
- <div class="vip_card">
- <h4>招投标专属会员</h4>
- <div>
- <p><i>· 已购条数</i><span>5/30</span>条</p>
- <p><i>· 到期时间</i><span>2019-05-20 13:14</span></p>
- </div>
- <nuxt-link to="" class="pay_more">续费</nuxt-link>
- <!-- <a href="#" class="pay_more"></a> -->
- </div>
- <!-- 添加地区 -->
- <div class="options">
- <div class="op_area">
- <h3>选择业务地区</h3>
- <ul>
- <li class="all">全国</li>
- <!-- 全国和省份不能共存,此处展示样式。默认全国。 -->
- <li>北京<i></i></li>
- <li class="add add_area" @click="selectArea">+ 添加</li>
- </ul>
- </div>
- </div>
- <!-- end:添加地区 -->
- <!-- 添加行业 -->
- <div class="options">
- <div class="op_area">
- <h3>选择行业范围</h3>
- <ul>
- <li class="all">全部</li>
- <li class="add add_hy" @click="selectIndustry">+ 添加</li>
- </ul>
- </div>
- </div>
- <!-- end:添加行业 -->
- <!-- 价格套餐 -->
- <div class="options">
- <div class="opt_price">
- <h3>工程项目信息专属会员套餐<br></h3>
- <i>开通会员,立享会员特权!</i>
- <ul class="opt_buy clear-both">
- <li>
- <div class="to_buy">
- <p class="tag_yh">限时优惠</p>
- <p class="buy_month">1月</p>
- <p class="buy_price"><span>¥</span>399</p>
- <nuxt-link to="">购买</nuxt-link>
- <!-- <del>666</del> -->
- </div>
- </li>
- <li>
- <div class="to_buy">
- <p class="buy_month">3月</p>
- <p class="buy_price"><span>¥</span>998</p>
- <del>1197</del>
- <nuxt-link to="">购买</nuxt-link>
- </div>
- </li>
- <li>
- <div class="to_buy">
- <p class="buy_month">6月</p>
- <p class="buy_price"><span>¥</span>1197</p>
- <del>¥1288</del>
- <nuxt-link to="">购买</nuxt-link>
- </div>
- </li>
- <li>
- <div class="to_buy">
- <p class="tag_yh">限时优惠</p>
- <p class="buy_month">一年</p>
- <p class="buy_price"><span>¥</span>399</p>
- <del>¥3688</del>
- <nuxt-link to="">购买</nuxt-link>
- </div>
- </li>
- </ul>
- <div class="all_buy">
- <div class="to_buy">
- <p class="tag_yh">4折 加送3个月</p>
- <p class="buy_month">全国年费直通车</p>
- <p class="buy_price"><span>¥</span>1915/年</p>
- <del>¥4699</del>
- <nuxt-link to="">购买</nuxt-link>
- <!-- <del>666</del> -->
- </div>
- </div>
- </div>
- </div>
- <!-- end:价格套餐 -->
- <!-- 套餐特权 -->
- <div class="priv">
- <h4>工程项目信息专属会员特权</h4>
- <ul>
- <li>
- <p>免费查看工程信息</p>
- <span>免费查看工程信息</span>
- </li>
- <li>
- <p>特享精准人脉网</p>
- <span>通过熟人认识工程负责人</span>
- </li>
- <li>
- <p>优秀供应商</p>
- <span>成为优秀供应商</span>
- </li>
- <li>
- <p>平台推荐</p>
- <span>通过平台推荐</span>
- </li>
- <li>
- <p>会员专属名片</p>
- <span>免费查看工程信息</span>
- </li>
- </ul>
- </div>
- <!-- end:套餐特权 -->
- <!-- 会员说明 -->
- <div class="explain">
- <p>会员说明:</p>
- <ul>
- <li>· 会员一经开通不支持退款;</li>
- <li>· 购买会员后立即生效</li>
- <li>· 购买问题请联系客服:0755-26921213</li>
- </ul>
- </div>
- <!-- end:会员说明 -->
- </div>
- <!-- end:招投标会员 -->
-
- <!-- 工程项目会员 -->
- <div class="vip_item vip_gcxm">
- <div class="vip_card">
- <h4>招投标专属会员</h4>
- <div>
- <p><i>· 到期时间</i><span>2019-05-20 13:14</span></p>
- </div>
- <nuxt-link to="" class="pay_more">购买</nuxt-link>
- </div>
- <!-- 添加地区 -->
- <div class="options">
- <div class="op_area">
- <h3>选择业务地区</h3>
- <ul>
- <li class="all">全国</li>
- <!-- 全国和省份不能共存,此处展示样式。默认全国。 -->
- <li>北京<i></i></li>
- <li class="add add_area" @click="selectArea">+ 添加</li>
- </ul>
- </div>
- </div>
- <!-- end:添加地区 -->
- <!-- 价格套餐 -->
- <div class="options">
- <div class="opt_price">
- <h3>工程项目信息专属会员套餐<br></h3>
- <i>开通会员,立享会员特权!</i>
- <ul class="opt_buy clear-both">
- <li>
- <div class="to_buy">
- <p class="tag_yh">限时优惠</p>
- <p class="buy_month">1月</p>
- <p class="buy_price"><span>¥</span>399</p>
- <nuxt-link to="">购买</nuxt-link>
- <!-- <del>666</del> -->
- </div>
- </li>
- <li>
- <div class="to_buy">
- <p class="buy_month">3月</p>
- <p class="buy_price"><span>¥</span>998</p>
- <del>1197</del>
- <nuxt-link to="">购买</nuxt-link>
- </div>
- </li>
- <li>
- <div class="to_buy">
- <p class="buy_month">6月</p>
- <p class="buy_price"><span>¥</span>1197</p>
- <del>¥1288</del>
- <nuxt-link to="">购买</nuxt-link>
- </div>
- </li>
- <li>
- <div class="to_buy">
- <p class="tag_yh">限时优惠</p>
- <p class="buy_month">一年</p>
- <p class="buy_price"><span>¥</span>399</p>
- <del>¥3688</del>
- <nuxt-link to="">购买</nuxt-link>
- </div>
- </li>
- </ul>
- </div>
- </div>
- <!-- end:价格套餐 -->
- <!-- 套餐特权 -->
- <div class="priv">
- <h4>工程项目信息专属会员特权</h4>
- <ul>
- <li>
- <p>免费查看工程信息</p>
- <span>免费查看工程信息</span>
- </li>
- <li>
- <p>特享精准人脉网</p>
- <span>通过熟人认识工程负责人</span>
- </li>
- <li>
- <p>优秀供应商</p>
- <span>成为优秀供应商</span>
- </li>
- <li>
- <p>平台推荐</p>
- <span>通过平台推荐</span>
- </li>
- <li>
- <p>会员专属名片</p>
- <span>免费查看工程信息</span>
- </li>
- </ul>
- </div>
- <!-- end:套餐特权 -->
- <!-- 会员说明 -->
- <div class="explain">
- <p>会员说明:</p>
- <ul>
- <li>· 会员一经开通不支持退款;</li>
- <li>· 购买会员后立即生效</li>
- <li>· 购买问题请联系客服:0755-26921213</li>
- </ul>
- </div>
- <!-- end:会员说明 -->
- </div>
- <!-- end:工程项目会员 -->
- </div>
- </div>
- <!-- end:会员详情切换 -->
-
-
-
- </div>
- </template>
- <script>
- import '~/assets/new.scss' // 引入
- import '~/static/css/style.css' // 引入toBuy
- import tit from '~/components/titles.vue'
- export default {
- data() {
- return {
- current: '0', // 表示当前的第一个
- name:'我的会员',
- navs:[
- { text:'招投标专属会员' },
- { text:'工程项目信息专属会员' },
- ]
-
- }
- },
- methods:{
- // tab切换
- addClass: function(index){
- this.current=index; // 不能要引号
- },
- // 选择地区范围
- selectArea: function(){
- this.$router.push({
- path:'chooseArea'
- })
- },
- // 选择行业
- selectIndustry: function(){
- this.$router.push({
- path:'chooseIndustry'
- })
- },
- },
- components:{
- tit
- }
- }
- </script>
- <style>
- body{
- background-color: #fff!important;
- }
- html{
- background-color: #fff;
- }
- .vip_nav p.active{
- font-size: 1.6rem;
- font-weight: bold;
- color: #fff;
- position: relative;
- transition: .1s;
- }
- .vip_nav p.active::after{
- content: '';
- display: block;
- position: absolute;
- width:2rem;
- height: 0.4rem;
- border-radius: 5rem;
- bottom: 0;
- left: 50%;
- margin-left: -1rem;
- background-color: #765d45;
- z-index: 10;
- }
- </style>
|