Skip to content

Commit 955743c

Browse files
author
吴博
committed
首页改造完毕
1 parent 9d137b7 commit 955743c

File tree

4 files changed

+128
-109
lines changed

4 files changed

+128
-109
lines changed

‎src/assets/styles/header.less‎

Lines changed: 4 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,9 @@
33
top: 0;
44
left: 0;
55
right: 0;
6-
background-color: #fff;
6+
background-color: #f5faff;
77
padding: 0 0 0 200px;
8-
height: 56px;
9-
.cd-box-shadow();
8+
height: 60px;
109
z-index: 99;
1110
}
1211

@@ -38,35 +37,13 @@
3837
float: left;
3938
color: @cd-dark-minor;
4039
.cd-transition();
41-
&:before {
42-
display: block;
43-
content: '';
44-
background: transparent;
45-
width: 100%;
46-
height: 2px;
47-
position: absolute;
48-
bottom: 0;
49-
left: 0;
50-
}
5140
&:hover {
5241
cursor: pointer;
53-
color: @cd-dark-major;
42+
color: @brand-primary;
5443
.cd-transition();
5544
}
5645
&.active {
57-
color: @cd-dark-major;
58-
&:before {
59-
display: block;
60-
content: '';
61-
background: @brand-primary;
62-
width: 100%;
63-
height: 4px;
64-
position: absolute;
65-
bottom: 0;
66-
left: 0;
67-
animation-name: tabs-line;
68-
animation-duration: .25s;
69-
}
46+
color: @brand-primary;
7047
}
7148
}
7249
}

‎src/assets/styles/homepage.less‎

Lines changed: 76 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -15,20 +15,26 @@
1515
}
1616

1717
.site-homepage-banner__text {
18-
float: left;
19-
width: 280px;
20-
padding-top: 40px;
21-
h1 {
22-
color: @brand-primary;
23-
font-size: 32px;
24-
line-height: 48px;
25-
margin-bottom: 16px;
18+
width: 100%;
19+
height: 500px;
20+
padding-top: 120px;
21+
text-align: center;
22+
background-color: #f5faff;
23+
.title {
24+
height: 80px;
25+
margin-bottom: 48px;
26+
font-family: Arial-BoldMT;
27+
font-size: 72px;
28+
color: #333;
29+
letter-spacing: 0;
2630
}
27-
h2 {
28-
color: rgba(0, 0, 0, 0.88);
29-
line-height: 16px;
30-
font-size: 16px;
31-
margin-bottom: 24px;
31+
.desc {
32+
margin-bottom: 92px;
33+
font-family: PingFangSC-Thin;
34+
font-size: 24px;
35+
color: #333;
36+
letter-spacing: 0;
37+
line-height: 32px;
3238
}
3339
}
3440

@@ -158,47 +164,76 @@
158164

159165
.site-homepage-feature {
160166
width: 1200px;
167+
padding: 0 30px;
161168
margin: 0 auto 180px;
162169
.cd-clearfix();
163-
display: flex;
164170
}
165171

166172
.site-homepage-feature__item {
167-
flex: 1;
168-
flex-direction: column;
169-
text-align: center;
170-
width: 280px;
171-
justify-content: space-between;
172-
&.middle {
173-
margin: 0 180px;
173+
position: relative;
174+
width: 1140px;
175+
margin-top: 80px;
176+
padding-top: 62px;
177+
&.left {
178+
padding-left: 556px;
179+
.site-homepage-feature__thumb {
180+
left: 0;
181+
}
182+
}
183+
&.right {
184+
padding-right: 556px;
185+
.site-homepage-feature__thumb {
186+
right: 0;
187+
}
174188
}
175189
}
176190

177191
.site-homepage-feature__thumb {
178-
margin-bottom: 32px;
192+
position: absolute;
193+
top: 0;
194+
width: 436px;
195+
height: 224px;
196+
background-color: #f5f5f5;
197+
&.left {
198+
float: left;
199+
margin-right: 120px;
200+
}
201+
&.right {
202+
float: right;
203+
margin-left: 120px;
204+
}
179205
}
180206

181207
.site-homepage-feature__title {
182-
color: rgba(58, 58, 58, 0.88);
183-
font-size: 16px;
184-
margin-bottom: 16px;
208+
font-family: PingFangSC-Medium;
209+
font-size: 24px;
210+
color: #313131;
211+
letter-spacing: 0;
212+
line-height: 32px;
185213
}
186214

187215
.site-homepage-feature__content {
188-
color: rgba(0, 0, 0, 0.56);
189-
font-size: 14px;
190-
margin-bottom: 24px;
191-
line-height: 22px;
216+
width: 584px;
217+
margin-top: 16px;
218+
font-family: PingFangSC-Regular;
219+
font-size: 18px;
220+
color: #666666;
221+
letter-spacing: 0;
222+
line-height: 26px;
192223
}
193224

194225
.site-homepage-footer {
195-
.cd-clearfix();
196-
font-size: 14px;
197-
padding: 32px 0;
198-
background: @brand-primary;
199-
-webkit-box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.01), 0 -4px 4px 0 rgba(0, 0, 0, 0.04);
200-
-moz-box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.01), 0 -4px 4px 0 rgba(0, 0, 0, 0.04);
201-
box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.01), 0 -4px 4px 0 rgba(0, 0, 0, 0.04);
226+
padding: 30px 0;
227+
text-align: center;
228+
background-color: #333;
229+
}
230+
231+
.site-homepage-footer__belongto {
232+
margin-bottom: 16px;
233+
font-family: PingFangSC-Regular;
234+
font-size: 20px;
235+
color: #FFFFFF;
236+
line-height: 32px;
202237
}
203238

