<!--
* @Author: your name
* @Date: 2021-05-08 10:20:58
* @LastEditTime: 2022-08-25 23:33:41
* @LastEditors: 杨世博 1172608920@qq.com
* @Description: In User Settings Edit
* @FilePath: /zjut/index.html
-->
<!DOCTYPE html>
<html lang="en">
<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" />
<title>校友数据可视化平台</title>
<link rel="stylesheet" href="./css/swiper.min.css" />
<link rel="stylesheet" href="./css/enterprise.css" />
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
</head>
<body>
<div class="container" id="app" @click="onAppClick">
<div class="top">
<div class="school-logo">
<img src="./images/enterprise/logo.png" alt="" />
</div>
<div class="school-title">校友企业数据大屏</div>
<div class="school-top-list">
<div class="top-list-item">
<img src="./images/enterprise/one.png" alt="" />
<div class="top-list-item-right">
<p>237</p>
<p>校企总数</p>
</div>
</div>
<div class="top-list-item">
<img src="./images/enterprise/two.png" alt="" />
<div class="top-list-item-right">
<p>237</p>
<p>上市公司</p>
</div>
</div>
<div class="top-list-item">
<img src="./images/enterprise/three.png" alt="" />
<div class="top-list-item-right">
<p>237</p>
<p>院系分布</p>
</div>
</div>
<div class="top-list-item">
<img src="./images/enterprise/four.png" alt="" />
<div class="top-list-item-right">
<p>237</p>
<p>专业分布</p>
</div>
</div>
<div class="top-list-item">
<img src="./images/enterprise/five.png" alt="" />
<div class="top-list-item-right">
<p>237</p>
<p>行业分布</p>
</div>
</div>
<div class="top-list-item">
<img src="./images/enterprise/six.png" alt="" />
<div class="top-list-item-right">
<p>237</p>
<p>地区分布</p>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="bottom-left">
<div class="left-top">
<div class="left-top-title">
<p>上市企业名单</p>
<p>上市比例 20%</p>
</div>
<div class="left-top-list">
<p>
<span> 杭州临安恒生科技股份有限公司</span><span>603308</span>
</p>
<p>
<span> 杭州临安恒生科技股份有限公司</span><span>603308</span>
</p>
<p>
<span> 杭州临安恒生科技股份有限公司</span><span>603308</span>
</p>
<p>
<span> 杭州临安恒生科技股份有限公司</span><span>603308</span>
</p>
<p>
<span> 杭州临安恒生科技股份有限公司</span><span>603308</span>
</p>
</div>
</div>
<div class="left-top">
<div class="left-top-title">
<p>企业类型统计</p>
</div>
<!-- 饼图 -->
<div class="enterprise_type_chart"></div>
</div>
</div>
<div class="bottom-middle">
<div class="bottom-middle-top" style="position: relative;">
<div class="left-top-title">
<p>地区分布</p>
<div>
<span
:class="!isProvince? 'active' : 'normal'"
@click="handleSwitchMap"
>国内分布</span
>
<span
:class="isProvince? 'active' : 'normal'"
@click="handleSwitchMap"
>省内分布</span
>
</div>
</div>
<!-- 国内分布 -->
<div class="bottom-country-map" v-if="!isProvince"></div>
<!-- 省内分布 -->
<div class="bottom-province-map" v-if="isProvince"></div>
<!-- 地图详情框 -->
<div class="modal-container" :style="mapStyle" v-show="mapShow">
<div class="top-container">
<div class="left-container"></div>
<div class="triangle"></div>
</div>
<div class="bottom-container">
<div class="content-container">
<div>{{mapContent.name}}</div>
<div>{{mapContent.value}}</div>
</div>
</div>
</div>
</div>
<div class="bottom-middle-bottom">
<div class="middle-bottom-one">
<div class="left-top-title">
<p>企业性质统计</p>
</div>
<div class="left-top-nature"></div>
</div>
<div class="middle-bottom-two">
<div class="left-top-title">
<p>企业规模统计</p>
</div>
<div class="left-top-scale"></div>
</div>
<div class="middle-bottom-three">
<div class="left-top-title">
<p>企业负责人所属专业分布</p>
</div>
<div class="left-top-principal"></div>
</div>
</div>
</div>
<div class="bottom-right">
<div class="bottom-right-top">
<div class="left-top-title">
<p>行业分布</p>
</div>
<div class="bottom-right-industry"></div>
</div>
<div class="bottom-right-bottom">
<div class="left-top-title">
<p>企业负责人所属院系分布</p>
</div>
<div class="bottom-right-faculty"></div>
</div>
</div>
</div>
</div>
<script src="./js/vue.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/china.js"></script>
<script src="./js/swiper.min.js"></script>
<script src="./js/map/zhejiang.js"></script>
<script>
var app = new Vue({
el: '#app',
data: {
topEnterpriseList: null,
mapContent: {
name: '',
value: '',
},
mapStyle: {
top: '233px',
left: '500px',
},
mapShow: false,
isProvince: true,
},
methods: {
loadtopList: function () {
axios
.get(
'https://test.wxb365.cn/uplus-operateu/api/v1/screen/enterprise/getListedEnterprise',
{ offset: 1, limit: 10 }
)
.then((res) => {
console.log(res)
})
},
fontChart: function (res) {
let clientWidth =
window.innerWidth ||
document.documentElement.clientWidth ||
document.body.clientWidth
if (!clientWidth) return
let fontSize = 100 * (clientWidth / 1920)
return res * fontSize
},
setFont: function () {
let uiw = 1920
let winw = document.documentElement.clientWidth
let rate = winw / uiw
document.documentElement.style.fontSize = rate * 100 + 'px'
},
enterpriseTypeChart: function () {
let that = this
var chartDom = document.getElementsByClassName(
'enterprise_type_chart'
)[0]
var myChart = echarts.init(chartDom)
let option
option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
legend: {
left: 'auto',
top: 'auto',
right: 'auto',
bottom: 5,
orient: 'horizontal',
textStyle: {
color: '#fff',
fontSize: 16,
},
},
series: [
{
type: 'pie',
radius: [30, 120],
center: ['50%', '50%'],
color: [
'rgb(131,249,103)',
'#FBFE27',
'#FE5050',
'#1DB7E5',
'#F3972F',
],
data: [
{
value: 285,
name: '10年以下楼龄',
},
{
value: 410,
name: '10-20年以下楼龄',
},
{
value: 274,
name: '20-30年以下楼龄',
},
{
value: 235,
name: '30年以上楼龄',
},
{
value: 232,
name: '危房',
},
].sort(function (a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
normal: {
formatter: ['{c|{c}户}', '{b|{b}}'].join('\n'),
rich: {
c: {
color: '#8DEF8B',
fontSize: 20,
fontWeight: 'bold',
lineHeight: 5,
},
b: {
color: 'rgb(98,137,169)',
fontSize: 15,
height: 40,
},
},
},
},
labelLine: {
normal: {
lineStyle: {
color: 'rgb(98,137,169)',
},
smooth: 0.2,
length: 1,
},
},
itemStyle: {
normal: {
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 50,
},
},
},
],
}
option && myChart.setOption(option)
},
natureTypeChart: function () {
let that = this
var chartDom = document.getElementsByClassName('left-top-nature')[0]
var myChart = echarts.init(chartDom)
let option
option = {
tooltip: {
trigger: 'item',
},
legend: {
left: 'auto',
top: 'auto',
right: 'auto',
bottom: 5,
orient: 'horizontal',
textStyle: {
color: '#fff',
fontSize: 16,
},
},
series: [
{
name: '访问来源',
type: 'pie',
radius: '50%',
selectedMode: 'single',
data: [
{ value: 1048, name: '搜索引擎' },
{ value: 735, name: '直接访问' },
{ value: 580, name: '邮件营销' },
{ value: 484, name: '联盟广告' },
{ value: 300, name: '视频广告' },
],
label: {
color: '#fff',
},
emphasis: {
itemStyle: {
shadowBlur: 10,
shadowOffsetX: 0,
shadowColor: 'rgba(0, 0, 0, 0.5)',
},
},
},
],
}
option && myChart.setOption(option)
},
scaleTypeChart: function () {
let that = this
var chartDom = document.getElementsByClassName('left-top-scale')[0]
var myChart = echarts.init(chartDom)
let option
option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
legend: {
left: 'auto',
top: 'auto',
right: 'auto',
bottom: 5,
orient: 'horizontal',
textStyle: {
color: '#fff',
fontSize: 16,
},
},
series: [
{
type: 'pie',
radius: [30, 120],
center: ['50%', '50%'],
color: [
'rgb(131,249,103)',
'#FBFE27',
'#FE5050',
'#1DB7E5',
'#F3972F',
],
data: [
{
value: 285,
name: '10年以下楼龄',
},
{
value: 410,
name: '10-20年以下楼龄',
},
{
value: 274,
name: '20-30年以下楼龄',
},
{
value: 235,
name: '30年以上楼龄',
},
{
value: 232,
name: '危房',
},
].sort(function (a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
normal: {
formatter: ['{c|{c}户}', '{b|{b}}'].join('\n'),
rich: {
c: {
color: '#8DEF8B',
fontSize: 20,
fontWeight: 'bold',
lineHeight: 5,
},
b: {
color: 'rgb(98,137,169)',
fontSize: 15,
height: 40,
},
},
},
},
labelLine: {
normal: {
lineStyle: {
color: 'rgb(98,137,169)',
},
smooth: 0.2,
length: 1,
},
},
itemStyle: {
normal: {
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 50,
},
},
},
],
}
option && myChart.setOption(option)
},
principalTypeChart: function () {
let that = this
var chartDom = document.getElementsByClassName(
'left-top-principal'
)[0]
var myChart = echarts.init(chartDom)
let dataX = [
'XX街道',
'XXxxxx街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
]
let dataY = [2, 50, 15, 35, 50, 30, 40, 50, 60, 20]
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
top: '8%',
right: '5%',
left: '15%',
bottom: '18%',
},
xAxis: [
{
type: 'category',
data: dataX,
axisLine: {
lineStyle: {
color: 'rgba(66, 192, 255, .3)',
},
},
axisLabel: {
interval: 0,
margin: 10,
color: '#05D5FF',
textStyle: {
fontSize: 11,
},
rotate: '90',
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
axisLabel: {
padding: [3, 0, 0, 0],
formatter: '{value}',
color: 'rgba(95, 187, 235, 1)',
textStyle: {
fontSize: 11,
},
},
axisTick: {
show: true,
},
axisLine: {
lineStyle: {
color: 'rgba(66, 192, 255, .3)',
},
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)',
},
},
},
],
series: [
{
type: 'bar',
data: dataY,
barWidth: '10',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(43,145,206,.5)',
},
{
offset: 0.98,
color: 'rgba(37,215,181,.9)',
},
],
false
),
shadowColor: 'rgba(5, 213, 255, 1)',
shadowBlur: 4,
barBorderRadius: 12,
},
},
label: {
normal: {
show: true,
lineHeight: 10,
formatter: '{c}',
position: 'top',
textStyle: {
color: '#fff',
fontSize: 10,
},
},
},
},
],
}
option && myChart.setOption(option)
},
industryTypeChart: function () {
let that = this
var chartDom = document.getElementsByClassName(
'bottom-right-industry'
)[0]
var myChart = echarts.init(chartDom)
let option
option = {
tooltip: {
trigger: 'item',
formatter: '{b} : {c} ({d}%)',
},
legend: {
left: 'auto',
top: 'auto',
right: 'auto',
bottom: 5,
orient: 'horizontal',
textStyle: {
color: '#fff',
fontSize: 16,
},
},
series: [
{
type: 'pie',
radius: [30, 120],
center: ['50%', '50%'],
color: [
'rgb(131,249,103)',
'#FBFE27',
'#FE5050',
'#1DB7E5',
'#F3972F',
],
data: [
{
value: 285,
name: '10年以下楼龄',
},
{
value: 410,
name: '10-20年以下楼龄',
},
{
value: 274,
name: '20-30年以下楼龄',
},
{
value: 235,
name: '30年以上楼龄',
},
{
value: 232,
name: '危房',
},
].sort(function (a, b) {
return a.value - b.value
}),
roseType: 'radius',
label: {
normal: {
formatter: ['{c|{c}户}', '{b|{b}}'].join('\n'),
rich: {
c: {
color: '#8DEF8B',
fontSize: 20,
fontWeight: 'bold',
lineHeight: 5,
},
b: {
color: 'rgb(98,137,169)',
fontSize: 15,
height: 40,
},
},
},
},
labelLine: {
normal: {
lineStyle: {
color: 'rgb(98,137,169)',
},
smooth: 0.2,
length: 1,
},
},
itemStyle: {
normal: {
shadowColor: 'rgba(0, 0, 0, 0.8)',
shadowBlur: 50,
},
},
},
],
}
option && myChart.setOption(option)
},
facultyTypeChart: function () {
let that = this
var chartDom = document.getElementsByClassName(
'bottom-right-faculty'
)[0]
var myChart = echarts.init(chartDom)
let dataX = [
'XX街道',
'XXxxxx街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
'XX街道',
]
let dataY = [2, 50, 15, 35, 50, 30, 40, 50, 60, 20]
let option = {
tooltip: {
trigger: 'axis',
axisPointer: {
type: 'shadow',
},
},
grid: {
top: '8%',
right: '5%',
left: '15%',
bottom: '18%',
},
xAxis: [
{
type: 'category',
data: dataX,
axisLine: {
lineStyle: {
color: 'rgba(66, 192, 255, .3)',
},
},
axisLabel: {
interval: 0,
margin: 10,
color: '#05D5FF',
textStyle: {
fontSize: 11,
},
rotate: '90',
},
axisTick: {
show: false,
},
},
],
yAxis: [
{
axisLabel: {
padding: [3, 0, 0, 0],
formatter: '{value}',
color: 'rgba(95, 187, 235, 1)',
textStyle: {
fontSize: 11,
},
},
axisTick: {
show: true,
},
axisLine: {
lineStyle: {
color: 'rgba(66, 192, 255, .3)',
},
},
splitLine: {
lineStyle: {
color: 'rgba(255,255,255,0)',
},
},
},
],
series: [
{
type: 'bar',
data: dataY,
barWidth: '10',
itemStyle: {
normal: {
color: new echarts.graphic.LinearGradient(
0,
0,
0,
1,
[
{
offset: 0,
color: 'rgba(253, 194, 216, 1)',
},
{
offset: 0.98,
color: 'rgba(4, 18, 130, 1)',
},
],
false
),
shadowColor: 'rgba(5, 213, 255, 1)',
shadowBlur: 4,
barBorderRadius: 12,
},
},
label: {
normal: {
show: true,
lineHeight: 10,
formatter: '{c}',
position: 'top',
textStyle: {
color: '#fff',
fontSize: 10,
},
},
},
},
],
}
option && myChart.setOption(option)
},
async countryMapChart() {
const that = this
const alumnusList = [
{ value: 15, name: '江苏', id: '1' },
{ value: 15, name: '黑龙江', id: '2' },
{ value: 15, name: '山西', id: '3' },
{ value: 15, name: '香港', id: '4' },
{ value: 9999, name: '河南', id: '4' },
]
let option = {
visualMap: {
min: 0,
max: 10000,
left: 'left',
top: 'bottom',
show: true,
type: 'piecewise',
pieces: [
{ min: 10000, color: '#023481', label: '10000人及以上' },
{
min: 1000,
max: 9999,
color: '#114ba2',
label: '1000-9999人',
},
{ min: 500, max: 999, color: '#1e62c7', label: '500-999人' },
{ min: 100, max: 499, color: '#317cea', label: '100-499人' },
{ min: 10, max: 99, color: '#2590ea', label: '10-99人' },
{ min: 1, max: 9, color: '#7db0fa', label: '1-9人' },
],
itemWidth: 10,
itemHeight: 30,
itemGap: 0,
textStyle: {
color: '#ffffff',
},
},
geo: {
map: 'china',
roam: false,
zoom: 1,
top: 0,
bottom: 0,
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
},
},
emphasis: {
show: true,
textStyle: {
color: '#fbfbfb',
fontSize: that.fontChart(0.14),
},
},
},
itemStyle: {
normal: {
borderWidth: 0.7,
borderColor: '#ffffff',
areaColor: '#4b9de6',
},
emphasis: {
borderWidth: 0,
areaColor: '#1080e3',
},
},
},
series: [
{
type: 'map',
geoIndex: 0,
data: alumnusList,
selectedMode: false,
},
],
}
setTimeout(function () {
that.chinaChart = echarts.init(
document.querySelector('.bottom-country-map')
)
that.chinaChart.setOption(option)
that.chinaChart.on('click', function (v) {
console.log(v)
setTimeout(function () {
that.mapContent.value = v.name
that.mapContent.name = !!v.value ? v.value : 0
that.$set(that.mapStyle, 'top', v.event.offsetY + 50 + 'px')
that.$set(that.mapStyle, 'left', v.event.offsetX + 'px')
that.mapShow = true
}, 0)
})
}, 10)
},
async provinceMapChart() {
const that = this
const alumnusList = [
{ value: 15, name: '宁波', id: '1' },
{ value: 15, name: '杭州', id: '2' },
{ value: 15, name: '金华', id: '3' },
{ value: 15, name: '丽水', id: '4' },
{ value: 9999, name: '温州', id: '4' },
]
let option = {
visualMap: {
min: 0,
max: 10000,
left: 'left',
top: 'bottom',
show: true,
type: 'piecewise',
pieces: [
{ min: 10000, color: '#023481', label: '10000人及以上' },
{
min: 1000,
max: 9999,
color: '#114ba2',
label: '1000-9999人',
},
{ min: 500, max: 999, color: '#1e62c7', label: '500-999人' },
{ min: 100, max: 499, color: '#317cea', label: '100-499人' },
{ min: 10, max: 99, color: '#2590ea', label: '10-99人' },
{ min: 1, max: 9, color: '#7db0fa', label: '1-9人' },
],
itemWidth: 10,
itemHeight: 30,
itemGap: 0,
textStyle: {
color: '#ffffff',
},
},
geo: {
map: '浙江',
roam: false,
zoom: 1,
top: 0,
bottom: 0,
label: {
normal: {
show: true,
textStyle: {
color: '#fff',
},
},
emphasis: {
show: true,
textStyle: {
color: '#fbfbfb',
fontSize: that.fontChart(0.14),
},
},
},
itemStyle: {
normal: {
borderWidth: 0.7,
borderColor: '#ffffff',
areaColor: '#4b9de6',
},
emphasis: {
borderWidth: 0,
areaColor: '#1080e3',
},
},
},
series: [
{
type: 'map',
geoIndex: 0,
data: alumnusList,
selectedMode: false,
},
],
}
setTimeout(function () {
that.chinaChart = echarts.init(
document.querySelector('.bottom-province-map')
)
that.chinaChart.setOption(option)
that.chinaChart.on('click', function (v) {
console.log(v)
setTimeout(function () {
that.mapContent.value = v.name
that.mapContent.name = !!v.value ? v.value : 0
that.$set(that.mapStyle, 'top', v.event.offsetY + 50 + 'px')
that.$set(that.mapStyle, 'left', v.event.offsetX + 'px')
that.mapShow = true
}, 0)
})
}, 10)
},
onAppClick() {
this.mapShow = false
},
handleSwitchMap() {
this.isProvince = !this.isProvince
if (this.isProvince) {
this.$nextTick(() => {
this.provinceMapChart()
})
}
if (!this.isProvince) {
this.$nextTick(() => {
this.countryMapChart()
})
}
},
},
mounted: function () {
this.$nextTick(function () {
this.enterpriseTypeChart()
this.natureTypeChart()
this.scaleTypeChart()
this.principalTypeChart()
this.industryTypeChart()
this.facultyTypeChart()
this.countryMapChart()
this.provinceMapChart()
this.loadtopList()
})
},
created: function () {
const that = this
that.setFont()
window.onresize = function () {
that.setFont()
}
},
})
</script>
</body>
</html>
- 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
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289
- 290
- 291
- 292
- 293
- 294
- 295
- 296
- 297
- 298
- 299
- 300
- 301
- 302
- 303
- 304
- 305
- 306
- 307
- 308
- 309
- 310
- 311
- 312
- 313
- 314
- 315
- 316
- 317
- 318
- 319
- 320
- 321
- 322
- 323
- 324
- 325
- 326
- 327
- 328
- 329
- 330
- 331
- 332
- 333
- 334
- 335
- 336
- 337
- 338
- 339
- 340
- 341
- 342
- 343
- 344
- 345
- 346
- 347
- 348
- 349
- 350
- 351
- 352
- 353
- 354
- 355
- 356
- 357
- 358
- 359
- 360
- 361
- 362
- 363
- 364
- 365
- 366
- 367
- 368
- 369
- 370
- 371
- 372
- 373
- 374
- 375
- 376
- 377
- 378
- 379
- 380
- 381
- 382
- 383
- 384
- 385
- 386
- 387
- 388
- 389
- 390
- 391
- 392
- 393
- 394
- 395
- 396
- 397
- 398
- 399
- 400
- 401
- 402
- 403
- 404
- 405
- 406
- 407
- 408
- 409
- 410
- 411
- 412
- 413
- 414
- 415
- 416
- 417
- 418
- 419
- 420
- 421
- 422
- 423
- 424
- 425
- 426
- 427
- 428
- 429
- 430
- 431
- 432
- 433
- 434
- 435
- 436
- 437
- 438
- 439
- 440
- 441
- 442
- 443
- 444
- 445
- 446
- 447
- 448
- 449
- 450
- 451
- 452
- 453
- 454
- 455
- 456
- 457
- 458
- 459
- 460
- 461
- 462
- 463
- 464
- 465
- 466
- 467
- 468
- 469
- 470
- 471
- 472
- 473
- 474
- 475
- 476
- 477
- 478
- 479
- 480
- 481
- 482
- 483
- 484
- 485
- 486
- 487
- 488
- 489
- 490
- 491
- 492
- 493
- 494
- 495
- 496
- 497
- 498
- 499
- 500
- 501
- 502
- 503
- 504
- 505
- 506
- 507
- 508
- 509
- 510
- 511
- 512
- 513
- 514
- 515
- 516
- 517
- 518
- 519
- 520
- 521
- 522
- 523
- 524
- 525
- 526
- 527
- 528
- 529
- 530
- 531
- 532
- 533
- 534
- 535
- 536
- 537
- 538
- 539
- 540
- 541
- 542
- 543
- 544
- 545
- 546
- 547
- 548
- 549
- 550
- 551
- 552
- 553
- 554
- 555
- 556
- 557
- 558
- 559
- 560
- 561
- 562
- 563
- 564
- 565
- 566
- 567
- 568
- 569
- 570
- 571
- 572
- 573
- 574
- 575
- 576
- 577
- 578
- 579
- 580
- 581
- 582
- 583
- 584
- 585
- 586
- 587
- 588
- 589
- 590
- 591
- 592
- 593
- 594
- 595
- 596
- 597
- 598
- 599
- 600
- 601
- 602
- 603
- 604
- 605
- 606
- 607
- 608
- 609
- 610
- 611
- 612
- 613
- 614
- 615
- 616
- 617
- 618
- 619
- 620
- 621
- 622
- 623
- 624
- 625
- 626
- 627
- 628
- 629
- 630
- 631
- 632
- 633
- 634
- 635
- 636
- 637
- 638
- 639
- 640
- 641
- 642
- 643
- 644
- 645
- 646
- 647
- 648
- 649
- 650
- 651
- 652
- 653
- 654
- 655
- 656
- 657
- 658
- 659
- 660
- 661
- 662
- 663
- 664
- 665
- 666
- 667
- 668
- 669
- 670
- 671
- 672
- 673
- 674
- 675
- 676
- 677
- 678
- 679
- 680
- 681
- 682
- 683
- 684
- 685
- 686
- 687
- 688
- 689
- 690
- 691
- 692
- 693
- 694
- 695
- 696
- 697
- 698
- 699
- 700
- 701
- 702
- 703
- 704
- 705
- 706
- 707
- 708
- 709
- 710
- 711
- 712
- 713
- 714
- 715
- 716
- 717
- 718
- 719
- 720
- 721
- 722
- 723
- 724
- 725
- 726
- 727
- 728
- 729
- 730
- 731
- 732
- 733
- 734
- 735
- 736
- 737
- 738
- 739
- 740
- 741
- 742
- 743
- 744
- 745
- 746
- 747
- 748
- 749
- 750
- 751
- 752
- 753
- 754
- 755
- 756
- 757
- 758
- 759
- 760
- 761
- 762
- 763
- 764
- 765
- 766
- 767
- 768
- 769
- 770
- 771
- 772
- 773
- 774
- 775
- 776
- 777
- 778
- 779
- 780
- 781
- 782
- 783
- 784
- 785
- 786
- 787
- 788
- 789
- 790
- 791
- 792
- 793
- 794
- 795
- 796
- 797
- 798
- 799
- 800
- 801
- 802
- 803
- 804
- 805
- 806
- 807
- 808
- 809
- 810
- 811
- 812
- 813
- 814
- 815
- 816
- 817
- 818
- 819
- 820
- 821
- 822
- 823
- 824
- 825
- 826
- 827
- 828
- 829
- 830
- 831
- 832
- 833
- 834
- 835
- 836
- 837
- 838
- 839
- 840
- 841
- 842
- 843
- 844
- 845
- 846
- 847
- 848
- 849
- 850
- 851
- 852
- 853
- 854
- 855
- 856
- 857
- 858
- 859
- 860
- 861
- 862
- 863
- 864
- 865
- 866
- 867
- 868
- 869
- 870
- 871
- 872
- 873
- 874
- 875
- 876
- 877
- 878
- 879
- 880
- 881
- 882
- 883
- 884
- 885
- 886
- 887
- 888
- 889
- 890
- 891
- 892
- 893
- 894
- 895
- 896
- 897
- 898
- 899
- 900
- 901
- 902
- 903
- 904
- 905
- 906
- 907
- 908
- 909
- 910
- 911
- 912
- 913
- 914
- 915
- 916
- 917
- 918
- 919
- 920
- 921
- 922
- 923
- 924
- 925
- 926
- 927
- 928
- 929
- 930
- 931
- 932
- 933
- 934
- 935
- 936
- 937
- 938
- 939
- 940
- 941
- 942
- 943
- 944
- 945
- 946
- 947
- 948
- 949
- 950
- 951
- 952
- 953
- 954
- 955
- 956
- 957
- 958
- 959
- 960
- 961
- 962
- 963
- 964
- 965
- 966
- 967
- 968
- 969
- 970
- 971
- 972
- 973
- 974
- 975
- 976
- 977
- 978
- 979
- 980
- 981
- 982
- 983
- 984
- 985
- 986
- 987
- 988
- 989
- 990
- 991
- 992
- 993
- 994
- 995
- 996
- 997
- 998
- 999
- 1000
- 1001
- 1002
- 1003
- 1004
- 1005
- 1006
- 1007
- 1008
- 1009
- 1010
- 1011
- 1012
- 1013
- 1014
- 1015
- 1016
- 1017
- 1018
- 1019
- 1020
- 1021
- 1022
- 1023
- 1024
- 1025
- 1026
- 1027
- 1028
- 1029
- 1030
- 1031
- 1032
- 1033
- 1034
- 1035
- 1036
- 1037
- 1038
- 1039
- 1040
- 1041
- 1042
- 1043
- 1044
- 1045
- 1046
- 1047
- 1048
- 1049
- 1050
- 1051
- 1052
- 1053
- 1054
- 1055
- 1056
- 1057
- 1058
- 1059
- 1060
- 1061
- 1062
- 1063
- 1064
- 1065
- 1066
- 1067
- 1068
- 1069
- 1070
- 1071
- 1072
- 1073
- 1074
- 1075
- 1076
- 1077
- 1078
- 1079
- 1080
- 1081
- 1082
- 1083
- 1084
- 1085
- 1086
- 1087
- 1088
- 1089
- 1090
- 1091
- 1092
- 1093
- 1094
- 1095
- 1096
- 1097
- 1098
- 1099
- 1100
- 1101
- 1102
- 1103
- 1104
- 1105
- 1106
- 1107
- 1108
- 1109
- 1110
- 1111
- 1112
- 1113
- 1114
- 1115
- 1116
- 1117
- 1118
- 1119
- 1120
- 1121
- 1122
- 1123
- 1124
- 1125
- 1126
- 1127
- 1128
- 1129
- 1130
- 1131
- 1132
- 1133
- 1134
- 1135
- 1136
- 1137
- 1138
- 1139
- 1140
- 1141
- 1142
- 1143
- 1144
- 1145
- 1146
- 1147
- 1148
- 1149
- 1150
- 1151
- 1152
- 1153
- 1154
- 1155
- 1156
- 1157
- 1158
- 1159
- 1160
- 1161
- 1162
- 1163
- 1164
- 1165
- 1166
- 1167
- 1168
- 1169
- 1170
- 1171
- 1172
- 1173
- 1174
- 1175
- 1176
- 1177
- 1178
- 1179
- 1180
- 1181
- 1182
- 1183
- 1184
- 1185
- 1186
- 1187
- 1188
- 1189
- 1190
- 1191
- 1192
- 1193
- 1194
- 1195
- 1196
- 1197
- 1198
- 1199
- 1200
- 1201
- 1202
- 1203
- 1204
- 1205
- 1206
- 1207
- 1208
- 1209
- 1210
- 1211
- 1212
- 1213
- 1214
- 1215
- 1216
- 1217
- 1218
- 1219
- 1220
- 1221
- 1222
- 1223
- 1224
- 1225
- 1226
- 1227
- 1228
- 1229
- 1230
- 1231
- 1232
- 1233
- 1234
- 1235
- 1236
- 1237
- 1238
- 1239
- 1240
- 1241
- 1242
- 1243
- 1244
- 1245
- 1246
- 1247
- 1248
- 1249
- 1250
- 1251
- 1252
- 1253
- 1254
- 1255
- 1256
- 1257
- 1258
- 1259
- 1260
- 1261
- 1262
- 1263
- 1264
- 1265
- 1266
- 1267
- 1268
- 1269
- 1270
- 1271
body::-webkit-scrollbar {
display: none;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
ul {
list-style: none;
}
a {
text-decoration: none;
}
img {
vertical-align: top;
}
.container {
width: 100vw;
height: 100vh;
background-image: url(../images/enterprise/index-bg.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.top {
width: 100%;
height: 2.12rem;
padding: .18rem 1.12rem 0;
position: relative;
}
.school-logo {
width: 2.57rem;
height: .58rem;
}
.school-title {
width: 3.23rem;
height: .38rem;
font-size: .38rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #17FCFF;
line-height: .45rem;
position: absolute;
top: 18%;
left: 50%;
transform: translate(-50%, -50%);
}
.school-top-list {
width: 100%;
height: 1.1rem;
display: flex;
justify-content: space-between;
}
.top-list-item {
width: 16%;
height: 100%;
display: flex;
}
.top-list-item img {
height: 100%;
}
.top-list-item-right {
height: 100%;
width: 32%;
display: flex;
flex-direction: column;
align-items: center;
padding-top: .23rem;
}
.top-list-item-right p:nth-of-type(1) {
font-size: .38rem;
font-family: Microsoft YaHei;
font-weight: bold;
color: #07F1EE;
line-height: .48rem;
}
.top-list-item-right p:nth-of-type(2) {
font-size: .16rem;
font-family: Microsoft YaHei;
font-weight: 400;
color: #00CAFD;
line-height: .48rem;
}
.bottom {
width: 100%;
height: 8.68rem;
padding: 0 .6rem .4rem;
display: flex;
}
.bottom-left {
width: 4.2rem;
height: 8.12rem;
position: relative;
z-index: 100;
}
.left-top {
height: 50%;
width: 100%;
}
.left-top-title {
width: 100%;
height: .59rem;
display: flex;
justify-content: space-between;
align-items: center;
padding-right: .27rem;
font-weight: bold;
}
.left-top-title p:nth-of-type(1) {
width: 2.52rem;
height: 100%;
background-image: url(../images/enterprise/矢量智能对象\ 拷贝\ 4.png);
background-repeat: no-repeat;
background-size: 100% 100%;
font-size: .18rem;
display: flex;
align-items: center;
color: rgba(0, 202, 253, 1);
text-indent: .4rem;
}
.left-top-title p:nth-of-type(2) {
font-size: .14rem;
color: rgba(0, 202, 253, 1);
}
.left-top-list {
width: 100%;
height: 3.38rem;
padding: .15rem .31rem .25rem .44rem;
}
.left-top-list p {
width: 100%;
height: .46rem;
padding: 0 .18rem;
font-size: 14px;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #363B57;
border-top: none;
color: #fff;
}
.bottom-country-map,
.bottom-province-map{
width: 100%;
height: 4.19rem;
}
.left-top-list p:nth-of-type(1) {
color: rgba(0, 202, 253, 1);
background-color: rgba(8, 118, 178, 0.5);
border: 1px solid #0876B2;
}
.bottom-middle{
width: 9.32rem;
height: 8.12rem;
}
.bottom-middle-top{
width: 100%;
height: 4.8rem;
font-size: .2rem;
}
.bottom-middle-top .left-top-title>div{
width: 2.6rem;
height: 100%;
}
.left-top-title>div{
display: flex;
justify-content: space-between;
}
.left-top-title>div span{
width: 1.2rem;
height: 100%;
font-size: .16rem;
color: rgba(0, 178, 204, 1);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.left-top-title {
.normal {
background-image: url(../images/enterprise/矢量智能对象\ 拷贝.png);
background-repeat: no-repeat;
background-size: 100% 100%;
}
.active {
background-image: url(../images/enterprise/矢量智能对象\ 拷贝\ 5.png);;
background-repeat: no-repeat;
background-size: 100% 100%;
}
}
.bottom-middle-bottom{
width: 100%;
height: 3.4rem;
display: flex;
justify-content: space-between;
}
.bottom-middle-bottom>div{
width: 3.04rem;
height: 100%;
}
.bottom-right{
width: 4.2rem;
height: 8.12rem;
}
.bottom-right-top{
width: 100%;
height: 4.93rem;
}
.bottom-right-industry{
width: 100%;
height: 4.2rem;
}
.bottom-right-faculty{
width: 100%;
height: 2.6rem;
}
.enterprise_type_chart {
width: 100%;
height: 3.42rem;
}
.left-top-nature,.left-top-scale,.left-top-principal{
width: 100%;
height: 2.7rem;
}
.modal-container {
position: absolute;
top: 0;
left: 20;
width: 2rem;
height: 1rem;
border-top: 1px;
z-index: 999;
.top-container {
display: flex;
height: 20%;
.left-container {
width: 50%;
height: 100%;
border-top: 0.03rem solid rgba(87, 117, 157);
}
.triangle {
width: 14%;
height: 0.03rem;
background-color: rgba(87, 117, 157);
transform-origin: top left;
transform:rotate(45deg);
}
}
.bottom-container {
width: 100%;
height: 80%;
display: flex;
justify-content: flex-end;
.content-container {
width: 60%;
background-color: #f90;
}
}
}
- 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
- 214
- 215
- 216
- 217
- 218
- 219
- 220
- 221
- 222
- 223
- 224
- 225
- 226
- 227
- 228
- 229
- 230
- 231
- 232
- 233
- 234
- 235
- 236
- 237
- 238
- 239
- 240
- 241
- 242
- 243
- 244
- 245
- 246
- 247
- 248
- 249
- 250
- 251
- 252
- 253
- 254
- 255
- 256
- 257
- 258
- 259
- 260
- 261
- 262
- 263
- 264
- 265
- 266
- 267
- 268
- 269
- 270
- 271
- 272
- 273
- 274
- 275
- 276
- 277
- 278
- 279
- 280
- 281
- 282
- 283
- 284
- 285
- 286
- 287
- 288
- 289