feat-0330: Initialize the project, waiting to be modified as a graduation project
This commit is contained in:
曙光
commit
ffb7e61cad
3
.browserslistrc
Normal file
3
.browserslistrc
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
5
.editorconfig
Normal file
5
.editorconfig
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
[*.{js,jsx,ts,tsx,vue}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
33
.eslintrc.js
Normal file
33
.eslintrc.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
const IS_PROD = process.env.NODE_ENV === 'production';
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true,
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/essential',
|
||||||
|
// '@vue/standard',
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
parser: 'babel-eslint',
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
semi: ['error', 'always'], // 分号
|
||||||
|
camelcase: 'off',
|
||||||
|
'no-new': 'off',
|
||||||
|
'vue/no-unused-components': 'warn',
|
||||||
|
'no-console': IS_PROD ? 'warn' : 'off',
|
||||||
|
'no-debugger': IS_PROD ? 'error' : 'off',
|
||||||
|
'no-unreachable': IS_PROD ? 'error' : 'warn', // 提前return
|
||||||
|
'prefer-promise-reject-errors': 'off',
|
||||||
|
'standard/no-callback-literal': 'off',
|
||||||
|
'no-unused-vars': IS_PROD ? 'error' : 'warn',
|
||||||
|
'comma-dangle': ['error', 'always-multiline'], // 末尾逗号
|
||||||
|
'space-before-function-paren': ['error', {
|
||||||
|
anonymous: 'never',
|
||||||
|
named: 'never',
|
||||||
|
asyncArrow: 'always', // async箭头函数
|
||||||
|
}],
|
||||||
|
},
|
||||||
|
};
|
||||||
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset',
|
||||||
|
],
|
||||||
|
};
|
||||||
18
jsconfig.json
Normal file
18
jsconfig.json
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"target": "ES6",
|
||||||
|
"allowSyntheticDefaultImports": true
|
||||||
|
},
|
||||||
|
"include": [
|
||||||
|
"src/**/*"
|
||||||
|
],
|
||||||
|
"exclude": [
|
||||||
|
"node_modules"
|
||||||
|
]
|
||||||
|
}
|
||||||
17741
package-lock.json
generated
Normal file
17741
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
59
package.json
Normal file
59
package.json
Normal file
@ -0,0 +1,59 @@
|
|||||||
|
{
|
||||||
|
"name": "competition-management-system",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint",
|
||||||
|
"inspect": "vue-cli-service inspect --mode production"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@ant-design-vue/pro-layout": "^1.0.8",
|
||||||
|
"@tinymce/tinymce-vue": "^3.2.6",
|
||||||
|
"animate.css": "^4.1.1",
|
||||||
|
"ant-design-vue": "^1.7.4",
|
||||||
|
"axios": "^0.21.1",
|
||||||
|
"core-js": "^3.10.0",
|
||||||
|
"dayjs": "^1.10.4",
|
||||||
|
"element-ui": "^2.15.14",
|
||||||
|
"file-saver": "^2.0.5",
|
||||||
|
"js-cookie": "^2.2.1",
|
||||||
|
"lodash-es": "^4.17.21",
|
||||||
|
"markdown-it": "^14.1.0",
|
||||||
|
"nprogress": "^0.2.0",
|
||||||
|
"qiniu-js": "^3.1.2",
|
||||||
|
"tinymce": "^5.6.2",
|
||||||
|
"vue": "^2.6.12",
|
||||||
|
"vue-animate-number": "^0.4.2",
|
||||||
|
"vue-meta": "^2.4.0",
|
||||||
|
"vue-router": "^3.5.1",
|
||||||
|
"vuedraggable": "^2.24.3",
|
||||||
|
"vuex": "^3.6.2",
|
||||||
|
"webpack-theme-color-replacer": "^1.3.20",
|
||||||
|
"xlsx": "^0.16.9"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^4.5.12",
|
||||||
|
"@vue/cli-plugin-eslint": "^4.5.12",
|
||||||
|
"@vue/cli-plugin-router": "^4.5.12",
|
||||||
|
"@vue/cli-plugin-vuex": "^4.5.12",
|
||||||
|
"@vue/cli-service": "^4.5.12",
|
||||||
|
"@vue/eslint-config-standard": "^5.1.2",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-import": "^2.22.1",
|
||||||
|
"eslint-plugin-node": "^11.1.0",
|
||||||
|
"eslint-plugin-promise": "^4.3.1",
|
||||||
|
"eslint-plugin-standard": "^4.1.0",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"less": "^4.1.1",
|
||||||
|
"less-loader": "^6.2.0",
|
||||||
|
"style-resources-loader": "^1.3.2",
|
||||||
|
"stylus": "^0.54.8",
|
||||||
|
"stylus-loader": "^3.0.2",
|
||||||
|
"vue-cli-plugin-pug": "~2.0.0",
|
||||||
|
"vue-cli-plugin-style-resources-loader": "^0.1.5",
|
||||||
|
"vue-template-compiler": "^2.6.12"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
public/css/base.css
Normal file
3
public/css/base.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
/* .fl{float:left}.fr{float:right}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}@font-face{font-family:Rubik;src:url("../fonts/Rubik-Light.ttf");src:url("../fonts/rubik-regular-webfont.ttf");src:url("../fonts/Rubik-Medium.ttf")}@font-face{font-family:DigifaceWide;src:url("../fonts/digifaw.ttf")}*{-webkit-box-sizing:border-box;box-sizing:border-box}b{font-weight:normal}html,body{width:100%;height:100%;color:#fff}@media screen and (max-width: 3850px){html,body{font-size:64px}}@media screen and (max-width: 1930px){html,body{font-size:32px}}ul,li,dl,dt,dd{padding:0;margin:0;list-style:none}h1,h2,h3,h4,div{padding:0;margin:0;font-weight:normal}h3{font-size:.5625em;color:#fff}p{margin:0;padding:0}body{position:relative;padding:0;margin:0;font-family:MicrosoftYaHei;overflow:hidden}body:before{position:absolute;top:7.6%;right:0;width:5.2%;height:12%;background:url(../img/circle.png) no-repeat;background-size:100%;content:""}.root-wrap{height:100%;padding:0 1.5%;background:url("../img/bg.png") no-repeat center top;background-size:100% 100%}header{position:relative;width:100%;height:10%;min-height:90px;text-align:center;padding-top:1%;margin-bottom:1%}header>img{position:absolute;top:10%;left:50%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}header .gifImg{width:100%;height:50%;position:absolute;top:40%;min-height:50px;overflow:hidden;text-align:center}header .gifImg:after{content:'';top:40%;left:50%;-webkit-transform:translate(-50%, 20%);transform:translate(-50%, 20%);display:block;position:absolute;width:36.5%;min-width:700px;height:100%;background:url(../img/header.gif) no-repeat center center;background-size:100%}header .gifImg .month-tip{margin-top:3%;font-size:.75em;color:#fff}header .title_img{text-align:left}header .title_img img{width:19.5%}header h2{position:absolute;top:33%;font-size:.75em}header h2{left:0}header:before{position:absolute;bottom:18%;left:0;width:100%;height:18%;min-height:18px;content:""}.main{width:100%;height:84%}.main .aside-left{position:relative;width:22%;height:100%}.main .aside-left h3{padding-top:6.5%;padding-left:13%}.main .aside-right{position:relative;width:22%;height:100%}.left-top{position:relative;opacity:.9;background:rgba(18,22,64,0.5)}.left-top:after{position:absolute;right:0;bottom:-10.4%;width:5%;min-width:20px;height:13%;min-height:50px;background:url("../img/bor1_1_xie.png") no-repeat;background-size:100% 100%;content:""}.left-top:before{position:absolute;top:0;left:0;width:100%;height:106%;background:url("../img/bor1_1.png") no-repeat;background-size:100% 100%;z-index:-1;content:""}.left-bottom{position:absolute;bottom:0;opacity:.9}.left-bottom:before{content:'';position:absolute;top:5.6%;right:-2%;z-index:100;width:15%;height:7%;background:url("../img/bor1_2_square.png") no-repeat;background-size:100%;z-index:10}.left-bottom:after{position:absolute;top:0;left:0;width:100%;height:104%;background:url("../img/bor1_2.png") no-repeat;background-size:100% 97%;z-index:-1;content:""}.middle-map{position:relative;width:55%;height:100%;margin:0 .5%}.middle-map h3{height:9%}.middle-map .map-wrap{position:relative;opacity:.9;height:100%;border-top:4px solid #121e52;border-bottom:4px solid #10144b;background:rgba(18,22,64,0.5);background-size:100% 100%}.middle-map .map-wrap h3{position:absolute;top:4%;left:50%;width:100%;padding:0 3%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0)}.middle-map .map-wrap h3 dl{width:20%;padding:0.4% 0.2% 0 0.4%;border-left:2px solid #00bbec}.middle-map .map-wrap h3 dl dt{font-size:.78125em;color:#00bbec;margin-bottom:5%}.middle-map .map-wrap h3 dl dd{font-family:DigifaceWide;font-size:1.25em;color:#fff}.middle-map .map-wrap .title-map{position:absolute;left:50%;top:20%;-webkit-transform:translate(-50%, 0);transform:translate(-50%, 0);font-size:.5625em}.middle-map .map-wrap .unit-wan:after,.middle-map .map-wrap .unit-wanyuan:after,.middle-map .map-wrap .unit-number:after,.middle-map .map-wrap .unit-pc:after,.middle-map .map-wrap .unit-type:after{display:inline-block;margin-left:4%;font-size:12px;color:#fff}.middle-map .map-wrap .unit-wan:after{content:'万'}.middle-map .map-wrap .unit-wanyuan:after{content:'万元'}.middle-map .map-wrap .unit-number:after{content:'条'}.middle-map .map-wrap .unit-type:after{content:'种'}.middle-map .map-wrap .unit-pc:after{content:'批次'}.middle-map .map-wrap #map{height:100%}.right-top{position:relative;background:url("../img/bg1_1.png") no-repeat top}.right-top .con{height:42%;margin:0 5%;font-size:.4375em;font-size:.4375em;background:#081d5d}
|
||||||
|
|
||||||
|
# sourceMappingURL=base.css.map */
|
||||||
7
public/css/base.css.map
Normal file
7
public/css/base.css.map
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "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",
|
||||||
|
"sources": ["mixin/_clearfix.scss","base.scss","mixin/_media.scss"],
|
||||||
|
"names": [],
|
||||||
|
"file": "base.css"
|
||||||
|
}
|
||||||
369
public/css/base.scss
Normal file
369
public/css/base.scss
Normal file
@ -0,0 +1,369 @@
|
|||||||
|
/* 引入常用样式 */
|
||||||
|
@import "mixin/_clearfix.scss";
|
||||||
|
@import "func/_px2em.scss";
|
||||||
|
@import "func/_px2percent.scss";
|
||||||
|
@import "mixin/_media.scss";
|
||||||
|
/* 字体引入 */
|
||||||
|
@font-face {
|
||||||
|
font-family: Rubik;
|
||||||
|
src: url("../fonts/Rubik-Light.ttf");
|
||||||
|
src: url("../fonts/rubik-regular-webfont.ttf");
|
||||||
|
src: url("../fonts/Rubik-Medium.ttf");
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: DigifaceWide;
|
||||||
|
src: url("../fonts/digifaw.ttf");
|
||||||
|
}
|
||||||
|
/* 初始化 start*/
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 声明字体变量 */
|
||||||
|
$fs_3840: 64px;
|
||||||
|
$fs_1920: 32px;
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
@include media3840 {
|
||||||
|
font-size: $fs_3840;
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
font-size: $fs_1920;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
li,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
div {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-size: px2em(36,64);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/* 初始化 end */
|
||||||
|
|
||||||
|
/* 公共部分样式 start*/
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 7.6%;
|
||||||
|
right: 0;
|
||||||
|
width: 5.2%;
|
||||||
|
height: 12%;
|
||||||
|
background: url(../img/circle.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 最外层盒子样式 */
|
||||||
|
.root-wrap {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 1.5%;
|
||||||
|
background: url("../img/bg.png") no-repeat center top;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
/* 头部样式 */
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
min-height: 90px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 1%;
|
||||||
|
margin-bottom: 1%;
|
||||||
|
>img{
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%,0);
|
||||||
|
}
|
||||||
|
.gifImg {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
min-height: 50px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center;
|
||||||
|
&:after{
|
||||||
|
content: '';
|
||||||
|
top: 40%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 20%);
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 36.5%;
|
||||||
|
min-width: 700px;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../img/header.gif) no-repeat center center;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
.month-tip{
|
||||||
|
margin-top: 3%;
|
||||||
|
font-size: px2em(24,32);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title_img {
|
||||||
|
text-align: left;
|
||||||
|
// margin-top: -1.5%;
|
||||||
|
img {
|
||||||
|
width: 19.5%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
h2{
|
||||||
|
position: absolute;
|
||||||
|
top: 33%;
|
||||||
|
font-size: px2em(48, 64);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 18%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 18%;
|
||||||
|
min-height: 18px;
|
||||||
|
// background: url("../img/header-line.png") no-repeat;
|
||||||
|
// background-size: 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 主体内容样式 */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%;
|
||||||
|
|
||||||
|
.aside-left {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%;
|
||||||
|
h3{
|
||||||
|
padding-top: 6.5%;
|
||||||
|
padding-left: 13%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.aside-right {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 左侧边框样式 start */
|
||||||
|
.left-top {
|
||||||
|
position: relative;
|
||||||
|
opacity: .9;
|
||||||
|
background: rgba(#121640,.5);
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 5%;
|
||||||
|
min-width: 20px;
|
||||||
|
height: 13%;
|
||||||
|
min-height: 50px;
|
||||||
|
background: url("../img/bor1_1_xie.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 106%;
|
||||||
|
background: url("../img/bor1_1.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
z-index: -1;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: .9;
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 5.6%;
|
||||||
|
right: -2%;
|
||||||
|
z-index: 100;
|
||||||
|
width: 15%;
|
||||||
|
height: 7%;
|
||||||
|
background: url('../img/bor1_2_square.png') no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 104%;
|
||||||
|
background: url("../img/bor1_2.png") no-repeat;
|
||||||
|
background-size: 100% 97%;
|
||||||
|
z-index: -1;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 左侧边框样式 end*/
|
||||||
|
|
||||||
|
/* 中间地图样式 start */
|
||||||
|
.middle-map {
|
||||||
|
position: relative;
|
||||||
|
width: 55%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 .5%;
|
||||||
|
h3 {
|
||||||
|
height: 9%;
|
||||||
|
}
|
||||||
|
.map-wrap {
|
||||||
|
position: relative;
|
||||||
|
opacity: .9;
|
||||||
|
height: 100%;
|
||||||
|
border-top: 4px solid #121e52;
|
||||||
|
border-bottom: 4px solid #10144b;
|
||||||
|
background: rgba(#121640,.5);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
/* 数字展示牌 start */
|
||||||
|
h3 {
|
||||||
|
position: absolute;
|
||||||
|
top: 4%;
|
||||||
|
left: 50%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 3%;
|
||||||
|
-webkit-transform: translate(-50%, 0);
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
|
||||||
|
dl {
|
||||||
|
width: 20%;
|
||||||
|
padding: 0.4% 0.2% 0 0.4%;
|
||||||
|
border-left: 2px solid #00bbec;
|
||||||
|
|
||||||
|
dt {
|
||||||
|
font-size: px2em(50,64);
|
||||||
|
color: #00bbec;
|
||||||
|
margin-bottom: 5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
dd {
|
||||||
|
font-family: DigifaceWide;
|
||||||
|
font-size: px2em(80,64);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title-map{
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 20%;
|
||||||
|
transform: translate(-50%,0);
|
||||||
|
font-size: px2em(36, 64);
|
||||||
|
}
|
||||||
|
.unit-wan,
|
||||||
|
.unit-wanyuan,
|
||||||
|
.unit-number,
|
||||||
|
.unit-pc,
|
||||||
|
.unit-type{
|
||||||
|
&:after {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 4%;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.unit-wan{
|
||||||
|
&:after{
|
||||||
|
content: '万';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.unit-wanyuan{
|
||||||
|
&:after{
|
||||||
|
content: '万元';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.unit-number{
|
||||||
|
&:after{
|
||||||
|
content: '条';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.unit-type{
|
||||||
|
&:after{
|
||||||
|
content: '种';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.unit-pc{
|
||||||
|
&:after{
|
||||||
|
content: '批次';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 数字展示牌 end */
|
||||||
|
#map {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 中间地图样式 end */
|
||||||
|
|
||||||
|
/* 右侧边框样式 start */
|
||||||
|
.right-top{
|
||||||
|
position: relative;
|
||||||
|
background: url("../img/bg1_1.png") no-repeat top;
|
||||||
|
|
||||||
|
.con{
|
||||||
|
height: 42%;
|
||||||
|
margin: 0 5%;
|
||||||
|
font-size: px2em(28,64);
|
||||||
|
font-size: .4375em;
|
||||||
|
background: #081d5d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 右侧边框样式 end */
|
||||||
|
|
||||||
|
/* 公共部分样式 end*/
|
||||||
|
|
||||||
3
public/css/baseFour.css
Normal file
3
public/css/baseFour.css
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
.fl{float:left}.fr{float:right}.clearfix:before,.clearfix:after{display:table;content:""}.clearfix:after{clear:both}@font-face{font-family:Rubik;font-family:DigifaceWide;src:url("../fonts/Rubik-Light.ttf");src:url("../fonts/digifaw.ttf")}*{-webkit-box-sizing:border-box;box-sizing:border-box}b{font-weight:normal}html,body{width:100%;height:100%;color:#fff}@media screen and (max-width: 3850px){html,body{font-size:64px}}@media screen and (max-width: 1930px){html,body{font-size:32px}}ul,li,dl,dt,dd{padding:0;margin:0;list-style:none}h1,h2,h3,h4,div{padding:0;margin:0;font-weight:normal}h3{font-size:.5625em;color:#fff}p{margin:0;padding:0}body{position:relative;padding:0;margin:0;font-family:MicrosoftYaHei;overflow:hidden}body:before{position:absolute;top:7.6%;right:0;width:5.2%;height:12%;background:url(../img/circle.png) no-repeat;background-size:100%;content:""}.root-wrap{height:100%;padding:0 1.5%;background:url("../img/bg.png") no-repeat center top;background-size:100% 100%}header{position:relative;width:100%;height:10%;min-height:90px;text-align:center;padding-top:1%;margin-bottom:1%}header img{width:19.5%}header h2,header .month-tip{position:absolute;top:33%;font-size:.75em}header h2{left:0}header .month-tip{right:0}header:before{position:absolute;bottom:0;left:0;width:100%;height:18%;min-height:18px;background:url("../img/header-line.png") no-repeat;background-size:100%;content:""}header:after{display:block;position:absolute;bottom:0;left:50%;width:36.5%;min-width:700px;height:70%;min-height:70px;background:url(../img/header.gif) no-repeat center center;background-size:100%;-webkit-transform:translate(-50%, 20%);transform:translate(-50%, 20%);content:""}.main{width:100%;height:84%}.main .aside-left{position:relative;width:22%;height:100%}.main .aside-left h3{padding-top:6.5%;padding-left:7%;padding-bottom:3%}.main .aside-right{position:relative;width:22%;height:100%}.left-top{position:relative;opacity:.9;background:rgba(18,22,64,0.5)}.left-bottom{position:absolute;bottom:0;opacity:.9}.left-bottom:before{content:'';position:absolute;top:6%;right:-2%;z-index:100;width:15%;height:7%;background:url("../img/bor1_2_square.png") no-repeat;background-size:100%;z-index:10}.left-bottom:after{position:absolute;top:0;left:0;width:100%;height:104%;background:url("../img/bor1_2.png") no-repeat;background-size:100% 97%;content:""}.right-top{position:relative;background:url("../img/bg1_1.png") no-repeat top}.right-top:after{position:absolute;top:0;width:100%;height:100%;background:url("../img/bor1_3.png") no-repeat;background-size:100% 100%;content:""}.right-top .con{height:42%;margin:0 5%;font-size:.4375em;font-size:.4375em;background:#081d5d}
|
||||||
|
|
||||||
|
/*# sourceMappingURL=baseFour.css.map */
|
||||||
7
public/css/baseFour.css.map
Normal file
7
public/css/baseFour.css.map
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"version": 3,
|
||||||
|
"mappings": "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",
|
||||||
|
"sources": ["mixin/_clearfix.scss","baseFour.scss","mixin/_media.scss"],
|
||||||
|
"names": [],
|
||||||
|
"file": "baseFour.css"
|
||||||
|
}
|
||||||
269
public/css/baseFour.scss
Normal file
269
public/css/baseFour.scss
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
/* 引入常用样式 */
|
||||||
|
@import "mixin/_clearfix.scss";
|
||||||
|
@import "func/_px2em.scss";
|
||||||
|
@import "func/_px2percent.scss";
|
||||||
|
@import "mixin/_media.scss";
|
||||||
|
/* 字体引入 */
|
||||||
|
@font-face {
|
||||||
|
font-family: Rubik;
|
||||||
|
font-family: DigifaceWide;
|
||||||
|
|
||||||
|
src: url("../fonts/Rubik-Light.ttf");
|
||||||
|
src: url("../fonts/digifaw.ttf");
|
||||||
|
}
|
||||||
|
/* 初始化 start*/
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 声明字体变量 */
|
||||||
|
$fs_3840: 64px;
|
||||||
|
$fs_1920: 32px;
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff;
|
||||||
|
@include media3840 {
|
||||||
|
font-size: $fs_3840;
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
font-size: $fs_1920;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,
|
||||||
|
li,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
div {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
}
|
||||||
|
h3{
|
||||||
|
font-size: px2em(36,64);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
p{
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
/* 初始化 end */
|
||||||
|
|
||||||
|
/* 公共部分样式 start*/
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 7.6%;
|
||||||
|
right: 0;
|
||||||
|
width: 5.2%;
|
||||||
|
height: 12%;
|
||||||
|
background: url(../img/circle.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 最外层盒子样式 */
|
||||||
|
.root-wrap {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 1.5%;
|
||||||
|
background: url("../img/bg.png") no-repeat center top;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
/* 头部样式 */
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
min-height: 90px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 1%;
|
||||||
|
margin-bottom: 1%;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 19.5%;
|
||||||
|
}
|
||||||
|
|
||||||
|
h2,
|
||||||
|
.month-tip {
|
||||||
|
position: absolute;
|
||||||
|
top: 33%;
|
||||||
|
font-size: px2em(48, 64);
|
||||||
|
}
|
||||||
|
|
||||||
|
h2 {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-tip {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 18%;
|
||||||
|
min-height: 18px;
|
||||||
|
background: url("../img/header-line.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 36.5%;
|
||||||
|
min-width: 700px;
|
||||||
|
height: 70%;
|
||||||
|
min-height: 70px;
|
||||||
|
background: url(../img/header.gif) no-repeat center center;
|
||||||
|
background-size: 100%;
|
||||||
|
transform: translate(-50%, 20%);
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 主体内容样式 */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%;
|
||||||
|
|
||||||
|
.aside-left {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%;
|
||||||
|
h3{
|
||||||
|
padding-top: 6.5%;
|
||||||
|
padding-left: 7%;
|
||||||
|
padding-bottom: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.aside-right {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 左侧边框样式 start */
|
||||||
|
.left-top {
|
||||||
|
position: relative;
|
||||||
|
opacity: .9;
|
||||||
|
background: rgba(#121640,.5);
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
// position: absolute;
|
||||||
|
// right: 0;
|
||||||
|
// bottom: -10.4%;
|
||||||
|
// width: 5%;
|
||||||
|
// min-width: 20px;
|
||||||
|
// height: 13%;
|
||||||
|
// min-height: 50px;
|
||||||
|
// background: url("../img/bor1_1_xie.png") no-repeat;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
|
||||||
|
// content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
// position: absolute;
|
||||||
|
// top: 0;
|
||||||
|
// left: 0;
|
||||||
|
// width: 100%;
|
||||||
|
// height: 106%;
|
||||||
|
// background: url("../img/bor1_1.png") no-repeat;
|
||||||
|
// background-size: 100% 100%;
|
||||||
|
|
||||||
|
// content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.left-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: .9;
|
||||||
|
&:before{
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 6%;
|
||||||
|
right: -2%;
|
||||||
|
z-index: 100;
|
||||||
|
width: 15%;
|
||||||
|
height: 7%;
|
||||||
|
background: url('../img/bor1_2_square.png') no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 104%;
|
||||||
|
background: url("../img/bor1_2.png") no-repeat;
|
||||||
|
background-size: 100% 97%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 左侧边框样式 end*/
|
||||||
|
|
||||||
|
/* 中间地图样式 start */
|
||||||
|
|
||||||
|
/* 中间地图样式 end */
|
||||||
|
|
||||||
|
/* 右侧边框样式 start */
|
||||||
|
.right-top{
|
||||||
|
position: relative;
|
||||||
|
background: url("../img/bg1_1.png") no-repeat top;
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor1_3.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.con{
|
||||||
|
height: 42%;
|
||||||
|
margin: 0 5%;
|
||||||
|
font-size: px2em(28,64);
|
||||||
|
font-size: .4375em;
|
||||||
|
background: #081d5d;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 右侧边框样式 end */
|
||||||
|
|
||||||
|
/* 公共部分样式 end*/
|
||||||
|
|
||||||
3
public/css/drop_down.css
Normal file
3
public/css/drop_down.css
Normal file
File diff suppressed because one or more lines are too long
7
public/css/drop_down.css.map
Normal file
7
public/css/drop_down.css.map
Normal file
File diff suppressed because one or more lines are too long
65
public/css/drop_down.scss
Normal file
65
public/css/drop_down.scss
Normal file
@ -0,0 +1,65 @@
|
|||||||
|
@import "base.scss";
|
||||||
|
.nav {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
z-index: 20000;
|
||||||
|
width: 30%;
|
||||||
|
|
||||||
|
height: 10%;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
ul {
|
||||||
|
list-style: none;
|
||||||
|
min-width: 440px;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
ul a {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4.5;
|
||||||
|
color: white;
|
||||||
|
/* background-color: #2f3e45; */
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-down {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-down-content li {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
width: 20%;
|
||||||
|
min-width: 82px;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-down {
|
||||||
|
/*position: relative;*/
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-down-content {
|
||||||
|
padding: 0;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 37%;
|
||||||
|
right: 0;
|
||||||
|
/*position: absolute;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: .5625em;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.drop-down-content li:hover a {
|
||||||
|
color: bisque
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav .drop-down:hover .drop-down-content {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
923
public/css/f.css
Normal file
923
public/css/f.css
Normal file
@ -0,0 +1,923 @@
|
|||||||
|
@charset "UTF-8";
|
||||||
|
/* 引入常用样式 */
|
||||||
|
/* 清浮动模块 */
|
||||||
|
.fl {
|
||||||
|
float: left; }
|
||||||
|
|
||||||
|
.fr {
|
||||||
|
float: right; }
|
||||||
|
|
||||||
|
.clearfix:before, .clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: ""; }
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [px转百分比]
|
||||||
|
* @param {[number]} $size [变量值]
|
||||||
|
* @param {[number]} $base [基准值]
|
||||||
|
* @return {[number]} [返回em]
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* [px转百分比]
|
||||||
|
* @param {[number]} $size [自身宽度的大小]
|
||||||
|
* @param {[number]} $scale [包裹盒子的大小]
|
||||||
|
* @return {[number]} [返回百分比数值]
|
||||||
|
*/
|
||||||
|
/* 字体引入 */
|
||||||
|
@font-face {
|
||||||
|
font-family: Rubik;
|
||||||
|
font-family: DigifaceWide;
|
||||||
|
src: url("../fonts/Rubik-Light.ttf");
|
||||||
|
src: url("../fonts/digifaw.ttf"); }
|
||||||
|
/* 初始化 start*/
|
||||||
|
* {
|
||||||
|
box-sizing: border-box; }
|
||||||
|
|
||||||
|
b {
|
||||||
|
font-weight: normal; }
|
||||||
|
|
||||||
|
/* 声明字体变量 */
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff; }
|
||||||
|
@media screen and (max-width: 3850px) {
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-size: 64px; } }
|
||||||
|
@media screen and (max-width: 1930px) {
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-size: 32px; } }
|
||||||
|
|
||||||
|
ul,
|
||||||
|
li,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none; }
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
div {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal; }
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 0.5625em;
|
||||||
|
color: #fff; }
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
/* 初始化 end */
|
||||||
|
/* 公共部分样式 start*/
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
overflow: hidden; }
|
||||||
|
body:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 7.6%;
|
||||||
|
right: 0;
|
||||||
|
width: 5.2%;
|
||||||
|
height: 12%;
|
||||||
|
background: url(../img/circle.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
content: ""; }
|
||||||
|
|
||||||
|
/* 最外层盒子样式 */
|
||||||
|
.root-wrap {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 1.5%;
|
||||||
|
background: url("../img/bg.png") no-repeat center top;
|
||||||
|
background-size: 100% 100%; }
|
||||||
|
|
||||||
|
/* 头部样式 */
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
min-height: 90px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 1%;
|
||||||
|
margin-bottom: 1%; }
|
||||||
|
header img {
|
||||||
|
width: 19.5%; }
|
||||||
|
header h2,
|
||||||
|
header .month-tip {
|
||||||
|
position: absolute;
|
||||||
|
top: 33%;
|
||||||
|
font-size: 0.75em; }
|
||||||
|
header h2 {
|
||||||
|
left: 0; }
|
||||||
|
header .month-tip {
|
||||||
|
right: 0; }
|
||||||
|
header:before {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 18%;
|
||||||
|
min-height: 18px;
|
||||||
|
background: url("../img/header-line.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
content: ""; }
|
||||||
|
header:after {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
width: 36.5%;
|
||||||
|
min-width: 700px;
|
||||||
|
height: 70%;
|
||||||
|
min-height: 70px;
|
||||||
|
background: url(../img/header.gif) no-repeat center center;
|
||||||
|
background-size: 100%;
|
||||||
|
transform: translate(-50%, 20%);
|
||||||
|
content: ""; }
|
||||||
|
|
||||||
|
/* 主体内容样式 */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%; }
|
||||||
|
.main .aside-left {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%; }
|
||||||
|
.main .aside-left h3 {
|
||||||
|
padding-top: 6.5%;
|
||||||
|
padding-left: 7%;
|
||||||
|
padding-bottom: 3%; }
|
||||||
|
.main .aside-right {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%; }
|
||||||
|
|
||||||
|
/* 左侧边框样式 start */
|
||||||
|
.left-top {
|
||||||
|
position: relative;
|
||||||
|
opacity: .9;
|
||||||
|
background: rgba(18, 22, 64, 0.5); }
|
||||||
|
|
||||||
|
.left-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: .9; }
|
||||||
|
.left-bottom:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 6%;
|
||||||
|
right: -2%;
|
||||||
|
z-index: 100;
|
||||||
|
width: 15%;
|
||||||
|
height: 7%;
|
||||||
|
background: url("../img/bor1_2_square.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
z-index: 10; }
|
||||||
|
.left-bottom:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 104%;
|
||||||
|
background: url("../img/bor1_2.png") no-repeat;
|
||||||
|
background-size: 100% 97%;
|
||||||
|
content: ""; }
|
||||||
|
|
||||||
|
/* 左侧边框样式 end*/
|
||||||
|
/* 中间地图样式 start */
|
||||||
|
/* 中间地图样式 end */
|
||||||
|
/* 右侧边框样式 start */
|
||||||
|
.right-top {
|
||||||
|
position: relative;
|
||||||
|
background: url("../img/bg1_1.png") no-repeat top; }
|
||||||
|
.right-top:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor1_3.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ""; }
|
||||||
|
.right-top .con {
|
||||||
|
height: 42%;
|
||||||
|
margin: 0 5%;
|
||||||
|
font-size: 0.4375em;
|
||||||
|
font-size: .4375em;
|
||||||
|
background: #081d5d; }
|
||||||
|
|
||||||
|
/* 右侧边框样式 end */
|
||||||
|
/* 公共部分样式 end*/
|
||||||
|
/**
|
||||||
|
* [css3过渡动画]
|
||||||
|
* @param {[string]} $el [eg：'.pressRotate']
|
||||||
|
*/
|
||||||
|
/* 引入常用样式 */
|
||||||
|
/* 清浮动模块 */
|
||||||
|
.fl {
|
||||||
|
float: left; }
|
||||||
|
|
||||||
|
.fr {
|
||||||
|
float: right; }
|
||||||
|
|
||||||
|
.clearfix:before, .clearfix:after {
|
||||||
|
display: table;
|
||||||
|
content: ""; }
|
||||||
|
.clearfix:after {
|
||||||
|
clear: both; }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [px转百分比]
|
||||||
|
* @param {[number]} $size [变量值]
|
||||||
|
* @param {[number]} $base [基准值]
|
||||||
|
* @return {[number]} [返回em]
|
||||||
|
*/
|
||||||
|
/**
|
||||||
|
* [px转百分比]
|
||||||
|
* @param {[number]} $size [自身宽度的大小]
|
||||||
|
* @param {[number]} $scale [包裹盒子的大小]
|
||||||
|
* @return {[number]} [返回百分比数值]
|
||||||
|
*/
|
||||||
|
/* 字体引入 */
|
||||||
|
@font-face {
|
||||||
|
font-family: Rubik;
|
||||||
|
src: url("../fonts/Rubik-Light.ttf");
|
||||||
|
src: url("../fonts/rubik-regular-webfont.ttf");
|
||||||
|
src: url("../fonts/Rubik-Medium.ttf"); }
|
||||||
|
@font-face {
|
||||||
|
font-family: DigifaceWide;
|
||||||
|
src: url("../fonts/digifaw.ttf"); }
|
||||||
|
/* 初始化 start*/
|
||||||
|
* {
|
||||||
|
box-sizing: border-box; }
|
||||||
|
|
||||||
|
b {
|
||||||
|
font-weight: normal; }
|
||||||
|
|
||||||
|
/* 声明字体变量 */
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
color: #fff; }
|
||||||
|
@media screen and (max-width: 3850px) {
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-size: 64px; } }
|
||||||
|
@media screen and (max-width: 1930px) {
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
font-size: 32px; } }
|
||||||
|
|
||||||
|
ul,
|
||||||
|
li,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
list-style: none; }
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
div {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal; }
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 0.5625em;
|
||||||
|
color: #fff; }
|
||||||
|
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
/* 初始化 end */
|
||||||
|
/* 公共部分样式 start*/
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
overflow: hidden; }
|
||||||
|
body:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 7.6%;
|
||||||
|
right: 0;
|
||||||
|
width: 5.2%;
|
||||||
|
height: 12%;
|
||||||
|
background: url(../img/circle.png) no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
content: ""; }
|
||||||
|
|
||||||
|
/* 最外层盒子样式 */
|
||||||
|
.root-wrap {
|
||||||
|
height: 100%;
|
||||||
|
padding: 0 1.5%;
|
||||||
|
background: url("../img/bg.png") no-repeat center top;
|
||||||
|
background-size: 100% 100%; }
|
||||||
|
|
||||||
|
/* 头部样式 */
|
||||||
|
header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 10%;
|
||||||
|
min-height: 90px;
|
||||||
|
text-align: center;
|
||||||
|
padding-top: 1%;
|
||||||
|
margin-bottom: 1%; }
|
||||||
|
header > img {
|
||||||
|
position: absolute;
|
||||||
|
top: 10%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 0); }
|
||||||
|
header .gifImg {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 40%;
|
||||||
|
min-height: 50px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-align: center; }
|
||||||
|
header .gifImg:after {
|
||||||
|
content: '';
|
||||||
|
top: 40%;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%, 20%);
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 36.5%;
|
||||||
|
min-width: 700px;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../img/header.gif) no-repeat center center;
|
||||||
|
background-size: 100%; }
|
||||||
|
header .gifImg .month-tip {
|
||||||
|
margin-top: 3%;
|
||||||
|
font-size: 0.75em;
|
||||||
|
color: #fff; }
|
||||||
|
header .title_img {
|
||||||
|
text-align: left; }
|
||||||
|
header .title_img img {
|
||||||
|
width: 19.5%; }
|
||||||
|
header h2 {
|
||||||
|
position: absolute;
|
||||||
|
top: 33%;
|
||||||
|
font-size: 0.75em; }
|
||||||
|
header h2 {
|
||||||
|
left: 0; }
|
||||||
|
header:before {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 18%;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 18%;
|
||||||
|
min-height: 18px;
|
||||||
|
content: ""; }
|
||||||
|
|
||||||
|
/* 主体内容样式 */
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%; }
|
||||||
|
.main .aside-left {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%; }
|
||||||
|
.main .aside-left h3 {
|
||||||
|
padding-top: 6.5%;
|
||||||
|
padding-left: 13%; }
|
||||||
|
.main .aside-right {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%; }
|
||||||
|
|
||||||
|
/* 左侧边框样式 start */
|
||||||
|
.left-top {
|
||||||
|
position: relative;
|
||||||
|
opacity: .9;
|
||||||
|
background: rgba(18, 22, 64, 0.5); }
|
||||||
|
.left-top:after {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 5%;
|
||||||
|
min-width: 20px;
|
||||||
|
height: 13%;
|
||||||
|
min-height: 50px;
|
||||||
|
background: url("../img/bor1_1_xie.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ""; }
|
||||||
|
.left-top:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 106%;
|
||||||
|
background: url("../img/bor1_1.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
z-index: -1;
|
||||||
|
content: ""; }
|
||||||
|
|
||||||
|
.left-bottom {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
opacity: .9; }
|
||||||
|
.left-bottom:before {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
top: 5.6%;
|
||||||
|
right: -2%;
|
||||||
|
z-index: 100;
|
||||||
|
width: 15%;
|
||||||
|
height: 7%;
|
||||||
|
background: url("../img/bor1_2_square.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
z-index: 10; }
|
||||||
|
.left-bottom:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 104%;
|
||||||
|
background: url("../img/bor1_2.png") no-repeat;
|
||||||
|
background-size: 100% 97%;
|
||||||
|
z-index: -1;
|
||||||
|
content: ""; }
|
||||||
|
|
||||||
|
/* 左侧边框样式 end*/
|
||||||
|
/* 中间地图样式 start */
|
||||||
|
.middle-map {
|
||||||
|
position: relative;
|
||||||
|
width: 55%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 .5%; }
|
||||||
|
.middle-map h3 {
|
||||||
|
height: 9%; }
|
||||||
|
.middle-map .map-wrap {
|
||||||
|
position: relative;
|
||||||
|
opacity: .9;
|
||||||
|
height: 100%;
|
||||||
|
border-top: 4px solid #121e52;
|
||||||
|
border-bottom: 4px solid #10144b;
|
||||||
|
background: rgba(18, 22, 64, 0.5);
|
||||||
|
background-size: 100% 100%;
|
||||||
|
/* 数字展示牌 start */
|
||||||
|
/* 数字展示牌 end */ }
|
||||||
|
.middle-map .map-wrap h3 {
|
||||||
|
position: absolute;
|
||||||
|
top: 4%;
|
||||||
|
left: 50%;
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 3%;
|
||||||
|
-webkit-transform: translate(-50%, 0);
|
||||||
|
transform: translate(-50%, 0); }
|
||||||
|
.middle-map .map-wrap h3 dl {
|
||||||
|
width: 20%;
|
||||||
|
padding: 0.4% 0.2% 0 0.4%;
|
||||||
|
border-left: 2px solid #00bbec; }
|
||||||
|
.middle-map .map-wrap h3 dl dt {
|
||||||
|
font-size: 0.78125em;
|
||||||
|
color: #00bbec;
|
||||||
|
margin-bottom: 5%; }
|
||||||
|
.middle-map .map-wrap h3 dl dd {
|
||||||
|
font-family: DigifaceWide;
|
||||||
|
font-size: 1.25em;
|
||||||
|
color: #fff; }
|
||||||
|
.middle-map .map-wrap .title-map {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 20%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
font-size: 0.5625em; }
|
||||||
|
.middle-map .map-wrap .unit-wanyuan:after,
|
||||||
|
.middle-map .map-wrap .unit-number:after,
|
||||||
|
.middle-map .map-wrap .unit-pc:after,
|
||||||
|
.middle-map .map-wrap .unit-type:after {
|
||||||
|
display: inline-block;
|
||||||
|
margin-left: 4%;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff; }
|
||||||
|
/* .middle-map .map-wrap .unit-wanyuan:after {
|
||||||
|
content: '万元'; }
|
||||||
|
.middle-map .map-wrap .unit-number:after {
|
||||||
|
content: '条'; }
|
||||||
|
.middle-map .map-wrap .unit-type:after {
|
||||||
|
content: '种'; }
|
||||||
|
.middle-map .map-wrap .unit-pc:after {
|
||||||
|
content: '批次'; } */
|
||||||
|
.middle-map .map-wrap #map {
|
||||||
|
height: 100%; }
|
||||||
|
|
||||||
|
/* 中间地图样式 end */
|
||||||
|
/* 右侧边框样式 start */
|
||||||
|
.right-top {
|
||||||
|
position: relative;
|
||||||
|
background: url("../img/bg1_1.png") no-repeat top; }
|
||||||
|
.right-top:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor1_3.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ""; }
|
||||||
|
.right-top .con {
|
||||||
|
height: 42%;
|
||||||
|
margin: 0 5%;
|
||||||
|
font-size: 0.4375em;
|
||||||
|
font-size: .4375em;
|
||||||
|
background: #081d5d; }
|
||||||
|
|
||||||
|
/* 右侧边框样式 end */
|
||||||
|
/* 公共部分样式 end*/
|
||||||
|
.nav {
|
||||||
|
position: fixed;
|
||||||
|
right: 0;
|
||||||
|
z-index: 20000;
|
||||||
|
width: 30%;
|
||||||
|
height: 10%;
|
||||||
|
font-size: 0.65625em; }
|
||||||
|
.nav ul {
|
||||||
|
list-style: none;
|
||||||
|
min-width: 500px;
|
||||||
|
width: 100%; }
|
||||||
|
.nav ul a {
|
||||||
|
display: block;
|
||||||
|
text-decoration: none;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 4.5;
|
||||||
|
color: white;
|
||||||
|
/* background-color: #2f3e45; */ }
|
||||||
|
|
||||||
|
.drop-down {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%; }
|
||||||
|
|
||||||
|
.drop-down-content li {
|
||||||
|
display: inline-block;
|
||||||
|
float: left;
|
||||||
|
width: 20%;
|
||||||
|
min-width: 100px;
|
||||||
|
height: 100%; }
|
||||||
|
|
||||||
|
.drop-down {
|
||||||
|
/*position: relative;*/
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
.drop-down-content {
|
||||||
|
padding: 0;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
/*position: absolute;*/ }
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
font-size: 30px;
|
||||||
|
clear: both; }
|
||||||
|
|
||||||
|
.drop-down-content li:hover a {
|
||||||
|
color: bisque; }
|
||||||
|
|
||||||
|
.nav .drop-down:hover .drop-down-content {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%; }
|
||||||
|
.main .aside-left {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%; }
|
||||||
|
.main .aside-left:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../img/invalid.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ""; }
|
||||||
|
.main .aside-left ul {
|
||||||
|
display: block;
|
||||||
|
height: 91%;
|
||||||
|
overflow: hidden; }
|
||||||
|
.main .aside-left li {
|
||||||
|
width: 86%;
|
||||||
|
height: 19%;
|
||||||
|
margin: 1.5% auto;
|
||||||
|
padding: 5% 8% 5% 4%;
|
||||||
|
background: rgba(8, 29, 93, 0.36); }
|
||||||
|
.main .aside-left li img {
|
||||||
|
width: 23%;
|
||||||
|
height: 100%;
|
||||||
|
display: block; }
|
||||||
|
.main .aside-left li dl {
|
||||||
|
width: 77%;
|
||||||
|
padding-left: 5%; }
|
||||||
|
.main .aside-left li dl dt {
|
||||||
|
font-size: 0.4375em;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left;
|
||||||
|
color: #ffffff;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis; }
|
||||||
|
.main .aside-left li dl dd {
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-size: 0.4375em;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.43;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left;
|
||||||
|
color: rgba(0, 187, 236, 0.5); }
|
||||||
|
.main .aside-left li dl dd p {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis; }
|
||||||
|
.main .aside-right {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%; }
|
||||||
|
.main .aside-right .con_top {
|
||||||
|
width: 100%;
|
||||||
|
height: 103.5%;
|
||||||
|
position: relative; }
|
||||||
|
.main .aside-right .con_top:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../img/aside_top.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ""; }
|
||||||
|
.main .aside-right .con_top h3 {
|
||||||
|
padding: 10% 8% 2% 8%; }
|
||||||
|
.main .aside-right .con_top .aside_con {
|
||||||
|
padding: 0 3%;
|
||||||
|
height: 86%;
|
||||||
|
overflow: hidden; }
|
||||||
|
.main .aside-right .con_top .aside_con dl {
|
||||||
|
padding: 2% 5%;
|
||||||
|
background: rgba(8, 29, 93, 0.43);
|
||||||
|
margin: 1% 0; }
|
||||||
|
.main .aside-right .con_top .aside_con .user {
|
||||||
|
font-size: 0.4375em;
|
||||||
|
text-align: left;
|
||||||
|
color: #00bbec; }
|
||||||
|
.main .aside-right .con_top .aside_con .time {
|
||||||
|
color: rgba(0, 187, 236, 0.52); }
|
||||||
|
.main .aside-right .con_top .aside_con .comment {
|
||||||
|
text-align: left;
|
||||||
|
color: #00bbec; }
|
||||||
|
.main .aside-right .con_top .aside_con .comment span {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.3125em; }
|
||||||
|
.main .aside-right .con_top .aside_con dd {
|
||||||
|
font-size: 0.40625em;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.33;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left;
|
||||||
|
color: #ffffff; }
|
||||||
|
.main .middle_con {
|
||||||
|
position: relative;
|
||||||
|
width: 55%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 .5%;
|
||||||
|
background-color: rgba(18, 22, 64, 0.44); }
|
||||||
|
.main .middle_con .middle_top {
|
||||||
|
width: 100%;
|
||||||
|
height: 80%; }
|
||||||
|
.main .middle_con .middle_button {
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
height: 20%; }
|
||||||
|
.main .middle_con .middle_button .button_left,
|
||||||
|
.main .middle_con .middle_button .button_right {
|
||||||
|
width: 50%;
|
||||||
|
float: left;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
font-size: 0.4375em; }
|
||||||
|
.main .middle_con .middle_button .button_left .button_con,
|
||||||
|
.main .middle_con .middle_button .button_right .button_con {
|
||||||
|
width: 100%;
|
||||||
|
height: 82%;
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden; }
|
||||||
|
.main .middle_con .middle_button .button_left:before,
|
||||||
|
.main .middle_con .middle_button .button_right:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../img/invalid-button.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ""; }
|
||||||
|
.main .middle_con .middle_button .button_left h3,
|
||||||
|
.main .middle_con .middle_button .button_right h3 {
|
||||||
|
padding: 4% 0 2% 3%; }
|
||||||
|
.main .middle_con .middle_button .button_left dl,
|
||||||
|
.main .middle_con .middle_button .button_right dl {
|
||||||
|
width: 90%;
|
||||||
|
margin-left: 3%;
|
||||||
|
display: inline-block;
|
||||||
|
line-height: 2.3;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis; }
|
||||||
|
.main .middle_con .middle_button .button_left .number,
|
||||||
|
.main .middle_con .middle_button .button_right .number {
|
||||||
|
color: #2edbff; }
|
||||||
|
.main .middle_con .middle_button .button_left .title,
|
||||||
|
.main .middle_con .middle_button .button_right .title {
|
||||||
|
text-align: left;
|
||||||
|
color: #ffffff; }
|
||||||
|
.main .middle_con .middle_button .button_left dt,
|
||||||
|
.main .middle_con .middle_button .button_right dt {
|
||||||
|
display: inline-block; }
|
||||||
|
.main .middle_con .middle_button .button_left dd,
|
||||||
|
.main .middle_con .middle_button .button_right dd {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
color: rgba(0, 187, 236, 0.5);
|
||||||
|
padding-left: 2%; }
|
||||||
|
.main .middle_con .con_left,
|
||||||
|
.main .middle_con .con_right {
|
||||||
|
width: 50%;
|
||||||
|
height: 37%;
|
||||||
|
padding-top: 1%; }
|
||||||
|
.main .middle_con .con_left {
|
||||||
|
padding: 2% 5%;
|
||||||
|
border-right: 1px solid #00bbec; }
|
||||||
|
.main .middle_con .con_left img {
|
||||||
|
display: block;
|
||||||
|
width: 30%;
|
||||||
|
height: 88%; }
|
||||||
|
.main .middle_con .con_left dl {
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
padding-left: 5%;
|
||||||
|
color: #ffffff; }
|
||||||
|
.main .middle_con .con_left dl dt {
|
||||||
|
font-size: 0.75em;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1;
|
||||||
|
padding-bottom: 4%;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis; }
|
||||||
|
.main .middle_con .con_left dl dd {
|
||||||
|
font-size: 0.4375em;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.43;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left; }
|
||||||
|
.main .middle_con .con_right {
|
||||||
|
padding-left: 2%; }
|
||||||
|
.main .middle_con .con_right dl {
|
||||||
|
width: 50%;
|
||||||
|
height: 50%; }
|
||||||
|
.main .middle_con .con_right dl dt {
|
||||||
|
font-size: 0.5625em;
|
||||||
|
line-height: 1.11;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left;
|
||||||
|
color: #ffffff; }
|
||||||
|
.main .middle_con .con_right dl ul {
|
||||||
|
margin: 4% 0 0 7%; }
|
||||||
|
.main .middle_con .con_right dl ul li {
|
||||||
|
padding: 1% 5%;
|
||||||
|
background: rgba(0, 187, 236, 0.28);
|
||||||
|
font-size: 0.4375em;
|
||||||
|
text-align: right;
|
||||||
|
color: #ffffff;
|
||||||
|
float: left;
|
||||||
|
padding: 1% 5%;
|
||||||
|
margin: 1%; }
|
||||||
|
.main .middle_con .con_link {
|
||||||
|
width: 100%;
|
||||||
|
height: 22.33%;
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
float: left; }
|
||||||
|
.main .middle_con .con_link li {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis; }
|
||||||
|
.main .middle_con .con_link:before {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 20%;
|
||||||
|
height: 15%;
|
||||||
|
background: url(../img/title_con.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: ""; }
|
||||||
|
.main .middle_con .con_link h3 {
|
||||||
|
padding-left: 11%;
|
||||||
|
margin-top: -0.1%; }
|
||||||
|
.main .middle_con .con_link .link_title,
|
||||||
|
.main .middle_con .con_link .link_ul {
|
||||||
|
font-size: 0.4375em;
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.43;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left;
|
||||||
|
color: #ffffff;
|
||||||
|
width: 81%;
|
||||||
|
height: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 2% auto; }
|
||||||
|
.main .middle_con .con_link .link_title {
|
||||||
|
height: 43%; }
|
||||||
|
.main .middle_con .con_link .link_ul li {
|
||||||
|
width: 33.33%;
|
||||||
|
float: left;
|
||||||
|
padding: 1%; }
|
||||||
|
|
||||||
|
.title_img {
|
||||||
|
text-align: left;
|
||||||
|
margin-top: -1.5%; }
|
||||||
|
|
||||||
|
.main-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 5px; }
|
||||||
|
.main-bottom span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
background: #02336b; }
|
||||||
|
.main-bottom .line1 {
|
||||||
|
width: 15%;
|
||||||
|
margin-right: 6px; }
|
||||||
|
.main-bottom .line2 {
|
||||||
|
width: 55%;
|
||||||
|
margin-right: 6px; }
|
||||||
|
.main-bottom .line3 {
|
||||||
|
width: 26%; }
|
||||||
|
|
||||||
|
.pressRotate {
|
||||||
|
-webkit-animation: mymove .5s ease-in;
|
||||||
|
-moz-animation: mymove .5s ease-in;
|
||||||
|
-o-animation: mymove .5s ease-in;
|
||||||
|
animation: mymove .5s ease-in; }
|
||||||
|
|
||||||
|
@keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg); }
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg); } }
|
||||||
|
@-moz-keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg); }
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg); } }
|
||||||
|
@-webkit-keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg); }
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg); } }
|
||||||
|
@-o-keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg); }
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg); } }
|
||||||
|
@keyframes rotate {
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg); } }
|
||||||
BIN
public/css/fonts/Rubik-Light.ttf
Normal file
BIN
public/css/fonts/Rubik-Light.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/Rubik-Medium.ttf
Normal file
BIN
public/css/fonts/Rubik-Medium.ttf
Normal file
Binary file not shown.
370
public/css/fonts/demo.css
Normal file
370
public/css/fonts/demo.css
Normal file
@ -0,0 +1,370 @@
|
|||||||
|
*{margin: 0;padding: 0;list-style: none;}
|
||||||
|
/*
|
||||||
|
KISSY CSS Reset
|
||||||
|
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
|
||||||
|
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
|
||||||
|
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
|
||||||
|
特色：1. 适应中文；2. 基于最新主流浏览器。
|
||||||
|
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** 清除内外边距 **/
|
||||||
|
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
|
||||||
|
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
|
||||||
|
pre, /* text formatting elements 文本格式元素 */
|
||||||
|
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
|
||||||
|
th, td /* table elements 表格元素 */ {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 设置默认字体 **/
|
||||||
|
body,
|
||||||
|
button, input, select, textarea /* for ie */ {
|
||||||
|
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
|
||||||
|
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
|
||||||
|
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
|
||||||
|
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
|
||||||
|
|
||||||
|
/** 重置列表元素 **/
|
||||||
|
ul, ol { list-style: none; }
|
||||||
|
|
||||||
|
/** 重置文本格式元素 **/
|
||||||
|
a { text-decoration: none; }
|
||||||
|
a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
|
||||||
|
/** 重置表单元素 **/
|
||||||
|
legend { color: #000; } /* for ie6 */
|
||||||
|
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
|
||||||
|
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
|
||||||
|
/* 注：optgroup 无法扶正 */
|
||||||
|
|
||||||
|
/** 重置表格元素 **/
|
||||||
|
table { border-collapse: collapse; border-spacing: 0; }
|
||||||
|
|
||||||
|
/* 清除浮动 */
|
||||||
|
.ks-clear:after, .clear:after {
|
||||||
|
content: '\20';
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.ks-clear, .clear {
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
padding: 30px 100px;
|
||||||
|
width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
|
||||||
|
|
||||||
|
.helps{margin-top:40px;}
|
||||||
|
.helps pre{
|
||||||
|
padding:20px;
|
||||||
|
margin:10px 0;
|
||||||
|
border:solid 1px #e7e1cd;
|
||||||
|
background-color: #fffdef;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists{
|
||||||
|
width: 100% !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li{
|
||||||
|
float:left;
|
||||||
|
width: 100px;
|
||||||
|
height:180px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none !important;
|
||||||
|
}
|
||||||
|
.icon_lists .icon{
|
||||||
|
font-size: 42px;
|
||||||
|
line-height: 100px;
|
||||||
|
margin: 10px 0;
|
||||||
|
color:#333;
|
||||||
|
-webkit-transition: font-size 0.25s ease-out 0s;
|
||||||
|
-moz-transition: font-size 0.25s ease-out 0s;
|
||||||
|
transition: font-size 0.25s ease-out 0s;
|
||||||
|
|
||||||
|
}
|
||||||
|
.icon_lists .icon:hover{
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.markdown {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown img {
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
color: #404040;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2,
|
||||||
|
.markdown h3,
|
||||||
|
.markdown h4,
|
||||||
|
.markdown h5,
|
||||||
|
.markdown h6 {
|
||||||
|
color: #404040;
|
||||||
|
margin: 1.6em 0 0.6em 0;
|
||||||
|
font-weight: 500;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h5 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h6 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown hr {
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
background: #e9e9e9;
|
||||||
|
margin: 16px 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown p,
|
||||||
|
.markdown pre {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > p,
|
||||||
|
.markdown > blockquote,
|
||||||
|
.markdown > .highlight,
|
||||||
|
.markdown > ol,
|
||||||
|
.markdown > ul {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul > li {
|
||||||
|
list-style: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > ul li,
|
||||||
|
.markdown blockquote ul > li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > ul li p,
|
||||||
|
.markdown > ol li p {
|
||||||
|
margin: 0.6em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol > li {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > ol li,
|
||||||
|
.markdown blockquote ol > li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown code {
|
||||||
|
margin: 0 3px;
|
||||||
|
padding: 0 5px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown pre {
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #f7f7f7;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown pre code {
|
||||||
|
border: none;
|
||||||
|
background: #f7f7f7;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown strong,
|
||||||
|
.markdown b {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0px;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
width: 95%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th,
|
||||||
|
.markdown > table td {
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
padding: 8px 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote {
|
||||||
|
font-size: 90%;
|
||||||
|
color: #999;
|
||||||
|
border-left: 4px solid #e9e9e9;
|
||||||
|
padding-left: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .anchor {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .waiting {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1:hover .anchor,
|
||||||
|
.markdown h2:hover .anchor,
|
||||||
|
.markdown h3:hover .anchor,
|
||||||
|
.markdown h4:hover .anchor,
|
||||||
|
.markdown h5:hover .anchor,
|
||||||
|
.markdown h6:hover .anchor {
|
||||||
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > br,
|
||||||
|
.markdown > p > br {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
background: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: #333333;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-meta {
|
||||||
|
color: #969896;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-strong,
|
||||||
|
.hljs-emphasis,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #df5000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-type {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-attribute {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-name {
|
||||||
|
color: #63a35c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #795da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
color: #55a532;
|
||||||
|
background-color: #eaffea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #bd2c00;
|
||||||
|
background-color: #ffecec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre{
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
52
public/css/fonts/demo_fontclass.html
Normal file
52
public/css/fonts/demo_fontclass.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>IconFont</title>
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<link rel="stylesheet" href="iconfont.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main markdown">
|
||||||
|
<h1>IconFont 图标</h1>
|
||||||
|
<ul class="icon_lists clear">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-xin"></i>
|
||||||
|
<div class="name">心</div>
|
||||||
|
<div class="fontclass">.icon-xin</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-pinglun"></i>
|
||||||
|
<div class="name">评论</div>
|
||||||
|
<div class="fontclass">.icon-pinglun</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="font-class-">font-class引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
|
||||||
|
<p>与unicode使用方式相比，具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
|
||||||
|
<li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
|
||||||
|
<li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
|
||||||
|
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
79
public/css/fonts/demo_symbol.html
Normal file
79
public/css/fonts/demo_symbol.html
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>IconFont</title>
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<script src="iconfont.js"></script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.icon {
|
||||||
|
/* 通过设置 font-size 来改变图标大小 */
|
||||||
|
width: 1em; height: 1em;
|
||||||
|
/* 图标和文字相邻时，垂直对齐 */
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||||
|
fill: currentColor;
|
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||||
|
normalize.css 中也包含这行 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main markdown">
|
||||||
|
<h1>IconFont 图标</h1>
|
||||||
|
<ul class="icon_lists clear">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xin"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">心</div>
|
||||||
|
<div class="fontclass">#icon-xin</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-pinglun"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">评论</div>
|
||||||
|
<div class="fontclass">#icon-pinglun</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="symbol-">symbol引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||||
|
这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持多色图标了，不再受单色限制。</li>
|
||||||
|
<li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
|
||||||
|
<li>兼容性较差，支持 ie9+,及现代浏览器。</li>
|
||||||
|
<li>浏览器渲染svg的性能一般，还不如png。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>>
|
||||||
|
.icon {
|
||||||
|
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
|
||||||
|
vertical-align: <span class="hljs-number">-0.15</span>em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
<<span class="hljs-regexp">/style></span></code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag">
|
||||||
|
<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span>
|
||||||
|
</span><<span class="hljs-regexp">/svg>
|
||||||
|
</span></code></pre>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
90
public/css/fonts/demo_unicode.html
Normal file
90
public/css/fonts/demo_unicode.html
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>IconFont</title>
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url('iconfont.eot'); /* IE9*/
|
||||||
|
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||||
|
url('iconfont.woff') format('woff'), /* chrome, firefox */
|
||||||
|
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||||
|
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family:"iconfont" !important;
|
||||||
|
font-size:16px;
|
||||||
|
font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-text-stroke-width: 0.2px;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main markdown">
|
||||||
|
<h1>IconFont 图标</h1>
|
||||||
|
<ul class="icon_lists clear">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">心</div>
|
||||||
|
<div class="code">&#xe613;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">评论</div>
|
||||||
|
<div class="code">&#xe603;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<h2 id="unicode-">unicode引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>unicode是字体在网页端最原始的应用方式，特点是：</p>
|
||||||
|
<ul>
|
||||||
|
<li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
|
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||||
|
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
|
||||||
|
</ul>
|
||||||
|
<blockquote>
|
||||||
|
<p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>unicode使用步骤如下：</p>
|
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript">@font-face {
|
||||||
|
font-family: <span class="hljs-string">'iconfont'</span>;
|
||||||
|
src: url(<span class="hljs-string">'iconfont.eot'</span>);
|
||||||
|
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
|
||||||
|
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
|
||||||
|
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
|
||||||
|
url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript">.iconfont{
|
||||||
|
font-family:<span class="hljs-string">"iconfont"</span> !important;
|
||||||
|
font-size:<span class="hljs-number">16</span>px;font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/css/fonts/digifaw.ttf
Normal file
BIN
public/css/fonts/digifaw.ttf
Normal file
Binary file not shown.
21
public/css/fonts/iconfont.css
Normal file
21
public/css/fonts/iconfont.css
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
|
||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url('iconfont.eot?t=1520929100106'); /* IE9*/
|
||||||
|
src: url('iconfont.eot?t=1520929100106#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||||
|
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1520929100106') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||||
|
url('iconfont.svg?t=1520929100106#iconfont') format('svg'); /* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family:"iconfont" !important;
|
||||||
|
font-size:16px;
|
||||||
|
font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xin:before { content: "\e613"; }
|
||||||
|
|
||||||
|
.icon-pinglun:before { content: "\e603"; }
|
||||||
|
|
||||||
BIN
public/css/fonts/iconfont.eot
Normal file
BIN
public/css/fonts/iconfont.eot
Normal file
Binary file not shown.
1
public/css/fonts/iconfont.js
Normal file
1
public/css/fonts/iconfont.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
(function(window){var svgSprite='<svg><symbol id="icon-xin" viewBox="0 0 1024 1024"><path d="M714.07688 108.265796c-78.336136 0-152.170748 35.124985-201.437825 92.215238-49.267077-57.091276-123.099642-92.215238-201.437825-92.215238-138.79409 0-246.201331 105.373932-246.201331 241.502309 0 166.860309 152.171772 300.780391 382.722658 507.156692l64.916499 57.092299 64.916499-57.092299C808.108486 650.548496 960.279235 516.628414 960.279235 349.768105 960.279235 213.639728 852.871993 108.265796 714.07688 108.265796L714.07688 108.265796zM540.268322 799.156092l-9.093099 8.131191-18.535145 16.305361-18.534122-16.305361-9.049097-8.131191c-108.544135-97.111758-202.224748-180.978864-264.211521-255.971859-60.151985-72.851215-86.993307-132.500756-86.993307-193.417151 0-47.977711 18.142196-92.172259 51.058886-124.455523 32.786731-32.17377 77.638241-49.901527 126.292358-49.901527 56.260351 0 111.86681 25.530466 148.763139 68.284199l52.67571 61.112869 52.677756-61.112869c36.895305-42.753733 92.499717-68.284199 148.760069-68.284199 48.65514 0 93.50665 17.727757 126.292358 49.901527 32.917714 32.283264 51.058886 76.477812 51.058886 124.455523 0 60.915371-26.841322 120.564913-86.992283 193.417151C742.449068 618.177228 648.767432 702.044334 540.268322 799.156092L540.268322 799.156092zM540.268322 799.156092" ></path></symbol><symbol id="icon-pinglun" viewBox="0 0 1024 1024"><path d="M511.999488 847.882863c-28.734592 0-56.729303-2.604314-83.969807-7.099698L231.232673 960.185602 231.232673 761.40735C128.618486 689.355337 62.772174 578.889433 62.772174 454.825836c0-217.07906 201.129864-393.058051 449.228338-393.058051 248.084146 0 449.228338 175.980014 449.228338 393.058051C961.227826 671.917176 760.083635 847.882863 511.999488 847.882863zM511.999488 117.91762c-217.086932 0-393.074156 150.851707-393.074156 336.907193 0 114.166179 66.421434 214.898395 167.761552 275.820929l-1.768346 130.234133 132.171551-79.455633c30.4487 6.497994 62.117231 10.308787 94.910422 10.308787 217.101258 0 393.073132-150.825101 393.073132-336.907193C905.073644 268.769326 729.10177 117.91762 511.999488 117.91762zM736.614169 510.976694c-31.011542 0-56.154182-25.128307-56.154182-56.150858 0-31.010271 25.14264-56.151881 56.154182-56.151881s56.154182 25.14161 56.154182 56.151881C792.768351 485.848387 767.624687 510.976694 736.614169 510.976694zM511.999488 510.976694c-31.010518 0-56.153158-25.128307-56.153158-56.150858 0-31.010271 25.14264-56.151881 56.153158-56.151881 31.011542 0 56.154182 25.14161 56.154182 56.151881C568.15367 485.848387 543.01103 510.976694 511.999488 510.976694zM287.385831 510.976694c-31.010518 0-56.153158-25.128307-56.153158-56.150858 0-31.010271 25.14264-56.151881 56.153158-56.151881s56.153158 25.14161 56.153158 56.151881C343.53899 485.848387 318.39635 510.976694 287.385831 510.976694z" ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)
|
||||||
39
public/css/fonts/iconfont.svg
Normal file
39
public/css/fonts/iconfont.svg
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||||
|
<!--
|
||||||
|
2013-9-30: Created.
|
||||||
|
-->
|
||||||
|
<svg>
|
||||||
|
<metadata>
|
||||||
|
Created by iconfont
|
||||||
|
</metadata>
|
||||||
|
<defs>
|
||||||
|
|
||||||
|
<font id="iconfont" horiz-adv-x="1024" >
|
||||||
|
<font-face
|
||||||
|
font-family="iconfont"
|
||||||
|
font-weight="500"
|
||||||
|
font-stretch="normal"
|
||||||
|
units-per-em="1024"
|
||||||
|
ascent="896"
|
||||||
|
descent="-128"
|
||||||
|
/>
|
||||||
|
<missing-glyph />
|
||||||
|
|
||||||
|
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
|
||||||
|
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
|
||||||
|
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
|
||||||
|
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="xin" unicode="" d="M714.07688 703.734204c-78.336136 0-152.170748-35.124985-201.437825-92.215238-49.267077 57.091276-123.099642 92.215238-201.437825 92.215238-138.79409 0-246.201331-105.373932-246.201331-241.502309 0-166.860309 152.171772-300.780391 382.722658-507.156692l64.916499-57.092299 64.916499 57.092299C808.108486 161.451504 960.279235 295.371586 960.279235 462.231895 960.279235 598.360272 852.871993 703.734204 714.07688 703.734204L714.07688 703.734204zM540.268322 12.843908l-9.093099-8.131191-18.535145-16.305361-18.534122 16.305361-9.049097 8.131191c-108.544135 97.111758-202.224748 180.978864-264.211521 255.971859-60.151985 72.851215-86.993307 132.500756-86.993307 193.417151 0 47.977711 18.142196 92.172259 51.058886 124.455523 32.786731 32.17377 77.638241 49.901527 126.292358 49.901527 56.260351 0 111.86681-25.530466 148.763139-68.284199l52.67571-61.112869 52.677756 61.112869c36.895305 42.753733 92.499717 68.284199 148.760069 68.284199 48.65514 0 93.50665-17.727757 126.292358-49.901527 32.917714-32.283264 51.058886-76.477812 51.058886-124.455523 0-60.915371-26.841322-120.564913-86.992283-193.417151C742.449068 193.822772 648.767432 109.955666 540.268322 12.843908L540.268322 12.843908zM540.268322 12.843908" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="pinglun" unicode="" d="M511.999488 48.117137c-28.734592 0-56.729303 2.604314-83.969807 7.099698L231.232673-64.185602 231.232673 134.59265C128.618486 206.644663 62.772174 317.110567 62.772174 441.174164c0 217.07906 201.129864 393.058051 449.228338 393.058051 248.084146 0 449.228338-175.980014 449.228338-393.058051C961.227826 224.082824 760.083635 48.117137 511.999488 48.117137zM511.999488 778.08238c-217.086932 0-393.074156-150.851707-393.074156-336.907193 0-114.166179 66.421434-214.898395 167.761552-275.820929l-1.768346-130.234133 132.171551 79.455633c30.4487-6.497994 62.117231-10.308787 94.910422-10.308787 217.101258 0 393.073132 150.825101 393.073132 336.907193C905.073644 627.230674 729.10177 778.08238 511.999488 778.08238zM736.614169 385.023306c-31.011542 0-56.154182 25.128307-56.154182 56.150858 0 31.010271 25.14264 56.151881 56.154182 56.151881s56.154182-25.14161 56.154182-56.151881C792.768351 410.151613 767.624687 385.023306 736.614169 385.023306zM511.999488 385.023306c-31.010518 0-56.153158 25.128307-56.153158 56.150858 0 31.010271 25.14264 56.151881 56.153158 56.151881 31.011542 0 56.154182-25.14161 56.154182-56.151881C568.15367 410.151613 543.01103 385.023306 511.999488 385.023306zM287.385831 385.023306c-31.010518 0-56.153158 25.128307-56.153158 56.150858 0 31.010271 25.14264 56.151881 56.153158 56.151881s56.153158-25.14161 56.153158-56.151881C343.53899 410.151613 318.39635 385.023306 287.385831 385.023306z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</font>
|
||||||
|
</defs></svg>
|
||||||
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/css/fonts/iconfont.ttf
Normal file
BIN
public/css/fonts/iconfont.ttf
Normal file
Binary file not shown.
BIN
public/css/fonts/iconfont.woff
Normal file
BIN
public/css/fonts/iconfont.woff
Normal file
Binary file not shown.
BIN
public/css/fonts/rubik-regular-webfont.ttf
Normal file
BIN
public/css/fonts/rubik-regular-webfont.ttf
Normal file
Binary file not shown.
3
public/css/four.css
Normal file
3
public/css/four.css
Normal file
File diff suppressed because one or more lines are too long
7
public/css/four.css.map
Normal file
7
public/css/four.css.map
Normal file
File diff suppressed because one or more lines are too long
385
public/css/four.scss
Normal file
385
public/css/four.scss
Normal file
@ -0,0 +1,385 @@
|
|||||||
|
@import "baseFour.scss";
|
||||||
|
@import "mixin/_animation.scss";
|
||||||
|
@import "drop_down.scss";
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%;
|
||||||
|
.aside-left {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../img/invalid.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
position: relative;
|
||||||
|
z-index: 99;
|
||||||
|
display: block;
|
||||||
|
height: 91%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
position: relative;
|
||||||
|
z-index: 100;
|
||||||
|
width: 86%;
|
||||||
|
height: 19%;
|
||||||
|
padding: 5% 8% 5% 4%;
|
||||||
|
margin: 1.5% auto;
|
||||||
|
background: rgba(8, 29, 93, .36);
|
||||||
|
cursor: pointer;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 23%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
dl {
|
||||||
|
width: 77%;
|
||||||
|
padding-left: 5%;
|
||||||
|
dt {
|
||||||
|
text-align: left;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
text-align: left;
|
||||||
|
font-family: MicrosoftYaHei;
|
||||||
|
font-size: px2em(22, 64);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.43;
|
||||||
|
color: rgba(0, 187, 236, .5);
|
||||||
|
letter-spacing: normal;
|
||||||
|
p {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.aside-right {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%; // 公共样式
|
||||||
|
.con_top {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 103.5%;
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../img/aside_top.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
padding: 10% 8% 2% 8%;
|
||||||
|
}
|
||||||
|
.aside_con {
|
||||||
|
height: 86%;
|
||||||
|
padding: 0 3%;
|
||||||
|
overflow: hidden;
|
||||||
|
dl {
|
||||||
|
padding: 2% 5%;
|
||||||
|
margin: 1% 0;
|
||||||
|
background: rgba(8, 29, 93, .43);
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
font-size: px2em(22, 64);
|
||||||
|
}
|
||||||
|
.user {
|
||||||
|
text-align: left;
|
||||||
|
font-size: px2em(24, 64);
|
||||||
|
color: #00bbec;
|
||||||
|
}
|
||||||
|
.time {
|
||||||
|
color: rgba(0, 187, 236, .52);
|
||||||
|
}
|
||||||
|
.comment {
|
||||||
|
text-align: left;
|
||||||
|
color: #00bbec;
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: px2em(18, 64);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
text-align: left;
|
||||||
|
font-size: px2em(24, 64);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.33;
|
||||||
|
color: #fff;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 6;
|
||||||
|
overflow: hidden;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.middle_con {
|
||||||
|
position: relative;
|
||||||
|
width: 55%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 .5%;
|
||||||
|
background-color: rgba(18, 22, 64, .44);
|
||||||
|
.middle_top {
|
||||||
|
width: 100%;
|
||||||
|
height: 80%;
|
||||||
|
}
|
||||||
|
.middle_button {
|
||||||
|
width: 100%;
|
||||||
|
height: 20%;
|
||||||
|
overflow: hidden;
|
||||||
|
.button_left,
|
||||||
|
.button_right {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
.button_con {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 82%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url(../img/invalid-button.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
padding: 4% 0 2% 3%;
|
||||||
|
}
|
||||||
|
dl {
|
||||||
|
display: inline-block;
|
||||||
|
width: 90%;
|
||||||
|
line-height: 2.3;
|
||||||
|
margin-left: 3%;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.number {
|
||||||
|
color: #2edbff;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
text-align: left;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
dt {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
display: inline-block;
|
||||||
|
text-align: left;
|
||||||
|
padding-left: 2%;
|
||||||
|
color: rgba(0, 187, 236, .5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.con_left,
|
||||||
|
.con_right {
|
||||||
|
width: 50%;
|
||||||
|
height: 37%;
|
||||||
|
padding-top: 1%;
|
||||||
|
}
|
||||||
|
.con_left {
|
||||||
|
padding: 2% 5%;
|
||||||
|
border-right: 1px solid #00bbec;
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
width: 30%;
|
||||||
|
height: 88%;
|
||||||
|
}
|
||||||
|
dl {
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
padding-left: 5%;
|
||||||
|
color: #fff;
|
||||||
|
dt {
|
||||||
|
text-align: left;
|
||||||
|
font-size: px2em(38, 64);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1;
|
||||||
|
padding-bottom: 4%;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
dd {
|
||||||
|
text-align: left;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
font-weight: normal;
|
||||||
|
line-height: 1.43;
|
||||||
|
letter-spacing: normal;
|
||||||
|
p {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.con_right {
|
||||||
|
padding-left: 2%;
|
||||||
|
dl {
|
||||||
|
width: 100%;
|
||||||
|
height: 50%;
|
||||||
|
float: left;
|
||||||
|
margin: 1% 0;
|
||||||
|
overflow: hidden;
|
||||||
|
dt {
|
||||||
|
text-align: left;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
line-height: 1.11;
|
||||||
|
color: #fff;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
ul {
|
||||||
|
margin: 4% 0 0 7%;
|
||||||
|
li {
|
||||||
|
float: left;
|
||||||
|
text-align: right;
|
||||||
|
font-size: px2em(24, 64);
|
||||||
|
padding: 1% 5%;
|
||||||
|
padding: 1% 5%;
|
||||||
|
margin: 1%;
|
||||||
|
color: #fff;
|
||||||
|
background: rgba(0, 187, 236, .28);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.con_link {
|
||||||
|
position: relative;
|
||||||
|
float: left;
|
||||||
|
width: 100%;
|
||||||
|
height: 22.33%;
|
||||||
|
li {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: -10.4%;
|
||||||
|
width: 20%;
|
||||||
|
height: 15%;
|
||||||
|
background: url(../img/title_con.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
padding-left: 11%;
|
||||||
|
margin-top: -0.5%;
|
||||||
|
font-size: px2em(32, 64);
|
||||||
|
}
|
||||||
|
.link_title,
|
||||||
|
.link_ul {
|
||||||
|
width: 81%;
|
||||||
|
text-align: left;
|
||||||
|
font-size: px2em(24, 64);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.43;
|
||||||
|
margin: 2% auto;
|
||||||
|
color: #fff;
|
||||||
|
overflow: hidden;
|
||||||
|
letter-spacing: normal;
|
||||||
|
}
|
||||||
|
.link_title {
|
||||||
|
height: 80%;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
overflow: hidden;
|
||||||
|
padding-top: 1%;
|
||||||
|
}
|
||||||
|
.link_ul {
|
||||||
|
height: 80%;
|
||||||
|
li {
|
||||||
|
float: left;
|
||||||
|
width: 25%;
|
||||||
|
padding:0.2% 1%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_img {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 5px;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
background: #02336b;
|
||||||
|
}
|
||||||
|
.line1 {
|
||||||
|
width: 15%;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.line2 {
|
||||||
|
width: 55%;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.line3 {
|
||||||
|
width: 26%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 出版社排行 旋转效果
|
||||||
|
// .pressRotate {
|
||||||
|
// -webkit-animation: mymove .5s ease-in;
|
||||||
|
// -moz-animation: mymove .5s ease-in;
|
||||||
|
// -o-animation: mymove .5s ease-in;
|
||||||
|
// animation: mymove .5s ease-in;
|
||||||
|
// }
|
||||||
|
@include myMove(".pressRotate");
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {}
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
9
public/css/func/_px2em.scss
Normal file
9
public/css/func/_px2em.scss
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/**
|
||||||
|
* [px转百分比]
|
||||||
|
* @param {[number]} $size [变量值]
|
||||||
|
* @param {[number]} $base [基准值]
|
||||||
|
* @return {[number]} [返回em]
|
||||||
|
*/
|
||||||
|
@function px2em($size, $base){
|
||||||
|
@return ($size / $base) * 1em;
|
||||||
|
}
|
||||||
9
public/css/func/_px2percent.scss
Normal file
9
public/css/func/_px2percent.scss
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
/**
|
||||||
|
* [px转百分比]
|
||||||
|
* @param {[number]} $size [自身宽度的大小]
|
||||||
|
* @param {[number]} $scale [包裹盒子的大小]
|
||||||
|
* @return {[number]} [返回百分比数值]
|
||||||
|
*/
|
||||||
|
@function px2percent($size, $scale){
|
||||||
|
@return ($size / $scale * 100) * 1%;
|
||||||
|
}
|
||||||
3
public/css/iframe.css
Normal file
3
public/css/iframe.css
Normal file
File diff suppressed because one or more lines are too long
7
public/css/iframe.css.map
Normal file
7
public/css/iframe.css.map
Normal file
File diff suppressed because one or more lines are too long
27
public/css/iframe.scss
Normal file
27
public/css/iframe.scss
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
@import "drop_down.scss";
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.home {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 400%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.state-01 {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 25%;
|
||||||
|
}
|
||||||
3
public/css/index.css
Normal file
3
public/css/index.css
Normal file
File diff suppressed because one or more lines are too long
7
public/css/index.css.map
Normal file
7
public/css/index.css.map
Normal file
File diff suppressed because one or more lines are too long
558
public/css/index.scss
Normal file
558
public/css/index.scss
Normal file
@ -0,0 +1,558 @@
|
|||||||
|
@import "base.scss";
|
||||||
|
@import "mixin/_animation.scss";
|
||||||
|
@import "mixin/_media.scss";
|
||||||
|
@import "drop_down.scss";
|
||||||
|
|
||||||
|
/* 单位 */
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%;
|
||||||
|
.aside-left {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%;
|
||||||
|
.book-rank {
|
||||||
|
border-bottom: 1px solid rgba(#1397ff, .1);
|
||||||
|
font-size: 12px;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.ranking {
|
||||||
|
color: #2edbff;
|
||||||
|
}
|
||||||
|
.hot {
|
||||||
|
font-size: 12px;
|
||||||
|
color: #1397ff;
|
||||||
|
}
|
||||||
|
} // 公共样式
|
||||||
|
.ranking {
|
||||||
|
width: 13%;
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
width: 32%;
|
||||||
|
}
|
||||||
|
.company {
|
||||||
|
width: 34%;
|
||||||
|
}
|
||||||
|
.hot {
|
||||||
|
width: 20%;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.ranking,
|
||||||
|
.name,
|
||||||
|
.company,
|
||||||
|
.hot {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
height: 17%;
|
||||||
|
}
|
||||||
|
.tit {
|
||||||
|
height: 6%;
|
||||||
|
margin: 3% 0;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
color: #2edbff;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
position: relative;
|
||||||
|
height: 49%;
|
||||||
|
.con-wrap {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 75%;
|
||||||
|
overflow: hidden;
|
||||||
|
.over-wrap {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
.go {
|
||||||
|
transition: all .5s linear;
|
||||||
|
}
|
||||||
|
.top1 {
|
||||||
|
top: -100%!important;
|
||||||
|
}
|
||||||
|
.top2 {
|
||||||
|
top: -200%!important;
|
||||||
|
}
|
||||||
|
.top3 {
|
||||||
|
top: -300%!important;
|
||||||
|
}
|
||||||
|
.top4 {
|
||||||
|
top: -400%!important;
|
||||||
|
}
|
||||||
|
.top5 {
|
||||||
|
top: -500%!important;
|
||||||
|
}
|
||||||
|
.top6 {
|
||||||
|
top: -600%!important;
|
||||||
|
}
|
||||||
|
.top7 {
|
||||||
|
top: -700%!important;
|
||||||
|
}
|
||||||
|
.top8 {
|
||||||
|
top: -800%!important;
|
||||||
|
}
|
||||||
|
.top9 {
|
||||||
|
top: -900%!important;
|
||||||
|
}
|
||||||
|
.top10 {
|
||||||
|
top: -1000%!important;
|
||||||
|
}
|
||||||
|
.top11 {
|
||||||
|
top: -1100%!important;
|
||||||
|
}
|
||||||
|
.top12 {
|
||||||
|
top: -1200%!important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.con {
|
||||||
|
height: 100%;
|
||||||
|
li {
|
||||||
|
height: 11.5%;
|
||||||
|
cursor: pointer;
|
||||||
|
.book-rank {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.book-show {
|
||||||
|
display: none;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 2%;
|
||||||
|
overflow: hidden;
|
||||||
|
.img-box {
|
||||||
|
position: relative;
|
||||||
|
width: 25%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 4% 0 16%;
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 42%;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 2%;
|
||||||
|
font-size: px2em(12, 32);
|
||||||
|
overflow: hidden;
|
||||||
|
p {
|
||||||
|
height: 20%;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li.active {
|
||||||
|
height: auto;
|
||||||
|
background: rgba(#1397ff, .1);
|
||||||
|
.book-rank {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.book-show {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 49%;
|
||||||
|
.bottom-in {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
} // 公共样式
|
||||||
|
.short {
|
||||||
|
width: 67%;
|
||||||
|
}
|
||||||
|
.hot {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.con {
|
||||||
|
height: 74%;
|
||||||
|
li {
|
||||||
|
height: 10.5%;
|
||||||
|
border-bottom: 1px solid rgba(19, 151, 255, .1);
|
||||||
|
.book-rank {
|
||||||
|
height: 100%;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.short {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.aside-right {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%; // 公共样式
|
||||||
|
.pie,
|
||||||
|
.trend {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.keys {
|
||||||
|
position: relative;
|
||||||
|
height: 20%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
|
h3 {
|
||||||
|
height: 40%;
|
||||||
|
padding-top: 6%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
.con {
|
||||||
|
height: 42%;
|
||||||
|
margin: 0 20px;
|
||||||
|
background: #081d5d;
|
||||||
|
dl {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px 0 0 10px;
|
||||||
|
dt {
|
||||||
|
height: 40%;
|
||||||
|
font-size: px2em(36, 64);
|
||||||
|
color: #128df0;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
dd {
|
||||||
|
height: 60%;
|
||||||
|
font-family: Rubik;
|
||||||
|
font-size: px2em(72, 64);
|
||||||
|
font-weight: 300;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.middle {
|
||||||
|
position: relative;
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
width: 1px;
|
||||||
|
height: 60%;
|
||||||
|
background: rgba(#fff, .1);
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pie {
|
||||||
|
position: relative;
|
||||||
|
height: 38%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
|
background: url("../img/bg1_1.png") no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor1_4.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
height: 16%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.pie1 {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 8%; // margin-left: 4%;
|
||||||
|
}
|
||||||
|
.pie2 {
|
||||||
|
width: 50%;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 8%; // margin-left: 4%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 10%;
|
||||||
|
left: 50%;
|
||||||
|
width: 80%;
|
||||||
|
min-width: 280px;
|
||||||
|
font-size: px2em(20, 64);
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
margin-right: 1%;
|
||||||
|
&:before {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
margin-right: 1%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
&:before {
|
||||||
|
background: #0239a7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
&:before {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
&:before {
|
||||||
|
background: #24feb4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
&:before {
|
||||||
|
background: #23539b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(5) {
|
||||||
|
&:before {
|
||||||
|
background: #3c9de4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.area-rank {
|
||||||
|
position: relative;
|
||||||
|
height: 35%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
|
background: url("../img/bg1_3.png") no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
overflow: hidden;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor1_5.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
height: 24%;
|
||||||
|
padding-top: 10%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
.con {
|
||||||
|
position: relative;
|
||||||
|
height: 75%;
|
||||||
|
margin: 0 0 5% 5%;
|
||||||
|
font-size: px2em(20, 64);
|
||||||
|
color: #07bffb;
|
||||||
|
overflow: hidden;
|
||||||
|
ul {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
li {
|
||||||
|
height: 11.1%;
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
.bar-in {
|
||||||
|
width: 94%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
.bar-in {
|
||||||
|
width: 88%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
.bar-in {
|
||||||
|
width: 84%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
.bar-in {
|
||||||
|
width: 79%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(5) {
|
||||||
|
.bar-in {
|
||||||
|
width: 76%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(6) {
|
||||||
|
.bar-in {
|
||||||
|
width: 74%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(7) {
|
||||||
|
.bar-in {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(8) {
|
||||||
|
.bar-in {
|
||||||
|
width: 68%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(9) {
|
||||||
|
.bar-in {
|
||||||
|
width: 65%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(10) {
|
||||||
|
.bar-in {
|
||||||
|
width: 62%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(11) {
|
||||||
|
.bar-in {
|
||||||
|
width: 60%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(12) {
|
||||||
|
.bar-in {
|
||||||
|
width: 58%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(13) {
|
||||||
|
.bar-in {
|
||||||
|
width: 54%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(14) {
|
||||||
|
.bar-in {
|
||||||
|
width: 51%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(15) {
|
||||||
|
.bar-in {
|
||||||
|
width: 49%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
@include media3840 {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.city-name {
|
||||||
|
@include media3840 {
|
||||||
|
width: 80px;
|
||||||
|
margin-right: 30px;
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
width: 40px;
|
||||||
|
margin-right: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bar {
|
||||||
|
position: relative;
|
||||||
|
top: 10%;
|
||||||
|
height: 46%;
|
||||||
|
@include media3840 {
|
||||||
|
width: calc(100% - 320px);
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
width: calc(100% - 160px);
|
||||||
|
}
|
||||||
|
.bar-in {
|
||||||
|
display: block;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, #2690cf, #00fecc);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.rank-value {
|
||||||
|
font-size: px2em(64, 64);
|
||||||
|
@include media3840 {
|
||||||
|
width: 100px;
|
||||||
|
margin-left: 30px;
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
width: 50px;
|
||||||
|
margin-left: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.trend {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 26%;
|
||||||
|
background: url("../img/bg1_3.png") no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor1_6.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
height: 20%;
|
||||||
|
padding-top: 5%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.main-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 5px;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
background: #02336b;
|
||||||
|
}
|
||||||
|
.line1 {
|
||||||
|
width: 15%;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.line2 {
|
||||||
|
width: 55%;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.line3 {
|
||||||
|
width: 26%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 出版社排行 旋转效果
|
||||||
|
// .pressRotate {
|
||||||
|
// -webkit-animation: mymove .5s ease-in;
|
||||||
|
// -moz-animation: mymove .5s ease-in;
|
||||||
|
// -o-animation: mymove .5s ease-in;
|
||||||
|
// animation: mymove .5s ease-in;
|
||||||
|
// }
|
||||||
|
@include myMove(".pressRotate");
|
||||||
27
public/css/mixin/2.html
Normal file
27
public/css/mixin/2.html
Normal file
@ -0,0 +1,27 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<title>Page Title</title>
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<style>
|
||||||
|
#mydiv {
|
||||||
|
|
||||||
|
position:absolute;
|
||||||
|
|
||||||
|
border:1px solid red;
|
||||||
|
|
||||||
|
padding: 0 20% 20% 0;
|
||||||
|
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="square">
|
||||||
|
<div class="content">
|
||||||
|
Hello!
|
||||||
|
</div>
|
||||||
|
</div><div id="mydiv"></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
261
public/css/mixin/2.js
Normal file
261
public/css/mixin/2.js
Normal file
@ -0,0 +1,261 @@
|
|||||||
|
var b = 0,a = 1;
|
||||||
|
switch(a){
|
||||||
|
case 1 :
|
||||||
|
b = 3
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
console.log("12")
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
console.log(b)
|
||||||
|
|
||||||
|
|
||||||
|
function parent(name) {
|
||||||
|
this.name = name
|
||||||
|
this.age = 12
|
||||||
|
|
||||||
|
}
|
||||||
|
function children(name) {
|
||||||
|
this.children = parent
|
||||||
|
this.children(name)
|
||||||
|
this.getName = function(){
|
||||||
|
console.log(this.name)
|
||||||
|
console.log(this.age)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
var fu = new children("shuliqi")
|
||||||
|
console.log(fu.getName())
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function paren() {
|
||||||
|
this.name = "shuliqi"
|
||||||
|
|
||||||
|
}
|
||||||
|
function children(name){
|
||||||
|
this.getName = function () {
|
||||||
|
console.log(this.name)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
var ch = new children('shuliqi')
|
||||||
|
paren.apply(ch,[1,2])
|
||||||
|
console.log(ch.getName())
|
||||||
|
|
||||||
|
var a
|
||||||
|
console.log(typeof a)
|
||||||
|
|
||||||
|
|
||||||
|
console.log([1,2,3] == true)
|
||||||
|
|
||||||
|
var foo = "get-element-by-id"
|
||||||
|
var arr = foo.split("-")
|
||||||
|
for (let i = 1; i < arr.length; i++) {
|
||||||
|
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].slice(1,arr[i].length)
|
||||||
|
|
||||||
|
}
|
||||||
|
console.log(arr.join(''))
|
||||||
|
|
||||||
|
var numberArray = [3, 6, 2, 4, 1, 5];
|
||||||
|
// 倒序
|
||||||
|
var str1 = numberArray.reverse()
|
||||||
|
console.log(str1)
|
||||||
|
|
||||||
|
|
||||||
|
var str2 = numberArray.sort((a,b) =>{
|
||||||
|
return a - b
|
||||||
|
})
|
||||||
|
console.log(str2)
|
||||||
|
|
||||||
|
var str3 = numberArray.sort((a,b) =>{
|
||||||
|
return b-a
|
||||||
|
})
|
||||||
|
console.log(str3)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var arr = ['c','B','A','a','e']
|
||||||
|
var str4 = arr.sort((a,b) =>{
|
||||||
|
return a.toLowerCase() > b.toLowerCase() ? 1:-1
|
||||||
|
})
|
||||||
|
|
||||||
|
console.log(str4)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
var date = new Date()
|
||||||
|
var year = date.getFullYear()
|
||||||
|
var month = date.getMonth() + 1
|
||||||
|
month = month < 10 ? '0' + month:month
|
||||||
|
var dt = date.getDate()
|
||||||
|
dt = dt < 10 ? '0' + dt : dt
|
||||||
|
console.log(year + '-' + month + '-' + dt)
|
||||||
|
|
||||||
|
|
||||||
|
var str = ' < tr > < td > {$id} < /td><td>{$name}</td > < /tr>'
|
||||||
|
|
||||||
|
var stt = str.replace(/{\$id}/g,'tony')
|
||||||
|
console.log(str)
|
||||||
|
|
||||||
|
function escapeHtml(str){
|
||||||
|
return str.replace(/[<>&"]/g,function (a) {
|
||||||
|
switch(a){
|
||||||
|
case '<':
|
||||||
|
return "1";
|
||||||
|
break;
|
||||||
|
case '>':
|
||||||
|
return "2";
|
||||||
|
break;
|
||||||
|
case '&':
|
||||||
|
return "3";
|
||||||
|
break;
|
||||||
|
case '\"':
|
||||||
|
return '4';
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
console.log(escapeHtml('dhfdf>sdfhj<sdfhdjsf"sjsdhfdsf&sdgdfg'))
|
||||||
|
|
||||||
|
|
||||||
|
function random(start,end){
|
||||||
|
var choise = end - start
|
||||||
|
return Math.floor(Math.random() * choise + start)
|
||||||
|
}
|
||||||
|
var flag = true
|
||||||
|
var result = []
|
||||||
|
while (flag) {
|
||||||
|
var ran = random(10, 100)
|
||||||
|
|
||||||
|
if(result.indexOf(ran) === -1) {
|
||||||
|
|
||||||
|
result.push(ran)
|
||||||
|
}
|
||||||
|
if(result.length == 10){
|
||||||
|
flag = false
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
console.log(result.sort())
|
||||||
|
|
||||||
|
var array1 = ['a', 'b', 'c'];
|
||||||
|
var bArray = ['d', 'e', 'f'];
|
||||||
|
var a = array1.concat(bArray)
|
||||||
|
var shu = a.splice(1,1)
|
||||||
|
console.log(a)
|
||||||
|
|
||||||
|
|
||||||
|
var str = 'http://item.taobao.com/item.htm?a=1&b=2&c=&d=xxx&e'
|
||||||
|
function shu(str) {
|
||||||
|
var arr = str.split('?')[1].split('&')
|
||||||
|
var result = {}
|
||||||
|
for (let i = 0; i < arr.length; i++) {
|
||||||
|
var map = arr[i].split("=")
|
||||||
|
result[map[0]] = map[1]
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
console.log(shu(str))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
for (var i = 1; i <= 3; i++) {
|
||||||
|
|
||||||
|
setTimeout((function (a) {
|
||||||
|
console.log(a);
|
||||||
|
})(i), 0);
|
||||||
|
};
|
||||||
|
var str = " skdhdh sdhfd "
|
||||||
|
function trim(str){
|
||||||
|
return str.replace(/\s/g,'')
|
||||||
|
}
|
||||||
|
console.log(trim(str))
|
||||||
|
console.log(str)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function clone(obj){
|
||||||
|
var result
|
||||||
|
if(obj instanceof Array){
|
||||||
|
var len = obj.length
|
||||||
|
result = []
|
||||||
|
var j = len
|
||||||
|
while(j--){
|
||||||
|
result[j] = clone(obj[j])
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
else if(obj instanceof Object){
|
||||||
|
result = {}
|
||||||
|
for (const key in obj) {
|
||||||
|
result[key] = clone(obj[key])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
else{
|
||||||
|
return obj
|
||||||
|
}
|
||||||
|
return result
|
||||||
|
}
|
||||||
|
console.log(clone({name:"shuliqi",age:12}))
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
function obj() {
|
||||||
|
this.wow = function(){
|
||||||
|
alert("wow")
|
||||||
|
}
|
||||||
|
this.yelp = function(){
|
||||||
|
this.wow()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
4
|
||||||
|
5
|
||||||
|
6
|
||||||
|
7
|
||||||
|
8
|
||||||
|
9
|
||||||
|
10
|
||||||
|
11
|
||||||
|
12
|
||||||
|
13
|
||||||
|
14
|
||||||
|
15
|
||||||
|
|
||||||
|
|
||||||
|
2
|
||||||
|
3
|
||||||
|
4
|
||||||
|
5
|
||||||
|
6
|
||||||
|
7
|
||||||
|
8
|
||||||
|
function Dog() {
|
||||||
|
this.wow = function () {
|
||||||
|
alert('Wow');
|
||||||
|
}
|
||||||
|
this.yelp = function () {
|
||||||
|
this.wow();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function MadDog() {
|
||||||
|
this.yelp = function () {
|
||||||
|
var self = this;
|
||||||
|
setInterval(function () {
|
||||||
|
self.wow();
|
||||||
|
}, 500);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
MadDog.prototype = new Dog();
|
||||||
|
|
||||||
|
//for test
|
||||||
|
var dog = new Dog();
|
||||||
|
dog.yelp();
|
||||||
|
// var madDog = new MadDog();
|
||||||
|
// madDog.yelp();
|
||||||
53
public/css/mixin/_animation.scss
Normal file
53
public/css/mixin/_animation.scss
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
/**
|
||||||
|
* [css3过渡动画]
|
||||||
|
* @param {[string]} $el [eg：'.pressRotate']
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin myMove ($el) {
|
||||||
|
#{$el} {
|
||||||
|
-webkit-animation: mymove .5s ease-in;
|
||||||
|
-moz-animation: mymove .5s ease-in;
|
||||||
|
-o-animation: mymove .5s ease-in;
|
||||||
|
animation: mymove .5s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
130
public/css/mixin/_btn.scss
Normal file
130
public/css/mixin/_btn.scss
Normal file
@ -0,0 +1,130 @@
|
|||||||
|
// 按钮组件样式复用
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* [btn-bg 按钮样式复用，包含默认、移入、点击样式交互]
|
||||||
|
* @param {[string]} $bgc [eg：#fff，可选参]
|
||||||
|
* @param {[string]} $percent [eg：10%，可选参]
|
||||||
|
*/
|
||||||
|
@mixin btn-bg($bgc: #4790d0, $percent: 10%) {
|
||||||
|
background-color: $bgc;
|
||||||
|
&:hover {
|
||||||
|
background-color: lighten($bgc, $percent);
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: darken($bgc, $percent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin box-shadow($x, $y, $w, $b, $rgba) {
|
||||||
|
-webkit-box-shadow: $x $y $w $b $rgba;
|
||||||
|
-moz-box-shadow: $x $y $w $b $rgba;
|
||||||
|
box-shadow: $x $y $w $b $rgba;
|
||||||
|
}
|
||||||
|
@mixin transition($prop, $dur, $timingfun: linear) {
|
||||||
|
-webkit-transition: $prop $dur $timingfun;
|
||||||
|
-moz-transition: $prop $dur $timingfun;
|
||||||
|
-o-transition: $prop $dur $timingfun;
|
||||||
|
transition: $prop $dur $timingfun;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 边框颜色变化*/
|
||||||
|
@mixin btn-bor($bor: #4790d0, $pre: 10%) {
|
||||||
|
&:hover {
|
||||||
|
border-color: $bor;
|
||||||
|
color: $bor;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
border-color: darken($bor, $pre);
|
||||||
|
color: darken($bor, $pre);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 字体和背景色互换*/
|
||||||
|
@mixin btn-bg-cor($bgc: #fff, $cor: #f04134, $pre: 5%) {
|
||||||
|
color: $cor;
|
||||||
|
background-color: $bgc;
|
||||||
|
&:hover {
|
||||||
|
color: $bgc;
|
||||||
|
background-color: $cor;
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
background-color: darken($cor, $pre);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 点击有内阴影 */
|
||||||
|
@mixin btn-shadow($bgc: #4790d0,$pre: 5%) {
|
||||||
|
background-color: $bgc;
|
||||||
|
&:hover {
|
||||||
|
background-color: darken($bgc,$pre);
|
||||||
|
}
|
||||||
|
&:active {
|
||||||
|
-webkit-box-shadow: 0 3px 5px 0 rgba(0,0,0,.125) inset;
|
||||||
|
-moz-box-shadow: 0 3px 5px 0 rgba(0,0,0,.125) inset;
|
||||||
|
box-shadow: 0 3px 5px 0 rgba(0,0,0,.125) inset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 鼠标抬起出现点击后阴影 start*/
|
||||||
|
@mixin spread($bgc: #4790d0, $point: .6, $spr: 5px) {
|
||||||
|
position: relative;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
@include box-shadow(0,0,0,$spr,rgba($bgc,$point));
|
||||||
|
@include transition(all,.5s);
|
||||||
|
}
|
||||||
|
&:active:after {
|
||||||
|
opacity: 1;
|
||||||
|
|
||||||
|
@include box-shadow(0,0,0,0px,rgba($bgc,$point));
|
||||||
|
@include transition(all,0s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 鼠标抬起出现点击后阴影 end */
|
||||||
|
|
||||||
|
/* 波纹效果 start*/
|
||||||
|
@mixin ripple($top: -10%, $left: 10%) {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
display: block;
|
||||||
|
opacity: 0;
|
||||||
|
padding-top: 240%;
|
||||||
|
padding-left: 240%;
|
||||||
|
border-radius: 50%;
|
||||||
|
margin-top: -120%;
|
||||||
|
margin-left: -120%;
|
||||||
|
background: rgba(255, 255, 255, .3);
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
|
||||||
|
@include transition(all,1s);
|
||||||
|
}
|
||||||
|
&:active:after {
|
||||||
|
opacity: 1;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-left: 0;
|
||||||
|
margin-top: $top;
|
||||||
|
margin-left: $left;
|
||||||
|
|
||||||
|
@include transition(all,0s);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 波纹效果 end*/
|
||||||
|
/* 不可点击 start*/
|
||||||
|
@mixin disabled($fc: #999, $brc: #ccc, $bgc: #ddd) {
|
||||||
|
border: 1px solid $brc;
|
||||||
|
color: $fc;
|
||||||
|
background: $bgc;
|
||||||
|
|
||||||
|
cursor: no-drop;
|
||||||
|
}
|
||||||
|
/* 不可点击 end*/
|
||||||
7
public/css/mixin/_center_block.scss
Normal file
7
public/css/mixin/_center_block.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
// 块儿元素居中
|
||||||
|
|
||||||
|
@mixin center-block() {
|
||||||
|
display: block;
|
||||||
|
margin-right: auto;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
7
public/css/mixin/_checkbox-align.scss
Normal file
7
public/css/mixin/_checkbox-align.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* [单选、复选框垂直居中]
|
||||||
|
*/
|
||||||
|
@mixin checkbox-align() {
|
||||||
|
vertical-align: middle;
|
||||||
|
margin-bottom: 1px;
|
||||||
|
}
|
||||||
33
public/css/mixin/_clearfix.scss
Normal file
33
public/css/mixin/_clearfix.scss
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
/* 清浮动模块 */
|
||||||
|
@mixin clearfix() {
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
display: table;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
&:after {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin fl() {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin fr() {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fl {
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fr {
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.clearfix {
|
||||||
|
@include clearfix;
|
||||||
|
}
|
||||||
19
public/css/mixin/_iconfont.scss
Normal file
19
public/css/mixin/_iconfont.scss
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
@mixin iconfont($font, $http: http) {
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont";
|
||||||
|
/* project id 343429 */
|
||||||
|
src: url($http + "://at.alicdn.com/t/" + $font + ".eot");
|
||||||
|
src: url($http + "://at.alicdn.com/t/" + $font + ".eot?#iefix") format("embedded-opentype"), url($http + "://at.alicdn.com/t/" + $font + ".woff") format("woff"), url($http + "://at.alicdn.com/t/" + $font + ".ttf") format("truetype"), url($http + "://at.alicdn.com/t/" + $font + ".svg#iconfont") format("svg");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-text-stroke-width: 0.2px;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include iconfont("font_rl8clcpkugfd2t9")
|
||||||
7
public/css/mixin/_line-break.scss
Normal file
7
public/css/mixin/_line-break.scss
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
/**
|
||||||
|
* [实现英文自动断行]
|
||||||
|
*/
|
||||||
|
@mixin line-break(){
|
||||||
|
word-break: break-all;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
40
public/css/mixin/_media.scss
Normal file
40
public/css/mixin/_media.scss
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
@mixin media3840 {
|
||||||
|
@media screen and (max-width: 3850px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin media1920 {
|
||||||
|
@media screen and (max-width: 1930px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin media1600 {
|
||||||
|
@media screen and (max-width: 1610px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin media1440 {
|
||||||
|
@media screen and (max-width: 1450px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin media1400 {
|
||||||
|
@media screen and (max-width: 1410px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin media1366 {
|
||||||
|
@media screen and (max-width: 1376px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin media1280 {
|
||||||
|
@media screen and (max-width: 1290px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@mixin media1024 {
|
||||||
|
@media screen and (max-width: 1034px) {
|
||||||
|
@content;
|
||||||
|
}
|
||||||
|
}
|
||||||
117
public/css/mixin/_normalize.scss
Normal file
117
public/css/mixin/_normalize.scss
Normal file
@ -0,0 +1,117 @@
|
|||||||
|
/* pc端标准初始化样式 */
|
||||||
|
* {
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
font-weight: normal;
|
||||||
|
box-sizing: border-box;
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
i {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
&:focus {
|
||||||
|
outline: none!important;
|
||||||
|
|
||||||
|
-moz-outline: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
border: none;
|
||||||
|
background-color: #fff;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
select {
|
||||||
|
border: none;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
/* 清除下拉列表类似按钮的样式 */
|
||||||
|
|
||||||
|
-webkit-appearance: none;
|
||||||
|
-moz-appearance: none;
|
||||||
|
appearance: none;
|
||||||
|
&::-ms-expand {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
&:-webkit-autofill {
|
||||||
|
background-color: transparent!important;
|
||||||
|
-webkit-box-shadow: 0 0 0 50px white inset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::-webkit-input-placeholder { /* Chrome/Opera/Safari */
|
||||||
|
color: #a4b8c3;
|
||||||
|
}
|
||||||
|
::-moz-placeholder { /* Firefox 19+ */
|
||||||
|
color: #a4b8c3;
|
||||||
|
}
|
||||||
|
:-ms-input-placeholder { /* IE 10+ */
|
||||||
|
color: #a4b8c3;
|
||||||
|
}
|
||||||
|
:-moz-placeholder { /* Firefox 18- */
|
||||||
|
color: #a4b8c3;
|
||||||
|
}
|
||||||
|
input {
|
||||||
|
border: none;
|
||||||
|
color: #666;
|
||||||
|
|
||||||
|
outline: none;
|
||||||
|
/* google取消默认黄色背景 */
|
||||||
|
&:-webkit-autofill,
|
||||||
|
&:-webkit-autofill:hover,
|
||||||
|
&:-webkit-autofill:focus {
|
||||||
|
background-color: transparent!important;
|
||||||
|
-webkit-box-shadow: 0 0 0 50px white inset;
|
||||||
|
|
||||||
|
-webkit-text-fill-color: #333;
|
||||||
|
}
|
||||||
|
/* 清除ie删除文字叉叉和显示密码小眼睛 */
|
||||||
|
&::-ms-clear,
|
||||||
|
&::-ms-reveal {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
textarea {
|
||||||
|
resize: none;
|
||||||
|
&:-webkit-autofill {
|
||||||
|
background-color: transparent!important;
|
||||||
|
-webkit-box-shadow: 0 0 0 50px white inset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* jquery.placeholder.js插件对应样式 */
|
||||||
|
.my-placeholder {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
/* table start */
|
||||||
|
table {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
table-layout: inherit;
|
||||||
|
border-spacing: 0;
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
thead > tr > th {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
/* 浮动 */
|
||||||
|
.fl {
|
||||||
|
float: left !important;
|
||||||
|
}
|
||||||
|
.fr {
|
||||||
|
float: right !important;
|
||||||
|
}
|
||||||
17
public/css/mixin/_table-layout.scss
Normal file
17
public/css/mixin/_table-layout.scss
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
/**
|
||||||
|
* [tableLayout 模拟table布局垂直居中对齐，只传两个参数将识别为水平垂直居中]
|
||||||
|
* @param {[string]} $parent [eg：'.parent']
|
||||||
|
* @param {[string]} $child [eg：'.child']
|
||||||
|
* @param {[string]} $align [eg：center，可选参数，默认为水平居中]
|
||||||
|
*/
|
||||||
|
|
||||||
|
@mixin tableLayout($parent, $child, $align: center) {
|
||||||
|
#{$parent} {
|
||||||
|
display: table;
|
||||||
|
#{$child} {
|
||||||
|
display: table-cell;
|
||||||
|
text-align: $align;
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
8
public/css/mixin/_text_overflow.scss
Normal file
8
public/css/mixin/_text_overflow.scss
Normal file
@ -0,0 +1,8 @@
|
|||||||
|
/* 单行文本溢出省略 */
|
||||||
|
|
||||||
|
@mixin text-overflow() {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
16
public/css/mixin/_var.scss
Normal file
16
public/css/mixin/_var.scss
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
$bgc_2e2: #2e2e30;
|
||||||
|
$bgc_f64: #f64f4c;
|
||||||
|
$bgc_c4c: #c4c5c8;
|
||||||
|
$bgc_4a4: #4a4b4d;
|
||||||
|
$bgc_4e5: #4e5252;
|
||||||
|
$bgc_f0: #f0f0f0;
|
||||||
|
$bgc_e5: #e5e5e5;
|
||||||
|
$bgc_3fa: #3fa2f4;
|
||||||
|
$fc_fff: #fff;
|
||||||
|
$fc_f5: #f5f5f5;
|
||||||
|
$fc_aaa: #aaa;
|
||||||
|
$fc_444: #444;
|
||||||
|
$fc_3e: #3e3e3e;
|
||||||
|
$bor_cfd: #cfdde8;
|
||||||
|
$bgc_4da: #4da8f2;
|
||||||
|
$bgc_f5c: #f5c253;
|
||||||
3
public/css/second.css
Normal file
3
public/css/second.css
Normal file
File diff suppressed because one or more lines are too long
7
public/css/second.css.map
Normal file
7
public/css/second.css.map
Normal file
File diff suppressed because one or more lines are too long
524
public/css/second.scss
Normal file
524
public/css/second.scss
Normal file
@ -0,0 +1,524 @@
|
|||||||
|
@import "base.scss";
|
||||||
|
|
||||||
|
@import "mixin/_media.scss";
|
||||||
|
|
||||||
|
@import "drop_down.scss";
|
||||||
|
|
||||||
|
@import "mixin/_animation.scss";
|
||||||
|
|
||||||
|
.second-screen {
|
||||||
|
header {
|
||||||
|
> img {
|
||||||
|
@include media1920 {
|
||||||
|
top: 30%;
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-top {
|
||||||
|
height: 49%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.left-bottom {
|
||||||
|
height: 49%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 左侧样式 */
|
||||||
|
|
||||||
|
.aside-left {
|
||||||
|
.left-bottom {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
height: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con {
|
||||||
|
position: relative;
|
||||||
|
height: 75%;
|
||||||
|
font-size: px2em(24, 64);
|
||||||
|
color: #07bffb;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
height: 14%;
|
||||||
|
padding-left: 3%;
|
||||||
|
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
.bar-in {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
.bar-in {
|
||||||
|
width: 30%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
.bar-in {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
.bar-in {
|
||||||
|
width: 9%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(5) {
|
||||||
|
.bar-in {
|
||||||
|
width: 8%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(6) {
|
||||||
|
.bar-in {
|
||||||
|
width: 6%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:nth-of-type(7) {
|
||||||
|
.bar-in {
|
||||||
|
width: 3%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.num {
|
||||||
|
@include media3840 {
|
||||||
|
width: 30px;
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
width: 15px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.city-name {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
@include media3840 {
|
||||||
|
width: calc(100% - 200px);
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
width: calc(100% - 100px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.name-in {
|
||||||
|
display: block;
|
||||||
|
width: 100%;
|
||||||
|
height: 1.8em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bar {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 13%;
|
||||||
|
background: #121640;
|
||||||
|
|
||||||
|
.bar-in {
|
||||||
|
display: inline-block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
height: 100%;
|
||||||
|
background: linear-gradient(to right, #2690cf, #00fecc);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.rank-value {
|
||||||
|
margin-left: 4%;
|
||||||
|
font-size: px2em(64, 64);
|
||||||
|
|
||||||
|
@include media3840 {
|
||||||
|
width: 90px;
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
width: 60px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 地图部分样式 */
|
||||||
|
|
||||||
|
.middle-map .map-wrap h3 dl {
|
||||||
|
width: 16.6%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 右侧样式 */
|
||||||
|
|
||||||
|
.aside-right {
|
||||||
|
position: relative;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor_1_3_1.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
padding-top: 6%;
|
||||||
|
margin-left: 5%;
|
||||||
|
font-size: px2em(36, 64);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 舆情 start */
|
||||||
|
.public-opinion {
|
||||||
|
width: 100%;
|
||||||
|
height: 67%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
height: 13%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con {
|
||||||
|
height: 84%;
|
||||||
|
padding: 2% 5% 3%;
|
||||||
|
|
||||||
|
ul {
|
||||||
|
height: 19%;
|
||||||
|
margin-bottom: 2%;
|
||||||
|
margin-top: 4%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
display: none;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
height: 40%;
|
||||||
|
margin-bottom: 3%;
|
||||||
|
font-size: px2em(40, 64);
|
||||||
|
color: #00bbec;
|
||||||
|
|
||||||
|
span.fl {
|
||||||
|
width: 55%;
|
||||||
|
}
|
||||||
|
|
||||||
|
span.fr {
|
||||||
|
width: 45%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-name {
|
||||||
|
font-size: px2em(54, 64);
|
||||||
|
}
|
||||||
|
|
||||||
|
.time-show {
|
||||||
|
display: block;
|
||||||
|
color: rgba(0, 187, 236, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
&:before {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: .2em;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
margin-right: .2em;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.comments {
|
||||||
|
&:before {
|
||||||
|
background: url("../img/icon-comments.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.give-like {
|
||||||
|
margin-left: 10%;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
background: url("../img/icon-hreat.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
p {
|
||||||
|
display: -webkit-box;
|
||||||
|
width: 100%;
|
||||||
|
font-size: px2em(48, 64);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.active {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 舆情 end */
|
||||||
|
/* 物流 start */
|
||||||
|
.logistics {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 32%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
|
background: url("../img/bg1_4.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor1_4.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
height: 22%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con {
|
||||||
|
height: 70%;
|
||||||
|
margin: 0 5%;
|
||||||
|
font-size: px2em(20, 64);
|
||||||
|
|
||||||
|
.con-in {
|
||||||
|
display: none;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active.con-in {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.states {
|
||||||
|
height: 25%;
|
||||||
|
color: #0a50af;
|
||||||
|
|
||||||
|
li {
|
||||||
|
width: 23.4%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
width: 6.4%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-circle {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
width: 26.6%;
|
||||||
|
height: 100%;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
display: block;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 60%;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 1.8;
|
||||||
|
color: #07bffb;
|
||||||
|
background: url("../img/bg-circle.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
b {
|
||||||
|
position: absolute;
|
||||||
|
width: 200%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle1 {
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
content: "1";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle2 {
|
||||||
|
&:before {
|
||||||
|
content: "2";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle3 {
|
||||||
|
&:before {
|
||||||
|
content: "3";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle4 {
|
||||||
|
&:before {
|
||||||
|
content: "4";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.circle5 {
|
||||||
|
&:before {
|
||||||
|
content: "5";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.finished {
|
||||||
|
&:before {
|
||||||
|
background: url("../img/icon-finished.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.line {
|
||||||
|
display: block;
|
||||||
|
width: 63.4%;
|
||||||
|
height: 50%;
|
||||||
|
margin: 0 5%;
|
||||||
|
background: url("../img/line-point.png") repeat-x center;
|
||||||
|
background-size: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.progress {
|
||||||
|
height: 70%;
|
||||||
|
margin-top: 5%;
|
||||||
|
color: rgba(7, 191, 251, .5);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.new-height {
|
||||||
|
color: #0a50af;
|
||||||
|
}
|
||||||
|
|
||||||
|
li {
|
||||||
|
margin-bottom: 3%;
|
||||||
|
|
||||||
|
.pro-time {
|
||||||
|
@include media3840 {
|
||||||
|
width: 120px;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
width: 70px;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pro-con {
|
||||||
|
@include media3840 {
|
||||||
|
width: calc(100% - 140px);
|
||||||
|
}
|
||||||
|
@include media1920 {
|
||||||
|
width: calc(100% - 80px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 物流 end */
|
||||||
|
/* 图书馆馆藏 start */
|
||||||
|
.book-collection {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 44%;
|
||||||
|
background: url("../img/bg1_4.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
z-index: 2;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor2_3.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
height: 15%;
|
||||||
|
padding-top: 8%;
|
||||||
|
margin-left: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ranking {
|
||||||
|
width: 10%;
|
||||||
|
height: 100%;
|
||||||
|
padding-left: 4%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 48%;
|
||||||
|
padding-right: 2%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collection {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.borrowing {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tit {
|
||||||
|
height: 6%;
|
||||||
|
margin: 4% 0 3% 0;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
color: #2edbff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.con {
|
||||||
|
height: 70%;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
li {
|
||||||
|
height: 12.5%;
|
||||||
|
border-bottom: 1px solid rgba(19, 151, 255, .1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
/* 图书馆馆藏 end */
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 馆藏动效 */
|
||||||
|
|
||||||
|
@include myMove(".briRotate");
|
||||||
3
public/css/third.css
Normal file
3
public/css/third.css
Normal file
File diff suppressed because one or more lines are too long
7
public/css/third.css.map
Normal file
7
public/css/third.css.map
Normal file
File diff suppressed because one or more lines are too long
572
public/css/third.scss
Normal file
572
public/css/third.scss
Normal file
@ -0,0 +1,572 @@
|
|||||||
|
@import "base.scss";
|
||||||
|
@import "drop_down.scss";
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
height: 84%;
|
||||||
|
h3 {
|
||||||
|
font-size: px2em(36, 64);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.aside-left {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%;
|
||||||
|
.left-top {
|
||||||
|
overflow: auto;
|
||||||
|
&:before {
|
||||||
|
position: absolute;
|
||||||
|
left: 94%;
|
||||||
|
top: 89%;
|
||||||
|
width: 5%;
|
||||||
|
min-width: 20px;
|
||||||
|
height: 13%;
|
||||||
|
min-height: 50px;
|
||||||
|
background: url(../img/bor1_1_xie.png) no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 97%;
|
||||||
|
background: url("../img/bor1_1.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
.top-in {
|
||||||
|
width: 100%;
|
||||||
|
height: 95%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.book-rank {
|
||||||
|
border-bottom: 1px solid rgba(#1397ff, .1);
|
||||||
|
font-size: 14px;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.ranking {
|
||||||
|
color: #2edbff;
|
||||||
|
}
|
||||||
|
.hot {
|
||||||
|
font-size: px2em(32, 64);
|
||||||
|
color: #1397ff;
|
||||||
|
}
|
||||||
|
} // 公共样式
|
||||||
|
.ranking {
|
||||||
|
width: 13%;
|
||||||
|
padding-left: 5%;
|
||||||
|
}
|
||||||
|
.name {
|
||||||
|
width: 32%;
|
||||||
|
}
|
||||||
|
.company {
|
||||||
|
width: 34%;
|
||||||
|
}
|
||||||
|
.hot {
|
||||||
|
width: 20%;
|
||||||
|
padding-left: 2%;
|
||||||
|
}
|
||||||
|
.ranking,
|
||||||
|
.name,
|
||||||
|
.company,
|
||||||
|
.hot {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
height: 15%;
|
||||||
|
}
|
||||||
|
.tit {
|
||||||
|
height: 6%;
|
||||||
|
margin: 00;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
color: #2edbff;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top {
|
||||||
|
position: relative;
|
||||||
|
height: 52%;
|
||||||
|
overflow: hidden;
|
||||||
|
.con-wrap {
|
||||||
|
width: 100%;
|
||||||
|
height: 75%;
|
||||||
|
.over-wrap {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.con {
|
||||||
|
height: 100%;
|
||||||
|
li {
|
||||||
|
height: 7.5%;
|
||||||
|
line-height: 2;
|
||||||
|
.book-rank {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.book-show {
|
||||||
|
display: none;
|
||||||
|
position: relative;
|
||||||
|
margin-top: 2%;
|
||||||
|
overflow: hidden;
|
||||||
|
.img-box {
|
||||||
|
position: relative;
|
||||||
|
width: 25%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0 4% 0 16%;
|
||||||
|
img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 55%;
|
||||||
|
height: 100%;
|
||||||
|
margin-top: 2%;
|
||||||
|
font-size: px2em(12, 32);
|
||||||
|
overflow: hidden;
|
||||||
|
p {
|
||||||
|
height: 20%;
|
||||||
|
margin: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li.active {
|
||||||
|
height: auto;
|
||||||
|
background: rgba(#1397ff, .1);
|
||||||
|
.book-rank {
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom,
|
||||||
|
.top {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 51.5%;
|
||||||
|
.short {
|
||||||
|
width: 67%;
|
||||||
|
}
|
||||||
|
.hot {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.con {
|
||||||
|
height: 74%;
|
||||||
|
li {
|
||||||
|
height: 7.5%;
|
||||||
|
line-height: 2;
|
||||||
|
border-bottom: 1px solid rgba(19, 151, 255, .1);
|
||||||
|
.book-rank {
|
||||||
|
height: 100%;
|
||||||
|
border-bottom: none;
|
||||||
|
}
|
||||||
|
.short {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.top .con {
|
||||||
|
height: 97%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.aside-right {
|
||||||
|
position: relative;
|
||||||
|
width: 22%;
|
||||||
|
height: 100%; // 公共样式
|
||||||
|
.pie,
|
||||||
|
.trend {
|
||||||
|
position: relative;
|
||||||
|
&:before {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 3px;
|
||||||
|
background: #0078ff;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
top: 0;
|
||||||
|
opacity: .3;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.keys {
|
||||||
|
position: relative;
|
||||||
|
height: 21%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
|
h3 {
|
||||||
|
height: 40%;
|
||||||
|
padding-top: 6%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
.con {
|
||||||
|
height: 42%;
|
||||||
|
margin: 0 20px;
|
||||||
|
background: #081d5d;
|
||||||
|
dl {
|
||||||
|
width: 33.3%;
|
||||||
|
height: 100%;
|
||||||
|
padding: 10px 0 0 10px;
|
||||||
|
dt {
|
||||||
|
height: 40%;
|
||||||
|
font-size: px2em(28, 64);
|
||||||
|
color: #128df0;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
dd {
|
||||||
|
height: 60%;
|
||||||
|
font-family: Rubik;
|
||||||
|
font-size: px2em(48, 64);
|
||||||
|
font-weight: 300;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.middle {
|
||||||
|
position: relative;
|
||||||
|
&:before,
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 20%;
|
||||||
|
width: 1px;
|
||||||
|
height: 60%;
|
||||||
|
background: rgba(#fff, .1);
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
&:before {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
&:after {
|
||||||
|
right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pie {
|
||||||
|
position: relative;
|
||||||
|
height: 40%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
|
background: url("../img/bg1_1.png") no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor1_4.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
height: 20%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.pie1 {
|
||||||
|
width: 47%;
|
||||||
|
height: 100%;
|
||||||
|
padding-top: 8%;
|
||||||
|
// margin-left: 8%;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.pie2 {
|
||||||
|
width: 47%;
|
||||||
|
height: 100%;
|
||||||
|
position: relative;
|
||||||
|
padding-top: 8%;
|
||||||
|
margin-left: 3%;
|
||||||
|
}
|
||||||
|
.legend {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 6%;
|
||||||
|
left: 50%;
|
||||||
|
width: 80%;
|
||||||
|
min-width: 86px;
|
||||||
|
text-align: left;
|
||||||
|
margin-left: -13%;
|
||||||
|
font-size: 0.3125em;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
margin: 0% 3%;
|
||||||
|
&:before {
|
||||||
|
display: inline-block;
|
||||||
|
position: relative;
|
||||||
|
top: 1px;
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
margin-right: 1%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
&:nth-of-type(1) {
|
||||||
|
&:before {
|
||||||
|
background: #0239a7;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(2) {
|
||||||
|
&:before {
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(3) {
|
||||||
|
&:before {
|
||||||
|
background: #24feb4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(4) {
|
||||||
|
&:before {
|
||||||
|
background: #23539b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&:nth-of-type(5) {
|
||||||
|
&:before {
|
||||||
|
background: #3c9de4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.legend2 {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 11%;
|
||||||
|
left: 50%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
min-width: 225px;
|
||||||
|
font-size: px2em(20, 64);
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
span {
|
||||||
|
position: relative;
|
||||||
|
min-width: 100px;
|
||||||
|
margin-right: 4%;
|
||||||
|
float: left;
|
||||||
|
display: block;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.area-rank {
|
||||||
|
position: relative;
|
||||||
|
height: 20%;
|
||||||
|
margin-bottom: 2.5%;
|
||||||
|
background: url("../img/bg1_4.png") no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
overflow: hidden;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../img/bor1_5.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
height: 40%;
|
||||||
|
padding-top: 6%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
.recommend {
|
||||||
|
position: relative;
|
||||||
|
height: 560%;
|
||||||
|
margin: 0% 0 5% 5%;
|
||||||
|
font-size: px2em(20, 64); // color: #07bffb;
|
||||||
|
overflow: hidden;
|
||||||
|
ul {
|
||||||
|
li {
|
||||||
|
padding: 1% 2%;
|
||||||
|
margin: 1%;
|
||||||
|
display: inline-block;
|
||||||
|
font-size: px2em(20, 64);
|
||||||
|
background: rgba(7, 191, 251, 0.22)
|
||||||
|
}
|
||||||
|
} // ul {
|
||||||
|
// position: absolute;
|
||||||
|
// top: 0;
|
||||||
|
// width: 100%;
|
||||||
|
// }
|
||||||
|
// li {
|
||||||
|
// padding: 1% 1%;
|
||||||
|
// background: #00bbec;
|
||||||
|
// }
|
||||||
|
// span {
|
||||||
|
// display: inline-block;
|
||||||
|
// height: 100%;
|
||||||
|
// }
|
||||||
|
// .num {
|
||||||
|
// width: 4%;
|
||||||
|
// min-width: 15px;
|
||||||
|
// }
|
||||||
|
// .city-name {
|
||||||
|
// width: 8%;
|
||||||
|
// min-width: 40px;
|
||||||
|
// }
|
||||||
|
// .bar {
|
||||||
|
// width: 68%;
|
||||||
|
// height: 50%;
|
||||||
|
// font-size: 0;
|
||||||
|
// background: #03163b;
|
||||||
|
// -webkit-text-size-adjust: none;
|
||||||
|
// .bar-in {
|
||||||
|
// display: inline-block;
|
||||||
|
// height: 100%;
|
||||||
|
// background: linear-gradient(to right, #2690cf, #00fecc);
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// .rank-value {
|
||||||
|
// margin-left: 1.5%;
|
||||||
|
// font-size: px2em(24, 64);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.trend {
|
||||||
|
// position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%; // background: url("../img/bg1_3.png") no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
&:after {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%; // background: url("../img/bor1_6.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
h3 {
|
||||||
|
height: 20%;
|
||||||
|
padding-top: 4%;
|
||||||
|
margin-left: 5%;
|
||||||
|
}
|
||||||
|
;
|
||||||
|
}
|
||||||
|
.publish {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 38%;
|
||||||
|
background: url("../img/invalid-name.png");
|
||||||
|
background-size: 100% 100%;
|
||||||
|
h3 {
|
||||||
|
margin-top: 9%;
|
||||||
|
padding-left: 9%;
|
||||||
|
span {
|
||||||
|
float: right;
|
||||||
|
font-size: px2em(32, 64);
|
||||||
|
font-weight: normal;
|
||||||
|
font-style: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: normal;
|
||||||
|
letter-spacing: normal;
|
||||||
|
text-align: left;
|
||||||
|
color: #00bbec;
|
||||||
|
padding-right: 17%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
display: block;
|
||||||
|
margin: 1% auto;
|
||||||
|
width: 91%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-map,
|
||||||
|
.month-tip {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 25%;
|
||||||
|
transform: translate(-50%, 0);
|
||||||
|
font-size: px2em(36, 64);
|
||||||
|
}
|
||||||
|
|
||||||
|
.month-tip {
|
||||||
|
color: #00bbec;
|
||||||
|
}
|
||||||
|
|
||||||
|
header .gifImg .month-tip {
|
||||||
|
margin-top: 0%;
|
||||||
|
}
|
||||||
|
|
||||||
|
p .main-bottom {
|
||||||
|
width: 100%;
|
||||||
|
height: 5px;
|
||||||
|
span {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
background: #02336b;
|
||||||
|
}
|
||||||
|
.line1 {
|
||||||
|
width: 15%;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.line2 {
|
||||||
|
width: 55%;
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
|
.line3 {
|
||||||
|
width: 26%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_img {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 出版社排行 旋转效果
|
||||||
|
.pressRotate {
|
||||||
|
-webkit-animation: mymove .5s ease-in;
|
||||||
|
-moz-animation: mymove .5s ease-in;
|
||||||
|
-o-animation: mymove .5s ease-in;
|
||||||
|
animation: mymove .5s ease-in;
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-moz-keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-webkit-keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@-o-keyframes mymove {
|
||||||
|
0% {
|
||||||
|
transform: rotateX(0deg);
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: rotateX(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
143
public/ecss/style.css
Normal file
143
public/ecss/style.css
Normal file
@ -0,0 +1,143 @@
|
|||||||
|
@charset "utf-8";
|
||||||
|
/* CSS Document */
|
||||||
|
*{
|
||||||
|
-webkit-box-sizing: border-box;
|
||||||
|
-moz-box-sizing: border-box;
|
||||||
|
box-sizing: border-box}
|
||||||
|
*,body{padding:0px; margin:0px;font-family: "微软雅黑";}
|
||||||
|
body{color:#fff;font-size: 16px; background: #033c76 url(../images/bg.png);
|
||||||
|
}
|
||||||
|
html,body{min-height: 100%;}
|
||||||
|
li{ list-style-type:none;}
|
||||||
|
table{}
|
||||||
|
i{ margin:0px; padding:0px; text-indent:0px;}
|
||||||
|
img{ border:none; max-width: 100%;}
|
||||||
|
a{ text-decoration:none; color:#fff;}
|
||||||
|
a.active,a:focus{ outline:none!important; text-decoration:none;}
|
||||||
|
ol,ul,p,h1,h2,h3,h4,h5,h6{ padding:0; margin:0}
|
||||||
|
a:hover{ color:#06c; text-decoration: none!important}
|
||||||
|
.clearfix:after, .clearfix:before {display: table;content: " "}
|
||||||
|
.clearfix:after {clear: both}
|
||||||
|
.pulll_left{float:left;}
|
||||||
|
.pulll_right{float:right;}
|
||||||
|
i{font-style: normal;}
|
||||||
|
.text-w{color: #ffe400}
|
||||||
|
.text-d{color: #ff0000}
|
||||||
|
.text-s{color: #14e144}
|
||||||
|
.text-b{color: #00deff}
|
||||||
|
|
||||||
|
.head{position: relative; height: 90px; background: url(../images/topbg.png) center bottom no-repeat; background-size:100% 100%;}
|
||||||
|
.head h1{ font-size: 30px;text-align: center; line-height: 90px; color: #daf9ff;}
|
||||||
|
|
||||||
|
.head .time{position: absolute; left: 40px; line-height: 40px; top: 0; opacity: .7}
|
||||||
|
.head .name{position: absolute; right:40px; line-height: 40px; top: 0;opacity: .7}
|
||||||
|
|
||||||
|
.mainbox{padding: 0px 20px;}
|
||||||
|
.nav1{margin-left: -20px; margin-right:-20px;}
|
||||||
|
.nav1>li{padding:0 20px; float: left;}
|
||||||
|
|
||||||
|
.box{ margin-bottom: 20px; position: relative;}
|
||||||
|
.map{position:absolute; z-index: 10; opacity: .8;top: 5%; width:60%; height: 100%; left: 20%;}
|
||||||
|
|
||||||
|
.map1,.map2,.map3{ position:absolute; top:0; left: 0; width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;}
|
||||||
|
.map1{ z-index: 2; animation: myfirst2 15s infinite linear; display: flex;}
|
||||||
|
.map2{ z-index: 3; opacity: 0.2; animation: myfirst 10s infinite linear;}
|
||||||
|
.map3{ z-index: 1;}
|
||||||
|
.map1 img{ width: 100%}
|
||||||
|
.map2 img{width: 82%}
|
||||||
|
.map3 img{width: 80%}
|
||||||
|
|
||||||
|
.tit{ display: flex; align-items: flex-end;}
|
||||||
|
.tit span{ background: url(../images/line1.png) no-repeat bottom right; font-size: 20px; white-space: nowrap; padding-bottom: 10px; padding-right: 20px;}
|
||||||
|
.tit p{ background: url(../images/line2.png) no-repeat bottom right; width: 100%; height: 13px; margin-bottom: 5px; opacity: .5}
|
||||||
|
.boxnav{padding: 10px 0 ;}
|
||||||
|
.anchorBL,.BMap_cpyCtrl{display: none;}
|
||||||
|
#lg-counter{display: none;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.table1 th{ border-bottom: 1px solid #407abd; font-size: 14px; padding: 10px 0; color: rgba(255,255,255,.8)}
|
||||||
|
.table1 td{ border-bottom: 1px dotted#407abd;font-size: 14px; padding:10px 0;color: rgba(255,255,255,1)}
|
||||||
|
.table1 tr:last-child td{border: none;}
|
||||||
|
.table1 td span{font-size: 12px; transform: scale(.8); display: inline-block;}
|
||||||
|
.tqdb{height: 100%;}
|
||||||
|
.tqdb li{height: 50%; float: left; width:33.333%; text-align: center;}
|
||||||
|
.tqdb li div{height:calc(100% - 25px); }
|
||||||
|
.tqdb li h3{ font-size: 13px; color: #fff;}
|
||||||
|
.jbgc{ height: 100%; position: relative}
|
||||||
|
.jbgc li{ height: 100%; float: right;}
|
||||||
|
|
||||||
|
.jbgc li:nth-child(1){ height: 30%; position: absolute; left: 0;}
|
||||||
|
|
||||||
|
|
||||||
|
.jztxt div{padding: 20px 0 0 0; line-height: 120%;}
|
||||||
|
.jztxt div i{ font-size: 12px; color: #fff;}
|
||||||
|
.jztxt div h3{ font-size:20px; color: #00deff;font-family:electronicFont;}
|
||||||
|
.jztxt div span{ font-size: 13px; opacity: .5}
|
||||||
|
.jcjg{height: 100%; margin-left: -10px; margin-right: -10px;}
|
||||||
|
.jcjg li{width: 33.33333%;height: 100%; float: left; height: 100%; padding: 0 10px;}
|
||||||
|
.jcjg h3{background: url(../images/tit1.png) center right no-repeat; margin-bottom: 15px; font-weight: normal; font-size: 15px;}
|
||||||
|
.jcnav{position: relative; background: url(../images/bg1.png) no-repeat left center; height: 160px; width: 100%;}
|
||||||
|
.jcnav2{ background: url(../images/bg2.png) no-repeat left center; height: 200px; }
|
||||||
|
|
||||||
|
.jcnav img{position: absolute; left:14px; top: 50%; margin-top: -24px; }
|
||||||
|
.jcnav2 img{ left:16px; margin-top: -30px; }
|
||||||
|
.jcnavp{padding-left:98px;}
|
||||||
|
.jcnavp>div{ border: 1px solid #1070aa; display: flex; font-size: 14px; align-items: center; padding: 5px 10px; margin-bottom: 26px; height: 36px;}
|
||||||
|
.jcnav2 .jcnavp>div{margin-bottom: 17px;}
|
||||||
|
.jcnavp>div ol{ white-space: nowrap;}
|
||||||
|
.jcnavp>div span{ padding-left:10px; color: #00e4ff; white-space: nowrap; }
|
||||||
|
.jcnavp>div i{font-size: 12px;padding-left: 5px;}
|
||||||
|
|
||||||
|
|
||||||
|
.ylfw{height: 100%; margin-left: -5px; margin-right: -5px;}
|
||||||
|
.ylfw li{width: 50%;height: 33.33333%; float: left; padding: 0 5px;}
|
||||||
|
.ylfwbox {height:85%; border: 1px solid #1070aa; padding:10px 15px; position: relative;}
|
||||||
|
.fora{position: relative;}
|
||||||
|
.forb{position: absolute; width: 100%; left: 0; bottom: 0;}
|
||||||
|
.fora:before,.fora:after,.forb:before,.forb:after{position: absolute; content: ""; width:2px; height: 2px; border: 1px solid #00deff; opacity: .8;
|
||||||
|
box-shadow: 0 0 5px #00deff;}
|
||||||
|
.fora:before,.forb:before{left: -2px; top: -2px;}
|
||||||
|
.fora:after,.forb:after{right: -2px; top: -2px;}
|
||||||
|
|
||||||
|
|
||||||
|
.ylfwbox p{ font-size: 13px;}
|
||||||
|
.ylfwbox ol{ }
|
||||||
|
.ylfwbox ol i{ font-size: 12px;}
|
||||||
|
.ylfwbox ol em{ font-size: 14px; font-style: normal; padding: 0 5px;}
|
||||||
|
.ylfwbox ol span{ font-size: 24px; color: #00deff; text-shadow: 0 0 5px #00deff;font-family:electronicFont;}
|
||||||
|
|
||||||
|
.drqk{height: 100%;}
|
||||||
|
.drqk li{height: 33.33333333%; width: 50%; float: left;
|
||||||
|
display: flex;align-items: center;
|
||||||
|
}
|
||||||
|
@font-face{font-family:electronicFont;src:url(../font/DS-DIGIT.TTF)}
|
||||||
|
.icon{ background: url(../images/iconbg.png); width:63px; height: 63px; display: flex; justify-content: center;align-items: center; margin-right: 15px;}
|
||||||
|
.drqk li span{opacity: .5; font-size:15px;}
|
||||||
|
.drqk li i{ padding-left: 10px;}
|
||||||
|
.drqk li em{background: linear-gradient( 0deg,#45d3fd, #45d3fd, #61ddb1,#61ddb1); font-style:normal;
|
||||||
|
background-size: cover;font-family:electronicFont;
|
||||||
|
font-size: 30px;
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
text-fill-color: transparent;}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
@keyframes myfirst2
|
||||||
|
{
|
||||||
|
from {transform: rotate(0deg);}
|
||||||
|
to {transform: rotate(359deg);}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes myfirst
|
||||||
|
{
|
||||||
|
from {transform: rotate(0deg);}
|
||||||
|
to {transform: rotate(-359deg);}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
1
public/ejs/440300.json
Normal file
1
public/ejs/440300.json
Normal file
File diff suppressed because one or more lines are too long
84
public/ejs/area_echarts.js
Normal file
84
public/ejs/area_echarts.js
Normal file
@ -0,0 +1,84 @@
|
|||||||
|
|
||||||
|
function echarts_map() {
|
||||||
|
var myChart = echarts.init(document.getElementById('map'));
|
||||||
|
var uploadedDataURL = "js/440300.json";
|
||||||
|
var name = '';
|
||||||
|
$.get(uploadedDataURL, function(geoJson) {
|
||||||
|
echarts.registerMap(name, geoJson);//注册 地图
|
||||||
|
myChart.setOption(option = {
|
||||||
|
title : {
|
||||||
|
text: '广东省深圳市行政区划示意图',
|
||||||
|
subtext: '地图对应相应的json文件',
|
||||||
|
left: 'center',
|
||||||
|
top:30,
|
||||||
|
textStyle : {
|
||||||
|
color: '#fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
series: [{
|
||||||
|
|
||||||
|
type: 'map',
|
||||||
|
|
||||||
|
mapType: name,
|
||||||
|
|
||||||
|
label: {
|
||||||
|
|
||||||
|
normal: {
|
||||||
|
|
||||||
|
show:true,
|
||||||
|
textStyle: {
|
||||||
|
|
||||||
|
color: '#fff'
|
||||||
|
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
emphasis: {
|
||||||
|
|
||||||
|
show:true,
|
||||||
|
|
||||||
|
textStyle: {
|
||||||
|
|
||||||
|
color: '#fff'
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
areaColor: '#4c60ff',
|
||||||
|
borderColor: '#002097'
|
||||||
|
},
|
||||||
|
emphasis: {
|
||||||
|
areaColor: '#293fff'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
animation: false,
|
||||||
|
|
||||||
|
data: []
|
||||||
|
|
||||||
|
}]
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
$(window).load(function(){
|
||||||
|
echarts_map()
|
||||||
|
})
|
||||||
|
// })
|
||||||
|
|
||||||
|
|
||||||
22
public/ejs/echarts.min.js
vendored
Normal file
22
public/ejs/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
5
public/ejs/jquery.js
vendored
Normal file
5
public/ejs/jquery.js
vendored
Normal file
File diff suppressed because one or more lines are too long
545
public/ejs/js.js
Normal file
545
public/ejs/js.js
Normal file
@ -0,0 +1,545 @@
|
|||||||
|
$(function () {
|
||||||
|
echarts_1();
|
||||||
|
echarts_2();
|
||||||
|
echarts_3();
|
||||||
|
echarts_4();
|
||||||
|
echarts_5();
|
||||||
|
echarts_6();
|
||||||
|
echarts_7();
|
||||||
|
echarts_8();
|
||||||
|
function echarts_1() {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
var myChart = echarts.init(document.getElementById('echart1'));
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '14%',
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: '#0580f2',
|
||||||
|
fontSize: '24'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['rgba(176, 212, 251, .1)'],
|
||||||
|
series: [{
|
||||||
|
name: 'Line 1',
|
||||||
|
type: 'pie',
|
||||||
|
clockWise: true,
|
||||||
|
radius: ['75%', '85%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [{
|
||||||
|
value: 14,
|
||||||
|
name: '01',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: { // 完成的圆环的颜色
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#00cefc' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#367bec' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '86',
|
||||||
|
value: 20
|
||||||
|
}]
|
||||||
|
|
||||||
|
}]
|
||||||
|
|
||||||
|
}
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize",function(){
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function echarts_2() {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
var myChart = echarts.init(document.getElementById('echart2'));
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '22%',
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: '#0580f2',
|
||||||
|
fontSize: '24'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['rgba(176, 212, 251, .1)'],
|
||||||
|
series: [{
|
||||||
|
name: 'Line 1',
|
||||||
|
type: 'pie',
|
||||||
|
clockWise: true,
|
||||||
|
radius: ['75%', '85%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [{
|
||||||
|
value: 22,
|
||||||
|
name: '01',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: { // 完成的圆环的颜色
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#00cefc' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#367bec' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '78',
|
||||||
|
value: 20
|
||||||
|
}]
|
||||||
|
|
||||||
|
}]
|
||||||
|
|
||||||
|
}
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize",function(){
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function echarts_3() {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
var myChart = echarts.init(document.getElementById('echart3'));
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '10%',
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: '#0580f2',
|
||||||
|
fontSize: '24'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['rgba(176, 212, 251, .1)'],
|
||||||
|
series: [{
|
||||||
|
name: 'Line 1',
|
||||||
|
type: 'pie',
|
||||||
|
clockWise: true,
|
||||||
|
radius: ['75%', '85%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [{
|
||||||
|
value: 10,
|
||||||
|
name: '01',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: { // 完成的圆环的颜色
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#00cefc' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#367bec' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '02',
|
||||||
|
value: 90
|
||||||
|
}]
|
||||||
|
|
||||||
|
}]
|
||||||
|
|
||||||
|
}
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize",function(){
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function echarts_4() {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
var myChart = echarts.init(document.getElementById('echart4'));
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '30%',
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: '#0580f2',
|
||||||
|
fontSize: '24'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['rgba(176, 212, 251, .1)'],
|
||||||
|
series: [{
|
||||||
|
name: 'Line 1',
|
||||||
|
type: 'pie',
|
||||||
|
clockWise: true,
|
||||||
|
radius: ['75%', '85%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [{
|
||||||
|
value: 30,
|
||||||
|
name: '01',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: { // 完成的圆环的颜色
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#00cefc' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#367bec' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '02',
|
||||||
|
value: 70
|
||||||
|
}]
|
||||||
|
|
||||||
|
}]
|
||||||
|
|
||||||
|
}
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize",function(){
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function echarts_5() {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
var myChart = echarts.init(document.getElementById('echart5'));
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '12%',
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: '#0580f2',
|
||||||
|
fontSize: '24'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['rgba(176, 212, 251, .1)'],
|
||||||
|
series: [{
|
||||||
|
name: 'Line 1',
|
||||||
|
type: 'pie',
|
||||||
|
clockWise: true,
|
||||||
|
radius: ['75%', '85%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [{
|
||||||
|
value: 12,
|
||||||
|
name: '01',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: { // 完成的圆环的颜色
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#00cefc' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#367bec' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '02',
|
||||||
|
value: 88
|
||||||
|
}]
|
||||||
|
|
||||||
|
}]
|
||||||
|
|
||||||
|
}
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize",function(){
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function echarts_6() {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
var myChart = echarts.init(document.getElementById('echart6'));
|
||||||
|
option = {
|
||||||
|
title: {
|
||||||
|
text: '80%',
|
||||||
|
x: 'center',
|
||||||
|
y: 'center',
|
||||||
|
textStyle: {
|
||||||
|
fontWeight: 'normal',
|
||||||
|
color: '#0580f2',
|
||||||
|
fontSize: '24'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
color: ['rgba(176, 212, 251, .1)'],
|
||||||
|
series: [{
|
||||||
|
name: 'Line 1',
|
||||||
|
type: 'pie',
|
||||||
|
clockWise: true,
|
||||||
|
radius: ['75%', '85%'],
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
hoverAnimation: false,
|
||||||
|
data: [{
|
||||||
|
value: 80,
|
||||||
|
name: '01',
|
||||||
|
itemStyle: {
|
||||||
|
normal: {
|
||||||
|
color: { // 完成的圆环的颜色
|
||||||
|
colorStops: [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#00cefc' // 0% 处的颜色
|
||||||
|
}, {
|
||||||
|
offset: 1,
|
||||||
|
color: '#367bec' // 100% 处的颜色
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
label: {show: false},
|
||||||
|
labelLine: {show: false}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
name: '02',
|
||||||
|
value: 20
|
||||||
|
}]
|
||||||
|
|
||||||
|
}]
|
||||||
|
|
||||||
|
}
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize",function(){
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function echarts_7() {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
var myChart = echarts.init(document.getElementById('echart7'));
|
||||||
|
option = {
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '0%',
|
||||||
|
top:'15px',
|
||||||
|
right: '0%',
|
||||||
|
bottom: '0%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00'],
|
||||||
|
axisLine: {show:false,},
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
name: "（人）",
|
||||||
|
nameTextStyle: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 14
|
||||||
|
},
|
||||||
|
axisLine: { show:false, },
|
||||||
|
axisLabel: {
|
||||||
|
color: '#fff',
|
||||||
|
fontSize: 12
|
||||||
|
},
|
||||||
|
splitLine: {show:false, },
|
||||||
|
interval:100,
|
||||||
|
max:500
|
||||||
|
|
||||||
|
},
|
||||||
|
series: [{
|
||||||
|
type: 'bar',
|
||||||
|
barWidth: '30%',
|
||||||
|
|
||||||
|
itemStyle:{
|
||||||
|
|
||||||
|
normal:{
|
||||||
|
barBorderRadius: 50,
|
||||||
|
color:new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
|
||||||
|
offset: 0,
|
||||||
|
color: '#01fdcc'
|
||||||
|
}, {
|
||||||
|
offset: 0.8,
|
||||||
|
color: '#11a1d8'
|
||||||
|
}], false)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data: [25, 325, 164, 245, 475, 201, 121]
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize",function(){
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function echarts_8() {
|
||||||
|
// 基于准备好的dom，初始化echarts实例
|
||||||
|
var myChart = echarts.init(document.getElementById('echart8'));
|
||||||
|
|
||||||
|
|
||||||
|
option = {
|
||||||
|
color: ['#ec704a', '#2e4453', '#249cf9', '#fdb629', '#4b5cc4', '#f47983', '#8d4bbb', '#6635EF', '#FFAFDA'],
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: "{a} <br/>{b}: {c} ({d}%)"
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
right:0,
|
||||||
|
y:'center',
|
||||||
|
itemWidth: 12,
|
||||||
|
itemHeight: 12,
|
||||||
|
align: 'left',
|
||||||
|
textStyle: {
|
||||||
|
fontSize:12,
|
||||||
|
color: '#fff'
|
||||||
|
},
|
||||||
|
data: ['计算机设计大赛','电子设计大赛','东方财富杯','互联网+','挑战杯'],
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访问来源',
|
||||||
|
type: 'pie',
|
||||||
|
center: ['50%', '50%'],
|
||||||
|
radius: ['20%', '50%'],
|
||||||
|
label: {
|
||||||
|
normal: {
|
||||||
|
formatter: '{c|{d}%}',
|
||||||
|
|
||||||
|
rich: {
|
||||||
|
|
||||||
|
c: {
|
||||||
|
fontSize: 12,
|
||||||
|
color: '#fff',
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
labelLine: {
|
||||||
|
normal: {
|
||||||
|
show: true,
|
||||||
|
length:2,
|
||||||
|
length2:5,
|
||||||
|
lineStyle: {
|
||||||
|
|
||||||
|
width:1
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
roseType : 'area',
|
||||||
|
|
||||||
|
|
||||||
|
data: [{
|
||||||
|
value:10,
|
||||||
|
name: '计算机设计大赛'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 20,
|
||||||
|
name: '电子设计大赛'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value: 5,
|
||||||
|
name: '东方财富杯'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:15,
|
||||||
|
name: '互联网+'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
value:15,
|
||||||
|
name: '挑战杯'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
// 使用刚指定的配置项和数据显示图表。
|
||||||
|
myChart.setOption(option);
|
||||||
|
window.addEventListener("resize",function(){
|
||||||
|
myChart.resize();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
public/font/DS-DIGI.TTF
Normal file
BIN
public/font/DS-DIGI.TTF
Normal file
Binary file not shown.
BIN
public/font/DS-DIGIB.TTF
Normal file
BIN
public/font/DS-DIGIB.TTF
Normal file
Binary file not shown.
BIN
public/font/DS-DIGII.TTF
Normal file
BIN
public/font/DS-DIGII.TTF
Normal file
Binary file not shown.
BIN
public/font/DS-DIGIT.TTF
Normal file
BIN
public/font/DS-DIGIT.TTF
Normal file
Binary file not shown.
BIN
public/fonts/Rubik-Light.ttf
Normal file
BIN
public/fonts/Rubik-Light.ttf
Normal file
Binary file not shown.
BIN
public/fonts/Rubik-Medium.ttf
Normal file
BIN
public/fonts/Rubik-Medium.ttf
Normal file
Binary file not shown.
370
public/fonts/demo.css
Normal file
370
public/fonts/demo.css
Normal file
@ -0,0 +1,370 @@
|
|||||||
|
*{margin: 0;padding: 0;list-style: none;}
|
||||||
|
/*
|
||||||
|
KISSY CSS Reset
|
||||||
|
理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。
|
||||||
|
2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。
|
||||||
|
3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。
|
||||||
|
特色：1. 适应中文；2. 基于最新主流浏览器。
|
||||||
|
维护：玉伯<lifesinger@gmail.com>, 正淳<ragecarrier@gmail.com>
|
||||||
|
*/
|
||||||
|
|
||||||
|
/** 清除内外边距 **/
|
||||||
|
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */
|
||||||
|
dl, dt, dd, ul, ol, li, /* list elements 列表元素 */
|
||||||
|
pre, /* text formatting elements 文本格式元素 */
|
||||||
|
form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */
|
||||||
|
th, td /* table elements 表格元素 */ {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/** 设置默认字体 **/
|
||||||
|
body,
|
||||||
|
button, input, select, textarea /* for ie */ {
|
||||||
|
font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif;
|
||||||
|
}
|
||||||
|
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
|
||||||
|
address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */
|
||||||
|
code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */
|
||||||
|
small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */
|
||||||
|
|
||||||
|
/** 重置列表元素 **/
|
||||||
|
ul, ol { list-style: none; }
|
||||||
|
|
||||||
|
/** 重置文本格式元素 **/
|
||||||
|
a { text-decoration: none; }
|
||||||
|
a:hover { text-decoration: underline; }
|
||||||
|
|
||||||
|
|
||||||
|
/** 重置表单元素 **/
|
||||||
|
legend { color: #000; } /* for ie6 */
|
||||||
|
fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */
|
||||||
|
button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */
|
||||||
|
/* 注：optgroup 无法扶正 */
|
||||||
|
|
||||||
|
/** 重置表格元素 **/
|
||||||
|
table { border-collapse: collapse; border-spacing: 0; }
|
||||||
|
|
||||||
|
/* 清除浮动 */
|
||||||
|
.ks-clear:after, .clear:after {
|
||||||
|
content: '\20';
|
||||||
|
display: block;
|
||||||
|
height: 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
.ks-clear, .clear {
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
padding: 30px 100px;
|
||||||
|
width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;}
|
||||||
|
|
||||||
|
.helps{margin-top:40px;}
|
||||||
|
.helps pre{
|
||||||
|
padding:20px;
|
||||||
|
margin:10px 0;
|
||||||
|
border:solid 1px #e7e1cd;
|
||||||
|
background-color: #fffdef;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists{
|
||||||
|
width: 100% !important;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li{
|
||||||
|
float:left;
|
||||||
|
width: 100px;
|
||||||
|
height:180px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none !important;
|
||||||
|
}
|
||||||
|
.icon_lists .icon{
|
||||||
|
font-size: 42px;
|
||||||
|
line-height: 100px;
|
||||||
|
margin: 10px 0;
|
||||||
|
color:#333;
|
||||||
|
-webkit-transition: font-size 0.25s ease-out 0s;
|
||||||
|
-moz-transition: font-size 0.25s ease-out 0s;
|
||||||
|
transition: font-size 0.25s ease-out 0s;
|
||||||
|
|
||||||
|
}
|
||||||
|
.icon_lists .icon:hover{
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
.markdown {
|
||||||
|
color: #666;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight {
|
||||||
|
line-height: 1.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown img {
|
||||||
|
vertical-align: middle;
|
||||||
|
max-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
color: #404040;
|
||||||
|
font-weight: 500;
|
||||||
|
line-height: 40px;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2,
|
||||||
|
.markdown h3,
|
||||||
|
.markdown h4,
|
||||||
|
.markdown h5,
|
||||||
|
.markdown h6 {
|
||||||
|
color: #404040;
|
||||||
|
margin: 1.6em 0 0.6em 0;
|
||||||
|
font-weight: 500;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1 {
|
||||||
|
font-size: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h2 {
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h3 {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h4 {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h5 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h6 {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown hr {
|
||||||
|
height: 1px;
|
||||||
|
border: 0;
|
||||||
|
background: #e9e9e9;
|
||||||
|
margin: 16px 0;
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown p,
|
||||||
|
.markdown pre {
|
||||||
|
margin: 1em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > p,
|
||||||
|
.markdown > blockquote,
|
||||||
|
.markdown > .highlight,
|
||||||
|
.markdown > ol,
|
||||||
|
.markdown > ul {
|
||||||
|
width: 80%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ul > li {
|
||||||
|
list-style: circle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > ul li,
|
||||||
|
.markdown blockquote ul > li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > ul li p,
|
||||||
|
.markdown > ol li p {
|
||||||
|
margin: 0.6em 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown ol > li {
|
||||||
|
list-style: decimal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > ol li,
|
||||||
|
.markdown blockquote ol > li {
|
||||||
|
margin-left: 20px;
|
||||||
|
padding-left: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown code {
|
||||||
|
margin: 0 3px;
|
||||||
|
padding: 0 5px;
|
||||||
|
background: #eee;
|
||||||
|
border-radius: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown pre {
|
||||||
|
border-radius: 6px;
|
||||||
|
background: #f7f7f7;
|
||||||
|
padding: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown pre code {
|
||||||
|
border: none;
|
||||||
|
background: #f7f7f7;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown strong,
|
||||||
|
.markdown b {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0px;
|
||||||
|
empty-cells: show;
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
width: 95%;
|
||||||
|
margin-bottom: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th {
|
||||||
|
white-space: nowrap;
|
||||||
|
color: #333;
|
||||||
|
font-weight: 600;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th,
|
||||||
|
.markdown > table td {
|
||||||
|
border: 1px solid #e9e9e9;
|
||||||
|
padding: 8px 16px;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > table th {
|
||||||
|
background: #F7F7F7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote {
|
||||||
|
font-size: 90%;
|
||||||
|
color: #999;
|
||||||
|
border-left: 4px solid #e9e9e9;
|
||||||
|
padding-left: 0.8em;
|
||||||
|
margin: 1em 0;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown blockquote p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .anchor {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.3s ease;
|
||||||
|
margin-left: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown .waiting {
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown h1:hover .anchor,
|
||||||
|
.markdown h2:hover .anchor,
|
||||||
|
.markdown h3:hover .anchor,
|
||||||
|
.markdown h4:hover .anchor,
|
||||||
|
.markdown h5:hover .anchor,
|
||||||
|
.markdown h6:hover .anchor {
|
||||||
|
opacity: 1;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.markdown > br,
|
||||||
|
.markdown > p > br {
|
||||||
|
clear: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
display: block;
|
||||||
|
background: white;
|
||||||
|
padding: 0.5em;
|
||||||
|
color: #333333;
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-meta {
|
||||||
|
color: #969896;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-string,
|
||||||
|
.hljs-variable,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-strong,
|
||||||
|
.hljs-emphasis,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #df5000;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-keyword,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-type {
|
||||||
|
color: #a71d5d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-attribute {
|
||||||
|
color: #0086b3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-name {
|
||||||
|
color: #63a35c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-tag {
|
||||||
|
color: #333333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-title,
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-pseudo {
|
||||||
|
color: #795da3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition {
|
||||||
|
color: #55a532;
|
||||||
|
background-color: #eaffea;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion {
|
||||||
|
color: #bd2c00;
|
||||||
|
background-color: #ffecec;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre{
|
||||||
|
background: #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
52
public/fonts/demo_fontclass.html
Normal file
52
public/fonts/demo_fontclass.html
Normal file
@ -0,0 +1,52 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>IconFont</title>
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<link rel="stylesheet" href="iconfont.css">
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main markdown">
|
||||||
|
<h1>IconFont 图标</h1>
|
||||||
|
<ul class="icon_lists clear">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-xin"></i>
|
||||||
|
<div class="name">心</div>
|
||||||
|
<div class="fontclass">.icon-xin</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont icon-pinglun"></i>
|
||||||
|
<div class="name">评论</div>
|
||||||
|
<div class="fontclass">.icon-pinglun</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<h2 id="font-class-">font-class引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
|
||||||
|
<p>与unicode使用方式相比，具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
|
||||||
|
<li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
|
||||||
|
<li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
|
||||||
|
<li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>
|
||||||
|
|
||||||
|
|
||||||
|
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><link rel="stylesheet" type="text/css" href="./iconfont.css"></span></code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="lang-css hljs"><<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"></<span class="hljs-selector-tag">i</span>></code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
79
public/fonts/demo_symbol.html
Normal file
79
public/fonts/demo_symbol.html
Normal file
@ -0,0 +1,79 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>IconFont</title>
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<script src="iconfont.js"></script>
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
.icon {
|
||||||
|
/* 通过设置 font-size 来改变图标大小 */
|
||||||
|
width: 1em; height: 1em;
|
||||||
|
/* 图标和文字相邻时，垂直对齐 */
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||||
|
fill: currentColor;
|
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||||
|
normalize.css 中也包含这行 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main markdown">
|
||||||
|
<h1>IconFont 图标</h1>
|
||||||
|
<ul class="icon_lists clear">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xin"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">心</div>
|
||||||
|
<div class="fontclass">#icon-xin</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-pinglun"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">评论</div>
|
||||||
|
<div class="fontclass">#icon-pinglun</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
|
||||||
|
<h2 id="symbol-">symbol引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇<a href="">文章</a>
|
||||||
|
这种用法其实是做了一个svg的集合，与另外两种相比具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持多色图标了，不再受单色限制。</li>
|
||||||
|
<li>通过一些技巧，支持像字体那样，通过<code>font-size</code>,<code>color</code>来调整样式。</li>
|
||||||
|
<li>兼容性较差，支持 ie9+,及现代浏览器。</li>
|
||||||
|
<li>浏览器渲染svg的性能一般，还不如png。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-symbol-">第一步：引入项目下面生成的symbol代码：</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><span class="hljs-comment"><script src="./iconfont.js"></script></span></code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用css代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><style type=<span class="hljs-string">"text/css"</span>>
|
||||||
|
.icon {
|
||||||
|
width: <span class="hljs-number">1</span>em; height: <span class="hljs-number">1</span>em;
|
||||||
|
vertical-align: <span class="hljs-number">-0.15</span>em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
<<span class="hljs-regexp">/style></span></code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><svg <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"icon"</span> aria-hidden=<span class="hljs-string">"true"</span>><span class="xml"><span class="hljs-tag">
|
||||||
|
<<span class="hljs-name">use</span> <span class="hljs-attr">xlink:href</span>=<span class="hljs-string">"#icon-xxx"</span>></span><span class="hljs-tag"></<span class="hljs-name">use</span>></span>
|
||||||
|
</span><<span class="hljs-regexp">/svg>
|
||||||
|
</span></code></pre>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
90
public/fonts/demo_unicode.html
Normal file
90
public/fonts/demo_unicode.html
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>IconFont</title>
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
|
||||||
|
<style type="text/css">
|
||||||
|
|
||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url('iconfont.eot'); /* IE9*/
|
||||||
|
src: url('iconfont.eot#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||||
|
url('iconfont.woff') format('woff'), /* chrome, firefox */
|
||||||
|
url('iconfont.ttf') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||||
|
url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family:"iconfont" !important;
|
||||||
|
font-size:16px;
|
||||||
|
font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-text-stroke-width: 0.2px;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main markdown">
|
||||||
|
<h1>IconFont 图标</h1>
|
||||||
|
<ul class="icon_lists clear">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">心</div>
|
||||||
|
<div class="code">&#xe613;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<i class="icon iconfont"></i>
|
||||||
|
<div class="name">评论</div>
|
||||||
|
<div class="code">&#xe603;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<h2 id="unicode-">unicode引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>unicode是字体在网页端最原始的应用方式，特点是：</p>
|
||||||
|
<ul>
|
||||||
|
<li>兼容性最好，支持ie6+，及所有现代浏览器。</li>
|
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||||
|
<li>但是因为是字体，所以不支持多色。只能使用平台里单色的图标，就算项目里有多色图标也会自动去色。</li>
|
||||||
|
</ul>
|
||||||
|
<blockquote>
|
||||||
|
<p>注意：新版iconfont支持多色图标，这些多色图标在unicode模式下将不能使用，如果有需求建议使用symbol的引用方式</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>unicode使用步骤如下：</p>
|
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的font-face</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript">@font-face {
|
||||||
|
font-family: <span class="hljs-string">'iconfont'</span>;
|
||||||
|
src: url(<span class="hljs-string">'iconfont.eot'</span>);
|
||||||
|
src: url(<span class="hljs-string">'iconfont.eot?#iefix'</span>) format(<span class="hljs-string">'embedded-opentype'</span>),
|
||||||
|
url(<span class="hljs-string">'iconfont.woff'</span>) format(<span class="hljs-string">'woff'</span>),
|
||||||
|
url(<span class="hljs-string">'iconfont.ttf'</span>) format(<span class="hljs-string">'truetype'</span>),
|
||||||
|
url(<span class="hljs-string">'iconfont.svg#iconfont'</span>) format(<span class="hljs-string">'svg'</span>);
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-iconfont-">第二步：定义使用iconfont的样式</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript">.iconfont{
|
||||||
|
font-family:<span class="hljs-string">"iconfont"</span> !important;
|
||||||
|
font-size:<span class="hljs-number">16</span>px;font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-webkit-text-stroke-width: <span class="hljs-number">0.2</span>px;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||||
|
<pre><code class="lang-js hljs javascript"><i <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"iconfont"</span>>&#x33;<span class="xml"><span class="hljs-tag"></<span class="hljs-name">i</span>></span></span></code></pre>
|
||||||
|
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/fonts/digifaw.ttf
Normal file
BIN
public/fonts/digifaw.ttf
Normal file
Binary file not shown.
21
public/fonts/iconfont.css
Normal file
21
public/fonts/iconfont.css
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
|
||||||
|
@font-face {font-family: "iconfont";
|
||||||
|
src: url('iconfont.eot?t=1520929100106'); /* IE9*/
|
||||||
|
src: url('iconfont.eot?t=1520929100106#iefix') format('embedded-opentype'), /* IE6-IE8 */
|
||||||
|
url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1520929100106') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
|
||||||
|
url('iconfont.svg?t=1520929100106#iconfont') format('svg'); /* iOS 4.1- */
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family:"iconfont" !important;
|
||||||
|
font-size:16px;
|
||||||
|
font-style:normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xin:before { content: "\e613"; }
|
||||||
|
|
||||||
|
.icon-pinglun:before { content: "\e603"; }
|
||||||
|
|
||||||
BIN
public/fonts/iconfont.eot
Normal file
BIN
public/fonts/iconfont.eot
Normal file
Binary file not shown.
1
public/fonts/iconfont.js
Normal file
1
public/fonts/iconfont.js
Normal file
@ -0,0 +1 @@
|
|||||||
|
(function(window){var svgSprite='<svg><symbol id="icon-xin" viewBox="0 0 1024 1024"><path d="M714.07688 108.265796c-78.336136 0-152.170748 35.124985-201.437825 92.215238-49.267077-57.091276-123.099642-92.215238-201.437825-92.215238-138.79409 0-246.201331 105.373932-246.201331 241.502309 0 166.860309 152.171772 300.780391 382.722658 507.156692l64.916499 57.092299 64.916499-57.092299C808.108486 650.548496 960.279235 516.628414 960.279235 349.768105 960.279235 213.639728 852.871993 108.265796 714.07688 108.265796L714.07688 108.265796zM540.268322 799.156092l-9.093099 8.131191-18.535145 16.305361-18.534122-16.305361-9.049097-8.131191c-108.544135-97.111758-202.224748-180.978864-264.211521-255.971859-60.151985-72.851215-86.993307-132.500756-86.993307-193.417151 0-47.977711 18.142196-92.172259 51.058886-124.455523 32.786731-32.17377 77.638241-49.901527 126.292358-49.901527 56.260351 0 111.86681 25.530466 148.763139 68.284199l52.67571 61.112869 52.677756-61.112869c36.895305-42.753733 92.499717-68.284199 148.760069-68.284199 48.65514 0 93.50665 17.727757 126.292358 49.901527 32.917714 32.283264 51.058886 76.477812 51.058886 124.455523 0 60.915371-26.841322 120.564913-86.992283 193.417151C742.449068 618.177228 648.767432 702.044334 540.268322 799.156092L540.268322 799.156092zM540.268322 799.156092" ></path></symbol><symbol id="icon-pinglun" viewBox="0 0 1024 1024"><path d="M511.999488 847.882863c-28.734592 0-56.729303-2.604314-83.969807-7.099698L231.232673 960.185602 231.232673 761.40735C128.618486 689.355337 62.772174 578.889433 62.772174 454.825836c0-217.07906 201.129864-393.058051 449.228338-393.058051 248.084146 0 449.228338 175.980014 449.228338 393.058051C961.227826 671.917176 760.083635 847.882863 511.999488 847.882863zM511.999488 117.91762c-217.086932 0-393.074156 150.851707-393.074156 336.907193 0 114.166179 66.421434 214.898395 167.761552 275.820929l-1.768346 130.234133 132.171551-79.455633c30.4487 6.497994 62.117231 10.308787 94.910422 10.308787 217.101258 0 393.073132-150.825101 393.073132-336.907193C905.073644 268.769326 729.10177 117.91762 511.999488 117.91762zM736.614169 510.976694c-31.011542 0-56.154182-25.128307-56.154182-56.150858 0-31.010271 25.14264-56.151881 56.154182-56.151881s56.154182 25.14161 56.154182 56.151881C792.768351 485.848387 767.624687 510.976694 736.614169 510.976694zM511.999488 510.976694c-31.010518 0-56.153158-25.128307-56.153158-56.150858 0-31.010271 25.14264-56.151881 56.153158-56.151881 31.011542 0 56.154182 25.14161 56.154182 56.151881C568.15367 485.848387 543.01103 510.976694 511.999488 510.976694zM287.385831 510.976694c-31.010518 0-56.153158-25.128307-56.153158-56.150858 0-31.010271 25.14264-56.151881 56.153158-56.151881s56.153158 25.14161 56.153158 56.151881C343.53899 485.848387 318.39635 510.976694 287.385831 510.976694z" ></path></symbol></svg>';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)
|
||||||
39
public/fonts/iconfont.svg
Normal file
39
public/fonts/iconfont.svg
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?>
|
||||||
|
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
|
||||||
|
<!--
|
||||||
|
2013-9-30: Created.
|
||||||
|
-->
|
||||||
|
<svg>
|
||||||
|
<metadata>
|
||||||
|
Created by iconfont
|
||||||
|
</metadata>
|
||||||
|
<defs>
|
||||||
|
|
||||||
|
<font id="iconfont" horiz-adv-x="1024" >
|
||||||
|
<font-face
|
||||||
|
font-family="iconfont"
|
||||||
|
font-weight="500"
|
||||||
|
font-stretch="normal"
|
||||||
|
units-per-em="1024"
|
||||||
|
ascent="896"
|
||||||
|
descent="-128"
|
||||||
|
/>
|
||||||
|
<missing-glyph />
|
||||||
|
|
||||||
|
<glyph glyph-name="x" unicode="x" horiz-adv-x="1001"
|
||||||
|
d="M281 543q-27 -1 -53 -1h-83q-18 0 -36.5 -6t-32.5 -18.5t-23 -32t-9 -45.5v-76h912v41q0 16 -0.5 30t-0.5 18q0 13 -5 29t-17 29.5t-31.5 22.5t-49.5 9h-133v-97h-438v97zM955 310v-52q0 -23 0.5 -52t0.5 -58t-10.5 -47.5t-26 -30t-33 -16t-31.5 -4.5q-14 -1 -29.5 -0.5
|
||||||
|
t-29.5 0.5h-32l-45 128h-439l-44 -128h-29h-34q-20 0 -45 1q-25 0 -41 9.5t-25.5 23t-13.5 29.5t-4 30v167h911zM163 247q-12 0 -21 -8.5t-9 -21.5t9 -21.5t21 -8.5q13 0 22 8.5t9 21.5t-9 21.5t-22 8.5zM316 123q-8 -26 -14 -48q-5 -19 -10.5 -37t-7.5 -25t-3 -15t1 -14.5
|
||||||
|
t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-5 19 -11 39h-368zM336 498v228q0 11 2.5 23t10 21.5t20.5 15.5t34 6h188q31 0 51.5 -14.5t20.5 -52.5v-227h-327z" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="xin" unicode="" d="M714.07688 703.734204c-78.336136 0-152.170748-35.124985-201.437825-92.215238-49.267077 57.091276-123.099642 92.215238-201.437825 92.215238-138.79409 0-246.201331-105.373932-246.201331-241.502309 0-166.860309 152.171772-300.780391 382.722658-507.156692l64.916499-57.092299 64.916499 57.092299C808.108486 161.451504 960.279235 295.371586 960.279235 462.231895 960.279235 598.360272 852.871993 703.734204 714.07688 703.734204L714.07688 703.734204zM540.268322 12.843908l-9.093099-8.131191-18.535145-16.305361-18.534122 16.305361-9.049097 8.131191c-108.544135 97.111758-202.224748 180.978864-264.211521 255.971859-60.151985 72.851215-86.993307 132.500756-86.993307 193.417151 0 47.977711 18.142196 92.172259 51.058886 124.455523 32.786731 32.17377 77.638241 49.901527 126.292358 49.901527 56.260351 0 111.86681-25.530466 148.763139-68.284199l52.67571-61.112869 52.677756 61.112869c36.895305 42.753733 92.499717 68.284199 148.760069 68.284199 48.65514 0 93.50665-17.727757 126.292358-49.901527 32.917714-32.283264 51.058886-76.477812 51.058886-124.455523 0-60.915371-26.841322-120.564913-86.992283-193.417151C742.449068 193.822772 648.767432 109.955666 540.268322 12.843908L540.268322 12.843908zM540.268322 12.843908" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
<glyph glyph-name="pinglun" unicode="" d="M511.999488 48.117137c-28.734592 0-56.729303 2.604314-83.969807 7.099698L231.232673-64.185602 231.232673 134.59265C128.618486 206.644663 62.772174 317.110567 62.772174 441.174164c0 217.07906 201.129864 393.058051 449.228338 393.058051 248.084146 0 449.228338-175.980014 449.228338-393.058051C961.227826 224.082824 760.083635 48.117137 511.999488 48.117137zM511.999488 778.08238c-217.086932 0-393.074156-150.851707-393.074156-336.907193 0-114.166179 66.421434-214.898395 167.761552-275.820929l-1.768346-130.234133 132.171551 79.455633c30.4487-6.497994 62.117231-10.308787 94.910422-10.308787 217.101258 0 393.073132 150.825101 393.073132 336.907193C905.073644 627.230674 729.10177 778.08238 511.999488 778.08238zM736.614169 385.023306c-31.011542 0-56.154182 25.128307-56.154182 56.150858 0 31.010271 25.14264 56.151881 56.154182 56.151881s56.154182-25.14161 56.154182-56.151881C792.768351 410.151613 767.624687 385.023306 736.614169 385.023306zM511.999488 385.023306c-31.010518 0-56.153158 25.128307-56.153158 56.150858 0 31.010271 25.14264 56.151881 56.153158 56.151881 31.011542 0 56.154182-25.14161 56.154182-56.151881C568.15367 410.151613 543.01103 385.023306 511.999488 385.023306zM287.385831 385.023306c-31.010518 0-56.153158 25.128307-56.153158 56.150858 0 31.010271 25.14264 56.151881 56.153158 56.151881s56.153158-25.14161 56.153158-56.151881C343.53899 410.151613 318.39635 385.023306 287.385831 385.023306z" horiz-adv-x="1024" />
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</font>
|
||||||
|
</defs></svg>
|
||||||
|
After Width: | Height: | Size: 3.9 KiB |
BIN
public/fonts/iconfont.ttf
Normal file
BIN
public/fonts/iconfont.ttf
Normal file
Binary file not shown.
BIN
public/fonts/iconfont.woff
Normal file
BIN
public/fonts/iconfont.woff
Normal file
Binary file not shown.
BIN
public/fonts/rubik-regular-webfont.ttf
Normal file
BIN
public/fonts/rubik-regular-webfont.ttf
Normal file
Binary file not shown.
141
public/four.html
Normal file
141
public/four.html
Normal file
@ -0,0 +1,141 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<meta http-equiv="refresh" content="60;url=http://localhost:8080/screen.html">
|
||||||
|
<link rel="stylesheet" href="css/four.css">
|
||||||
|
<link rel="stylesheet" href="./fonts/iconfont.css">
|
||||||
|
<!-- <script src="js/echarts.min.js"></script> -->
|
||||||
|
<script src="js/jquery.min.js"></script>
|
||||||
|
<script src="js/macarons.js"></script>
|
||||||
|
<!-- <script src="js/china.js"></script> -->
|
||||||
|
<script src="js/countUp.js"></script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<ul class="nav">
|
||||||
|
|
||||||
|
<li class="drop-down">
|
||||||
|
<a href="#"></a>
|
||||||
|
|
||||||
|
<ul class="drop-down-content">
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="./home.html">自动切换</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="./screen.html">第一屏</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="./thrid.html">第二屏</a>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
|
||||||
|
<li>
|
||||||
|
<a href="./four.html">第三屏</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./index.html">回到主页</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="first-screen root-wrap">
|
||||||
|
<header>
|
||||||
|
<p style="font-family: '楷体';">竞赛数据统计</p>
|
||||||
|
<!-- <img src="./img/cnonix.png" /> -->
|
||||||
|
<!-- <div class="title_img">
|
||||||
|
<img src="img/title_left_img.png" alt="">
|
||||||
|
</div> -->
|
||||||
|
<!-- <span class="month-tip">2017年1月</span> -->
|
||||||
|
</header>
|
||||||
|
<div class="main clearfix">
|
||||||
|
<!-- 同类图书 -->
|
||||||
|
<div class="aside-left fl">
|
||||||
|
<h3>优秀作品</h3>
|
||||||
|
<ul class="clearfix">
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="middle_con fl">
|
||||||
|
<div class="middle_top">
|
||||||
|
<div class="con_left fl">
|
||||||
|
</div>
|
||||||
|
<div class="con_right fl clearfix">
|
||||||
|
<dl class="clearfix">
|
||||||
|
<dt>标签</dt>
|
||||||
|
<dd class="clearfix">
|
||||||
|
<ul class="bookLabel clearfix"></ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
<dl class="clearfix">
|
||||||
|
<dt class="clearfix">主题词</dt>
|
||||||
|
<dd class="clearfix">
|
||||||
|
<ul class="themaWords clearfix"></ul>
|
||||||
|
</dd>
|
||||||
|
</dl>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="con_link">
|
||||||
|
<h3>比赛简介</h3>
|
||||||
|
<div class="link_title link_con">
|
||||||
|
<!-- 钱锺书所著的《围城》是一幅栩栩如生的世井百态图，人生的酸甜苦辣千般滋味均在其中得到了淋漓尽致的体现。钱钟书先生将自己的语言天才并入极其渊博的知识，再添加上一些讽刺主义的幽默调料，以一书而定江山。《围城》显示给我们一个真正的聪明人是怎样看人生，又怎样用所有作家都必得使用的文字来表述自己的“观”和“感”的。 -->
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="con_link">
|
||||||
|
<h3>比赛流程</h3>
|
||||||
|
<ul class="link_ul">
|
||||||
|
<!-- <li>1.序</li>
|
||||||
|
<li>2.围城</li>
|
||||||
|
<li>3.围城</li>
|
||||||
|
<li>4.记钱钟书与《围城》——杨绛</li> -->
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="con_link">
|
||||||
|
<h3>优秀团队介绍</h3>
|
||||||
|
<div class="link_title link_author"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="middle_button">
|
||||||
|
<div class="button_left">
|
||||||
|
<h3>更多比赛</h3>
|
||||||
|
<div class="button_con">
|
||||||
|
<div class="container purchase claefix">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="button_right">
|
||||||
|
<h3>比赛推荐</h3>
|
||||||
|
<div class="button_con">
|
||||||
|
<div class="container jieyue claefix">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="aside-right clearfix fl">
|
||||||
|
<div class="con_top clearfix">
|
||||||
|
<h3>选手评价</h3>
|
||||||
|
<div class="aside_con clearfix">
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="main-bottom">
|
||||||
|
<span class="line1"></span>
|
||||||
|
<span class="line2"></span>
|
||||||
|
<span class="line3"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script src="js/four.js"></script>
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
41
public/home.html
Normal file
41
public/home.html
Normal file
@ -0,0 +1,41 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="ie=edge">
|
||||||
|
<script src="js/jquery.min.js"></script>
|
||||||
|
<link rel="stylesheet" href="css/iframe.css">
|
||||||
|
<title>大屏</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<ul class="nav">
|
||||||
|
<li class="drop-down">
|
||||||
|
<a href="#"></a>
|
||||||
|
<ul class="drop-down-content">
|
||||||
|
<li>
|
||||||
|
<a href="./home.html">自动切换</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./screen.html">第一屏</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./thrid.html">第二屏</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./four.html">第三屏</a>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<a href="./index.html">回到主页</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="home">
|
||||||
|
<iframe id="demo1" src="screen.html" frameborder="0" class="state-01 demo1"></iframe>
|
||||||
|
<iframe id="demo2" src="thrid.html" frameborder="0" class="state-01 demo2"></iframe>
|
||||||
|
<iframe id="demo3" src="four.html" frameborder="0" class="state-01 demo3"></iframe>
|
||||||
|
</div>
|
||||||
|
<script src="js/home.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
BIN
public/images/bg.png
Normal file
BIN
public/images/bg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 397 KiB |
BIN
public/images/bg1.png
Normal file
BIN
public/images/bg1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.0 KiB |
BIN
public/images/bg2.png
Normal file
BIN
public/images/bg2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 MiB |
BIN
public/images/bg3.png
Normal file
BIN
public/images/bg3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 366 KiB |
BIN
public/images/bgg.png
Normal file
BIN
public/images/bgg.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.0 KiB |
BIN
public/images/chanye.png
Normal file
BIN
public/images/chanye.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 458 B |
BIN
public/images/chooseKuang.png
Normal file
BIN
public/images/chooseKuang.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.0 KiB |
BIN
public/images/icon1.png
Normal file
BIN
public/images/icon1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
public/images/icon2.png
Normal file
BIN
public/images/icon2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.7 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user