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

aaa

Browse Source
This commit is contained in:
李志鹏
2026-05-15 17:31:43 +08:00
parent 85708bb5a4
commit d237dab098
8 changed files with 325 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/assets/css/style.css
View File

@@ -154,3 +154,28 @@ button[custom="black-box"] {
--button-click-color: #fff;
--button-font-size: 1.6rem;
}
.hover-bottom-animation {
position: relative;
cursor: pointer;
}
.hover-bottom-animation::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-bottom-animation:hover::before {
width: 100%;
left: 0;
right: auto;
}
.hover-bottom-animation.active:before,
.hover-bottom-animation.router-link-exact-active:before {
width: 100%;
}

46
src/assets/css/style.less
View File

@@ -15,12 +15,19 @@ p {
* {
box-sizing: border-box;
}
h1, h2, h3, h4, h5, h6, .products-title{
h1,
h2,
h3,
h4,
h5,
h6,
.products-title {
font-family: Poppins, sans-serif;
font-weight: 600;
letter-spacing: 2px;
color: #222222;
text-transform: capitalize;
font-weight: 600;
letter-spacing: 2px;
color: #222222;
text-transform: capitalize;
}
@keyframes loading {
@@ -175,4 +182,33 @@ button[custom="black-box"] {
--button-click-bgcolor: #979797;
--button-click-color: #fff;
--button-font-size: 1.6rem;
}
.hover-bottom-animation {
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;
}
&.active:before,
&.router-link-exact-active:before {
width: 100%;
}
}

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

@@ -7,7 +7,7 @@
transition: 'stroke-dashoffset 10ms linear',
strokeDasharray: `${progress}, ${max}`,
stroke: '#222',
strokeWidth: 4,
strokeWidth: 4
}"
fill="none"
></path>
@@ -17,15 +17,15 @@
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
const max = ref(98 * Math.PI);
const progress = ref(0);
import { ref, onMounted, onUnmounted } from 'vue'
const max = ref(98 * Math.PI)
const progress = ref(0)
const handleScroll = (e: number) => {
progress.value = (e / 100) * max.value;
};
progress.value = (e / 100) * max.value
}
const handleClick = () => {
document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
};
document.documentElement.scrollTo({ top: 0, behavior: 'smooth' })
}
</script>
<style scoped lang="less">
.back-top {
@@ -52,6 +52,20 @@
transition: stroke-dashoffset 10ms linear;
}
}
&:hover > .iconfont {
animation: animArrow 1s infinite;
}
@keyframes animArrow {
0% {
transform: rotate(0deg);
}
50% {
transform: translateY(-3px);
}
100% {
transform: rotate(0deg);
}
}
animation: back-top-hidden 0.2s linear both;
&.active {

100
src/components/down-menu.vue Normal file
View File

@@ -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>

93
src/components/main-footer.vue
View File

@@ -1,25 +1,78 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
//const props = defineProps({
//})
//const emit = defineEmits([
//])
let data = reactive({
})
onMounted(()=>{
})
onUnmounted(()=>{
})
defineExpose({})
const {} = toRefs(data);
</script>
<template>
<header class="header">
</header>
<footer class="main-footer">
<div class="left">
<span>©2025 Code-Create Limited</span>
</div>
<div class="right">
<div v-for="item in nav" :key="item.path">
<router-link class="link" :to="item.path">{{ item.name }}</router-link>
</div>
</div>
</footer>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from 'vue'
const nav = ref([
{
name: 'Privacy Policy',
path: '/privacy-policy'
},
{
name: 'Terms of Use',
path: '/terms-of-use'
},
{
name: 'Disclaimer',
path: '/disclaimer'
},
{
name: 'Site Map',
path: '/site-map'
}
])
</script>
<style lang="less" scoped>
.header{
position: relative;
.main-footer {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 15px 0;
min-height: 140px;
display: flex;
justify-content: space-between;
font-family: Poppins, sans-serif;
> .left {
font-size: 13px;
font-weight: normal;
line-height: 24px;
color: #000000b3;
}
> .right {
display: flex;
align-items: flex-start;
> div {
display: flex;
align-items: center;
justify-content: center;
padding-left: 20px;
border-left: 1px solid #0a0a0a;
margin-left: 20px;
&:first-child {
border-left: none;
padding-left: 0;
margin-left: 0;
}
> .link {
font-weight: 400;
font-size: 12px;
transition: all 0.2s ease-out;
box-sizing: border-box;
box-shadow: none;
text-decoration: none;
display: inline-block;
color: #0a0a0a;
}
}
}
}
</style>

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

@@ -1,86 +1,90 @@
<template>
<header class="main-header" v-scroll-progress>
<img class="logo" src="../assets/logo-full.png" alt="code-create" />
<a href="/" class="logo"><img src="../assets/logo-full.png" alt="code-create" /></a>
<div class="center-nav">
<div class="nav-item" v-for="item in navList" :key="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"
>
<div class="nav-item" v-for="item in navList" :key="item.name">
<down-menu :title="item.name" v-if="item.children">
<router-link :to="child.path" v-for="child in item.children" :key="child.path">
{{ child.name }}
</router-link>
</div>
</down-menu>
<router-link class="link hover-bottom-animation" :to="item.path" v-else>
{{ item.name }}
<span v-show="item.children" class="iconfont icon-arrow-down-bold"></span>
</router-link>
</div>
</div>
<div class="right">
<span>English</span>
<span>My Account</span>
<down-menu title="English">
<router-link class="link" to="/">English</router-link>
<router-link class="link" to="/zh-cn">简体中文</router-link>
<router-link class="link" to="/zh-tw">繁體中文</router-link>
</down-menu>
<span class="">
<span class="iconfont icon-wode"></span>
<span>My Account</span>
</span>
</div>
</header>
</template>
<script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue";
import { useRoute } from "vue-router";
const route = useRoute();
console.log(route);
import { ref, onMounted, onUnmounted, computed } from 'vue'
import DownMenu from './down-menu.vue'
import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route)
const navList = ref([
{
name: "Home",
path: "/",
name: 'Home',
path: '/'
},
{
name: "About Us",
path: "/about-us",
name: 'About Us',
path: '/about-us'
},
{
name: "Our Solutions",
name: 'Our Solutions',
path: '',
children: [
{
name: "AiDA 3.1",
path: "/aida",
name: 'AiDA 3.1',
path: '/aida'
},
{
name: "Mixi",
path: "/mixi",
},
],
name: 'Mixi',
path: '/mixi'
}
]
},
{
name: "Communities",
name: 'Communities',
path: '',
children: [
{
name: "Events",
path: "/events",
name: 'Events',
path: '/events'
},
{
name: "User Stories",
path: "/user-stories",
name: 'User Stories',
path: '/user-stories'
},
{
name: "Help Centre",
path: "/help-centre",
},
],
name: 'Help Centre',
path: '/help-centre'
}
]
},
{
name: "Media",
path: "/media",
name: 'Media',
path: '/media'
},
{
name: "Contact Us",
path: "/contact-us",
},
]);
name: 'Contact Us',
path: '/contact-us'
}
])
</script>
<style lang="less" scoped>
.main-header {
@@ -102,6 +106,10 @@
> .logo {
height: 100%;
width: auto;
img {
width: auto;
height: 100%;
}
}
> .center-nav {
display: flex;
@@ -116,27 +124,11 @@
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%;
> .iconfont {
opacity: 0.5;
font-size: 10px;
margin-left: 5px;
}
}
> .child {

1
src/directives/custom-animation.js
View File

@@ -40,7 +40,6 @@ const T = {
rotateZ: 'rotate-z',
opacity_s: 'opacity-s',
opacity: 'opacity',
once: 'once',
}
const types = Object.values(T)
const typesStr = types.map(v => `[${v}]`).join(',')

4
src/routes.ts
View File

@@ -6,12 +6,11 @@ import ProductsView from './pages/ProductsView.vue'
export const routes: RouteRecordRaw[] = [
{
path: '/:lang?',
path: '/:lang(en|zh-cn|zh-tw)?',
children: [
{
path: '',
component: HomeView,
alias: ['/:lang?', '/:lang?/home']
},
{
path: 'about',
@@ -35,3 +34,4 @@ export const routes: RouteRecordRaw[] = [
]
}
]