Skip to content

Commit edc9d3e

Browse files
gmingchengmingchen
authored
Merge pull request gmingchen#8 from gmingchen/composition-api
Style optimization
2 parents 1e3ce3a + 075ded4 commit edc9d3e

File tree

15 files changed

+220
-150
lines changed

15 files changed

+220
-150
lines changed

‎public/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
width: 100%;
3131
height: 100%;
3232
z-index: 999999;
33-
background-color: #fff;
33+
background-color: white;
3434
}
3535

3636
#loader {

‎src/App.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,6 @@
1616
font-family: Avenir, Helvetica, Arial, sans-serif;
1717
-webkit-font-smoothing: antialiased;
1818
-moz-osx-font-smoothing: grayscale;
19-
color: $fontColor1;
19+
color: nth($fontColor, 1);
2020
}
2121
</style>

‎src/assets/icon/svg/code.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎src/assets/sass/_global.scss‎

Lines changed: 134 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,14 @@
11
@import "mixin";
2+
/**
3+
* todo: n->none 没有
4+
* todo: t->top 上
5+
* todo: r->right 右
6+
* todo: b->bottom 下
7+
* todo: l->left 左
8+
* todo: a->auto 自动
9+
*/
210

3-
// width 包括内外边距
11+
// 怪异盒子模型
412
* { box-sizing: border-box; }
513

614
// 通用ul li
@@ -12,7 +20,129 @@ ul {
1220
}
1321
}
1422

15-
// 单行文字省略...
16-
.g-single-ellipse {
17-
@include single-ellipse;
23+
// todo: 后期若没有那么多可以改为 @each
24+
// 字体大小
25+
@for $i from 12 through 60 {
26+
.font_s-#{$i} {
27+
font-size: #{$i}px;
28+
}
29+
}
30+
// 外边框
31+
@for $i from 0 through 200 {
32+
.margin-#{$i} {
33+
margin: #{$i}px;
34+
}
35+
.margin-#{$i}-a {
36+
margin: #{$i}px auto;
37+
}
38+
.margin-#{$i}-n {
39+
margin: #{$i}px 0px;
40+
}
41+
.margin-n-#{$i} {
42+
margin: 0px #{$i}px;
43+
}
44+
.margin_t-#{$i} {
45+
margin-top: #{$i}px;
46+
}
47+
.margin_r-#{$i} {
48+
margin-right: #{$i}px;
49+
}
50+
.margin_b-#{$i} {
51+
margin-bottom: #{$i}px;
52+
}
53+
.margin_l-#{$i} {
54+
margin-left: #{$i}px;
55+
}
56+
}
57+
// 内边框
58+
@for $i from 1 through 200 {
59+
.padding-#{$i} {
60+
padding: #{$i}px;
61+
}
62+
.padding-#{$i}-n {
63+
margin: #{$i}px 0px;
64+
}
65+
.padding-n-#{$i} {
66+
margin: 0px #{$i}px;
67+
}
68+
.padding_t-#{$i} {
69+
padding-top: #{$i}px;
70+
}
71+
.padding_r-#{$i} {
72+
padding-right: #{$i}px;
73+
}
74+
.padding_b-#{$i} {
75+
padding-bottom: #{$i}px;
76+
}
77+
.padding_l-#{$i} {
78+
padding-left: #{$i}px;
79+
}
80+
}
81+
// 文字省略
82+
@for $i from 1 through 5 {
83+
.ellipse-#{$i} {
84+
display: -webkit-box;
85+
overflow: hidden;
86+
-webkit-box-orient: vertical;
87+
-webkit-line-clamp: #{$i};
88+
}
89+
}
90+
// 定位
91+
.relative {
92+
position: relative;
93+
}
94+
.absolute {
95+
position: absolute;
96+
}
97+
@for $i from 1 through 200 {
98+
.relative_t-#{$i} {
99+
@extend .relative;
100+
top: #{$i}px;
101+
}
102+
.relative_r-#{$i} {
103+
@extend .relative;
104+
right: #{$i}px;
105+
}
106+
.relative_b-#{$i} {
107+
@extend .relative;
108+
bottom: #{$i}px;
109+
}
110+
.relative_l-#{$i} {
111+
@extend .relative;
112+
left: #{$i}px;
113+
}
114+
.relative-#{$i} {
115+
@extend .relative_t-#{$i}, .relative_r-#{$i}, .relative_b-#{$i}, .relative_l-#{$i};
116+
}
117+
.relative-#{$i}-n {
118+
@extend .relative_t-#{$i}, .relative_b-#{$i};
119+
}
120+
.relative-n-#{$i} {
121+
@extend .relative_l-#{$i}, .relative_r-#{$i};
122+
}
123+
.absolute_t-#{$i} {
124+
@extend .absolute;
125+
top: #{$i}px;
126+
}
127+
.absolute_r-#{$i} {
128+
@extend .absolute;
129+
right: #{$i}px;
130+
}
131+
.absolute_b-#{$i} {
132+
@extend .absolute;
133+
bottom: #{$i}px;
134+
}
135+
.absolute_l-#{$i} {
136+
@extend .absolute;
137+
left: #{$i}px;
138+
}
139+
.absolute-#{$i} {
140+
@extend .absolute_t-#{$i}, .absolute_r-#{$i}, .absolute_b-#{$i}, .absolute_l-#{$i};
141+
}
142+
.absolute-#{$i}-n {
143+
@extend .absolute_t-#{$i}, .absolute_b-#{$i};
144+
}
145+
.absolute-n-#{$i} {
146+
@extend .absolute_l-#{$i}, .absolute_r-#{$i};
147+
}
18148
}

