vue
复制代码
<template>
<view class="baseInfo">
<up-image class="cover" height="160rpx" width="120rpx" :src="bookInfo.cover">
<template #error>
<view style="font-size: 24rpx;">加载失败</view>
</template>
</up-image>
<up-text class="title" :text="bookInfo.title" :lines="1" :size="15" bold />
<up-text class="desc" type="info" :size="14" :text="bookInfo.desc" wordWrap="anywhere" :lines="2" />
<view class="tags">
<up-tag class="tag" v-for="tag in bookInfo.tags" :text="tag" size="mini" plain plainFill />
</view>
</view>
</template>
<script setup lang="ts">
import { reactive, ref } from 'vue'
const props = defineProps({
bookInfo: {
type: Object,
default: '',
},
});
</script>
<style scoped lang="scss">
.baseInfo {
margin: 2%;
padding: 2%;
display: grid;
grid-template-columns: repeat(1, 120rpx) repeat(5, 1fr);
/* 第一列固定宽度,其余列自适应 */
grid-template-rows: repeat(3, auto);
grid-template-areas:
"cover title title title title title"
"cover tags tags tags tags tags"
"cover desc desc desc desc desc";
grid-gap: 2%;
border-radius: 8rpx;
background-color: #FFF;
* {
max-width: 86%;
}
.cover {
grid-area: cover;
}
.title {
grid-area: title;
}
.desc {
color: #080808;
grid-area: desc;
}
.tags {
grid-area: tags;
.tag {
padding-right: 2%;
}
}
}
</style>