Browse Source

feat(components): 为书籍项添加原创标签并统一样式

重构书籍相关组件,为封面添加原创标签显示功能,统一标签样式和布局结构。同时将环境配置从本地切换为生产环境。
master
前端-胡立永 3 weeks ago
parent
commit
ec97966f05
4 changed files with 96 additions and 10 deletions
  1. +46
    -4
      components/novel/bookshelfItem.vue
  2. +47
    -4
      components/novel/novelItem.vue
  3. +2
    -1
      components/novel/workItem.vue
  4. +1
    -1
      config.js

+ 46
- 4
components/novel/bookshelfItem.vue View File

@ -1,7 +1,10 @@
<template>
<view class="book-item" :class="{'horizontal': horizontal}" @click="$emit('click')">
<image class="book-cover" :src="book.image
&& book.image.split(',')[0]" mode="aspectFill"></image>
<view class="cover-wrapper">
<image class="book-cover" :src="book.image
&& book.image.split(',')[0]" mode="aspectFill"></image>
<view class="tag original" v-if="book.isOriginal == 'Y'">原创</view>
</view>
<view class="book-info">
<view class="book-title">{{book.name}}</view>
<view class="book-author" v-if="book.author && !horizontal">{{book.author}}</view>
@ -75,12 +78,32 @@
border-bottom: none;
}
.book-cover {
.cover-wrapper {
position: relative;
width: 160rpx;
height: 210rpx;
border-radius: 16rpx;
margin-right: 20rpx;
box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
.book-cover {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
.tag {
position: absolute;
top: 0;
left: 0;
font-size: 20rpx;
color: #fff;
padding: 2rpx 8rpx;
&.original {
background-color: #ffa502;
}
}
}
.book-info {
@ -161,11 +184,30 @@
padding: 10rpx;
border: none;
.book-cover {
.cover-wrapper {
position: relative;
width: 100%;
height: 300rpx;
margin-right: 0;
margin-bottom: 10rpx;
.book-cover {
width: 100%;
height: 100%;
}
.tag {
position: absolute;
top: 0;
left: 0;
font-size: 20rpx;
color: #fff;
padding: 2rpx 8rpx;
&.original {
background-color: #ffa502;
}
}
}
.book-info {


+ 47
- 4
components/novel/novelItem.vue View File

@ -1,7 +1,10 @@
<template>
<view class="book-item" :class="{'horizontal': horizontal}" @click="$emit('click')">
<image class="book-cover" :src="book.image
&& book.image.split(',')[0]" mode="aspectFill"></image>
<view class="cover-wrapper">
<image class="book-cover" :src="book.image
&& book.image.split(',')[0]" mode="aspectFill"></image>
<view class="tag original" v-if="book.isOriginal == 'Y'">原创</view>
</view>
<view class="book-info">
<view class="book-title">{{book.name}}</view>
<view class="book-author" v-if="!horizontal">{{book.author || '暂无作者昵称'}}</view>
@ -76,7 +79,8 @@
border-bottom: none;
}
.book-cover {
.cover-wrapper {
position: relative;
width: 150rpx;
height: 196rpx;
border-radius: 16rpx;
@ -84,6 +88,25 @@
box-shadow: 0 4rpx 8rpx rgba(0,0,0,0.1);
}
.book-cover {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
.tag {
position: absolute;
top: 0;
left: 0;
font-size: 20rpx;
color: #fff;
padding: 2rpx 8rpx;
&.original {
background-color: #ffa502;
}
}
.book-info {
flex: 1;
display: flex;
@ -150,11 +173,31 @@
padding: 10rpx;
border: none;
.book-cover {
.cover-wrapper {
width: 100%;
height: 200rpx;
margin-right: 0;
margin-bottom: 10rpx;
position: relative;
}
.book-cover {
width: 100%;
height: 100%;
border-radius: 16rpx;
}
.tag {
position: absolute;
top: 0;
left: 0;
font-size: 20rpx;
color: #fff;
padding: 2rpx 8rpx;
&.original {
background-color: #ffa502;
}
}
.book-info {


+ 2
- 1
components/novel/workItem.vue View File

@ -2,7 +2,7 @@
<view class="work-item" @click.stop="handleClick">
<view class="cover-wrapper">
<image class="cover" :src="work.image && work.image.split(',')[0]" mode="aspectFill"></image>
<view class="tag original" v-if="work.isOriginal">原创</view>
<view class="tag original" v-if="work.isOriginal == 'Y'">原创</view>
</view>
<view class="info">
@ -152,6 +152,7 @@
font-size: 20rpx;
color: #fff;
padding: 2rpx 8rpx;
border-radius: 6rpx;
&.original {
background-color: #ffa502;


+ 1
- 1
config.js View File

@ -8,7 +8,7 @@ import uvUI from '@/uni_modules/uv-ui-tools'
Vue.use(uvUI);
// 当前环境
const type = 'local'
const type = 'prod'
// 环境配置


Loading…
Cancel
Save