From 9cfb7141478e85dfc1367b6fb5f31852aa20c1d2 Mon Sep 17 00:00:00 2001
From: xuxueyang <xuxy@fengyuntec.com>
Date: 星期二, 03 九月 2024 11:43:24 +0800
Subject: [PATCH] update我的会员券、领券中心等
---
components/top-tabs.vue | 145 ++++++++++++++++++++++++++---------------------
1 files changed, 80 insertions(+), 65 deletions(-)
diff --git a/components/top-tabs.vue b/components/top-tabs.vue
index d6675d8..2915b97 100644
--- a/components/top-tabs.vue
+++ b/components/top-tabs.vue
@@ -1,76 +1,91 @@
<template>
- <view class="flex top-tabs">
- <view class="top-tab t-grey p10" v-for="(item,index) of tabs" @tap="changeIndex(index)"
- :class="[''+index==flg?'active':'']">
- {{ item.name || item.label || '' }}
- </view>
- </view>
+ <view class="flex top-tabs" :class="[type]">
+ <view class="top-tab t-grey p10" v-for="(item,index) of tabs" @tap="changeIndex(index)"
+ :class="[''+index==flg?'active':'']">
+ {{ item.name || item.label || '' }}
+ </view>
+ </view>
</template>
<script>
-export default {
- name: "top-tabs",
- data() {
- return {};
- },
- props: {
- tabs: {
- type: Array,
- default: []
- },
- flg: ""
- },
- methods: {
- changeIndex(index) {
- if (index == this.flg) {
+ export default {
+ name: "top-tabs",
+ data() {
+ return {};
+ },
+ props: {
+ tabs: {
+ type: Array,
+ default: []
+ },
+ flg: "",
+ type: '',
+ },
+ methods: {
+ changeIndex(index) {
+ if (index == this.flg) {
- } else {
- this.$emit('update:flg', index)
- this.$emit('change', index)
- }
+ } else {
+ this.$emit('update:flg', index)
+ this.$emit('change', index)
+ }
- }
- }
-}
+ }
+ }
+ }
</script>
-<style lang="scss">
-.top-tabs {
- .top-tab {
- color: #ffffff;
- flex: 1;
- text-align: center;
- }
+<style lang="scss" scoped>
+ .top-tabs.coupon {
+ .top-tab {
+ color: var(----topicdarkgray);
+ }
- .top-tab.active {
- color: #ffffff;
- font-weight: 600;
- // border-bottom: 8rpx solid #000;
- // 底部的线条
+ .top-tab.active {
+ color: var(--topicolor);
+ }
- font-weight: 600;
- font-size: 36rpx;
- color: #ffffff;
- line-height: 32rpx;
- text-align: center;
- font-style: normal;
- // padding: 0rpx;
- width: fit-content;
- position: relative;
- }
+ .top-tab.active::before {
+ background: var(--topicolor);
+ bottom: 0rpx;
+ }
+ }
- .top-tab.active::before {
- position: absolute;
- content: " ";
- left: 16rpx;
- right: 16rpx;
- bottom: 8rpx;
- // width: 110rpx;
- height: 8rpx;
- // background: #04BA97;
- background: #ffffff;
-
- border-radius: 4rpx;
- }
-}
-</style>
+ .top-tabs {
+ .top-tab {
+ color: #ffffff;
+ flex: 1;
+ text-align: center;
+ }
+
+ .top-tab.active {
+ color: #ffffff;
+ font-weight: 600;
+ // border-bottom: 8rpx solid #000;
+ // 底部的线条
+
+ font-weight: 600;
+ font-size: 36rpx;
+ line-height: 32rpx;
+ text-align: center;
+ font-style: normal;
+ // padding: 0rpx;
+ width: fit-content;
+ position: relative;
+ }
+
+ .top-tab.active::before {
+ position: absolute;
+ content: " ";
+ left: 16rpx;
+ right: 16rpx;
+ bottom: 8rpx;
+ // width: 110rpx;
+ height: 8rpx;
+ // background: #04BA97;
+ background: #ffffff;
+
+ border-radius: 4rpx;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3