tianyi 2 days ago
parent
commit
85b6ac8c6f
  1. 642
      pages/shop/shopEvaluate.vue

642
pages/shop/shopEvaluate.vue

@ -1,42 +1,47 @@
<template>
<view class="page1">
<view class="title">
<view class="title-sreach">
<view class="back-btn" @tap="back">
<uni-icons type="left" size="28"></uni-icons>
</view>
<view class="title-name">
商家评价
<view class="evaluate-fixed">
<view class="title">
<view class="title-sreach">
<view class="back-btn" @tap="back">
<uni-icons type="left" size="28"></uni-icons>
</view>
<view class="title-name">
{{isMerchant == 2 ? '配送评价' : '商家评价'}}
</view>
</view>
</view>
</view>
<view class="content">
<view class="shop-rate">
<view class="rate-left">
<view class="rate-num">
{{shopItem.shopScore}}
</view>
<view class="rate-star">
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)" :value="shopItem.shopScore" />
<view class="rate-info">
<view class="rate-label">综合评分</view>
<view class="rate-star">
<uni-rate :disabled="true" size="20" disabledColor="rgba(255, 184, 84, 1)" :value="shopItem.shopScore" />
</view>
</view>
</view>
</view>
<view class="">
<view class="menu-wrap">
<view class="menu-list">
<view class="menu1" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index"
:style="{'font-size':item.checked?'40rpx':'30rpx','color':item.checked?'rgba(0, 35, 28, 1)':'#777','width':index == 0?'160rpx':'180rpx'}">
<view :style="{'width':index == 0?'160rpx':'180rpx'}" style="text-align: left;">
<view class="menu1" :class="{'menu1-active': item.checked}" @tap="checkTab(index)" v-for="(item,index) in menuList" :key="index">
<view class="menu-text">
{{item.name}} {{item.num}}
</view>
<image v-if="item.checked" class="checked-img" src="https://jewel-shop.oss-cn-beijing.aliyuncs.com/4bb5fc7725cb4a7a84d1d3a15f05b39c.png" alt="" />
</view>
</view>
</view>
<scroll-view scroll-y @scrolltolower="onReachPage" style="width:100%;height: 600px;overflow: scroll;">
<view v-for="(item,index) in shopComments" :key="index">
</view>
<view class="evaluate-fixed-holder"></view>
<view class="content">
<scroll-view class="comment-scroll" scroll-y @scrolltolower="onReachPage">
<view class="comment-item" v-for="(item,index) in shopComments" :key="index">
<view class="eval-title">
<view class="eval-icon">
<image :src="item.createByIcon" alt="" />
<image :src="item.createByIcon"
alt="" />
</view>
<view class="eval-name">
<view class="name1">
@ -48,58 +53,73 @@
</view>
</view>
<view class="eval-content">
<view style="display: flex;height: 50rpx;line-height: 50rpx;font-size: 24rpx;">
商品
<view style="padding: 12rpx 0 0 10rpx;">
<uni-rate :disabled="true" disabledColor="rgba(255, 184, 84, 1)" :value="item.score" size="12" />
<!-- <view class="goods-list" v-if="item.goodsList && item.goodsList.length > 0">
<view class="goods-card" v-for="(goods,goodsIndex) in item.goodsList" :key="goodsIndex">
<image class="goods-img" :src="goods.productPicture" mode="aspectFill"></image>
<view class="goods-info">
<view class="goods-name">{{goods.productName}}</view>
<view class="goods-spec" v-if="goods.specs">{{goods.specs}}</view>
<view class="goods-bottom">
<text>{{goods.price}}</text>
<text>x{{goods.quantity}}</text>
</view>
</view>
</view>
</view> -->
<view class="eval-rate-row">
<uni-rate :disabled="true" disabledColor="rgba(255, 184, 84, 1)" :value="item.score" size="12" />
</view>
<view class="eval-text">
{{item.remark}}
</view>
<view class="eval-img" v-if="item.picture">
<image @tap="largeImg" :src="item.picture" alt="">
<image v-for="(pic,picIndex) in getPictureList(item.picture)" :key="picIndex"
@tap="largeImg(item.picture, picIndex)" :src="pic" mode="aspectFill"></image>
</view>
<view class="reply-card" :class="{'expanded': item1.isOpen}" v-for="(item1,index1) in item.comments" :key="index1">
<!-- 标题行商家回复 + 展开/收起按钮 -->
<view class="reply-header">
<!-- 回复内容区域动态类控制展开/折叠 -->
<view class="reply-content" :class="{ collapsed: !item1.isOpen, expanded: item1.isOpen }">
<text>{{item1.createByName}} : {{ item1.remark }}</text>
<image :src="item1.picture" v-if="item1.picture" alt="" class="upload-img" style="margin-top: 10px;border-radius: 10px;">
</view>
<view class="reply-expand-btn" @click="toggleReply(index,index1)">
<text v-if="!item1.isOpen">展开</text>
<text v-else>收起</text>
<view class="reply-card" v-if="item.comments && item.comments.length">
<view class="reply-title">回复</view>
<view class="reply-list">
<view class="reply-content" v-for="(item1,index1) in item.comments" :key="index1" v-show="!item.isCommentFold || index1 == 0">
<view>
<text class="reply-name">{{item1.createByName}}</text>
<text>{{ item1.remark }}</text>
</view>
<view class="reply-time" v-if="item1.createTime">
{{item1.createTime | formatTime}}
</view>
<image :src="item1.picture" @tap="largeImg(item1.picture)" v-if="item1.picture" class="upload-img reply-img" mode="aspectFill"></image>
</view>
</view>
<view class="reply-fold" v-if="item.comments.length > 1" @tap="toggleCommentFold(index)">
{{item.isCommentFold ? '展开全部 ' + item.comments.length + ' 条回复' : '收起回复'}}
</view>
</view>
<view class="" v-if="isMerchant == 1">
<view @tap="changeStatus(index)" class="reply-card" v-if="!item.isReply" style="text-align: right;padding-right: 10px;color: #00BFFF;">
<view class="reply-operate" v-if="(isMerchant == 1 || isMerchant == 2)">
<view @tap="changeStatus(index)" class="reply-action" v-if="!item.isReply">
回复
</view>
<view class="" v-else>
<view class="" style="background: #f5f5f5;border-radius: 10px;border: 1px solid #777;margin-top: 10px;">
<view class="eval-num" style="border: none;">
<textarea name="" v-model="replyText" id="" cols="30" rows="10" placeholder="有什么想说的吗?可以写下来,提交给我们" style="width: 100%;font-size: 28rpx;padding: 30rpx;height: 200rpx;"></textarea>
<view class="reply-editor" v-else>
<view class="reply-editor-box">
<view class="eval-num">
<textarea name="" v-model="replyText" id="" cols="30" rows="10" placeholder="有什么想说的吗?可以写下来,提交给我们" class="reply-textarea"></textarea>
</view>
<view class="eval-num" style="border: none;padding: 0 30rpx;display: flex;margin-bottom: 10px;">
<view class="upload-img" @tap="pictureAdd()" style="background: #eee;text-align: center;line-height: 160rpx;">
<view class="reply-upload-row">
<view class="upload-img upload-add" @tap="pictureAdd()">
<uni-icons type="camera" size="28" color="#777"></uni-icons>
</view>
<view style="flex: 1;display: flex;">
<view v-if="replyPicture !=''" :key="index" style="width: 160rpx;height: 160rpx;margin-left: 20rpx;">
<view class="reply-preview-list">
<view v-if="replyPicture !=''" :key="index" class="reply-preview">
<image :src="replyPicture" alt="" class="upload-img">
</view>
</view>
</view>
</view>
<!-- <textarea type="text" v-model="replyText" placeholder="要说什么写下来吧" style="background: #eee;border-radius: 10px;height: 100px;margin: 10px 0;padding: 10px;" /> -->
<view class="" style="display: flex;flex-direction: row-reverse;padding-right: 10px;margin-top: 10px;">
<view @tap="submit(index)" class="" style="margin-left: 20px;color: #00BFFF;">
<view class="reply-buttons">
<view @tap="submit(index)" class="reply-confirm">
确认
</view>
<view class="" @tap="changeStatus(index)">
<view class="reply-cancel" @tap="changeStatus(index)">
取消
</view>
</view>
@ -107,9 +127,7 @@
</view>
</view>
</view>
<view style="width: 100%;height: 100rpx;"></view>
</scroll-view>
</view>
<!-- 查看大图弹出层 -->
<uni-popup ref="imgPopup" background-color="#fff">
@ -117,6 +135,7 @@
<image :src="bigImg" alt="" style="width: 100%;height: 100%;">
</view>
</uni-popup>
<common-loading />
</view>
</template>
@ -127,7 +146,6 @@
replyText:'',
isMerchant:0,
replyPicture:"",
isExpanded: false,
isPintuan: true,
bigImg: '',
shopItem:{},
@ -146,7 +164,7 @@
num: "",
checked: true
}, {
name: '有图/视频',
name: '有图',
num: '',
checked: false
}, {
@ -161,7 +179,13 @@
},
filters:{
formatTime(value) {
if (!value) return '';
const timeText = String(value).replace('T', ' ');
if (/^\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2}/.test(timeText)) {
return timeText.slice(0, 19);
}
const date = new Date(value);
if (isNaN(date.getTime())) return '';
//
const year = date.getFullYear();
@ -187,7 +211,17 @@
},
onLoad(option) {
this.isMerchant = option.isMerchant
this.shopItem = JSON.parse(option.item)
if (option.item) {
try {
this.shopItem = JSON.parse(decodeURIComponent(option.item))
} catch (e) {
try {
this.shopItem = JSON.parse(option.item)
} catch (e2) {
this.shopItem = {}
}
}
}
if(option.isCha == 1){ //
this.searchForm.score = 1
this.searchForm.hasAnswer= 0
@ -203,7 +237,7 @@
getshopComments(id){
let that = this
this.searchForm.shopId = id
that.NB.sendRequest("/app/comment/getCommentList", this.searchForm, false, 'post', 'application/json').then((res) => {
this.NB.sendRequest("/app/comment/getCommentList", this.searchForm, false, 'post', 'application/json').then((res) => {
if (res.code == 200) {
if (that.searchForm.pageNum == 1) {
that.shopComments = res.result.records
@ -212,10 +246,12 @@
}
for(let i=0;i<that.shopComments.length;i++){
that.shopComments[i].isReply=false
if(that.shopComments[i].comments.length > 0){
for(let m=0;m<that.shopComments[i].comments.length;m++){
that.shopComments[i].comments[m].isOpen = false
}
that.shopComments[i].isCommentFold = true
if(!that.shopComments[i].goodsList){
that.shopComments[i].goodsList = []
}
if(!that.shopComments[i].comments){
that.shopComments[i].comments = []
}
}
that.total = res.result.pages; // pages =
@ -231,7 +267,7 @@
return
}
uni.hideLoading()
}).catch((res) => {})
})
},
onReachPage(){
if (this.searchForm.pageNum >= this.total) return;
@ -246,13 +282,13 @@
remark:this.replyText,
picture:this.replyPicture,
createBy:this.shopComments[v].shopId,
createByName:'商家',
createByName:this.isMerchant == 1?'商家':'配送员',
createByIcon:'https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png',
orderId:this.shopComments[v].orderId,
shopId:this.shopComments[v].shopId,
}]
that.NB.sendRequest("/app/comment/save", data, false, 'post', 'application/json').then((res) => {
this.NB.sendRequest("/app/comment/save", data, false, 'post', 'application/json').then((res) => {
if (res.code == 200) {
uni.showToast({
title: "评论成功",
@ -264,20 +300,20 @@
} else {
uni.showToast({
title: res.message,
icon:'none'
});
icon: 'none'
})
}
uni.hideLoading()
}).catch((res) => {})
},
toggleReply(i,m) {
this.shopComments[i].comments[m].isOpen = !this.shopComments[i].comments[m].isOpen;
this.$forceUpdate()
uni.hideLoading();
})
},
changeStatus(v){
this.shopComments[v].isReply = !this.shopComments[v].isReply
this.$forceUpdate()
},
toggleCommentFold(v){
this.shopComments[v].isCommentFold = !this.shopComments[v].isCommentFold
this.$forceUpdate()
},
checkTab(index) {
for (let i = 0; i < this.menuList.length; i++) {
if (i == index) {
@ -287,6 +323,7 @@
}
}
if(index == 0){
this.searchAll = true
this.searchForm.picture = 0
this.searchForm.score = 0
}else if(index ==1){
@ -324,7 +361,7 @@
let that = this;
let hiver_token = uni.getStorageSync("hiver_token")
await uni.uploadFile({
url: getApp().globalData.mainurl + '/upload/file',
url: that.tui.interfaceUrl() + '/upload/file',
filePath: path,
name: 'file',
header: {
@ -352,9 +389,18 @@
}, 1000)
},
//
largeImg(img) {
this.bigImg = 'https://jewel-shop.oss-cn-beijing.aliyuncs.com/00b1f011787c4549bbea650d95a4eb39.png'
this.$refs.imgPopup.open()
getPictureList(picture) {
if (!picture) return []
if (Array.isArray(picture)) return picture.filter(Boolean)
return String(picture).split(',').map(item => item.trim()).filter(Boolean)
},
largeImg(picture, currentIndex = 0) {
const urls = this.getPictureList(picture)
if (!urls.length) return
uni.previewImage({
urls,
current: urls[currentIndex] || urls[0]
})
},
back() {
uni.navigateBack()
@ -368,245 +414,471 @@
width: 100%;
height: 100%;
font-size: 24rpx;
background: #F5F8F5;
background: #F7F8FA;
color: #00231C;
}
.page1 {
width: 100%;
height: 100%;
min-height: 100vh;
font-size: 24rpx;
position: relative;
background: linear-gradient(180deg, #F2FFF8 0%, #F7F8FA 360rpx, #F7F8FA 100%);
}
.evaluate-fixed {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
background: linear-gradient(180deg, #EEFFF6 0%, #F7F8FA 100%);
box-shadow: 0 12rpx 28rpx rgba(0, 35, 28, 0.05);
}
.evaluate-fixed-holder {
height: 470rpx;
}
.title {
background: url('https://jewel-shop.oss-cn-beijing.aliyuncs.com/8bc15960c2dc40268e295d6dd23aecce.png') no-repeat;
width: 100%;
height: 54%;
height: 210rpx;
background:
radial-gradient(circle at 16% 20%, rgba(115, 255, 199, 0.35) 0, rgba(115, 255, 199, 0) 210rpx),
linear-gradient(135deg, #F3FFF7 0%, #EAFFF4 48%, #FFF8EC 100%);
}
.title-sreach {
width: 100%;
display: flex;
height: 200rpx;
height: 210rpx;
position: relative;
}
.back-btn {
padding-top: 110rpx;
margin: 110rpx 0 0 30rpx;
width: 64rpx;
height: 64rpx;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.78);
box-shadow: 0 10rpx 24rpx rgba(0, 35, 28, 0.08);
}
.title-name {
padding-top: 110rpx;
font-size: 36rpx;
font-size: 34rpx;
font-weight: 700;
flex: 1;
text-align: center;
line-height: 64rpx;
letter-spacing: 2rpx;
}
.content {
position: absolute;
top: 200rpx;
width: 95%;
margin-left: 2.5%;
width: 100%;
height: calc(100vh - 470rpx);
box-sizing: border-box;
padding: 0 24rpx;
}
.comment-scroll {
width: 100%;
height: 100%;
box-sizing: border-box;
padding-bottom: 36rpx;
margin-top:20rpx;
}
.comment-item {
padding: 28rpx;
margin-bottom: 22rpx;
border-radius: 28rpx;
background: #FFFFFF;
box-shadow: 0 16rpx 40rpx rgba(0, 35, 28, 0.06);
}
.evaluate-fixed .shop-rate,
.evaluate-fixed .menu-list {
width: calc(100% - 48rpx);
margin-left: 24rpx;
}
.shop-rate {
display: flex;
padding-bottom: 30rpx;
margin-top: 4rpx;
padding: 28rpx 30rpx;
box-sizing: border-box;
border-radius: 30rpx;
background: #FFFFFF;
box-shadow: 0 16rpx 40rpx rgba(255, 132, 34, 0.12);
}
.rate-left {
display: flex;
align-items: center;
flex: 1;
}
.rate-num {
font-size: 86rpx;
font-size: 88rpx;
line-height: 94rpx;
font-weight: 700;
background: linear-gradient(90deg, rgba(255, 77, 0, 1), rgba(255, 184, 84, 1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.rate-right {
display: flex;
width: 160rpx;
height: 100rpx;
line-height: 40rpx;
font-size: 36rpx;
text-align: center;
font-weight: 700;
border-left: 1px solid #eee;
.rate-info {
margin-left: 24rpx;
}
.rate-star {
height: 100rpx;
padding: 32rpx 20rpx;
.rate-label {
margin-bottom: 12rpx;
font-size: 24rpx;
color: #7A8782;
font-weight: 700;
}
.right1 {
margin: 20rpx 0 0 5%;
width: 45%;
.rate-star {
line-height: 36rpx;
}
.menu-list {
height: 100rpx;
width: 100%;
height: 110rpx;
display: flex;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
padding-top: 30rpx;
border-top: 1px solid #eee;
}
.checked-img {
width: 100%;
height: 20rpx;
position: absolute;
bottom: 0;
left: 0;
.menu1 {
min-width: 176rpx;
height: 64rpx;
margin-right: 18rpx;
line-height: 64rpx;
border-radius: 999rpx;
text-align: center;
font-size: 28rpx;
color: #6D7874;
background: rgba(255, 255, 255, 0.78);
box-shadow: inset 0 0 0 1rpx rgba(0, 35, 28, 0.06);
flex-shrink: 0;
}
.menu1 {
width: 180rpx;
height: 70rpx;
position: relative;
margin-right: 20rpx;
line-height: 70rpx;
flex: 1;
.menu1-active {
color: #00231C;
font-weight: 700;
background: linear-gradient(135deg, #B5FFDD 0%, #FDF4B9 100%);
box-shadow: 0 10rpx 24rpx rgba(0, 180, 126, 0.14);
}
.menu-text {
padding: 0 24rpx;
}
.eval-title {
width: 100%;
height: 80rpx;
display: flex;
align-items: center;
}
.eval-icon {
height: 80rpx;
width: 80rpx;
height: 82rpx;
width: 82rpx;
border-radius: 50%;
overflow: hidden;
flex-shrink: 0;
background: #EAF5EF;
box-shadow: 0 8rpx 18rpx rgba(0, 35, 28, 0.08);
image {
width: 100%;
height: 100%;
background-size: 100%;
display: block;
}
}
.eval-name {
min-width: 0;
margin-left: 20rpx;
}
.name1 {
font-size: 28rpx;
line-height: 50rpx;
line-height: 42rpx;
font-weight: 700;
color: #142D26;
}
.eval-rate {
.eval-time {
margin-top: 4rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #87918E;
}
.eval-rate-row {
display: flex;
margin: 20rpx 0 0 100rpx;
height: 48rpx;
line-height: 40rpx;
align-items: center;
margin-top: 22rpx;
}
.eval-content {
margin-left: 100rpx;
margin-left: 102rpx;
font-size: 28rpx;
color: #5C6662;
line-height: 46rpx;
}
.eval-text {
margin-top: 12rpx;
color: #4E5A56;
word-break: break-all;
}
.goods-list {
margin: 4rpx 0 16rpx;
}
.goods-card {
display: flex;
padding: 16rpx;
margin-bottom: 12rpx;
background: #F7F8FA;
border-radius: 16rpx;
}
.goods-img {
width: 104rpx;
height: 104rpx;
border-radius: 12rpx;
background: #eef1ee;
flex-shrink: 0;
}
.goods-info {
flex: 1;
min-width: 0;
margin-left: 16rpx;
line-height: 36rpx;
}
.goods-name {
font-size: 26rpx;
font-weight: 700;
color: #00231C;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods-spec {
margin-top: 6rpx;
font-size: 22rpx;
color: #999;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.goods-bottom {
display: flex;
justify-content: space-between;
margin-top: 8rpx;
font-size: 24rpx;
color: #777;
line-height: 48rpx;
}
.eval-img {
display: flex;
width: 100%;
overflow-x: scroll;
margin-top: 20rpx;
flex-wrap: wrap;
margin-top: 22rpx;
gap: 16rpx;
image {
width: 100rpx;
height: 100rpx;
background-size: 100%;
margin-right: 20rpx;
width: 150rpx;
height: 150rpx;
border-radius: 18rpx;
background: #EEF1EE;
}
}
/* 卡片整体样式(可根据需要调整外间距) */
.reply-card {
border-radius: 12rpx;
background-color: #eee;
border-radius: 20rpx;
background-color: #F8FAF9;
width: 100%;
box-sizing: border-box;
margin-top:20rpx;
margin-top: 20rpx;
padding: 18rpx 20rpx;
border: 1rpx solid rgba(0, 35, 28, 0.06);
}
/* 标题行:左标签 + 右按钮 */
.reply-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 16rpx;
.reply-title {
position: relative;
padding-left: 18rpx;
margin-bottom: 10rpx;
font-size: 24rpx;
line-height: 34rpx;
color: #17352D;
font-weight: 700;
}
.reply-label {
font-size: 28rpx;
font-weight: 500;
color: #333;
.reply-title::before {
content: '';
position: absolute;
left: 0;
top: 8rpx;
width: 6rpx;
height: 18rpx;
border-radius: 999rpx;
background: #20D38B;
}
.reply-expand-btn {
font-size: 24rpx;
padding: 4rpx 12rpx;
.reply-list {
display: flex;
flex-direction: column;
}
/* 回复内容基础样式 */
.reply-content {
position: relative;
font-size: 26rpx;
color: #555;
padding: 12rpx;
transition: all 1s;
height: 70rpx;
color: #5A6460;
padding: 14rpx 0;
flex: 1;
display: block;
height: auto;
overflow: visible;
line-height: 42rpx;
}
/* 折叠状态:单行省略 */
.reply-content.collapsed {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
.reply-content + .reply-content {
border-top: 1rpx solid rgba(0, 35, 28, 0.06);
}
/* 展开状态:固定高度100px,可滚动 */
.reply-content.expanded {
display: block;
height: auto;
/* 固定高度100px */
overflow-y: auto;
/* 内容超长时滚动 */
/* 重置折叠相关属性 */
-webkit-line-clamp: unset;
-webkit-box-orient: unset;
text-overflow: clip;
padding-bottom: 10px;
.reply-name {
color: #17352D;
font-weight: 700;
}
/* 滚动条美化(可选) */
.reply-content.expanded::-webkit-scrollbar {
width: 12rpx;
.reply-time {
margin-top: 4rpx;
font-size: 22rpx;
line-height: 32rpx;
color: #99A19E;
}
.reply-content.expanded::-webkit-scrollbar-thumb {
background-color: #ccc;
border-radius: 20rpx;
.reply-operate {
margin-top: 18rpx;
}
.reply-action {
text-align: right;
color: #00AEEF;
font-size: 26rpx;
font-weight: 700;
padding: 10rpx 0;
}
.eval-num{
padding-bottom: 30rpx;
border-bottom: 1px solid #eee;
.reply-editor-box {
margin-top: 12rpx;
border-radius: 22rpx;
border: 1rpx solid rgba(0, 35, 28, 0.08);
background: #FAFBFA;
overflow: hidden;
}
.eval-num {
border-bottom: 1rpx solid rgba(0, 35, 28, 0.06);
}
.reply-textarea {
width: 100%;
height: 200rpx;
box-sizing: border-box;
padding: 26rpx;
font-size: 28rpx;
line-height: 42rpx;
color: #243832;
}
.reply-upload-row {
display: flex;
padding: 22rpx 26rpx;
}
.upload-img {
width: 160rpx;
height: 160rpx;
border-radius: 18rpx;
display: block;
}
.upload-add {
display: flex;
align-items: center;
justify-content: center;
background: #F0F3F2;
border: 1rpx dashed #C8D2CE;
}
.reply-preview-list {
flex: 1;
display: flex;
}
.reply-preview {
width: 160rpx;
height: 160rpx;
margin-left: 20rpx;
}
.reply-img {
margin-top: 16rpx;
}
.reply-fold {
margin-top: 8rpx;
padding-top: 12rpx;
border-top: 1rpx solid rgba(0, 35, 28, 0.06);
font-size: 24rpx;
line-height: 34rpx;
color: #00AEEF;
font-weight: 700;
text-align: right;
}
.reply-buttons {
display: flex;
flex-direction: row-reverse;
align-items: center;
margin-top: 18rpx;
}
.reply-confirm,
.reply-cancel {
min-width: 108rpx;
height: 58rpx;
line-height: 58rpx;
border-radius: 999rpx;
text-align: center;
font-size: 26rpx;
}
.reply-confirm {
margin-left: 18rpx;
color: #FFFFFF;
font-weight: 700;
background: linear-gradient(135deg, #20D38B 0%, #00BFFF 100%);
box-shadow: 0 10rpx 22rpx rgba(0, 191, 255, 0.18);
}
.reply-cancel {
color: #7A8782;
background: #F1F3F2;
}
</style>
Loading…
Cancel
Save