Skip to content

O
office-web-js
Commit e9ba7df6 by qinjianhui
Options

feat: header 和 footer

parent 11d124ac
Showing with 443 additions and 44 deletions
package-lock.json
......@@ -1969,6 +1969,49 @@
"webpack-merge": "^5.7.3",
"webpack-virtual-modules": "^0.4.2",
"whatwg-fetch": "^3.6.2"
},
"dependencies": {
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.10.1",
"resolved": "https://registry.npmjs.org/vue-loader/-/vue-loader-15.10.1.tgz",
"integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
}
}
},
"json5": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
}
}
},
"@vue/cli-shared-utils": {
......@@ -2133,47 +2176,6 @@
}
}
},
"@vue/vue-loader-v15": {
"version": "npm:vue-loader@15.10.1",
"resolved": "https://registry.npmmirror.com/vue-loader/-/vue-loader-15.10.1.tgz",
"integrity": "sha512-SaPHK1A01VrNthlix6h1hq4uJu7S/z0kdLUb6klubo738NeQoLbS6V9/d8Pv19tU0XdQKju3D1HSKuI8wJ5wMA==",
"dev": true,
"requires": {
"@vue/component-compiler-utils": "^3.1.0",
"hash-sum": "^1.0.2",
"loader-utils": "^1.1.0",
"vue-hot-reload-api": "^2.3.0",
"vue-style-loader": "^4.1.0"
},
"dependencies": {
"hash-sum": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/hash-sum/-/hash-sum-1.0.2.tgz",
"integrity": "sha512-fUs4B4L+mlt8/XAtSOGMUO1TXmAelItBPtJG7CyHJfYTdDjwisntGO2JQz7oUsatOY9o68+57eziUVNw/mRHmA==",
"dev": true
},
"json5": {
"version": "1.0.2",
"resolved": "https://registry.npmmirror.com/json5/-/json5-1.0.2.tgz",
"integrity": "sha512-g1MWMLBiz8FKi1e4w0UyVL3w+iJceWAFBAaBnnGKOpNa5f8TLktkbre1+s6oICydWAm+HRUGTmI+//xv2hvXYA==",
"dev": true,
"requires": {
"minimist": "^1.2.0"
}
},
"loader-utils": {
"version": "1.4.2",
"resolved": "https://registry.npmmirror.com/loader-utils/-/loader-utils-1.4.2.tgz",
"integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==",
"dev": true,
"requires": {
"big.js": "^5.2.2",
"emojis-list": "^3.0.0",
"json5": "^1.0.1"
}
}
}
},
"@vue/web-component-wrapper": {
"version": "1.3.0",
"resolved": "https://registry.npmmirror.com/@vue/web-component-wrapper/-/web-component-wrapper-1.3.0.tgz",
......
public/index.html
<!DOCTYPE html>
<html lang="">
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
......
src/components/HomePageFooter.vue
<template>
<footer class="home-page-footer">我是 Footer</footer>
<footer class="home-page-footer">
<div class="footer-left">
<ul class="footer-links">
<li
v-for="(l, i) in links"
:key="i"
class="footer-link-item footer-title"
:class="{ active: isRouteActive(l) }"
>
<router-link
class="footer-link"
:to="l.route"
@click="onLinkClicked"
>{{ l.title }}</router-link
>
</li>
</ul>
<div class="footer-text">
<span class="footer-icp">{{ icp }}</span>
<span class="footer-copyright"
>© 2015-{{ year }} {{ hostname }} All rights reserved.</span
>
</div>
</div>
<div class="footer-right">
<div class="footer-mp">
<div class="footer-title">公众号</div>
<img
class="footer-mp-qrcode"
src="~@/assets/mp-qrcode.png"
alt="公众号二维码"
/>
</div>
</div>
</footer>
</template>
<script>
export default {
name: 'HomePageFooter',
data() {
return {
links: [
{ title: '关于晶闪', route: '/about' },
{ title: '多彩晶闪', route: '/colorful' },
{ title: '加入我们', route: '/join-us' },
{ title: '联系我们', route: '/contact' },
],
icp: '粤ICP备1234567号-1',
hostname: location.hostname,
year: new Date().getFullYear(),
mp: '',
}
},
methods: {
isRouteActive(nav) {
const path = this.$route.path
if (nav.route === path) return true
if (nav.children?.length) {
return nav.children.some((e) => e.route === path)
}
},
onLinkClicked() {
window.scrollTo({
top: 0,
behavior: 'smooth',
})
},
},
}
</script>
<style lang="scss" scoped>
$primary-color: #e28e39;
.home-page-footer {
background-color: #323232;
color: #fff;
display: flex;
padding: 20px;
}
.footer-left {
flex: 2;
border-right: solid 1px #bbb;
}
.footer-right {
flex: 1;
padding-left: 100px;
}
.footer-links {
margin: 0;
padding: 0;
display: flex;
}
.footer-link-item {
margin: 0;
padding: 0;
list-style-type: none;
margin-right: 100px;
&.active .footer-link {
color: $primary-color;
}
}
.footer-link {
color: inherit;
text-decoration: none;
transition: 0.3s;
}
.footer-title {
position: relative;
padding-bottom: 15px;
white-space: nowrap;
&::after {
content: '';
position: absolute;
top: 100%;
left: 0;
display: block;
width: 2em;
height: 3px;
background-color: $primary-color;
}
}
.footer-text {
margin-top: 20px;
color: #999;
}
.footer-mp {
display: flex;
align-items: flex-start;
}
.footer-mp-qrcode {
width: 90px;
height: 90px;
margin-left: 20px;
}
</style>
src/components/HomePageHeader.vue
<template>
<header class="home-page-header">我是 Header</header>
<header class="home-page-header">
<div class="header-logo">
<router-link class="header-logo-link" to="/">
<img
class="header-logo-img"
src="~@/assets/logo.png"
alt="晶闪科技LOGO"
/>
</router-link>
</div>
<nav class="header-nav">
<div
v-for="(n, i) in nav"
:key="i"
class="header-nav-item"
:class="{ active: isRouteActive(n) }"
>
<template v-if="n.children && n.children.length">
<span class="header-nav-title">{{ n.title }}</span>
<ul class="header-nav-children">
<li
v-for="(nn, j) in n.children"
:key="j"
class="header-nav-child"
:class="{ active: isRouteActive(nn) }"
>
<router-link
class="header-nav-title header-nav-link"
:to="nn.route"
>{{ nn.title }}</router-link
>
</li>
</ul>
</template>
<router-link
v-else
class="header-nav-title header-nav-link"
:to="n.route"
>{{ n.title }}</router-link
>
</div>
</nav>
</header>
</template>
<script>
export default {
name: 'HomePageHeader',
data() {
return {
nav: [
{ title: '首页', route: '/' },
{ title: '关于晶闪', route: '/about' },
{ title: '企业文化', route: '/culture' },
{ title: '多彩晶闪', route: '/colorful' },
{ title: '加入我们', route: '/join-us' },
{
title: '供应商',
route: '/supplier',
children: [
{ title: '申请加入', route: '/supplier-apply' },
{ title: '举报信', route: '/supplier-report' },
],
},
{ title: '联系我们', route: '/contact' },
],
}
},
methods: {
isRouteActive(nav) {
const path = this.$route.path
if (nav.route === path) return true
if (nav.children?.length) {
return nav.children.some((e) => e.route === path)
}
},
},
}
</script>
<style lang="scss" scoped>
$primary-color: #e28e39;
.home-page-header {
width: 100%;
height: 70px;
position: fixed;
top: 0;
left: 0;
z-index: 999;
background-color: #000;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
}
.header-logo {
height: 100%;
margin-right: 100px;
}
.header-logo-link {
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.header-logo-img {
width: auto;
height: 80%;
}
.header-nav {
display: flex;
height: 100%;
}
@mixin header-nav-item-active($x) {
&::before,
&::after {
content: '';
display: block;
width: 50%;
transform: scaleX($x);
height: 4px;
background-color: $primary-color;
position: absolute;
top: 0;
transition: transform 0.3s;
}
&::before {
left: 0;
transform-origin: 100%;
}
&::after {
right: 0;
transform-origin: 0;
}
&:hover {
&::before,
&::after {
transform: scaleX(1);
}
}
}
.header-nav-item {
width: 120px;
height: 100%;
position: relative;
&:hover {
.header-nav-children {
display: flex;
}
}
&.active {
& > .header-nav-title {
@include header-nav-item-active(1);
color: $primary-color;
}
}
& > .header-nav-title {
@include header-nav-item-active(0);
}
}
.header-nav-children {
position: absolute;
top: 100%;
left: 0;
width: 100%;
margin: 0;
padding: 0;
display: none;
flex-direction: column;
background-color: #000;
color: #fff;
}
.header-nav-child {
width: 100%;
height: 60px;
margin: 0;
padding: 0;
list-style-type: none;
&.active {
color: $primary-color;
}
}
.header-nav-title {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
&:hover {
color: $primary-color;
}
}
.header-nav-link {
color: inherit;
text-decoration: none;
cursor: pointer;
transition: 0.3s;
}
</style>
src/router/index.js
......@@ -6,6 +6,9 @@ import AboutPage from '@/views/Home/AboutPage.vue'
import ColorfulPage from '@/views/Home/ColorfulPage.vue'
import CulturePage from '@/views/Home/CulturePage.vue'
import JoinUsPage from '@/views/Home/JoinUsPage.vue'
import SupplierApplyPage from '@/views/Home/SupplierApplyPage.vue'
import SupplierReportPage from '@/views/Home/SupplierReportPage.vue'
import ContactPage from '@/views/Home/ContactPage.vue'
Vue.use(VueRouter)
......@@ -39,6 +42,21 @@ const routes = [
name: 'JoinUsPage',
component: JoinUsPage,
},
{
path: '/supplier-apply',
name: 'SupplierApplyPage',
component: SupplierApplyPage,
},
{
path: '/supplier-report',
name: 'SupplierReportPage',
component: SupplierReportPage,
},
{
path: '/contact',
name: 'ContactPage',
component: ContactPage,
},
],
},
]
......
src/styles/index.scss
......@@ -3,6 +3,10 @@ html, body {
padding: 0;
}
body {
font-size: 16px;
}
div {
box-sizing: border-box;
}
\ No newline at end of file
src/views/Home/ContactPage.vue 0 → 100644
<template>
<div class="contact-page">联系我们</div>
</template>
src/views/Home/HomePageWrapper.vue
......@@ -16,3 +16,8 @@ export default {
components: { HomePageHeader, HomePageFooter },
}
</script>
<style lang="scss">
.home-page-content {
padding-top: 70px;
}
</style>
src/views/Home/SupplierApplyPage.vue 0 → 100644
<template>
<div class="supplier-apply-page">供应商申请</div>
</template>
src/views/Home/SupplierReportPage.vue 0 → 100644
<template>
<div class="supplier-apply-page">供应商举报</div>
</template>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment