zm/nuttyreading-html
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

书评列表风格改造

Browse Source
This commit is contained in:
yanwenlong
2023-09-20 00:02:03 +08:00
parent ef54443c1a
commit 4d17aae24b
2 changed files with 49 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
pages/bookShop/commodityDetail.vue
View File

@@ -61,7 +61,7 @@
<!-- <h4></h4> -->
<view class="" v-if="listenList.length > 0 && listenList[0]" style="margin:0rpx 0rpx 30rpx;">
<view class="">
<view style="font-weight: 600;margin-bottom: 30rpx;color:#71d5a1;">赠送听书权益</view>
<view style="font-weight: 700;margin-bottom: 30rpx;color:#71d5a1;">赠送听书权益</view>
</view>
<view class="item flexbox aligncenter" v-for="item in listenList" :key="item.id" style="padding-bottom:10rpx;">
<view class="spbhimg" @click="previewImage(item.images)">
@@ -73,7 +73,7 @@
</view>
</view>
<view class="">
<view style="font-weight: 600;margin:0rpx 0rpx 30rpx;">商品详情</view>
<view style="font-weight: 700;margin:0rpx 0rpx 30rpx;">商品详情</view>
</view>
<view class="bookInfo" >
<u-row customStyle="margin-bottom: 10px">
@@ -109,7 +109,7 @@
</view>
<view class="pingjia" v-else>
<view class="">
<view style="font-weight: 600;margin-bottom: 30rpx;">评价({{commentsList?commentsList.length:0}})</view>
<view style="font-weight: 700;margin-bottom: 30rpx;">评价({{commentsList?commentsList.length:0}})</view>
<!-- <view class="icon-del rotate"></view> -->
</view>
<!-- 商品评价 -->

75
pages/bookscomments/comments.vue
View File

@@ -6,31 +6,37 @@
</view>
<view class="bookInfo" v-for="(productInfo,index) in productList" :key="index">
<view class="flexbox" style="margin-bottom: 20px;">
<image :src="productInfo.bookimage" mode="aspectFill"></image>
<image :src="productInfo.bookimage" mode="aspectFill" class="imageradius bookinfoimage"></image>
<view class="bookInfo-inner">
<span class="title">{{productInfo.bookName}}</span>
<span class="title">作者：{{productInfo.authorName}}</span>
<span class="author">作者：{{productInfo.authorName}}</span>
<view class="description">简介：{{productInfo.content}}</view>
</view>
</view>
<view class="mainContent">
<view style="display:flex;justify-content:space-between;">
<view style="font-weight: 700;margin:0rpx 0rpx 40rpx;font-size:32rpx;">热门书评</view>
<view style="font-weight: 500;margin:0rpx 0rpx 20rpx;font-size:28rpx;color:#8b8a91" @click.stop="toMore(productInfo)">查看更多＞</view>
</view>
<view v-if="productInfo.shupingList.length > 0">
<view class="item" @click.stop="toDetail(item)" v-for="(item,index1) in productInfo.shupingList" :key="index1">
<image class="feng" v-if="item.image == ''" src="../../static/icon/home_bg.jpg" mode="scaleToFill" style="width: 100%;"></image>
<image class="feng" v-else :src="item.image" mode="scaleToFill" style="width: 100%;"></image>
<text class="title">{{item.title}}</text>
<!-- <view class="description" v-html="item.content">
{{item.content}}
</view> -->
<view class="title">{{item.title}}</view>
<image class="feng" v-if="item.image" :src="item.image" mode="aspectFill"></image>
<view class="description" v-html="item.content">
</view>
<!-- <image class="feng" v-if="item.image == ''" src="../../static/icon/home_bg.jpg" mode="aspectFill"></image> -->
<view class="btns flexbox">
<span class="time">{{item.updateTime}}</span>
<span class="time">{{item.createTime}}</span>
<span class="flexbox opbtns">
</span>
</view>
<view style="border-bottom:2rpx solid #e9e9e9;height:50rpx;" v-if="index1<productInfo.shupingList.length-1"></view>
</view>
<view class="gengduoshuping" @click.stop="toMore(productInfo)">
<!-- <view class="gengduoshuping" @click.stop="toMore(productInfo)">
查看更多
</view>
</view> -->
</view>
<view class="quesheng" v-else>
暂无书评内容~
@@ -279,48 +285,59 @@ import { data } from 'jquery';
border-radius: 20rpx;
margin-bottom: 20rpx;
.imageradius{
border-radius: 20rpx;
border:1rpx solid #e9e9e9;
}
.bookInfo-inner{ padding-left: 30rpx; box-sizing: border-box; width: calc(100% - 150px);
.title{font-size: 38rpx; margin-top: 20rpx; font-weight: blod; margin-bottom: 20rpx; display: block;
}
.title{font-size: 32rpx; margin-top: 0rpx; margin-bottom: 20rpx;font-weight: 700; display: block;}
.author{font-size: 30rpx;margin-top: 0rpx;margin-bottom: 20rpx;font-weight: 500; display: block; }
.description{
font-size: 28rpx;
line-height: 20px;
width: 100%;
color:#888;
padding-left: 0;
overflow:hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 7;
-webkit-line-clamp: 9;
display: -webkit-box;
-webkit-box-orient: vertical;
}
}
image{width: 150px !important; }
.bookinfoimage{width: 150px !important; }
}
.mainContent{background-color: #fff;
.item{
padding: 10px;
// padding: 10px;
margin-bottom: 30rpx;
border: 1px solid #999;
// border: 1px solid #999;
box-sizing: border-box;
padding-bottom: 20rpx;
border-radius: 20rpx;
margin-bottom: 20rpx;
}
.feng{margin-bottom: 15px; overflow: hidden;}
.title{font-size: 38rpx; font-weight: blod; color: #55aa00; overflow: hidden;}
.description{ overflow: hidden; color: #666;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
line-clamp: 3;
-webkit-box-orient: vertical;
font-size: 28rpx; margin-bottom: 15px; margin-top:5px;
.feng{margin:10rpx 0 0 0;height: 200rpx;width: 200rpx;float:right;border-radius: 20rpx;border:1rpx solid #e9e9e9;}
.title{font-size: 32rpx; font-weight: 500; color: #55aa00; overflow: hidden;}
.description{
overflow: hidden;
color: #666;
text-overflow: -o-ellipsis-lastline;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
line-clamp: 5;
-webkit-box-orient: vertical;
font-size: 28rpx;
margin-bottom: 15px;
margin-top:5px;
min-height: 144rpx;
}
.btns{font-size: 24rpx; justify-content: space-between;
.btns{font-size: 24rpx; justify-content: flex-start;
.time{font-size: 24rpx; color: #666; }
.opbtns{
.pingjia{margin-left: 10px;}