caimei-applets-caimei/pages/seller/remarks/institutional-activity-analysis.vue

<template>
    <view class="container club clearfix">
        <view
            class="club-search clearfix"
            :style="{ paddingTop: StatusBar + 'px', backgroundImage: `url(${imgUrl})`, backgroundSize: '100% 100%' }"
        >
    		      <view class="search-top" :style="{ height: CustomBar - StatusBar + 'px' }">
                <view
                    class="search-icon"
                    :style="{
                        width: CustomBar - StatusBar + 'px',
                   		   height: CustomBar - StatusBar + 'px',
                        lineHeight: CustomBar - StatusBar + 'px;'
                    }"
                >
                    <text @click="handleNavigateBack" class="iconfont icon-fanhui"></text>
                </view>
                <view class="title">机构活跃分析</view>
            </view>
            <analysis-card />
        </view>
        <view class="analysis-list">
            <view class="analysis-tabs">
                <view
                    class="analysis-tab"
                    :class="currentTab === index && 'active'"
                    v-for="(item, index) in tabs"
                    :key="index"
                    @click="handleChangeActive(index)"
                >
                    {{ item.name }}
                </view>
            </view>
            <view class="list">
                <activity-analysis />
            </view>
        </view>
    </view>
</template>

<script>
import analysisCard from './components/analysis-card.vue'
import activityAnalysis from './components/activity-analysis.vue'
export default {
    components: {
        analysisCard,
        activityAnalysis
    },
    data() {
        return {
            isIphoneX: this.$store.state.isIphoneX,
            CustomBar: this.CustomBar,
            StatusBar: this.StatusBar,
            capsule: this.capsule,
            imgUrl: 'https://static.caimei365.com/app/img/icon/analysis-bg.png',
            currentTab: 0,
            tabs: [
                {
                    name: '活跃机构'
                },
                {
                    name: '不活跃机构'
                }
            ]
        }
    },
    mounted() {},
    methods: {
        handleChangeActive(e) {
            this.currentTab = e
        },
        handleNavigateBack() {
            this.$api.navigateBack(1)
        }
    }
}
</script>

<style lang="scss" scoped>
.container {
    background: #ffffff;
    position: relative;
}
.club-search {
    height: 700rpx;
    width: 100%;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    left: 0;
    z-index: 99;
    box-sizing: border-box;
    .search-top {
        display: flex;
        align-items: center;
        box-sizing: border-box;
        position: relative;
        margin-bottom: 80rpx;
        .title {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }
        .search-icon {
            text-align: center;
            float: left;
            .icon-fanhui {
                font-size: 44rpx;
                color: #333333;
            }
            .icon-shouye {
                font-size: 44rpx;
                color: #333333;
            }
        }
    }
}
.analysis-list {
    padding: 38rpx 24rpx;
    box-sizing: border-box;
    .analysis-tabs {
        color: #666666;
        display: flex;
        align-items: center;
        margin-bottom: 12rpx;
        .analysis-tab {
            font-size: 32rpx;
            height: 54rpx;
            margin-right: 80rpx;
            &.active {
                color: #ff5b00;
                border-bottom: 2px solid #ff5b00;
                font-weight: bold;
            }
        }
    }
}
</style>