【套餐】基于微信小程序外卖点餐订餐系统 毕业设计 源代码下载地址:https://ke.qq.com/course/package/28654?tuin=2b10d56 有需要的请添加QQ 45157718(微信同号) 咨询
wxml代码 <form bindsubmit='pinglun'>
<view class='pinglun'>
<block wx:for="{{stars}}" wx:key="*this">
<image class="star-image" style="left: {{item*50}}px" src="{{key >= item ? selectedSrc : normalSrc}}" data-key="{{item}}" bindtap="select00" wx:key="*this"></image>
</block>
<view class='pinglun-biaoti'>评价(请打分)</view>
<view class='pinglun-neirong'>
<textarea placeholder='请输入评论,500字以内' name="neirong" auto-height></textarea>
</view>
<button class='pinglun-tijiao' form-type='submit'>提交评论</button>
</view>
</form>
wxss代码
/*评论*/
.pinglun{
display: flex;
flex-direction: column;
box-sizing: border-box;
font-size: 14px;
}
.pinglun-biaoti{
line-height: 30px;
padding: 5px;
background-color: #f9f9f9;
}
.pinglun-neirong{
background-color: white;
border-top: 1px solid gainsboro;
border-bottom: 1px solid gainsboro;
padding: 5px;
margin-top: 50px;
height: 50px;
}
.pinglun-tijiao{
background-color: orange;
color: white;
width: 90%;
margin-top: 10px;
}
/*五星打分*/
.star-image{
position: absolute;
top: 39px;
width: 50px;
height: 50px;
src: "/images/normal.png"
}
/*评论内容*/
.pl{
border-top: 1px solid gainsboro;
border-bottom: 1px solid gainsboro;
display: flex;
flex-direction: column;
padding: 10px;
margin-top: 10px;
background-color: white;
}
.pl-yonghu{
display: flex;
border-bottom: 1px dotted gainsboro;
padding-bottom: 5px;
}
.pl-nicheng{
flex-grow: 1;
font-size: 14px;
}
.pl-shijian{
font-size: 12px;
color: gray;
}
.pl-xx{}
.pl-img{
width: 15px; height: 15px;
}
.pl-neirong{
color: gray;
font-size: 12px;
}
有需要的请添加QQ 45157718(微信同号) 咨询
|