|
|
|
@ -1,6 +1,19 @@ |
|
|
|
<template> |
|
|
|
<div> |
|
|
|
<div class="card h292"> |
|
|
|
<div class="card h292 m-top12"> |
|
|
|
<screen-title-red> |
|
|
|
<div slot="left" class="screen-title-left">移风党建</div> |
|
|
|
</screen-title-red> |
|
|
|
<div class="card-item-dyfx"> |
|
|
|
<div class="card-item-dyfx-item" @click="handelClickOrg('hsyf_attractions',4)"> |
|
|
|
<div>干部队伍建设</div> |
|
|
|
</div> |
|
|
|
<div class="card-item-dyfx-item" @click="handelClickOrg('hsyf_attractions',5)"><div>战斗堡垒筑牢</div></div> |
|
|
|
<div class="card-item-dyfx-item" @click="handelClickOrg('hsyf_attractions',6)"><div>强村共富先行</div></div> |
|
|
|
<div class="card-item-dyfx-item" @click="handelClickOrg('hsyf_attractions',7)"><div>党建品牌打造</div></div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card h292" style="margin-top: 8px"> |
|
|
|
<screen-title-red> |
|
|
|
<div slot="left" class="screen-title-left">组织建设</div> |
|
|
|
<div |
|
|
|
@ -53,7 +66,9 @@ |
|
|
|
<img :src="require('@/assets/images/icon/dyzxhRed.png')" /> |
|
|
|
</div> |
|
|
|
<div class="bot-item-val"> |
|
|
|
<div class="bot-item-val-num">{{ zzjsValues[5].value||692 }}</div> |
|
|
|
<div class="bot-item-val-num"> |
|
|
|
{{ zzjsValues[5].value || 692 }} |
|
|
|
</div> |
|
|
|
<div class="bot-item-val-title">党员中心户</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
@ -89,7 +104,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="card h292 m-top12"> |
|
|
|
<!-- <div class="card h292 m-top12"> |
|
|
|
<screen-title-red> |
|
|
|
<div slot="left" class="screen-title-left">移风党建</div> |
|
|
|
</screen-title-red> |
|
|
|
@ -152,7 +167,7 @@ |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</div> --> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
@ -213,104 +228,6 @@ export default { |
|
|
|
num: 368 |
|
|
|
} |
|
|
|
], |
|
|
|
|
|
|
|
peiOption: null, |
|
|
|
optionData: [ |
|
|
|
{ |
|
|
|
name: '20-40岁', // 名称 |
|
|
|
value: 19, // 值 |
|
|
|
itemStyle: { |
|
|
|
// 颜色 紫色 |
|
|
|
color: 'rgba(227,235,45,1)' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '40-60岁', // 蓝色 |
|
|
|
value: 13, |
|
|
|
itemStyle: { |
|
|
|
color: 'rgba(19,141,255,1)' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '60-80岁', // 绿色 |
|
|
|
value: 15, |
|
|
|
itemStyle: { |
|
|
|
color: 'rgba(253, 112, 0, 1)' |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '80岁以上', // 橙色 |
|
|
|
value: 16, |
|
|
|
itemStyle: { |
|
|
|
color: 'rgba(21, 214, 131, 1)' |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
barOption: null, |
|
|
|
optionDataB: [ |
|
|
|
{ |
|
|
|
name: '移风村', |
|
|
|
value: 1242 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '上泊新村', |
|
|
|
value: 986 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '河流新村', |
|
|
|
value: 744 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '滨河村', |
|
|
|
value: 653 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '大坝新村', |
|
|
|
value: 498 |
|
|
|
} |
|
|
|
], |
|
|
|
tagworpList: [ |
|
|
|
{ |
|
|
|
label: '上泊新村', |
|
|
|
id: '1697533359860244481' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '滨河村', |
|
|
|
id: '1704030137514287105' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '湍湾新村', |
|
|
|
id: '1704036500462198786' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '七级村', |
|
|
|
id: '1704313950756757506' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '沽河村', |
|
|
|
id: '1704324481563582466' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '太祉庄村', |
|
|
|
id: '1704327114084933633' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '河流新村', |
|
|
|
id: '1704331366425518081' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '大坝新村', |
|
|
|
id: '1704396342955696130' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '双塔村', |
|
|
|
id: '1704331366425518081' |
|
|
|
}, |
|
|
|
{ |
|
|
|
label: '移风村', |
|
|
|
id: '1704331366425518081' |
|
|
|
} |
|
|
|
], |
|
|
|
tagList: [ |
|
|
|
{ |
|
|
|
name: '上泊新村委员会', |
|
|
|
@ -398,22 +315,9 @@ export default { |
|
|
|
], |
|
|
|
// yfgfTotal: 0, |
|
|
|
// yfzdTotal: 0, |
|
|
|
jzfwList: [ |
|
|
|
{ name: '民生保障（“移”次办）' }, |
|
|
|
{ name: '社会治理' }, |
|
|
|
{ name: '移风店镇居家养老服务中心' } |
|
|
|
], |
|
|
|
yfgfList: [ |
|
|
|
{ name: '青岛益成河农业科技有限公司' }, |
|
|
|
{ name: '青岛滨源农产品有限公司' } |
|
|
|
// { name: "青岛上泊建晟建设发展有限公司" }, |
|
|
|
// { name: "青岛圆可方诚工贸有限公司" }, |
|
|
|
], |
|
|
|
yfzdList: [ |
|
|
|
{ name: '大欧鸟笼乡村记忆馆' }, |
|
|
|
{ name: '七彩田园' }, |
|
|
|
{ name: '中共即墨县委纪念馆' } |
|
|
|
], |
|
|
|
jzfwList: [], |
|
|
|
yfgfList: [], |
|
|
|
yfzdList: [], |
|
|
|
zzjsValues: [ |
|
|
|
{ |
|
|
|
partyOrgType: '3', |
|
|
|
@ -453,7 +357,14 @@ export default { |
|
|
|
this.$set( |
|
|
|
i, |
|
|
|
'c', |
|
|
|
this.forArrayValue(['rgba(255,255,255,0.2)', 'rgba(255,255,255,0.4)', 'rgba(255,255,255,0.6)'], index) |
|
|
|
this.forArrayValue( |
|
|
|
[ |
|
|
|
'rgba(255,255,255,0.2)', |
|
|
|
'rgba(255,255,255,0.4)', |
|
|
|
'rgba(255,255,255,0.6)' |
|
|
|
], |
|
|
|
index |
|
|
|
) |
|
|
|
) |
|
|
|
}) |
|
|
|
this.getData() |
|
|
|
@ -462,8 +373,6 @@ export default { |
|
|
|
this.$nextTick(function () { |
|
|
|
this.initTag() |
|
|
|
this.animate() |
|
|
|
this.initBarAge() |
|
|
|
this.initBar() |
|
|
|
}) |
|
|
|
}, |
|
|
|
beforeDestroy () {}, |
|
|
|
@ -472,6 +381,7 @@ export default { |
|
|
|
...mapActions({ |
|
|
|
// set_garden: 'SET_GARDEN', |
|
|
|
set_organization: 'SET_ORGANIZATION', |
|
|
|
set_hsyf_djType: 'SET_HSYF_DJTYPE', |
|
|
|
set_hsyf_company: 'SET_HSYF_COMPANY', |
|
|
|
set_zhen_committee: 'SET_ZHEN_COMMITTEE', |
|
|
|
set_xincun_committee: 'SET_XINCUN_COMMITTEE', |
|
|
|
@ -499,7 +409,7 @@ export default { |
|
|
|
forArrayValue (array, sort) { |
|
|
|
return array[sort % array.length] |
|
|
|
}, |
|
|
|
handelClickOrg (type) { |
|
|
|
handelClickOrg (type, type1) { |
|
|
|
if (type === 'organization') { |
|
|
|
this.set_organization(true) |
|
|
|
} |
|
|
|
@ -508,6 +418,7 @@ export default { |
|
|
|
} |
|
|
|
if (type === 'hsyf_attractions') { |
|
|
|
this.set_hsyf_attractions(true) |
|
|
|
this.set_hsyf_djType(type1) |
|
|
|
} |
|
|
|
if (type === 'hsyf_jzfw') { |
|
|
|
this.set_hsyf_jzfw(true) |
|
|
|
@ -534,17 +445,11 @@ export default { |
|
|
|
|
|
|
|
initTag () { |
|
|
|
const tags = document.querySelectorAll('.tag') |
|
|
|
console.log('tags::', tags) |
|
|
|
const wrap = document.querySelector('.card-item-tag') |
|
|
|
const len = tags.length |
|
|
|
// let valueList = Array.from(new Set(this.tagList.map(i => i.value))); |
|
|
|
// let min = Math.min(...valueList); |
|
|
|
CX = wrap.offsetWidth / 2 |
|
|
|
CY = wrap.offsetHeight / 2 |
|
|
|
tags.forEach((i, index) => { |
|
|
|
// let fontScale = this.tagList[index].value / min * 16; |
|
|
|
// i.style.fontSize = fontScale > 30 ? '30px' : fontScale + 'px'; |
|
|
|
// i.style.color = colors[parseInt(Math.random() * 10)]; |
|
|
|
const k = -1 + (2 * (index + 1) - 1) / len |
|
|
|
const a = Math.acos(k) |
|
|
|
const b = a * Math.sqrt(len * Math.PI) |
|
|
|
@ -584,272 +489,6 @@ export default { |
|
|
|
i.move() |
|
|
|
}) |
|
|
|
requestAnimationFrame(this.animate) |
|
|
|
}, |
|
|
|
initBarAge () { |
|
|
|
// eslint-disable-next-line no-undef |
|
|
|
const myChart = echarts.init(document.getElementById('charts')) |
|
|
|
const option = { |
|
|
|
grid: { |
|
|
|
left: '2%', |
|
|
|
right: '2%', |
|
|
|
top: '15%', |
|
|
|
bottom: '2%', |
|
|
|
containLabel: true |
|
|
|
}, |
|
|
|
tooltip: { |
|
|
|
trigger: 'item', |
|
|
|
formatter: function (params, ticket, callback) { |
|
|
|
var res = params.name + ' : ' + params.value |
|
|
|
return res |
|
|
|
} |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
type: 'category', |
|
|
|
axisLine: { |
|
|
|
lineStyle: { |
|
|
|
color: '#174489', |
|
|
|
width: '3' |
|
|
|
} |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
show: true, |
|
|
|
color: '#BDCEEA', |
|
|
|
fontSize: '10', |
|
|
|
rotate: 45 // 旋转角度，单位为度 |
|
|
|
}, |
|
|
|
data: ['20-40岁', '40-60岁', '60-80岁', '80岁以上'] |
|
|
|
}, |
|
|
|
|
|
|
|
yAxis: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'leftA', |
|
|
|
type: 'bar', |
|
|
|
barWidth: 10, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 1, |
|
|
|
colorStops: [ |
|
|
|
{ offset: 1, color: 'rgb(83, 180, 255,0)' }, // 底部颜色 |
|
|
|
{ offset: 0, color: '#5098fb' } // 顶部颜色 |
|
|
|
] |
|
|
|
}, |
|
|
|
barBorderRadius: [0, 0, 0, 0] |
|
|
|
} |
|
|
|
}, |
|
|
|
data: [220, 182, 191, 234] |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'rightA', |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
type: 'bar', |
|
|
|
barWidth: 10, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: { |
|
|
|
type: 'linear', |
|
|
|
x: 0, |
|
|
|
y: 0, |
|
|
|
x2: 0, |
|
|
|
y2: 1, |
|
|
|
colorStops: [ |
|
|
|
{ offset: 1, color: 'rgb(83, 180, 255,0)' }, // 底部颜色 |
|
|
|
{ offset: 0, color: '#207dfb' } // 顶部颜色 |
|
|
|
] |
|
|
|
}, |
|
|
|
barBorderRadius: [0, 0, 0, 0] |
|
|
|
} |
|
|
|
}, |
|
|
|
data: [220, 182, 191, 234], |
|
|
|
barGap: 0 |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: 'topA', |
|
|
|
tooltip: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
type: 'pictorialBar', |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: '#53b4ff', |
|
|
|
// borderWidth: 1, |
|
|
|
// borderColor: '#00183F', |
|
|
|
opacity: '1', |
|
|
|
shadowColor: 'rgb(0,0,0,0.1)', |
|
|
|
shadowOffsetX: '0.5', |
|
|
|
shadowOffsetY: '0.5' |
|
|
|
} |
|
|
|
}, |
|
|
|
label: { |
|
|
|
show: false, |
|
|
|
color: '#04F9FD', |
|
|
|
offset: [0, 0], |
|
|
|
position: 'top', |
|
|
|
fontSize: '16', |
|
|
|
fontWeight: 'normal' |
|
|
|
}, |
|
|
|
symbol: 'diamond', |
|
|
|
symbolRotate: 0, |
|
|
|
symbolSize: ['25', '12'], |
|
|
|
symbolOffset: ['0', '-8'], |
|
|
|
symbolPosition: 'end', |
|
|
|
data: [220, 182, 191, 234], |
|
|
|
z: 3 |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
myChart.setOption(option) |
|
|
|
}, |
|
|
|
initBar () { |
|
|
|
// eslint-disable-next-line no-undef |
|
|
|
const myChart = echarts.init(document.getElementById('chartsBar')) |
|
|
|
this.barOption = this.getBar(this.optionDataB) |
|
|
|
myChart.setOption(this.barOption) |
|
|
|
}, |
|
|
|
getBar (data) { |
|
|
|
const symbolData = data.map((item) => ({ |
|
|
|
symbolPosition: 'end', |
|
|
|
value: item.value |
|
|
|
})) |
|
|
|
const arrByKey = data.map((item) => item.value) |
|
|
|
const option = { |
|
|
|
// backgroundColor: '#000000', |
|
|
|
grid: { |
|
|
|
top: 10, |
|
|
|
bottom: -0.5, |
|
|
|
// right: 0, |
|
|
|
left: 0 |
|
|
|
}, |
|
|
|
xAxis: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
yAxis: [ |
|
|
|
{ |
|
|
|
triggerEvent: true, |
|
|
|
show: true, |
|
|
|
inverse: true, |
|
|
|
data: symbolData, |
|
|
|
axisLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
} |
|
|
|
}, |
|
|
|
{ |
|
|
|
triggerEvent: true, |
|
|
|
show: true, |
|
|
|
inverse: true, |
|
|
|
data: arrByKey, |
|
|
|
axisLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
splitLine: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisTick: { |
|
|
|
show: false |
|
|
|
}, |
|
|
|
axisLabel: { |
|
|
|
interval: 0, |
|
|
|
shadowOffsetX: '-50px', |
|
|
|
color: ['#DBE9FF'], |
|
|
|
align: 'right', |
|
|
|
verticalAlign: 'bottom', |
|
|
|
// lineHeight: 40, |
|
|
|
fontSize: 14, |
|
|
|
formatter: function (value, index) { |
|
|
|
// return (data[index].value / data[index].sum) * 100 |
|
|
|
return value |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
], |
|
|
|
series: [ |
|
|
|
{ |
|
|
|
name: 'XXX', |
|
|
|
type: 'pictorialBar', |
|
|
|
symbol: |
|
|
|
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAs1JREFUOE+9lE1vW0UUhp8zc+/1zY0dV6RuZJSFoWWLWoVNEQh3hRTBBsGCX8COv5Bkyc9gw6IVSyR2zQLRbgKCtpFABiRkKQK11MT2te/HzCE3cUxaHJVKiJFmMdKZR+/5eoX/+Mjz8lR1/kdE9On//wpYQXZA3trFdLsniN2j2wW/c/TYFvGn4GcCt1XNO3vY1Q3sEtjBQ4xTdFLim21cH1wX3Knac4GVqltgrvUI3AWieo0oNwTTCcYkiPUUbsrUXiT/FsoPjtRW0IXACrYLtgMBA+IsIjEFsZZEccB6KG4tK/1PQRD+aFeYtiEXcCwCVrA9CF6E0A9ZOhxRD2ss24C6VX+tZvRdS5Wy+8xF0e00ZTRpkb0G5RPAWfdkf5+g1SI69CReqGtEI/SshYF/PTb+fYHLpXIn1+ATl/FdCqPJr2QbG5TzlM/C7CVqTlmu1airpxHCS5G4t0OrmwKrpeebTOXTrLRfNWo8/H1M+sca2Q2Rsur0cQ1nQPv9b9SSZRJ1NAQuBOpejY2+FwpvVnG553YmwS3vuK/KILWMGo+ZdDrkMhudU6Dp9QhHF1mqe+o4WlHo34iN/9AYrgKPCidfZGq/zOGXWBjmlmE6Ji3WyDc4SXeu8KaqXe8TNVdYijNWg7DYTKx8JMLLzmsv9/L51AdfO+HAFIwaCUMZk/ZPYNUMPjnYqmr7EKUHx7V7JQ6Kj63IDQcPslJvFhreUxgUGWPxjJqGyQ9t8u4OXrb/hv1DYbtOzZXF5UYkm6WynKvcdWp7UpKVhjSyjBkw7XQomA3ywl1W1eMaNq8QPn5EM7K0vOIy4dB5vC/IkiFTrpCd3YpFxnLclGpft8Dc6RO+EBOEFjMdY1dWYFpS/plR0qZ4ul7nAuduAuYSmATMQR+5vo7fA/8z+H3Qs65ynu3Nd/nU5yqb2ppFV9a0BbrI954JfF6j/d+AfwETJFsk0SzcoQAAAABJRU5ErkJggg==', |
|
|
|
symbolSize: [10, 2, 10, 2], |
|
|
|
symbolRotate: 45, |
|
|
|
symbolOffset: [5, 0], |
|
|
|
z: 12, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
color: '#cde0ef' |
|
|
|
// image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAs1JREFUOE+9lE1vW0UUhp8zc+/1zY0dV6RuZJSFoWWLWoVNEQh3hRTBBsGCX8COv5Bkyc9gw6IVSyR2zQLRbgKCtpFABiRkKQK11MT2te/HzCE3cUxaHJVKiJFmMdKZR+/5eoX/+Mjz8lR1/kdE9On//wpYQXZA3trFdLsniN2j2wW/c/TYFvGn4GcCt1XNO3vY1Q3sEtjBQ4xTdFLim21cH1wX3Knac4GVqltgrvUI3AWieo0oNwTTCcYkiPUUbsrUXiT/FsoPjtRW0IXACrYLtgMBA+IsIjEFsZZEccB6KG4tK/1PQRD+aFeYtiEXcCwCVrA9CF6E0A9ZOhxRD2ss24C6VX+tZvRdS5Wy+8xF0e00ZTRpkb0G5RPAWfdkf5+g1SI69CReqGtEI/SshYF/PTb+fYHLpXIn1+ATl/FdCqPJr2QbG5TzlM/C7CVqTlmu1airpxHCS5G4t0OrmwKrpeebTOXTrLRfNWo8/H1M+sca2Q2Rsur0cQ1nQPv9b9SSZRJ1NAQuBOpejY2+FwpvVnG553YmwS3vuK/KILWMGo+ZdDrkMhudU6Dp9QhHF1mqe+o4WlHo34iN/9AYrgKPCidfZGq/zOGXWBjmlmE6Ji3WyDc4SXeu8KaqXe8TNVdYijNWg7DYTKx8JMLLzmsv9/L51AdfO+HAFIwaCUMZk/ZPYNUMPjnYqmr7EKUHx7V7JQ6Kj63IDQcPslJvFhreUxgUGWPxjJqGyQ9t8u4OXrb/hv1DYbtOzZXF5UYkm6WynKvcdWp7UpKVhjSyjBkw7XQomA3ywl1W1eMaNq8QPn5EM7K0vOIy4dB5vC/IkiFTrpCd3YpFxnLclGpft8Dc6RO+EBOEFjMdY1dWYFpS/plR0qZ4ul7nAuduAuYSmATMQR+5vo7fA/8z+H3Qs65ynu3Nd/nU5yqb2ppFV9a0BbrI954JfF6j/d+AfwETJFsk0SzcoQAAAABJRU5ErkJggg==', |
|
|
|
} |
|
|
|
}, |
|
|
|
data: symbolData |
|
|
|
}, |
|
|
|
{ |
|
|
|
name: '条', |
|
|
|
type: 'bar', |
|
|
|
showBackground: true, |
|
|
|
barBorderRadius: 30, |
|
|
|
yAxisIndex: 0, |
|
|
|
data: data, |
|
|
|
barWidth: 5, |
|
|
|
// align: left, |
|
|
|
itemStyle: { |
|
|
|
normal: { |
|
|
|
// eslint-disable-next-line no-undef |
|
|
|
color: new echarts.graphic.LinearGradient( |
|
|
|
0, |
|
|
|
0, |
|
|
|
1, |
|
|
|
0, |
|
|
|
[ |
|
|
|
{ |
|
|
|
offset: 0, |
|
|
|
color: '#1f4889' |
|
|
|
}, |
|
|
|
|
|
|
|
{ |
|
|
|
offset: 1, |
|
|
|
color: '#2caffd' |
|
|
|
} |
|
|
|
], |
|
|
|
false |
|
|
|
) |
|
|
|
// barBorderRadius: 10 |
|
|
|
} |
|
|
|
// color: '#A71A2B', |
|
|
|
// barBorderRadius: 4, |
|
|
|
}, |
|
|
|
label: { |
|
|
|
normal: { |
|
|
|
color: '#DBE9FF', |
|
|
|
show: true, |
|
|
|
position: [0, '-15px'], |
|
|
|
textStyle: { |
|
|
|
fontSize: 14 |
|
|
|
}, |
|
|
|
formatter: function (a, b) { |
|
|
|
return a.name |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
] |
|
|
|
} |
|
|
|
return option |
|
|
|
} |
|
|
|
}, |
|
|
|
components: {}, |
|
|
|
@ -1157,128 +796,90 @@ export default { |
|
|
|
padding: 12px 20px; |
|
|
|
display: flex; |
|
|
|
flex-wrap: wrap; |
|
|
|
grid-gap: 10px 16px; |
|
|
|
&-left, |
|
|
|
&-right, |
|
|
|
&-bottom { |
|
|
|
width: 200px; |
|
|
|
// background: url("~@/assets/images/home/yfgfLeftBg.png") no-repeat; |
|
|
|
// background-size: 100% 14px; |
|
|
|
// background-position: center 58px; |
|
|
|
.top-title { |
|
|
|
width: 200px; |
|
|
|
display: flex; |
|
|
|
img { |
|
|
|
width: 18px; |
|
|
|
height: 18px; |
|
|
|
margin-top: 2px; |
|
|
|
} |
|
|
|
.title-txt { |
|
|
|
padding-left: 8px; |
|
|
|
height: 16px; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 16px; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
// .content { |
|
|
|
// display: flex; |
|
|
|
// justify-content: space-between; |
|
|
|
// padding: 15px 20px; |
|
|
|
// &-left { |
|
|
|
// display: flex; |
|
|
|
// &-icon { |
|
|
|
// width: 26px; |
|
|
|
// img { |
|
|
|
// width: 26px; |
|
|
|
// height: 26px; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// &-name { |
|
|
|
// padding-left: 8px; |
|
|
|
// width: 90px; |
|
|
|
// height: 26px; |
|
|
|
// font-family: PingFang SC; |
|
|
|
// font-weight: bold; |
|
|
|
// font-size: 14px; |
|
|
|
// color: #ffffff; |
|
|
|
// line-height: 26px; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// &-right { |
|
|
|
// font-weight: 500; |
|
|
|
// &-num { |
|
|
|
// height: 13px; |
|
|
|
// font-family: PangMenZhengDao; |
|
|
|
// font-weight: 400; |
|
|
|
// font-size: 20px; |
|
|
|
// color: #ffffff; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
.bottom-list { |
|
|
|
padding-top: 6px; |
|
|
|
height: 90px; |
|
|
|
&-item { |
|
|
|
margin-top: 3px; |
|
|
|
&-span { |
|
|
|
padding-left: 10px; |
|
|
|
padding-right: 12px; |
|
|
|
} |
|
|
|
height: 30px; |
|
|
|
font-family: PingFang SC; |
|
|
|
font-weight: 500; |
|
|
|
font-size: 14px; |
|
|
|
color: #fbe9c5; |
|
|
|
line-height: 29px; |
|
|
|
border-bottom: 1px dashed #bb7053; |
|
|
|
} |
|
|
|
&-item:hover { |
|
|
|
cursor: pointer; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
grid-gap: 10px 8px; |
|
|
|
|
|
|
|
&-item { |
|
|
|
width: 206px; |
|
|
|
height: 110px; |
|
|
|
text-align: center; |
|
|
|
font-family: "zaozigongfang"; |
|
|
|
font-weight: 400; |
|
|
|
font-size: 16px; |
|
|
|
color: #ffffff; |
|
|
|
line-height: 110px; |
|
|
|
background: url("~@/assets/images/hsyf/yfdj/yfdj1.png") no-repeat; |
|
|
|
background-size: 100% 100%; |
|
|
|
|
|
|
|
div { |
|
|
|
background: rgba(0, 0, 0, 0.3); |
|
|
|
} |
|
|
|
} |
|
|
|
&-right { |
|
|
|
width: 201px; |
|
|
|
// background: url("~@/assets/images/home/yfgfRightBg.png") no-repeat; |
|
|
|
// background-size: 100% 14px; |
|
|
|
// background-position: center 58px; |
|
|
|
.top-title { |
|
|
|
width: 201px; |
|
|
|
} |
|
|
|
// .content { |
|
|
|
// display: flex; |
|
|
|
// justify-content: space-between; |
|
|
|
// padding: 15px 20px; |
|
|
|
// &-left { |
|
|
|
// display: flex; |
|
|
|
// &-name { |
|
|
|
// width: 60px; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .bottom-list { |
|
|
|
// &-item { |
|
|
|
// width: 190px; |
|
|
|
// height: 29px; |
|
|
|
// background: rgba(187, 112, 83, 0.2); |
|
|
|
// border-radius: 2px; |
|
|
|
// border: 1px solid #bb7053; |
|
|
|
// } |
|
|
|
// &-item:hover { |
|
|
|
// cursor: pointer; |
|
|
|
// color: #ffffff; |
|
|
|
// background: url("~@/assets/images/home/gmdListBg.png") no-repeat; |
|
|
|
// background-size: 100% 100%; |
|
|
|
// } |
|
|
|
// } |
|
|
|
&-item:nth-child(2) { |
|
|
|
background: url("~@/assets/images/hsyf/yfdj/yfdj2.png") no-repeat; |
|
|
|
} |
|
|
|
&-item:nth-child(3) { |
|
|
|
background: url("~@/assets/images/hsyf/yfdj/yfdj3.png") no-repeat; |
|
|
|
} |
|
|
|
&-bottom { |
|
|
|
width: 428px; |
|
|
|
margin-top: 8px; |
|
|
|
&-item:nth-child(4) { |
|
|
|
background: url("~@/assets/images/hsyf/yfdj/yfdj4.png") no-repeat; |
|
|
|
} |
|
|
|
// ::after { |
|
|
|
// background: #000000; |
|
|
|
// } |
|
|
|
// &-left, |
|
|
|
// &-right, |
|
|
|
// &-bottom { |
|
|
|
// width: 200px; |
|
|
|
// .top-title { |
|
|
|
// width: 200px; |
|
|
|
// display: flex; |
|
|
|
// img { |
|
|
|
// width: 18px; |
|
|
|
// height: 18px; |
|
|
|
// margin-top: 2px; |
|
|
|
// } |
|
|
|
// .title-txt { |
|
|
|
// padding-left: 8px; |
|
|
|
// height: 16px; |
|
|
|
// font-family: PingFang SC; |
|
|
|
// font-weight: 500; |
|
|
|
// font-size: 16px; |
|
|
|
// color: #ffffff; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// .bottom-list { |
|
|
|
// padding-top: 6px; |
|
|
|
// height: 90px; |
|
|
|
// &-item { |
|
|
|
// margin-top: 3px; |
|
|
|
// &-span { |
|
|
|
// padding-left: 10px; |
|
|
|
// padding-right: 12px; |
|
|
|
// } |
|
|
|
// height: 30px; |
|
|
|
// font-family: PingFang SC; |
|
|
|
// font-weight: 500; |
|
|
|
// font-size: 14px; |
|
|
|
// color: #fbe9c5; |
|
|
|
// line-height: 29px; |
|
|
|
// border-bottom: 1px dashed #bb7053; |
|
|
|
// } |
|
|
|
// &-item:hover { |
|
|
|
// cursor: pointer; |
|
|
|
// color: #ffffff; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// } |
|
|
|
// &-right { |
|
|
|
// width: 201px; |
|
|
|
// .top-title { |
|
|
|
// width: 201px; |
|
|
|
// } |
|
|
|
// } |
|
|
|
// &-bottom { |
|
|
|
// width: 428px; |
|
|
|
// margin-top: 8px; |
|
|
|
// } |
|
|
|
} |
|
|
|
} |
|
|
|
</style> |
|
|
|
|
juwei001
2 years ago
