<!DOCTYPE html>
|
<html>
|
|
<head>
|
<meta charset="utf-8" />
|
<title>重大项目下钻</title>
|
|
<link rel="stylesheet" href="UE/element-ui/lib/theme-chalk/index.css" />
|
<script src="UE/jquery.min.js"></script>
|
<script src="UE/element/vue.min.js"></script>
|
|
<script src="UE/element-ui/lib/index.js"></script>
|
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
|
|
|
<!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
<script src="https://unpkg.com/element-ui/lib/index.js"></script> -->
|
|
<style>
|
@font-face {
|
font-family: Font1;
|
src: url(./Font/SourceHanSansCN-Normal.otf);
|
}
|
|
.box {
|
width: 374px;
|
height: 221px;
|
background: url('./UE/img/bg3.png') no-repeat center;
|
background-size: 100% 100%;
|
padding: 1%;
|
overflow-y: auto;
|
font-family: 'Font1';
|
}
|
|
.box1 {
|
font-family: 'Font1';
|
font-weight: 500;
|
font-size: 22px;
|
line-height: 32px;
|
color: #FFFFFF;
|
}
|
|
.box2 {
|
font-weight: 400;
|
font-size: 18px;
|
line-height: 18px;
|
color: #FFFFFF;
|
}
|
|
.label1 {
|
font-family: 'Font1';
|
font-size: 12px;
|
line-height: 12px;
|
color: #FFFFFF;
|
opacity: 0.8;
|
}
|
|
.label2 {
|
font-family: 'Font1';
|
font-weight: 400;
|
font-size: 14px;
|
line-height: 18px;
|
color: rgba(255, 255, 255, 0.8);
|
|
|
}
|
|
.box3 {
|
font-family: 'Font1';
|
font-weight: 400;
|
font-size: 24px;
|
line-height: 35px;
|
color: #FFFFFF;
|
}
|
|
.box4 {
|
font-family: 'Font1';
|
font-weight: 400;
|
font-size: 32px;
|
line-height: 32px;
|
|
color: #00FFCB;
|
|
}
|
</style>
|
</head>
|
|
<body>
|
<div id="app" class="box">
|
<!-- <div class="box1">{{ message1 }}</div>
|
<div class="box2">
|
面积：{{message2}}万<label class="label1">平方米</label>
|
</div>
|
<div class="box3">{{ message4 }}</div> -->
|
<table style="width: 100%; height:100%">
|
<tr>
|
<td colspan="2" class="box1">{{ message1 }}</td>
|
</tr>
|
|
|
<tr>
|
<td class="box3">生产总值</td>
|
<td class="box3">工业生产总值</td>
|
</tr>
|
<tr>
|
<td class="box4">{{message2}}<label class="label2">亿元</label></td>
|
<td class="box4">{{message3}}<label class="label2">亿元</label></td>
|
</tr>
|
<tr>
|
<td colspan="2" class="box3">企业数量</td>
|
|
</tr>
|
<tr>
|
<td colspan="2" class="box4">{{message4}}<label class="label2">家</label></td>
|
|
</tr>
|
</table>
|
</div>
|
|
<script>
|
new Vue({
|
el: '#app',
|
data: function(){
|
return{
|
message1: '',
|
message2: ' ',
|
message3: 0,
|
message4: 0,
|
num:3,
|
|
}
|
},
|
methods: {
|
showmessage(){
|
|
var arr = ['v']
|
var id = this.getQueryString(arr[0])
|
var value = JSON.parse(id)
|
this.message1 =value.special_region_name
|
this.message2 = value.gdp_value
|
this.message3 = value.industrial_value
|
this.message4 = value.enterprise_num
|
|
},
|
|
|
|
getQueryString(name){
|
var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i')
|
var r = window.location.search.substr(1).match(reg)
|
if (r != null) {
|
return decodeURI(r[2])
|
}
|
|
return ''
|
}
|
},
|
created () {
|
|
this.showmessage()
|
|
|
|
}
|
})
|
</script>
|
</body>
|
|
</html>
|
