This commit is contained in:
2025-08-11 17:47:51 +08:00
parent 54e657f53d
commit 285536c739
2 changed files with 256 additions and 254 deletions

View File

@@ -13,21 +13,21 @@
<!-- 评论主体-start -->
<view class="comment-list" v-if="commentData.comment.length != 0">
<!-- 评论主体-顶部数量及发表评论按钮-start -->
<view class="comment-num">
<!-- <view class="comment-num">
<view> {{ commentData.commentSize }} 条评论</view>
<view class="add-btn">
<button type="primary" size="mini" @click="commentInput">
发表评论
</button>
</view>
</view>
</view> -->
<!-- 评论主体-顶部数量及发表评论按钮-end -->
<!-- 评论列表-start -->
<view class="comment-box" v-for="(item, index) in commentData.comment">
<view class="comment-box-item">
<view>
<image
:src="item.avatarUrl || emptyAvatar"
:src="item.user.avatar || emptyAvatar"
mode="aspectFill"
class="avatar"
></image>
@@ -36,56 +36,46 @@
<!-- 父评论体-start -->
<view class="comment-main-top">
<view class="nick-name-box">
<view class="comLogo com1" v-if="index == 0">沙发</view>
<view class="comLogo com2" v-if="index == 1">板凳</view>
<view class="comLogo com3" v-if="index == 2">地板</view>
<view class="comLogo com4" v-if="index > 2"
>{{ index + 1 }}</view
>
<view class="nick-name">{{ item.nickName }}</view>
</view>
<view class="zan-box" @click="like(item.id)">
<span :class="item.hasLike ? 'isLike' : 'notLike'">{{
item.likeNum == 0 ? "抢首赞" : item.likeNum
}}</span>
<img
style="width: 14px; height: 14px"
v-if="!item.hasLike"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII="
/>
<img
style="width: 14px; height: 14px"
v-else
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg=="
/>
<view class="nick-name" style="font-size: 32rpx">{{
item.user.nickname ? item.user.nickname : "普通用户"
}}</view>
</view>
</view>
<view class="comment-main-content">
{{
<view
class="comment-main-content"
style="color: #555459; line-height: 38rpx"
@click="reply(item.user.nickname, item.user.nickname, item.id)"
>
{{ item.content }}
<!-- {{
item.content.length > 60
? item.content.slice(0, 59)
: item.content
}}
<span v-if="item.content.length > 60">
}} -->
<!-- <span v-if="item.content.length > 60">
{{ item.hasShowMore ? item.content.slice(59) : "..." }}
<span class="foot-btn" @click="showMore(item.id)">
<span class="foot-btn" @click="showMore(item.id)" style="color: #5188e5 !important;">
{{ item.hasShowMore ? "收起" : "展开" }}
</span>
</span>
</span> -->
</view>
<view class="comment-main-foot">
<view class="foot-time">{{ item.createTime }}</view>
<view
class="foot-btn"
@click="reply(item.nickName, item.nickName, item.id)"
>回复</view
class="foot-time"
style="color: #555459; letter-spacing: 1rpx; font-size: 24rpx"
>{{ item.createTime }}</view
>
<view
class="foot-btn"
@click="reply(item.user.nickname, item.user.nickname, item.id)"
>回复</view
>
<!-- <view
class="foot-btn"
v-if="item.owner"
@click="confirmDelete(item.id)"
>删除</view
>
> -->
</view>
<!-- 父评论体-end -->
<!-- 子评论列表-start -->
@@ -93,7 +83,7 @@
<view class="comment-sub-item" v-for="each in item.children">
<view>
<image
:src="each.avatarUrl || emptyAvatar"
:src="each.user.avatar || emptyAvatar"
mode="aspectFill"
class="avatar"
>
@@ -101,50 +91,46 @@
</view>
<view class="comment-main">
<view class="sub-comment-main-top">
<view class="nick-name">{{ each.nickName }}</view>
<view class="zan-box" @click="like(each.id)">
<span :class="each.hasLike ? 'isLike' : 'notLike'">{{
each.likeNum == 0 ? "抢首赞" : each.likeNum
}}</span>
<img
style="width: 14px; height: 14px"
v-if="!each.hasLike"
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAApVJREFUWEfFlz9oFEEUxr93SWEhFkIaBUljo4WgATEaiI0GwVLBQg2EzLd3hSBqLI2lRgWLY+ftSSQgggoWNv5pImLUwjQBg1goqCCIIBqwueSeTLg7Ln9Mcmdub7vdnZnvN9+8fe+toMWXtFgfDQGMjo52zM7OHgMwIyLTg4ODk41upG4A7/0OEbkPYGdFVEQuOOeuNQJRN4CqBvGw+3dm9kZEBsrCPSRf1gvRCIAFETPrjqLodZIkY2Z2SkQmnHMHUgMgOQ8fx3FvJpMZB/CDZEfqACEgi8XidwA/SW5uKkCN2AzJTYscmCTZ1VQA7/2AiNwSkefOuYNBLEmSnJnlATwgebypAKr6CMBRANdJng9i3vu8iORE5Mrc3NyTlQDM7HMul/tYO2bNX0GhUDhRKpXumtlvAPuiKJouOzBuZr117HyBU6sCqOpeAH0AhssiwyQvVwTjOO5va2s7vRaAGtCrJC+GOVUAVb1UTjDVDLd4URHJOuf8WsSWG5MkSbeZTYR3lc+4CpAkyUpWht3fI/m+UfEwL5/Pb2xvb59ZFkBV5zNchazsSBBeYPn/ABQKhZ5SqfQCwBTJXYuPoOkAqnoGwE0Ad0ieTB3Ae39bRPoBDJEcSR1AVd8C2CMifc65p6kCmJkkSfIHwAYAW0h+SxVAVXcDmDSzL1EUbasEc20eaGoQVuoIgMckj6QOoKo3AJwFMEJyqBUAIegOAegnOdYKgK8AtmYyma7aLjqVGPDebxeRDwB+AeggWUzVAVV1ABTAK5L7l+0HVPUTgM7Q7VQGhPJZe99oHagpw4dJPvsXQPixONeoyErzRGTKzB7W9hFLjiA8iOO4M7iw3hDZbLbq6pIeY73F6l1v1Zas3gXrHf8XhhNvMGSmtPYAAAAASUVORK5CYII="
/>
<img
style="width: 14px; height: 14px"
v-else
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAfVJREFUWEfFl79LHEEUx7/vclr4g51TLFQQW9FNDFhFBDvjtcF0gXSp5eYuWJlUAW9NIP9BIFUEOxFtTKF2FrezKFgkkEBS3h4SAtHbJ6vu5W5d1F3cm20WZt+b7+e9mTfzlqD5Ic36SATw+OPJQP2ft+ABJwQ+VFIcJA0kEYBpVfcAehKIMqHoFISVBCI2wOS76mi9g76HxTLwZiqybzcuRGwAc7WWB/NGWIhBu440ZlIHmFitLRPzm+tC9EtJY1gjAP9VMtelEQC2kuJR6gCm5X4BsBAWImDdluJZqgBjH/4MZr3TYzB6IoRWmHnzJgDK0g+1KL4128SqgnD9x432yn5NSfE88L0VYPx9rS/jYR6EJTCPJxQNu60oKV77gw2Ai/Ly1/ZKRElx8c20XL4n0ZZpgvkbAKbl7gCYDax0ALREmjJAo2SbM9A+AKLPqmC8aNkD4bVOMwPEKNlFUdYGkAE9rUhjSxvA2YOOoaPF7t+6AH4qKUauHURt3AObSoq8NgAGyo4UJW0ABH5py9wnbQAAppq76HYfRLXOXmPg4BWdasoA7yuZm47sB0zL9Vvt0TQvI/bqc06pfzsS4KHlWgwUUgKwmWjdKRhvI1q5/0P+T8dZ9jILTjH31X9PlKuNKzppXxDMFeV/a0eUVPSuftoBzgHKR/ohZwAugwAAAABJRU5ErkJggg=="
/>
</view>
<view
class="nick-name"
style="font-size: 32rpx"
v-if="each.user"
>{{
each.user.nickname ? each.user.nickname : "普通用户"
}}</view
>
</view>
<view class="comment-main-content">
{{
each.content.length > 60
? each.content.slice(0, 59)
: each.content
}}
<span v-if="each.content.length > 60">
{{ each.hasShowMore ? each.content.slice(59) : "..." }}
<span class="foot-btn" @click="showMore(each.id)">
{{ each.hasShowMore ? "收起" : "展开" }}
</span>
</span>
<view
class="comment-main-content"
style="color: #555459 !important; line-height: 38rpx"
>
{{ each.content }}
</view>
<view class="comment-main-foot">
<view class="foot-time">{{ each.createTime }}</view>
<view
class="foot-time"
style="
color: #555459;
letter-spacing: 1rpx;
font-size: 24rpx;
"
>{{ each.createTime }}</view
>
<view
class="foot-btn"
@click="reply(item.nickName, each.nickName, item.id)"
v-if="each.user"
@click="
reply(each.user.nickname, each.user.nickname, item.id)
"
>
回复</view
>
<view
<!-- <view
class="foot-btn"
v-if="each.owner"
@click="confirmDelete(each.id)"
>删除
</view>
</view> -->
</view>
</view>
</view>
@@ -157,54 +143,70 @@
</view>
<!-- 评论主体-end -->
<!-- 无评论-start -->
<view class="comment-none" v-else>
<view class="comment-none">
<image
:src="user.icon ? user.icon : '/static/images/avatar.png'"
style="
width: 80rpx;
height: 80rpx;
margin: 0 10rpx;
width: 70rpx;
height: 70rpx;
margin: 0 8rpx;
display: block;
border-radius: 80rpx;
border-radius: 70rpx;
"
/>
<button
class="comment-btn"
@click="showInput = true"
v-if="!showInput"
>
写评论
</button>
<!-- background-color: #dadada59; -->
<!-- <view style="width: calc(100% - 120rpx);margin-right: 20rpx;position: relative;padding:20rpx 20rpx;border-radius: 10rpx;">
<view v-if="currentInputComment" style="position: absolute;top: 10rpx;"><text @click="currentInputComment=''">清空</text><text @click="sendComment">发送</text></view>
<textarea style="font-size: 26rpx;width: calc(100%);color: #333;"
v-model="currentInputComment"
auto-height
clear
maxlength="-1"
placeholder="写评论..."
placeholder-class=""
/>
</view> -->
<view
class="input-container"
:style="{ bottom: keyboardHeight + 'px' }"
v-if="showInput"
>
<input
v-model="commentContent"
class="comment-input"
placeholder="请输入评论..."
@focus="onInputFocus"
@blur="onInputBlur"
:auto-focus="showInput"
/>
<button class="send-btn" @click="sendComment">发送</button>
</view>
<!-- background-color: #dadada59; -->
<view
style="
width: calc(100% - 100rpx);
margin-right: 20rpx;
position: relative;
padding: 20rpx 20rpx;
border-radius: 10rpx;
"
>
<view v-if="currentInputComment" style="position: absolute; top: 10rpx"
><text @click="currentInputComment = ''">清空</text
><text @click="sendComment">发送</text></view
>
<view
style="font-size: 30rpx; width: calc(100%)"
@click="showInput = true"
v-if="!showInput"
>写评论...</view
>
</view>
<view
class="input-container"
:style="{ bottom: keyboardHeight + 'px' }"
v-if="showInput"
>
<view style="overflow: hidden; margin-bottom: 12rpx"
><text
@click="
showInput = false;
commentContent = '';
"
style="float: left"
>取消</text
><text @click="sendComment" style="float: right; color: #1985fd"
>发送</text
></view
>
<view>
<textarea
auto-height
style="max-height: 200rpx; overflow-y: auto; padding: 20rpx"
v-model="commentContent"
class="comment-input"
maxlength="-1"
:placeholder="placeholder ? placeholder : '写评论...'"
@focus="onInputFocus"
@blur="onInputBlur"
:auto-focus="showInput"
/>
</view>
</view>
<!-- 暂无评论<span @click="commentInput" style="color: #007AFF;">立即评论</span> -->
</view>
@@ -247,7 +249,7 @@ v-model="currentInputComment"
</template>
<script>
import text from 'uview-ui/libs/config/props/text';
import text from "uview-ui/libs/config/props/text";
export default {
name: "hb-comment",
@@ -281,18 +283,18 @@ export default {
},
data() {
return {
showInput: false, // 是否显示输入框
commentContent: '', // 评论内容
keyboardHeight: 0, // 软键盘高度
keyboardListener: null, // 软键盘监听事件
currentInputComment:'',
pId: 0,
showInput: false, // 是否显示输入框
commentContent: "", // 评论内容
keyboardHeight: 0, // 软键盘高度
keyboardListener: null, // 软键盘监听事件
currentInputComment: "",
emptyAvatar:
"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAABF5JREFUWEfFl11oHFUUx//nbmKwxdJ9qFL7YPEhRJC2gljjF60WG0WsoNkWfSnZ7Jy7FVPF0AoKpmBFqyIG3Jk7G1iIQXHbBz+KbbGtRfBbMe2LseKjiVDoiqIhwZ0jV3fb3cnM7kQCuU+7M+ec/+9+nHPPEJZ50DLrY1EApVJp9fz8/BYRuZ2INgDYWJvAWRE5R0RnZmZmPh4ZGZlPOrFEAMVi8e4gCPYSUZ+IXGGFgiCYIaJpKyQi1yql1orIFgAXARxRSvm5XO67diBtAYwxRQCDAE4RUUkpdWxwcNCKLBiu665TSj0kIpqIbgTgMzO3gmgJYIz5CMB9AIaZ+bXGQMVi8RoRuZeI/lZKHc1ms3/U34+Pj6+cnZ3dC+AggGPMfH8cRCyAMUZqThlmPlwPUCgU0qlUyq7Kww1BrbjHzPsahYwx/QDK9hkzR2pFPjTGnAWwIexkjOkRkRIR3Rozo5Miskdr/VMIxE7mHDPXD+2l1wsA6nseBMHmfD7/dSjQOwB2tTlYC/bddd1blFJfARhj5lyjfxNA7bSfitpz3/d3iYgFaDuUUjeHM8AY8zSAV5VS9+RyudP1IE0Axpj3Aaxk5m1hFc/zPiWiO9uq/2dwiJn3h22NMScB/MnMOxYAjI6Orurq6rpgU0hrXYpw/hFAd0KAD5n5wbCt7/t7ROT1ubm5NUNDQ7/b95dWwHXd7Uqp452dnVcPDAxciACwDlclAbAFynGcdRGr2EtEnwdB0JfP5080ARhjDhLRbY7jbI0SMcZUAKxOAgDgN2ZOx8SxGfEiMz/bBOD7/lgQBCu01o/GOH4PYFNCgElmvinK1vf9X2xxchzHVtfLW2CMOQpgipmHYwBeBtBUaOJgRKSgtX48Js63AH5l5geaADzPe1cpddFxnHyM42YAXyZYAXt+epn557iVFJHzWuudYYDnlFJ9juPcESfi+35JRHa3gdjPzIfibIwxNtPe0Fq/EAZ4hIhcZl4T5+y67nql1CcA1kfZENFnrSZQ6ycqItKvtT4SBthIRJMdHR092WzW5nzk8H1/WEReiQHY4TjOB3G+nuf9qyEim7TW9r65fAjL5fKVlUrlPICXmPnNFquwWym1oFBZ+yAItubz+TMtAJ4gon3pdLo7k8nMNgHYP7ZeE5EWkbuYeaYx0NjY2HXValUDeApAV4zIJIADzPxe+H2hULg+lUp9U6sBl3qLprugXC6nKpXKF0R02nGcZ2wQ3/e3ichOEckQ0aoEWQDbsgF4a3p6eqLeH3qeN0FE3el0ujeTyVTrcaKuY1uIjIg8CaCfiLYnEW1hY4WPi8gEgMeY+e1G27iGxHYxtptZynGYmTPhgK1asqWEiBRfcAjDdMaYpYCIFW8LUMuM54nIsb3/YvbDXskiYtuzA6382n4X1CDWAnCSgNSFa98ETakcWbwWMytjzAoAPUEQ3JBKpXrs75r/VLVanVJK/VC7Uf9KGjfRCiQN9n/slh3gHz9i4jC+FVL5AAAAAElFTkSuQmCC",
commentData: null,
placeholder: "请输入评论",
placeholder: "",
commentReq: {
pId: null, // 评论父id
content: null, // 评论内容
},
pUser: null, // 标签-回复人
showTag: false, // 标签展示与否
@@ -302,7 +304,12 @@ export default {
};
},
mounted: function () {
this.keyboardListener = uni.onKeyboardHeightChange(res => {
this.pId = 0;
this.showInput = false;
this.placeholder = "写评论...";
this.commentContent = "";
this.keyboardListener = uni.onKeyboardHeightChange((res) => {
this.keyboardHeight = res.height;
});
uni.onKeyboardHeightChange((res) => {
@@ -316,10 +323,10 @@ export default {
}
},
methods: {
onInputFocus() {
onInputFocus() {
// 可以在这里添加额外的逻辑,如滚动到输入框位置
},
// 输入框失去焦点
onInputBlur() {
// 如果输入框为空,点击空白处关闭输入框
@@ -327,15 +334,16 @@ export default {
this.showInput = false;
}
},
// 发送评论
sendComment() {
if (this.commentContent.trim()) {
// 这里添加发送评论的逻辑
console.log('发送评论:', this.commentContent);
console.log("发送评论:", this.commentContent);
this.$emit("add", this.commentContent, this.pId);
// 发送成功后清空并隐藏输入框
this.commentContent = '';
this.commentContent = "";
this.showInput = false;
}
},
@@ -355,13 +363,17 @@ export default {
reply(pUser, reUser, pId) {
this.pUser = pUser;
this.commentReq.pId = pId;
if (reUser) {
this.commentReq.content = "@" + reUser + " ";
} else {
this.commentReq.content = "";
}
this.showTag = true;
this.commentInput();
this.pId = pId;
this.placeholder = "回复 " + pUser + ":";
// if (reUser) {
// this.commentReq.content = "@" + reUser + " ";
// } else {
// this.commentReq.content = "";
// }
this.showInput = true;
// this.showTag = true;
// this.commentInput();
},
// 删除评论前确认
confirmDelete(commentId) {
@@ -377,20 +389,20 @@ export default {
},
});
},
// 新增评论
add() {
if (
this.commentReq.content == null ||
this.commentReq.content.length < 2
) {
uni.showToast({
title: "评论内容过短",
duration: 2000,
});
return;
}
this.$emit("add", this.commentReq);
},
// // 新增评论
// add() {
// if (
// this.commentReq.content == null ||
// this.commentReq.content.length < 2
// ) {
// uni.showToast({
// title: "评论内容过短",
// duration: 2000,
// });
// return;
// }
// this.$emit("add", this.commentReq);
// },
// 点赞评论
like(commentId) {
this.$emit("like", commentId);
@@ -491,7 +503,7 @@ export default {
<style lang="scss" scoped>
.hb-comment {
// padding: 10rpx;
// padding: 10rpx;
}
.top-read {
@@ -587,6 +599,8 @@ export default {
.nick-name {
color: #2d8cf0;
color: #262626;
font-size: 40rpx;
}
.isLike {
@@ -602,7 +616,8 @@ export default {
}
.comment-main-content {
padding: 10rpx 10rpx 10rpx 0;
padding: 8rpx 10rpx 8rpx 0;
// font-size: 30rpx;
}
.comment-main-foot {
@@ -630,7 +645,7 @@ export default {
}
.foot-btn {
padding-left: 10rpx;
padding-left: 20rpx;
color: #007aff;
}
@@ -643,9 +658,9 @@ export default {
}
.comment-none {
padding: 20rpx 0;
padding: 16rpx 0;
width: 100%;
// text-align: center;
// text-align: center;
color: #999999;
position: absolute;
bottom: 0;
@@ -653,6 +668,10 @@ export default {
display: flex;
align-items: flex-start;
justify-content: space-between;
border-top: 1rpx solid #e1e1e1;
font-size: 32rpx !important;
background-color: #fff;
}
.comment-submit-box {
@@ -716,7 +735,7 @@ export default {
position: fixed;
left: 0;
width: 100%;
display: flex;
// display: flex;
padding: 10px;
background-color: #fff;
border-top: 1px solid #eee;
@@ -725,11 +744,12 @@ export default {
}
.comment-input {
flex: 1;
width: 100%;
// flex: 1;
height: 40px;
padding: 0 15px;
background-color: #f5f5f5;
border-radius: 20px;
border-radius: 20rpx;
font-size: 14px;
}