Merge branch 'main' of ssh://18.167.251.121:10002/aidlab/Code-Create

src/App.vue

@@ -1,7 +1,25 @@
 <template>
-  <RouterView />
+	<MainHeader />
+	<RouterView />
+	<MainFooter />
+	<BackTop />
 </template>
 
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+	import { RouterView } from "vue-router";
+	import MainHeader from "./components/main-header.vue";
+	import MainFooter from "./components/main-footer.vue";
+	import BackTop from "./components/back-top.vue";
 </script>
+<style scoped lang="less">
+	// .main {
+	// 	height: 100vh;
+	// 	width: 100vw;
+	// 	overflow-y: auto;
+	// 	overflow-x: hidden;
+	// 	position: relative;
+	// 	> .content{
+	// 		height: auto;
+	// 	}
+	// }
+</style>

src/assets/css/style.css

@@ -0,0 +1,151 @@
+body,
+html,
+div,
+ul,
+li,
+h1,
+h2,
+h3,
+p {
+  margin: 0;
+  padding: 0;
+}
+* {
+  box-sizing: border-box;
+}
+html,
+body,
+#app {
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  font-family: 'KaiseiOpti-Medium';
+  color: #232323;
+}
+@keyframes loading {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+@keyframes opacity-in {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes z-index-10to-1 {
+  0% {
+    z-index: 10;
+  }
+  100% {
+    z-index: -1;
+  }
+}
+.flex {
+  display: flex;
+}
+.flex-center {
+  justify-content: center;
+  align-items: center;
+}
+.flex-1 {
+  flex: 1;
+}
+.flex-col {
+  flex-direction: column;
+}
+.align-center {
+  align-items: center;
+}
+.space-between {
+  justify-content: space-between;
+}
+.justify-center {
+  justify-content: center;
+}
+.relative {
+  position: relative;
+}
+.el-overlay {
+  --el-color-primary: #ff7a51;
+  --el-color-primary-light-3: #ffa785;
+  --el-color-primary-light-5: #ffc2aa;
+  --el-color-primary-light-7: #ffddcf;
+  --el-color-primary-light-8: #ffe8df;
+  --el-color-primary-light-9: #fff2ec;
+  --el-color-primary-dark-2: #cc6241;
+}
+.el-select,
+.el-popper {
+  --el-color-primary: #6c6c6c;
+  /* 主灰色 */
+  --el-color-primary-light-3: #8a8a8a;
+  /* 较浅的灰色（混合20%白） */
+  --el-color-primary-light-5: #a8a8a8;
+  /* 更浅的灰色（混合33%白） */
+  --el-color-primary-light-7: #c6c6c6;
+  /* 浅灰色（混合47%白） */
+  --el-color-primary-light-8: #d4d4d4;
+  /* 很浅的灰色（混合53%白） */
+  --el-color-primary-light-9: #e3e3e3;
+  /* 极浅的灰色（混合60%白） */
+  --el-color-primary-dark-2: #565656;
+  /* 深灰色（加深20%） */
+}
+.mini-scrollbar {
+  --mini-scrollbar-width: 0.4rem;
+}
+.mini-scrollbar::-webkit-scrollbar {
+  width: var(--mini-scrollbar-width);
+}
+.mini-scrollbar::-webkit-scrollbar-thumb {
+  border-radius: 0.4rem;
+  background: rgba(0, 0, 0, 0.2);
+}
+.mosaic-bg {
+  --mosaic-bg-size: 1rem;
+  --mosaic-bg-color1: #efefef;
+  --mosaic-bg-color2: #fff;
+  background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
+  background-repeat: repeat;
+  background-position: 50% 50%;
+  background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
+}
+button[custom],
+button[custom="white"] {
+  min-width: 19.4rem;
+  height: 5rem;
+  padding: 0 1rem;
+  border-radius: 0;
+  font-family: KaiseiOpti-Bold;
+  font-size: var(--button-font-size, 2rem);
+  color: var(--button-color, #232323);
+  background: var(--button-bgcolor, #fff);
+  border: var(--button-border, none);
+  cursor: pointer;
+}
+button[custom]:active,
+button[custom="white"]:active {
+  background: var(--button-click-bgcolor, #e4e4e4);
+  color: var(--button-click-color, #232323);
+}
+button[custom="black"] {
+  --button-bgcolor: #232323;
+  --button-color: #fff;
+  --button-click-bgcolor: #333;
+  --button-click-color: #fff;
+  --button-font-size: 1.6rem;
+}
+button[custom="black-box"] {
+  --button-bgcolor: transparent;
+  --button-color: #232323;
+  --button-border: 0.2rem solid #979797;
+  --button-click-bgcolor: #979797;
+  --button-click-color: #fff;
+  --button-font-size: 1.6rem;
+}

src/assets/css/style.less

@@ -0,0 +1,180 @@
+body,
+html,
+div,
+ul,
+li,
+h1,
+h2,
+h3,
+p {
+	margin: 0;
+	padding: 0;
+}
+
+* {
+	box-sizing: border-box;
+}
+
+html,
+body,
+#app {
+	width: 100%;
+	height: 100%;
+	overflow: hidden;
+	font-family: 'KaiseiOpti-Medium';
+	color: #232323;
+}
+
+@keyframes loading {
+	0% {
+		transform: rotate(0deg);
+	}
+
+	100% {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes opacity-in {
+	0% {
+		opacity: 0;
+	}
+
+	100% {
+		opacity: 1;
+	}
+}
+
+@keyframes z-index-10to-1 {
+	0% {
+		z-index: 10;
+	}
+
+	100% {
+		z-index: -1;
+	}
+}
+
+.flex {
+	display: flex;
+}
+
+.flex-center {
+	justify-content: center;
+	align-items: center;
+}
+
+.flex-1 {
+	flex: 1;
+}
+
+.flex-col {
+	flex-direction: column;
+}
+
+.align-center {
+	align-items: center;
+}
+
+.space-between {
+	justify-content: space-between;
+}
+
+.justify-center {
+	justify-content: center;
+}
+
+.relative {
+	position: relative;
+}
+
+.el-overlay {
+	--el-color-primary: #ff7a51; // 主橙红色
+	--el-color-primary-light-3: #ffa785; // 较浅的橙红（混合20%白）
+	--el-color-primary-light-5: #ffc2aa; // 更浅的橙红（混合33%白）
+	--el-color-primary-light-7: #ffddcf; // 浅橙红（混合47%白）
+	--el-color-primary-light-8: #ffe8df; // 很浅的橙红（混合53%白）
+	--el-color-primary-light-9: #fff2ec; // 极浅的橙红（混合60%白）
+	--el-color-primary-dark-2: #cc6241; // 深橙红（加深20%）
+}
+
+.el-select,
+.el-popper {
+	--el-color-primary: #6c6c6c;
+	/* 主灰色 */
+	--el-color-primary-light-3: #8a8a8a;
+	/* 较浅的灰色（混合20%白） */
+	--el-color-primary-light-5: #a8a8a8;
+	/* 更浅的灰色（混合33%白） */
+	--el-color-primary-light-7: #c6c6c6;
+	/* 浅灰色（混合47%白） */
+	--el-color-primary-light-8: #d4d4d4;
+	/* 很浅的灰色（混合53%白） */
+	--el-color-primary-light-9: #e3e3e3;
+	/* 极浅的灰色（混合60%白） */
+	--el-color-primary-dark-2: #565656;
+	/* 深灰色（加深20%） */
+}
+
+
+// 迷你滚动条
+.mini-scrollbar {
+	--mini-scrollbar-width: 0.4rem;
+
+	&::-webkit-scrollbar {
+		width: var(--mini-scrollbar-width);
+	}
+
+	&::-webkit-scrollbar-thumb {
+		border-radius: 0.4rem;
+		background: rgba(0, 0, 0, 0.2);
+	}
+}
+
+.mosaic-bg {
+	--mosaic-bg-size: 1rem;
+	--mosaic-bg-color1: #efefef;
+	--mosaic-bg-color2: #fff;
+	background-image: repeating-conic-gradient(var(--mosaic-bg-color1) 0% 25%, var(--mosaic-bg-color2) 0% 50%);
+	background-repeat: repeat;
+	background-position: 50% 50%;
+	background-size: var(--mosaic-bg-size) var(--mosaic-bg-size);
+}
+
+
+// 自定义button按钮
+button[custom],
+button[custom="white"] {
+	min-width: 19.4rem;
+	height: 5rem;
+	padding: 0 1rem;
+	border-radius: 0;
+	font-family: KaiseiOpti-Bold;
+	font-size: var(--button-font-size, 2rem);
+	color: var(--button-color, #232323);
+	background: var(--button-bgcolor, #fff);
+	border: var(--button-border, none);
+	cursor: pointer;
+
+	&:active {
+		background: var(--button-click-bgcolor, #e4e4e4);
+		color: var(--button-click-color, #232323);
+	}
+}
+
+button[custom="black"] {
+	--button-bgcolor: #232323;
+	--button-color: #fff;
+	--button-click-bgcolor: #333;
+	--button-click-color: #fff;
+	--button-font-size: 1.6rem;
+}
+
+button[custom="black-box"] {
+	--button-bgcolor: transparent;
+	--button-color: #232323;
+	--button-border: 0.2rem solid #979797;
+	--button-click-bgcolor: #979797;
+	--button-click-color: #fff;
+	--button-font-size: 1.6rem;
+}

src/components/back-top.vue

@@ -0,0 +1,82 @@
+<template>
+	<div class="back-top" @click="handleClick" v-scroll-progress="handleScroll">
+		<svg width="100%" height="100%" viewBox="-1 -1 102 102">
+			<path
+				d="M50,1 a49,49 0 0,1 0,98 a49,49 0 0,1 0,-98"
+				:style="{
+					transition: 'stroke-dashoffset 10ms linear',
+					strokeDasharray: `${progress}, ${max}`,
+					stroke: '#222',
+					strokeWidth: 4,
+				}"
+				fill="none"
+			></path>
+		</svg>
+	</div>
+</template>
+
+<script setup lang="ts">
+	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;
+	};
+	const handleClick = () => {
+		document.documentElement.scrollTo({ top: 0, behavior: "smooth" });
+	};
+</script>
+<style scoped lang="less">
+	.back-top {
+		position: fixed;
+		right: 30px;
+		bottom: 30px;
+		width: 46px;
+		height: 46px;
+		cursor: pointer;
+		color: #222;
+		background-color: #fff;
+		border-radius: 50%;
+		-webkit-box-shadow: inset 0 0 0 1px #e1e1e1;
+		box-shadow: inset 0 0 0 1px #e1e1e1;
+		z-index: 999;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		> svg {
+			position: absolute;
+			width: 100%;
+			height: 100%;
+			> path {
+				transition: stroke-dashoffset 10ms linear;
+			}
+		}
+
+		animation: back-top-hidden 0.2s linear both;
+		&.active {
+			animation: back-top-active 0.2s linear both;
+		}
+		@keyframes back-top-active {
+			0% {
+				display: none;
+				opacity: 0;
+				transform: translateY(15px);
+			}
+			100% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+		}
+		@keyframes back-top-hidden {
+			0% {
+				opacity: 1;
+				transform: translateY(0);
+			}
+			100% {
+				opacity: 0;
+				transform: translateY(15px);
+				display: none;
+			}
+		}
+	}
+</style>

src/components/main-footer.vue

@@ -0,0 +1,25 @@
+<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>
+</template>
+<style lang="less" scoped>
+	.header{
+		position: relative;
+	}
+</style>

src/components/main-header.vue

@@ -0,0 +1,82 @@
+<template>
+	<header class="main-header" v-scroll-progress>
+		<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">
+					{{ item.name }}
+				</router-link>
+			</div>
+		</div>
+		<div class="right">
+			<span>English</span>
+			<span>My Account</span>
+		</div>
+	</header>
+</template>
+<script setup lang="ts">
+	import { ref, onMounted, onUnmounted } from "vue";
+	import { useRouter } from "vue-router";
+	const router = useRouter();
+	const navList = ref([
+		{
+			name: "Home",
+			path: "/",
+		},
+		{
+			name: "About Us",
+			path: "/about",
+		},
+		{
+			name: "Our Solutions",
+			path: "/solutions",
+		},
+		{
+			name: "Communities",
+			path: "/communities",
+		},
+		{
+			name: "Media",
+			path: "/media",
+		},
+		{
+			name: "Contact Us",
+			path: "/contact",
+		},
+	]);
+</script>
+<style lang="less" scoped>
+	.main-header {
+		position: fixed;
+		width: 100%;
+		height: 85px;
+		padding: 15px 30px;
+		box-sizing: border-box;
+		top: 0;
+		left: 0;
+		z-index: 10000;
+		transition: background-color 0.2s linear;
+		&.active {
+			background-color: #0a0a0a;
+		}
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		> .logo {
+			height: 100%;
+			width: auto;
+		}
+		> .center-nav {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			> .nav-item {
+				> .nav-item-link {
+					margin: 0 14px;
+					color: #fff;
+					font-size: 16px;
+				}
+			}
+		}
+	}
+</style>

src/directives/index.ts

@@ -0,0 +1,10 @@
+import type { App } from 'vue'
+
+export default {
+	install(app: App) {
+		const directivesList = import.meta.glob('./*.ts', { eager: true }) as any;
+		Object.keys(directivesList).forEach(key => {
+			app.directive(directivesList[key].default.name, directivesList[key].default);
+		});
+	}
+};

src/directives/scroll-progress.ts

@@ -0,0 +1,63 @@
+/**
+ * 监听滚动条 滚动进度变化
+ * v-scroll-progress.self="(p) => console.log(p)"
+ * @modifiers self 监听当前元素的滚动进度变化
+ * @param params 滚动进度回调函数
+ * @param p 滚动进度
+ */
+const rootMap = new Map()
+export default {
+	name: 'scroll-progress',
+	mounted(el: HTMLElement, binding: any) {
+		const params = binding.value
+		const { self } = binding.modifiers
+		const paramsType = typeof params
+		const obj = {
+			onscroll: () => { },
+			el,
+			root: self ? el : document,
+			activeNum: 0,
+		};
+		if (paramsType === 'function') {
+			obj.onscroll = params
+		} else if (paramsType === 'object') {
+			if (params.onscroll) obj.onscroll = params.onscroll
+			if (params.GetRoot) obj.root = params.GetRoot()
+			if (params.hasOwnProperty('activeNum')) obj.activeNum = params.activeNum
+		}
+		requestAnimationFrame(() => handleScroll({ target: obj.root }))
+		if (rootMap.has(obj.root)) {
+			rootMap.get(obj.root).push(obj)
+			return
+		}
+		rootMap.set(obj.root, [obj])
+		obj.root.addEventListener('scroll', handleScroll)
+	},
+	beforeUnmount(el: HTMLElement, binding: any) {
+		rootMap.forEach((objs, root) => {
+			if (objs.some((v: any) => v.el === el)) {
+				objs = objs.filter((v_: any) => v_.el !== el)
+				rootMap.set(root, objs)
+			}
+			if (objs.length === 0) {
+				root.removeEventListener('scroll', handleScroll)
+				rootMap.delete(root)
+			}
+		})
+	},
+};
+function handleScroll(e: any) {
+	const target = e.target
+	const objs = rootMap.get(target)
+	if (!objs || objs.length === 0) return
+	const el = target === document ? document.documentElement : target as HTMLElement
+	const num = el.scrollTop / (el.scrollHeight - el.clientHeight);
+	const progress = Math.round(num * 100)
+	objs.forEach((obj: any) => {
+		obj?.onscroll(progress)
+		if (obj.el) {
+			let isActive = progress > obj.activeNum
+			obj.el.classList.toggle('active', isActive)
+		}
+	})
+};

src/directives/tween-animation.ts

@@ -0,0 +1,29 @@
+import { gsap, } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+export default {
+	name: 'tween-animation',
+	mounted(el: HTMLElement, binding: any) {
+		// if(!binding.value.isGsap)return
+		let dom = document.querySelector('body')
+		gsap.registerPlugin(ScrollTrigger);
+		let tl1 = gsap.timeline();
+		tl1.from(el,1, {y:'30px',opacity:0},)
+		ScrollTrigger.create({
+			trigger: el, // 触发器元素
+			start: "top 90%", // 滚动触发器的起始滚动位置
+			end: '100% 80%',   // 滚动触发器的结束滚动位置
+			markers: false, // 开启标注功能
+			animation:tl1,
+			scroller:dom,//设置指定元素为滚动依据
+			scrub:2,
+			// onUpdate:(v)=>{
+			// 	if(v.progress < 0.1){
+			// 		v.trigger?.classList.remove('active')
+			// 	}else{
+			// 		v.trigger?.classList.add('active')
+			// 		// v.trigger?.classList.add('active')
+			// 	}
+			// }
+		});
+	},
+};

src/main.ts

@@ -2,8 +2,14 @@ import { ViteSSG } from 'vite-ssg'
 import App from './App.vue'
 import { routes } from './routes'
 import './style.css'
+import directives from './directives/index'
 
 export const createApp = ViteSSG(App, {
-  routes,
-  base: import.meta.env.BASE_URL,
-})
+		routes,
+		base: import.meta.env.BASE_URL,
+	},
+	({ app, router, routes, isClient, initialState }) => {
+		// 注册全局指令
+		app.use(directives)
+	}
+)

src/pages/ContactView.vue

@@ -9,6 +9,106 @@
       route by Vite SSG.
     </p>
     <a href="/">Back home</a>
+	<div>1</div>
+	<div>2</div>
+	<div>3</div>
+	<div>4</div>
+	<div>5</div>
+	<div>6</div>
+	<div>7</div>
+	<div>8</div>
+	<div>9</div>
+	<div>10</div>
+	<div>11</div>
+	<div>12</div>
+	<div>13</div>
+	<div>14</div>
+	<div>15</div>
+	<div>16</div>
+	<div>17</div>
+	<div>18</div>
+	<div>19</div>
+	<div>20</div>
+	<div>21</div>
+	<div>22</div>
+	<div>23</div>
+	<div>24</div>
+	<div>25</div>
+	<div>26</div>
+	<div>27</div>
+	<div>28</div>
+	<div>29</div>
+	<div>30</div>
+	<div>31</div>
+	<div>32</div>
+	<div>33</div>
+	<div>34</div>
+	<div>35</div>
+	<div>36</div>
+	<div>37</div>
+	<div>38</div>
+	<div>39</div>
+	<div>40</div>
+	<div>41</div>
+	<div>42</div>
+	<div>43</div>
+	<div>44</div>
+	<div>45</div>
+	<div>46</div>
+	<div>47</div>
+	<div>48</div>
+	<div>49</div>
+	<div>50</div>
+	<div>51</div>
+	<div>52</div>
+	<div>53</div>
+	<div>54</div>
+	<div>55</div>
+	<div>56</div>
+	<div>57</div>
+	<div>58</div>
+	<div>59</div>
+	<div>60</div>
+	<div>61</div>
+	<div>62</div>
+	<div>63</div>
+	<div>64</div>
+	<div>65</div>
+	<div>66</div>
+	<div>67</div>
+	<div>68</div>
+	<div>69</div>
+	<div>70</div>
+	<div>71</div>
+	<div>72</div>
+	<div>73</div>
+	<div>74</div>
+	<div>75</div>
+	<div>76</div>
+	<div>77</div>
+	<div>78</div>
+	<div>79</div>
+	<div>80</div>
+	<div>81</div>
+	<div>82</div>
+	<div>83</div>
+	<div>84</div>
+	<div>85</div>
+	<div>86</div>
+	<div>87</div>
+	<div>88</div>
+	<div>89</div>
+	<div>90</div>
+	<div>91</div>
+	<div>92</div>
+	<div>93</div>
+	<div>94</div>
+	<div>95</div>
+	<div>96</div>
+	<div>97</div>
+	<div>98</div>
+	<div>99</div>
+	<div>100</div>
   </main>
 </template>
 

src/pages/about-us/index.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import Video from './video.vue'
+import Product from './product.vue'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<div class="home">
+		<Video />
+		<Product />
+	</div>
+</template>
+<style lang="less" scoped>
+	.home{
+		width: 100%;
+		height: 100%;
+		position: relative;
+	}
+</style>

src/pages/about-us/product.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
+import { gsap, TweenMax, TweenLite } from 'gsap'
+import { ScrollTrigger } from 'gsap/ScrollTrigger'
+//const props = defineProps({
+//})
+//const emit = defineEmits([
+//])
+let data = reactive({
+})
+onMounted(()=>{
+})
+onUnmounted(()=>{
+})
+defineExpose({})
+const {} = toRefs(data);
+</script>
+<template>
+	<section class="product">
+		<br v-for="item in 50" />
+		<div class="aa" >1231312</div>
+		<div class="aa" v-tween-animation>1231312</div>
+		<br v-for="item in 10" />
+	</section>
+</template>
+<style lang="less" scoped>
+	.product{
+		width: 100%;
+	}
+</style>

src/pages/about-us/video.vue

@@ -0,0 +1,25 @@
+<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>
+	<section class="video">
+		<div class="title">
+		</div>
+	</section>
+</template>
+<style lang="less" scoped>
+	.video{
+	}
+</style>

src/routes.ts

@@ -5,24 +5,29 @@ import HomeView from './pages/home/index.vue'
 import ProductsView from './pages/ProductsView.vue'
 
 export const routes: RouteRecordRaw[] = [
-  {
-    path: '/',
-    name: 'home',
-    component: HomeView,
-  },
-  {
-    path: '/about',
-    name: 'about',
-    component: AboutView,
-  },
-  {
-    path: '/products',
-    name: 'products',
-    component: ProductsView,
-  },
-  {
-    path: '/contact',
-    name: 'contact',
-    component: ContactView,
-  },
+	{
+		path: '/:lang?',
+		children: [
+			{
+				path: '',
+				component: HomeView,
+				alias: ['/:lang?', '/:lang?/home'],
+
+			},
+			{
+				path: 'about',
+				component: AboutView,
+			},
+			{
+				path: 'products',
+				name: 'products',
+				component: ProductsView,
+			},
+			{
+				path: 'contact',
+				name: 'contact',
+				component: ContactView,
+			},
+		],
+	},
 ]