H5_module/topic/merchantMember/index.vue

<template>
	<view>
		<view :class="'top-fixed' + (skinNotColor ? ' not-color' : '')" :style="'height: '+ systems.barHeight + 'rpx;'">
			<view class="top-fixed-c" :style="'height: '+ systems.navigationHeight + 'rpx;margin-top:' + systems.ktxStatusHeight + 'rpx;'">
				<navigator url="" hover-class="none" open-type="navigateBack" class="back"><image :src="picUrlss+'back_white.png'"></image></navigator>
				<view class="top-title ddflex" :style="'line-height: '+ systems.navigationHeight + 'rpx;'">会员开通</view>
			</view>
		</view>
		<image :src="picUrlss+'scrm/vip_top.png'" class="top-img"></image>
		<view class="cons">
			<view class="tit ddflex">开通会员卡</view>
			<view class="tits">会员等级</view>
			<view class="list ddflex">
				<view class="li">
					青铜会员
					<image :src="picUrlss+'scrm/vip_gou.png'" class="gou"></image>
				</view>
				<view class="li">
					白银会员
				</view>
				<view class="li">
					黄金会员
				</view>
			</view>
		</view>
	</view>
</template>

<script>
//index.js
//获取应用实例
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
export default {
	data() {
		return {
			picUrlss: req.public.picUrls,
			systems: {}
		};
	},

	components: {
	},
	props: {},
	onLoad: async function(options) {
	},

	async onShow() {
	},
	methods: {
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		// px转换到rpx的比例
		let pxToRpxScale = 750 / systemInfo.windowWidth;
		let systems = {
			ktxStatusHeight: systemInfo.statusBarHeight * pxToRpxScale, // 状态栏的高度
			navigationHeight: 44 * pxToRpxScale // 导航栏的高度
		};
		systems.barHeight = systems.ktxStatusHeight + systems.navigationHeight;
		this.systems = systems;
	}
};
</script>

<style>
	@import "./index.css";
</style>