a5f51b80
 liuqimichale
完成页面
|
1
2
3
|
<template>
<div>
<div class="banner"></div>
|
|
b0b6d6fe
liuqimichale
build
|
4
|
<div class="berth">
|
|
c8223346
liuqimichale
build
|
5
|
<h1 class="title">泊位分布</h1>
|
|
b0b6d6fe
liuqimichale
build
|
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
|
<div class="map" id="map"></div>
<div class="berth-num">
<p>区域泊位规划</p>
<ul class="berth-list">
<li>
<span class="fl">黄石铁山区</span>
<span class="fr">123</span>
</li>
<li>
<span class="fl">黄石下陆区</span>
<span class="fr">5007</span>
</li>
<li>
<span class="fl">黄石黄石港区</span>
<span class="fr">2395</span>
</li>
<li>
<span class="fl">黄石西塞山区</span>
<span class="fr">1188</span>
</li>
<li>
<span class="fl">黄石经济开发区</span>
<span class="fr">413</span>
</li>
</ul>
</div>
</div>
|
|
a5f51b80
liuqimichale
完成页面
|
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
|
<div class="news-wrap">
<h1 class="title">新闻中心</h1>
<div class="fl news-bg"></div>
<ul class="fl news-con">
<li>
<ul>
<li class="fl date">
<h1>06</h1>
<h5>06</h5>
</li>
<li class="fl des">
<h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16613')"><a>集聚人才新优势 激活发展新动能</a></h3>
<p>6月6日上午，市城发集团召开优秀青年人才表彰会，对四家重才爱才先进单位和十名优秀青年人才进行了表彰。</p>
</li>
</ul>
</li>
<li>
<ul>
<li class="fl date">
<h1>06</h1>
<h5>06</h5>
</li>
<li class="fl des">
<h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16611')"><a>黄石城发集团春季招聘体检公告</a></h3>
<p>根据《黄石市城市发展投资集团有限公司春季招聘公告》及复试情况，现将体检人员名单及有关事项公告如下。</p>
</li>
</ul>
</li>
<li>
<ul>
<li class="fl date">
<h1>06</h1>
<h5>05</h5>
</li>
<li class="fl des">
<h3 onclick="window.open('http://www.hscfjt.com/art.php?id=16610')"><a>黄石城发集团再添新成员</a></h3>
<p>6月4日，市妇联和市城发集团签订协议，将市妇联所属市天宝幼儿园和市儿童活动中心移交给市城发集团。</p>
</li>
</ul>
</li>
</ul>
</div>
</div>
</template>
<script>
export default {
|
|
b0b6d6fe
liuqimichale
build
|
80
81
82
83
84
85
86
|
name: 'home',
mounted() {
// 百度地图API功能
var map = new BMap.Map("map");
var point = new BMap.Point(115.078186, 30.232887);
map.centerAndZoom(point, 15);
}
|
|
a5f51b80
liuqimichale
完成页面
|
87
88
|
}
</script>
|
|
b0b6d6fe
liuqimichale
build
|
89
|
|
|
a5f51b80
liuqimichale
完成页面
|
90
91
92
93
94
95
96
|
<style scoped lang="scss">
.banner {
background: url("../assets/home/banner.png") no-repeat center center;
background-size: 100% 100%;
}
.berth {
|
|
b0b6d6fe
liuqimichale
build
|
97
|
width: 1200px;
|
|
a5f51b80
liuqimichale
完成页面
|
98
|
height: 823px;
|
|
b0b6d6fe
liuqimichale
build
|
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
|
padding: 50px 0;
position: relative;
margin: 0 auto;
}
.map{
width: 1200px;
height: 600px;
}
.berth-num{
width: 323px;
height: 368px;
position: absolute;
top:200px;
right: 20px;
background: url("../assets/home/berth.png") no-repeat;
p{
padding-top: 20px;
font-size: 20px;
}
}
.berth-list{
margin-top: 50px;
li{
height: 21px;
line-height: 21px;
font-size: 16px;
color: #314659;
padding: 0 40px 30px 60px;
background: url("../assets/home/berth-list.png") no-repeat 30px 0;
margin-bottom: 15px;
}
|
|
a5f51b80
liuqimichale
完成页面
|
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
|
}
.news-wrap{
width: 1200px;
margin: 0 auto;
padding: 50px 0;
overflow: hidden;
}
.title{
padding-bottom: 50px;
font-size:38px;
font-family:PingFangSC-Semibold;
font-weight:600;
color:rgba(49,70,89,1);
line-height:46px;
}
.news-bg{
width: 535px;
height: 401px;
margin-right: 45px;
background: url("../assets/home/news-bg.png") no-repeat;
}
.news-con {
width: 535px;
height: 401px;
}
.news-con>li{
height: 129px;
border-bottom: 1px solid rgba(216,216,216,1);
ul{
padding: 25px 0 0;
overflow: hidden;
}
}
.date{
width: 83px;
height: 83px;
margin-right: 20px;
background: #FF5656;
position: relative;
h1{
padding-top: 25px;
font-size:36px;
color:rgba(255,255,255,1);
}
h5{
font-size: 12px;
text-align: right;
padding-right: 10px;
}
&:before{
content: '';
position: absolute;
right: 14px;
bottom: 27px;
transform: rotate(-45deg);
width: 17px;
height: 1px;
background:rgba(255,255,255,1)
}
}
.des h3{
padding-bottom: 15px;
font-size: 20px;
color: #0D1A26;
cursor: pointer;
}
.des p {
width: 430px;
line-height: 22px;
color: #314659;
}
</style>
|
