aidlab/Code-Create
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

阿里巴巴icon

Browse Source
This commit is contained in:
李志鹏
2026-05-15 10:48:15 +08:00
parent e797612de6
commit 1153bce74e
3 changed files with 127 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
index.html
View File

@@ -5,6 +5,7 @@
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>test-ssg</title>
<link rel="stylesheet" href="https://at.alicdn.com/t/c/font_4403230_bui5mtufs1c.css" />
</head>
<body>
<div id="app"></div>

1
src/components/back-top.vue
View File

@@ -12,6 +12,7 @@
fill="none"
></path>
</svg>
<span class="iconfont icon-direction-up"></span>
</div>
</template>

134
src/components/main-header.vue
View File

@@ -3,9 +3,23 @@
<img class="logo" src="../assets/logo-full.png" alt="code-create" />
<div class="center-nav">
<div class="nav-item" v-for="item in navList" :key="item.path">
<router-link class="nav-item-link" :to="item.path">
<router-link class="link" :to="item.path" v-if="item.path">
{{ item.name }}
</router-link>
<span v-else class="link">{{ item.name }}</span>
<div
class="child"
v-if="item.children && item.children.length > 0"
>
<router-link
class="child-link"
:to="child.path"
v-for="child in item.children"
:key="child.path"
>
{{ child.name }}
</router-link>
</div>
</div>
</div>
<div class="right">
@@ -16,8 +30,9 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route);
const navList = ref([
{
name: "Home",
@@ -25,15 +40,37 @@
},
{
name: "About Us",
path: "/about",
path: "/about-us",
},
{
name: "Our Solutions",
path: "/solutions",
children: [
{
name: "AiDA 3.1",
path: "/aida",
},
{
name: "Mixi",
path: "/mixi",
},
],
},
{
name: "Communities",
path: "/communities",
children: [
{
name: "Events",
path: "/events",
},
{
name: "User Stories",
path: "/user-stories",
},
{
name: "Help Centre",
path: "/help-centre",
},
],
},
{
name: "Media",
@@ -41,7 +78,7 @@
},
{
name: "Contact Us",
path: "/contact",
path: "/contact-us",
},
]);
</script>
@@ -71,11 +108,90 @@
align-items: center;
justify-content: center;
> .nav-item {
> .nav-item-link {
position: relative;
> .link {
margin: 0 14px;
color: #fff;
font-size: 16px;
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:before {
width: 100%;
}
}
> .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));
> .child-link {
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;
}
}
}
}
> .right {
display: flex;
align-items: center;
justify-content: center;
> span {
margin: 0 14px;
color: #fff;
font-size: 15px;
text-decoration: none;
line-height: 37px;
display: inline-block;
position: relative;
}
}
}