Commit 306cf605e117f687430c777b70a93679639a477a
1 parent
cf3c774c
tab优化
Showing
2 changed files
with
28 additions
and
66 deletions
src/pages/myGiftBox/myGiftBox.less
| ... | ... | @@ -14,32 +14,7 @@ |
| 14 | 14 | } |
| 15 | 15 | .tabs{ |
| 16 | 16 | flex: 1; |
| 17 | - display: flex; | |
| 18 | - justify-content: space-between; | |
| 19 | 17 | margin: 0 134px 0 200px; |
| 20 | - .tap{ | |
| 21 | - height:45px; | |
| 22 | - font-size:32px; | |
| 23 | - font-weight:400; | |
| 24 | - color:rgba(153,153,153,1); | |
| 25 | - line-height:45px; | |
| 26 | - width: 100px; | |
| 27 | - text-align: center; | |
| 28 | - .line{ | |
| 29 | - width:26px; | |
| 30 | - height:4px; | |
| 31 | - background:rgba(208,2,27,1); | |
| 32 | - border-radius:3px; | |
| 33 | - margin: 3px auto; | |
| 34 | - display: none; | |
| 35 | - } | |
| 36 | - } | |
| 37 | - .active{ | |
| 38 | - color: #D0021B; | |
| 39 | - .line{ | |
| 40 | - display: block; | |
| 41 | - } | |
| 42 | - } | |
| 43 | 18 | } |
| 44 | 19 | .desc{ |
| 45 | 20 | width:114px; | ... | ... |
src/pages/myGiftBox/myGiftBox.vue
| 1 | 1 | <template> |
| 2 | - <div class="my_gift_box"> | |
| 3 | - <!--tab切换--> | |
| 4 | - <div class="top_box"> | |
| 5 | - <img src="static/img/icon_back.png"/> | |
| 6 | - <div class="tabs"> | |
| 7 | - <div class="tap" :class="{'active':active!==2&&active===1}" @click="onTap(1)"> | |
| 8 | - <div>收礼</div> | |
| 9 | - <div class="line"> | |
| 10 | - | |
| 11 | - </div> | |
| 12 | - </div> | |
| 13 | - <div class="tap" :class="{'active':active!==1&&active===2}"@click="onTap(2)"> | |
| 14 | - <div>送礼</div> | |
| 15 | - <div class="line"> | |
| 16 | - | |
| 17 | - </div> | |
| 18 | - </div> | |
| 19 | - | |
| 20 | - </div> | |
| 21 | - <div class="desc"> | |
| 22 | - 规则说明 | |
| 23 | - </div> | |
| 24 | - </div> | |
| 25 | - <!--内容--> | |
| 26 | - <giftItem></giftItem> | |
| 27 | - </div> | |
| 2 | + <div class="my_gift_box"> | |
| 3 | + <!--tab切换--> | |
| 4 | + <div class="top_box"> | |
| 5 | + <img src="static/img/icon_back.png" /> | |
| 6 | + <div class="tabs"> | |
| 7 | + <van-tabs v-model="active"> | |
| 8 | + <van-tab title="标签 1">内容 1</van-tab> | |
| 9 | + <van-tab title="标签 2">内容 2</van-tab> | |
| 10 | + </van-tabs> | |
| 11 | + </div> | |
| 12 | + <div class="desc">规则说明</div> | |
| 13 | + </div> | |
| 14 | + <!--内容--> | |
| 15 | + <giftItem></giftItem> | |
| 16 | + </div> | |
| 28 | 17 | </template> |
| 29 | 18 | |
| 30 | 19 | <script> |
| 31 | - import giftItem from "@/components/giftItem/giftItem" | |
| 32 | - export default { | |
| 33 | - name: 'myGiftBox', | |
| 34 | - data () { | |
| 35 | - return { | |
| 36 | - active: 2, | |
| 37 | - } | |
| 20 | +import giftItem from "@/components/giftItem/giftItem"; | |
| 21 | +export default { | |
| 22 | + name: "myGiftBox", | |
| 23 | + data() { | |
| 24 | + return { | |
| 25 | + active: 0 | |
| 26 | + }; | |
| 38 | 27 | }, |
| 39 | - components:{ | |
| 40 | - giftItem | |
| 41 | - }, | |
| 42 | - created(){ | |
| 43 | - | |
| 28 | + components: { | |
| 29 | + giftItem | |
| 44 | 30 | }, |
| 31 | + created() {}, | |
| 45 | 32 | methods: { |
| 46 | - onTap(active){ | |
| 47 | - this.active= active | |
| 33 | + onTap(active) { | |
| 34 | + this.active = active; | |
| 48 | 35 | } |
| 49 | 36 | } |
| 50 | - } | |
| 37 | +}; | |
| 51 | 38 | </script> |
| 52 | 39 | |
| 53 | 40 | <!-- Add "scoped" attribute to limit CSS to this component only --> | ... | ... |