移動端評論區頁面設計
阿新 • • 發佈：2020-10-22
需求：評論介面樣式設計。
PS：介面比較粗糙，參考的朋友可自己細化。
實現如下圖：
程式碼：
1 <template> 2 <div class="ym-comment"> 3 <div class="comment-title"> 4 <p> 5 <span>遊戲評論 <em>共<i>3</i>條</em></span> 6 <span><i class="i-icon"></i>問題反饋</span> 7</p> 8 <div class="comment-url opendialog"><i class="i-icon2"></i> 真實、客觀、豐富的評論內容，更容易獲得大家的贊哦~</div> 9 </div> 10 11 <div class="comment-list"> 12 <ul> 13 <li class="cf" v-for="i in 6" :key="i"> 14 <div class="avatar"> 15<nut-avatar @active-avatar="activeAvatar"></nut-avatar> 16 </div> 17 <div class="info"> 18 <div class="base"> 19 <span>請你麻溜的團成團離開此地</span> 20 <nut-rate v-if="i==2" v-model="val" :size="14" :spacing="5" :readOnly="true"></nut-rate> 21</div> 22 <div class="con" v-if="i!=2"> 23 <p>有漂亮可愛的小姐姐加好友麼？送裝備哦~~~</p> 24 </div> 25 <div class="con" v-if="i==2"> 26 <p class="ppl_text">《冒險王3OL》有3個不同特性的職業，分別位戰士、法師和弓箭手，每個職業都有自己獨特的3條技能成長線，可以自行搭配出最適合自己的技能線，在這裡有個小訣竅技能開啟...</p> 27 <p class="solong">《冒險王3OL》有3個不同特性的職業，分別位戰士、法師和弓箭手，每個職業都有自己獨特的3條技能成長線，可以自行搭配出最適合自己的技能線，在這裡有個小訣竅技能開啟越晚傷害也就越高！技能搭配時刷怪建議以群攻技能為主，BOSS戰或PVP建議以高傷害的單體技能為主；指揮系統可以讓角色針對不同的戰鬥情況優先按照設定來進行戰鬥。</p> 28 <a href="javascript:;" class="ppl_look">檢視全文</a> 29 </div> 30 <div class="reply"> 31 <div class="rep"> 32 <p><span>打醬油的飯盒一個：</span>裝備太多怎麼辦？有人要麼？</p> 33 <p><span>打翻醬油的飯盒一個：</span>裝備太多怎麼辦？有人要麼？</p> 34 <a v-if="i==2" href="#" class="replaymore">點選檢視更多回復 >></a> 35 </div> 36 </div> 37 <div class="operation"> 38 <span>07 - 2{{ i }}</span> 39 <div class="right"> 40 <a href="javascript:;" class="btn-jubao">舉報</a> 41 <a href="javascript:;" class="btn-zan">3{{ i }}</a> 42 <a href="javascript:;" class="btn-rep">回覆</a> 43 </div> 44 </div> 45 </div> 46 </li> 47 </ul> 48 <div class="showmore"> 49 <div class="nomore">沒有更多評論了</div> 50 </div> 51 </div> 52 </div> 53 </template> 54 55 <script> 56 export default { 57 props: { 58 59 }, 60 data () { 61 return { 62 val: 3 63 } 64 }, 65 components: { 66 }, 67 created () { 68 69 }, 70 mounted () { 71 }, 72 watch: { 73 }, 74 methods: { 75 activeAvatar () { 76 console.log('e') 77 } 78 } 79 } 80 </script> 81 82 <style lang="scss" scoped> 83 .comment-title{ 84 @include wh(100%, auto); 85 p{ 86 @include verticalCenterFlex(space-between, center); 87 padding: 10px; 88 em{ 89 display: inline-block; 90 color: #959595; 91 } 92 i{ 93 color: #f00; 94 } 95 96 span:last-child{ 97 color: #959595; 98 99 .i-icon{ 100 display: inline-block; 101 @include wh(34px, 32px); 102 background: url(../assets/images/icon.png) no-repeat 0 -1234px; 103 transform: scale(0.5); 104 } 105 } 106 107 } 108 .comment-url{ 109 padding: 0 10px 20px 0; 110 margin: 0 10px; 111 border: 1px #ccc solid; 112 box-sizing: border-box; 113 color: #959595; 114 border-radius: 2px; 115 line-height: 12px; 116 117 .i-icon2{ 118 display: inline-block; 119 @include wh(30px, 30px); 120 background: url(../assets/images/icon.png) no-repeat 0 -2432px; 121 transform: scale(0.5); 122 } 123 } 124 } 125 .comment-list{ 126 .cf{ 127 border-bottom: 1px #e3e3e3 solid; 128 @include verticalCenterFlex(flex-start, flex-start); 129 padding: 10px 15px; 130 .avatar{ 131 padding: 2px 10px 0 0; 132 vertical-align: middle; 133 } 134 .info{ 135 .base{ 136 @include verticalCenterFlex(space-between, center); 137 text-align: left; 138 color: #3d94ee; 139 padding: 5px 0; 140 } 141 .con{ 142 text-align: left; 143 .ppl_text{ 144 font-size: 14px; 145 } 146 147 .solong{ 148 display: none; 149 } 150 .ppl_look{ 151 color: #ff811c; 152 display: block; 153 padding: 4px 0; 154 } 155 } 156 .reply{ 157 background: #f5f5f5; 158 border-radius: 2px; 159 margin-top: 10px; 160 padding: 6px 10px 10px; 161 position: relative; 162 163 &::after { 164 position: absolute; 165 content: ""; 166 top: -20px; 167 left: 20px; 168 width: 0; 169 height: 0; 170 border: 10px solid transparent; 171 border-bottom: 10px #f5f5f5 solid; 172 } 173 174 .rep{ 175 176 p{ 177 text-align: left; 178 line-height: 20px; 179 span{ 180 color: #959595; 181 vertical-align: top; 182 } 183 } 184 } 185 186 .replaymore{ 187 display: block; 188 @include wh(100%, 30px); 189 line-height: 30px; 190 border-radius: 4px; 191 border: 1px #ccc solid; 192 background: #fff; 193 color: #555; 194 margin-top: 10px; 195 } 196 } 197 .operation{ 198 @include verticalCenterFlex(space-between, center); 199 color: #959595; 200 margin-top: 15px; 201 202 a{ 203 padding-left: 24px; 204 line-height: 20px; 205 } 206 .btn-jubao{ 207 margin-right: 20px; 208 } 209 210 .btn-zan{ 211 background: url(../assets/images/zan.png) left center no-repeat; 212 background-size: 15px 15px; 213 margin-right: 20px; 214 } 215 216 .btn-rep{ 217 background: url(../assets/images/comment.png) left center no-repeat; 218 background-size: 15px 14px; 219 } 220 } 221 } 222 } 223 } 224 .nomore{ 225 display: block; 226 color: #999999; 227 @include wh(100%, 45px); 228 line-height: 45px; 229 } 230 </style>