204239
.site-homepage-footer__nav {
@@ -219,7 +254,10 @@
219254
}
220255

221256
.site-homepage-footer__copyright {
222-
// float: right;
257+
opacity: 0.7;
258+
font-family: PingFangSC-Regular;
259+
font-size: 14px;
260+
color: #fff;
223261
text-align: center;
224-
color: rgba(255, 255, 255, .8);
262+
line-height: 20px;
225263
}

‎src/data/index.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -223,9 +223,24 @@ const navMenu:any[] = [
223223
'text': '首页',
224224
'name': 'homepage'
225225
},
226+
{
227+
'text': '原则策略',
228+
'name': 'principle',
229+
children: [
230+
231+
]
232+
},
233+
{
234+
'text': '元素布局',
235+
'name': 'layout'
236+
},
226237
{
227238
'text': '组件',
228239
'name': 'component'
240+
},
241+
{
242+
'text': '资源',
243+
'name': 'resource'
229244
}
230245
];
231246

‎src/views/homepage.vue‎

Lines changed: 33 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -2,48 +2,30 @@
22
<div id="app" class="site-wrap">
33
<x-header></x-header>
44
<div class="site-homepage-main">
5-
<section class="site-homepage-banner">
6-
<div class="site-homepage-banner__text">
7-
<h1>Codeages Design<br>一种 Web 设计语言</h1>
8-
<h2>让你快速搭建自己的中后台应用</h2>
9-
<button class="cd-btn cd-btn-primary cd-btn-lg" @click="getMore">了解更多</button>
5+
<div class="site-homepage-banner__text">
6+
<div class="title">Codeages Design system</div>
7+
<div class="desc">阔知设计系统：一个让团队协作规范、高效的全栈式设计体系。</div>
8+
<div class="link">
9+
<button class="cd-btn cd-btn-default">入门</button>
10+
<button class="cd-btn cd-btn-primary" style="margin-left: 64px;">组件</button>
1011
</div>
11-
<div class="site-homepage-banner__pic"
12-
:style="{transform: `perspective(${banner.global.perspective}px) rotateX(${banner.global.rotateY}deg) rotateY(${banner.global.rotateX}deg)`}"
13-
@mousemove="mousemove"
14-
@mouseleave="mouseleave"
15-
ref="banner">
16-
<img :style="{transform: `matrix(1, 0, 0, 1, ${item.rotateX}, ${item.rotateY}`}"
17-
:class="[{active: isActive, prohibit: isProhibit}, `site-homepage-banner__${index}`]"
18-
:src="item.src"
19-
:srcset="item.srcset" alt="" v-for="(item, index) in banner" :key="index" :data-a="banner[item]" v-if="index != 'global'">
20-
</div>
21-
</section>
12+
</div>
2213
<section class="site-homepage-feature">
23-
<div class="site-homepage-feature__item" :class="{middle: index == 1}" v-for="(item, index) in feature" :key="index">
14+
<div class="site-homepage-feature__item"
15+
:class="feature.direction"
16+
v-for="feature in features" :key="feature.title">
2417
<div class="site-homepage-feature__thumb">
25-
<img :src="item.src"
26-
:srcset="item.srcset" alt="">
27-
</div>
28-
<div class="site-homepage-feature__title">
29-
{{ item.title }}
30-
</div>
31-
<div class="site-homepage-feature__content">
32-
{{ item.content }}
33-
</div>
34-
<div class="site-homepage-feature__action">
35-
<button class="cd-btn cd-btn-primary cd-btn-lg" @click="getMore">查看详情</button>
18+
<img alt="" />
3619
</div>
20+
<div class="site-homepage-feature__title">{{ feature.title }}</div>
21+
<div class="site-homepage-feature__content">{{ feature.content }}</div>
3722
</div>
3823
</section>
3924
<footer class="site-homepage-footer">
4025
<div class="cd-container">
41-
<!-- <ul class="site-homepage-footer__nav">
42-
<li><a href="">隐私协议</a></li>
43-
<li><a href="">下载文档</a></li>
44-
</ul> -->
26+
<div class="site-homepage-footer__belongto">阔知UED团队和技术团队联合出品</div>
4527
<div class="site-homepage-footer__copyright">
46-
© 2017-2018 Codeages Design v{{version}} 阔知用户体验技术团队
28+
© 2019-2020 Codeages Design V1.0.1
4729
</div>
4830
</div>
4931
</footer>
@@ -125,22 +107,32 @@ export default class extends Vue {
125107
},
126108
};
127109
128-
feature: any = [
110+
features: any = [
129111
{
130-
title: '帮助产品经理搭建原型',
131-
content: '了解设计指南，帮助产品经理搭建逻辑清晰，结构合理且高效易用的产品。',
112+
direction: 'right',
113+
title: '原则策略',
114+
content: '原则策略能辅助产品和设计团队规范的、严谨的表达内容，让用户使用起来更加愉悦。',
132115
src: '/static/img/homepage/feature_1.png',
133116
srcset: "/static/img/homepage/feature_1@2x.png 2x"
134117
},
135118
{
136-
title: '帮助开发复用代码和组件元素',
137-
content: '使用组件演示快速体验交互细节，使用前端框架封装的代码帮助快速开发。',
119+
direction: 'left',
120+
title: '设计元素',
121+
content: '元素规范能让设计和前端团队在设计和开发过程中做出专业的决策，搭建出结构合理、高效易用的产品。',
138122
src: '/static/img/homepage/feature_2.png',
139123
srcset: "/static/img/homepage/feature_2@2x.png 2x"
140124
},
141125
{
142-
title: '帮助设计减少重复劳动力',
143-
content: '下载相关资源快速搭建页面原型或高保真视觉稿，提升产品设计效率。',
126+
direction: 'right',
127+
title: '组件Demo',
128+
content: '使用组件 Demo 快速体验交互细节；使用前端框架封装的代码帮助工程师快速开发。',
129+
src: '/static/img/homepage/feature_3.png',
130+
srcset: "/static/img/homepage/feature_3@2x.png 2x"
131+
},
132+
{
133+
direction: 'left',
134+
title: '可复用的资源',
135+
content: '下载相关资源，用其快速搭建页面原型或高保真视觉稿，提升产品设计率。',
144136
src: '/static/img/homepage/feature_3.png',
145137
srcset: "/static/img/homepage/feature_3@2x.png 2x"
146138
},
@@ -192,9 +184,6 @@ export default class extends Vue {
192184
this.banner.global.rotateX = 0;
193185
this.banner.global.rotateY = 0;
194186
}
195-
196-
getMore() {
197-
this['$router'].push({ 'name': 'component' });
198-
}
187+
199188
}
200189
</script>

0 commit comments

Comments
 (0)