源文件

jeepay-ui-uapp-agent/components/newComponents/JLayout/JLayout.vue

@@ -0,0 +1,84 @@
+<template>
+	<view class="list-item" :class="{big: props.preBig}">
+		<view class="left">
+			<view class="back" :style="{background: props.bgColor}">
+				<image :src="props.icon" />
+			</view>
+			<view :style="{color: props.leftColor}">{{ props.ifName }}</view>
+		</view>
+	
+		<view class="right">
+			<text class="state-color" :style="{background: props.stateColor}"></text>
+			<text class="state-text" :style="{color: props.rightColor}">{{ props.stateText }}</text>
+			<image src="/static/equipmentImg/arrow.svg" style="width:40rpx; height:40rpx;" v-if="isImg" />
+		</view>
+	</view> 
+</template>
+
+<script setup>
+
+const props = defineProps({
+	bgColor: { type: String, default: ''},
+	preBig: { type: Boolean, default: false}, // 预制颜色1 
+	icon: { type: String, default: ''},
+	ifName: { type: String, default: ''},
+	stateColor: { type: String, default: ''},
+	stateText: { type: String, default: ''},
+	leftColor: { type: String, default: '#fff'},
+	rightColor: { type: String, default: 'rgba(255, 255, 255, 0.7)'},
+	isImg:{type:Boolean,default:true}
+})
+</script>
+
+<style scoped lang="scss">
+.list-item {
+	box-sizing: border-box;
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 15rpx 0; 
+	.left {
+		display: flex;
+		align-items: center;
+		color: #fff;
+		font-size: 33rpx;
+	}
+	.back {
+		width: 60rpx;
+		height: 60rpx;
+		border-radius: 5rpx;
+		margin-right: 20rpx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		flex-shrink: 0;
+		image {
+			width: 40rpx;
+			height: 40rpx;
+		}
+	}
+	.right {
+		display: flex;
+		align-items: center;
+		.state-color {
+			width: 10rpx;
+			height: 10rpx;
+			border-radius: 50%;
+			margin-right: 16rpx;
+		}
+		.state-text {
+			font-size: 30rpx;
+			color: rgba(255, 255, 255, 0.7);
+			margin-right: 16rpx;
+		}
+	}
+}
+
+// 预制主题1
+.big {
+	background: rgba(0, 0, 0, 0.03);
+	padding: 30rpx;
+	box-sizing: border-box;
+	border-radius: 20rpx;
+}
+</style>