hookehuyr

✨ feat(书籍列表展示组件): 显示细节调整

<template>
<div class="book-item van-hairline--bottom" @click="handle">
<van-row>
<van-col span="6">
<van-image width="5rem" height="5rem" :src="item.avatar" style="text-align: center;" />
<van-col span="8">
<van-image width="7rem" height="7rem" :src="item.avatar" style="text-align: center;" />
</van-col>
<van-col class="wrapper" span="18">
<p class="title">逃家小兔绘本</p>
<van-col class="wrapper" span="16">
<p class="title van-multi-ellipsis--l2">逃家小兔绘本</p>
<div v-if="type === 'C'" class="van-multi-ellipsis--l2 content">
从前有一只小兔子,总是想要离家出走。有一天,他对妈妈说如果有大灰狼怎么办,不要把门打开
</div>
......@@ -20,7 +20,6 @@
<script setup>
import icon_video from '@images/video.png'
import { ref, reactive, onMounted } from 'vue'
const props = defineProps({
item: Object,
......@@ -35,21 +34,21 @@ const handle = () => {
// 上传视频
const onUpload = (v) => {
console.warn(v);
console.warn(v);
}
onMounted(() => {
})
onMounted(() => {
})
</script>
<script>
export default {
data () {
data() {
return {
}
},
mounted () {
mounted() {
},
methods: {
......@@ -59,36 +58,42 @@ export default {
</script>
<style lang="less" scoped>
.book-item {
margin: 1rem;
padding: 1rem;
.wrapper {
padding-left: 1rem;
.title {
font-size: 1.15rem;
color: #222222;
font-weight: bold;
}
.content {
font-size: 0.85rem;
color: #999999;
margin: 0.5rem 0;
}
.sub {
font-size: 0.85rem;
color: #999999;
margin-top: 0.5rem;
}
.upload {
color: #713610;
background-color: #F9D95C;
border-radius: 15px;
width: 4rem;
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
text-align: center;
margin-top: 1rem;
}
.book-item {
// margin: 1rem;
padding: 1rem;
.wrapper {
padding-left: 1rem;
.title {
font-size: 1.15rem;
color: #222222;
font-weight: bold;
margin: 0.5rem 0;
}
.content {
font-size: 0.85rem;
color: #999999;
margin: 0.5rem 0;
}
.sub {
font-size: 0.85rem;
color: #999999;
margin-top: 0.5rem;
}
.upload {
color: #713610;
background-color: #F9D95C;
border-radius: 15px;
width: 4rem;
padding: 0.25rem 0.5rem;
font-size: 0.8rem;
text-align: center;
margin-top: 1rem;
}
}
}
</style>
\ No newline at end of file
......