✨ feat: 首页代码提交
This commit is contained in:
ycy
parent
c6a7e5260d
commit
99db358c66
95
src/components/echarts/bar.vue
Normal file
95
src/components/echarts/bar.vue
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%">
|
||||||
|
<div ref="barChartRef" :style="{ width: width, height: height }"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
|
// 定义图表容器引用
|
||||||
|
const barChartRef = ref(null)
|
||||||
|
|
||||||
|
const { categories, seriesData, title, legendList } = defineProps({
|
||||||
|
// 横坐标
|
||||||
|
categories: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 纵坐标
|
||||||
|
seriesData: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 标题
|
||||||
|
title: {
|
||||||
|
type: String,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 图例
|
||||||
|
legendList: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 宽度
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
// 高度
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 配置图表数据和选项
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: title,
|
||||||
|
left: 'center',
|
||||||
|
top: '10'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'shadow'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: legendList, // 根据实际需求替换为对应系列名称
|
||||||
|
bottom: '10'
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
data: categories
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value'
|
||||||
|
},
|
||||||
|
series: seriesData
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在组件挂载后初始化ECharts实例并设置选项
|
||||||
|
onMounted(() => {
|
||||||
|
const barChartContainer = barChartRef.value
|
||||||
|
if (barChartContainer) {
|
||||||
|
const myChart = echarts.init(barChartContainer)
|
||||||
|
myChart.setOption(option)
|
||||||
|
|
||||||
|
// 添加窗口resize事件监听，自动调整图表大小
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'BarChart'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
133
src/components/echarts/line.vue
Normal file
133
src/components/echarts/line.vue
Normal file
|
|
@ -0,0 +1,133 @@
|
||||||
|
<template>
|
||||||
|
<div style="height: 100%">
|
||||||
|
<div ref="lineChartRef" :style="{ width: width, height: height }"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
|
// 定义图表容器引用
|
||||||
|
const lineChartRef = ref(null)
|
||||||
|
|
||||||
|
const { categories, seriesData, titleP, legendList } = defineProps({
|
||||||
|
// 横坐标
|
||||||
|
categories: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 纵坐标
|
||||||
|
seriesData: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
titleP: {
|
||||||
|
type: String,
|
||||||
|
default: '示例折线图'
|
||||||
|
},
|
||||||
|
// 图例
|
||||||
|
legendList: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 配置图表数据和选项
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: titleP,
|
||||||
|
left: 'center',
|
||||||
|
top: '2'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'axis',
|
||||||
|
axisPointer: {
|
||||||
|
type: 'cross',
|
||||||
|
label: {
|
||||||
|
backgroundColor: '#6a7985'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
data: legendList,
|
||||||
|
bottom: 0
|
||||||
|
},
|
||||||
|
grid: {
|
||||||
|
left: '3%',
|
||||||
|
right: '3%',
|
||||||
|
bottom: '9%',
|
||||||
|
containLabel: true
|
||||||
|
},
|
||||||
|
xAxis: {
|
||||||
|
type: 'category',
|
||||||
|
boundaryGap: false,
|
||||||
|
data: categories,
|
||||||
|
axisTick: {
|
||||||
|
alignWithLabel: true
|
||||||
|
}
|
||||||
|
},
|
||||||
|
yAxis: {
|
||||||
|
type: 'value',
|
||||||
|
splitLine: {
|
||||||
|
lineStyle: {
|
||||||
|
type: 'dashed'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
series: seriesData.map((serie: any) => ({
|
||||||
|
...serie,
|
||||||
|
lineStyle: {
|
||||||
|
width: 2
|
||||||
|
},
|
||||||
|
smooth: true,
|
||||||
|
itemStyle: {
|
||||||
|
color: '#57c1ff'
|
||||||
|
},
|
||||||
|
areaStyle: {
|
||||||
|
// 添加这一行
|
||||||
|
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||||
|
{
|
||||||
|
offset: 0,
|
||||||
|
color: '#88d1ff'
|
||||||
|
}, // 填充色开始颜色（可自定义）
|
||||||
|
{
|
||||||
|
offset: 1,
|
||||||
|
color: '#1a91ff'
|
||||||
|
} // 填充色结束颜色（可自定义）
|
||||||
|
])
|
||||||
|
// opacity: 0 // 可根据需要调整透明度
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在组件挂载后初始化ECharts实例并设置选项
|
||||||
|
onMounted(() => {
|
||||||
|
const lineChartContainer = lineChartRef.value
|
||||||
|
if (lineChartContainer) {
|
||||||
|
const myChart = echarts.init(lineChartContainer)
|
||||||
|
myChart.setOption(option)
|
||||||
|
|
||||||
|
// 添加窗口resize事件监听，自动调整图表大小
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'LineChart'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
88
src/components/echarts/pie.vue
Normal file
88
src/components/echarts/pie.vue
Normal file
|
|
@ -0,0 +1,88 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div ref="pieChartRef" :style="{ width: width, height: height }"></div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import * as echarts from 'echarts'
|
||||||
|
import { onMounted, ref } from 'vue'
|
||||||
|
|
||||||
|
// 定义图表容器引用
|
||||||
|
const pieChartRef = ref(null)
|
||||||
|
|
||||||
|
const { titleP, dataP } = defineProps({
|
||||||
|
// 图表数据
|
||||||
|
dataP: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
},
|
||||||
|
titleP: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
width: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
},
|
||||||
|
height: {
|
||||||
|
type: String,
|
||||||
|
default: '100%'
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
// 配置图表数据和选项
|
||||||
|
const option = {
|
||||||
|
title: {
|
||||||
|
text: titleP,
|
||||||
|
left: 'center'
|
||||||
|
},
|
||||||
|
tooltip: {
|
||||||
|
trigger: 'item',
|
||||||
|
formatter: '{a} <br/>{b}: {c} ({d}%)'
|
||||||
|
},
|
||||||
|
legend: {
|
||||||
|
orient: 'vertical',
|
||||||
|
left: '0',
|
||||||
|
top: '50'
|
||||||
|
},
|
||||||
|
series: [
|
||||||
|
{
|
||||||
|
name: '访问来源',
|
||||||
|
type: 'pie',
|
||||||
|
radius: '50%',
|
||||||
|
left: '50',
|
||||||
|
data: dataP,
|
||||||
|
emphasis: {
|
||||||
|
itemStyle: {
|
||||||
|
shadowBlur: 10,
|
||||||
|
shadowOffsetX: 0,
|
||||||
|
shadowColor: 'rgba(0, 0, 0, 0.5)'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
|
// 在组件挂载后初始化ECharts实例并设置选项
|
||||||
|
onMounted(() => {
|
||||||
|
const pieChartContainer = pieChartRef.value
|
||||||
|
if (pieChartContainer) {
|
||||||
|
const myChart = echarts.init(pieChartContainer)
|
||||||
|
myChart.setOption(option)
|
||||||
|
|
||||||
|
// 添加窗口resize事件监听，自动调整图表大小
|
||||||
|
window.addEventListener('resize', () => {
|
||||||
|
myChart.resize()
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'pieChart'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped></style>
|
||||||
200
src/views/home/components/homeCenter.vue
Normal file
200
src/views/home/components/homeCenter.vue
Normal file
|
|
@ -0,0 +1,200 @@
|
||||||
|
<template>
|
||||||
|
<div class="linebox">
|
||||||
|
<div class="title_class">
|
||||||
|
<span>数据概览</span>
|
||||||
|
<div class="circle_layout">
|
||||||
|
<div
|
||||||
|
class="circle"
|
||||||
|
v-for="(item, index) in circleClassList"
|
||||||
|
:style="{
|
||||||
|
background: `${item.judge ? item.color : ''}`,
|
||||||
|
cursor: `${item.judge ? 'pointer' : ''}`
|
||||||
|
}"
|
||||||
|
:key="index"
|
||||||
|
@mouseover="circleClick(index)"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<t-divider />
|
||||||
|
<line-chart
|
||||||
|
v-if="title === '采购入库单'"
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:titleP="title"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'80%'"
|
||||||
|
:width="'92rem'"
|
||||||
|
/>
|
||||||
|
<line-chart
|
||||||
|
v-else-if="title === '购货退货单'"
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:titleP="title"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'80%'"
|
||||||
|
:width="'92rem'"
|
||||||
|
/>
|
||||||
|
<line-chart
|
||||||
|
v-else-if="title === '销货出库单'"
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:titleP="title"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'80%'"
|
||||||
|
:width="'92rem'"
|
||||||
|
/>
|
||||||
|
<line-chart
|
||||||
|
v-else-if="title === '销货退货单'"
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:titleP="title"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'80%'"
|
||||||
|
:width="'92rem'"
|
||||||
|
/>
|
||||||
|
<line-chart
|
||||||
|
v-else-if="title === '收款单'"
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:titleP="title"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'80%'"
|
||||||
|
:width="'92rem'"
|
||||||
|
/>
|
||||||
|
<line-chart
|
||||||
|
v-else-if="title === '付款单'"
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:titleP="title"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'80%'"
|
||||||
|
:width="'92rem'"
|
||||||
|
/>
|
||||||
|
<line-chart
|
||||||
|
v-else-if="title === '库存数据'"
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:titleP="title"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'80%'"
|
||||||
|
:width="'92rem'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import lineChart from '@/components/echarts/line.vue'
|
||||||
|
import { ref } from 'vue'
|
||||||
|
|
||||||
|
const title = ref('销货出库单')
|
||||||
|
const categories = ref([
|
||||||
|
'一月',
|
||||||
|
'二月',
|
||||||
|
'三月',
|
||||||
|
'四月',
|
||||||
|
'五月',
|
||||||
|
'六月',
|
||||||
|
'七月',
|
||||||
|
'八月',
|
||||||
|
'九月',
|
||||||
|
'十月',
|
||||||
|
'十一月',
|
||||||
|
'十二月'
|
||||||
|
])
|
||||||
|
const legendList = ref(['销货出库单'])
|
||||||
|
const seriesData = ref([
|
||||||
|
{
|
||||||
|
name: '销货出库单',
|
||||||
|
data: [10, 4200, 1800, 2800, 110, 3200, 100, 2000, 1500, 2000, 7500, 3000],
|
||||||
|
type: 'line'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const circleClassList = ref([
|
||||||
|
{
|
||||||
|
color: '#5e5e5e',
|
||||||
|
judge: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#5e5e5e',
|
||||||
|
judge: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#5e5e5e',
|
||||||
|
judge: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#5e5e5e',
|
||||||
|
judge: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#5e5e5e',
|
||||||
|
judge: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#5e5e5e',
|
||||||
|
judge: false
|
||||||
|
},
|
||||||
|
{
|
||||||
|
color: '#5e5e5e',
|
||||||
|
judge: false
|
||||||
|
}
|
||||||
|
])
|
||||||
|
const circleClick = async (index: number) => {
|
||||||
|
await circleClassList.value.forEach((item, i) => {
|
||||||
|
if (i === index) {
|
||||||
|
item.judge = true
|
||||||
|
} else {
|
||||||
|
item.judge = false
|
||||||
|
}
|
||||||
|
})
|
||||||
|
if (index === 0) {
|
||||||
|
title.value = '采购入库单'
|
||||||
|
} else if (index === 1) {
|
||||||
|
title.value = '购货退货单'
|
||||||
|
} else if (index === 2) {
|
||||||
|
title.value = '销货出库单'
|
||||||
|
} else if (index === 3) {
|
||||||
|
title.value = '销货退货单'
|
||||||
|
} else if (index === 4) {
|
||||||
|
title.value = '收款单'
|
||||||
|
} else if (index === 5) {
|
||||||
|
title.value = '付款单'
|
||||||
|
} else if (index === 6) {
|
||||||
|
title.value = '库存数据'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'homeCenter'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.linebox {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.title_class {
|
||||||
|
padding: 0 1rem;
|
||||||
|
height: 3rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.circle_layout {
|
||||||
|
width: 7rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-around;
|
||||||
|
.circle {
|
||||||
|
width: 0.6rem;
|
||||||
|
height: 0.6rem;
|
||||||
|
background-color: #b2b2b2;
|
||||||
|
border-radius: 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
:deep(.t-divider) {
|
||||||
|
margin: 0 0 1rem 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
93
src/views/home/components/homeFooter.vue
Normal file
93
src/views/home/components/homeFooter.vue
Normal file
|
|
@ -0,0 +1,93 @@
|
||||||
|
<template>
|
||||||
|
<div class="centerC">
|
||||||
|
<div class="center-pie">
|
||||||
|
<pie :titleP="title" :dataP="data" :height="'15rem'" :width="'40rem'" />
|
||||||
|
</div>
|
||||||
|
<div class="center-bar">
|
||||||
|
<bar
|
||||||
|
:categories="categories"
|
||||||
|
:seriesData="seriesData"
|
||||||
|
:title="titlebar"
|
||||||
|
:legendList="legendList"
|
||||||
|
:height="'100%'"
|
||||||
|
:width="'52rem'"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
import pie from '@/components/echarts/pie.vue'
|
||||||
|
import bar from '@/components/echarts/bar.vue'
|
||||||
|
|
||||||
|
const title = ref('一天的开心程度')
|
||||||
|
const titlebar = ref('销售额')
|
||||||
|
const data = ref([
|
||||||
|
{ value: 50, name: '上午' },
|
||||||
|
{ value: 50, name: '下午' },
|
||||||
|
{ value: 100, name: '晚上' },
|
||||||
|
{ value: 200, name: '睡觉' }
|
||||||
|
])
|
||||||
|
|
||||||
|
const categories = ref([
|
||||||
|
'一月',
|
||||||
|
'二月',
|
||||||
|
'三月',
|
||||||
|
'四月',
|
||||||
|
'五月',
|
||||||
|
'六月',
|
||||||
|
'七月',
|
||||||
|
'八月',
|
||||||
|
'九月',
|
||||||
|
'十月',
|
||||||
|
'十一月',
|
||||||
|
'十二月'
|
||||||
|
])
|
||||||
|
const legendList = ['类别A', '类别B', '类别C']
|
||||||
|
const seriesData = ref([
|
||||||
|
{
|
||||||
|
name: '类别A',
|
||||||
|
type: 'bar',
|
||||||
|
data: [1000, 1200, 1400, 1500, 1600, 1800, 1700, 1900, 2000, 2200, 2300, 2500]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '类别B',
|
||||||
|
type: 'bar',
|
||||||
|
data: [200, 400, 1000, 500, 700, 800, 1000, 1100, 1150, 1200, 1300, 1400]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: '类别C',
|
||||||
|
type: 'bar',
|
||||||
|
data: [800, 900, 1000, 1100, 1200, 1300, 1400, 1500, 1600, 1700, 1800, 1900]
|
||||||
|
}
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'homeFooter'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.centerC {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
.center-pie {
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.center-bar {
|
||||||
|
width: 49%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
94
src/views/home/components/homeHeader.vue
Normal file
94
src/views/home/components/homeHeader.vue
Normal file
|
|
@ -0,0 +1,94 @@
|
||||||
|
<template>
|
||||||
|
<div class="headerC">
|
||||||
|
<div class="header_box" v-for="(item, index) in homeTitle" :key="index">
|
||||||
|
<div class="header_box">
|
||||||
|
<div class="content">
|
||||||
|
<div class="title">{{ item.title }}</div>
|
||||||
|
<div class="num">{{ item.num }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="header_icon">
|
||||||
|
<t-icon :name="item.icon" class="icon" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { ref } from 'vue'
|
||||||
|
const homeTitle = ref([
|
||||||
|
{
|
||||||
|
title: '月购贷额',
|
||||||
|
num: '362,134.39',
|
||||||
|
icon: 'cart-add'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '月销贷额',
|
||||||
|
num: '118,505.42',
|
||||||
|
icon: 'cart'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '月资金收入',
|
||||||
|
num: '200,182.74',
|
||||||
|
icon: 'money'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '月资金支出',
|
||||||
|
num: '400,099.91',
|
||||||
|
icon: 'logo-github'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
export default {
|
||||||
|
name: 'homeHeader'
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.headerC {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
padding: 0 1rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.header_box {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.header_icon {
|
||||||
|
width: 30%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
margin-right: 1.3rem;
|
||||||
|
margin-top: 0.6rem;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: flex-end;
|
||||||
|
.icon {
|
||||||
|
width: 2rem;
|
||||||
|
height: 2rem;
|
||||||
|
color: #366ef4;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
width: 70%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
.title {
|
||||||
|
font-size: 0.7rem;
|
||||||
|
color: #74757c;
|
||||||
|
margin-bottom: 0.5rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.num {
|
||||||
|
font-size: 1.2rem;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -1,8 +1,27 @@
|
||||||
<template>
|
<template>
|
||||||
<div>1111111111</div>
|
<div class="back-color">
|
||||||
|
<t-layout class="global_schema">
|
||||||
|
<t-content class="echarts">
|
||||||
|
<t-header class="header">
|
||||||
|
<home-header />
|
||||||
|
</t-header>
|
||||||
|
<t-content class="content">
|
||||||
|
<home-center />
|
||||||
|
</t-content>
|
||||||
|
<t-content class="footer">
|
||||||
|
<home-footer />
|
||||||
|
</t-content>
|
||||||
|
</t-content>
|
||||||
|
<t-aside class="contentInfo">Aside</t-aside>
|
||||||
|
</t-layout>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts"></script>
|
<script setup lang="ts">
|
||||||
|
import homeHeader from './components/homeHeader.vue'
|
||||||
|
import homeCenter from './components/homeCenter.vue'
|
||||||
|
import homeFooter from './components/homeFooter.vue'
|
||||||
|
</script>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
export default {
|
export default {
|
||||||
|
|
@ -10,4 +29,36 @@ export default {
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="less"></style>
|
<style scoped lang="less">
|
||||||
|
.global_schema {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
.echarts {
|
||||||
|
width: 80%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
padding: 0 2rem 0 0;
|
||||||
|
.header {
|
||||||
|
height: 5rem;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
background-color: #f5f7fb;
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
height: 25rem;
|
||||||
|
width: 100%;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
height: 20rem;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.contentInfo {
|
||||||
|
width: 20%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user