Skip to content

Commit 9752ca7

Browse files
zhangying-zy618zhangying-zy618
committed
【产品】【四大引擎示例详情】
1 parent bf668ca commit 9752ca7

File tree

13 files changed

+575
-93
lines changed

13 files changed

+575
-93
lines changed

‎website/public/static/assets/product/component.png‎

157 KB
Loading

‎website/src/components/CardGroup/index.vue‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,11 @@
1010
:key="title"
1111
content-position="left"
1212
>
13-
<el-tag
13+
<span
1414
v-if="secondname"
15-
type="info"
16-
effect="light"
17-
>{{ secondname }}</el-tag>
18-
<el-divider
19-
v-if="secondname"
20-
direction="vertical"
21-
></el-divider>
22-
<el-tag
23-
type="info"
24-
effect="light"
25-
>{{ title }}</el-tag>
15+
>{{ secondname }}</span>
16+
<span
17+
>{{ title }}</span>
2618
</el-divider>
2719
</el-col>
2820
<el-col
@@ -116,6 +108,14 @@ export default {
116108
.gallery-divider {
117109
background: transparent;
118110
111+
.el-divider__text{
112+
height: 19px;
113+
font-size: 18px;
114+
font-family: Microsoft YaHei;
115+
font-weight: bold;
116+
color: #3C4858;
117+
line-height: 18px;
118+
}
119119
/* .el-divider--horizontal {
120120
display: block;
121121
height: 10px;

‎website/src/components/CardView/index.vue‎

Lines changed: 18 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -135,15 +135,25 @@ export default {
135135
}
136136
.el-card__header {
137137
padding: 0px 0px;
138-
border-bottom: 1px solid #ebeef5;
139-
-webkit-box-sizing: border-box;
140-
box-sizing: border-box;
138+
border-bottom:none !important;
139+
//border-bottom: 1px solid #ebeef5;
140+
//-webkit-box-sizing: border-box;
141+
//box-sizing: border-box;
141142
}
142143
.el-card {
143-
background: transparent;
144+
background: #F5F5F5;
145+
&:hover{
146+
transition: all 0.2s linear;
147+
transform: scale(1.1, 1.1);
148+
}
144149
}
145150
.el-card__body {
146-
background: transparent;
151+
background: #F5F5F5;
152+
padding: 15px;
153+
&:hover{
154+
transition: all 0.2s linear;
155+
transform: scale(1.1, 1.1);
156+
}
147157
}
148158
.gallery-card-wrapper {
149159
.box-card-header {
@@ -158,7 +168,7 @@ export default {
158168
width: 100%;
159169
transition: all 0.2s linear;
160170
&:hover {
161-
transform: scale(1.1, 1.1);
171+
//transform: scale(1.1, 1.1);
162172
/* filter: contrast(130%); */
163173
}
164174
}
@@ -180,9 +190,9 @@ export default {
180190
}
181191
.gallery-card-wrapper:hover {
182192
border-radius: 4px;
183-
background: linear-gradient(90deg, rgba(71, 148, 250, 1), rgba(49, 225, 230, 1));
193+
//background: linear-gradient(90deg, rgba(71, 148, 250, 1), rgba(49, 225, 230, 1));
184194
.title {
185-
color: #ffffff;
195+
color: #323333;
186196
}
187197
.el-icon-picture-outline {
188198
height: 256px;

‎website/src/router/index.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import LayoutTwo from "@/views/layout/LayoutTwo";
77
import Helper from '../views/helper/Helper';
88
import Gallery from "../views/gallery/Gallery";
99
import ShowCase from "../views/demo/ShowCase";
10+
import Product from "../views/component/product";
11+
import Guide from "../views/guide/DevelopGuide";
1012

1113
Vue.use(VueRouter);
1214

@@ -151,6 +153,16 @@ export const routes = [
151153
component: () => import("@/views/empty/index"),
152154
name: "*",
153155
},
156+
{
157+
path:"/component/product",
158+
component: Product,
159+
name: "product"
160+
},
161+
{
162+
path:"/guide/DevelopGuide",
163+
component: Guide,
164+
name: "guide"
165+
}
154166
];
155167

156168
const router = new VueRouter({

‎website/src/views/component/product.vue‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,158 @@
1+
<template>
2+
<el-container>
3+
<el-header
4+
style="padding:0px;"
5+
:height="mobile?'48px':'64px'"
6+
>
7+
<Header></Header>
8+
</el-header>
9+
<div class="product-header">
10+
<span class="product-span">组件</span>
11+
</div>
12+
<!-- <el-header class="product-header">-->
13+
<!-- </el-header>-->
14+
<el-container class="product-container">
15+
<el-aside
16+
class="aside-scroll-content"
17+
>
18+
<el-scrollbar
19+
class="element-scroll-content"
20+
wrapStyle="overflow-x: hidden;"
21+
viewStyle="overflow-y: hidden;"
22+
>
23+
<div class="header-menu-col">
24+
<span class="strong">{{ asideMenu.title }}</span>
25+
<div class="header-menu-links" v-for="(link, i) in asideMenu.links" :key="i">
26+
<div class="header-menu-link" v-for="(l, j) in link" :key="j">
27+
<div class="header-menu-link-text">
28+
<el-badge type="success" :value="asideMenu.hightlights[i][j] ? hint : ''" class="menu-badge">
29+
<a class="header-menu-link-text" :href="asideMenu.routes[i][j]">
30+
<span :class="{ 'light-subtitle': light }">{{ l }}</span>
31+
</a>
32+
</el-badge>
33+
</div>
34+
</div>
35+
</div>
36+
</div>
37+
</el-scrollbar>
38+
</el-aside>
39+
<el-main></el-main>
40+
</el-container>
41+
</el-container>
42+
</template>
43+
44+
<script>
45+
import axios from "axios";
46+
import {isMobile} from "@/utils/mobile";
47+
import {Header} from "@/views/layout/components";
48+
49+
export default {
50+
name: "product",
51+
data() {
52+
return {
53+
mobile: isMobile(),
54+
asideContent: "",
55+
asideMenu: "",
56+
light: true,
57+
hint: '新'
58+
}
59+
},
60+
components: {
61+
Header
62+
},
63+
mounted() {
64+
this.initConfig();
65+
},
66+
methods: {
67+
initConfig() {
68+
this.getAsideList();
69+
},
70+
getAsideList() {
71+
let self = this;
72+
let asideUrl = "./static/demo/config/config-headers.json";
73+
axios.get(asideUrl).then(response => {
74+
let temp = response.data;
75+
for (let i in temp) {
76+
if ("组件" === (temp[i].title).toLowerCase()) {
77+
self.asideContent = temp[i];
78+
break;
79+
}
80+
}
81+
self.asideMenu = self.asideContent.menus[0];
82+
});
83+
}
84+
}
85+
}
86+
</script>
87+
88+
<style scoped lang="scss">
89+
.product-header {
90+
padding: 0;
91+
height: 240px !important;
92+
background-image: url("../../../public/static/assets/product/component.png");
93+
94+
.product-span {
95+
width: fit-content;
96+
height: 240px;
97+
margin-left: 132px;
98+
margin-top: 86px;
99+
color: rgba(255, 255, 255, 1);
100+
font-stretch: normal;
101+
letter-spacing: 1.5px;
102+
font-size: 22px;
103+
font-family: Microsoft YaHei;
104+
font-weight: bold;
105+
font-style: italic;
106+
color: #ffffff;
107+
line-height: 240px;
108+
}
109+
}
110+
111+
.img-class {
112+
height: 100%;
113+
width: 100%;
114+
}
115+
116+
.product-container {
117+
height: fit-content;
118+
width: 100%;
119+
120+
.aside-scroll-content {
121+
height: calc(100vh - 240px);
122+
width: 250px;
123+
margin: 36px 0px 36px 79px;
124+
overflow-x: hidden;
125+
background-color: #F5F7FB;
126+
}
127+
}
128+
129+
.strong {
130+
font-weight: bold !important;
131+
width: 37px;
132+
height: 18px;
133+
font-size: 18px;
134+
font-family: Microsoft YaHei;
135+
color: #333333;
136+
line-height: 48px;
137+
}
138+
139+
.light-subtitle {
140+
color: #3C4858 !important;
141+
}
142+
.header-menu-link{
143+
margin: 4px 0px;
144+
width: fit-content;
145+
height: fit-content;
146+
span {
147+
width: 60px;
148+
height: 14px;
149+
font-size: 14px;
150+
font-family: Microsoft YaHei;
151+
font-weight: 400;
152+
line-height: 30px;
153+
}
154+
}
155+
.header-menu-col{
156+
padding: 5px 90px;
157+
}
158+
</style>

‎website/src/views/demo/ShowCase.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -59,10 +59,10 @@
5959
<IconFont type="iconcollapseright" />
6060
</div>
6161
<transition name="bounce">
62-
<ShowGallery
63-
v-if="currentKind.length > 0 && !fullScreen"
64-
:list="currentKind"
65-
/>
62+
<!-- <ShowGallery-->
63+
<!-- v-if="currentKind.length > 0 && !fullScreen"-->
64+
<!-- :list="currentKind"-->
65+
<!-- />-->
6666
</transition>
6767
<router-view
6868
class="main-demo-wrapper"

‎website/src/views/demo/index.vue‎

Lines changed: 18 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -159,7 +159,7 @@ import "codemirror/lib/codemirror.css";
159159
// language
160160
import "codemirror/mode/javascript/javascript.js";
161161
// theme css
162-
import "codemirror/theme/monokai.css";
162+
import "codemirror/theme/moxer.css";
163163
// require active-line.js
164164
import "codemirror/addon/selection/active-line.js";
165165
// styleSelectedText
@@ -198,8 +198,14 @@ import "codemirror/addon/fold/xml-fold.js";
198198
//import 'codemirror/theme/base16-dark.css'
199199
import "codemirror/theme/base16-light.css";
200200
import "codemirror/theme/paraiso-light.css";
201-
import "codemirror/theme/monokai.css";
201+
import "codemirror/theme/moxer.css";
202202
import "codemirror/theme/cobalt.css";
203+
import "codemirror/theme/eclipse.css";
204+
import "codemirror/theme/mdn-like.css";
205+
import "codemirror/theme/ssms.css";
206+
import "codemirror/theme/neo.css";
207+
import "codemirror/theme/solarized.css";
208+
203209
204210
// import "@/styles/markdown.css";
205211
//import "@/styles/prism.css";
@@ -251,7 +257,7 @@ export default {
251257
keyMap: "sublime",
252258
matchBrackets: true,
253259
showCursorWhenSelecting: true,
254-
theme: "base16-light",
260+
theme: "neo",
255261
extraKeys: { Ctrl: "autocomplete" }
256262
}
257263
};
@@ -357,9 +363,9 @@ export default {
357363
// demoContent[0].style.height = window.innerHeight - 102 + "px";
358364
// markdownContent[markdownContent.length - 1].style.height = window.innerHeight - 242 + "px";
359365
} else {
360-
codeContent[0].style.height = window.innerHeight - 295 + "px";
361-
demoContent[0].style.height = window.innerHeight - 230 + "px";
362-
markdownContent[markdownContent.length - 1].style.height = window.innerHeight - 295 + "px";
366+
codeContent[0].style.height = window.innerHeight - 160 + "px";
367+
demoContent[0].style.height = window.innerHeight - 90 + "px";
368+
markdownContent[markdownContent.length - 1].style.height = window.innerHeight - 160 + "px";
363369
}
364370
}
365371
},
@@ -495,6 +501,8 @@ export default {
495501
}
496502
}
497503
.splitpanes__pane {
504+
width: 40%;
505+
height: 90%;
498506
background-color: #ffffff !important;
499507
}
500508
.webclient-showcase-mobile {
@@ -533,7 +541,7 @@ export default {
533541
}
534542
535543
.editor-codemirror-wraper {
536-
height: calc(100vh - 235px);
544+
height: calc(100vh - 50px);
537545
}
538546
539547
.iframemobile {
@@ -593,5 +601,8 @@ export default {
593601
position: relative;
594602
} */
595603
}
604+
.splitpanes__pane{
605+
height: 100% !important;
606+
}
596607
}
597608
</style>

‎website/src/views/gallery/Gallery.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -367,7 +367,7 @@ export default {
367367
overflow-x: hidden;
368368
}
369369
.el-main {
370-
padding: 0 6px;
370+
padding: 0 10px;
371371
}
372372
.el-timeline-item {
373373
position: relative;

0 commit comments

Comments
 (0)