Skip to content

Commit 6531ab3

Browse files
ZYCHOOOZYCHOOO
committed
feat: 调整样式，添加哀悼模式
1 parent 293f323 commit 6531ab3

File tree

19 files changed

+2511
-1643
lines changed

19 files changed

+2511
-1643
lines changed

‎package-lock.json‎

Lines changed: 2295 additions & 1526 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,10 @@
4545
"eslint-plugin-standard": "^4.0.0",
4646
"eslint-plugin-vue": "^7.0.0",
4747
"husky": "^7.0.1",
48-
"node-sass": "^4.12.0",
48+
"node-sass": "^8.0.0",
4949
"normalize.css": "^8.0.1",
5050
"postcss-pxtorem": "^5.1.1",
51+
"sass": "^1.56.1",
5152
"sass-loader": "^8.0.2"
5253
},
5354
"gitHooks": {

‎public/index.html‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
11
<!DOCTYPE html>
22
<html lang="">
3-
<head>
4-
<meta charset="utf-8">
5-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0, maxium-scale=1.0, minimum-scale=1.0, viewport-fit=cover">
7-
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
8-
<title><%= htmlWebpackPlugin.options.title %></title>
9-
<!-- <script>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
7+
<meta name="viewport"
8+
content="width=device-width, initial-scale=1.0, maxium-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
9+
<link rel="icon" href="<%= BASE_URL %>favicon.ico" />
10+
<title><%= htmlWebpackPlugin.options.title %></title>
11+
<!-- <script>
1012
function setRem () {
1113
var width = document.documentElement.clientWidth || document.body.clientWidth
1214
var ratio = width / 375
@@ -16,12 +18,31 @@
1618
setRem()
1719
window.addEventListener('resize', setRem)
1820
</script> -->
19-
</head>
20-
<body>
21-
<noscript>
22-
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
23-
</noscript>
24-
<div id="app"></div>
25-
<!-- built files will be auto injected -->
26-
</body>
27-
</html>
21+
<script>
22+
function getQueryString(queryKey) {
23+
const reg = new RegExp('&{1}' + queryKey + '\\=[a-zA-Z0-9_-]+', 'g')
24+
if (window.location.href.indexOf('?') !== -1) {
25+
const matchResult = window.location.href.replace(/\?/g, '&').match(reg)[0]
26+
return matchResult.substr(matchResult.indexOf('=') + 1)
27+
}
28+
}
29+
function isMournMode() {
30+
if (getQueryString('mourn')) {
31+
document.documentElement.setAttribute('theme', 'mourn')
32+
}
33+
}
34+
isMournMode()
35+
</script>
36+
</head>
37+
38+
<body>
39+
<noscript>
40+
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work
41+
properly without JavaScript enabled. Please enable it to
42+
continue.</strong>
43+
</noscript>
44+
<div id="app"></div>
45+
<!-- built files will be auto injected -->
46+
</body>
47+
48+
</html>

‎src/constant/demoData.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
export const LIST_DATA = [
2+
{ title: '测试标题1', desc: '内容1234512345', color: 'red' },
3+
{ title: '测试标题2', desc: '内容1234512345', color: 'orange' },
4+
{ title: '测试标题3', desc: '内容1234512345', color: 'yellow' },
5+
{ title: '测试标题4', desc: '内容1234512345', color: 'blue' },
6+
{ title: '测试标题5', desc: '内容1234512345', color: 'lightskyblue' },
7+
{ title: '测试标题6', desc: '内容1234512345', color: 'green' },
8+
{ title: '测试标题7', desc: '内容1234512345', color: 'purple' },
9+
{ title: '测试标题8', desc: '内容1234512345', color: 'pink' },
10+
{ title: '测试标题9', desc: '内容1234512345', color: 'coral' },
11+
{ title: '测试标题10', desc: '内容1234512345', color: 'glod' },
12+
{ title: '测试标题11', desc: '内容1234512345', color: 'lavender' },
13+
{ title: '测试标题12', desc: '内容1234512345', color: 'lightsteelblue' },
14+
{ title: '测试标题13', desc: '内容1234512345', color: 'lime' }
15+
]

src/utils/enums.js renamed to src/constant/enums.js

File renamed without changes.

src/utils/httpEnums.js renamed to src/constant/httpEnums.js

File renamed without changes.

‎src/router/permission.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import store from '@/store'
22
import router from '@/router'
3-
import { ROUTE_WHITE_LIST } from '@/utils/enums'
3+
import { ROUTE_WHITE_LIST } from '@/constant/enums'
44

55
router.beforeEach((to, from, next) => {
66
const { name } = to

‎src/styles/index.scss‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,11 @@
11
@import './variables.scss';
2-
@import './iconfont.css';
2+
@import './iconfont.css';
3+
4+
html[theme='mourn'] {
5+
filter: grayscale(100%);
6+
-webkit-filter: grayscale(100%);
7+
-moz-filter: grayscale(100%);
8+
-ms-filter: grayscale(100%);
9+
-o-filter: grayscale(100%);
10+
-webkit-filter: grayscale(1);
11+
}

‎src/styles/mixins.scss‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@
4141
// 多行省略
4242
@mixin multiline-ellipsis($lineNum) {
4343
display: -webkit-box;
44-
overflow : hidden;
44+
overflow: hidden;
4545
text-overflow: ellipsis;
4646
-webkit-line-clamp: $lineNum;
4747
-webkit-box-orient: vertical;
@@ -61,4 +61,13 @@
6161
bottom: 0;
6262
background: $default-bg-color;
6363
overflow-y: auto;
64-
}
64+
}
65+
66+
@mixin mourning-mode {
67+
filter: grayscale(100%);
68+
-webkit-filter: grayscale(100%);
69+
-moz-filter: grayscale(100%);
70+
-ms-filter: grayscale(100%);
71+
-o-filter: grayscale(100%);
72+
-webkit-filter: grayscale(1);
73+
}

‎src/styles/variables.scss‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
1-
$theme-color: #4685FF;
1+
$theme-color: #4685ff;
22

3-
$main-text-color: #3B414F;
4-
$light-text-color: #FFF;
5-
$secondary-text-color: #767982;
3+
$main-text-color: #3b414f;
4+
$light-text-color: #fff;
5+
$secondary-text-color: #bac3dd;
66

7-
$main-bg-color: #FFF;
8-
$default-bg-color: #F6F8FA;
7+
$main-bg-color: #fff;
8+
$default-bg-color: #f6f8fa;
99

10-
$default-border-color: #EEE;
10+
$default-border-color: #eee;

0 commit comments

Comments
 (0)