ads_web/src/views/adManage/sb/index.vue

<template>
    <div class="ads-container">
        <div class="public-search">
            <DateRangePicker timezone="America/Los_Angeles" @change="changeDateRange"></DateRangePicker>
            <el-select v-model="portfolios" placeholder="广告组合"></el-select>
        </div>
        <el-tabs>
            <el-tab-pane label="广告活动">
                <campaigns></campaigns>
            </el-tab-pane>
            <el-tab-pane label="关键词"></el-tab-pane>
            <el-tab-pane label="商品投放"></el-tab-pane>
            <el-tab-pane label="搜索词"></el-tab-pane>
            <el-tab-pane label="广告位"></el-tab-pane>
        </el-tabs>

    </div>
</template>

<script lang="ts" setup>
import DateRangePicker from '/@/components/DateRangePicker/index.vue'
import campaigns from './campaigns/index.vue'
import {ref} from 'vue'

const portfolios = ref([])

function changeDateRange(val: string[]) {
    console.log(val)
}

</script>

<style scoped>
    .public-search {
        display: flex;
        gap: 3px;
        padding-bottom: 3px;
        position: sticky;
        top: 0;
        z-index: 10;
        width: 100%;
        background-color: #f8f8f8;
        box-shadow: 0px 0px 0px rgba(51, 89, 181, 0.16);
    }

    :deep(.el-tabs__header.is-top) {
        background-color: #fff;
        position: sticky;
        top: 32px;
        z-index: 9;
        box-shadow: 0px 0px 12px rgba(51, 89, 181, 0.16);
    }

    :deep(.el-tabs__nav) {
        padding-left: 10px;
    }

</style>