数字资源能力一本账
This commit is contained in:
a0049873
parent
b67fa140cf
commit
97eaa4e9d2
|
|
@ -2,7 +2,7 @@
|
|||
* @Author: hisense.wuhongjian
|
||||
* @Date: 2022-08-25 14:37:49
|
||||
* @LastEditors: Light
|
||||
* @LastEditTime: 2022-10-26 10:48:52
|
||||
* @LastEditTime: 2022-10-31 09:16:10
|
||||
* @Description: 告诉大家这是什么
|
||||
*/
|
||||
var _global = {}
|
||||
|
|
@ -44,7 +44,7 @@ var CONFIGITEM = {
|
|||
dev: {
|
||||
previewUrl: 'http://localhost:8080/',
|
||||
apiURL: 'http://192.168.124.243:8888/renren-admin',
|
||||
websocketURL: 'ws://192.168.124.243:8888/renren-admin/websocket'
|
||||
websocketURL: 'ws://192.168.243.243:8888/renren-admin/websocket'
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 366 B |
Binary file not shown.
|
After Width: | Height: | Size: 637 B |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 7.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
|
|
@ -0,0 +1,947 @@
|
|||
<!--
|
||||
* @Author: Light
|
||||
* @Date: 2022-10-31 09:24:38
|
||||
* @LastEditors: Light
|
||||
* @LastEditTime: 2022-10-31 11:40:37
|
||||
* @Description: 能力溯源分析
|
||||
-->
|
||||
<template>
|
||||
<div class="capabilityTraceability">
|
||||
<div class="header">
|
||||
<div class="name">数字资源能力一本账</div>
|
||||
<div class="tab">
|
||||
<div v-for="tab in tabList" :key="tab" :class="selectTab==tab?'select':''" @click="changeTab(tab)">{{tab}}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="overview">
|
||||
<div class="top"><i></i>总体情况</div>
|
||||
<div class="main">
|
||||
<div class="item" v-for="item in allSituation" :key="item">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>{{item.name}}</div>
|
||||
<div>{{item.num}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="first">
|
||||
<div class="one">
|
||||
<div class="top"><i></i>部门情况</div>
|
||||
<div class="main">
|
||||
<div class="item" v-for="item in allSituationDept" :key="item">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>{{item.name}}</div>
|
||||
<div>{{item.num}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="top"><i></i>部门数字资源分布</div>
|
||||
<div class="main">
|
||||
<el-table
|
||||
:data="tableData1"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="deptName"
|
||||
label="部门名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="project"
|
||||
label="注册项目"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="system"
|
||||
label="注册系统"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="video"
|
||||
label="视频资源"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="layer"
|
||||
label="GIS图层"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cloudResources"
|
||||
label="云网资源"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="assembly"
|
||||
label="组件资源"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three">
|
||||
<div class="top"><i></i>部门数字资源应用分布</div>
|
||||
<div class="main">
|
||||
<div class="nav">
|
||||
<div :class="selectDistribution==nav?'select':''" v-for='nav in distributionNav' :key="nav" @click="selectDistribution=nav">{{nav}}</div>
|
||||
</div>
|
||||
<div class="ehcarts">
|
||||
<div class="name">{{selectDistribution}}</div>
|
||||
<div id="echarts1" style="width: 1450px;height:300px;"></div>
|
||||
</div>
|
||||
<div class="back" @click="goBack()">返回顶部<i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="second">
|
||||
<div class="one">
|
||||
<div class="top"><i></i>部门情况</div>
|
||||
<div class="main">
|
||||
<div class="item" v-for="item in allSituationDept2" :key="item">
|
||||
<div class="left"></div>
|
||||
<div class="right">
|
||||
<div>{{item.name}}</div>
|
||||
<div>{{item.num}}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="two">
|
||||
<div class="top"><i></i>部门数字资源分布</div>
|
||||
<div class="main">
|
||||
<el-table
|
||||
:data="tableData2"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="deptName"
|
||||
label="部门名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="project"
|
||||
label="注册项目"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="system"
|
||||
label="注册系统"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="video"
|
||||
label="视频资源"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="layer"
|
||||
label="GIS图层"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="cloudResources"
|
||||
label="云网资源"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="assembly"
|
||||
label="组件资源"
|
||||
width="210">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="three">
|
||||
<div class="top"><i></i>部门数字资源应用分布</div>
|
||||
<div class="main">
|
||||
<div class="nav">
|
||||
<div :class="selectDistribution2==nav?'select':''" v-for='nav in distributionNav2' :key="nav" @click="selectDistribution2=nav">{{nav}}</div>
|
||||
</div>
|
||||
<div class="ehcarts">
|
||||
<div class="name">{{selectDistribution2}}</div>
|
||||
<div id="echarts2" style="width: 1450px;height:300px;"></div>
|
||||
</div>
|
||||
<div class="back" @click="goBack()">返回顶部<i></i></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import * as echarts from 'echarts'
|
||||
const chartData1 = [
|
||||
{ name: '社会治安', value: 300 },
|
||||
{ name: '城市管理', value: 400 },
|
||||
{ name: '疫情防控', value: 452 },
|
||||
{ name: '危化品管理', value: 770 },
|
||||
{ name: '交通运输', value: 650 },
|
||||
{ name: '森林防火', value: 256 },
|
||||
{ name: '防汛抗旱', value: 350 },
|
||||
{ name: '文化旅游', value: 422 },
|
||||
{ name: '非煤矿山', value: 235 },
|
||||
{ name: '医疗卫生', value: 658 },
|
||||
{ name: '安全生产', value: 600 },
|
||||
{ name: '生态环境', value: 400 },
|
||||
{ name: '农业农村', value: 523 },
|
||||
{ name: '市场监督', value: 482 },
|
||||
{ name: '政务服务', value: 423 },
|
||||
{ name: '其他', value: 300 }
|
||||
]
|
||||
const chartData2 = [
|
||||
{ name: '社会治安', value: 300 },
|
||||
{ name: '城市管理', value: 400 },
|
||||
{ name: '疫情防控', value: 452 },
|
||||
{ name: '危化品管理', value: 770 },
|
||||
{ name: '交通运输', value: 650 },
|
||||
{ name: '森林防火', value: 256 },
|
||||
{ name: '防汛抗旱', value: 350 },
|
||||
{ name: '文化旅游', value: 422 },
|
||||
{ name: '非煤矿山', value: 235 },
|
||||
{ name: '医疗卫生', value: 658 },
|
||||
{ name: '安全生产', value: 600 },
|
||||
{ name: '生态环境', value: 400 },
|
||||
{ name: '农业农村', value: 523 },
|
||||
{ name: '市场监督', value: 482 },
|
||||
{ name: '政务服务', value: 423 },
|
||||
{ name: '其他', value: 300 }
|
||||
]
|
||||
const xData1 = chartData1.map(v => v.name)
|
||||
const xData2 = chartData2.map(v => v.name)
|
||||
const sData1 = chartData1.map(v => v.value)
|
||||
const sData2 = chartData2.map(v => v.value)
|
||||
export default {
|
||||
name: '',
|
||||
components: {
|
||||
|
||||
},
|
||||
props: {
|
||||
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
tabList: ['总体情况', '部门情况', '地市情况'],
|
||||
selectTab: '总体情况',
|
||||
allSituation: [{ name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
|
||||
allSituationDept: [{ name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
|
||||
allSituationDept2: [{ name: '注册地市', num: '100个' }, { name: '注册项目', num: '100个' }, { name: '注册系统', num: '100个' }, { name: '视频资源', num: '100万路' }, { name: 'GIS图层', num: '100项' }, { name: '云网资源', num: '100个' }, { name: '组件资源', num: '100项' }],
|
||||
tableData1: [{
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '财政厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '应急厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '大数据局',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '民政局',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '公安厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '教育厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '审计厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '海洋局',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}
|
||||
],
|
||||
tableData2: [{
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}, {
|
||||
deptName: '交通运输厅',
|
||||
project: '1005',
|
||||
system: '1005',
|
||||
video: '1005',
|
||||
layer: '1005',
|
||||
cloudResources: '1005',
|
||||
assembly: '1005'
|
||||
}
|
||||
],
|
||||
distributionNav: ['注册项目', '注册系统', '视频资源', 'GIS图层', '云网资源', '组件资源'],
|
||||
selectDistribution: '注册项目',
|
||||
distributionNav2: ['注册项目', '注册系统', '视频资源', 'GIS图层', '云网资源', '组件资源'],
|
||||
selectDistribution2: '注册项目',
|
||||
option1: {
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '14%',
|
||||
right: '3%',
|
||||
left: '3%',
|
||||
bottom: '14%'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: xData1,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(151,151,151,0.5)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: '#666',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
color: '#666'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(151,151,151,0.5)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(151,151,151,0.5)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(151,151,151,0.5)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: sData1,
|
||||
barWidth: '20px',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#f48238'
|
||||
}
|
||||
}
|
||||
}]
|
||||
},
|
||||
option2: {
|
||||
backgroundColor: '#fff',
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
top: '14%',
|
||||
right: '3%',
|
||||
left: '3%',
|
||||
bottom: '14%'
|
||||
},
|
||||
xAxis: [{
|
||||
type: 'category',
|
||||
data: xData2,
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(151,151,151,0.5)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLabel: {
|
||||
margin: 10,
|
||||
color: '#666',
|
||||
textStyle: {
|
||||
fontSize: 12
|
||||
}
|
||||
}
|
||||
}],
|
||||
yAxis: [{
|
||||
axisLabel: {
|
||||
formatter: '{value}',
|
||||
color: '#666'
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(151,151,151,0.5)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(151,151,151,0.5)',
|
||||
type: 'dashed'
|
||||
}
|
||||
}
|
||||
}, {
|
||||
axisLine: {
|
||||
lineStyle: {
|
||||
color: 'rgba(151,151,151,0.5)',
|
||||
type: 'dashed'
|
||||
}
|
||||
},
|
||||
axisTick: {
|
||||
show: false
|
||||
},
|
||||
splitLine: {
|
||||
show: false
|
||||
}
|
||||
}],
|
||||
series: [{
|
||||
type: 'bar',
|
||||
data: sData2,
|
||||
barWidth: '20px',
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: '#02ab46'
|
||||
}
|
||||
}
|
||||
}]
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
myEcharts () {
|
||||
var chartDom1 = document.getElementById('echarts1')
|
||||
var chartDom2 = document.getElementById('echarts2')
|
||||
var myChart1 = echarts.init(chartDom1)
|
||||
var myChart2 = echarts.init(chartDom2)
|
||||
myChart1.setOption(this.option1)
|
||||
myChart2.setOption(this.option2)
|
||||
},
|
||||
changeTab (tab) {
|
||||
this.selectTab = tab
|
||||
switch (this.selectTab) {
|
||||
case '总体情况':
|
||||
window.scrollTo(0, 0)
|
||||
break
|
||||
case '部门情况':
|
||||
window.scrollTo(0, 330)
|
||||
break
|
||||
case '地市情况':
|
||||
window.scrollTo(0, 1640)
|
||||
break
|
||||
}
|
||||
},
|
||||
goBack () {
|
||||
window.scrollTo(0, 0)
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
this.myEcharts()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='scss' scoped>
|
||||
.capabilityTraceability {
|
||||
.top {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 20px;
|
||||
i {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
background: url("~@/assets/img/capabilityTraceability/gang.png") no-repeat;
|
||||
background-size: 100%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
}
|
||||
.header {
|
||||
.name {
|
||||
font-size: 32px;
|
||||
font-weight: 600;
|
||||
text-align: center;
|
||||
}
|
||||
.tab {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
div {
|
||||
cursor: pointer;
|
||||
padding: 3px 14px;
|
||||
font-size: 16px;
|
||||
border-radius: 20px;
|
||||
}
|
||||
.select {
|
||||
background: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
.overview {
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
padding: 14px 16px;
|
||||
.main {
|
||||
margin: 34px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.item {
|
||||
margin: 10px 0;
|
||||
padding: 0 45px 0 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-right: 1px solid #ccc;
|
||||
.left {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
div {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
div:nth-of-type(2) {
|
||||
margin-top: 10px;
|
||||
font-size: 18px;
|
||||
color: #027cf6;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:last-child {
|
||||
border: none;
|
||||
}
|
||||
.item:nth-of-type(1) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/one1.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(2) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/one2.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(3) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/one3.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(4) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/one4.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(5) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/one5.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(6) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/one6.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.first {
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
padding: 14px 16px;
|
||||
.one {
|
||||
margin-bottom: 42px;
|
||||
.main {
|
||||
margin: 34px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.item {
|
||||
margin: 10px 0;
|
||||
padding: 0 45px 0 40px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-right: 1px solid #ccc;
|
||||
.left {
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
div {
|
||||
text-align: center;
|
||||
font-size: 20px;
|
||||
}
|
||||
div:nth-of-type(2) {
|
||||
margin-top: 10px;
|
||||
font-size: 18px;
|
||||
color: #f9c599;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:last-child {
|
||||
border: none;
|
||||
}
|
||||
.item:nth-of-type(1) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/two1.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(2) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/two2.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(3) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/two3.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(4) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/two4.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(5) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/two5.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(6) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/two6.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.two {
|
||||
margin-bottom: 42px;
|
||||
.main {
|
||||
margin-top: 30px;
|
||||
padding: 0 50px;
|
||||
}
|
||||
}
|
||||
.three {
|
||||
margin-bottom: 20px;
|
||||
.main {
|
||||
margin-top: 30px;
|
||||
padding: 0 50px;
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
div {
|
||||
cursor: pointer;
|
||||
padding-bottom: 8px;
|
||||
margin-right: 60px;
|
||||
border-bottom: 3px solid #fff;
|
||||
}
|
||||
.select {
|
||||
border-bottom: 3px solid #f48238;
|
||||
}
|
||||
}
|
||||
.ehcarts {
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 5px 5px 5px #ccc;
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
.name {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.back {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
padding-left: 1400px;
|
||||
text-align: end;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 8px;
|
||||
background: url("~@/assets/img/capabilityTraceability/back.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.second {
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
padding: 14px 16px;
|
||||
.one {
|
||||
margin-bottom: 42px;
|
||||
.main {
|
||||
margin: 34px 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
.item {
|
||||
margin: 10px 0;
|
||||
padding: 0 35px 0 30px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
border-right: 1px solid #ccc;
|
||||
.left {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
}
|
||||
.right {
|
||||
margin-left: 10px;
|
||||
div {
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
}
|
||||
div:nth-of-type(2) {
|
||||
margin-top: 10px;
|
||||
font-size: 16px;
|
||||
color: #02ab46;
|
||||
}
|
||||
}
|
||||
}
|
||||
.item:last-child {
|
||||
border: none;
|
||||
}
|
||||
.item:nth-of-type(1) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/three1.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(2) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/three2.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(3) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/three3.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(4) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/three4.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(5) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/three5.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(6) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/three6.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
.item:nth-of-type(7) > .left {
|
||||
background: url("~@/assets/img/capabilityTraceability/three7.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
background-position: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
.two {
|
||||
margin-bottom: 42px;
|
||||
.main {
|
||||
margin-top: 30px;
|
||||
padding: 0 50px;
|
||||
}
|
||||
}
|
||||
.three {
|
||||
margin-bottom: 20px;
|
||||
.main {
|
||||
margin-top: 30px;
|
||||
padding: 0 50px;
|
||||
.nav {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
div {
|
||||
cursor: pointer;
|
||||
padding-bottom: 8px;
|
||||
margin-right: 60px;
|
||||
border-bottom: 3px solid #fff;
|
||||
}
|
||||
.select {
|
||||
border-bottom: 3px solid #02ab46;
|
||||
}
|
||||
}
|
||||
.ehcarts {
|
||||
border: 1px solid #ccc;
|
||||
box-shadow: 5px 5px 5px #ccc;
|
||||
margin: 20px 0;
|
||||
padding: 10px;
|
||||
.name {
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
.back {
|
||||
cursor: pointer;
|
||||
font-weight: 600;
|
||||
padding-left: 1400px;
|
||||
text-align: end;
|
||||
i {
|
||||
display: inline-block;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
margin-left: 8px;
|
||||
background: url("~@/assets/img/capabilityTraceability/back.png")
|
||||
no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue