在vue中css的active使用

这里仅仅是active的使用更明了一点，其他可以忽略，只看active。 对于我来说在vue中使用active更明确一点

<template>
	<home-item :span="24" :lg="16" :xl="12" type="dbsy" :is-more="false">
		<div class="home_dbsx">
			<div v-loading="notDoneApproveTypeLoading" class="home_dbsy_box">
				<div v-if="list.length > 0" v-for="(item, index) in list" :key="index" class="item" :class="{ active: active === index }" :style="{ backgroundColor: active === index ? item.bgActive : item.bg }" @click="handleApproveType(item, index)">
					<img class="icon" :src="require(&#x27;@/assets/self/&#x27; + styleList[index].icon)">
					<div class="label ellipsis">{{ item.dictLabel }}</div>
					<span class="num">{{ item.number }}</span></div></div></div></home-item></template>

				<div v-if="active === index" v-loading="item.loading" class="tip view_scroll">
					<template v-if="item.taskList.length > 0">
						<div v-for="(cItem, cIndex) in item.taskList" :key="cIndex" class="tip_item" @click="handleTaskType(cItem, cIndex, item)">
							<div class="tip_circle"></div>
							<div class="tip_label ellipsis">{{ cItem.flow_name }}</div>
							<div class="tip_num">{{ cItem.number }}</div>
						</div>
					</template>

					<my-empty v-else size="small"/>
				</div>
			</div>

			<my-empty v-if="list.length <= 0" size="small"/>
		</div>
	</div>
</home-item>

</template>


import HomeItem from '../homeItem'
import MyEmpty from '@/components/Empty'
import {mapGetters} from "vuex";
import {flowableFlowActiveTaskGetDealtTaskNum} from "@/api/personalCenter/done";

export default {
        name: "index",
        components: {
                HomeItem,
                MyEmpty,
        },
        data() {
                return {
                        active: -1,
                        list: [],
                        styleList: [
                                { icon: "dbsy_sj.png", bg: "rgba(113, 181, 227, 0.05)", bgActive: "rgba(113, 181, 227, 0.15)" },
                                { icon: "dbsy_jc.png", bg: "rgba(84, 105, 121, 0.05)", bgActive: "rgba(84, 105, 121, 0.15)" },
                                { icon: "dbsy_gc.png", bg: "rgba(237, 113, 97, 0.05)", bgActive: "rgba(237, 113, 97, 0.15)" },
                                { icon: "dbsy_jl.png", bg: "rgba(136, 192, 87, 0.05)", bgActive: "rgba(136, 192, 87, 0.15)" },
                                { icon: "dbsy_fzy.png", bg: "rgba(238, 175, 75, 0.05)", bgActive: "rgba(238, 175, 75, 0.15)" },
                                { icon: "dbsy_qt.png", bg: "rgba(151, 119, 168, 0.05)", bgActive: "rgba(151, 119, 168, 0.15)" },
                        ]
                }
        },
        computed:{
                ...mapGetters(["notDoneApproveTypeOptions", "notDoneApproveTypeLoading"]),
        },
        created() {
                this.init();
        },
        methods: {
                async init() {
                        await this.$store.dispatch("getNotDoneApproveTypeOptions");
                        this.list = this.notDoneApproveTypeOptions.map((item, index) => {
                                return Object.assign(
                                        {},
                                        item,
                                        this.styleList[index],
                        {
                                                taskList: [],
                                                loading: false,
                                        }
                                )
                        });
                },

	/**
	 * 点击 审批类型
	 */
	async handleApproveType(item, index) {
		this.active = this.active === index ? -1 : index;
		item.loading = true;
		let res = await flowableFlowActiveTaskGetDealtTaskNum(item.dictValue);
		item.taskList = res.data.sort((a, b) => b.number - a.number);
		item.loading = false;
	},

	/**
	 * 点击 任务类型
	 */
	handleTaskType(item, index, pItem) {
		this.$store.commit("SET_CUR_NOT_DONE_APPROVE_TYPE", pItem.primitive_type);
		this.$store.dispatch("setNotDoneRouter", item);
	}
}
}


.home_dbsx {
        height: 100%;
        display: flex;
        overflow: hidden;
        padding-bottom: 10px;
}

.home_dbsy_box {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

.item {
	flex-shrink: 0;
	width: calc(100% / 3);
	height: 50%;
	border: 1px solid #E8E8E8;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	background-color: rgba(113, 181, 227, 0.05);
	line-height: 1;
	cursor: pointer;
	position: relative;
	transition: all .3s;
}

.icon {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	object-fit: cover;
	margin-right: 20px;
}

.label {
	width: 100%;
	font-size: 14px;
	color: #333333;
}

.num {
	flex-shrink: 0;
	font-size: 18px;
	font-weight: bold;
	color: #F14000;
	margin-left: 20px;
}

.tip {
	width: 100%;
	height: calc(200% + 2px);
	background-color: #FFFFFF;
	border: 1px solid #E8E8E8;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	padding: 20px;
	overflow-y: auto;
	position: absolute;
	bottom: 0;
	left: calc(100% + 2px);
	z-index: 10;
	transform-style: preserve-3d;

	.tip_item {
		width: 100%;
		height: 20px;
		line-height: 20px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 15px;
		transition: all .3s;
	}

	.tip_item:last-of-type {
		margin-bottom: 0;
	}

	.tip_circle {
		flex-shrink: 0;
		width: 5px;
		height: 5px;
		background: #D8D8D8;
		border-radius: 100%;
		margin-right: 10px;
	}

	.tip_label {
		width: 100%;
		font-size: 14px;
		color: #3F3F3F;
	}

	.tip_num {
		flex-shrink: 0;
		font-size: 14px;
		margin-left: 10px;
		color: #3F3F3F;
	}

	.tip_item:hover {
		.tip_circle {
			background-color: #F14000;
		}

		.tip_label {
			color: #1890FF;
		}

		.tip_num {
			color: #1890FF;
		}
	}
}

.item:not(:nth-of-type(1)):not(:nth-of-type(2)):not(:nth-of-type(3))  {
	border-top-color: transparent;
}

.item:nth-of-type(1) .tip,
.item:nth-of-type(2) .tip,
.item:nth-of-type(3) .tip  {
	top: 0;
	bottom: auto;
}
.item:nth-of-type(3n + 3) .tip {
	left: auto;
	right: calc(100% + 2px);
}

.item:hover,
.active {
	border-color: #1890FF !important;

	.tip {
		animation: slit 0.7s forwards ease-out;
	}
}

@keyframes slit {
	0% {
		transform: translateZ(-250px) rotateY(90deg);
	}
	50% {
		transform: translateZ(-250px) rotateY(89deg);
		opacity: 1;
	}
	100% {
		transform: translateZ(0) rotateY(0deg);
		opacity: 1;
	}
}
}