first

components/JeepayDescviewItem/JeepayDescviewItem.vue

@@ -0,0 +1,77 @@
+<!--
+  描述信息展示 
+  通用信息
+  @author terrfly
+  @site https://www.jeequan.com
+  @date 2022/12/06 10:11
+-->
+<template>
+	<view :class="{ 'c-desc-view-item': true, 'bottom-border': props.bottomBorder }">
+		<view class="title">
+			<slot name="title">{{ props.title }}</slot>
+		</view>
+		<view class="desc">
+			<slot name="desc">
+				<image v-if="props.descIsImg && props.desc" :src="props.desc" mode="scaleToFill" class="default-img" />
+				<template v-else>{{ props.desc }}</template>
+			</slot>
+		</view>
+	</view>
+</template>
+
+<script setup>
+const props = defineProps({
+	// 标题
+	title: { type: String },
+
+	// 描述
+	desc: { type: String },
+
+	// 描述是否是图片
+	descIsImg: { type: Boolean, default: false },
+
+	// 下边框
+	bottomBorder: { type: Boolean, default: false }
+});
+</script>
+
+<style lang="scss" scoped>
+.c-desc-view-item {
+	display: flex;
+	justify-content: space-between;
+	padding: 20rpx 40rpx;
+	font-size: 30rpx;
+	font-weight: 400;
+
+	.title {
+		display: flex;
+		flex-direction: column;
+		justify-content: flex-start;
+		width: 200rpx;
+		color: #808080;
+	}
+	.desc {
+		flex: 1;
+		text-align: right;
+		color: #000;
+	}
+
+	&:first-child {
+		margin-top: 20rpx;
+	}
+	&:last-child {
+		margin-bottom: 20rpx;
+	}
+
+	.default-img {
+		width: 150rpx;
+		height: 150rpx;
+		background-color: #f7f7f7;
+	}
+}
+
+.bottom-border {
+	padding-bottom: 40rpx;
+	border-bottom: 1rpx solid #ededed;
+}
+</style>