style: 全局代码格式化
Former-commit-id: bb50c8419b8fcdeb48c93fce9f399d901e8f5a52
This commit is contained in:
郝先瑞
@@ -1,183 +1,174 @@
|
||||
<!-- 线 + 柱混合图 -->
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
:class="className"
|
||||
:style="{height, width}"
|
||||
/>
|
||||
<div :id="id" :class="className" :style="{ height, width }" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
|
||||
import {init, EChartsOption} from 'echarts'
|
||||
import {
|
||||
nextTick,
|
||||
onActivated,
|
||||
onBeforeUnmount,
|
||||
onDeactivated,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import { init, EChartsOption } from 'echarts';
|
||||
import * as echarts from 'echarts';
|
||||
import resize from '@/utils/resize'
|
||||
import resize from '@/utils/resize';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: 'barChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
}
|
||||
})
|
||||
id: {
|
||||
type: String,
|
||||
default: 'barChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
mounted,
|
||||
chart,
|
||||
beforeDestroy,
|
||||
activated,
|
||||
deactivated
|
||||
} = resize()
|
||||
const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
|
||||
|
||||
function initChart() {
|
||||
const barChart = init(document.getElementById(props.id) as HTMLDivElement)
|
||||
const barChart = init(document.getElementById(props.id) as HTMLDivElement);
|
||||
|
||||
barChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '业绩总览',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
color: '#337ecc'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
data: ['收入', '毛利润', '收入增长率', '利润增长率']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 10000,
|
||||
interval: 2000,
|
||||
axisLabel: {
|
||||
formatter: '{value} '
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
data: [
|
||||
8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800,
|
||||
],
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '毛利润',
|
||||
type: 'bar',
|
||||
data: [
|
||||
6700, 6800, 6300, 5213, 4500, 4200, 4200, 3800
|
||||
],
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#25d73c' },
|
||||
{ offset: 0.5, color: '#1bc23d' },
|
||||
{ offset: 1, color: '#179e61' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '收入增长率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [65, 67, 65, 53, 47, 45, 43, 42, 41],
|
||||
itemStyle: {
|
||||
color: '#67C23A'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '利润增长率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [80, 81, 78, 67, 65, 60, 56,51, 45 ],
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
}
|
||||
]
|
||||
} as EChartsOption)
|
||||
chart.value = barChart
|
||||
barChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '业绩总览',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
color: '#337ecc'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
type: 'cross',
|
||||
crossStyle: {
|
||||
color: '#999'
|
||||
}
|
||||
}
|
||||
},
|
||||
legend: {
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
data: ['收入', '毛利润', '收入增长率', '利润增长率']
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['上海', '北京', '浙江', '广东', '深圳', '四川', '湖北', '安徽'],
|
||||
axisPointer: {
|
||||
type: 'shadow'
|
||||
}
|
||||
}
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 10000,
|
||||
interval: 2000,
|
||||
axisLabel: {
|
||||
formatter: '{value} '
|
||||
}
|
||||
},
|
||||
{
|
||||
type: 'value',
|
||||
min: 0,
|
||||
max: 100,
|
||||
interval: 20,
|
||||
axisLabel: {
|
||||
formatter: '{value}%'
|
||||
}
|
||||
}
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '收入',
|
||||
type: 'bar',
|
||||
data: [8000, 8200, 7000, 6200, 6500, 5500, 4500, 4200, 3800],
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#83bff6' },
|
||||
{ offset: 0.5, color: '#188df0' },
|
||||
{ offset: 1, color: '#188df0' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '毛利润',
|
||||
type: 'bar',
|
||||
data: [6700, 6800, 6300, 5213, 4500, 4200, 4200, 3800],
|
||||
barWidth: 20,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#25d73c' },
|
||||
{ offset: 0.5, color: '#1bc23d' },
|
||||
{ offset: 1, color: '#179e61' }
|
||||
])
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '收入增长率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [65, 67, 65, 53, 47, 45, 43, 42, 41],
|
||||
itemStyle: {
|
||||
color: '#67C23A'
|
||||
}
|
||||
},
|
||||
{
|
||||
name: '利润增长率',
|
||||
type: 'line',
|
||||
yAxisIndex: 1,
|
||||
data: [80, 81, 78, 67, 65, 60, 56, 51, 45],
|
||||
itemStyle: {
|
||||
color: '#409EFF'
|
||||
}
|
||||
}
|
||||
]
|
||||
} as EChartsOption);
|
||||
chart.value = barChart;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
beforeDestroy()
|
||||
})
|
||||
beforeDestroy();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
activated()
|
||||
})
|
||||
activated();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
deactivated()
|
||||
})
|
||||
deactivated();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
mounted()
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
})
|
||||
|
||||
</script>
|
||||
mounted();
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
@@ -1,142 +1,135 @@
|
||||
<!-- 漏斗图 -->
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
:class="className"
|
||||
:style="{height, width}"
|
||||
/>
|
||||
<div :id="id" :class="className" :style="{ height, width }" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
|
||||
import {init, EChartsOption} from 'echarts'
|
||||
import resize from '@/utils/resize'
|
||||
import {
|
||||
nextTick,
|
||||
onActivated,
|
||||
onBeforeUnmount,
|
||||
onDeactivated,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import { init, EChartsOption } from 'echarts';
|
||||
import resize from '@/utils/resize';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: 'funnelChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
}
|
||||
})
|
||||
id: {
|
||||
type: String,
|
||||
default: 'funnelChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
mounted,
|
||||
chart,
|
||||
beforeDestroy,
|
||||
activated,
|
||||
deactivated
|
||||
} = resize()
|
||||
const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
|
||||
|
||||
function initChart() {
|
||||
const funnelChart = init(document.getElementById(props.id) as HTMLDivElement)
|
||||
const funnelChart = init(document.getElementById(props.id) as HTMLDivElement);
|
||||
|
||||
funnelChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '订单线索转化漏斗图',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
color:'#337ecc'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
|
||||
},
|
||||
funnelChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '订单线索转化漏斗图',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
color: '#337ecc'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
data: ['Show', 'Click', 'Visit', 'Inquiry', 'Order']
|
||||
},
|
||||
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
left: '20%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
width: '60%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 40, name: 'Inquiry' },
|
||||
{ value: 20, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
}
|
||||
]
|
||||
} as EChartsOption)
|
||||
chart.value = funnelChart
|
||||
series: [
|
||||
{
|
||||
name: 'Funnel',
|
||||
type: 'funnel',
|
||||
left: '20%',
|
||||
top: 60,
|
||||
bottom: 60,
|
||||
width: '60%',
|
||||
min: 0,
|
||||
max: 100,
|
||||
minSize: '0%',
|
||||
maxSize: '100%',
|
||||
sort: 'descending',
|
||||
gap: 2,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside'
|
||||
},
|
||||
labelLine: {
|
||||
length: 10,
|
||||
lineStyle: {
|
||||
width: 1,
|
||||
type: 'solid'
|
||||
}
|
||||
},
|
||||
itemStyle: {
|
||||
borderColor: '#fff',
|
||||
borderWidth: 1
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
fontSize: 20
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 60, name: 'Visit' },
|
||||
{ value: 40, name: 'Inquiry' },
|
||||
{ value: 20, name: 'Order' },
|
||||
{ value: 80, name: 'Click' },
|
||||
{ value: 100, name: 'Show' }
|
||||
]
|
||||
}
|
||||
]
|
||||
} as EChartsOption);
|
||||
chart.value = funnelChart;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
beforeDestroy()
|
||||
})
|
||||
beforeDestroy();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
activated()
|
||||
})
|
||||
activated();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
deactivated()
|
||||
})
|
||||
deactivated();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
mounted()
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
})
|
||||
|
||||
mounted();
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,123 +1,115 @@
|
||||
<!-- 饼图 -->
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
:class="className"
|
||||
:style="{height, width}"
|
||||
/>
|
||||
<div :id="id" :class="className" :style="{ height, width }" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
|
||||
import {init, EChartsOption} from 'echarts'
|
||||
import resize from "@/utils/resize";
|
||||
import {
|
||||
nextTick,
|
||||
onActivated,
|
||||
onBeforeUnmount,
|
||||
onDeactivated,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import { init, EChartsOption } from 'echarts';
|
||||
import resize from '@/utils/resize';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: 'pieChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
}
|
||||
})
|
||||
id: {
|
||||
type: String,
|
||||
default: 'pieChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
mounted,
|
||||
chart,
|
||||
beforeDestroy,
|
||||
activated,
|
||||
deactivated
|
||||
} = resize()
|
||||
const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
|
||||
|
||||
function initChart() {
|
||||
const pieChart = init(document.getElementById(props.id) as HTMLDivElement)
|
||||
const pieChart = init(document.getElementById(props.id) as HTMLDivElement);
|
||||
|
||||
pieChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '产品分类总览',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
color: '#337ecc'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Nightingale Chart',
|
||||
type: 'pie',
|
||||
radius: [50, 130],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
normal: {
|
||||
color: function (params: any) {
|
||||
//自定义颜色
|
||||
const colorList = [
|
||||
'#409EFF', '#67C23A', '#E6A23C', '#F56C6C'
|
||||
];
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{value: 26, name: '家用电器'},
|
||||
{value: 27, name: '户外运动'},
|
||||
{value: 24, name: '汽车用品'},
|
||||
{value: 23, name: '手机数码'}
|
||||
]
|
||||
}
|
||||
]
|
||||
} as EChartsOption)
|
||||
pieChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '产品分类总览',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
color: '#337ecc'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
top: 'bottom'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Nightingale Chart',
|
||||
type: 'pie',
|
||||
radius: [50, 130],
|
||||
center: ['50%', '50%'],
|
||||
roseType: 'area',
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
normal: {
|
||||
color: function (params: any) {
|
||||
//自定义颜色
|
||||
const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{ value: 26, name: '家用电器' },
|
||||
{ value: 27, name: '户外运动' },
|
||||
{ value: 24, name: '汽车用品' },
|
||||
{ value: 23, name: '手机数码' }
|
||||
]
|
||||
}
|
||||
]
|
||||
} as EChartsOption);
|
||||
|
||||
chart.value = pieChart
|
||||
chart.value = pieChart;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
beforeDestroy()
|
||||
})
|
||||
beforeDestroy();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
activated()
|
||||
})
|
||||
activated();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
deactivated()
|
||||
})
|
||||
deactivated();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
mounted()
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
})
|
||||
mounted();
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,142 +1,134 @@
|
||||
<!-- 雷达图 -->
|
||||
<template>
|
||||
<div
|
||||
:id="id"
|
||||
:class="className"
|
||||
:style="{height, width}"
|
||||
/>
|
||||
<div :id="id" :class="className" :style="{ height, width }" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import {nextTick, onActivated, onBeforeUnmount, onDeactivated, onMounted} from "vue";
|
||||
import {init, EChartsOption} from 'echarts'
|
||||
import resize from "@/utils/resize";
|
||||
import {
|
||||
nextTick,
|
||||
onActivated,
|
||||
onBeforeUnmount,
|
||||
onDeactivated,
|
||||
onMounted
|
||||
} from 'vue';
|
||||
import { init, EChartsOption } from 'echarts';
|
||||
import resize from '@/utils/resize';
|
||||
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
default: 'radarChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
}
|
||||
})
|
||||
id: {
|
||||
type: String,
|
||||
default: 'radarChart'
|
||||
},
|
||||
className: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
width: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
},
|
||||
height: {
|
||||
type: String,
|
||||
default: '200px',
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const {
|
||||
mounted,
|
||||
chart,
|
||||
beforeDestroy,
|
||||
activated,
|
||||
deactivated
|
||||
} = resize()
|
||||
const { mounted, chart, beforeDestroy, activated, deactivated } = resize();
|
||||
|
||||
function initChart() {
|
||||
const radarChart = init(document.getElementById(props.id) as HTMLDivElement)
|
||||
const radarChart = init(document.getElementById(props.id) as HTMLDivElement);
|
||||
|
||||
radarChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '订单状态统计',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
color:'#337ecc'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
data: ['预定数量', '下单数量','发货数量']
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
radius: '60%',
|
||||
indicator: [
|
||||
{ name: '家用电器', max: 6500 },
|
||||
{ name: '服装箱包', max: 16000 },
|
||||
{ name: '运动户外', max: 30000 },
|
||||
{ name: '手机数码', max: 38000 },
|
||||
{ name: '汽车用品', max: 52000 },
|
||||
{ name: '家具厨具', max: 25000 }
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Budget vs spending',
|
||||
type: 'radar',
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
normal: {
|
||||
color: function (params: any) {
|
||||
//自定义颜色
|
||||
const colorList = [
|
||||
'#409EFF', '#67C23A', '#E6A23C', '#F56C6C'
|
||||
];
|
||||
return colorList[params.dataIndex]
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [4200, 10000, 20000, 35000, 50000, 18000],
|
||||
name: '预定数量'
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||
name: '下单数量'
|
||||
},
|
||||
{
|
||||
value: [5000, 12000, 23000, 18000, 31000, 11000],
|
||||
name: '发货数量'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
} as EChartsOption)
|
||||
radarChart.setOption({
|
||||
title: {
|
||||
show: true,
|
||||
text: '订单状态统计',
|
||||
x: 'center',
|
||||
padding: 15,
|
||||
textStyle: {
|
||||
fontSize: 18,
|
||||
fontStyle: 'normal',
|
||||
fontWeight: 'bold',
|
||||
color: '#337ecc'
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
left: '2%',
|
||||
right: '2%',
|
||||
bottom: '10%',
|
||||
containLabel: true
|
||||
},
|
||||
legend: {
|
||||
x: 'center',
|
||||
y: 'bottom',
|
||||
data: ['预定数量', '下单数量', '发货数量']
|
||||
},
|
||||
radar: {
|
||||
// shape: 'circle',
|
||||
radius: '60%',
|
||||
indicator: [
|
||||
{ name: '家用电器', max: 6500 },
|
||||
{ name: '服装箱包', max: 16000 },
|
||||
{ name: '运动户外', max: 30000 },
|
||||
{ name: '手机数码', max: 38000 },
|
||||
{ name: '汽车用品', max: 52000 },
|
||||
{ name: '家具厨具', max: 25000 }
|
||||
]
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: 'Budget vs spending',
|
||||
type: 'radar',
|
||||
itemStyle: {
|
||||
borderRadius: 6,
|
||||
normal: {
|
||||
color: function (params: any) {
|
||||
//自定义颜色
|
||||
const colorList = ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C'];
|
||||
return colorList[params.dataIndex];
|
||||
}
|
||||
}
|
||||
},
|
||||
data: [
|
||||
{
|
||||
value: [4200, 10000, 20000, 35000, 50000, 18000],
|
||||
name: '预定数量'
|
||||
},
|
||||
{
|
||||
value: [5000, 14000, 28000, 26000, 42000, 21000],
|
||||
name: '下单数量'
|
||||
},
|
||||
{
|
||||
value: [5000, 12000, 23000, 18000, 31000, 11000],
|
||||
name: '发货数量'
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
} as EChartsOption);
|
||||
|
||||
chart.value = radarChart
|
||||
chart.value = radarChart;
|
||||
}
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
beforeDestroy()
|
||||
})
|
||||
beforeDestroy();
|
||||
});
|
||||
|
||||
onActivated(() => {
|
||||
activated()
|
||||
})
|
||||
activated();
|
||||
});
|
||||
|
||||
onDeactivated(() => {
|
||||
deactivated()
|
||||
})
|
||||
deactivated();
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
mounted()
|
||||
nextTick(() => {
|
||||
initChart()
|
||||
})
|
||||
})
|
||||
mounted();
|
||||
nextTick(() => {
|
||||
initChart();
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
</style>
|
||||
<style lang="scss" scoped></style>
|
||||
|
||||
@@ -1,93 +1,119 @@
|
||||
<template>
|
||||
<div class="component-container">
|
||||
<el-card class="project-card">
|
||||
<template #header>
|
||||
<span class="fw-b">有来项目简介</span>
|
||||
</template>
|
||||
<div class="project-card__main">
|
||||
<!-- 项目简介 -->
|
||||
<el-link target="_blank" type="primary" href="https://gitee.com/haoxr">
|
||||
youlai-mall
|
||||
</el-link>
|
||||
是基于Spring Boot 2.6、Spring Cloud 2021 &
|
||||
Alibaba 2021、Vue3、Element-Plus、uni-app等主流技术栈构建的一整套全栈开源商城项目，
|
||||
涉及
|
||||
<el-link target="_blank" type="primary" href="https://gitee.com/youlaitech/youlai-mall">后端微服务</el-link>
|
||||
、
|
||||
<el-link target="_blank" type="success" href="https://gitee.com/youlaitech/youlai-mall-admin">前端管理</el-link>
|
||||
、
|
||||
<el-link target="_blank" type="warning" href="https://gitee.com/youlaitech/youlai-mall-weapp">微信小程序
|
||||
</el-link>
|
||||
和
|
||||
<el-link target="_blank" type="danger" href="https://gitee.com/youlaitech/youlai-mall-weapp">APP应用</el-link>
|
||||
等多端的开发。
|
||||
<el-divider/>
|
||||
<div class="component-container">
|
||||
<el-card class="project-card">
|
||||
<template #header>
|
||||
<span class="fw-b">有来项目简介</span>
|
||||
</template>
|
||||
<div class="project-card__main">
|
||||
<!-- 项目简介 -->
|
||||
<el-link target="_blank" type="primary" href="https://gitee.com/haoxr">
|
||||
youlai-mall
|
||||
</el-link>
|
||||
是基于Spring Boot 2.6、Spring Cloud 2021 & Alibaba
|
||||
2021、Vue3、Element-Plus、uni-app等主流技术栈构建的一整套全栈开源商城项目，
|
||||
涉及
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="primary"
|
||||
href="https://gitee.com/youlaitech/youlai-mall"
|
||||
>后端微服务</el-link
|
||||
>
|
||||
、
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="success"
|
||||
href="https://gitee.com/youlaitech/youlai-mall-admin"
|
||||
>前端管理</el-link
|
||||
>
|
||||
、
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="warning"
|
||||
href="https://gitee.com/youlaitech/youlai-mall-weapp"
|
||||
>微信小程序
|
||||
</el-link>
|
||||
和
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="danger"
|
||||
href="https://gitee.com/youlaitech/youlai-mall-weapp"
|
||||
>APP应用</el-link
|
||||
>
|
||||
等多端的开发。
|
||||
<el-divider />
|
||||
|
||||
<!-- 源码地址 -->
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-badge value="免费开源" class="fw-b">
|
||||
项目地址
|
||||
</el-badge>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-link target="_blank" type="warning" href="http://youlaitech.gitee.io/youlai-mall">官方文档(完善中..)</el-link>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-link target="_blank" type="primary" href="https://github.com/youlaitech">Github</el-link>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-link target="_blank" type="success" href="https://gitee.com/youlaiorg">码云</el-link>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider/>
|
||||
<!-- 技术栈 -->
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6" class="fw-b">
|
||||
后端技术栈
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
Spring Boot、Spring Cloud & Alibaba、Spring Security
|
||||
OAuth2、JWT、Elastic Stack 、K8s...
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider/>
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6" class="fw-b">
|
||||
前端技术栈
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
Vue3、TypeScript、Element-Plus、uni-app、vue3-element-admin ...
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 源码地址 -->
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6">
|
||||
<el-badge value="免费开源" class="fw-b"> 项目地址 </el-badge>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="warning"
|
||||
href="http://youlaitech.gitee.io/youlai-mall"
|
||||
>官方文档(完善中..)</el-link
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="primary"
|
||||
href="https://github.com/youlaitech"
|
||||
>Github</el-link
|
||||
>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-link
|
||||
target="_blank"
|
||||
type="success"
|
||||
href="https://gitee.com/youlaiorg"
|
||||
>码云</el-link
|
||||
>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<!-- 技术栈 -->
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6" class="fw-b"> 后端技术栈 </el-col>
|
||||
<el-col :span="18">
|
||||
Spring Boot、Spring Cloud & Alibaba、Spring Security
|
||||
OAuth2、JWT、Elastic Stack 、K8s...
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-divider />
|
||||
<el-row :gutter="10">
|
||||
<el-col :span="6" class="fw-b"> 前端技术栈 </el-col>
|
||||
<el-col :span="18">
|
||||
Vue3、TypeScript、Element-Plus、uni-app、vue3-element-admin ...
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "index"
|
||||
}
|
||||
name: 'index'
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
.component-container {
|
||||
.project-card {
|
||||
font-size: 14px;
|
||||
.project-card {
|
||||
font-size: 14px;
|
||||
|
||||
&__main {
|
||||
line-height: 28px;
|
||||
height: 320px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
&__main {
|
||||
line-height: 28px;
|
||||
height: 320px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
}
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -1,110 +1,129 @@
|
||||
<!-- 团队介绍 -->
|
||||
<template>
|
||||
<div class="component-container">
|
||||
<el-card class="team-card">
|
||||
<template #header>
|
||||
<span class="fw-b">有来开源组织 & 技术团队</span>
|
||||
</template>
|
||||
<el-tabs v-model="teamActiveName">
|
||||
<el-tab-pane label="开发者" name="developer">
|
||||
<div class="developer" ref="dev_wrapper">
|
||||
<ul class="developer__container">
|
||||
<li class="developer__item" v-for="(item, index) in developers" :key="index">
|
||||
<div class="developer__inner">
|
||||
<el-image class="developer__img" :src="item.imgUrl" :preview-src-list="[item.imgUrl]"></el-image>
|
||||
<div class="developer__info">
|
||||
<span class="developer__nickname">{{ item.nickname }}</span>
|
||||
<div class="developer__position">
|
||||
<el-tag v-for="(position, i) in item.positions" :type="(colors[i % colors.length] as any)"
|
||||
:class="i !== 0 ? 'f-ml' : ''" size="small" :key="i">{{ position }}</el-tag>
|
||||
</div>
|
||||
<div class="developer__homepage">
|
||||
<a :href="item.homepage" target="_blank">个人主页</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<el-image class="developer__indicator" :src="indicatorImgUrl" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<div class="component-container">
|
||||
<el-card class="team-card">
|
||||
<template #header>
|
||||
<span class="fw-b">有来开源组织 & 技术团队</span>
|
||||
</template>
|
||||
<el-tabs v-model="teamActiveName">
|
||||
<el-tab-pane label="开发者" name="developer">
|
||||
<div class="developer" ref="dev_wrapper">
|
||||
<ul class="developer__container">
|
||||
<li
|
||||
class="developer__item"
|
||||
v-for="(item, index) in developers"
|
||||
:key="index"
|
||||
>
|
||||
<div class="developer__inner">
|
||||
<el-image
|
||||
class="developer__img"
|
||||
:src="item.imgUrl"
|
||||
:preview-src-list="[item.imgUrl]"
|
||||
></el-image>
|
||||
<div class="developer__info">
|
||||
<span class="developer__nickname">{{ item.nickname }}</span>
|
||||
<div class="developer__position">
|
||||
<el-tag
|
||||
v-for="(position, i) in item.positions"
|
||||
:type="(colors[i % colors.length] as any)"
|
||||
:class="i !== 0 ? 'f-ml' : ''"
|
||||
size="small"
|
||||
:key="i"
|
||||
>{{ position }}</el-tag
|
||||
>
|
||||
</div>
|
||||
<div class="developer__homepage">
|
||||
<a :href="item.homepage" target="_blank">个人主页</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<el-image class="developer__indicator" :src="indicatorImgUrl" />
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="交流群" name="2">
|
||||
<div class="group">
|
||||
<el-image class="group-img" src="https://www.youlai.tech/files/blog/youlaiqun.png"
|
||||
:preview-src-list="['https://www.youlai.tech/files/blog/youlaiqun.png']" />
|
||||
<div class="group-tip">群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="交流群" name="2">
|
||||
<div class="group">
|
||||
<el-image
|
||||
class="group-img"
|
||||
src="https://www.youlai.tech/files/blog/youlaiqun.png"
|
||||
:preview-src-list="[
|
||||
'https://www.youlai.tech/files/blog/youlaiqun.png'
|
||||
]"
|
||||
/>
|
||||
<div class="group-tip">
|
||||
群二维码过期可添加开发者微信由其拉入群，备注「有来」即可。
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane label="加入我们" name="3">
|
||||
<div class="join">
|
||||
<p>1. 人品良好、善于思考、执行力强；</p>
|
||||
<p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
|
||||
<p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
|
||||
<p>4. 过分优秀者我们会主动联系您...</p>
|
||||
<div class="join__desc">申请加入方式: 添加开发者微信申请即可。</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
<el-tab-pane label="加入我们" name="3">
|
||||
<div class="join">
|
||||
<p>1. 人品良好、善于思考、执行力强；</p>
|
||||
<p>2. 熟悉项目，且至少给项目提交(过)一个PR；</p>
|
||||
<p>3. Git代码库活跃，个人主页或博客完善者优先；</p>
|
||||
<p>4. 过分优秀者我们会主动联系您...</p>
|
||||
<div class="join__desc">申请加入方式: 添加开发者微信申请即可。</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from "vue";
|
||||
import BScroll from "better-scroll";
|
||||
import { nextTick, onMounted, reactive, ref, toRefs, watchEffect } from 'vue';
|
||||
import BScroll from 'better-scroll';
|
||||
|
||||
const state = reactive({
|
||||
teamActiveName: "developer",
|
||||
developers: [
|
||||
{
|
||||
imgUrl: "https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg",
|
||||
nickname: "郝先瑞",
|
||||
positions: ["后端", "前端", "文档"],
|
||||
homepage: "https://www.cnblogs.com/haoxianrui/",
|
||||
},
|
||||
{
|
||||
imgUrl: "https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg",
|
||||
nickname: "张川",
|
||||
positions: ["后端", "前端"],
|
||||
homepage: "https://blog.csdn.net/qq_41595149",
|
||||
},
|
||||
{
|
||||
imgUrl: "https://s2.loli.net/2022/04/07/2IiOYBHnRGKgCSd.jpg",
|
||||
nickname: "张加林",
|
||||
positions: ["DevOps"],
|
||||
homepage: "https://gitee.com/ximy",
|
||||
}
|
||||
],
|
||||
colors: ["", "success", "warning", "danger"],
|
||||
indicatorImgUrl: new URL(
|
||||
`../../../../assets/index/indicator.png`,
|
||||
import.meta.url
|
||||
).href,
|
||||
teamActiveName: 'developer',
|
||||
developers: [
|
||||
{
|
||||
imgUrl: 'https://s2.loli.net/2022/04/06/yRx8uzj4emA5QVr.jpg',
|
||||
nickname: '郝先瑞',
|
||||
positions: ['后端', '前端', '文档'],
|
||||
homepage: 'https://www.cnblogs.com/haoxianrui/'
|
||||
},
|
||||
{
|
||||
imgUrl: 'https://s2.loli.net/2022/04/06/cQihGv9uPsTjXk1.jpg',
|
||||
nickname: '张川',
|
||||
positions: ['后端', '前端'],
|
||||
homepage: 'https://blog.csdn.net/qq_41595149'
|
||||
},
|
||||
{
|
||||
imgUrl: 'https://s2.loli.net/2022/04/07/2IiOYBHnRGKgCSd.jpg',
|
||||
nickname: '张加林',
|
||||
positions: ['DevOps'],
|
||||
homepage: 'https://gitee.com/ximy'
|
||||
}
|
||||
],
|
||||
colors: ['', 'success', 'warning', 'danger'],
|
||||
indicatorImgUrl: new URL(
|
||||
`../../../../assets/index/indicator.png`,
|
||||
import.meta.url
|
||||
).href
|
||||
});
|
||||
|
||||
const { teamActiveName, developers, colors, indicatorImgUrl } = toRefs(state);
|
||||
|
||||
let bScroll = reactive({})
|
||||
let bScroll = reactive({});
|
||||
|
||||
const dev_wrapper = ref<HTMLElement | any>(null)
|
||||
const dev_wrapper = ref<HTMLElement | any>(null);
|
||||
|
||||
onMounted(() => {
|
||||
bScroll = new BScroll(dev_wrapper.value, {
|
||||
mouseWheel: true,//开启鼠标滚轮
|
||||
disableMouse: false,//启用鼠标拖动
|
||||
scrollX: true, //X轴滚动启用
|
||||
})
|
||||
})
|
||||
bScroll = new BScroll(dev_wrapper.value, {
|
||||
mouseWheel: true, //开启鼠标滚轮
|
||||
disableMouse: false, //启用鼠标拖动
|
||||
scrollX: true //X轴滚动启用
|
||||
});
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
nextTick(() => {
|
||||
bScroll && (bScroll as any).refresh()
|
||||
})
|
||||
})
|
||||
|
||||
|
||||
nextTick(() => {
|
||||
bScroll && (bScroll as any).refresh();
|
||||
});
|
||||
});
|
||||
|
||||
// let bScroll = reactive({})
|
||||
|
||||
@@ -127,116 +146,116 @@ watchEffect(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.component-container {
|
||||
.team-card {
|
||||
font-size: 14px;
|
||||
.team-card {
|
||||
font-size: 14px;
|
||||
|
||||
.el-tabs__content {
|
||||
.el-tab-pane {
|
||||
height: 265px;
|
||||
}
|
||||
}
|
||||
.el-tabs__content {
|
||||
.el-tab-pane {
|
||||
height: 265px;
|
||||
}
|
||||
}
|
||||
|
||||
.developer {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
.developer {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&__container {
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
padding: 10px;
|
||||
&__container {
|
||||
display: inline-flex;
|
||||
overflow: hidden;
|
||||
justify-content: flex-start;
|
||||
padding: 10px;
|
||||
|
||||
.developer__item {
|
||||
&:not(:first-child) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
.developer__item {
|
||||
&:not(:first-child) {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
width: 180px;
|
||||
min-width: 180px;
|
||||
align-items: center;
|
||||
list-style: none;
|
||||
width: 180px;
|
||||
min-width: 180px;
|
||||
|
||||
.developer__inner {
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 5px;
|
||||
box-shadow: 6px 6px 6px #aaa;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
.developer__inner {
|
||||
border: 1px solid #cccccc;
|
||||
border-radius: 5px;
|
||||
box-shadow: 6px 6px 6px #aaa;
|
||||
padding: 8px;
|
||||
text-align: center;
|
||||
|
||||
.developer__img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
.developer__img {
|
||||
height: 100px;
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.developer__info {
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
.developer__info {
|
||||
padding: 6px;
|
||||
font-size: 14px;
|
||||
|
||||
.developer__position {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.developer__position {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.developer__homepage {
|
||||
margin-top: 16px;
|
||||
.developer__homepage {
|
||||
margin-top: 16px;
|
||||
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
color: #409eff;
|
||||
border: 1px solid #409eff;
|
||||
border-radius: 5px;
|
||||
background: #ecf5ff;
|
||||
a {
|
||||
display: inline-block;
|
||||
padding: 4px 10px;
|
||||
color: #409eff;
|
||||
border: 1px solid #409eff;
|
||||
border-radius: 5px;
|
||||
background: #ecf5ff;
|
||||
|
||||
&:hover {
|
||||
background: #409eff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background: #409eff;
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__indicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
&__indicator {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 120px;
|
||||
height: 100px;
|
||||
}
|
||||
}
|
||||
|
||||
.join {
|
||||
height: 240px;
|
||||
.join {
|
||||
height: 240px;
|
||||
|
||||
p {
|
||||
font-weight: bold;
|
||||
}
|
||||
p {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
&__desc {
|
||||
margin-top: 20px;
|
||||
color: #409eff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
&__desc {
|
||||
margin-top: 20px;
|
||||
color: #409eff;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.group {
|
||||
height: 254px;
|
||||
.group {
|
||||
height: 254px;
|
||||
|
||||
&-img {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-img {
|
||||
height: 200px;
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
}
|
||||
.fw-b {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.f-ml {
|
||||
margin-left: 5px;
|
||||
}
|
||||
.f-ml {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user