1 <view class="content" wx:for="{{content}}"> 2 <view class="opinion"> 3 <view class="title"> 4 <image src='{{staticImg}}home/evaluation/store.png' class='store'></image> 5 <text class='style'>{{item.style}}</text> 6 <text class='price'>¥{{item.price}}</text> 7 <view class='place'>{{item.place}}</view> 8 </view> 9 </view> 10 11 <view class='middle'> 12 <view class='score'> 13 <text class='value'>评分</text> 14 <view class="block"> 15 <view class='num' wx:for="{{assImg}}"> 16 <image src='{{item.src}}' class='wjx'></image> 17 </view> 18 </view> 19 <text class='total'>{{item.total}}分</text> 20 <text class='date'>{{item.date}}</text> 21 </view> 22 <view class="detail"> 23 <view class='describe'>{{item.describe}}</view> 24 <view class="specific">{{item.specific}}</view> 25 <view class='show'> 26 <view class='cont' wx:for="{{item.src}}"> 27 <image src='{{item}}' data-index='{{index}}' bindtap='previewImg' class="bask"></image> 28 </view> 29 </view> 30 </view> 31 </view> 32 </view>
1 page{ 2 font-family: "微软雅黑"; 3 background-color: #f0f0f0; 4 } 5 .content{ 6 width:100%; 7 overflow: hidden; 8 background-color: #fff; 9 margin-bottom: 17rpx; 10 } 11 .title{ 12 width:707rpx; 13 height:133rpx; 14 background-color: #f0f0f0; 15 margin-top:13rpx; 16 margin-left:20rpx; 17 position: relative; 18 } 19 .store{ 20 width: 100rpx; 21 height:100rpx; 22 position: absolute; 23 top:15rpx; 24 left:15rpx; 25 } 26 .style{ 27 width:300rpx; 28 font-size: 30rpx; 29 font-weight: 700; 30 color: #000; 31 position: absolute; 32 left:132rpx; 33 top:16rpx; 34 } 35 .price{ 36 width:100rpx; 37 font-size: 30rpx; 38 font-weight: 700; 39 color:#c00; 40 position: absolute; 41 left:610rpx; 42 top:16rpx; 43 } 44 .place{ 45 width: 300rpx; 46 font-size: 26rpx; 47 position: absolute; 48 left:136rpx; 49 top:84rpx; 50 } 51 .middle{ 52 width:707rpx; 53 overflow: hidden; 54 margin-left:20rpx; 55 background-color: #fff; 56 } 57 .score{ 58 width:707rpx; 59 height:74rpx; 60 position: relative; 61 } 62 .value{ 63 width:80rpx; 64 height:74rpx; 65 line-height: 74rpx; 66 float: left; 67 font-size: 30rpx; 68 } 69 .block{ 70 width:160rpx; 71 height:35rpx; 72 position: absolute; 73 top:24rpx; 74 left:75rpx; 75 } 76 .wjx{ 77 float: left; 78 width:30rpx; 79 height:30rpx; 80 } 81 .total{ 82 width:80rpx; 83 height:35rpx; 84 font-size: 30rpx; 85 color: #c00; 86 position: absolute; 87 left:230rpx; 88 top:20rpx; 89 } 90 .date{ 91 width:200rpx; 92 height:30rpx; 93 font-size: 26rpx; 94 color: #888888; 95 position: absolute; 96 left:555rpx; 97 top:24rpx; 98 } 99 .detail{ 100 width:630rpx; 101 overflow: hidden; 102 margin-left: 102rpx; 103 } 104 .describe{ 105 font-size: 26rpx; 106 color: #888888; 107 line-height: 43rpx; 108 text-overflow: ellipsis; 109 overflow: hidden; 110 white-space: nowrap; 111 } 112 .specific{ 113 width:600rpx; 114 font-size: 26rpx; 115 line-height: 48rpx; 116 overflow : hidden; 117 text-overflow: ellipsis; 118 display: -webkit-box; 119 -webkit-line-clamp: 3; 120 -webkit-box-orient: vertical; 121 } 122 .show{ 123 /* margin-top:rpx; */ 124 margin-bottom: 15rpx; 125 } 126 .con{ 127 width:100rpx; 128 height: 100rpx; 129 float: left; 130 display: inline-block; 131 } 132 .bask{ 133 width:100rpx; 134 height:100rpx; 135 margin-top: 15rpx; 136 margin-right: 15rpx; 137 margin-bottom: 15rpx; 138 float: left; 139 }
1 const app = getApp() 2 Page({ 3 4 data: { 5 staticImg: app.globalData.staticImg, 6 // 评价中的五角星(四颗星) 7 assImg: [ 8 { src: "/pages/home/evaluation/img/rwj.png" }, 9 { src: "/pages/home/evaluation/img/rwj.png" }, 10 { src: "/pages/home/evaluation/img/rwj.png" }, 11 { src: "/pages/home/evaluation/img/rwj.png" }, 12 { src: "/pages/home/evaluation/img/wj.png"}, 13 ], 14 // 评价中的五角星(五颗星) 15 assRImg: [ 16 { src: "/pages/home/evaluation/img/rwj.png"}, 17 { src: "/pages/home/evaluation/img/rwj.png"}, 18 { src: "/pages/home/evaluation/img/rwj.png" }, 19 { src: "/pages/home/evaluation/img/rwj.png" }, 20 { src: "/pages/home/evaluation/img/rwj.png" }, 21 ], 22 23 content:[ 24 { 25 style:'标准洗车-五座轿车', 26 price:' 17', 27 place:'合肥青龙潭路店', 28 total:'4.0', 29 date:'2018-06-27', 30 describe:'服务态度好，洗车干净，洗车速度快', 31 specific:'很不错的一次洗车体验，下次还会光顾的', 32 src:[ 33 '/pages/home/evaluation/img/Bask.png', 34 '/pages/home/evaluation/img/Bask.png', 35 36 ], 37 }, 38 { 39 // url1: '/pages/home/evaluation/img/store.png', 40 style: '自助小保养', 41 price: '442', 42 place: '合肥青龙潭路店', 43 total: '4.0', 44 date: '2018-06-27', 45 describe: '服务态度好，洗车干净，洗车速度快', 46 specific: '很不错的一次洗车体验，下次还会光顾的很不错的一次洗车体验，下次还会光顾的很不错的一次洗车体验，下次还会光顾的很不错的一次洗车体验，下次还会光顾的很不错的一次洗车体验，下次还会光顾的', 47 48 }, 49 50 ], 51 52 }, 53 54 //图片放大 55 previewImg: function (e) { 56 console.log(e) 57 console.log(e.currentTarget.dataset.index); 58 var index = e.currentTarget.dataset.index; 59 var imgArr = this.data.content[index].src; 60 wx.previewImage({ 61 current: imgArr[index], //当前图片地址 62 urls: imgArr, //所有要预览的图片的地址集合 数组形式 63 }) 64 } 65 66 67 })
