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

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

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

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

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

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

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

6
src/layout/index.vue
View File

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

18
src/views/About.vue
View File

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

31
src/views/Relation.vue
View File

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

6
vue.config.js
View File

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