Commit b7c5f452d0cb0a077edf3d7457484aa6780d7a36
1 parent
1264bc96
样式优化
Showing
2 changed files
with
37 additions
and
30 deletions
src/pages/myGiftBox/myGiftBox.less
| ... | ... | @@ -139,6 +139,8 @@ |
| 139 | 139 | } |
| 140 | 140 | .screenPopup { |
| 141 | 141 | .screen_box { |
| 142 | + height: calc(100vh-90px); | |
| 143 | + overflow-y: auto; | |
| 142 | 144 | .title { |
| 143 | 145 | height: 40px; |
| 144 | 146 | font-size: 28px; |
| ... | ... | @@ -186,22 +188,26 @@ |
| 186 | 188 | } |
| 187 | 189 | } |
| 188 | 190 | } |
| 189 | - .bottom_btn { | |
| 190 | - display: flex; | |
| 191 | - text-align: center; | |
| 192 | - line-height: 90px; | |
| 193 | - .reset { | |
| 194 | - width: 224px; | |
| 195 | - height: 90px; | |
| 196 | - background: rgba(249, 249, 249, 1); | |
| 197 | - color: #666666; | |
| 198 | - } | |
| 199 | - .confirm { | |
| 200 | - flex: 1; | |
| 201 | - height: 90px; | |
| 202 | - background: rgba(208, 2, 27, 1); | |
| 203 | - color: rgba(255, 255, 255, 1); | |
| 204 | - } | |
| 191 | + } | |
| 192 | + .bottom_btn { | |
| 193 | + display: flex; | |
| 194 | + text-align: center; | |
| 195 | + line-height: 90px; | |
| 196 | + width: 100%; | |
| 197 | + position: fixed; | |
| 198 | + bottom: 0; | |
| 199 | + right: 0; | |
| 200 | + .reset { | |
| 201 | + width: 224px; | |
| 202 | + height: 90px; | |
| 203 | + background: rgba(249, 249, 249, 1); | |
| 204 | + color: #666666; | |
| 205 | + } | |
| 206 | + .confirm { | |
| 207 | + flex: 1; | |
| 208 | + height: 90px; | |
| 209 | + background: rgba(208, 2, 27, 1); | |
| 210 | + color: rgba(255, 255, 255, 1); | |
| 205 | 211 | } |
| 206 | 212 | } |
| 207 | 213 | } | ... | ... |
src/pages/myGiftBox/myGiftBox.vue
| ... | ... | @@ -118,19 +118,20 @@ |
| 118 | 118 | <div class="btn_list"> |
| 119 | 119 | <div |
| 120 | 120 | class="btn" |
| 121 | - :class="{'active':item.show}" | |
| 121 | + :class="{ active: item.show }" | |
| 122 | 122 | @click="changBtn(item)" |
| 123 | 123 | v-for="(item, index) in items.tab_List" |
| 124 | - :key="index"> | |
| 124 | + :key="index" | |
| 125 | + > | |
| 125 | 126 | {{ item.name }} |
| 126 | 127 | </div> |
| 127 | 128 | </div> |
| 128 | 129 | </div> |
| 129 | - <!-- 重置和确定 --> | |
| 130 | - <div class="bottom_btn"> | |
| 131 | - <div class="reset">重置</div> | |
| 132 | - <div class="confirm">确定</div> | |
| 133 | - </div> | |
| 130 | + </div> | |
| 131 | + <!-- 重置和确定 --> | |
| 132 | + <div class="bottom_btn"> | |
| 133 | + <div class="reset">重置</div> | |
| 134 | + <div class="confirm">确定</div> | |
| 134 | 135 | </div> |
| 135 | 136 | </van-popup> |
| 136 | 137 | </div> |
| ... | ... | @@ -193,12 +194,12 @@ export default { |
| 193 | 194 | isLoading: false, //下拉刷新 |
| 194 | 195 | popupShow: false, // 右侧筛选抽屉显示隐藏 |
| 195 | 196 | screenList: [ |
| 196 | - { title: "支付", tab_List: [{ name: "未支付", status: 0}] }, | |
| 197 | + { title: "支付", tab_List: [{ name: "未支付", status: 0 }] }, | |
| 197 | 198 | { |
| 198 | 199 | title: "分享", |
| 199 | 200 | tab_List: [ |
| 200 | - { name: "可分享", status: 0}, | |
| 201 | - { name: "已领完", status: 1} | |
| 201 | + { name: "可分享", status: 0 }, | |
| 202 | + { name: "已领完", status: 1 } | |
| 202 | 203 | ] |
| 203 | 204 | }, |
| 204 | 205 | { |
| ... | ... | @@ -335,10 +336,10 @@ export default { |
| 335 | 336 | }, |
| 336 | 337 | // 选中按钮 |
| 337 | 338 | changBtn(item) { |
| 338 | - if(item.show){ | |
| 339 | - this.$set(item,"show", false) | |
| 340 | - }else{ | |
| 341 | - this.$set(item,"show", true) | |
| 339 | + if (item.show) { | |
| 340 | + this.$set(item, "show", false); | |
| 341 | + } else { | |
| 342 | + this.$set(item, "show", true); | |
| 342 | 343 | } |
| 343 | 344 | }, |
| 344 | 345 | /** | ... | ... |