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

完善移动端适配

Browse Source
This commit is contained in:
X1627315083@163.com
2026-06-02 13:23:41 +08:00
parent 2e35fd4de9
commit d98ddd2940
17 changed files with 675 additions and 177 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/pages/about-us/mission.vue
View File

@@ -1,7 +1,10 @@
<script setup lang="ts">
import { ref, onMounted, onUnmounted, reactive, toRefs } from "vue";
import { ref, onMounted, onUnmounted, reactive, toRefs, computed } from "vue";
import { gsap, TweenMax, TweenLite } from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
import { useGlobalStore } from '@/stores/global'
const globalStore = useGlobalStore()
const windowWidth = computed(() => globalStore.state.windowWidth)
//const props = defineProps({
//})
//const emit = defineEmits([
@@ -14,6 +17,9 @@ const imgBox = ref(null)
let data = reactive({
})
onMounted(()=>{
if(windowWidth.value < 1000){
return
}
let dom = document.querySelector('body')
gsap.registerPlugin(ScrollTrigger);
let tl1 = gsap.timeline();
@@ -40,29 +46,29 @@ const {} = toRefs(data);
<template>
<section class="mission">
<div class="content">
<h2>Mission</h2>
<p>To be the world leading innovative leader in offering the state-of-the-art AI based solutions and systems to disrupt the fashion industry</p>
<h2>{{ $t('aboutUs.mission.Title') }}</h2>
<p>{{ $t('aboutUs.mission.Desc') }}</p>
</div>
</section>
<section class="mission-focus-area">
<div class="content">
<h2>Focus Area</h2>
<h2>{{ $t('aboutUs.mission.FocusArea') }}</h2>
<div class="img-box" ref="imgBox">
<div class="img-item" ref="imgItem1">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_01.png" alt="">
<h2>Elevate Operation Efficiency</h2>
<h2>{{ $t('aboutUs.mission.ElevateOperationEfficiency') }}</h2>
</div>
<div class="img-item" ref="imgItem2">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_02-1-600x888.png" alt="">
<h2>Vertical Design Platform</h2>
<h2>{{ $t('aboutUs.mission.VerticalDesignPlatform') }}</h2>
</div>
<div class="img-item" ref="imgItem3">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_03-1-600x887.png" alt="">
<h2>Education</h2>
<h2>{{ $t('aboutUs.mission.Education') }}</h2>
</div>
<div class="img-item" ref="imgItem4">
<img src="https://code-create.com.hk/wp-content/uploads/2022/11/about_focus_04-1-600x888.png" alt="">
<h2>Community</h2>
<h2>{{ $t('aboutUs.mission.Community') }}</h2>
</div>
</div>
</div>
@@ -80,6 +86,10 @@ const {} = toRefs(data);
flex-direction: column;
align-items: center;
text-align: center;
@media (max-width: 1000px) {
max-width: 1000px;
padding: 60px 20px 60px 20px;
}
> h2{
margin-bottom: 30px;
color: #000000;
@@ -87,10 +97,16 @@ const {} = toRefs(data);
font-weight: 600;
letter-spacing: 1px;
font-family: "Poppins", Sans-serif;
@media (max-width: 1000px) {
font-size: 28px;
}
}
> p{
color: #555;
font-size: 16px;
@media (max-width: 1000px) {
font-size: 12px;
}
}
}
@@ -105,6 +121,9 @@ const {} = toRefs(data);
align-items: center;
justify-content: center;
flex-direction: column;
@media (max-width: 1000px) {
max-width: 1000px;
}
> h2{
font-family: "Poppins", Sans-serif;
font-size: 40px;
@@ -112,6 +131,10 @@ const {} = toRefs(data);
letter-spacing: 1px;
color: #000000;
margin: 100px auto;
@media (max-width: 1000px) {
font-size: 28px;
margin: 60px auto;
}
}
> .img-box{
padding: 10px;
@@ -119,12 +142,22 @@ const {} = toRefs(data);
margin-bottom: 20px;
position: relative;
display: flex;
flex-wrap: wrap;
justify-content: center;
@media (max-width: 1000px) {
flex-wrap: wrap;
max-width: 330px;
}
> .img-item{
margin: 10px;
// width: 1120px;
width: 340px;
height: 503px;
position: relative;
@media (max-width: 1000px) {
width: 100%;
aspect-ratio: 165 / 244;
}
> h2{
font-family: "Poppins", Sans-serif;
font-weight: 600;