‎src/assets/sass/_mixin.scss‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
@import "variable";
22

3-
@mixin relative {
4-
position: relative;
5-
width: 100%;
6-
height: 100%;
7-
}
8-
93
// 单行文字省略...
104
@mixin single-ellipse {
115
overflow: hidden;
126
text-overflow:ellipsis;
137
white-space: nowrap;
148
}
9+
// 定位
10+
@mixin position($t: unset, $r: unset, $b: unset, $l: unset) {
11+
top: $t;
12+
right: $r;
13+
bottom: $b;
14+
left: $l;
15+
}
1516

1617
// 阴影
1718
@mixin box-shadow {

‎src/assets/sass/_variable.scss‎

Lines changed: 9 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,11 @@
11
// 主色
2-
$brandColor: #409EFF;
3-
$brandColor1: #53A8FF;
4-
$brandColor2: #66B1FF;
5-
$brandColor3: #79BBFF;
6-
$brandColor4: #8CC5FF;
7-
$brandColor5: #A0CFFF;
8-
$brandColor6: #B3D8FF;
9-
$brandColor7: #C6E2FF;
10-
$brandColor8: #D9ECFF;
11-
$brandColor9: #ECF5FF;
12-
2+
$brandColor: #409EFF,#53A8FF,#66B1FF,#79BBFF,#8CC5FF,#A0CFFF,#B3D8FF,#C6E2FF,#D9ECFF,#ECF5FF;
133
// 辅助色
14-
$successColor: #67C23A;
15-
$successColor1: #E1F3D8;
16-
$successColor2: #F0F9EB;
17-
18-
$warningColor: #E6A23C;
19-
$warningColor1: #FAECD8;
20-
$warningColor2: #FDF6EC;
21-
22-
$dangerColor: #F56C6C;
23-
$dangerColor1: #FDE2E2;
24-
$dangerColor2: #FEF0F0;
25-
26-
$infoColor: #909399;
27-
$infoColor1: #E9E9EB;
28-
$infoColor2: #F4F4F5;
29-
30-
// 中性色
31-
$fontColor: #303133;
32-
$fontColor1: #606266;
33-
$fontColor2: #909399;
34-
$fontColor3: #C0C4CC;
35-
36-
$borderColor: #DCDFE6;
37-
$borderColor1: #E4E7ED;
38-
$borderColor2: #EBEEF5;
39-
$borderColor3: #F2F6FC;
4+
$successColor: #67C23A,#E1F3D8,#F0F9EB;
5+
$warningColor: #E6A23C,#FAECD8,#FDF6EC;
6+
$dangerColor: #F56C6C,#FDE2E2,#FEF0F0;
7+
$infoColor: #909399,#E9E9EB,#F4F4F5;
8+
// 字体色
9+
$fontColor: #303133,#606266,#909399,#C0C4CC;
10+
// 边框色
11+
$borderColor: #DCDFE6,#E4E7ED,#EBEEF5,#F2F6FC;

‎src/views/components/language/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -80,7 +80,7 @@ export default defineComponent({
8080
.link {
8181
cursor: pointer;
8282
&:hover {
83-
color: $brandColor;
83+
color: nth($brandColor, 1);
8484
}
8585
}
8686
}

‎src/views/components/page/index.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
-->
99
<template>
1010
<el-pagination
11-
class="page"
11+
class="page padding_t-20"
1212
background
1313
layout="total, sizes, prev, pager, next, jumper, ->"
1414

@@ -63,7 +63,6 @@ export default defineComponent({
6363

6464
<style lang="scss" scoped>
6565
.page {
66-
padding: 20px 0 0 0;
6766
text-align: center;
6867
}
6968
</style>

‎src/views/global/401.vue‎

Lines changed: 14 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -7,19 +7,19 @@
77
* @LastEditTime: 2021-04-30 18:35:52
88
-->
99
<template>
10-
<div class="errPage-container">
11-
<el-button icon="el-icon-arrow-left" class="pan-back-btn" @click="back"> 返回 </el-button>
10+
<div class="error-container">
11+
<el-button type="primary" icon="el-icon-arrow-left" @click="back"> 返回 </el-button>
1212
<el-row>
1313
<el-col :span="12">
14-
<h1 class="text-jumbo text-ginormous">Oops!</h1>
14+
<h1 class="font_s-60">Oops!</h1>
1515
<h2>你没有权限去该页面</h2>
16-
<h6>如有不满请联系你领导</h6>
17-
<ul class="list-unstyled">
16+
<h6 class="font_s-18">如有不满请联系你领导</h6>
17+
<ul class="other-go ">
1818
<li>或者你可以去:</li>
19-
<li class="link-type">
19+
<li>
2020
<router-link to="/home"> 回首页 </router-link>
2121
</li>
22-
<li class="link-type">
22+
<li>
2323
<a href="https://gumingchen.cn/">随便看看</a>
2424
</li>
2525
</ul>
@@ -70,36 +70,20 @@ export default defineComponent({
7070
</script>
7171

7272
<style lang="scss" scoped>
73-
.errPage-container {
73+
@import 'Sass/_variable.scss';
74+
.error-container {
75+
margin: 0 auto;
76+
padding-top: 100px;
7477
width: 800px;
7578
max-width: 100%;
76-
margin: 100px auto;
77-
.pan-back-btn {
78-
background: #008489;
79-
color: #fff;
80-
border: none !important;
81-
}
82-
.pan-gif {
83-
margin: 0 auto;
84-
display: block;
85-
}
86-
.pan-img {
87-
display: block;
88-
margin: 0 auto;
89-
width: 100%;
90-
}
91-
.text-jumbo {
92-
font-size: 60px;
93-
font-weight: 700;
94-
color: #484848;
95-
}
96-
.list-unstyled {
79+
.other-go {
9780
font-size: 14px;
9881
li {
9982
padding-bottom: 5px;
83+
cursor: pointer;
10084
}
10185
a {
102-
color: #008489;
86+
color: nth($brandColor, 1);
10387
text-decoration: none;
10488
&:hover {
10589
text-decoration: underline;

0 commit comments

Comments
 (0)