Skip to content

Commit 79af2fc

Browse files
funleefunlee
committed
完成页面结构搭建
1 parent c31636c commit 79af2fc

File tree

13 files changed

+359
-203
lines changed

13 files changed

+359
-203
lines changed

‎src/assets/css/common.css

-109
Original file line numberDiff line numberDiff line change
@@ -6,22 +6,6 @@ body {
66
font-family: "微软雅黑";
77
}
88

9-
.page-top {
10-
position: absolute;
11-
z-index: 1;
12-
top: 0;
13-
left: 0;
14-
width: 100%;
15-
}
16-
17-
.page-title {
18-
font-size: 58px;
19-
color: #fdfeff;
20-
position: absolute;
21-
left: 62px;
22-
top: 30px;
23-
text-shadow: 0 0 5px #fbfbfb, 0 0 10px #fbfbfb, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 75px #228DFF;
24-
}
259

2610
.text-white-shadow {
2711
text-shadow: 0 0 5px #fbfbfb, 0 0 10px #fbfbfb, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 75px #228DFF;
@@ -30,96 +14,3 @@ body {
3014
.text-green-shadow {
3115
text-shadow: 0 0 5px #68fff3, 0 0 10px #68fff3, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 75px #228DFF;
3216
}
33-
34-
.right-time {
35-
position: absolute;
36-
top: 30px;
37-
right: 55px;
38-
color: #fdfeff;
39-
font-size: 36px;
40-
text-shadow: 0 0 5px #fbfbfb, 0 0 10px #fbfbfb, 0 0 20px #228DFF, 0 0 35px #228DFF, 0 0 75px #228DFF;
41-
}
42-
43-
.right-time strong {
44-
font-size: 60px;
45-
}
46-
47-
.top-mid {
48-
position: absolute;
49-
z-index: 1;
50-
left: 50%;
51-
top: 30px;
52-
width: 1650px;
53-
display: flex;
54-
justify-content: space-around;
55-
box-sizing: border-box;
56-
padding: 24px 20px 0;
57-
background: url(../../assets/images/common/top-center-bg.png) no-repeat top center;
58-
background-size: 100% 100%;
59-
transform: translate(-50%, 0);
60-
margin-left: -20px;
61-
}
62-
63-
.top-mid-item {
64-
max-width: 33.33%;
65-
overflow: hidden;
66-
white-space: nowrap;
67-
}
68-
69-
.top-mid .top-mid-item-name {
70-
font-size: 40px;
71-
color: #b4c7f9;
72-
}
73-
74-
.top-mid .top-mid-item-name strong {
75-
font-size: 50px;
76-
color: #ff8244;
77-
font-weight: normal;
78-
margin: 0 10px;
79-
}
80-
81-
.top-mid .top-mid-item-huanbi {
82-
font-size: 30px;
83-
color: #b4c7f9;
84-
}
85-
86-
.top-mid .top-mid-item-huanbi strong {
87-
font-size: 40px;
88-
margin: 0 10px 0 36px;
89-
position: relative;
90-
display: inline-block;
91-
}
92-
93-
.top-mid .top-mid-item-huanbi em {
94-
font-size: 30px;
95-
}
96-
97-
.top-mid .top-mid-item-huanbi strong[data-state]:after {
98-
content: "";
99-
display: inline-block;
100-
position: absolute;
101-
width: 25px;
102-
height: 26px;
103-
top: 14px;
104-
left: -30px;
105-
}
106-
107-
.top-mid .top-mid-item-huanbi strong[data-state="up"] {
108-
color: #ff4444;
109-
}
110-
111-
.top-mid .top-mid-item-huanbi strong[data-state="level"] {
112-
color: #b4c7f9;
113-
}
114-
115-
.top-mid .top-mid-item-huanbi strong[data-state="down"] {
116-
color: #44ff86;
117-
}
118-
119-
.top-mid .top-mid-item-huanbi strong[data-state="up"]:after {
120-
background: url(../../assets/images/common/huanbi-up.png) no-repeat;
121-
}
122-
123-
.top-mid .top-mid-item-huanbi strong[data-state="down"]:after {
124-
background: url(../../assets/images/common/huanbi-down.png) no-repeat;
125-
}

‎src/components/Layout.vue

+16-25
Original file line numberDiff line numberDiff line change
@@ -3,36 +3,27 @@
33
<div class="side-l-nav" :class="{active:navShow}">
44
<div class="side-l-inner-wrap">
55
<div class="side-nav-content">
6-
<div class="side-nav-list" data-theme="takepolice">
7-
<p class="side-nav-til" data-type="takepolice">接处警专题</p>
6+
<div class="side-nav-list">
7+
<p class="side-nav-til fantasy">范特西</p>
88
<ul>
9-
<li data-page="overview" class="active">
10-
<router-link to="">接处警总览图</router-link>
11-
</li>
12-
<li data-page="distributed">
13-
<router-link to="">警情与警力分布</router-link>
14-
</li>
15-
<li data-page="trend">
16-
<router-link to="">警情趋势</router-link>
9+
<li class="active">
10+
<router-link to="/fantasy/castle">威廉古堡</router-link>
1711
</li>
1812
</ul>
1913
</div>
20-
<div class="side-nav-list" data-theme="iot">
21-
<p class="side-nav-til" data-type="iot">物联网专题</p>
14+
<div class="side-nav-list">
15+
<p class="side-nav-til stride">跨时代</p>
2216
<ul>
23-
<li data-page="overview">
24-
<router-link to="">物联网总览图</router-link>
25-
</li>
26-
<li data-page="tongbi">
27-
<router-link to="">电动车警情月分析</router-link>
17+
<li>
18+
<router-link to="/stride/fireworks">烟花易冷</router-link>
2819
</li>
2920
</ul>
3021
</div>
31-
<div class="side-nav-list" data-theme="migrate">
32-
<p class="side-nav-til" data-type="migrate">迁徙地图</p>
22+
<div class="side-nav-list">
23+
<p class="side-nav-til excleamation">惊叹号</p>
3324
<ul>
34-
<li data-page="migratein">
35-
<router-link to="">昆明人口迁徙</router-link>
25+
<li>
26+
<router-link to="/excleamation/sailor" replace>水手怕水</router-link>
3627
</li>
3728
</ul>
3829
</div>
@@ -107,7 +98,7 @@
10798
10899
.side-nav-list {
109100
width: 100%;
110-
margin-bottom: 30px;
101+
margin-bottom: 80px;
111102
}
112103
113104
.side-nav-til {
@@ -122,15 +113,15 @@
122113
text-align: center;
123114
}
124115
125-
.side-nav-til[data-type="takepolice"] {
116+
.fantasy{
126117
background-position: 0px -154px;
127118
}
128119
129-
.side-nav-til[data-type="migrate"] {
120+
.stride{
130121
background-position: 0px -756px;
131122
}
132123
133-
.side-nav-til[data-type="iot"] {
124+
.exclamation{
134125
background-position: 0px -1352px;
135126
}
136127

‎src/components/common/TopMid.vue

+142
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
<template>
2+
<div class="top-mid">
3+
<div class="item" v-for="item in dataset" :key="item.id" >
4+
<span class="name">{{item.name}}
5+
<strong>{{item.value}}</strong>
6+
</span>
7+
<span class="huanbi">环比
8+
<strong :data-state="item.state">{{item.huanbi}}
9+
<em>%</em>
10+
</strong>
11+
</span>
12+
</div>
13+
</div>
14+
</template>
15+
<script>
16+
import api from '../../tool/api'
17+
import Data from '../../data/fantasy/castle/top'
18+
Data()
19+
import axios from 'axios'
20+
export default {
21+
name: 'topMid',
22+
data() {
23+
return {
24+
dataset: []
25+
}
26+
},
27+
mounted() {
28+
const self = this
29+
axios.get(api.castleTop)
30+
.then(response=>{
31+
const data = response.data.result.top
32+
data.map(item=>{
33+
let state
34+
let huanbi
35+
if(item.huanbi > 0) {
36+
state = 'up'
37+
huanbi = item.huanbi
38+
} else if(item.huanbi == 0) {
39+
state = 'level'
40+
huanbi = item.huanbi
41+
} else if(item.huanbi < 0) {
42+
state = 'down'
43+
huanbi = Math.abs(item.huanbi)
44+
}
45+
self.dataset.push({
46+
name:item.name,
47+
value:item.value,
48+
huanbi:huanbi,
49+
state:state
50+
})
51+
})
52+
})
53+
.catch(error=>{
54+
console.error(error)
55+
})
56+
}
57+
}
58+
59+
</script>
60+
61+
<style>
62+
.top-mid {
63+
position: absolute;
64+
z-index: 1;
65+
left: 50%;
66+
top: 30px;
67+
width: 1650px;
68+
display: flex;
69+
justify-content: space-around;
70+
box-sizing: border-box;
71+
padding: 24px 20px 0;
72+
background: url(../../assets/images/common/top-center-bg.png) no-repeat top center;
73+
background-size: 100% 100%;
74+
transform: translate(-50%, 0);
75+
margin-left: -20px;
76+
}
77+
78+
.item {
79+
max-width: 33.33%;
80+
overflow: hidden;
81+
white-space: nowrap;
82+
}
83+
84+
.name {
85+
font-size: 40px;
86+
color: #b4c7f9;
87+
}
88+
89+
.name strong {
90+
font-size: 50px;
91+
color: #ff8244;
92+
font-weight: normal;
93+
margin: 0 10px;
94+
}
95+
96+
.huanbi {
97+
font-size: 30px;
98+
color: #b4c7f9;
99+
}
100+
101+
.huanbi strong {
102+
font-size: 40px;
103+
margin: 0 10px 0 36px;
104+
position: relative;
105+
display: inline-block;
106+
}
107+
108+
.huanbi em {
109+
font-size: 30px;
110+
}
111+
112+
.huanbi strong[data-state]:after {
113+
content: "";
114+
display: inline-block;
115+
position: absolute;
116+
width: 25px;
117+
height: 26px;
118+
top: 14px;
119+
left: -30px;
120+
}
121+
122+
.huanbi strong[data-state="up"] {
123+
color: #ff4444;
124+
}
125+
126+
.huanbi strong[data-state="level"] {
127+
color: #b4c7f9;
128+
}
129+
130+
.huanbi strong[data-state="down"] {
131+
color: #44ff86;
132+
}
133+
134+
.huanbi strong[data-state="up"]:after {
135+
background: url(../../assets/images/common/huanbi-up.png) no-repeat;
136+
}
137+
138+
.huanbi strong[data-state="down"]:after {
139+
background: url(../../assets/images/common/huanbi-down.png) no-repeat;
140+
}
141+
142+
</style>

0 commit comments

Comments
 (0)