pika_shangjia/pages/shop/shop.vue

<template>
	<view>
		<view class="top" :style="'height: '+ systems.barHeight + 'rpx;'">
			<image src="../../static/pages/images/topbg.png" class="topbg"></image>
			<view class="title" :style="'line-height: '+ systems.navigationHeight + 'rpx;top:' + systems.ktxStatusHeight + 'rpx;'">小店团</view>
		</view>
		<view :style="'height: '+ systems.barHeight + 'rpx;'"></view>
		<view class="tcon">
			<image src="../../static/pages/images/mbg.png" class="tcbg"></image>
			<view class="merchant ddflex">
				<image src="../../static/pages/images/blue/wdbg.png" mode="aspectFit" class="logo"></image>
				<view class="fflex">
					<view class="ddflex">
						<view class="merchant-name tover">世纪东城林雨店</view>
						<view class="change ddflex">切换<image src="../../static/pages/images/change.png"></image></view>
					</view>
					<view class="merchant-info ddflex"><image src="../../static/pages/images/pinzhi.png"></image>高品低价 售后无忧</view>
				</view>
				<button open-type="share" class="m-share"><image src="../../static/pages/images/share1.png"></image>分享</button>
			</view>
			<view class="con">
				<view class="search ddflex">
					<image src="../../static/pages/images/ssico.png"></image>
					<view class="fflex">搜索你想要的商品</view>
				</view>
				<view class="nav ddflex">
					<view class="li">
						<image src="../../static/pages/images/navico1.png" mode="aspectFill"></image>
						<view>团长说</view>
					</view>
					<view class="li">
						<image src="../../static/pages/images/navico2.png" mode="aspectFill"></image>
						<view>店长推荐</view>
					</view>
					<view class="li">
						<image src="../../static/pages/images/navico3.png" mode="aspectFill"></image>
						<view>热卖爆款</view>
					</view>
					<view class="li">
						<image src="../../static/pages/images/navico4.png" mode="aspectFill"></image>
						<view>联系店长</view>
					</view>
				</view>
				<view class="tab ddflex">
					<view class="li">
						<view>正在开团</view>
						<text>抢到就是赚到</text>
					</view>
					<view class="li">
						<view>开团预告</view>
						<text>提前知鲜</text>
					</view>
				</view>
			</view>
		</view>
		<view></view>
	</view>
</template>

<script>
const app = getApp();
const req = require('../../utils/request.js');
const api = require('../../utils/api.js');
const util = require('../../utils/util.js');
export default {
	data() {
		return {
			systems: '',
		};
	},
	onLoad: function(options) {
	},
	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 "./shop.css";
</style>