123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122 |
- <template>
- <div class="bookinfo">
- <div class="thumb">
- <img class="back"
- :src="info.image"
- mode="scaleToFill">
- <img class="img"
- :src="info.image"
- mode="aspectFit">
- <div class="info">
- <div class="title">
- {{info.title}}
- </div>
- <div class="author">
- {{info.author}}
- </div>
- </div>
- </div>
- <div class="owner detail">
- <img class="avatar"
- :src="userinfo.image"
- mode="aspectFit">
- <!-- 添加人 -->
- {{userinfo.name}}
- <div class="right text-primary">
- {{info.rate}}分
- <Rate :value="info.rate"></Rate>
- </div>
- </div>
- <div class="detail">
- {{info.publisher}}
- <div class="right">
- {{info.price}}
- </div>
- </div>
- <!-- 标签和详情 -->
- <div class="tags">
- <div class="badge" :key="tag" v-for="tag in info.tags" >{{tag}}</div>
- </div>
- <div class="summary">
- <p :key="i" v-for="(sum, i) in info.summary">{{sum}}</p>
- </div>
- </div>
- </template>
- <script>
- import Rate from '@/components/Rate'
- export default {
- components: {
- Rate
- },
- props: ['info'],
- computed: {
- userinfo() {
- return this.info.user_info || {};
- }
- }
- }
- </script>
- <style lang="scss">
- .bookinfo {
- .summary {
- padding: 0 15px;
- margin-top: 10px;
- p {
- text-indent: 2em;
- font-size: 14px;
- }
- }
- .badge {
- display: inline-block;
- margin: 5px;
- padding: 5px;
- border-radius: 10px;
- border: 1px solid #EA5A49;
- color: #EA5A49;
- }
- font-size: 14px;
- .right {
- float: right;
- }
- .detail {
- padding: 5px 10px;
- .avatar {
- width: 40rpx;
- height: 40rpx;
- border-radius: 50%;
- vertical-align: middle;
- }
- }
- .thumb {
- width: 750rpx;
- height: 450rpx;
- overflow: hidden;
- position: relative;
- .back {
- filter: blur(15px);
- width: 100%;
- }
- .img {
- position: absolute;
- width: 100%;
- height: 300rpx;
- left: 0;
- top: 30rpx;
- }
- .info {
- color: white;
- position: absolute;
- width: 100%;
- left: 0;
- top: 330rpx;
- text-align: center;
- .title {
- font-size: 16px;
- }
- .author {
- font-size: 14px;
- }
- }
- }
- }
- </style>
|