Commit 9aa3b99ca77530e6d295dd7ffb8571ddc46b8bfd
1 parent
109df401
tab切换
Showing
2 changed files
with
80 additions
and
6 deletions
src/pages/myGiftBox/myGiftBox.less
| 1 | +.my_gift_box{ | ||
| 2 | + width: 100%; | ||
| 3 | + height: calc(100vh-25px); | ||
| 4 | + background-color: #fff; | ||
| 5 | + padding-top: 25px; | ||
| 6 | + .top_box{ | ||
| 7 | + display: flex; | ||
| 8 | + justify-content: space-between; | ||
| 9 | + margin: 0 30px; | ||
| 10 | + img{ | ||
| 11 | + width: 37px; | ||
| 12 | + height: 37px; | ||
| 13 | + margin: 4px 0; | ||
| 14 | + } | ||
| 15 | + .tabs{ | ||
| 16 | + flex: 1; | ||
| 17 | + display: flex; | ||
| 18 | + justify-content: space-between; | ||
| 19 | + 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 | + } | ||
| 44 | + .desc{ | ||
| 45 | + width:114px; | ||
| 46 | + height:45px; | ||
| 47 | + font-size:26px; | ||
| 48 | + font-weight:400; | ||
| 49 | + color:rgba(153,153,153,1); | ||
| 50 | + line-height:45px; | ||
| 51 | + } | ||
| 52 | + } | ||
| 53 | +} |
src/pages/myGiftBox/myGiftBox.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div> | ||
| 3 | - <van-tabs v-model="active" line-width="13px" line-height="2px" color=""> | ||
| 4 | - <van-tab title="收礼">收礼</van-tab> | ||
| 5 | - <van-tab title="送礼">送礼</van-tab> | ||
| 6 | - </van-tabs> | 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 | + <!--内容--> | ||
| 7 | </div> | 26 | </div> |
| 8 | </template> | 27 | </template> |
| 9 | 28 | ||
| @@ -19,7 +38,9 @@ | @@ -19,7 +38,9 @@ | ||
| 19 | 38 | ||
| 20 | }, | 39 | }, |
| 21 | methods: { | 40 | methods: { |
| 22 | - | 41 | + onTap(active){ |
| 42 | + this.active= active | ||
| 43 | + } | ||
| 23 | } | 44 | } |
| 24 | } | 45 | } |
| 25 | </script> | 46 | </script> |