6.30 版本提交
This commit is contained in:
尚政杰
224
pages/mine/vipMeal/vipMeal.vue
Normal file
224
pages/mine/vipMeal/vipMeal.vue
Normal file
@@ -0,0 +1,224 @@
|
||||
<template>
|
||||
<view>
|
||||
<navBar leftText="会员中心"></navBar>
|
||||
<image class="topBg absolute" src="/static/image/mine/myTopBg.png" mode="widthFix"></image>
|
||||
<view class="vipC" :style="'margin-top:'+navH+'px;'">
|
||||
<view class="vipInfoC relative">
|
||||
<image class="bg" src="/static/image/mine/vip/noVipTopBg.png" mode="widthFix"></image>
|
||||
<view class="infoC absolute">
|
||||
<view class="title">价值前沿</view>
|
||||
<view class="tips">您还不是会员 加入尊享N项服务</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="privilegeCompareC relative">
|
||||
<view class="titleC flexCenter">
|
||||
<image class="icon" src="/static/icon/mine/vip/titleLeft.png" mode="widthFix"></image>
|
||||
<view class="title">特权对比</view>
|
||||
<image class="icon" src="/static/icon/mine/vip/titleRight.png" mode="widthFix"></image>
|
||||
</view>
|
||||
<view class="privilegeList">
|
||||
<view class="header flex">
|
||||
<view class="privilege item">专属特权</view>
|
||||
<view class="item free">普通免费</view>
|
||||
<view class="item vip">VIP会员</view>
|
||||
</view>
|
||||
<view class="list">
|
||||
<view class="item flex" v-for="(item,index) in privilegeList" :key="index">
|
||||
<view class="optionItem privilege flex">{{item}}</view>
|
||||
<view class="optionItem free flexCenter">
|
||||
<block v-if="index==0||index==1||index==2">
|
||||
<image class="notContain" src="/static/icon/mine/vip/notContain.png" mode="widthFix"></image>
|
||||
</block>
|
||||
<block v-if="index==3||index==4">
|
||||
<block v-if="index==3">限制查看数量</block>
|
||||
<block v-if="index==4">每日查看2只</block>
|
||||
</block>
|
||||
<block v-if="index==5||index==6">
|
||||
<image class="contain" src="/static/icon/mine/vip/contain.png" mode="widthFix"></image>
|
||||
</block>
|
||||
</view>
|
||||
<view class="optionItem vip flexCenter">
|
||||
<image class="contain" src="/static/icon/mine/vip/contain.png" mode="widthFix"></image>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="joinVipC fixed" @click="clickJoinVip()">立即加入年度VIP</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { inject } from 'vue';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
navH:inject('navHeight'),
|
||||
privilegeList:['高效选股工具','股票基金明星榜单','定期专属晨报、股票动态','独家产业研报','个股产业分析','股票、基金基础指标','7x24 财经直播']
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
/**
|
||||
* 点击加入vip
|
||||
*/
|
||||
clickJoinVip()
|
||||
{
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.topBg
|
||||
{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.vipC
|
||||
{
|
||||
padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
|
||||
.vipInfoC
|
||||
{
|
||||
margin: 0 25rpx;
|
||||
.bg
|
||||
{
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
.infoC
|
||||
{
|
||||
top: 130rpx;
|
||||
left: 38rpx;
|
||||
.title
|
||||
{
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
color: #556B87;
|
||||
}
|
||||
.tips
|
||||
{
|
||||
font-size: 28rpx;
|
||||
font-weight: 500;
|
||||
color: #65758A;
|
||||
}
|
||||
}
|
||||
}
|
||||
.privilegeCompareC
|
||||
{
|
||||
background-color: white;
|
||||
margin-top: -70rpx;
|
||||
padding-top: 40rpx;
|
||||
border-radius: 20rpx 20rpx 0 0;
|
||||
.titleC
|
||||
{
|
||||
.icon
|
||||
{
|
||||
width: 54rpx;
|
||||
height: auto;
|
||||
}
|
||||
.title
|
||||
{
|
||||
margin: 0 20rpx;
|
||||
font-size: 50rpx;
|
||||
font-weight: bold;
|
||||
color: #222;
|
||||
}
|
||||
}
|
||||
.privilegeList
|
||||
{
|
||||
margin: 0 25rpx;
|
||||
padding: 0 30rpx;
|
||||
box-shadow: 0px 0px 9px 0px rgba(0,0,0,0.1);
|
||||
border-radius: 10rpx;
|
||||
.header
|
||||
{
|
||||
margin-top: 50rpx;
|
||||
padding-top: 14rpx;
|
||||
border-bottom: solid 1rpx #F3F4F6;
|
||||
.item
|
||||
{
|
||||
line-height: 90rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: bold;
|
||||
color: #555;
|
||||
}
|
||||
.item.privilege
|
||||
{
|
||||
padding-left: 24rpx;
|
||||
width: 300rpx;
|
||||
}
|
||||
.item.free
|
||||
{
|
||||
width: 174rpx;
|
||||
text-align: center;
|
||||
}
|
||||
.item.vip
|
||||
{
|
||||
width: 160rpx;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
.list
|
||||
{
|
||||
.item
|
||||
{
|
||||
.optionItem
|
||||
{
|
||||
height: 90rpx;
|
||||
border-bottom: solid 1rpx #F3F4F6;
|
||||
.contain
|
||||
{
|
||||
width: 21rpx;
|
||||
height: auto;
|
||||
}
|
||||
.notContain
|
||||
{
|
||||
width: 17rpx;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
.optionItem.privilege
|
||||
{
|
||||
width: 300rpx;
|
||||
font-size: 24rpx;
|
||||
font-weight: 500;
|
||||
color: #222;
|
||||
}
|
||||
.optionItem.free
|
||||
{
|
||||
width: 174rpx;
|
||||
font-size: 20rpx;
|
||||
color: #555;
|
||||
text-align: center;
|
||||
}
|
||||
.optionItem.vip
|
||||
{
|
||||
width: 160rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.joinVipC
|
||||
{
|
||||
background-color: #F97316;
|
||||
margin: 0 25rpx;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: calc(20rpx + env(safe-area-inset-bottom));
|
||||
line-height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
font-size: 26rpx;
|
||||
font-weight: 500;
|
||||
color: white;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user