78 lines
1.4 KiB
Vue
78 lines
1.4 KiB
Vue
<!--
|
|
描述信息展示
|
|
通用信息
|
|
@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>
|