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,32 +14,7 @@ | ||
| 14 | } | 14 | } |
| 15 | .tabs{ | 15 | .tabs{ |
| 16 | flex: 1; | 16 | flex: 1; |
| 17 | - display: flex; | ||
| 18 | - justify-content: space-between; | ||
| 19 | margin: 0 134px 0 200px; | 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 | .desc{ | 19 | .desc{ |
| 45 | width:114px; | 20 | width:114px; |
src/pages/myGiftBox/myGiftBox.vue
| 1 | <template> | 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 | </template> | 17 | </template> |
| 29 | 18 | ||
| 30 | <script> | 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 | methods: { | 32 | methods: { |
| 46 | - onTap(active){ | ||
| 47 | - this.active= active | 33 | + onTap(active) { |
| 34 | + this.active = active; | ||
| 48 | } | 35 | } |
| 49 | } | 36 | } |
| 50 | - } | 37 | +}; |
| 51 | </script> | 38 | </script> |
| 52 | 39 | ||
| 53 | <!-- Add "scoped" attribute to limit CSS to this component only --> | 40 | <!-- Add "scoped" attribute to limit CSS to this component only --> |