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-click-color: #fff;
--button-font-size: 1.6rem; --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; 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-family: Poppins, sans-serif;
font-weight: 600; font-weight: 600;
letter-spacing: 2px; letter-spacing: 2px;
color: #222222; color: #222222;
text-transform: capitalize; text-transform: capitalize;
} }
@keyframes loading { @keyframes loading {
@@ -175,4 +182,33 @@ button[custom="black-box"] {
--button-click-bgcolor: #979797; --button-click-bgcolor: #979797;
--button-click-color: #fff; --button-click-color: #fff;
--button-font-size: 1.6rem; --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', transition: 'stroke-dashoffset 10ms linear',
strokeDasharray: `${progress}, ${max}`, strokeDasharray: `${progress}, ${max}`,
stroke: '#222', stroke: '#222',
strokeWidth: 4, strokeWidth: 4
}" }"
fill="none" fill="none"
></path> ></path>
@@ -17,15 +17,15 @@
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue"; import { ref, onMounted, onUnmounted } from 'vue'
const max = ref(98 * Math.PI); const max = ref(98 * Math.PI)
const progress = ref(0); const progress = ref(0)
const handleScroll = (e: number) => { const handleScroll = (e: number) => {
progress.value = (e / 100) * max.value; progress.value = (e / 100) * max.value
}; }
const handleClick = () => { const handleClick = () => {
document.documentElement.scrollTo({ top: 0, behavior: "smooth" }); document.documentElement.scrollTo({ top: 0, behavior: 'smooth' })
}; }
</script> </script>
<style scoped lang="less"> <style scoped lang="less">
.back-top { .back-top {
@@ -52,6 +52,20 @@
transition: stroke-dashoffset 10ms linear; 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; animation: back-top-hidden 0.2s linear both;
&.active { &.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> <template>
<header class="header"> <footer class="main-footer">
<div class="left">
</header> <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> </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> <style lang="less" scoped>
.header{ .main-footer {
position: relative; 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> </style>

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

@@ -1,86 +1,90 @@
<template> <template>
<header class="main-header" v-scroll-progress> <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="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.name">
<router-link class="link" :to="item.path" v-if="item.path"> <down-menu :title="item.name" v-if="item.children">
{{ item.name }} <router-link :to="child.path" v-for="child in item.children" :key="child.path">
</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 }} {{ child.name }}
</router-link> </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> </div>
<div class="right"> <div class="right">
<span>English</span> <down-menu title="English">
<span>My Account</span> <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> </div>
</header> </header>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import { ref, onMounted, onUnmounted } from "vue"; import { ref, onMounted, onUnmounted, computed } from 'vue'
import { useRoute } from "vue-router"; import DownMenu from './down-menu.vue'
const route = useRoute();
console.log(route); import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route)
const navList = ref([ const navList = ref([
{ {
name: "Home", name: 'Home',
path: "/", path: '/'
}, },
{ {
name: "About Us", name: 'About Us',
path: "/about-us", path: '/about-us'
}, },
{ {
name: "Our Solutions", name: 'Our Solutions',
path: '',
children: [ children: [
{ {
name: "AiDA 3.1", name: 'AiDA 3.1',
path: "/aida", path: '/aida'
}, },
{ {
name: "Mixi", name: 'Mixi',
path: "/mixi", path: '/mixi'
}, }
], ]
}, },
{ {
name: "Communities", name: 'Communities',
path: '',
children: [ children: [
{ {
name: "Events", name: 'Events',
path: "/events", path: '/events'
}, },
{ {
name: "User Stories", name: 'User Stories',
path: "/user-stories", path: '/user-stories'
}, },
{ {
name: "Help Centre", name: 'Help Centre',
path: "/help-centre", path: '/help-centre'
}, }
], ]
}, },
{ {
name: "Media", name: 'Media',
path: "/media", path: '/media'
}, },
{ {
name: "Contact Us", name: 'Contact Us',
path: "/contact-us", path: '/contact-us'
}, }
]); ])
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
.main-header { .main-header {
@@ -102,6 +106,10 @@
> .logo { > .logo {
height: 100%; height: 100%;
width: auto; width: auto;
img {
width: auto;
height: 100%;
}
} }
> .center-nav { > .center-nav {
display: flex; display: flex;
@@ -116,27 +124,11 @@
text-decoration: none; text-decoration: none;
line-height: 37px; line-height: 37px;
display: inline-block; display: inline-block;
position: relative;
cursor: pointer; > .iconfont {
&::before { opacity: 0.5;
content: ""; font-size: 10px;
position: absolute; margin-left: 5px;
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 { > .child {

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

@@ -40,7 +40,6 @@ const T = {
rotateZ: 'rotate-z', rotateZ: 'rotate-z',
opacity_s: 'opacity-s', opacity_s: 'opacity-s',
opacity: 'opacity', opacity: 'opacity',
once: 'once',
} }
const types = Object.values(T) const types = Object.values(T)
const typesStr = types.map(v => `[${v}]`).join(',') 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[] = [ export const routes: RouteRecordRaw[] = [
{ {
path: '/:lang?', path: '/:lang(en|zh-cn|zh-tw)?',
children: [ children: [
{ {
path: '', path: '',
component: HomeView, component: HomeView,
alias: ['/:lang?', '/:lang?/home']
}, },
{ {
path: 'about', path: 'about',
@@ -35,3 +34,4 @@ export const routes: RouteRecordRaw[] = [
] ]
} }
] ]