aaa

src/components/down-menu.vue

@@ -0,0 +1,100 @@
+<template>
+	<div class="down-menu">
+		<div class="title hover-bottom-animation" to="#">
+			{{ title }}
+			<span class="iconfont icon-arrow-down-bold"></span>
+		</div>
+		<div class="child">
+			<slot></slot>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+	import { ref, onMounted, onUnmounted } from 'vue'
+	const props = defineProps({
+		title: {
+			type: String,
+			default: ''
+		}
+	})
+</script>
+<style scoped lang="less">
+	.down-menu {
+		position: relative;
+		> .title {
+			margin: 0 14px;
+			color: #fff;
+			font-size: 15px;
+			text-decoration: none;
+			line-height: 37px;
+			display: inline-block;
+			position: relative;
+			cursor: pointer;
+			&::before {
+				content: '';
+				position: absolute;
+				height: 2px;
+				width: 0;
+				right: 0;
+				left: auto;
+				bottom: 0;
+				transition: width 0.2s ease-in-out;
+				-webkit-transition: width 0.2s ease-in-out;
+				background-color: #fff;
+			}
+			&:hover::before {
+				width: 100%;
+				left: 0;
+				right: auto;
+			}
+			&.router-link-exact-active:not(.parent):before {
+				width: 100%;
+			}
+			> .iconfont {
+				opacity: 0.5;
+				font-size: 10px;
+				margin-left: 5px;
+			}
+		}
+		> .child {
+			position: absolute;
+			bottom: 0;
+			visibility: hidden;
+			width: 250px;
+			height: auto;
+			padding: 10px 0;
+			box-sizing: border-box;
+			border: 1px solid #e1e1e1;
+			background-color: #fff;
+			display: flex;
+			flex-direction: column;
+			transform: translateY(calc(100% + 5px));
+			> * {
+				display: inline-block;
+				padding: 10px 15px;
+				color: #000;
+				font-size: 15px;
+				text-decoration: none;
+				text-align: left;
+				&:hover {
+					opacity: 0.5;
+				}
+			}
+		}
+		&:hover > .child {
+			animation: child-show 0.2s linear both;
+		}
+		@keyframes child-show {
+			0% {
+				visibility: hidden;
+				// opacity: 0;
+			}
+			100% {
+				// opacity: 1;
+				transform: translateY(100%);
+				visibility: visible;
+			}
+		}
+	}
+</style>