<template>
	<view class="member-section flex" @click="joinVip">
	  <view>
	    <image mode="aspectFill" src="@/static/images/vip.png" />
			<text>v</text>
	  </view>
	  <view>
	    <view class="member_title">升级vip会员享受视频课程优惠</view>
	  </view>
	  <button class="flex flex-center">立即升级</button>
	</view>
</template>

<script>
	export default {
		methods: {
			joinVip() {
				this.$util.checkLogin(
				  () => {
				    uni.navigateTo({
				      url: "/pages/special/member_recharge",
				    });
				  },
				  () => {
				    this.$util.showMsg("请登录后再进行访问!");
				  }
				);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.member-section {
	  width: 638rpx;
	  height: 98rpx;
	  background: linear-gradient(90deg, #FFDFB5, #FFEAD0, #FEE5C6, #FDC88C);
	  border-radius: 49rpx;
	  align-items: center;
	  margin: 20rpx auto 0;
		padding: 0 14rpx 0 34rpx;
		>view {
			position: relative;
			&:nth-child(2) {
			  margin-left: 15rpx;
				margin-right: 20rpx;
			  font-size: 28rpx;
			  color: #894B09;
				flex: 1;
			}
			>text {
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				bottom: 5rpx;
				font-size: 22rpx;
				line-height: 10rpx;
				overflow: hidden;
				color: #874f02;
			}
		}
		image {
		  display: block;
		  width: 48rpx;
		  height: 39rpx;
		  pointer-events: none;
		  -webkit-touch-callout: none;
		}
		button {
		  
		  width: 128rpx;
		  height: 60rpx;
		  // padding-right: 32rpx;
		  // padding-left: 32rpx;
		  border-radius: 30rpx;
		  background: #874F02;
		  font-family: inherit;
		  font-weight: 400;
		  font-size: 24rpx;
		  color: #fff;
			flex-shrink: 0;
		}
	} 
</style>