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

头部和mixi适配移动端

Browse Source
This commit is contained in:
李志鹏
2026-05-28 09:46:56 +08:00
parent acb06152a0
commit 1ba4bbce03
10 changed files with 360 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

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

3
src/App.vue
View File

@@ -52,5 +52,8 @@
<style lang="less">
html:root {
--main-header-height: 85px;
@media (max-width: 1000px) {
--main-header-height: 60px;
}
}
</style>

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

@@ -11,6 +11,10 @@ p {
margin: 0;
padding: 0;
}
html,
body {
overflow-x: hidden;
}
* {
box-sizing: border-box;
font-family: Poppins;

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

@@ -11,7 +11,9 @@ p {
margin: 0;
padding: 0;
}
html,body{
overflow-x: hidden;
}
* {
box-sizing: border-box;
font-family: Poppins;

10
src/components/email-box.vue
View File

@@ -78,5 +78,15 @@
text-transform: uppercase;
--hover-backcolor: #000;
}
@media (max-width: 800px) {
padding: 20px;
border-radius: 20px;
> .title {
font-size: 20px;
}
> .tip {
font-size: 12px;
}
}
}
</style>

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

@@ -79,5 +79,15 @@
}
}
}
@media (max-width: 800px) {
padding: 15px 20px;
flex-direction: column;
align-items: center;
> .right {
> div {
border-left: none;
}
}
}
}
</style>

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

@@ -1,10 +1,10 @@
<template>
<header class="main-header" v-scroll-progress>
<a href="/" class="logo"><img src="../assets/logo-full.png" alt="code-create" /></a>
<div class="center-nav">
<div class="center-nav" v-show="windowWidth > 1000">
<div class="nav-item" v-for="item in navList" :key="item.name">
<down-menu :title="$t(item.name)" v-if="item.children">
<router-link :to="child.path" v-for="(child) in item.children" :key="child.name">
<router-link :to="child.path" v-for="child in item.children" :key="child.name">
{{ $t(child.name) }}
</router-link>
</down-menu>
@@ -13,7 +13,7 @@
}}</router-link>
</div>
</div>
<div class="right">
<div class="right" v-show="windowWidth > 1000">
<down-menu :title="langList.find((v) => v.value === locale)?.label || 'English'">
<router-link
class="link"
@@ -31,10 +31,20 @@
<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
</router-link>
</div>
<div class="right" v-show="windowWidth <= 1000">
<span class="iconfont icon-caidan" @click="openMainMenu"></span>
</div>
</header>
<main-menu-dialog
ref="mainMenuDialogRef"
:menu-list="navList"
:lang-list="langList"
:path="path"
/>
</template>
<script setup lang="ts">
import { ref, watch, computed } from 'vue'
import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
import MainMenuDialog from './main-menu-dialog.vue'
import DownMenu from './down-menu.vue'
import { setLang, LangType } from '../lang'
import { useI18n } from 'vue-i18n'
@@ -65,7 +75,7 @@
}
])
const navList:any = ref([
const navList: any = ref([
{
name: 'MainHeader.Home',
path: '/'
@@ -115,6 +125,22 @@
path: '/contact-us'
}
])
const windowWidth = ref(1920)
const resize = () => {
windowWidth.value = window.innerWidth
}
onMounted(() => {
resize()
window.addEventListener('resize', resize)
})
onBeforeUnmount(() => {
window.removeEventListener('resize', resize)
})
const mainMenuDialogRef = ref()
const openMainMenu = () => {
mainMenuDialogRef.value.open()
}
</script>
<style lang="less" scoped>
.main-header {
@@ -219,6 +245,14 @@
font-size: 22px;
}
}
> .icon-caidan {
color: #fff;
font-size: 24px;
cursor: pointer;
}
}
@media (max-width: 1000px) {
padding: 7px 15px;
}
}
</style>

210
src/components/main-menu-dialog.vue Normal file
View File

