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 2020-09-28 11:18:50 +08:00
parent e6846ed04b
commit 4912f5ef74
9 changed files with 13540 additions and 289 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13460
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

1
package.json
View File

@ -14,6 +14,7 @@
"script-ext-html-webpack-plugin": "^2.1.4",
"svg-sprite-loader": "^5.0.0",
"vue": "^2.6.12",
"vue-clipboard2": "^0.3.1",
"vue-pdf": "^4.1.0",
"vue-router": "^3.2.0",
"vue-video-player": "^5.0.2",

2
src/main.js
View File

@ -4,6 +4,7 @@ import router from "./router";
import store from "./store";
import ElementUI from "element-ui";
import VueVideoPlayer from "vue-video-player";
import VueClipboard from "vue-clipboard2";
import "./permission";
import "element-ui/lib/theme-chalk/index.css";
@ -20,6 +21,7 @@ window.router = router;
Vue.config.productionTip = false;
Vue.use(ElementUI);
Vue.use(VueVideoPlayer);
Vue.use(VueClipboard);
new Vue({
router,

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

@ -1,35 +0,0 @@
<template>
<el-card shadow="never">
<div slot="header" class="header clearfix">
<el-image style="width: 80px;height: auto;" :src="node.image" />
<h3>{{ node.name }}</h3>
</div>
<div class="container">
<slot :node="node" />
</div>
</el-card>
</template>
<script>
export default {
props: {
node: {
type: Object,
required: true
}
}
};
</script>
<style lang="scss" scoped>
.el-card {
.header {
display: flex;
justify-content: flex-start;
align-items: center;
min-height: 100px;
h3 {
padding: 0 20px;
color: #111;
}
}
}
</style>

63
src/views/Exhibition/eList.vue
View File

@ -1,63 +0,0 @@
<template>
<div class="list" :style="{ height: height + 'px' }">
<div class="container">
<div v-for="(el, i) in options" :key="i">
<e-card :node="el">
<template slot-scope="{ node }">
<slot :node="node" />
</template>
</e-card>
</div>
</div>
</div>
</template>
<script>
import eCard from "./eCard";
export default {
components: {
eCard
},
props: {
options: {
type: Array,
required: true
},
height: {
type: [String, Number],
default: 600
}
}
};
</script>
<style lang="scss" scoped>
.list {
position: relative;
overflow-y: auto;
&::-webkit-scrollbar {
width: 5px;
height: 5px;
}
&::-webkit-scrollbar-track {
background: rgb(239, 239, 239);
border-radius: 2px;
}
&::-webkit-scrollbar-thumb {
background: #bfbfbf;
border-radius: 10px;
}
&::-webkit-scrollbar-thumb:hover {
background: #666;
}
&::-webkit-scrollbar-corner {
background: #fff;
}
.container {
height: 100%;
.el-card {
margin: 0 20px 10px 20px;
}
}
}
</style>

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

@ -1,170 +1,84 @@
<template>
<div class="main">
<div class="container">
<el-tabs v-model="active" type="border-card">
<el-tab-pane label="轨道交通" name="first">
<e-list :options="metroList">
<template slot-scope="{ node }">
<div class="flex">
<a
target="_blank"
:href="`https://joylink.club/login?project=${node.type}`"
>
<strong>实训平台</strong>
<span>{{
`https://joylink.club/login?project=${node.type}`
}}</span>
</a>
<a
target="_blank"
:href="
`https://joylink.club/design/login?project=${node.type}`
"
>
<strong>设计平台</strong>
<span>{{
`https://joylink.club/design/login?project=${node.type}`
}}</span>
</a>
</div>
<el-card shadow="never">
<el-table
:data="tableData"
:span-method="objectSpanMethod"
border
style="width: 100%;"
>
<el-table-column prop="platform" label="平台" width="200" />
<el-table-column prop="name" label="系统名称" />
<el-table-column prop="href" label="系统入口">
<template slot-scope="{ row }">
<i
v-clipboard:copy="row.href"
v-clipboard:success="onCopy"
v-clipboard:error="onError"
class="el-icon-document-copy"
/>
<a style="margin-left: 10px" target="_blank" :href="row.href">
{{ row.href }}
</a>
</template>
</e-list>
</el-tab-pane>
<el-tab-pane label="化学化工" name="second">
<e-list :options="chemistryList">
<template slot-scope="{ node }">
<div class="flex">
<a
v-for="(el, i) in node.address"
:key="i"
target="_blank"
:href="el.href"
>
<strong>{{ el.name }}</strong>
<span>{{ el.href }}</span>
</a>
</div>
</template>
</e-list>
</el-tab-pane>
<el-tab-pane label="电力电厂" name="third">
<e-list :options="powerList">
<template slot-scope="{ node }">
<div class="flex">
<a
v-for="(el, i) in node.address"
:key="i"
target="_blank"
:href="el.href"
>
<strong>{{ el.name }}</strong>
<span>{{ el.href }}</span>
</a>
</div>
</template>
</e-list>
</el-tab-pane>
</el-tabs>
</el-table-column>
</el-table>
</el-card>
</div>
</div>
</template>
<script>
import eList from "./eList";
export default {
components: {
eList
},
data() {
return {
active: "first"
};
return {};
},
computed: {
metroList() {
tableData() {
return [
{
name: "哈尔滨项目",
type: "heb",
image: require("@/assets/logo/heb.png")
platform: "交通轨道",
name: "实训平台系统入口",
href: "https://test.joylink.club/tpsq/dashboard/home"
},
{
name: "贵州装备",
type: "gzb",
image: require("@/assets/logo/gzb.png")
platform: "",
name: "设计平台系统入口",
href: "https://test.joylink.club/tpsq/dashboard/home"
},
{
name: "西铁院",
type: "xty",
image: require("@/assets/logo/xty.png")
platform: "电厂电力",
name: "东电云系统入口",
href: "https://test.joylink.club/tpsq/dashboard/home"
},
{
name: "西安地铁调度一部",
type: "xadt",
image: require("@/assets/logo/xadt.png")
},
{
name: "竞业达",
type: "jyd",
image: require("@/assets/logo/jyd.png")
},
{
name: "铁科院",
type: "tky",
image: require("@/assets/logo/tky.png")
},
{
name: "北信坤成",
type: "bxkc",
image: require("@/assets/logo/bxkc.png")
platform: "化学化工",
name: "系统入口",
href: "https://joylink.club/ddy/login"
}
];
},
powerList() {
return [
{
name: "电厂DCS仿真控制系统",
type: "ddy",
image: require("@/assets/logo/ddy.png"),
address: [
{
name: "系统入口",
href: "https://test.joylink.club/tpsq/home"
},
{
// name: "绘图入口",
// href: "https://test.joylink.club/tpsq/dashboard/home"
}
]
}
];
},
chemistryList() {
return [
{
name: "东电云",
type: "ddy",
image: require("@/assets/logo/ddy.png"),
address: [
{
name: "系统入口",
href: "https://joylink.club/ddy/login"
}
]
}
];
},
name() {
return this.$route.query.name;
}
},
watch: {
$route() {
this.active = this.name || "first";
methods: {
objectSpanMethod({ rowIndex, columnIndex }) {
if (columnIndex === 0) {
if (rowIndex < 2) {
if (rowIndex % 2 == 0) {
return { rowspan: 2, colspan: 1 };
} else {
return { rowspan: 0, colspan: 0 };
}
} else {
return { rowspan: 1, colspan: 1 };
}
}
},
onCopy() {
this.$message.success("复制成功");
},
onError() {
this.$message.info("复制失败");
}
},
mounted() {
this.active = this.name || "first";
}
};
</script>
@ -172,39 +86,30 @@ export default {
.main {
background: #f7f7f9;
.container {
background: #f7f7f9;
padding: 80px;
width: 70%;
max-width: 1430.016px;
margin: auto;
text-align: left;
.el-tabs {
height: calc(100% - 80px);
/deep/ {
.el-card__body {
padding: 80px;
}
tr {
pointer-events: none;
}
}
i,
a {
display: inline-block;
line-height: 32px;
color: #373737;
}
.grid {
display: grid;
grid-template-columns: repeat(5, 33.33%);
}
.flex {
display: flex;
flex-direction: column;
strong {
padding-right: 30px;
color: #409eff;
}
span {
&:hover {
font-weight: bold;
color: #111;
}
pointer-events: auto;
&:hover {
font-weight: bold;
}
}
}

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

@ -57,7 +57,7 @@ export default {
{
type: "green",
src: product2,
href: "/exhibition?name=first",
href: "/exhibition",
name: "轨道交通",
describe:
"轨道交通是指运营车辆需要在特定轨道上行驶的一类交通工具或运输系统。"
@ -65,7 +65,7 @@ export default {
{
type: "red",
src: product1,
href: "/exhibition?name=second",
href: "/exhibition",
name: "化学化工",
describe:
"化学工业（chemical industry）又称化学加工工业，泛指生产过程中化学方法占主要地位的过程工业。"
@ -73,10 +73,10 @@ export default {
{
type: "blue",
src: product3,
href: "/exhibition?name=third",
href: "/exhibition",
name: "电力电厂",
describe:
"电厂是指将某种形式的原始能转化为电能以供固定设施或运输用电的动力厂。"
"电力电厂是指将某种形式的原始能转化为电能以供固定设施或运输用电的动力厂。"
}
];
},

11
src/views/Layout/eFooter/eCustom.vue
View File

@ -83,15 +83,15 @@ export default {
children: [
{
name: "轨道交通产品",
href: "/exhibition?name=first"
href: "/exhibition"
},
{
name: "化学化工产品",
href: "/exhibition?name=second"
href: "/exhibition"
},
{
name: "电力电厂产品",
href: "/exhibition?name=third"
href: "/exhibition"
}
]
},
@ -135,11 +135,6 @@ export default {
images() {
return Object.values(images);
}
},
methods: {
goSearch() {
//
}
}
};
</script>

16
src/views/Layout/eHeader/index.vue
View File

@ -38,20 +38,7 @@ export default {
},
{
name: "我们的产品",
children: [
{
name: "轨道交通",
href: "/exhibition?name=first"
},
{
name: "化学化工",
href: "/exhibition?name=second"
},
{
name: "电力电厂",
href: "/exhibition?name=third"
}
]
href: "/exhibition"
},
{
name: "经典案例",
@ -113,7 +100,6 @@ export default {
this.scrollT = scrollT;
},
goSearch() {},
goLinkPage() {}
}
};