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,6 +139,8 @@ | ||
| 139 | } | 139 | } |
| 140 | .screenPopup { | 140 | .screenPopup { |
| 141 | .screen_box { | 141 | .screen_box { |
| 142 | + height: calc(100vh-90px); | ||
| 143 | + overflow-y: auto; | ||
| 142 | .title { | 144 | .title { |
| 143 | height: 40px; | 145 | height: 40px; |
| 144 | font-size: 28px; | 146 | font-size: 28px; |
| @@ -186,22 +188,26 @@ | @@ -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,19 +118,20 @@ | ||
| 118 | <div class="btn_list"> | 118 | <div class="btn_list"> |
| 119 | <div | 119 | <div |
| 120 | class="btn" | 120 | class="btn" |
| 121 | - :class="{'active':item.show}" | 121 | + :class="{ active: item.show }" |
| 122 | @click="changBtn(item)" | 122 | @click="changBtn(item)" |
| 123 | v-for="(item, index) in items.tab_List" | 123 | v-for="(item, index) in items.tab_List" |
| 124 | - :key="index"> | 124 | + :key="index" |
| 125 | + > | ||
| 125 | {{ item.name }} | 126 | {{ item.name }} |
| 126 | </div> | 127 | </div> |
| 127 | </div> | 128 | </div> |
| 128 | </div> | 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 | </div> | 135 | </div> |
| 135 | </van-popup> | 136 | </van-popup> |
| 136 | </div> | 137 | </div> |
| @@ -193,12 +194,12 @@ export default { | @@ -193,12 +194,12 @@ export default { | ||
| 193 | isLoading: false, //下拉刷新 | 194 | isLoading: false, //下拉刷新 |
| 194 | popupShow: false, // 右侧筛选抽屉显示隐藏 | 195 | popupShow: false, // 右侧筛选抽屉显示隐藏 |
| 195 | screenList: [ | 196 | screenList: [ |
| 196 | - { title: "支付", tab_List: [{ name: "未支付", status: 0}] }, | 197 | + { title: "支付", tab_List: [{ name: "未支付", status: 0 }] }, |
| 197 | { | 198 | { |
| 198 | title: "分享", | 199 | title: "分享", |
| 199 | tab_List: [ | 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,10 +336,10 @@ export default { | ||
| 335 | }, | 336 | }, |
| 336 | // 选中按钮 | 337 | // 选中按钮 |
| 337 | changBtn(item) { | 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 | /** |