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 | 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 | 26 | </div> |
| 8 | 27 | </template> |
| 9 | 28 | |
| ... | ... | @@ -19,7 +38,9 @@ |
| 19 | 38 | |
| 20 | 39 | }, |
| 21 | 40 | methods: { |
| 22 | - | |
| 41 | + onTap(active){ | |
| 42 | + this.active= active | |
| 43 | + } | |
| 23 | 44 | } |
| 24 | 45 | } |
| 25 | 46 | </script> | ... | ... |