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

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

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

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

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