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> --> <!-- <h4></h4> -->
<view class="" v-if="listenList.length > 0 && listenList[0]" style="margin:0rpx 0rpx 30rpx;"> <view class="" v-if="listenList.length > 0 && listenList[0]" style="margin:0rpx 0rpx 30rpx;">
<view class=""> <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>
<view class="item flexbox aligncenter" v-for="item in listenList" :key="item.id" style="padding-bottom:10rpx;"> <view class="item flexbox aligncenter" v-for="item in listenList" :key="item.id" style="padding-bottom:10rpx;">
<view class="spbhimg" @click="previewImage(item.images)"> <view class="spbhimg" @click="previewImage(item.images)">
@@ -73,7 +73,7 @@
</view> </view>
</view> </view>
<view class=""> <view class="">
<view style="font-weight: 600;margin:0rpx 0rpx 30rpx;">商品详情</view> <view style="font-weight: 700;margin:0rpx 0rpx 30rpx;">商品详情</view>
</view> </view>
<view class="bookInfo" > <view class="bookInfo" >
<u-row customStyle="margin-bottom: 10px"> <u-row customStyle="margin-bottom: 10px">
@@ -109,7 +109,7 @@
</view> </view>
<view class="pingjia" v-else> <view class="pingjia" v-else>
<view class=""> <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 class="icon-del rotate"></view> -->
</view> </view>
<!-- 商品评价 --> <!-- 商品评价 -->

75
pages/bookscomments/comments.vue
View File

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