init
This commit is contained in:
parent
0aff83f776
commit
59d33d03f2
|
|
@ -0,0 +1,23 @@
|
||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
24
README.md
24
README.md
|
|
@ -1,2 +1,24 @@
|
||||||
# bj-bigdata-platform
|
# bigdata-spacetime
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Lints and fixes files
|
||||||
|
```
|
||||||
|
npm run lint
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "es5",
|
||||||
|
"module": "esnext",
|
||||||
|
"baseUrl": "./",
|
||||||
|
"moduleResolution": "node",
|
||||||
|
"paths": {
|
||||||
|
"@/*": [
|
||||||
|
"src/*"
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"lib": [
|
||||||
|
"esnext",
|
||||||
|
"dom",
|
||||||
|
"dom.iterable",
|
||||||
|
"scripthost"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -0,0 +1,35 @@
|
||||||
|
{
|
||||||
|
"name": "bigdata-spacetime",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"core-js": "^3.8.3",
|
||||||
|
"element-ui": "^2.15.9",
|
||||||
|
"jquery": "^3.6.0",
|
||||||
|
"sass": "^1.32.0",
|
||||||
|
"sass-loader": "^10.1.0",
|
||||||
|
"vue": "^2.6.14",
|
||||||
|
"vue-router": "^3.1.3"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@babel/core": "^7.12.16",
|
||||||
|
"@babel/eslint-parser": "^7.12.16",
|
||||||
|
"@vue/cli-plugin-babel": "~5.0.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~5.0.0",
|
||||||
|
"@vue/cli-service": "~5.0.0",
|
||||||
|
"eslint": "^7.32.0",
|
||||||
|
"eslint-plugin-vue": "^8.0.3",
|
||||||
|
"vue-template-compiler": "^2.6.14"
|
||||||
|
},
|
||||||
|
"eslintConfig": {},
|
||||||
|
"browserslist": [
|
||||||
|
"> 1%",
|
||||||
|
"last 2 versions",
|
||||||
|
"not dead"
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
|
|
@ -0,0 +1,18 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title><%= htmlWebpackPlugin.options.title %></title>
|
||||||
|
<script src="http://39.106.221.248:9025/geowinmap/api?version=v6.0&map=map/map"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,32 @@
|
||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
color: #FFFFFF;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,40 @@
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
-ms-overflow-style: none;
|
||||||
|
overflow: -moz-hidden-unscrollable;
|
||||||
|
scrollbar-width: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
* ::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
width: 0 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-center {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-between {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.d-around {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
a, a:hover, a:active, a:focus {
|
||||||
|
text-decoration: none;
|
||||||
|
color: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.c-point {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,539 @@
|
||||||
|
/* Logo 字体 */
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont logo";
|
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
|
||||||
|
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
|
||||||
|
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
|
||||||
|
}
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
font-family: "iconfont logo";
|
||||||
|
font-size: 160px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* tabs */
|
||||||
|
.nav-tabs {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-tabs .nav-more {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: 42px;
|
||||||
|
line-height: 42px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs {
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
}
|
||||||
|
|
||||||
|
#tabs li {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 16px;
|
||||||
|
border-bottom: 2px solid transparent;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#tabs .active {
|
||||||
|
border-bottom-color: #f00;
|
||||||
|
color: #222;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tab-container .content {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 页面布局 */
|
||||||
|
.main {
|
||||||
|
padding: 30px 100px;
|
||||||
|
width: 960px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo {
|
||||||
|
color: #333;
|
||||||
|
text-align: left;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
line-height: 1;
|
||||||
|
height: 110px;
|
||||||
|
margin-top: -50px;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
font-size: 160px;
|
||||||
|
color: #333;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
overflow: hidden;
|
||||||
|
*zoom: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li {
|
||||||
|
width: 100px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
margin-right: 20px;
|
||||||
|
text-align: center;
|
||||||
|
list-style: none !important;
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
line-height: 1.2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon {
|
||||||
|
display: block;
|
||||||
|
height: 100px;
|
||||||
|
line-height: 100px;
|
||||||
|
font-size: 42px;
|
||||||
|
margin: 10px auto;
|
||||||
|
color: #333;
|
||||||
|
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
-moz-transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
transition: font-size 0.25s linear, width 0.25s linear;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .icon:hover {
|
||||||
|
font-size: 100px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists .svg-icon {
|
||||||
|
/* 通过设置 font-size 来改变图标大小 */
|
||||||
|
width: 1em;
|
||||||
|
/* 图标和文字相邻时，垂直对齐 */
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
/* 通过设置 color 来改变 SVG 的颜色/fill */
|
||||||
|
fill: currentColor;
|
||||||
|
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
|
||||||
|
normalize.css 中也包含这行 */
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon_lists li .name,
|
||||||
|
.icon_lists li .code-name {
|
||||||
|
color: #666;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* markdown 样式 */
|
||||||
|
.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 {
|
||||||
|
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 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;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 代码高亮 */
|
||||||
|
/* PrismJS 1.15.0
|
||||||
|
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
|
||||||
|
/**
|
||||||
|
* prism.js default theme for JavaScript, CSS and HTML
|
||||||
|
* Based on dabblet (http://dabblet.com)
|
||||||
|
* @author Lea Verou
|
||||||
|
*/
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
color: black;
|
||||||
|
background: none;
|
||||||
|
text-shadow: 0 1px white;
|
||||||
|
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||||
|
text-align: left;
|
||||||
|
white-space: pre;
|
||||||
|
word-spacing: normal;
|
||||||
|
word-break: normal;
|
||||||
|
word-wrap: normal;
|
||||||
|
line-height: 1.5;
|
||||||
|
|
||||||
|
-moz-tab-size: 4;
|
||||||
|
-o-tab-size: 4;
|
||||||
|
tab-size: 4;
|
||||||
|
|
||||||
|
-webkit-hyphens: none;
|
||||||
|
-moz-hyphens: none;
|
||||||
|
-ms-hyphens: none;
|
||||||
|
hyphens: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::-moz-selection,
|
||||||
|
pre[class*="language-"] ::-moz-selection,
|
||||||
|
code[class*="language-"]::-moz-selection,
|
||||||
|
code[class*="language-"] ::-moz-selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
pre[class*="language-"]::selection,
|
||||||
|
pre[class*="language-"] ::selection,
|
||||||
|
code[class*="language-"]::selection,
|
||||||
|
code[class*="language-"] ::selection {
|
||||||
|
text-shadow: none;
|
||||||
|
background: #b3d4fc;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media print {
|
||||||
|
|
||||||
|
code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Code blocks */
|
||||||
|
pre[class*="language-"] {
|
||||||
|
padding: 1em;
|
||||||
|
margin: .5em 0;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
:not(pre)>code[class*="language-"],
|
||||||
|
pre[class*="language-"] {
|
||||||
|
background: #f5f2f0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Inline code */
|
||||||
|
:not(pre)>code[class*="language-"] {
|
||||||
|
padding: .1em;
|
||||||
|
border-radius: .3em;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.comment,
|
||||||
|
.token.prolog,
|
||||||
|
.token.doctype,
|
||||||
|
.token.cdata {
|
||||||
|
color: slategray;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.punctuation {
|
||||||
|
color: #999;
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespace {
|
||||||
|
opacity: .7;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.property,
|
||||||
|
.token.tag,
|
||||||
|
.token.boolean,
|
||||||
|
.token.number,
|
||||||
|
.token.constant,
|
||||||
|
.token.symbol,
|
||||||
|
.token.deleted {
|
||||||
|
color: #905;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.selector,
|
||||||
|
.token.attr-name,
|
||||||
|
.token.string,
|
||||||
|
.token.char,
|
||||||
|
.token.builtin,
|
||||||
|
.token.inserted {
|
||||||
|
color: #690;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.operator,
|
||||||
|
.token.entity,
|
||||||
|
.token.url,
|
||||||
|
.language-css .token.string,
|
||||||
|
.style .token.string {
|
||||||
|
color: #9a6e3a;
|
||||||
|
background: hsla(0, 0%, 100%, .5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.atrule,
|
||||||
|
.token.attr-value,
|
||||||
|
.token.keyword {
|
||||||
|
color: #07a;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.function,
|
||||||
|
.token.class-name {
|
||||||
|
color: #DD4A68;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.regex,
|
||||||
|
.token.important,
|
||||||
|
.token.variable {
|
||||||
|
color: #e90;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.important,
|
||||||
|
.token.bold {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.italic {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.token.entity {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,418 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8"/>
|
||||||
|
<title>iconfont Demo</title>
|
||||||
|
<link rel="shortcut icon" href="//img.alicdn.com/imgextra/i2/O1CN01ZyAlrn1MwaMhqz36G_!!6000000001499-73-tps-64-64.ico" type="image/x-icon"/>
|
||||||
|
<link rel="icon" type="image/svg+xml" href="//img.alicdn.com/imgextra/i4/O1CN01EYTRnJ297D6vehehJ_!!6000000008020-55-tps-64-64.svg"/>
|
||||||
|
<link rel="stylesheet" href="https://g.alicdn.com/thx/cube/1.3.2/cube.min.css">
|
||||||
|
<link rel="stylesheet" href="demo.css">
|
||||||
|
<link rel="stylesheet" href="iconfont.css">
|
||||||
|
<script src="iconfont.js"></script>
|
||||||
|
<!-- jQuery -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/7bfddb60-08e8-11e9-9b04-53e73bb6408b.js"></script>
|
||||||
|
<!-- 代码高亮 -->
|
||||||
|
<script src="https://a1.alicdn.com/oss/uploads/2018/12/26/a3f714d0-08e6-11e9-8a15-ebf944d7534c.js"></script>
|
||||||
|
<style>
|
||||||
|
.main .logo {
|
||||||
|
margin-top: 0;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo a {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main .logo .sub-title {
|
||||||
|
margin-left: 0.5em;
|
||||||
|
font-size: 22px;
|
||||||
|
color: #fff;
|
||||||
|
background: linear-gradient(-45deg, #3967FF, #B500FE);
|
||||||
|
-webkit-background-clip: text;
|
||||||
|
-webkit-text-fill-color: transparent;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="main">
|
||||||
|
<h1 class="logo"><a href="https://www.iconfont.cn/" title="iconfont 首页" target="_blank">
|
||||||
|
<img width="200" src="https://img.alicdn.com/imgextra/i3/O1CN01Mn65HV1FfSEzR6DKv_!!6000000000514-55-tps-228-59.svg">
|
||||||
|
|
||||||
|
</a></h1>
|
||||||
|
<div class="nav-tabs">
|
||||||
|
<ul id="tabs" class="dib-box">
|
||||||
|
<li class="dib active"><span>Unicode</span></li>
|
||||||
|
<li class="dib"><span>Font class</span></li>
|
||||||
|
<li class="dib"><span>Symbol</span></li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<a href="https://www.iconfont.cn/manage/index?manage_type=myprojects&projectId=3506530" target="_blank" class="nav-more">查看项目</a>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<div class="tab-container">
|
||||||
|
<div class="content unicode" style="display: block;">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">搜索，猫客</div>
|
||||||
|
<div class="code-name">&#xe600;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">关闭</div>
|
||||||
|
<div class="code-name">&#xeb6a;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">上一个</div>
|
||||||
|
<div class="code-name">&#xe606;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">下一个</div>
|
||||||
|
<div class="code-name">&#xe6ca;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">人员</div>
|
||||||
|
<div class="code-name">&#xe60d;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">尺子_o</div>
|
||||||
|
<div class="code-name">&#xeb48;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">经纬度</div>
|
||||||
|
<div class="code-name">&#xe605;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">复位</div>
|
||||||
|
<div class="code-name">&#xe781;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">gis_漫游</div>
|
||||||
|
<div class="code-name">&#xe6f1;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont"></span>
|
||||||
|
<div class="name">分屏</div>
|
||||||
|
<div class="code-name">&#xe6a0;</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="unicode-">Unicode 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>Unicode 是字体在网页端最原始的应用方式，特点是：</p>
|
||||||
|
<ul>
|
||||||
|
<li>支持按字体的方式去动态调整图标大小，颜色等等。</li>
|
||||||
|
<li>默认情况下不支持多色，直接添加多色图标会自动去色。</li>
|
||||||
|
</ul>
|
||||||
|
<blockquote>
|
||||||
|
<p>注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）</p>
|
||||||
|
</blockquote>
|
||||||
|
<p>Unicode 使用步骤如下：</p>
|
||||||
|
<h3 id="-font-face">第一步：拷贝项目下面生成的 <code>@font-face</code></h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>@font-face {
|
||||||
|
font-family: 'iconfont';
|
||||||
|
src: url('iconfont.woff2?t=1657245726734') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1657245726734') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1657245726734') format('truetype');
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||||
|
<pre><code class="language-css"
|
||||||
|
>.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取字体编码，应用于页面</h3>
|
||||||
|
<pre>
|
||||||
|
<code class="language-html"
|
||||||
|
><span class="iconfont">&#x33;</span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content font-class">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-sousuo"></span>
|
||||||
|
<div class="name">
|
||||||
|
搜索，猫客
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-sousuo
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-guanbi"></span>
|
||||||
|
<div class="name">
|
||||||
|
关闭
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-guanbi
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-shangyige"></span>
|
||||||
|
<div class="name">
|
||||||
|
上一个
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-shangyige
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-xiayige"></span>
|
||||||
|
<div class="name">
|
||||||
|
下一个
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-xiayige
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-renyuan"></span>
|
||||||
|
<div class="name">
|
||||||
|
人员
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-renyuan
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-chizi_o"></span>
|
||||||
|
<div class="name">
|
||||||
|
尺子_o
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-chizi_o
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-jingweidu"></span>
|
||||||
|
<div class="name">
|
||||||
|
经纬度
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-jingweidu
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-fuwei"></span>
|
||||||
|
<div class="name">
|
||||||
|
复位
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-fuwei
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-gis_manyou"></span>
|
||||||
|
<div class="name">
|
||||||
|
gis_漫游
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-gis_manyou
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<span class="icon iconfont icon-fenping"></span>
|
||||||
|
<div class="name">
|
||||||
|
分屏
|
||||||
|
</div>
|
||||||
|
<div class="code-name">.icon-fenping
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<h2 id="font-class-">font-class 引用</h2>
|
||||||
|
<hr>
|
||||||
|
|
||||||
|
<p>font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。</p>
|
||||||
|
<p>与 Unicode 使用方式相比，具有如下特点：</p>
|
||||||
|
<ul>
|
||||||
|
<li>相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。</li>
|
||||||
|
<li>因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。</li>
|
||||||
|
</ul>
|
||||||
|
<p>使用步骤如下：</p>
|
||||||
|
<h3 id="-fontclass-">第一步：引入项目下面生成的 fontclass 代码：</h3>
|
||||||
|
<pre><code class="language-html"><link rel="stylesheet" href="./iconfont.css">
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><span class="iconfont icon-xxx"></span>
|
||||||
|
</code></pre>
|
||||||
|
<blockquote>
|
||||||
|
<p>"
|
||||||
|
iconfont" 是你项目下的 font-family。可以通过编辑项目查看，默认是 "iconfont"。</p>
|
||||||
|
</blockquote>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="content symbol">
|
||||||
|
<ul class="icon_lists dib-box">
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-sousuo"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">搜索，猫客</div>
|
||||||
|
<div class="code-name">#icon-sousuo</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-guanbi"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">关闭</div>
|
||||||
|
<div class="code-name">#icon-guanbi</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-shangyige"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">上一个</div>
|
||||||
|
<div class="code-name">#icon-shangyige</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xiayige"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">下一个</div>
|
||||||
|
<div class="code-name">#icon-xiayige</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-renyuan"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">人员</div>
|
||||||
|
<div class="code-name">#icon-renyuan</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-chizi_o"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">尺子_o</div>
|
||||||
|
<div class="code-name">#icon-chizi_o</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-jingweidu"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">经纬度</div>
|
||||||
|
<div class="code-name">#icon-jingweidu</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-fuwei"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">复位</div>
|
||||||
|
<div class="code-name">#icon-fuwei</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-gis_manyou"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">gis_漫游</div>
|
||||||
|
<div class="code-name">#icon-gis_manyou</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li class="dib">
|
||||||
|
<svg class="icon svg-icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-fenping"></use>
|
||||||
|
</svg>
|
||||||
|
<div class="name">分屏</div>
|
||||||
|
<div class="code-name">#icon-fenping</div>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
</ul>
|
||||||
|
<div class="article markdown">
|
||||||
|
<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="language-html"><script src="./iconfont.js"></script>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-css-">第二步：加入通用 CSS 代码（引入一次就行）：</h3>
|
||||||
|
<pre><code class="language-html"><style>
|
||||||
|
.icon {
|
||||||
|
width: 1em;
|
||||||
|
height: 1em;
|
||||||
|
vertical-align: -0.15em;
|
||||||
|
fill: currentColor;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</code></pre>
|
||||||
|
<h3 id="-">第三步：挑选相应图标并获取类名，应用于页面：</h3>
|
||||||
|
<pre><code class="language-html"><svg class="icon" aria-hidden="true">
|
||||||
|
<use xlink:href="#icon-xxx"></use>
|
||||||
|
</svg>
|
||||||
|
</code></pre>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<script>
|
||||||
|
$(document).ready(function () {
|
||||||
|
$('.tab-container .content:first').show()
|
||||||
|
|
||||||
|
$('#tabs li').click(function (e) {
|
||||||
|
var tabContent = $('.tab-container .content')
|
||||||
|
var index = $(this).index()
|
||||||
|
|
||||||
|
if ($(this).hasClass('active')) {
|
||||||
|
return
|
||||||
|
} else {
|
||||||
|
$('#tabs li').removeClass('active')
|
||||||
|
$(this).addClass('active')
|
||||||
|
|
||||||
|
tabContent.hide().eq(index).fadeIn()
|
||||||
|
}
|
||||||
|
})
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,55 @@
|
||||||
|
@font-face {
|
||||||
|
font-family: "iconfont"; /* Project id 3506530 */
|
||||||
|
src: url('iconfont.woff2?t=1657245726734') format('woff2'),
|
||||||
|
url('iconfont.woff?t=1657245726734') format('woff'),
|
||||||
|
url('iconfont.ttf?t=1657245726734') format('truetype');
|
||||||
|
}
|
||||||
|
|
||||||
|
.iconfont {
|
||||||
|
font-family: "iconfont" !important;
|
||||||
|
font-size: 16px;
|
||||||
|
font-style: normal;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-sousuo:before {
|
||||||
|
content: "\e600";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-guanbi:before {
|
||||||
|
content: "\eb6a";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-shangyige:before {
|
||||||
|
content: "\e606";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-xiayige:before {
|
||||||
|
content: "\e6ca";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-renyuan:before {
|
||||||
|
content: "\e60d";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-chizi_o:before {
|
||||||
|
content: "\eb48";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-jingweidu:before {
|
||||||
|
content: "\e605";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-fuwei:before {
|
||||||
|
content: "\e781";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-gis_manyou:before {
|
||||||
|
content: "\e6f1";
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-fenping:before {
|
||||||
|
content: "\e6a0";
|
||||||
|
}
|
||||||
|
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,79 @@
|
||||||
|
{
|
||||||
|
"id": "3506530",
|
||||||
|
"name": "城市时空大数据行业应用服务平台",
|
||||||
|
"font_family": "iconfont",
|
||||||
|
"css_prefix_text": "icon-",
|
||||||
|
"description": "",
|
||||||
|
"glyphs": [
|
||||||
|
{
|
||||||
|
"icon_id": "68264",
|
||||||
|
"name": "搜索，猫客",
|
||||||
|
"font_class": "sousuo",
|
||||||
|
"unicode": "e600",
|
||||||
|
"unicode_decimal": 58880
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "4118038",
|
||||||
|
"name": "关闭",
|
||||||
|
"font_class": "guanbi",
|
||||||
|
"unicode": "eb6a",
|
||||||
|
"unicode_decimal": 60266
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "16136932",
|
||||||
|
"name": "上一个",
|
||||||
|
"font_class": "shangyige",
|
||||||
|
"unicode": "e606",
|
||||||
|
"unicode_decimal": 58886
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "20797391",
|
||||||
|
"name": "下一个",
|
||||||
|
"font_class": "xiayige",
|
||||||
|
"unicode": "e6ca",
|
||||||
|
"unicode_decimal": 59082
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "25290660",
|
||||||
|
"name": "人员",
|
||||||
|
"font_class": "renyuan",
|
||||||
|
"unicode": "e60d",
|
||||||
|
"unicode_decimal": 58893
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "5387749",
|
||||||
|
"name": "尺子_o",
|
||||||
|
"font_class": "chizi_o",
|
||||||
|
"unicode": "eb48",
|
||||||
|
"unicode_decimal": 60232
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "6677525",
|
||||||
|
"name": "经纬度",
|
||||||
|
"font_class": "jingweidu",
|
||||||
|
"unicode": "e605",
|
||||||
|
"unicode_decimal": 58885
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "7534253",
|
||||||
|
"name": "复位",
|
||||||
|
"font_class": "fuwei",
|
||||||
|
"unicode": "e781",
|
||||||
|
"unicode_decimal": 59265
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "19288163",
|
||||||
|
"name": "gis_漫游",
|
||||||
|
"font_class": "gis_manyou",
|
||||||
|
"unicode": "e6f1",
|
||||||
|
"unicode_decimal": 59121
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"icon_id": "22205972",
|
||||||
|
"name": "分屏",
|
||||||
|
"font_class": "fenping",
|
||||||
|
"unicode": "e6a0",
|
||||||
|
"unicode_decimal": 59040
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 218 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 124 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 136 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 172 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 417 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 727 B |
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 934 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.7 MiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 109 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
|
|
@ -0,0 +1,574 @@
|
||||||
|
<template>
|
||||||
|
<div class="home">
|
||||||
|
<ul class="login">
|
||||||
|
<li class="item">登录</li>
|
||||||
|
<li class="item">注册</li>
|
||||||
|
</ul>
|
||||||
|
<div class="header d-between">
|
||||||
|
<div class="title d-around">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/icon-project.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="title-text">城市时空大数据行业应用服务平台</div>
|
||||||
|
</div>
|
||||||
|
<ul class="d-flex menu-ul">
|
||||||
|
<li class="menu-item active" @click="dateItemClick($event)">首页</li>
|
||||||
|
<li class="menu-item" @click="dateItemClick($event)">在线地图</li>
|
||||||
|
<li class="menu-item" @click="dateItemClick($event)">应用示范</li>
|
||||||
|
<li class="menu-item" @click="dateItemClick($event)">资源中心</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<!-- 轮播 start-->
|
||||||
|
<div class="showImg">
|
||||||
|
<img
|
||||||
|
@mouseover="changeInterval(true)"
|
||||||
|
@mouseleave="changeInterval(false)"
|
||||||
|
v-for="item in imgArr"
|
||||||
|
:key="item.id"
|
||||||
|
:src="item.url"
|
||||||
|
alt="暂无图片"
|
||||||
|
v-show="item.id === currentIndex"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<div @click="clickIcon('up')" class="iconDiv icon-left">
|
||||||
|
<!-- <i class="el-icon-caret-left"></i> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div @click="clickIcon('down')" class="iconDiv icon-right">
|
||||||
|
<!-- <i class="el-icon-caret-right"></i> -->
|
||||||
|
</div>
|
||||||
|
<div class="banner-circle">
|
||||||
|
<ul>
|
||||||
|
<li
|
||||||
|
@click="changeImg(item.id)"
|
||||||
|
v-for="item in imgArr"
|
||||||
|
:key="item.id"
|
||||||
|
:class="item.id === currentIndex ? 'active1' : ''"
|
||||||
|
></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 轮播 end-->
|
||||||
|
<div class="main_center d-between">
|
||||||
|
<div class="data_screen">
|
||||||
|
<div class="title">
|
||||||
|
<span class="span1">数据总览</span>
|
||||||
|
<span class="span2">data screening</span>
|
||||||
|
</div>
|
||||||
|
<ul class="data_ul d-between">
|
||||||
|
<li class="data-item">
|
||||||
|
<p>
|
||||||
|
<span class="span1">287</span>
|
||||||
|
<span class="span2">个</span>
|
||||||
|
</p>
|
||||||
|
<p class="p1">服务数量</p>
|
||||||
|
</li>
|
||||||
|
<li class="data-item">
|
||||||
|
<p>
|
||||||
|
<span class="span1">140</span>
|
||||||
|
<span class="span2">万+</span>
|
||||||
|
</p>
|
||||||
|
<p class="p1">数据总量</p>
|
||||||
|
</li>
|
||||||
|
<li class="data-item">
|
||||||
|
<p>
|
||||||
|
<span class="span1">24867</span>
|
||||||
|
<span class="span2">次</span>
|
||||||
|
</p>
|
||||||
|
<p class="p1">访问量</p>
|
||||||
|
</li>
|
||||||
|
<li class="data-item">
|
||||||
|
<p>
|
||||||
|
<span class="span1">4123</span>
|
||||||
|
<span class="span2">次</span>
|
||||||
|
</p>
|
||||||
|
<p class="p1">今日访问</p>
|
||||||
|
</li>
|
||||||
|
<li class="data-item">
|
||||||
|
<p>
|
||||||
|
<span class="span1">287</span>
|
||||||
|
<span class="span2">人</span>
|
||||||
|
</p>
|
||||||
|
<p class="p1">用户</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="online_map" @click="goTo('/maps')">
|
||||||
|
<div class="title">在线地图</div>
|
||||||
|
<img :src="require('@/assets/images/bg-homepage_map.png')" alt="">
|
||||||
|
</div>
|
||||||
|
<div class="base_data">
|
||||||
|
<div class="title">基础数据服务</div>
|
||||||
|
<ul class="data-ul">
|
||||||
|
<li class="data-item">矢量数据服务</li>
|
||||||
|
<li class="data-item">影像数据服务</li>
|
||||||
|
<li class="data-item">三维数据服务</li>
|
||||||
|
<li class="data-item">矢量瓦片数据服务</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="base_func">
|
||||||
|
<div class="title">基础功能服务</div>
|
||||||
|
<ul class="fun-ul">
|
||||||
|
<li class="fun-item">地理信息应用接口</li>
|
||||||
|
<li class="fun-item">机器学习应用接口</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="bottom">
|
||||||
|
<div class="bottom_title">
|
||||||
|
<span class="span1">应用案例</span>
|
||||||
|
<span class="span2">Application cases</span>
|
||||||
|
</div>
|
||||||
|
<ul class="anli-ul d-between">
|
||||||
|
<li class="anli-item d-between">
|
||||||
|
<img :src="require('@/assets/images/anli1.png')" alt="" width="48" />
|
||||||
|
<div>
|
||||||
|
<div class="title">门头沟乡村振兴</div>
|
||||||
|
<div class="content">
|
||||||
|
近年来，门头沟区立足区域功能定位和自身资源禀赋，将发展精品民宿作为打通“两山”转化通道和推动乡村振兴的突破口，并创建了“门头沟小院”精品民宿品牌。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<div class="line"></div>
|
||||||
|
<li class="anli-item d-between">
|
||||||
|
<img :src="require('@/assets/images/anli2.png')" alt="" width="48" />
|
||||||
|
<div>
|
||||||
|
<div class="title">韧性城市</div>
|
||||||
|
<div class="content">
|
||||||
|
近年来，门头沟区立足区域功能定位和自身资源禀赋，将发展精品民宿作为打通“两山”转化通道和推动乡村振兴的突破口，并创建了“门头沟小院”精品民宿品牌。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
<div class="line"></div>
|
||||||
|
<li class="anli-item d-between">
|
||||||
|
<img :src="require('@/assets/images/anli3.png')" alt="" width="48" />
|
||||||
|
<div>
|
||||||
|
<div class="title">大型建筑安全监测/规划</div>
|
||||||
|
<div class="content">
|
||||||
|
近年来，门头沟区立足区域功能定位和自身资源禀赋，将发展精品民宿作为打通“两山”转化通道和推动乡村振兴的突破口，并创建了“门头沟小院”精品民宿品牌。
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="footer">技术支持：北京建筑大学城市大数据应用研究中心</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "home",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentIndex: 0, //当前所在图片下标
|
||||||
|
timer: null, //定时轮询
|
||||||
|
imgArr: [
|
||||||
|
{ id: 0, url: require("@/assets/images/lunbo1.png") },
|
||||||
|
{
|
||||||
|
id: 1,
|
||||||
|
url: require("@/assets/images/lunbo2.png"),
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: 2,
|
||||||
|
url: require("@/assets/images/lunbo3.png"),
|
||||||
|
},
|
||||||
|
],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
//进入页面后启动定时轮询
|
||||||
|
mounted() {
|
||||||
|
this.startInterval();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goTo(name){
|
||||||
|
this.$router.push({
|
||||||
|
path:name
|
||||||
|
});
|
||||||
|
},
|
||||||
|
dateItemClick(event) {
|
||||||
|
console.log(event);
|
||||||
|
$(event.currentTarget)
|
||||||
|
.addClass("active")
|
||||||
|
.siblings()
|
||||||
|
.removeClass("active");
|
||||||
|
if (event.target.innerText == "在线地图") {
|
||||||
|
this.$router.push(`/maps`);
|
||||||
|
} else if (event.target.innerText == "资源中心") {
|
||||||
|
this.$router.push(`/resource`);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
//开启定时器
|
||||||
|
startInterval() {
|
||||||
|
// 事件里定时器应该先清除在设置，防止多次点击直接生成多个定时器
|
||||||
|
clearInterval(this.timer);
|
||||||
|
this.timer = setInterval(() => {
|
||||||
|
this.currentIndex++;
|
||||||
|
if (this.currentIndex > this.imgArr.length - 1) {
|
||||||
|
this.currentIndex = 0;
|
||||||
|
}
|
||||||
|
}, 3000);
|
||||||
|
},
|
||||||
|
// 点击左右箭头
|
||||||
|
clickIcon(val) {
|
||||||
|
if (val === "down") {
|
||||||
|
this.currentIndex++;
|
||||||
|
if (this.currentIndex === this.imgArr.length) {
|
||||||
|
this.currentIndex = 0;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
/* 第一种写法
|
||||||
|
this.currentIndex--;
|
||||||
|
if(this.currentIndex < 0){
|
||||||
|
this.currentIndex = this.imgArr.length-1;
|
||||||
|
} */
|
||||||
|
// 第二种写法
|
||||||
|
if (this.currentIndex === 0) {
|
||||||
|
this.currentIndex = this.imgArr.length;
|
||||||
|
}
|
||||||
|
this.currentIndex--;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 点击控制圆点
|
||||||
|
changeImg(index) {
|
||||||
|
this.currentIndex = index;
|
||||||
|
},
|
||||||
|
//鼠标移入移出控制
|
||||||
|
changeInterval(val) {
|
||||||
|
if (val) {
|
||||||
|
clearInterval(this.timer);
|
||||||
|
} else {
|
||||||
|
this.startInterval();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.home {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../assets/images/back.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: relative;
|
||||||
|
.login {
|
||||||
|
position: absolute;
|
||||||
|
top: 0.5rem;
|
||||||
|
right: 0.5rem;
|
||||||
|
width: 8rem;
|
||||||
|
height: 2rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid #46535a;
|
||||||
|
border-radius: 1.25rem;
|
||||||
|
.item {
|
||||||
|
width: 50%;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
color: #377dff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
height: 6.25rem;
|
||||||
|
.title {
|
||||||
|
font-size: 2rem;
|
||||||
|
margin-left: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
.title-text {
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.menu-ul {
|
||||||
|
margin-right: 12.5rem;
|
||||||
|
margin-bottom: 0;
|
||||||
|
.menu-item {
|
||||||
|
width: 7.625rem;
|
||||||
|
height: 2.5rem;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.5rem;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.menu-item:not(.active):hover {
|
||||||
|
font-size: 1.3rem;
|
||||||
|
transition: all 0.5s;
|
||||||
|
color: #2dd2db;
|
||||||
|
}
|
||||||
|
.menu-item.active {
|
||||||
|
border-radius: 0.3125rem;
|
||||||
|
background-color: #377dff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.main_center {
|
||||||
|
height: 21.875rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.25);
|
||||||
|
margin: 1rem auto 0;
|
||||||
|
width: calc(100% - 7.5rem);
|
||||||
|
align-items: end;
|
||||||
|
.data_screen {
|
||||||
|
width: 43.75rem;
|
||||||
|
height: 19.5625rem;
|
||||||
|
background: url("../assets/images/bg-homepage_box1.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.title {
|
||||||
|
width: 18.0625rem;
|
||||||
|
height: 2rem;
|
||||||
|
line-height: 2rem;
|
||||||
|
margin: 3.4375rem 0 0 2.3125rem;
|
||||||
|
.span1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.span2 {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.data_ul {
|
||||||
|
width: calc(100% - 4rem);
|
||||||
|
margin: 4rem auto 0;
|
||||||
|
p {
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
|
.data-item {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.span1 {
|
||||||
|
font-size: 2.6875rem;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.span2 {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: rgba(255, 255, 255, 0.33);
|
||||||
|
}
|
||||||
|
.p1 {
|
||||||
|
font-size: 1rem;
|
||||||
|
color: rgba(255, 255, 255, 0.64);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.online_map {
|
||||||
|
height: 19.5625rem;
|
||||||
|
width: 20.5625rem;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
img {
|
||||||
|
transform: scale(1.2);
|
||||||
|
transition: all 0.8s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.875rem;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
font-weight: 100;
|
||||||
|
z-index: 99;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.base_data {
|
||||||
|
height: 19.5625rem;
|
||||||
|
width: 20.5625rem;
|
||||||
|
background: url("../assets/images/bg-homepage_box2.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.title {
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 100;
|
||||||
|
height: 4rem;
|
||||||
|
line-height: 3.8125rem;
|
||||||
|
width: calc(100% - 1.625rem);
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
background: url("../assets/images/title_bg.png") no-repeat;
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-position-y: 100%;
|
||||||
|
}
|
||||||
|
.data-item {
|
||||||
|
width: 17.3125rem;
|
||||||
|
height: 2.75rem;
|
||||||
|
margin: 0.8rem auto;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.75rem;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: rgba(3, 6, 29, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 5px;
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
transition: all 0.5s;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||||
|
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.base_func {
|
||||||
|
height: 19.5625rem;
|
||||||
|
width: 20.5625rem;
|
||||||
|
background: url("../assets/images/bg-homepage_box3.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
.title {
|
||||||
|
font-size: 1.875rem;
|
||||||
|
font-weight: 100;
|
||||||
|
height: 4rem;
|
||||||
|
line-height: 3.8125rem;
|
||||||
|
width: calc(100% - 1.625rem);
|
||||||
|
margin: 0 auto;
|
||||||
|
text-align: center;
|
||||||
|
background: url("../assets/images/title_bg.png") no-repeat;
|
||||||
|
background-size: 100% auto;
|
||||||
|
background-position-y: 100%;
|
||||||
|
}
|
||||||
|
.fun-item {
|
||||||
|
width: 17.3125rem;
|
||||||
|
height: 2.75rem;
|
||||||
|
margin: 0.8rem auto;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 2.75rem;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
cursor: pointer;
|
||||||
|
background-color: rgba(3, 6, 29, 0.2);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
|
border-radius: 5px;
|
||||||
|
&:hover {
|
||||||
|
transform: scale(1.1);
|
||||||
|
transition: all 0.5s;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.7);
|
||||||
|
box-shadow: 0 0 5px rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.bottom {
|
||||||
|
width: calc(100% - 7.5rem);
|
||||||
|
margin: 0 auto;
|
||||||
|
.bottom_title {
|
||||||
|
.span1 {
|
||||||
|
font-size: 2rem;
|
||||||
|
}
|
||||||
|
.span2 {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.line {
|
||||||
|
width: 1px;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
opacity: 0.39;
|
||||||
|
margin: 0 2rem;
|
||||||
|
}
|
||||||
|
.anli-ul {
|
||||||
|
width: 100%;
|
||||||
|
height: 7.5rem;
|
||||||
|
margin-top: 1rem;
|
||||||
|
.anli-item {
|
||||||
|
img {
|
||||||
|
margin-right: 1rem;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-size: 1.1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #377dff;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
font-size: 0.9375rem;
|
||||||
|
font-weight: normal;
|
||||||
|
font-stretch: normal;
|
||||||
|
line-height: 1.875rem;
|
||||||
|
letter-spacing: 0px;
|
||||||
|
color: rgba(255, 255, 255, 1);
|
||||||
|
text-align: justify;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
width: calc(100% - 7.5rem);
|
||||||
|
left: 3.75rem;
|
||||||
|
height: 3rem;
|
||||||
|
line-height: 3rem;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.25);
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.125rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.showImg {
|
||||||
|
position: relative;
|
||||||
|
width: calc(100% - 7.5rem);
|
||||||
|
height: 12.5rem;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
/* 轮播图片 */
|
||||||
|
.showImg img {
|
||||||
|
display: block;
|
||||||
|
width: 25%;
|
||||||
|
height: 60%;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 箭头图标 */
|
||||||
|
.iconDiv {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
transform: translateY(-50%);
|
||||||
|
width: 1.875rem;
|
||||||
|
height: 1.875rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.icon-left {
|
||||||
|
left: 1.25rem;
|
||||||
|
background: url("../assets/images/left.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
.icon-right {
|
||||||
|
right: 1.25rem;
|
||||||
|
background: url("../assets/images/right.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 控制圆点 */
|
||||||
|
.banner-circle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 1.25rem;
|
||||||
|
}
|
||||||
|
.banner-circle ul {
|
||||||
|
margin: 0 6.25rem;
|
||||||
|
height: 100%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
.banner-circle ul li {
|
||||||
|
display: inline-block;
|
||||||
|
width: 0.5rem;
|
||||||
|
height: 0.5rem;
|
||||||
|
margin: 0 0.3125rem;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
background-color: rgba(125, 125, 125, 0.8);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.active1 {
|
||||||
|
background-color: #fff !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,142 @@
|
||||||
|
<template>
|
||||||
|
<div class="index">
|
||||||
|
<el-container class="w-100 h-100">
|
||||||
|
<el-header :style="headerShow">
|
||||||
|
<div class="d-flex align-items-center justify-content-center">
|
||||||
|
<img :src="require('@/assets/images/icon-project.png')" alt="" width="48">
|
||||||
|
<div class="title-text">城市时空大数据行业应用服务平台</div>
|
||||||
|
</div>
|
||||||
|
<ul class="d-flex menu-ul">
|
||||||
|
<li class="menu-item">
|
||||||
|
<router-link to="/" class="route-btn">首页</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item">
|
||||||
|
<router-link to="/maps" class="route-btn" active-class="active">在线地图</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item">
|
||||||
|
<router-link to="/login" class="route-btn" active-class="active">应用示范</router-link>
|
||||||
|
</li>
|
||||||
|
<li class="menu-item">
|
||||||
|
<router-link to="/resource" class="route-btn" active-class="active">资源中心</router-link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="user-info">
|
||||||
|
<i class="iconfont icon-renyuan"></i>
|
||||||
|
<div>admin</div>
|
||||||
|
</div>
|
||||||
|
</el-header>
|
||||||
|
<el-main :style="topShow">
|
||||||
|
<router-view />
|
||||||
|
</el-main>
|
||||||
|
</el-container>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: 'index',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
headerShow:'display:block',
|
||||||
|
topShow:''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.index {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url('../assets/images/map-bg.jpg') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-main {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: 3.8rem;
|
||||||
|
bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-header {
|
||||||
|
height: 6.5rem !important;
|
||||||
|
background: url('../assets/images/bg-title.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding-top: 1.8rem;
|
||||||
|
position: relative;
|
||||||
|
z-index: 1;
|
||||||
|
.title-text {
|
||||||
|
font-size: 1.875rem;
|
||||||
|
margin-left: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-ul {
|
||||||
|
width: 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 5%;
|
||||||
|
top: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item {
|
||||||
|
width: 10.9375rem;
|
||||||
|
height: 2.1875rem;
|
||||||
|
line-height: 2.1875rem;
|
||||||
|
list-style-type: none;
|
||||||
|
text-align: center;
|
||||||
|
margin-right: 1rem;
|
||||||
|
background: url('../assets/images/menu_bg.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
a {
|
||||||
|
display: inline-block;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
&:nth-child(2) {
|
||||||
|
margin-right: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item :not(.active):hover {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
color: #2dd2db;
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-item .active {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
background: url('../assets/images/menu_bg_selected.png') no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
width: 7.8125rem;
|
||||||
|
height: 2.1875rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
border: 1px solid rgba(70, 83, 90, 0.78);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-around;
|
||||||
|
color: #377dff;
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 1rem;
|
||||||
|
div {
|
||||||
|
width: 60%;
|
||||||
|
padding-left: 10%;
|
||||||
|
border-left: 1px solid rgba(70, 83, 90, 0.78);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,114 @@
|
||||||
|
<template>
|
||||||
|
<div class="login align-items-center">
|
||||||
|
<div class="title-view d-center">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/icon-project.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="title-text">城市时空大数据行业应用服务平台</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-form class="login-form">
|
||||||
|
<div class="welcome mb-3">欢迎登录</div>
|
||||||
|
<el-form-item prop="username">
|
||||||
|
<label for="">用户名</label>
|
||||||
|
<el-input type="text" auto-complete="off"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<label for="">密码</label>
|
||||||
|
<el-input type="password" auto-complete="off"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<label for="">验证码</label>
|
||||||
|
<div class="d-flex align-items-center justify-content-between">
|
||||||
|
<el-input type="password" auto-complete="off" class="w-50"></el-input>
|
||||||
|
<div class="code"></div>
|
||||||
|
<span>换一个</span>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-checkbox class="text-white">Remember me</el-checkbox>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button
|
||||||
|
size="medium"
|
||||||
|
type="primary"
|
||||||
|
@click="pushShow()"
|
||||||
|
class="submit-btn w-100"
|
||||||
|
>
|
||||||
|
<span>登 录</span>
|
||||||
|
</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
<div class="text-center">
|
||||||
|
新用户请注册<span class="register">注册</span>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "login",
|
||||||
|
methods: {
|
||||||
|
pushShow() {
|
||||||
|
this.$router.push(`/maps`);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.login {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: url("../assets/images/bg-login.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title-view {
|
||||||
|
margin-top: 5%;
|
||||||
|
|
||||||
|
.title-text {
|
||||||
|
font-size: 2.125rem;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.login-form {
|
||||||
|
width: 37.25rem;
|
||||||
|
height: 26rem;
|
||||||
|
background-color: rgba(2, 5, 41, 0.74);
|
||||||
|
padding: 1rem 5rem;
|
||||||
|
margin: 5% auto 0;
|
||||||
|
|
||||||
|
.welcome {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
margin: 0.625rem 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.code {
|
||||||
|
width: 30%;
|
||||||
|
height: 2.5rem;
|
||||||
|
border: 1px solid white;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-input__inner {
|
||||||
|
height: 2.5rem;
|
||||||
|
line-height: 2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-form-item__content {
|
||||||
|
line-height: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.register {
|
||||||
|
color: #5d5dff;
|
||||||
|
margin-left: 3px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,279 @@
|
||||||
|
<template>
|
||||||
|
<div class="maps">
|
||||||
|
<div id="earth"></div>
|
||||||
|
<ul class="map-toggle d-around">
|
||||||
|
<li class="map-item d-center">
|
||||||
|
<img :src="require('@/assets/images/icon-sanwei.png')" alt="" />
|
||||||
|
<p class="mb-0">三维</p>
|
||||||
|
</li>
|
||||||
|
<li class="map-item d-center">
|
||||||
|
<img :src="require('@/assets/images/icon-shijing.png')" alt="" />
|
||||||
|
<p class="mb-0">实景</p>
|
||||||
|
</li>
|
||||||
|
<li class="map-item d-center">
|
||||||
|
<img :src="require('@/assets/images/icon-luansheng.png')" alt="" />
|
||||||
|
<p class="mb-0">孪生</p>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<div class="data-toggle" v-show="toggleShow">
|
||||||
|
<div class="guanbi" @click="toggleShow = false"></div>
|
||||||
|
<ul class="d-center">
|
||||||
|
<li class="data-item d-center active">专题</li>
|
||||||
|
<li class="data-item d-center">数据资源</li>
|
||||||
|
</ul>
|
||||||
|
<ul class="data-list">
|
||||||
|
<li class="list-li" v-for="(item, index) in dataList">
|
||||||
|
{{ item.content }}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="point-detail" style="display: none">
|
||||||
|
<div class="detail-title d-between">
|
||||||
|
<span>详情</span>
|
||||||
|
<i class="iconfont icon-guanbi c-point"></i>
|
||||||
|
</div>
|
||||||
|
<ul class="details mt-1 pl-2">
|
||||||
|
<li>
|
||||||
|
<span>数据类型：</span>
|
||||||
|
<span>数据资产</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>等级：</span>
|
||||||
|
<span style="color: #ffa633">二级</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>责任人：</span>
|
||||||
|
<span>张三 13545874512</span>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<span>维护时间：</span>
|
||||||
|
<span>2020-10-10</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<ul class="map-tool">
|
||||||
|
<li class="tool-item d-center"><i class="iconfont icon-fenping"></i></li>
|
||||||
|
<li class="tool-item d-center"><i class="iconfont icon-chizi_o"></i></li>
|
||||||
|
<li class="tool-item d-center">
|
||||||
|
<i class="iconfont icon-gis_manyou"></i>
|
||||||
|
</li>
|
||||||
|
<li class="tool-item d-center">
|
||||||
|
<i class="iconfont icon-jingweidu"></i>
|
||||||
|
</li>
|
||||||
|
<li class="tool-item d-center"><i class="iconfont icon-fuwei"></i></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "maps",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
geowin3DAPP: null,
|
||||||
|
viewer: null,
|
||||||
|
dataList: [
|
||||||
|
{ id: 1, content: "规划专题" },
|
||||||
|
{ id: 2, content: "老城保护" },
|
||||||
|
{ id: 3, content: "门头沟乡村振兴" },
|
||||||
|
{ id: 4, content: "韧性城市" },
|
||||||
|
{ id: 5, content: "大型建筑安全监测" },
|
||||||
|
{ id: 6, content: "规划专题" },
|
||||||
|
{ id: 7, content: "规划专题" },
|
||||||
|
{ id: 8, content: "规划专题" },
|
||||||
|
{ id: 9, content: "规划专题" },
|
||||||
|
],
|
||||||
|
toggleShow: true,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
$(".data-item").click(function (e) {
|
||||||
|
$(this).addClass("active").siblings().removeClass("active");
|
||||||
|
});
|
||||||
|
|
||||||
|
this.loadMap();
|
||||||
|
},
|
||||||
|
created() {},
|
||||||
|
methods: {
|
||||||
|
loadMap() {
|
||||||
|
this.geowin3DAPP = new Geowin3DAPP(
|
||||||
|
"earth",
|
||||||
|
{
|
||||||
|
shouldAnimate: true,
|
||||||
|
scene3DOnly: false,
|
||||||
|
orderIndependentTranslucency: false,
|
||||||
|
contextOptions: {
|
||||||
|
webgl: {
|
||||||
|
alpha: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{ hasProvinceBoundaries: true }
|
||||||
|
);
|
||||||
|
this.viewer = this.geowin3DAPP.getViewer();
|
||||||
|
|
||||||
|
this.geowin3DAPP.addImageLayer({
|
||||||
|
tileName: "sategoogle"
|
||||||
|
});
|
||||||
|
|
||||||
|
//地下探测关闭
|
||||||
|
this.viewer.scene.globe.depthTestAgainstTerrain = false;
|
||||||
|
this.setSkyNone();
|
||||||
|
},
|
||||||
|
setSkyNone() {
|
||||||
|
this.viewer.scene.backgroundColor = new Cesium.Color(0.0, 0.0, 0.0, 0.0);
|
||||||
|
this.viewer.scene.skyBox.destroy();
|
||||||
|
this.viewer.scene.skyBox = undefined;
|
||||||
|
this.viewer.scene.sun.destroy();
|
||||||
|
this.viewer.scene.sun = undefined;
|
||||||
|
this.viewer.scene.moon.destroy();
|
||||||
|
this.viewer.scene.moon = undefined;
|
||||||
|
this.viewer.scene.skyAtmosphere.destroy();
|
||||||
|
this.viewer.scene.skyAtmosphere = undefined;
|
||||||
|
|
||||||
|
this.viewer.scene.backgroundColor = new Cesium.Color(0, 0, 0, 0);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.maps {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
z-index: 2;
|
||||||
|
padding: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
background: url("../assets/images/map.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-toggle {
|
||||||
|
width: 22.5rem;
|
||||||
|
height: 5.75rem;
|
||||||
|
padding: 0 2rem;
|
||||||
|
background: url("../assets/images/bg-map_box1.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 2rem;
|
||||||
|
top: 1rem;
|
||||||
|
z-index: 2;
|
||||||
|
.map-item {
|
||||||
|
flex-direction: column;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 3.5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-toggle {
|
||||||
|
width: 22.5rem;
|
||||||
|
height: 26rem;
|
||||||
|
background: url("../assets/images/data-toggle.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 2rem;
|
||||||
|
top: 7rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
.guanbi {
|
||||||
|
position: absolute;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.data-item {
|
||||||
|
width: 9.375rem;
|
||||||
|
height: 4.375rem;
|
||||||
|
background: url("../assets/images/bg-item_select.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 1rem;
|
||||||
|
&:hover {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-item.active {
|
||||||
|
width: 10.625rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 600;
|
||||||
|
background: url("../assets/images/bg-item_selected.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.data-list {
|
||||||
|
width: 80%;
|
||||||
|
height: 17.5rem;
|
||||||
|
margin: 0 auto;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-li {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.875rem;
|
||||||
|
background: url("../assets/images/bg-map_item.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-left: 5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
font-size: 1.05rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.point-detail {
|
||||||
|
width: 20rem;
|
||||||
|
height: 13rem;
|
||||||
|
padding: 2rem;
|
||||||
|
background: url("../assets/images/bg-map_box2.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 30%;
|
||||||
|
.detail-title {
|
||||||
|
padding: 0.1rem 1rem;
|
||||||
|
border-bottom: 1px solid;
|
||||||
|
border-image: linear-gradient(
|
||||||
|
to right,
|
||||||
|
rgba(0, 244, 253, 1),
|
||||||
|
rgba(0, 244, 253, 0)
|
||||||
|
)
|
||||||
|
1;
|
||||||
|
.iconfont {
|
||||||
|
color: #22f3e2;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.map-tool {
|
||||||
|
position: absolute;
|
||||||
|
top: 1rem;
|
||||||
|
right: 2rem;
|
||||||
|
|
||||||
|
.tool-item {
|
||||||
|
width: 2.5rem;
|
||||||
|
height: 2.3rem;
|
||||||
|
margin-top: 0.8rem;
|
||||||
|
background-color: rgba(3, 6, 29, 0.8);
|
||||||
|
box-shadow: 0px 0px 12px 4px rgba(19, 112, 252, 0.8);
|
||||||
|
border: solid 1px rgba(0, 62, 228, 1);
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,522 @@
|
||||||
|
<template>
|
||||||
|
<div class="resource">
|
||||||
|
<div class="resource_left">
|
||||||
|
<el-menu
|
||||||
|
default-active="2"
|
||||||
|
class="el-menu-vertical-demo"
|
||||||
|
background-color="transparent"
|
||||||
|
unique-opened="true"
|
||||||
|
@open="handleOpen"
|
||||||
|
@close="handleClose"
|
||||||
|
>
|
||||||
|
<el-submenu index="1">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>基础地理</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="1-1"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>公共专题</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-2"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>三维</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-3"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>新型产品</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-4"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>物联网节点</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-5"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>矢量</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-6"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>影像</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-7"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>地形</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-8"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>地名地址</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-9"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>地理国情普查</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-10"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>室内地图</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-11"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>兴趣点</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="1-12"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>绿地</el-menu-item
|
||||||
|
>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="2">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>城市规划</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="2-1"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>选项1</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="2-2"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>选项2</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="2-3"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>选项3</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="2-4"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>选项4</el-menu-item
|
||||||
|
>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="3">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>城市建设</span>
|
||||||
|
</template>
|
||||||
|
<el-menu-item index="3-1"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>选项1</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="3-2"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>选项2</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="3-3"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>选项3</el-menu-item
|
||||||
|
>
|
||||||
|
<el-menu-item index="3-4"
|
||||||
|
><img
|
||||||
|
:src="require('@/assets/images/el-menu-item.png')"
|
||||||
|
alt=""
|
||||||
|
/>选项4</el-menu-item
|
||||||
|
>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="4">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>自然资源</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="5">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>基础设施</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
|
||||||
|
<el-submenu index="6">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>社会经济</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="7">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>城市运行</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="8">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>专题测试</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="9">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>标注目录</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="10">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>医疗卫生</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="11">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>文化教育</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="12">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>休闲娱乐</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
<el-submenu index="13">
|
||||||
|
<template slot="title">
|
||||||
|
<i class="el-icon-location"></i>
|
||||||
|
<span>宾馆酒店</span>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
<div class="resource_right">
|
||||||
|
<div class="top">
|
||||||
|
<div class="total">
|
||||||
|
共找到资源<span style="color: #ff8400">（53）</span>
|
||||||
|
</div>
|
||||||
|
<div class="search">
|
||||||
|
<span class="iconfont icon-sousuo" style="cursor: pointer"></span>
|
||||||
|
<el-input v-model="input" placeholder="请输入内容"></el-input>
|
||||||
|
<div class="btnn">搜索</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-row :gutter="20" class="resource_ul">
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20" class="resource_ul">
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
<el-row :gutter="20" class="resource_ul">
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="6" style="height:100%">
|
||||||
|
<div class="resource_item">
|
||||||
|
<img
|
||||||
|
:src="require('@/assets/images/shili.png')"
|
||||||
|
alt=""
|
||||||
|
width="48"
|
||||||
|
/>
|
||||||
|
<div class="imgName">矢量地图后三级WMTS900</div>
|
||||||
|
<div><span>所属部门：</span> <span>运维部门</span></div>
|
||||||
|
<div><span> 专题类型：</span><span>矢量</span></div>
|
||||||
|
<div><span>发布时间：</span><span>2022-03-10 11:08:37</span></div>
|
||||||
|
</div>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "resource",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
input: "",
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handleOpen(key, keyPath) {
|
||||||
|
console.log(key, keyPath);
|
||||||
|
},
|
||||||
|
handleClose(key, keyPath) {
|
||||||
|
console.log(key, keyPath);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.resource {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
padding: 1.5rem;
|
||||||
|
.resource_left {
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
.resource_right {
|
||||||
|
width: 79%;
|
||||||
|
margin-left: 1%;
|
||||||
|
height: 100%;
|
||||||
|
.top {
|
||||||
|
display: flex;
|
||||||
|
align-items: end;
|
||||||
|
justify-content: space-between;
|
||||||
|
.total {
|
||||||
|
margin-left: 2rem;
|
||||||
|
font-size: 1rem;
|
||||||
|
}
|
||||||
|
.search {
|
||||||
|
margin-right: 2rem;
|
||||||
|
width: 18.3125rem;
|
||||||
|
height: 3.8125rem;
|
||||||
|
background: url("../assets/images/bg-map_box1.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 1.5rem;
|
||||||
|
.btnn {
|
||||||
|
width: 15%;
|
||||||
|
font-size: 0.875rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.resource_ul {
|
||||||
|
height: 16rem;
|
||||||
|
margin-bottom: .9375rem;
|
||||||
|
font-size: .9375rem;
|
||||||
|
line-height: 1.2;
|
||||||
|
color: rgba(255, 255, 255, 0.64);
|
||||||
|
.resource_item {
|
||||||
|
padding: .8125rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #1c3276;
|
||||||
|
img{
|
||||||
|
width: 100%;
|
||||||
|
height: 65%;
|
||||||
|
}
|
||||||
|
.imgName{
|
||||||
|
font-size: 1.1rem;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-weight: 700;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
::v-deep .el-menu {
|
||||||
|
border-right: none;
|
||||||
|
}
|
||||||
|
::v-deep .el-menu-item,
|
||||||
|
::v-deep .el-submenu__title {
|
||||||
|
color: #fff;
|
||||||
|
background-color: transparent !important;
|
||||||
|
padding-left: 4rem !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-submenu .el-menu-item {
|
||||||
|
height: 1.875rem;
|
||||||
|
line-height: 1.875rem;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
::v-deep .el-menu-item img {
|
||||||
|
width: 0.65rem;
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-submenu > .el-submenu__title {
|
||||||
|
height: 2.8125rem;
|
||||||
|
line-height: 2.8125rem;
|
||||||
|
background: url("../assets/images/el-tree_bg.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
padding-left: 2.5rem !important;
|
||||||
|
}
|
||||||
|
::v-deep .el-icon-location:before {
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
::v-deep .el-submenu [class^="el-icon-"] {
|
||||||
|
width: 1.125rem;
|
||||||
|
height: 1.125rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
background: url("../assets/images/el-icon.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
::v-deep .el-submenu__icon-arrow {
|
||||||
|
width: 0.9375rem;
|
||||||
|
height: 0.5625rem;
|
||||||
|
right: 1.875rem;
|
||||||
|
margin-top: -0.28125rem;
|
||||||
|
background: url("../assets/images/top.png") no-repeat;
|
||||||
|
background-size: 100% 100%;
|
||||||
|
}
|
||||||
|
::v-deep .el-input__inner {
|
||||||
|
background-color: transparent;
|
||||||
|
border: none;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,24 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
|
||||||
|
import ElementUI from 'element-ui'
|
||||||
|
import 'element-ui/lib/theme-chalk/index.css';
|
||||||
|
Vue.use(ElementUI)
|
||||||
|
|
||||||
|
import '@/assets/css/bootstrap.min.css'
|
||||||
|
import '@/assets/css/common.css'
|
||||||
|
import '@/assets/iconfont/iconfont.css'
|
||||||
|
import '@/utils/flexible.js'
|
||||||
|
|
||||||
|
import $ from 'jquery';
|
||||||
|
window.jQuery = $
|
||||||
|
window.$ = $
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
render: h => h(App),
|
||||||
|
router
|
||||||
|
}).$mount('#app')
|
||||||
|
|
@ -0,0 +1,50 @@
|
||||||
|
import Vue from 'vue'
|
||||||
|
import Router from 'vue-router'
|
||||||
|
|
||||||
|
import Login from '@/components/login'
|
||||||
|
import Index from '@/components/index'
|
||||||
|
import Maps from '@/components/maps'
|
||||||
|
import Resource from '@/components/resource'
|
||||||
|
import Home from '@/components/home'
|
||||||
|
Vue.use(Router)
|
||||||
|
|
||||||
|
const router = new Router({
|
||||||
|
mode: 'hash',
|
||||||
|
base: '/bj/',
|
||||||
|
routes: [{
|
||||||
|
path: '',
|
||||||
|
name: 'home',
|
||||||
|
component: Home,
|
||||||
|
},{
|
||||||
|
path: '*',
|
||||||
|
name: 'Index',
|
||||||
|
meta: {
|
||||||
|
requireAuth: true
|
||||||
|
},
|
||||||
|
component: Index,
|
||||||
|
redirect: '/maps',
|
||||||
|
children: [{
|
||||||
|
path: '/maps',
|
||||||
|
name: 'maps',
|
||||||
|
meta: {
|
||||||
|
requireAuth: true
|
||||||
|
},
|
||||||
|
component: Maps,
|
||||||
|
},{
|
||||||
|
path: '/resource',
|
||||||
|
name: 'resource',
|
||||||
|
meta: {
|
||||||
|
requireAuth: true
|
||||||
|
},
|
||||||
|
component: Resource,
|
||||||
|
},],
|
||||||
|
}
|
||||||
|
]
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeEach(function(to, from, next) {
|
||||||
|
localStorage.setItem('currPath', to.name)
|
||||||
|
next()
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
|
|
@ -0,0 +1,118 @@
|
||||||
|
|
||||||
|
;(function(win, lib) {
|
||||||
|
var doc = win.document;
|
||||||
|
var docEl = doc.documentElement;
|
||||||
|
var metaEl = doc.querySelector('meta[name="viewport"]');
|
||||||
|
var flexibleEl = doc.querySelector('meta[name="flexible"]');
|
||||||
|
var dpr = 0;
|
||||||
|
var scale = 0;
|
||||||
|
var tid;
|
||||||
|
var flexible = lib.flexible || (lib.flexible = {});
|
||||||
|
|
||||||
|
if (metaEl) {
|
||||||
|
console.warn('将根据已有的meta标签来设置缩放比例');
|
||||||
|
var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
|
||||||
|
if (match) {
|
||||||
|
scale = parseFloat(match[1]);
|
||||||
|
dpr = parseInt(1 / scale);
|
||||||
|
}
|
||||||
|
} else if (flexibleEl) {
|
||||||
|
var content = flexibleEl.getAttribute('content');
|
||||||
|
if (content) {
|
||||||
|
var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
|
||||||
|
var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
|
||||||
|
if (initialDpr) {
|
||||||
|
dpr = parseFloat(initialDpr[1]);
|
||||||
|
scale = parseFloat((1 / dpr).toFixed(2));
|
||||||
|
}
|
||||||
|
if (maximumDpr) {
|
||||||
|
dpr = parseFloat(maximumDpr[1]);
|
||||||
|
scale = parseFloat((1 / dpr).toFixed(2));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!dpr && !scale) {
|
||||||
|
var isAndroid = win.navigator.appVersion.match(/android/gi);
|
||||||
|
var isIPhone = win.navigator.appVersion.match(/iphone/gi);
|
||||||
|
var devicePixelRatio = win.devicePixelRatio;
|
||||||
|
if (isIPhone) {
|
||||||
|
// iOS下，对于2和3的屏，用2倍的方案，其余的用1倍方案
|
||||||
|
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
|
||||||
|
dpr = 3;
|
||||||
|
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)){
|
||||||
|
dpr = 2;
|
||||||
|
} else {
|
||||||
|
dpr = 1;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 其他设备下，仍旧使用1倍的方案
|
||||||
|
dpr = 1;
|
||||||
|
}
|
||||||
|
scale = 1 / dpr;
|
||||||
|
}
|
||||||
|
|
||||||
|
docEl.setAttribute('data-dpr', dpr);
|
||||||
|
if (!metaEl) {
|
||||||
|
metaEl = doc.createElement('meta');
|
||||||
|
metaEl.setAttribute('name', 'viewport');
|
||||||
|
metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
|
||||||
|
if (docEl.firstElementChild) {
|
||||||
|
docEl.firstElementChild.appendChild(metaEl);
|
||||||
|
} else {
|
||||||
|
var wrap = doc.createElement('div');
|
||||||
|
wrap.appendChild(metaEl);
|
||||||
|
doc.write(wrap.innerHTML);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshRem(){
|
||||||
|
var width = docEl.getBoundingClientRect().width;
|
||||||
|
if (width / dpr > 540) {
|
||||||
|
width = width * dpr;
|
||||||
|
}
|
||||||
|
var rem = width / 120;
|
||||||
|
docEl.style.fontSize = rem + 'px';
|
||||||
|
flexible.rem = win.rem = rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
win.addEventListener('resize', function() {
|
||||||
|
clearTimeout(tid);
|
||||||
|
tid = setTimeout(refreshRem, 300);
|
||||||
|
}, false);
|
||||||
|
win.addEventListener('pageshow', function(e) {
|
||||||
|
if (e.persisted) {
|
||||||
|
clearTimeout(tid);
|
||||||
|
tid = setTimeout(refreshRem, 300);
|
||||||
|
}
|
||||||
|
}, false);
|
||||||
|
|
||||||
|
if (doc.readyState === 'complete') {
|
||||||
|
doc.body.style.fontSize = 12 * dpr + 'px';
|
||||||
|
} else {
|
||||||
|
doc.addEventListener('DOMContentLoaded', function(e) {
|
||||||
|
doc.body.style.fontSize = 12 * dpr + 'px';
|
||||||
|
}, false);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
refreshRem();
|
||||||
|
|
||||||
|
flexible.dpr = win.dpr = dpr;
|
||||||
|
flexible.refreshRem = refreshRem;
|
||||||
|
flexible.rem2px = function(d) {
|
||||||
|
var val = parseFloat(d) * this.rem;
|
||||||
|
if (typeof d === 'string' && d.match(/rem$/)) {
|
||||||
|
val += 'px';
|
||||||
|
}
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
flexible.px2rem = function(d) {
|
||||||
|
var val = parseFloat(d) / this.rem;
|
||||||
|
if (typeof d === 'string' && d.match(/px$/)) {
|
||||||
|
val += 'rem';
|
||||||
|
}
|
||||||
|
return val;
|
||||||
|
}
|
||||||
|
|
||||||
|
})(window, window['lib'] || (window['lib'] = {}));
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
const { defineConfig } = require('@vue/cli-service')
|
||||||
|
module.exports = defineConfig({
|
||||||
|
transpileDependencies: true,
|
||||||
|
lintOnSave: false
|
||||||
|
})
|
||||||
Loading…
Reference in New Issue