<template>
|
<div class="mycard" :style="{ width: props.width }">
|
<div class="mycard-title" v-if="!!title">
|
<div class="name">{{ props.title }}</div>
|
</div>
|
<div class="mycard-content">
|
<div class="data-box" v-if="props.tabArray.length > 0">
|
<div v-for="(item, i) in props.tabArray" :key="i" class="li-box" :class="isActive == item.value ? 'is-li' : ''"
|
@click="changeActive(item.value)">
|
{{ item.label }}
|
</div>
|
</div>
|
<slot></slot>
|
</div>
|
</div>
|
</template>
|
|
<script setup>
|
const emit = defineEmits();
|
const props = defineProps({
|
title: {
|
type: String,
|
default: "",
|
},
|
width: {
|
type: String,
|
default: "100%",
|
},
|
tabArray: {
|
type: Array,
|
default: () => [],
|
},
|
});
|
const data = reactive({
|
isActive: "DAY",
|
});
|
const { isActive } = toRefs(data);
|
changeActive(isActive.value);
|
|
function changeActive(value) {
|
isActive.value = value;
|
emit("changeActive", isActive.value);
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.mycard {
|
//13
|
margin-top: 0;
|
padding-bottom: 1.2963vh; //14
|
|
.mycard-title {
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
height: 3.7037vh; //40
|
padding-left: 2.1354vw; //41px;
|
background: url('../../assets/images/basecard/title_bg.png') no-repeat;
|
background-size: auto 100%;
|
|
.name {
|
font-family: YouSheBiaoTiHei;
|
font-size: 1.2500vw; //24px;
|
color: #fff;
|
}
|
}
|
|
.mycard-content {
|
border: 1px solid;
|
border-image: linear-gradient(0deg, #0A3C86, #000) 1;
|
background: linear-gradient(0deg, rgba(18, 111, 216, 0.2) 0%, rgba(18, 111, 216, 0) 100%);
|
position: relative;
|
|
.data-box {
|
position: absolute;
|
right: 0.6771vw;
|
top: 0.9259vh;
|
color: #fff;
|
display: flex;
|
justify-content: flex-start;
|
align-items: center;
|
z-index: 1;
|
|
.li-box {
|
border: 1px solid #2E86EA;
|
cursor: pointer;
|
text-align: center;
|
padding: 0.3704vh 0.3125vw;
|
font-size: 0.6771vw;
|
}
|
|
.is-li {
|
background: #2E86EA;
|
border: 1px solid #2E86EA;
|
}
|
}
|
}
|
}
|
</style>
|