@@ -0,0 +1,210 @@
<template>
<div class="main-menu-dialog" @click="close" :class="{ show: show }">
<div class="close" @click="close"><span class="iconfont icon-close"></span></div>
<div class="content" @click.stop>
<div class="menu-item" v-for="item in menuList" :key="item.name">
<router-link
@click="onItemClick(item)"
class="link"
:class="{
active: activeChild === item.name,
parent: !!item.children
}"
:to="item.path"
>{{ $t(item.name) }}</router-link
>
<div v-if="item.children" class="child" v-show="activeChild === item.name">
<router-link
class="link"
:to="child.path"
v-for="child in item.children"
:key="child.name"
@click="close"
>
{{ $t(child.name) }}
</router-link>
</div>
</div>
<router-link class="link" to="/my-account" @click="close">
<span class="iconfont icon-tubiao-"></span>
<span v-if="token">{{ $t('MainHeader.MyAccount') }}</span>
<span v-else>{{ $t('MainHeader.LoginOrSignin') }}</span>
</router-link>
<div class="lang">
<router-link
class="link"
:to="`/${item.value}${path}`"
v-for="item in langList"
:key="item.value"
v-show="item.value !== locale"
@click="close"
>
{{ item.label }}
</router-link>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, watch, computed, onMounted, onBeforeUnmount } from 'vue'
import DownMenu from './down-menu.vue'
import { setLang, LangType } from '../lang/index.js'
import { useI18n } from 'vue-i18n'
import { useUserInfoStore } from '@/stores/userInfo'
const userInfoStore = useUserInfoStore()
const { locale } = useI18n()
const token = computed(() => userInfoStore.state.token)
const props = defineProps({
menuList: {
type: [Array, Object],
default: () => []
},
langList: {
type: [Array, Object],
default: () => []
},
path: {
type: String,
default: ''
}
})
const activeChild = ref('')
const show = ref(true)
const close = () => {
show.value = false
}
const open = () => {
show.value = true
}
const onItemClick = (item) => {
if (item.children) {
if (activeChild.value === item.name) {
activeChild.value = ''
} else {
activeChild.value = item.name
}
} else {
close()
}
}
defineExpose({
open,
close
})
</script>
<style lang="less" scoped>
.main-menu-dialog {
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(24, 24, 24, 0.3);
z-index: 10001;
overflow: hidden;
display: flex;
justify-content: flex-end;
animation: main-hide 0.2s linear both;
&.show {
animation: main-show 0.2s linear both;
}
> .close {
width: 37px;
height: 37px;
border-radius: 50%;
background-color: #fff;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
margin: 10px;
color: #222;
}
> .content {
max-width: 300px;
flex: 1;
height: 100%;
background-color: #4d4d4d;
padding: 10px 20px;
.link {
color: #fff;
text-decoration: none;
font-size: 14px;
display: flex;
align-items: center;
padding: 10px 0;
&:hover {
color: #d5d5d5;
}
> .iconfont {
margin-right: 5px;
font-size: 22px;
}
}
> .menu-item {
> .parent {
position: relative;
&::after,
&::before {
content: '';
position: absolute;
width: 6px;
height: 0;
border-top: 1px solid #fff;
right: 0;
transition: transform 0.2s linear;
}
&::after {
transform: rotate(-45deg);
}
&::before {
right: 4px;
transform: rotate(45deg);
}
&.active {
&::after,
&::before {
transform: rotate(0deg);
}
}
}
> .child {
opacity: 0.7;
border-left: 1px solid #e1e1e1;
> .link {
padding-left: 20px;
}
}
}
> .lang {
display: flex;
align-items: center;
margin-top: 20px;
margin-left: 10px;
> .link {
padding: 0 10px;
}
}
}
@keyframes main-show {
0% {
opacity: 0;
display: none;
}
100% {
opacity: 1;
}
}
@keyframes main-hide {
0% {
opacity: 1;
}
100% {
opacity: 0;
display: none;
}
}
}
</style>

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

@@ -180,7 +180,6 @@ async function handleScroll({ target: root }) {
const elTop_bottom = offsetHeight - (getDocumentTop(el) - offsetTop - rootEl.scrollTop)
const maxHeight = offsetHeight + el.offsetHeight
const p = Math.min(1, Math.max(0, elTop_bottom / maxHeight))
console.log(p)
children.forEach((item) => {
setDocumentStyles(el, item, p)
})

89
src/pages/mixi/index.vue
View File

@@ -123,9 +123,9 @@
z-index: 1;
background-color: #f9f9f9;
}
--bg-height: 500px;
> .bg {
height: 500px;
height: var(--bg-height);
width: 100%;
object-fit: cover;
position: fixed;
@@ -133,7 +133,7 @@
z-index: 0;
}
> .header {
height: 500px;
height: var(--bg-height);
display: flex;
align-items: center;
justify-content: center;
@@ -238,7 +238,8 @@
height: auto;
}
> .panel {
width: 400px;
max-width: 400px;
width: 60%;
height: auto;
position: absolute;
right: 80px;
@@ -304,7 +305,7 @@
}
> .email-input {
position: relative;
padding-bottom: 250px;
padding-bottom: 100px;
> img {
width: 100%;
height: auto;
@@ -314,10 +315,80 @@
}
> .email-box {
max-width: 860px;
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
position: relative;
margin-top: -150px;
}
}
@media (max-width: 800px) {
--bg-height: 275px;
> .introduce {
padding: 20px;
> .box {
> .tip {
font-size: 12px;
}
}
}
> .video {
padding: 40px 20px;
}
> .key-features {
flex-direction: column;
align-items: inherit;
padding: 20px;
> .left {
> .bg {
max-width: inherit;
}
> .panel {
right: 50px;
bottom: 0px;
}
}
> .right {
> .title {
font-size: 36px;
}
> ul > li {
font-size: 12px;
}
}
}
> .industry {
padding: 20px;
> .content {
> .title {
font-size: 36px;
}
> .box {
flex-direction: column;
gap: 0;
> div {
padding: 20px;
> img {
width: 100px;
height: 100px;
margin-top: 0;
margin-bottom: 0;
}
}
}
}
}
> .email-input {
position: relative;
padding-bottom: 50px;
> img {
width: 100%;
height: auto;
max-height: 500px;
object-fit: cover;
display: block;
}
> .email-box {
width: 90%;
margin-top: -100px;
}
}
}
}