Compare commits
13 Commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
926484334e | ||
|
|
6c393bea22 | ||
|
|
5f715675c3 | ||
|
|
99db358c66 | ||
|
|
b75e67eab1 | ||
|
|
c6a7e5260d | ||
|
|
2a8862dd00 | ||
|
|
12fbc3ef97 | ||
|
|
252afc5b56 | ||
|
|
f8fe7d6b23 | ||
|
|
842223f64a | ||
|
|
57ae1f86f6 | ||
|
|
b1145b89e7 |
|
|
@ -3,6 +3,6 @@
|
|||
"semi": false,
|
||||
"tabWidth": 2,
|
||||
"singleQuote": true,
|
||||
"printWidth": 100,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "none"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
5
env.d.ts
vendored
5
env.d.ts
vendored
|
|
@ -1 +1,6 @@
|
|||
/// <reference types="vite/client" />
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue'
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
|
|
|
|||
706
package-lock.json
generated
706
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -13,7 +13,12 @@
|
|||
"format": "prettier --write src/"
|
||||
},
|
||||
"dependencies": {
|
||||
"echarts": "^5.5.0",
|
||||
"mockjs": "^1.1.0",
|
||||
"pinia": "^2.1.7",
|
||||
"pinia-plugin-persistedstate": "^3.2.1",
|
||||
"tdesign-vue-next": "^1.9.4",
|
||||
"vite-plugin-mock": "^3.0.2",
|
||||
"vue": "^3.4.21",
|
||||
"vue-router": "^4.3.0"
|
||||
},
|
||||
|
|
@ -28,6 +33,8 @@
|
|||
"@vue/tsconfig": "^0.5.1",
|
||||
"eslint": "^8.57.0",
|
||||
"eslint-plugin-vue": "^9.23.0",
|
||||
"less": "^4.2.0",
|
||||
"less-loader": "^12.2.0",
|
||||
"npm-run-all2": "^6.1.2",
|
||||
"prettier": "^3.2.5",
|
||||
"typescript": "~5.4.0",
|
||||
|
|
|
|||
90
src/App.vue
90
src/App.vue
|
|
@ -1,85 +1,15 @@
|
|||
<template>
|
||||
<div id="app">
|
||||
<router-view />
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { RouterLink, RouterView } from 'vue-router'
|
||||
import HelloWorld from './components/HelloWorld.vue'
|
||||
import { RouterView } from 'vue-router'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<header>
|
||||
<img alt="Vue logo" class="logo" src="@/assets/logo.svg" width="125" height="125" />
|
||||
|
||||
<div class="wrapper">
|
||||
<HelloWorld msg="You did it!" />
|
||||
|
||||
<nav>
|
||||
<RouterLink to="/">Home</RouterLink>
|
||||
<RouterLink to="/about">About</RouterLink>
|
||||
</nav>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<RouterView />
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
header {
|
||||
line-height: 1.5;
|
||||
max-height: 100vh;
|
||||
}
|
||||
|
||||
.logo {
|
||||
display: block;
|
||||
margin: 0 auto 2rem;
|
||||
}
|
||||
|
||||
nav {
|
||||
width: 100%;
|
||||
font-size: 12px;
|
||||
text-align: center;
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active {
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
nav a.router-link-exact-active:hover {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
nav a {
|
||||
display: inline-block;
|
||||
padding: 0 1rem;
|
||||
border-left: 1px solid var(--color-border);
|
||||
}
|
||||
|
||||
nav a:first-of-type {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
header {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
padding-right: calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
.logo {
|
||||
margin: 0 2rem 0 0;
|
||||
}
|
||||
|
||||
header .wrapper {
|
||||
display: flex;
|
||||
place-items: flex-start;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
nav {
|
||||
text-align: left;
|
||||
margin-left: -1rem;
|
||||
font-size: 1rem;
|
||||
|
||||
padding: 1rem 0;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
<style scoped></style>
|
||||
<style lang="less" scoped>
|
||||
#app {
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,41 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
defineProps<{
|
||||
msg: string
|
||||
}>()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="greetings">
|
||||
<h1 class="green">{{ msg }}</h1>
|
||||
<h3>
|
||||
You’ve successfully created a project with
|
||||
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>. What's next?
|
||||
</h3>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
h1 {
|
||||
font-weight: 500;
|
||||
font-size: 2.6rem;
|
||||
position: relative;
|
||||
top: -10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.greetings h1,
|
||||
.greetings h3 {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import WelcomeItem from './WelcomeItem.vue'
|
||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
||||
import ToolingIcon from './icons/IconTooling.vue'
|
||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
||||
import CommunityIcon from './icons/IconCommunity.vue'
|
||||
import SupportIcon from './icons/IconSupport.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<DocumentationIcon />
|
||||
</template>
|
||||
<template #heading>Documentation</template>
|
||||
|
||||
Vue’s
|
||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
||||
provides you with all information you need to get started.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<ToolingIcon />
|
||||
</template>
|
||||
<template #heading>Tooling</template>
|
||||
|
||||
This project is served and bundled with
|
||||
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
||||
recommended IDE setup is
|
||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
||||
you need to test your components and web pages, check out
|
||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
|
||||
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
|
||||
>Cypress Component Testing</a
|
||||
>.
|
||||
|
||||
<br />
|
||||
|
||||
More instructions are available in <code>README.md</code>.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<EcosystemIcon />
|
||||
</template>
|
||||
<template #heading>Ecosystem</template>
|
||||
|
||||
Get official tools and libraries for your project:
|
||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
||||
you need more resources, we suggest paying
|
||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
||||
a visit.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<CommunityIcon />
|
||||
</template>
|
||||
<template #heading>Community</template>
|
||||
|
||||
Got stuck? Ask your question on
|
||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
|
||||
Discord server, or
|
||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
||||
>StackOverflow</a
|
||||
>. You should also subscribe to
|
||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
|
||||
the official
|
||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
||||
twitter account for latest news in the Vue world.
|
||||
</WelcomeItem>
|
||||
|
||||
<WelcomeItem>
|
||||
<template #icon>
|
||||
<SupportIcon />
|
||||
</template>
|
||||
<template #heading>Support Vue</template>
|
||||
|
||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
||||
us by
|
||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
||||
</WelcomeItem>
|
||||
</template>
|
||||
|
|
@ -1,87 +0,0 @@
|
|||
<template>
|
||||
<div class="item">
|
||||
<i>
|
||||
<slot name="icon"></slot>
|
||||
</i>
|
||||
<div class="details">
|
||||
<h3>
|
||||
<slot name="heading"></slot>
|
||||
</h3>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.item {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.details {
|
||||
flex: 1;
|
||||
margin-left: 1rem;
|
||||
}
|
||||
|
||||
i {
|
||||
display: flex;
|
||||
place-items: center;
|
||||
place-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
|
||||
color: var(--color-text);
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.2rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.4rem;
|
||||
color: var(--color-heading);
|
||||
}
|
||||
|
||||
@media (min-width: 1024px) {
|
||||
.item {
|
||||
margin-top: 0;
|
||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
||||
}
|
||||
|
||||
i {
|
||||
top: calc(50% - 25px);
|
||||
left: -26px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--color-border);
|
||||
background: var(--color-background);
|
||||
border-radius: 8px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.item:before {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:after {
|
||||
content: ' ';
|
||||
border-left: 1px solid var(--color-border);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(50% + 25px);
|
||||
height: calc(50% - 25px);
|
||||
}
|
||||
|
||||
.item:first-of-type:before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.item:last-of-type:after {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
104
src/components/echarts/bar.vue
Normal file
104
src/components/echarts/bar.vue
Normal file
|
|
@ -0,0 +1,104 @@
|
|||
<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 type { AnalysisValidateResult } from 'tdesign-vue/es/form/const'
|
||||
import { onMounted, ref } from 'vue'
|
||||
|
||||
// 定义图表容器引用
|
||||
const barChartRef = ref(null)
|
||||
|
||||
const { categories, seriesData, title, legendList } = defineProps({
|
||||
// 横坐标
|
||||
categories: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 纵坐标
|
||||
seriesData: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 标题
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
// 图例
|
||||
legendList: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
// 宽度
|
||||
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.map((serie: any) => ({
|
||||
...serie,
|
||||
itemStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{ offset: 0, color: '#57c1ff' }, // 填充色开始颜色（可自定义）
|
||||
{ offset: 1, color: '#1a91ff' } // 填充色结束颜色（可自定义）
|
||||
])
|
||||
}
|
||||
}))
|
||||
}
|
||||
|
||||
// 在组件挂载后初始化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 style="display: flex; justify-content: center">
|
||||
<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: '60',
|
||||
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>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
||||
<path
|
||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
||||
<path
|
||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
||||
/>
|
||||
</svg>
|
||||
</template>
|
||||
|
|
@ -1,19 +0,0 @@
|
|||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
||||
<template>
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
aria-hidden="true"
|
||||
role="img"
|
||||
class="iconify iconify--mdi"
|
||||
width="24"
|
||||
height="24"
|
||||
preserveAspectRatio="xMidYMid meet"
|
||||
viewBox="0 0 24 24"
|
||||
>
|
||||
<path
|
||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</template>
|
||||
42
src/components/scarchBox.vue
Normal file
42
src/components/scarchBox.vue
Normal file
|
|
@ -0,0 +1,42 @@
|
|||
<template>
|
||||
<t-row style="width: 100%">
|
||||
<t-col :span="colNum">
|
||||
<t-row :gutter="[24, 24]" style="margin-left: 0.3rem">
|
||||
<slot name="scarchName"> </slot>
|
||||
</t-row>
|
||||
</t-col>
|
||||
<t-col :span="btnNum" class="operation-container">
|
||||
<t-form-item style="margin-right: 1rem">
|
||||
<slot name="scarchBtn"> </slot>
|
||||
</t-form-item>
|
||||
</t-col>
|
||||
</t-row>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { colNum, btnNum } = defineProps({
|
||||
colNum: {
|
||||
type: Number,
|
||||
default: 10
|
||||
},
|
||||
btnNum: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.operation-container {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
|
||||
.expand {
|
||||
.t-button__text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
155
src/layout/components/AsideIndex.vue
Normal file
155
src/layout/components/AsideIndex.vue
Normal file
|
|
@ -0,0 +1,155 @@
|
|||
<template>
|
||||
<div style="height: 100vh; overflow: auto">
|
||||
<t-menu v-model:expanded="expanded" theme="light" default-value="0" expand-mutex :collapsed="collapsed">
|
||||
<template #logo>
|
||||
<img :src="iconUrl" alt="logo" :width="collapsed ? 35 : 136" />
|
||||
</template>
|
||||
<!-- 首页 -->
|
||||
<t-menu-item value="0">
|
||||
<template #icon>
|
||||
<t-icon name="home" />
|
||||
</template>
|
||||
首页
|
||||
</t-menu-item>
|
||||
<!-- 购物 -->
|
||||
<t-submenu value="1">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>购物</span>
|
||||
</template>
|
||||
<t-menu-item value="1-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="1-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="1-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 销货 -->
|
||||
<t-submenu value="2">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>销货</span>
|
||||
</template>
|
||||
<t-menu-item value="2-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="2-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="2-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 仓库 -->
|
||||
<t-submenu value="3">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>仓库</span>
|
||||
</template>
|
||||
<t-menu-item value="3-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="3-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 资金 -->
|
||||
<t-submenu value="4">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>资金</span>
|
||||
</template>
|
||||
<t-menu-item value="4-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="4-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="4-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 报表 -->
|
||||
<t-submenu value="5">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>报表</span>
|
||||
</template>
|
||||
<t-menu-item value="5-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="5-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="5-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 商品 -->
|
||||
<t-submenu value="6">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>商品</span>
|
||||
</template>
|
||||
<t-menu-item value="6-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="6-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="6-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 资料 -->
|
||||
<t-submenu value="7">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>资料</span>
|
||||
</template>
|
||||
<t-menu-item value="7-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="7-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="7-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 系统 -->
|
||||
<t-submenu value="8">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>系统</span>
|
||||
</template>
|
||||
<t-menu-item value="8-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="8-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="8-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<!-- 配置 -->
|
||||
<t-submenu value="9">
|
||||
<template #icon>
|
||||
<t-icon name="play-circle" />
|
||||
</template>
|
||||
<template #title>
|
||||
<span>配置</span>
|
||||
</template>
|
||||
<t-menu-item value="9-1"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="9-2"> 二级菜单内容 </t-menu-item>
|
||||
<t-menu-item value="9-3"> 二级菜单内容 </t-menu-item>
|
||||
</t-submenu>
|
||||
<template #operations>
|
||||
<t-button variant="text" shape="square" @click="changeCollapsed">
|
||||
<template #icon><t-icon name="view-list" /></template>
|
||||
</t-button>
|
||||
</template>
|
||||
</t-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import type { MenuProps, ButtonProps } from 'tdesign-vue-next'
|
||||
const collapsed = ref(false)
|
||||
const iconUrl = ref('https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png')
|
||||
const changeCollapsed: ButtonProps['onClick'] = () => {
|
||||
collapsed.value = !collapsed.value
|
||||
iconUrl.value = collapsed.value
|
||||
? 'https://oteam-tdesign-1258344706.cos.ap-guangzhou.myqcloud.com/site/logo%402x.png'
|
||||
: 'https://tdesign.gtimg.com/site/baseLogo-light.png'
|
||||
}
|
||||
|
||||
const expanded = ref<MenuProps['expanded']>(['2', '3'])
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.t-demo-collapse-btn {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: #4b4b4b;
|
||||
border-color: transparent;
|
||||
--ripple-color: #383838;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
16
src/layout/components/ContentIndex.vue
Normal file
16
src/layout/components/ContentIndex.vue
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<template>
|
||||
<div>
|
||||
<t-layout>
|
||||
<t-header><HeaderIndex /></t-header>
|
||||
<t-content><RouterView /></t-content>
|
||||
<t-footer>Footer</t-footer>
|
||||
</t-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { RouterView } from 'vue-router'
|
||||
import HeaderIndex from '@/layout/components/HeaderIndex.vue'
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
36
src/layout/components/HeaderIndex.vue
Normal file
36
src/layout/components/HeaderIndex.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div class="box" :style="{ width: '800px' }">
|
||||
<t-button variant="text" shape="square">
|
||||
<template #icon><t-icon name="search" /></template>
|
||||
</t-button>
|
||||
<t-button variant="text" shape="square">
|
||||
<template #icon><t-icon name="mail" /></template>
|
||||
</t-button>
|
||||
<t-button variant="text" shape="square">
|
||||
<template #icon><t-icon name="user" /></template>
|
||||
</t-button>
|
||||
<t-button variant="text" shape="square">
|
||||
<template #icon><t-icon name="ellipsis" /></template>
|
||||
</t-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts"></script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.t-menu__operations {
|
||||
.t-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
.t-demo-menu--dark {
|
||||
.t-button {
|
||||
color: #fff;
|
||||
&:hover {
|
||||
background-color: #4b4b4b;
|
||||
border-color: transparent;
|
||||
--ripple-color: #383838;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
26
src/layout/index.vue
Normal file
26
src/layout/index.vue
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
<template>
|
||||
<t-layout>
|
||||
<AsideIndex />
|
||||
<t-layout>
|
||||
<t-content><ContentIndex /></t-content>
|
||||
</t-layout>
|
||||
</t-layout>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import AsideIndex from '@/layout/components/AsideIndex.vue'
|
||||
|
||||
import ContentIndex from './components/ContentIndex.vue'
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.t-layout {
|
||||
flex-direction: row;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'LayoutIndex'
|
||||
}
|
||||
</script>
|
||||
23
src/main.ts
23
src/main.ts
|
|
@ -1,14 +1,19 @@
|
|||
import './assets/main.css'
|
||||
import "./style/index.css";
|
||||
|
||||
import { createApp } from 'vue'
|
||||
import { createPinia } from 'pinia'
|
||||
import { createApp } from "vue";
|
||||
import { createPinia } from "pinia";
|
||||
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
|
||||
import TDesign from "tdesign-vue-next";
|
||||
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import App from "./App.vue";
|
||||
import router from "./router";
|
||||
|
||||
const app = createApp(App)
|
||||
const app = createApp(App);
|
||||
|
||||
app.use(createPinia())
|
||||
app.use(router)
|
||||
const pinia = createPinia();
|
||||
pinia.use(piniaPluginPersistedstate);
|
||||
app.use(pinia);
|
||||
app.use(router);
|
||||
app.use(TDesign);
|
||||
|
||||
app.mount('#app')
|
||||
app.mount("#app");
|
||||
|
|
|
|||
7
src/papes/ShiYan.vue
Normal file
7
src/papes/ShiYan.vue
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<template>
|
||||
<div>1</div>
|
||||
</template>
|
||||
|
||||
<script setup></script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -1,21 +1,22 @@
|
|||
import { createRouter, createWebHistory } from 'vue-router'
|
||||
import HomeView from '../views/HomeView.vue'
|
||||
import Layout from '@/layout/index.vue'
|
||||
import HomeView from '@/views/home/index.vue'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHistory(import.meta.env.BASE_URL),
|
||||
routes: [
|
||||
{
|
||||
path: '/',
|
||||
redirect: '/home',
|
||||
name: 'home',
|
||||
component: HomeView
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
// route level code-splitting
|
||||
// this generates a separate chunk (About.[hash].js) for this route
|
||||
// which is lazy-loaded when the route is visited.
|
||||
component: () => import('../views/AboutView.vue')
|
||||
component: Layout,
|
||||
children: [
|
||||
{
|
||||
path: '/home',
|
||||
name: '首页',
|
||||
component: HomeView,
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,12 +0,0 @@
|
|||
import { ref, computed } from 'vue'
|
||||
import { defineStore } from 'pinia'
|
||||
|
||||
export const useCounterStore = defineStore('counter', () => {
|
||||
const count = ref(0)
|
||||
const doubleCount = computed(() => count.value * 2)
|
||||
function increment() {
|
||||
count.value++
|
||||
}
|
||||
|
||||
return { count, doubleCount, increment }
|
||||
})
|
||||
9
src/stores/index.ts
Normal file
9
src/stores/index.ts
Normal file
|
|
@ -0,0 +1,9 @@
|
|||
import { createPinia } from "pinia";
|
||||
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
|
||||
|
||||
const store = createPinia();
|
||||
store.use(piniaPluginPersistedstate);
|
||||
|
||||
export { store };
|
||||
|
||||
export default store;
|
||||
211
src/style/index.css
Normal file
211
src/style/index.css
Normal file
|
|
@ -0,0 +1,211 @@
|
|||
/**
|
||||
* ENGINE
|
||||
* v0.2 | 20150615
|
||||
* License: none (public domain)
|
||||
*/
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
border: 0;
|
||||
}
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before,
|
||||
q:before,
|
||||
blockquote:after,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
font-family: inhert;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
select {
|
||||
text-indent: 0.01px;
|
||||
text-overflow: '';
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
code,
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-track {
|
||||
width: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: #e5e5e5;
|
||||
}
|
||||
.t-default-menu__inner .t-menu--scroll {
|
||||
background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
|
||||
}
|
||||
.back-color {
|
||||
background-color: #f5f7fb;
|
||||
padding: 16px 24px;
|
||||
height: calc(91vh - 64px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
a,
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
.t-button--variant-text .t-button__text {
|
||||
color: #0052d9;
|
||||
}
|
||||
.t-button--variant-text .t-button__text:hover {
|
||||
color: #8799a3;
|
||||
}
|
||||
.t-is-disabled .t-button__text {
|
||||
color: #d3d3d3 !important;
|
||||
}
|
||||
.form-item-width {
|
||||
width: 100%;
|
||||
}
|
||||
60
src/style/index.less
Normal file
60
src/style/index.less
Normal file
|
|
@ -0,0 +1,60 @@
|
|||
// 引入清除模式样式
|
||||
@import './reset.less';
|
||||
@import './variables.less';
|
||||
|
||||
// 滚动条外观样式
|
||||
::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
width: 10px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
border-radius: 8px;
|
||||
box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
||||
background: @base-scrollbar-color;
|
||||
}
|
||||
|
||||
.t-default-menu__inner .t-menu--scroll {
|
||||
background-image: linear-gradient(#fff, rgba(146, 146, 255, 0.2));
|
||||
}
|
||||
|
||||
// 主体背景颜色以及大小
|
||||
.back-color {
|
||||
background-color: #f5f7fb;
|
||||
padding: 16px 24px;
|
||||
height: calc(91vh - 64px);
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
// 去除a标签默认样式
|
||||
a,
|
||||
a:link,
|
||||
a:visited,
|
||||
a:hover,
|
||||
a:active {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// 改变文字按钮的颜色
|
||||
.t-button--variant-text .t-button__text {
|
||||
color: @base-text-color;
|
||||
}
|
||||
|
||||
// 改变文字按钮移入的颜色
|
||||
.t-button--variant-text .t-button__text:hover {
|
||||
color: #8799a3;
|
||||
}
|
||||
// 禁用的颜色
|
||||
.t-is-disabled .t-button__text {
|
||||
color: #d3d3d3 !important;
|
||||
}
|
||||
|
||||
// 查询框宽度
|
||||
.form-item-width {
|
||||
width: 100%;
|
||||
}
|
||||
170
src/style/reset.css
Normal file
170
src/style/reset.css
Normal file
|
|
@ -0,0 +1,170 @@
|
|||
/**
|
||||
* ENGINE
|
||||
* v0.2 | 20150615
|
||||
* License: none (public domain)
|
||||
*/
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: border-box;
|
||||
outline: none;
|
||||
}
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
vertical-align: baseline;
|
||||
border: 0;
|
||||
}
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
}
|
||||
blockquote:before,
|
||||
q:before,
|
||||
blockquote:after,
|
||||
q:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
font-family: inhert;
|
||||
font-size: inherit;
|
||||
color: inherit;
|
||||
}
|
||||
select {
|
||||
text-indent: 0.01px;
|
||||
text-overflow: '';
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
code,
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
188
src/style/reset.less
Normal file
188
src/style/reset.less
Normal file
|
|
@ -0,0 +1,188 @@
|
|||
/**
|
||||
* ENGINE
|
||||
* v0.2 | 20150615
|
||||
* License: none (public domain)
|
||||
*/
|
||||
|
||||
*,
|
||||
*:after,
|
||||
*:before {
|
||||
box-sizing: border-box;
|
||||
|
||||
outline: none;
|
||||
}
|
||||
|
||||
html,
|
||||
body,
|
||||
div,
|
||||
span,
|
||||
applet,
|
||||
object,
|
||||
iframe,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p,
|
||||
blockquote,
|
||||
pre,
|
||||
a,
|
||||
abbr,
|
||||
acronym,
|
||||
address,
|
||||
big,
|
||||
cite,
|
||||
code,
|
||||
del,
|
||||
dfn,
|
||||
em,
|
||||
img,
|
||||
ins,
|
||||
kbd,
|
||||
q,
|
||||
s,
|
||||
samp,
|
||||
small,
|
||||
strike,
|
||||
strong,
|
||||
sub,
|
||||
sup,
|
||||
tt,
|
||||
var,
|
||||
b,
|
||||
u,
|
||||
i,
|
||||
center,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ol,
|
||||
ul,
|
||||
li,
|
||||
fieldset,
|
||||
form,
|
||||
label,
|
||||
legend,
|
||||
table,
|
||||
caption,
|
||||
tbody,
|
||||
tfoot,
|
||||
thead,
|
||||
tr,
|
||||
th,
|
||||
td,
|
||||
article,
|
||||
aside,
|
||||
canvas,
|
||||
details,
|
||||
embed,
|
||||
figure,
|
||||
figcaption,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
output,
|
||||
ruby,
|
||||
section,
|
||||
summary,
|
||||
time,
|
||||
mark,
|
||||
audio,
|
||||
video {
|
||||
font: inherit;
|
||||
font-size: 100%;
|
||||
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
vertical-align: baseline;
|
||||
|
||||
border: 0;
|
||||
}
|
||||
|
||||
article,
|
||||
aside,
|
||||
details,
|
||||
figcaption,
|
||||
figure,
|
||||
footer,
|
||||
header,
|
||||
hgroup,
|
||||
menu,
|
||||
nav,
|
||||
section {
|
||||
display: block;
|
||||
}
|
||||
|
||||
body {
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
blockquote,
|
||||
q {
|
||||
quotes: none;
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
content: none;
|
||||
}
|
||||
}
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
|
||||
position: relative;
|
||||
|
||||
vertical-align: baseline;
|
||||
}
|
||||
sup {
|
||||
top: -.5em;
|
||||
}
|
||||
sub {
|
||||
bottom: -.25em;
|
||||
}
|
||||
|
||||
table {
|
||||
border-spacing: 0;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea,
|
||||
button {
|
||||
font-family: inhert;
|
||||
font-size: inherit;
|
||||
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
select {
|
||||
text-indent: .01px;
|
||||
text-overflow: '';
|
||||
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
|
||||
-webkit-appearance: none;
|
||||
-moz-appearance: none;
|
||||
}
|
||||
select::-ms-expand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
code,
|
||||
pre {
|
||||
font-family: monospace, monospace;
|
||||
font-size: 1em;
|
||||
}
|
||||
0
src/style/variables.css
Normal file
0
src/style/variables.css
Normal file
14
src/style/variables.less
Normal file
14
src/style/variables.less
Normal file
|
|
@ -0,0 +1,14 @@
|
|||
// 设置less全局变量
|
||||
|
||||
// 左侧的菜单的宽度
|
||||
@base-menu-width: 260px;
|
||||
// 左侧菜单的背景颜色
|
||||
@base-menu-background: rgb(229, 229, 229);
|
||||
// 顶部导航高度b
|
||||
@base-tabbar-height: 50px;
|
||||
// 公用颜色
|
||||
@base-white-color: #fff;
|
||||
// text按钮的颜色
|
||||
@base-text-color: #0052d9;
|
||||
// 滚动条的颜色
|
||||
@base-scrollbar-color: rgb(229, 229, 229);
|
||||
|
|
@ -1,9 +0,0 @@
|
|||
<script setup lang="ts">
|
||||
import TheWelcome from '../components/TheWelcome.vue'
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<main>
|
||||
<TheWelcome />
|
||||
</main>
|
||||
</template>
|
||||
207
src/views/home/components/homeCenter.vue
Normal file
207
src/views/home/components/homeCenter.vue
Normal file
|
|
@ -0,0 +1,207 @@
|
|||
<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="'78rem'"
|
||||
/>
|
||||
<line-chart
|
||||
v-else-if="title === '购货退货单'"
|
||||
:categories="categories"
|
||||
:seriesData="seriesData"
|
||||
:titleP="title"
|
||||
:legendList="legendList"
|
||||
:height="'80%'"
|
||||
:width="'78rem'"
|
||||
/>
|
||||
<line-chart
|
||||
v-else-if="title === '销货出库单'"
|
||||
:categories="categories"
|
||||
:seriesData="seriesData"
|
||||
:titleP="title"
|
||||
:legendList="legendList"
|
||||
:height="'80%'"
|
||||
:width="'78rem'"
|
||||
/>
|
||||
<line-chart
|
||||
v-else-if="title === '销货退货单'"
|
||||
:categories="categories"
|
||||
:seriesData="seriesData"
|
||||
:titleP="title"
|
||||
:legendList="legendList"
|
||||
:height="'80%'"
|
||||
:width="'78rem'"
|
||||
/>
|
||||
<line-chart
|
||||
v-else-if="title === '收款单'"
|
||||
:categories="categories"
|
||||
:seriesData="seriesData"
|
||||
:titleP="title"
|
||||
:legendList="legendList"
|
||||
:height="'80%'"
|
||||
:width="'78rem'"
|
||||
/>
|
||||
<line-chart
|
||||
v-else-if="title === '付款单'"
|
||||
:categories="categories"
|
||||
:seriesData="seriesData"
|
||||
:titleP="title"
|
||||
:legendList="legendList"
|
||||
:height="'80%'"
|
||||
:width="'78rem'"
|
||||
/>
|
||||
<pie
|
||||
v-else-if="title === '库存数据'"
|
||||
:titleP="title"
|
||||
:dataP="data"
|
||||
:height="'15rem'"
|
||||
:width="'40rem'"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import lineChart from '@/components/echarts/line.vue'
|
||||
import pie from '@/components/echarts/pie.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 data = ref([
|
||||
{ value: 50, name: '上午' },
|
||||
{ value: 50, name: '下午' },
|
||||
{ value: 100, name: '晚上' },
|
||||
{ value: 200, name: '睡觉' }
|
||||
])
|
||||
const circleClassList = ref([
|
||||
{
|
||||
color: '#5e5e5e',
|
||||
judge: true
|
||||
},
|
||||
{
|
||||
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>
|
||||
151
src/views/home/components/homeFooter.vue
Normal file
151
src/views/home/components/homeFooter.vue
Normal file
|
|
@ -0,0 +1,151 @@
|
|||
<template>
|
||||
<div class="centerC">
|
||||
<div class="center-pie">
|
||||
<div class="title_class">
|
||||
<span>资产数据</span>
|
||||
</div>
|
||||
<t-divider />
|
||||
<div class="content">
|
||||
<div class="allMoney">
|
||||
<span>{{ '总资产' }}</span>
|
||||
<span style="font-size: 20px; font-weight: 700; color: #606266">{{
|
||||
'6224972.1353'
|
||||
}}</span>
|
||||
</div>
|
||||
<div v-for="(item, index) in MoneyList" :key="index">
|
||||
<div class="portionMoney">
|
||||
<div :style="{ background: item.color }"></div>
|
||||
<span style="margin: 0 3rem 0 0.5rem">{{ item.name }}</span>
|
||||
<span>{{ item.money }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="center-bar">
|
||||
<div class="title_class">
|
||||
<span>资金数据</span>
|
||||
</div>
|
||||
<t-divider />
|
||||
<bar
|
||||
:categories="categories"
|
||||
:seriesData="seriesData"
|
||||
:title="titlebar"
|
||||
:legendList="legendList"
|
||||
:height="'80%'"
|
||||
:width="'57rem'"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
|
||||
import bar from '@/components/echarts/bar.vue'
|
||||
|
||||
const MoneyList = ref([
|
||||
{
|
||||
color: '#2196f3',
|
||||
name: '资金余额',
|
||||
money: '-2351917.2039'
|
||||
},
|
||||
{
|
||||
color: '#4caf50',
|
||||
name: '库存成本',
|
||||
money: '8333528.3592'
|
||||
},
|
||||
{
|
||||
color: '#f44336',
|
||||
name: '应收欠款',
|
||||
money: '183346.98'
|
||||
},
|
||||
{
|
||||
color: '#ff9800',
|
||||
name: '应付欠款',
|
||||
money: '-60014'
|
||||
}
|
||||
])
|
||||
|
||||
const titlebar = ref('资金')
|
||||
|
||||
const categories = ref([
|
||||
'一月',
|
||||
'二月',
|
||||
'三月',
|
||||
'四月',
|
||||
'五月',
|
||||
'六月',
|
||||
'七月',
|
||||
'八月',
|
||||
'九月',
|
||||
'十月',
|
||||
'十一月',
|
||||
'十二月'
|
||||
])
|
||||
const legendList = ['类别A']
|
||||
const seriesData = ref([
|
||||
{
|
||||
name: '类别A',
|
||||
type: 'bar',
|
||||
data: [-1000, 1200, 1400, 1500, 1600, 1800, 1700, 1900, 2000, 2200, 2300, 2500]
|
||||
}
|
||||
])
|
||||
</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: 30%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
.center-bar {
|
||||
width: 68%;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
.title_class {
|
||||
padding: 0 1rem;
|
||||
height: 3rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
height: 80%;
|
||||
padding: 0 1rem;
|
||||
.allMoney {
|
||||
height: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
}
|
||||
.portionMoney {
|
||||
width: 100%;
|
||||
height: 2.5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
div {
|
||||
width: 0.2rem;
|
||||
height: 2rem;
|
||||
background-color: aqua;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
:deep(.t-divider) {
|
||||
margin: 0 0 1rem 0;
|
||||
}
|
||||
</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>
|
||||
64
src/views/home/index.vue
Normal file
64
src/views/home/index.vue
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
<template>
|
||||
<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"></t-aside>
|
||||
</t-layout>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<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">
|
||||
export default {
|
||||
name: 'homeIndex'
|
||||
}
|
||||
</script>
|
||||
|
||||
<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