home.vue
5.54 KB
1
2
3
4
5
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
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
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
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
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
206
207
208
209
210
211
212
213
<template>
<div>
<div class="banner"></div>
<div class="berth">
<h1 class="title">泊位分布</h1>
<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>
<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">
<h3>06</h3>
<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">
<h3>06</h3>
<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">
<h3>06</h3>
<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 {
name: 'home',
mounted() {
// 百度地图API功能
var map = new BMap.Map("map", {enableMapClick:false});
var point = new BMap.Point(115.078186, 30.232887);
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
var top_left_navigation = new BMap.NavigationControl(); //左上角，添加默认缩放平移控件
var top_right_navigation = new BMap.NavigationControl({anchor: BMAP_ANCHOR_TOP_RIGHT, type: BMAP_NAVIGATION_CONTROL_SMALL}); //右上角，仅包含平移和缩放按钮
map.addControl(top_left_control);
map.addControl(top_left_navigation);
map.addControl(top_right_navigation);
}
}
</script>
<style scoped lang="scss">
.banner {
background: url("../assets/home/banner.png") no-repeat center center;
background-size: 100% 100%;
}
.berth {
width: 1200px;
height: 823px;
padding: 50px 0;
position: relative;
margin: 0 auto;
}
.map{
width: 1200px;
height: 600px;
}
.berth-num{
width: 323px;
height: 368px;
position: absolute;
top:200px;
right: 80px;
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;
}
}
.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;
h3{
padding-top: 15px;
font-size:32px;
color:rgba(255,255,255,1);
}
h5{
font-size: 12px;
text-align: right;
padding-right: 10px;
color: #Fff;
}
&:before{
content: '';
position: absolute;
right: 14px;
bottom: 36px;
transform: rotate(-45deg);
width: 25px;
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>