joylink/official-website
Archived
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化主页代码

Browse Source
This commit is contained in:
lVAL 2021-01-05 18:19:03 +08:00
parent 1b75e086e6
commit b25ddc7df1
16 changed files with 165 additions and 149 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
src/layout/eFooter/eCustom.vue
View File

@ -4,38 +4,39 @@
<b-col
v-for="(it, i) in abouts"
:key="i"
style="min-width:20em"
style="min-width:20em;text-align:center"
>
<h5>
<h6>
{{ it.name }}
<span class="iconfont icon-arrow-down hidden-md hidden-lg"></span>
</h5>
<ul
class="col-md"
v-for="(el, j) in it.children"
:key="j"
>
</h6>
<ul class="col-md" v-for="(el, j) in it.children" :key="j">
<li>
<b-link v-if="el.href" :href="el.href">
<h6> {{ el.name }} </h6>
<h6 style="color:#666">{{ el.name }}</h6>
</b-link>
<b-img
v-else-if="el.src"
style="width:14em;height:14em"
style="width:8em;height:8em"
:src="el.src"
/>
</li>
</ul>
</b-col>
</b-row>
<b-row style="margin-top:3em;padding-bottom:3em">
<b-col>
<h5>合作方</h5>
<b-row style="margin-top:3em;">
<b-col style="text-align:center">
<h6>合作方</h6>
<ul>
<li>
<template v-for="(el, i) in images" >
<b-img :key="i" v-b-tooltip.hover :title="el.name" style="width:8em;height:8em;margin-right:17px" :src="el.src" />
</template>
<b-img
v-for="(el, i) in images"
:key="i"
v-b-tooltip.hover
:title="el.name"
style="width:6em;height:6em;margin-right:17px;margin-bottom:17px"
:src="el.src"
/>
</li>
</ul>
</b-col>
@ -140,13 +141,15 @@ a {
color: #595757;
}
ul,li {
ul,
li {
list-style: none;
padding: 0;
margin: 0;
}
.custom {
padding: 2em;
position: relative;
margin-right: auto;
margin-left: auto;

20
src/layout/eHeader/eMenuItem.vue
View File

@ -1,16 +1,20 @@
<template>
<div @mouseenter.stop="onMouseEnter" @mouseleave.stop="onMouseLeave">
<template v-if="hasChildren">
<b-navbar-nav>
<b-nav-item-dropdown :text="node.meta.name" right style="font-size:16px">
<template v-for="(el, j) in node.children" >
<b-navbar-nav>
<b-nav-item-dropdown
:text="node.meta.name"
right
style="font-size:16px;"
>
<template v-for="(el, j) in node.children">
<e-menu-item :key="j" :node="el" />
</template>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-nav-item-dropdown>
</b-navbar-nav>
</template>
<template v-else>
<b-nav-item :href="node.redirect||node.path" style="font-size:16px">
<b-nav-item :href="node.redirect || node.path" style="font-size:16px;">
{{ node.meta.name }}
</b-nav-item>
</template>
@ -33,7 +37,7 @@ export default {
},
computed: {
hasChildren() {
return this.node.children&&this.node.children.length
return this.node.children && this.node.children.length;
}
},
methods: {
@ -45,4 +49,4 @@ export default {
}
}
};
</script>
</script>

19
src/layout/eHeader/eMenuList.vue
View File

@ -1,15 +1,13 @@
<template>
<b-navbar-nav class="flex">
<template v-for="(node, i) in routes">
<e-menu-item v-if="!node.hidden"
:key="i"
:node="node"/>
<e-menu-item v-if="!node.hidden" :key="i" :node="node" />
</template>
</b-navbar-nav>
</template>
<script>
import eMenuItem from './eMenuItem';
import eMenuItem from "./eMenuItem";
export default {
components: {
@ -22,16 +20,15 @@ export default {
}
},
data() {
return {
};
return {};
}
};
</script>
<style lang="scss" scoped>
.flex {
display: flex;
justify-content: center;
align-items: center;
}
.flex {
display: flex;
justify-content: center;
align-items: center;
}
</style>

16
src/layout/eHeader/index.vue
View File

@ -1,13 +1,13 @@
<template>
<header class="header">
<b-navbar class="sticky" toggleable="lg" type="light" variant="light">
<b-navbar class="sticky" toggleable="lg" style="background:#fff">
<b-navbar-brand href="#">
<b-img :src="logo" fluid alt="logo" style="width:2em; height:2em" />
<span style="margin: 0 0.6em">北京玖琏科技有限公司</span>
<b-img :src="logo" fluid alt="logo" style="width:2em; height:2em" />
<span style="margin-left:0.6em">北京玖琏科技有限公司</span>
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav>
<e-menu-list class="center" :routes="routes"/>
<e-menu-list class="center" :routes="routes" />
<!-- <b-navbar-nav class="ml-auto">
<b-nav-item-dropdown text="语言" right>
<b-dropdown-item href="#">CH</b-dropdown-item>
@ -29,7 +29,7 @@
<script>
import logo from "@/assets/logo.png";
import eMenuList from "./eMenuList.vue";
import router from '@/router/index';
import router from "@/router/index";
export default {
components: {
@ -39,7 +39,7 @@ export default {
return {
scrollT: 0,
logo: logo,
routes: router.options.routes[0].children,
routes: router.options.routes[0].children
};
},
mounted() {
@ -56,7 +56,7 @@ export default {
let scrollT = e.target.scrollingElement.scrollTop;
let diff = scrollT - this.scrollT;
if (scrollT < 160) {
if (scrollT < 66) {
if (scrollT > stickyT) {
headerEl.classList.add("fixed-top");
} else {
@ -64,7 +64,7 @@ export default {
}
} else {
if (diff > 0) {
headerEl.style.top = "-7.8em";
headerEl.style.top = "-10em";
} else {
headerEl.style.top = "0";
}

6
src/layout/index.vue
View File

@ -19,7 +19,7 @@ export default {
};
</script>
<style lang="scss" scoped>
.layout {
min-height: 100vh;
}
.layout {
min-height: 100vh;
}
</style>

18
src/views/About.vue
View File

@ -11,10 +11,16 @@
铁路职业技术学院等多所高校合作，完成相关培训中心和实验室建设等。
</p>
<div class="images">
<b-img class="world" style="width:50%;height:auto" :src="world" />
<b-img class="world" style="width:50%;height:auto;" :src="world" />
<div class="group" style="width:50%;height:auto">
<template v-for="(el, i) in imageList">
<b-img :key="i" v-b-tooltip.hover :title="el.name" style="width:30%;height:30%" :src="el.src" />
<b-img
:key="i"
v-b-tooltip.hover
:title="el.name"
style="width:25%;height:25%;"
:src="el.src"
/>
</template>
</div>
</div>
@ -36,7 +42,8 @@
<p>
你的加入可以给我们带来新的活力，我们同样也可以赠你无限的发展空间。世界那么大，你不来，谁知道你牛逼？多一份了解，多一份选择，
选择不对努力白费，寻找合伙人寻找最优秀的你，欢迎将你的简历投递至
<strong><em>henry@joylink.club</em></strong>。
<strong><em>henry@joylink.club</em></strong
>。
</p>
</article>
</div>
@ -88,12 +95,13 @@ export default {
text-align: left;
background: #f7f7f9;
padding: 1em;
width: 100%;
.container {
width: 80%;
width: 100%;
margin: auto;
background: #fff;
padding: 4.8em;
padding: 3em;
article {
position: relative;

35
src/views/Exhibition/index.vue
View File

@ -8,7 +8,7 @@
hover
:items="items"
:fields="fields"
style="margin-top:5em;min-height:100vh"
style="min-height:100vh;"
outlined
>
<template #cell(href)="data">
@ -18,10 +18,10 @@
v-clipboard:error="onError"
class="el-icon-document-copy"
/>
<a style="margin-left: 10px" target="_blank" :href="data.item.href">
<a target="_blank" :href="data.item.href">
{{ data.item.href }}
</a>
</template>
</template>
</b-table>
</div>
</div>
@ -34,19 +34,19 @@ export default {
computed: {
fields() {
return [
{
key: 'platform',
label: '平台',
},
{
key: 'name',
label: '系统名称',
},
{
key: 'href',
label: '系统入口'
}
]
{
key: "platform",
label: "平台"
},
{
key: "name",
label: "系统名称"
},
{
key: "href",
label: "系统入口"
}
];
},
items() {
return [
@ -90,7 +90,8 @@ export default {
</script>
<style lang="scss" scoped>
.main {
background: #fff;
background: #f7f7f9;
padding: 1em;
width: 100%;
.container {
width: 100%;

5
src/views/Home/index.vue
View File

@ -31,9 +31,14 @@ export default {
<style lang="scss" scoped>
.main {
width: 100%;
background: #f7f7f9;
.container {
width: 100%;
margin: auto;
padding: 3em;
background: #fff;
margin-bottom: 0 !important;
}
}
</style>

32
src/views/Home/main/eHonor.vue
View File

@ -3,7 +3,7 @@
<div class="title-box">
<h3>{{ title }}</h3>
</div>
<b-card>
<b-card>
<b-link href="/honor">
<b-carousel
id="carousel-1"
@ -18,16 +18,17 @@
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<b-carousel-slide
v-for="(el, i) in imageList" :key="i"
caption=""
text=""
:img-src="buildUrl(el.src)"
></b-carousel-slide>
<b-carousel-slide
v-for="(el, i) in imageList"
:key="i"
caption=""
text=""
:img-src="buildUrl(el.src)"
></b-carousel-slide>
</b-carousel>
</b-link>
</b-card>
<b-button-group :buttonList="buttonList" />
<e-button-group :buttonList="buttonList" />
</div>
</template>
@ -57,17 +58,16 @@ export default {
return Object.values(hrs);
},
buttonList() {
return [
];
return [];
}
},
methods: {
onSlideStart(slide) {
this.sliding = true
},
onSlideEnd(slide) {
this.sliding = false
}
onSlideStart() {
this.sliding = true;
},
onSlideEnd() {
this.sliding = false;
}
}
};
</script>

21
src/views/Home/main/eProduct.vue
View File

@ -1,11 +1,11 @@
<template>
<div class="product-layer">
<div class="title-box">
<h3> {{ title }} </h3>
<h3>{{ title }}</h3>
</div>
<b-card>
<b-card>
<b-row>
<b-col v-for="(el, i) in productList" :key="i" style="min-width:20em">
<b-col v-for="(el, i) in productList" :key="i" style="min-width:25em">
<b-card
:title="el.name"
:img-src="el.src"
@ -18,11 +18,11 @@
{{ el.describe }}
</div>
<b-button :href="el.href" variant="primary">详情</b-button>
</b-card>
</b-col >
</b-card>
</b-col>
</b-row>
</b-card>
<b-button-group :buttonList="buttonList" />
<e-button-group :buttonList="buttonList" />
</div>
</template>
@ -48,7 +48,7 @@ export default {
{
type: "green",
src: product2,
href: "/exhibition",
href: "/honor",
name: "轨道交通",
describe:
"轨道交通是指运营车辆需要在特定轨道上行驶的一类交通工具或运输系统。"
@ -56,7 +56,7 @@ export default {
{
type: "red",
src: product1,
href: "/exhibition",
href: "/honor",
name: "化学化工",
describe:
"化学工业（chemical industry）又称化学加工工业，泛指生产过程中化学方法占主要地位的过程工业。"
@ -64,7 +64,7 @@ export default {
{
type: "blue",
src: product3,
href: "/exhibition",
href: "/honor",
name: "电力电厂",
describe:
"电力电厂是指将某种形式的原始能转化为电能以供固定设施或运输用电的动力厂。"
@ -72,8 +72,7 @@ export default {
];
},
buttonList() {
return [
];
return [];
}
},
methods: {

16
src/views/Home/main/ePropaganda.vue
View File

@ -18,11 +18,12 @@
:key="i"
caption=""
text=""
:img-src="el.src">
:img-src="el.src"
>
</b-carousel-slide>
</b-carousel>
<div class="content">
<b-button-group :buttonList="buttonList" />
<e-button-group :buttonList="buttonList" />
</div>
</div>
</template>
@ -51,16 +52,15 @@ export default {
];
},
buttonList() {
return [
];
return [];
}
},
methods: {
onSlideStart(slide) {
this.sliding = true
onSlideStart() {
this.sliding = true;
},
onSlideEnd(slide) {
this.sliding = false
onSlideEnd() {
this.sliding = false;
}
}
};

18
src/views/Home/main/eRecommend.vue
View File

@ -9,7 +9,7 @@
<h6 style="display:flex">精彩视频</h6>
</template>
<b-row>
<b-col v-for="(el, i) in videoList" :key="i" style="width:30em">
<b-col v-for="(el, i) in videoList" :key="i" style="width:25em">
<iframe
style="position: relative;left: -1.3em;"
:src="el.source"
@ -23,23 +23,23 @@
</b-row>
</b-card>
<b-card header-tag="header">
<template #header>
<template #header>
<h6 style="display:flex">精彩图集</h6>
</template>
<b-row>
<b-col v-for="(el, i) in imageList" :key="i" style="min-width:30em">
<b-link :href="`/preview/image?id=${i}`">
<b-col v-for="(el, i) in imageList" :key="i" style="min-width:25em">
<b-link :href="`/preview/image?id=${i}`">
<b-card class="text-center" :img-src="el.src" :img-alt="el.name">
<template>
<h6 class="mb-0">{{ el.name }}</h6>
</template>
</b-card>
</b-card>
</b-link>
</b-col>
</b-row>
</b-card>
</div>
<b-button-group :buttonList="buttonList" />
<e-button-group :buttonList="buttonList" />
</div>
</template>
@ -84,8 +84,7 @@ export default {
return Object.values(images);
},
buttonList() {
return [
];
return [];
}
},
methods: {
@ -135,7 +134,6 @@ export default {
grid-template-columns: repeat(2, 1fr);
grid-gap: 2em 2em;
}
}
.component {
@ -193,7 +191,6 @@ export default {
}
}
@media (min-width: 980px) {
.component {
width: 900px;
@ -208,5 +205,4 @@ export default {
background: #00ff00;
}
}
</style>

18
src/views/Honor/index.vue
View File

@ -4,11 +4,7 @@
<article id="knowledge">
<h2 style="background:yellowgreen;">知识产权</h2>
<div class="flex">
<b-card
class="image"
v-for="(el, i) in pdfList"
:key="i"
>
<b-card class="image" v-for="(el, i) in pdfList" :key="i">
<a target="_blank" :href="buildUrl(el.src)">
<b-img :src="buildUrl(el.src)" class="image-knowledge" />
</a>
@ -18,11 +14,7 @@
<article id="honor">
<h2 style="background:crimson;">荣&ensp;&ensp;誉</h2>
<div class="flex">
<b-card
class="image"
v-for="(el, i) in imgList"
:key="i"
>
<b-card class="image" v-for="(el, i) in imgList" :key="i">
<a target="_blank" :href="buildUrl(el.src)">
<b-img :src="buildUrl(el.src)" lazy class="image-honor" />
</a>
@ -101,14 +93,14 @@ export default {
&-knowledge {
display: block;
max-width: 520px !important;
width: 100% !important;
max-width: 520px !important;
width: 100% !important;
height: auto !important;
}
&-honor {
display: block;
max-width: 520px !important;
max-width: 520px !important;
width: 100% !important;
height: auto !important;
}

16
src/views/PreviewImage/index.vue
View File

@ -4,6 +4,8 @@
<b-carousel
v-model="slide"
:interval="4000"
img-width="1024"
img-height="480"
controls
indicators
background="#ababab"
@ -11,7 +13,11 @@
@sliding-start="onSlideStart"
@sliding-end="onSlideEnd"
>
<b-carousel-slide v-for="(img, i) in model.sources" :key="i" :img-src="buildUrl(img)"></b-carousel-slide>
<b-carousel-slide
v-for="(img, i) in model.sources"
:key="i"
:img-src="buildUrl(img)"
></b-carousel-slide>
</b-carousel>
<b-button class="btn" v-b-toggle.sidebar-right>菜单</b-button>
<b-sidebar id="sidebar-right" shown title="" right shadow>
@ -58,11 +64,11 @@ export default {
this.model = el;
this.index = i;
},
onSlideStart(slide) {
this.sliding = true
onSlideStart() {
this.sliding = true;
},
onSlideEnd(slide) {
this.sliding = false
onSlideEnd() {
this.sliding = false;
}
}
};

31
src/views/Relation.vue
View File

@ -1,14 +1,16 @@
<template>
<div class="page">
<address class="container">
<p><span v-html="`联系人：`" />许经理</p>
<p><span v-html="`手&ensp;&ensp;机：`" />13910989830</p>
<p><span v-html="`邮&ensp;&ensp;箱：`" />henry@joylink.club</p>
<p><span v-html="`微&ensp;&ensp;信：`" /></p>
<div class="picture">
<b-img class="image" :src="wxcode" />
</div>
</address>
<div class="container">
<address style="text-align:left;padding:3em">
<p><span v-html="`联系人：`" />许经理</p>
<p><span v-html="`手&ensp;&ensp;机：`" />13910989830</p>
<p><span v-html="`邮&ensp;&ensp;箱：`" />henry@joylink.club</p>
<p><span v-html="`微&ensp;&ensp;信：`" /></p>
<div class="picture">
<b-img class="image" :src="wxcode" />
</div>
</address>
</div>
</div>
</template>
@ -27,20 +29,21 @@ export default {
<style lang="scss" scoped>
.page {
background: #f7f7f9;
height: calc(100vh - 66px);
padding: 1em;
width: 100%;
.container {
margin: auto;
padding: 4.8em;
width: 100%;
background: #fff;
text-align: left;
.picture {
width: 100%;
text-align: center;
.image {
width:100%;
width: 100%;
max-width: 40em;
height:auto;
height: auto;
border: 0.1em solid #eee;
}
}

6
vue.config.js
View File

@ -16,11 +16,13 @@ module.exports = {
productionSourceMap: false,
devServer: {
port: port,
host: "0.0.0.0",
disableHostCheck: true,
hotOnly: true,
open: false,
overlay: {
warnings: false,
errors: true
warnings: false,
errors: true
}
},
configureWebpack: {