pika_shangjia/components/cell/index.vue

<template>
	<view>
		<view class="cell-infos ddflex">
			<view class="cell">
				<view :style="'transform: rotate('+rotate+'deg);'">
					<image :style="'width: '+width+'rpx;height:'+height+'rpx;'" src="../../static/pages/images/cell.png" class="cell-bg"></image>
					<view class="cell-q">
						<view :class="'cell-qs'+(soc>50?' full':'')" :style="'height:'+ soc+'%'"></view>
					</view>
				</view>
				<view class="soc-label" v-if="showsoc">
					{{soc}}%
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	const req = require("../../utils/request.js");

	export default {
		components: {},
		props: {
			soc:{
				type:Number,
				default:0
			},
			width:{
				type:Number,
				default:68
			},
			height:{
				type:Number,
				default:132
			},
			showsoc:{
				type:Boolean,
				default:false
			},
			rotate:{
				type:Number,
				default:0
			}
		},
		data() {
			return {
				systems: {},
				isTop: 0,
			}
		},
		onLoad(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;
		},
		onPageScroll: function(e) {
			if (e.scrollTop > this.systems.barHeight) {
				this.isTop = 1;
			} else {
				this.isTop = 0;
			}
		}
	}
</script>

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