mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-09-17 01:04:21 +08:00
feat: upgrade the third phase of the component
This commit is contained in:
pengYYYYY
parent
9811a061b6
commit
7282a8a48d
12
.gitignore
vendored
12
.gitignore
vendored
|
|
@ -17,15 +17,7 @@ coverage
|
|||
test-report.html
|
||||
.idea/
|
||||
yarn.lock
|
||||
yarn-error.log
|
||||
*.zip
|
||||
.history
|
||||
script/test/cypress/screenshots
|
||||
script/test/cypress/videos
|
||||
script/test/cypress/results
|
||||
script/test/cypress/support
|
||||
results/
|
||||
yarn-error.log
|
||||
cypress
|
||||
cypress.json
|
||||
Dockerfile
|
||||
robotMsg.json
|
||||
.stylelintcache
|
||||
|
|
|
|||
8
.stylelintignore
Normal file
8
.stylelintignore
Normal file
|
|
@ -0,0 +1,8 @@
|
|||
# .stylelintignore
|
||||
# 旧的不需打包的样式库
|
||||
*.min.css
|
||||
|
||||
# 其他类型文件
|
||||
*.js
|
||||
*.jpg
|
||||
*.woff
|
||||
|
|
@ -1,10 +1,7 @@
|
|||
<template>
|
||||
<div :class="containerCls">
|
||||
<div
|
||||
v-show="title || describe"
|
||||
class="card-title"
|
||||
>
|
||||
<span>
|
||||
<div :class="titleCls">
|
||||
<span :class="titleTextCls">
|
||||
{{ title }}
|
||||
<span
|
||||
v-if="describe"
|
||||
|
|
@ -18,42 +15,87 @@
|
|||
<div class="card-content">
|
||||
<slot />
|
||||
</div>
|
||||
<div
|
||||
v-if="size !== 'small'"
|
||||
class="card-spacer-bottom"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, PropType, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Card',
|
||||
props: {
|
||||
title: String,
|
||||
title: String as PropType<string>,
|
||||
compact: {
|
||||
type: Boolean,
|
||||
type: Boolean as PropType<boolean>,
|
||||
default: false,
|
||||
},
|
||||
describe: String,
|
||||
},
|
||||
computed: {
|
||||
containerCls() {
|
||||
return ['card-container', { 'card-container-compact': this.compact }];
|
||||
describe: String as PropType<string>,
|
||||
size: {
|
||||
type: String as PropType<string>,
|
||||
default: 'default',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const containerCls = computed(() => {
|
||||
const { compact } = props;
|
||||
return ['card-container', { 'card-container-compact': compact }];
|
||||
});
|
||||
|
||||
const titleCls = computed(() => {
|
||||
const { size } = props;
|
||||
return [
|
||||
'card-title',
|
||||
{
|
||||
'card-title-small': size === 'small',
|
||||
'card-title-default': size !== 'small',
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const titleTextCls = computed(() => {
|
||||
const { size } = props;
|
||||
return [
|
||||
{
|
||||
'card-title-text-small': size === 'small',
|
||||
'card-title-text-default': size !== 'small',
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
return {
|
||||
containerCls,
|
||||
titleCls,
|
||||
titleTextCls,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('@/style/index.less');
|
||||
|
||||
.t-col > .card-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.card {
|
||||
|
||||
&-option {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
&-container {
|
||||
padding: 24px;
|
||||
padding: 24px 32px;
|
||||
margin: 16px 0;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
&-compact {
|
||||
padding: 16px 16px 0;
|
||||
|
|
@ -65,17 +107,32 @@ export default defineComponent({
|
|||
&-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-family: PingFangSC-Medium;
|
||||
margin-bottom: 16px;
|
||||
font-size: 20px;
|
||||
line-height: 22px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-weight: 500;
|
||||
color: @text-level-1-color;
|
||||
color: @text-color-primary;
|
||||
|
||||
&-small {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
&-default {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
&-text {
|
||||
display: inline-flex;
|
||||
|
||||
&-default {
|
||||
margin: @spacer 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-describe {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
color: rgba(0, 0, 0, .6);
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
|
|
@ -83,6 +140,11 @@ export default defineComponent({
|
|||
display: flex;
|
||||
justify-content: space-between;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&-spacer-bottom {
|
||||
height: @spacer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
36
src/components/color.vue
Normal file
36
src/components/color.vue
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div
|
||||
:style="style"
|
||||
class="color-container"
|
||||
/>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { computed, defineComponent } from 'vue';
|
||||
import { getBrandColor } from '@/config/color';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Color',
|
||||
props: {
|
||||
value: {
|
||||
type: String,
|
||||
default: 'default',
|
||||
},
|
||||
},
|
||||
setup(props) {
|
||||
const style = computed(() => {
|
||||
const { value } = props;
|
||||
return {
|
||||
backgroundColor: getBrandColor(value)['@brand-color'],
|
||||
};
|
||||
});
|
||||
return { style };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.color-container {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -27,6 +27,7 @@
|
|||
<script lang="ts">
|
||||
import { defineComponent, PropType } from 'vue';
|
||||
import Card from '@/components/card/index.vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Result',
|
||||
components: { Card },
|
||||
|
|
@ -44,7 +45,9 @@ export default defineComponent({
|
|||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('@/style/index.less');
|
||||
|
||||
.result {
|
||||
|
||||
&-link {
|
||||
color: @primary-color;
|
||||
text-decoration: none;
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue';
|
||||
import { defineComponent, computed } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Thumbnail',
|
||||
|
|
@ -19,22 +19,26 @@ export default defineComponent({
|
|||
default: 'layout',
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
className() {
|
||||
setup(props) {
|
||||
const className = computed(() => {
|
||||
const { type } = props;
|
||||
return [
|
||||
'thumbnail-container',
|
||||
{
|
||||
'thumbnail-circle': this.type === 'circle',
|
||||
'thumbnail-layout': this.type === 'layout',
|
||||
'thumbnail-circle': type === 'circle',
|
||||
'thumbnail-layout': type === 'layout',
|
||||
},
|
||||
];
|
||||
},
|
||||
});
|
||||
return { className };
|
||||
},
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
@import url('@/style/index.less');
|
||||
|
||||
.thumbnail {
|
||||
|
||||
&-container {
|
||||
display: inline-block;
|
||||
}
|
||||
|
|
|
|||
132
src/components/trend/index.vue
Normal file
132
src/components/trend/index.vue
Normal file
|
|
@ -0,0 +1,132 @@
|
|||
<template>
|
||||
<span :class="containerCls">
|
||||
<span :class="iconCls">
|
||||
<svg
|
||||
v-if="type === 'up'"
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.5 8L8 11.5L4.5 8"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M8 11L8 4"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
</svg>
|
||||
<svg
|
||||
v-else
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.5 8L8 4.5L11.5 8"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
<path
|
||||
d="M8 5V12"
|
||||
stroke="currentColor"
|
||||
stroke-width="1.5"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>{{ describe }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<script lang="ts">
|
||||
import { defineComponent, computed, PropType } from 'vue';
|
||||
|
||||
export default defineComponent({
|
||||
name: 'Trend',
|
||||
props: {
|
||||
type: String as PropType<string>,
|
||||
describe: [String, Number] as PropType<string | number>,
|
||||
isReverseColor: Boolean as PropType<boolean>,
|
||||
},
|
||||
setup(props) {
|
||||
const containerCls = computed(() => {
|
||||
const { isReverseColor, type } = props;
|
||||
return [
|
||||
'trend-container',
|
||||
{
|
||||
'trend-container__reverse': isReverseColor,
|
||||
'trend-container__up': !isReverseColor && type === 'up',
|
||||
'trend-container__down': !isReverseColor && type === 'down',
|
||||
},
|
||||
];
|
||||
});
|
||||
|
||||
const iconCls = computed(() => ['trend-icon-container']);
|
||||
|
||||
return {
|
||||
containerCls,
|
||||
iconCls,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('@/style/index.less');
|
||||
|
||||
.trend {
|
||||
|
||||
&-container {
|
||||
|
||||
&__up {
|
||||
color: #e34d59 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.trend-icon-container {
|
||||
background: #f9d7d9;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__down {
|
||||
color: #00a870 !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.trend-icon-container {
|
||||
background: #bcebdc;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&__reverse {
|
||||
color: #ffffff !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
.trend-icon-container {
|
||||
background: @brand-color-5;
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.trend-icon-container {
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
106
src/config/color.ts
Normal file
106
src/config/color.ts
Normal file
|
|
@ -0,0 +1,106 @@
|
|||
type ColorToken = Record<string, string>;
|
||||
|
||||
const BLUE_GREY_TOKEN: ColorToken = {
|
||||
'@gray-color-1': '#F1F2F5',
|
||||
'@gray-color-2': '#EBEDF1',
|
||||
'@gray-color-3': '#E3E6EB',
|
||||
'@gray-color-4': '#D6DBE3',
|
||||
'@gray-color-5': '#BCC4D0',
|
||||
'@gray-color-6': '#97A3B7',
|
||||
'@gray-color-7': '#7787A2',
|
||||
'@gray-color-8': '#5F7292',
|
||||
'@gray-color-9': '#4B5B76',
|
||||
'@gray-color-10': '#3C485C',
|
||||
'@gray-color-11': '#2C3645',
|
||||
'@gray-color-12': '#232A35',
|
||||
'@gray-color-13': '#1C222B',
|
||||
'@gray-color-14': '#13161B',
|
||||
};
|
||||
|
||||
const NEUTRAL_GREY_TOKEN: ColorToken = {
|
||||
'@gray-color-1': '#F3F3F3',
|
||||
'@gray-color-2': '#EEEEEE',
|
||||
'@gray-color-3': '#E7E7E7',
|
||||
'@gray-color-4': '#DCDCDC',
|
||||
'@gray-color-5': '#C5C5C5',
|
||||
'@gray-color-6': '#A6A6A6',
|
||||
'@gray-color-7': '#8B8B8B',
|
||||
'@gray-color-8': '#777777',
|
||||
'@gray-color-9': '#5E5E5E',
|
||||
'@gray-color-10': '#4B4B4B',
|
||||
'@gray-color-11': '#383838',
|
||||
'@gray-color-12': '#2C2C2C',
|
||||
'@gray-color-13': '#242424',
|
||||
'@gray-color-14': '#181818',
|
||||
};
|
||||
const DEFAULT_TOKEN: ColorToken = {
|
||||
'@brand-color': '#0052D9',
|
||||
'@brand-color-1': '#ECF2FE',
|
||||
'@brand-color-2': '#D4E3FC',
|
||||
'@brand-color-3': '#BBD3FB',
|
||||
'@brand-color-4': '#96BBF8',
|
||||
'@brand-color-5': '#699EF5',
|
||||
'@brand-color-6': '#4787F0',
|
||||
'@brand-color-7': '#266FE8',
|
||||
'@brand-color-8': '#0052D9',
|
||||
'@brand-color-9': '#0034B5',
|
||||
'@brand-color-10': '#001F97',
|
||||
};
|
||||
|
||||
const PURPLE_TOKEN: ColorToken = {
|
||||
'@brand-color': '#834ec2',
|
||||
'@brand-color-1': '#f3e0ff',
|
||||
'@brand-color-2': '#e6c4ff',
|
||||
'@brand-color-3': '#d8abff',
|
||||
'@brand-color-4': '#c68cff',
|
||||
'@brand-color-5': '#ae78f0',
|
||||
'@brand-color-6': '#9963d8',
|
||||
'@brand-color-7': '#834ec2',
|
||||
'@brand-color-8': '#6d3bac',
|
||||
'@brand-color-9': '#572796',
|
||||
'@brand-color-10': '#421381',
|
||||
};
|
||||
|
||||
const YELLOW_TOKEN: ColorToken = {
|
||||
'@brand-color': '#ebb105',
|
||||
'@brand-color-1': '#fff8b8',
|
||||
'@brand-color-2': '#ffe478',
|
||||
'@brand-color-3': '#fbca25',
|
||||
'@brand-color-4': '#ebb105',
|
||||
'@brand-color-5': '#d29c00',
|
||||
'@brand-color-6': '#ba8700',
|
||||
'@brand-color-7': '#a37200',
|
||||
'@brand-color-8': '#8c5f00',
|
||||
'@brand-color-9': '#754c00',
|
||||
'@brand-color-10': '#5e3a00',
|
||||
};
|
||||
|
||||
export function getGreyColor(type: string): ColorToken {
|
||||
if (type === 'blueGrey') {
|
||||
return BLUE_GREY_TOKEN;
|
||||
}
|
||||
if (type === 'neutralGrey') {
|
||||
return NEUTRAL_GREY_TOKEN;
|
||||
}
|
||||
|
||||
return {};
|
||||
}
|
||||
|
||||
export function getBrandColor(type: string): ColorToken {
|
||||
if (type === 'yellow') {
|
||||
return YELLOW_TOKEN;
|
||||
}
|
||||
|
||||
if (type === 'purple') {
|
||||
return PURPLE_TOKEN;
|
||||
}
|
||||
|
||||
return DEFAULT_TOKEN;
|
||||
}
|
||||
|
||||
export function getColorList(colorArray: ColorToken[]): string[] {
|
||||
const pureColorList = [];
|
||||
colorArray.map(colorToken => Object.keys(colorToken).map(key => pureColorList.push(colorToken[key])));
|
||||
|
||||
return pureColorList;
|
||||
}
|
||||
|
|
@ -9,4 +9,6 @@ export default {
|
|||
isSidebarFixed: true,
|
||||
isHeaderFixed: true,
|
||||
showHeader: true,
|
||||
backgroundTheme: 'blueGrey',
|
||||
brandTheme: 'default',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,19 +1,10 @@
|
|||
@import '@/style/index';
|
||||
|
||||
@media (max-width: @screen-md-max) {
|
||||
.dashboard-panel .t-col-3 {
|
||||
min-width: 50%;
|
||||
&:first-child {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-panel .t-col {
|
||||
.card-container {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
}
|
||||
|
|
@ -23,127 +14,63 @@
|
|||
border-radius: @border-radius;
|
||||
|
||||
.card-container {
|
||||
|
||||
.card-content {
|
||||
|
||||
&-label-title {
|
||||
color: @text-color-primary;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
}
|
||||
.t-table th, .t-table td {
|
||||
|
||||
.t-table th,
|
||||
.t-table td {
|
||||
padding: 10px 8px;
|
||||
}
|
||||
|
||||
.t-table tr {
|
||||
color: @text-color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-item-perfix {
|
||||
margin-right: 0 !important;
|
||||
.dashboard-item-perfix {
|
||||
margin-right: 0 !important;
|
||||
}
|
||||
|
||||
|
||||
.dashboard-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
|
||||
.dashboard-item-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
|
||||
|
||||
> span {
|
||||
display: inline-block;
|
||||
color: black;
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-item-bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
|
||||
> .t-icon {
|
||||
cursor: pointer;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
|
||||
.dashboard-item-bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
|
||||
.dashboard-item-bottom-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items:flex-start;
|
||||
|
||||
&-unit {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.90);
|
||||
padding-left: 4px;
|
||||
padding-top: 17px;
|
||||
}
|
||||
|
||||
&-number {
|
||||
display: inline-block;
|
||||
color: black;
|
||||
font-size: 36px;
|
||||
line-height: 44px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-item-bottom-right {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
height: 55px;
|
||||
|
||||
.dashboard-item-bottom-emergency {
|
||||
width: 96px;
|
||||
height: 32px;
|
||||
background: #FFE9E9;
|
||||
border-radius: 16px;
|
||||
font-size: 14px;
|
||||
color: #E34D59;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.dashboard-item-bottom-right-top {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
padding-right: 8px;
|
||||
}
|
||||
div {
|
||||
height: 24px;
|
||||
// font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 14px;
|
||||
|
||||
> span {
|
||||
color: #00A870;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dashboard-item-bottom-right-bottom {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
h1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
padding-right: 8px;
|
||||
}
|
||||
div {
|
||||
height: 24px;
|
||||
background: #FFE9E9;
|
||||
border-radius: @border-radius;
|
||||
color: #E34D59;
|
||||
// font-weight: bold;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 1px 8px;
|
||||
|
||||
.t-icon-caret-up {
|
||||
margin-left: 5px !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
|
@ -212,6 +139,7 @@
|
|||
padding-top: 16px;
|
||||
|
||||
li {
|
||||
|
||||
.dashboard-chart-tend-item-title {
|
||||
color: grey !important;
|
||||
}
|
||||
|
|
@ -233,6 +161,7 @@
|
|||
.dashboard-chart-tend-left {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
.dashboard-chart-tend-num {
|
||||
width: 48px;
|
||||
}
|
||||
|
|
@ -257,11 +186,13 @@
|
|||
|
||||
&-describe {
|
||||
font-size: 14px !important;
|
||||
color: rgba(0,0,0,0.60) !important;
|
||||
color: rgba(0,0,0,.60) !important;
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
&-container {
|
||||
|
||||
.t-date-picker {
|
||||
width: 240px;
|
||||
}
|
||||
|
|
@ -269,7 +200,7 @@
|
|||
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: rgba(0,0,0,0.90);
|
||||
color: rgba(0,0,0,.90);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
|
@ -298,6 +229,7 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-chart-container {
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
|
@ -306,4 +238,76 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 22px;
|
||||
color: @text-color-placeholder;
|
||||
}
|
||||
|
||||
.dashboard-item-trend {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
||||
.dashbord-item-left {
|
||||
position: absolute;
|
||||
top: 32px;
|
||||
right: 32px;
|
||||
|
||||
> span {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
background: #ECF2FE;
|
||||
border-radius: 50%;
|
||||
|
||||
.t-icon {
|
||||
font-size: 24px;
|
||||
color: #0052D9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.dashbord-rank {
|
||||
display: inline-flex;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border-radius: 50%;
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
background-color: @gray-color-5;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: 700;
|
||||
|
||||
|
||||
&__top {
|
||||
background: @brand-color;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.row-container {
|
||||
margin-bottom: 8px !important;
|
||||
}
|
||||
|
||||
.overview-pannel {
|
||||
background-color: white;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.card-container.main-color {
|
||||
background: @brand-color;
|
||||
color: white;
|
||||
|
||||
.card-describe {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-item-top span {
|
||||
color: white;
|
||||
}
|
||||
|
||||
.dashboard-item-block {
|
||||
color: rgba(255,255,255,.55);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +1,29 @@
|
|||
import { getBrandColor } from '@/config/color';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
/** 图表颜色 */
|
||||
let chartListColor: Array<string> = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F'];
|
||||
|
||||
/**
|
||||
* 获取表头数据
|
||||
*
|
||||
* @export
|
||||
* @param {string[]} dateTime
|
||||
* @param {number} divideNum
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] {
|
||||
const timeArray: string[] = [];
|
||||
if (dateTime.length > 0) {
|
||||
for (let i = 0; i < divideNum; i++) {
|
||||
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
|
||||
}
|
||||
}
|
||||
|
||||
return timeArray;
|
||||
}
|
||||
export class DashboardBase {
|
||||
/** 更新容器尺寸 */
|
||||
setContainerSize(containerCopyValue: HTMLElement, absWidth = 0, absHeight = 0): void {
|
||||
|
|
@ -23,7 +47,7 @@ export class DashboardBase {
|
|||
*
|
||||
* @memberOf DashboardBase
|
||||
*/
|
||||
export function getRandomNum(num = 100): number {
|
||||
export function getRandomArray(num = 100): number {
|
||||
let resultNum = Number((Math.random() * num).toFixed(0));
|
||||
|
||||
if (resultNum <= 1) {
|
||||
|
|
@ -33,13 +57,87 @@ export function getRandomNum(num = 100): number {
|
|||
return resultNum;
|
||||
}
|
||||
|
||||
/** 首页 dashbord 折线图 */
|
||||
export function constructInitDashbordDataset(type: string) {
|
||||
const dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||
const datasetAxis = {
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
show: false,
|
||||
data: dateArray,
|
||||
},
|
||||
yAxis: {
|
||||
show: false,
|
||||
type: 'value',
|
||||
},
|
||||
grid: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
},
|
||||
};
|
||||
|
||||
if (type === 'line') {
|
||||
const lineDataset = {
|
||||
...datasetAxis,
|
||||
color: ['#fff'],
|
||||
series: [
|
||||
{
|
||||
data: [150, 230, 224, 218, 135, 147, 260],
|
||||
type,
|
||||
},
|
||||
],
|
||||
};
|
||||
return lineDataset;
|
||||
}
|
||||
if (type === 'bar') {
|
||||
const barDataset = {
|
||||
...datasetAxis,
|
||||
color: chartListColor,
|
||||
series: [
|
||||
{
|
||||
data: [
|
||||
100,
|
||||
130,
|
||||
184,
|
||||
218,
|
||||
{
|
||||
value: 135,
|
||||
itemStyle: {
|
||||
color: '#ECF2FE',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 118,
|
||||
itemStyle: {
|
||||
color: '#ECF2FE',
|
||||
},
|
||||
},
|
||||
{
|
||||
value: 60,
|
||||
itemStyle: {
|
||||
color: '#ECF2FE',
|
||||
},
|
||||
},
|
||||
],
|
||||
type,
|
||||
},
|
||||
],
|
||||
};
|
||||
return barDataset;
|
||||
}
|
||||
}
|
||||
|
||||
/** 柱状图数据源 */
|
||||
export function constructInitDataset(dateTime: Array<string> = []) {
|
||||
const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
|
||||
// const dataset: Array<Array<string>> = [['时间'], ['入库'], ['出库']];
|
||||
const divideNum = 10;
|
||||
|
||||
const timeArray = [];
|
||||
const inArray = [];
|
||||
const outArray = [];
|
||||
for (let i = 0; i < divideNum; i++) {
|
||||
const [timeArray, inArray, outArray] = dataset;
|
||||
// const [timeArray, inArray, outArray] = dataset;
|
||||
if (dateTime.length > 0) {
|
||||
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||
|
|
@ -51,12 +149,215 @@ export function constructInitDataset(dateTime: Array<string> = []) {
|
|||
.format('YYYY-MM-DD'));
|
||||
}
|
||||
|
||||
inArray.push(getRandomNum().toString());
|
||||
outArray.push(getRandomNum().toString());
|
||||
inArray.push(getRandomArray().toString());
|
||||
outArray.push(getRandomArray().toString());
|
||||
}
|
||||
|
||||
// console.log('timeArray..', timeArray);
|
||||
|
||||
const dataset = {
|
||||
color: chartListColor,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: timeArray,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
grid: {
|
||||
top: '5%',
|
||||
left: '25px',
|
||||
right: 0,
|
||||
bottom: '60px',
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
orient: 'horizontal',
|
||||
data: ['出库', '入库'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '出库',
|
||||
data: outArray,
|
||||
type: 'bar',
|
||||
},
|
||||
{
|
||||
name: '入库',
|
||||
data: inArray,
|
||||
type: 'bar',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
return dataset;
|
||||
}
|
||||
|
||||
/** 平滑图数据 */
|
||||
export function getSmoothLineDataSet(dateTime: any = []): any {
|
||||
let dateArray: Array<string> = ['00:00', '02:00', '04:00', '06:00'];
|
||||
if (dateTime.length > 0) {
|
||||
const devideNum = 7;
|
||||
dateArray = getDateArray(dateTime, devideNum);
|
||||
}
|
||||
|
||||
return {
|
||||
color: chartListColor,
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dateArray,
|
||||
boundaryGap: false,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
legend: {
|
||||
data: ['本月', '上月'],
|
||||
icon: 'roundRect',
|
||||
bottom: '15%',
|
||||
itemGap: 60,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '上月',
|
||||
data: [
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
color: '#BCC4D0',
|
||||
},
|
||||
{
|
||||
name: '本月',
|
||||
data: [
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
areaStyle: {
|
||||
opacity: 0.1,
|
||||
},
|
||||
color: '#0052D9',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
/** 折线图数据 */
|
||||
export function getFolderlineDataSet(dateTime: any = []): any {
|
||||
let dateArray: Array<string> = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||
if (dateTime.length > 0) {
|
||||
const devideNum = 7;
|
||||
dateArray = getDateArray(dateTime, devideNum);
|
||||
}
|
||||
|
||||
return {
|
||||
color: chartListColor,
|
||||
grid: {
|
||||
top: '5%',
|
||||
right: '1px',
|
||||
left: '30px',
|
||||
bottom: '60px',
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
orient: 'horizontal', // legend 横向布局。
|
||||
data: ['杯子', '茶叶', '蜂蜜', '面粉'],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dateArray,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '杯子',
|
||||
stack: '总量',
|
||||
data: [
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
],
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name: '茶叶',
|
||||
stack: '总量',
|
||||
data: [
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
],
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name: '蜂蜜',
|
||||
stack: '总量',
|
||||
data: [
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
],
|
||||
type: 'line',
|
||||
},
|
||||
{
|
||||
name: '面粉',
|
||||
stack: '总量',
|
||||
data: [
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
],
|
||||
type: 'line',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 线性图表数据源
|
||||
*
|
||||
|
|
@ -64,60 +365,71 @@ export function constructInitDataset(dateTime: Array<string> = []) {
|
|||
* @param {Array<string>} [dateTime=[]]
|
||||
* @returns {*}
|
||||
*/
|
||||
export function getLineChartDataSet(dateTime: Array<string> = []): any {
|
||||
if (dateTime.length > 0) {
|
||||
const devideNum = 10;
|
||||
const dateArray: Array<string> = getDateArray(dateTime, devideNum);
|
||||
return [
|
||||
dateArray,
|
||||
getSelftItemList('杯子', devideNum),
|
||||
getSelftItemList('茶叶', devideNum),
|
||||
getSelftItemList('蜂蜜', devideNum),
|
||||
getSelftItemList('面粉', devideNum),
|
||||
];
|
||||
export function getLineChartDataSet(checkedValues = ''): any {
|
||||
let dateValueList = [];
|
||||
if (checkedValues === 'monthVal') {
|
||||
dateValueList = ['1', '3', '8', '13', '18', '23', '28'];
|
||||
} else {
|
||||
dateValueList = ['周一', '周二', '周三', '周四', '周五', '周六', '周日'];
|
||||
}
|
||||
return [
|
||||
[
|
||||
'日期',
|
||||
'2020-01-16',
|
||||
'2020-01-17',
|
||||
'2020-01-18',
|
||||
'2020-01-19',
|
||||
'2020-01-20',
|
||||
'2020-01-21',
|
||||
'2020-01-22',
|
||||
'2020-01-23',
|
||||
'2020-01-24',
|
||||
'2020-01-25',
|
||||
const dataSet = {
|
||||
color: chartListColor,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
grid: {
|
||||
left: '0',
|
||||
right: '0',
|
||||
top: '5px',
|
||||
bottom: '36px',
|
||||
containLabel: true,
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
orient: 'horizontal', // legend 横向布局。
|
||||
data: ['付款金额', '收款金额'],
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
data: dateValueList,
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value',
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '付款金额',
|
||||
data: [
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
},
|
||||
{
|
||||
name: '收款金额',
|
||||
data: [
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
getRandomArray(),
|
||||
],
|
||||
type: 'line',
|
||||
smooth: true,
|
||||
},
|
||||
],
|
||||
['杯子', 5, 15, 15, 25, 24, 13, 32, 37, 43, 35],
|
||||
['茶叶', 1, 6, 13, 38, 39, 44, 48, 75, 62, 52],
|
||||
['蜂蜜', 16, 22, 27, 22, 32, 35, 23, 32, 33, 25],
|
||||
['面粉', 12, 12, 25, 29, 21, 30, 37, 47, 40, 47],
|
||||
];
|
||||
}
|
||||
/** 图表颜色 */
|
||||
export const CHART_LIST_COLOR: Array<string> = ['#0052D9', '#00A870', '#7D46BD', '#0594FA', '#ED7B2F'];
|
||||
|
||||
/**
|
||||
* 获取表头数据
|
||||
*
|
||||
* @export
|
||||
* @param {string[]} dateTime
|
||||
* @param {number} divideNum
|
||||
* @returns {string[]}
|
||||
*/
|
||||
export function getDateArray(dateTime: string[] = [], divideNum = 10): string[] {
|
||||
const timeArray: string[] = ['日期'];
|
||||
if (dateTime.length > 0) {
|
||||
for (let i = 0; i < divideNum; i++) {
|
||||
const dateAbsTime: number = (new Date(dateTime[1]).getTime() - new Date(dateTime[0]).getTime()) / divideNum;
|
||||
const enhandTime: number = new Date(dateTime[0]).getTime() + dateAbsTime * i;
|
||||
timeArray.push(dayjs(enhandTime).format('YYYY-MM-DD'));
|
||||
}
|
||||
}
|
||||
|
||||
return timeArray;
|
||||
};
|
||||
// console.log('getLineChartDataSet..', dataSet);
|
||||
return dataSet;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -130,7 +442,7 @@ export function getDateArray(dateTime: string[] = [], divideNum = 10): string[]
|
|||
export function getSelftItemList(productName: string, devideNum: number): string[] {
|
||||
const productArray: string[] = [productName];
|
||||
for (let i = 0; i < devideNum; i++) {
|
||||
productArray.push(getRandomNum(100 * i).toString());
|
||||
productArray.push(getRandomArray(100 * i).toString());
|
||||
}
|
||||
|
||||
return productArray;
|
||||
|
|
@ -142,19 +454,58 @@ export function getSelftItemList(productName: string, devideNum: number): string
|
|||
* @export
|
||||
* @returns {any[]}
|
||||
*/
|
||||
export function getScattlerDataSet(): any[] {
|
||||
const scatterData = [...Array(40)].map(() => [
|
||||
getRandomNum(Math.random() * 100),
|
||||
getRandomNum(Math.random() * 200),
|
||||
getRandomNum(Math.random() * 30),
|
||||
getRandomNum(Math.random() * 400),
|
||||
]);
|
||||
|
||||
return [
|
||||
['咖啡机质量', '咖啡机效果', '按摩仪质量', '按摩仪效果'],
|
||||
[getRandomNum(100), getRandomNum(200), getRandomNum(100), getRandomNum(500)],
|
||||
...scatterData,
|
||||
];
|
||||
export function getScattlerDataSet(): any {
|
||||
return {
|
||||
color: chartListColor,
|
||||
xAxis: {},
|
||||
yAxis: {},
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
grid: {
|
||||
top: '5%',
|
||||
left: '18px',
|
||||
right: '5px',
|
||||
bottom: '60px',
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
orient: 'horizontal', // legend 横向布局。
|
||||
data: ['满意度'],
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '满意度',
|
||||
symbolSize: 10,
|
||||
data: [
|
||||
[getRandomArray(Math.random() * 10.0), getRandomArray(Math.random() * 8.04)],
|
||||
[getRandomArray(Math.random() * 8.07), getRandomArray(Math.random() * 6.95)],
|
||||
[getRandomArray(Math.random() * 13.0), getRandomArray(Math.random() * 7.58)],
|
||||
[getRandomArray(Math.random() * 9.05), getRandomArray(Math.random() * 8.81)],
|
||||
[getRandomArray(Math.random() * 11.0), getRandomArray(Math.random() * 8.33)],
|
||||
[getRandomArray(Math.random() * 14.0), getRandomArray(Math.random() * 7.66)],
|
||||
[getRandomArray(Math.random() * 13.4), getRandomArray(Math.random() * 6.81)],
|
||||
[getRandomArray(Math.random() * 10.0), getRandomArray(Math.random() * 6.33)],
|
||||
[getRandomArray(Math.random() * 14.0), getRandomArray(Math.random() * 8.96)],
|
||||
[getRandomArray(Math.random() * 12.5), getRandomArray(Math.random() * 6.82)],
|
||||
[getRandomArray(Math.random() * 9.15), getRandomArray(Math.random() * 7.2)],
|
||||
[getRandomArray(Math.random() * 11.5), getRandomArray(Math.random() * 7.2)],
|
||||
[getRandomArray(Math.random() * 3.03), getRandomArray(Math.random() * 4.23)],
|
||||
[getRandomArray(Math.random() * 12.2), getRandomArray(Math.random() * 7.83)],
|
||||
[getRandomArray(Math.random() * 2.02), getRandomArray(Math.random() * 4.47)],
|
||||
[getRandomArray(Math.random() * 1.05), getRandomArray(Math.random() * 3.33)],
|
||||
[getRandomArray(Math.random() * 4.05), getRandomArray(Math.random() * 4.96)],
|
||||
[getRandomArray(Math.random() * 6.03), getRandomArray(Math.random() * 7.24)],
|
||||
[getRandomArray(Math.random() * 12.0), getRandomArray(Math.random() * 6.26)],
|
||||
[getRandomArray(Math.random() * 12.0), getRandomArray(Math.random() * 8.84)],
|
||||
[getRandomArray(Math.random() * 7.08), getRandomArray(Math.random() * 5.82)],
|
||||
[getRandomArray(Math.random() * 5.02), getRandomArray(Math.random() * 5.68)],
|
||||
],
|
||||
type: 'scatter',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -164,33 +515,66 @@ export function getScattlerDataSet(): any[] {
|
|||
* @returns {any[]}
|
||||
*/
|
||||
export function getAreaChartDataSet(text = ''): any {
|
||||
console.log(text);
|
||||
|
||||
const xAxisData = [];
|
||||
const data1 = [];
|
||||
const data2 = [];
|
||||
for (let i = 0; i < 50; i++) {
|
||||
xAxisData.push(`${i}`);
|
||||
data1.push((getRandomArray() * Math.sin(i / 5) * (i / 5 - 5) + i / 6) * 2);
|
||||
data2.push((getRandomArray() * Math.cos(i / 5) * (i / 5 - 5) + i / 6) * 2);
|
||||
}
|
||||
|
||||
return {
|
||||
title: {
|
||||
text,
|
||||
color: chartListColor,
|
||||
// title: {
|
||||
// text: '柱状图动画延迟',
|
||||
// },
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '5%',
|
||||
orient: 'horizontal',
|
||||
data: ['测试', '上线'],
|
||||
},
|
||||
dataset: [
|
||||
['时间', '00:00', '02:00', '04:00', '06:00', '08:00'],
|
||||
[
|
||||
'测试',
|
||||
getRandomNum(Math.random() * 100),
|
||||
getRandomNum(Math.random() * 200),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 400),
|
||||
getRandomNum(Math.random() * 500),
|
||||
],
|
||||
[
|
||||
'上线',
|
||||
getRandomNum(Math.random() * 100),
|
||||
getRandomNum(Math.random() * 200),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 400),
|
||||
getRandomNum(Math.random() * 500),
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
xAxis: {
|
||||
data: xAxisData,
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
yAxis: {},
|
||||
series: [
|
||||
{
|
||||
name: '测试',
|
||||
type: 'bar',
|
||||
data: data1,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
animationDelay(idx) {
|
||||
return idx * 10;
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '上线',
|
||||
type: 'bar',
|
||||
data: data2,
|
||||
emphasis: {
|
||||
focus: 'series',
|
||||
},
|
||||
animationDelay(idx) {
|
||||
return idx * 10 + 100;
|
||||
},
|
||||
},
|
||||
],
|
||||
area: {
|
||||
smooth: true,
|
||||
animationEasing: 'elasticOut',
|
||||
animationDelayUpdate(idx) {
|
||||
return idx * 5;
|
||||
},
|
||||
injectOption: option => ({ ...option, color: CHART_LIST_COLOR }),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -204,43 +588,197 @@ export function getAreaChartDataSet(text = ''): any {
|
|||
export function getColumnChartDataSet(isMonth = false): any {
|
||||
if (isMonth) {
|
||||
return {
|
||||
title: {
|
||||
text: '',
|
||||
color: chartListColor,
|
||||
legend: {
|
||||
left: 'center',
|
||||
top: '10%',
|
||||
orient: 'horizontal', // legend 横向布局。
|
||||
data: ['直接访问'],
|
||||
},
|
||||
dataset: [
|
||||
['日期', '1', '4', '8', '12', '16', '20', '24'],
|
||||
[
|
||||
'告警',
|
||||
getRandomNum(Math.random() * 800),
|
||||
getRandomNum(Math.random() * 700),
|
||||
getRandomNum(Math.random() * 600),
|
||||
getRandomNum(Math.random() * 500),
|
||||
getRandomNum(Math.random() * 400),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 100),
|
||||
],
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '3%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['1', '4', '8', '12', '16', '20', '24'],
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'bar',
|
||||
barWidth: '60%',
|
||||
data: [
|
||||
getRandomArray(Math.random() * 100),
|
||||
getRandomArray(Math.random() * 200),
|
||||
getRandomArray(Math.random() * 300),
|
||||
getRandomArray(Math.random() * 400),
|
||||
getRandomArray(Math.random() * 500),
|
||||
getRandomArray(Math.random() * 600),
|
||||
getRandomArray(Math.random() * 700),
|
||||
],
|
||||
},
|
||||
],
|
||||
injectOption: option => ({ ...option, color: CHART_LIST_COLOR }),
|
||||
};
|
||||
}
|
||||
|
||||
return {
|
||||
title: {
|
||||
text: '',
|
||||
color: chartListColor,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
dataset: [
|
||||
['时间', '周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
[
|
||||
'告警',
|
||||
getRandomNum(Math.random() * 200),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 600),
|
||||
getRandomNum(Math.random() * 500),
|
||||
getRandomNum(Math.random() * 100),
|
||||
getRandomNum(Math.random() * 300),
|
||||
getRandomNum(Math.random() * 100),
|
||||
],
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '0%',
|
||||
orient: 'horizontal', // legend 横向布局。
|
||||
data: ['直接访问'],
|
||||
},
|
||||
grid: {
|
||||
left: '3%',
|
||||
right: '4%',
|
||||
bottom: '13%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '直接访问',
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
data: [
|
||||
getRandomArray(Math.random() * 100),
|
||||
getRandomArray(Math.random() * 200),
|
||||
getRandomArray(Math.random() * 300),
|
||||
getRandomArray(Math.random() * 400),
|
||||
getRandomArray(Math.random() * 500),
|
||||
getRandomArray(Math.random() * 600),
|
||||
getRandomArray(Math.random() * 700),
|
||||
],
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 柱状图数据结构
|
||||
*
|
||||
* @export
|
||||
* @param {boolean} [isMonth=false]
|
||||
* @returns {*}
|
||||
*/
|
||||
export function get2ColBarChartDataSet(): any {
|
||||
return {
|
||||
color: chartListColor,
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
axisPointer: {
|
||||
// 坐标轴指示器，坐标轴触发有效
|
||||
type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
|
||||
},
|
||||
},
|
||||
grid: {
|
||||
top: '0',
|
||||
left: '0',
|
||||
right: '0',
|
||||
// bottom: '10%',
|
||||
containLabel: true,
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: 'category',
|
||||
data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
|
||||
axisTick: {
|
||||
alignWithLabel: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: 'value',
|
||||
},
|
||||
],
|
||||
legend: {
|
||||
data: ['去年', '今年'],
|
||||
bottom: '0',
|
||||
itemGap: 60,
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '去年',
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
data: [
|
||||
getRandomArray(Math.random() * 100),
|
||||
getRandomArray(Math.random() * 200),
|
||||
getRandomArray(Math.random() * 300),
|
||||
getRandomArray(Math.random() * 400),
|
||||
getRandomArray(Math.random() * 500),
|
||||
getRandomArray(Math.random() * 600),
|
||||
getRandomArray(Math.random() * 700),
|
||||
],
|
||||
itemStyle: {
|
||||
color: '#BCC4D0',
|
||||
},
|
||||
},
|
||||
{
|
||||
name: '今年',
|
||||
type: 'bar',
|
||||
barWidth: '20%',
|
||||
data: [
|
||||
getRandomArray(Math.random() * 100),
|
||||
getRandomArray(Math.random() * 200),
|
||||
getRandomArray(Math.random() * 300),
|
||||
getRandomArray(Math.random() * 400),
|
||||
getRandomArray(Math.random() * 500),
|
||||
getRandomArray(Math.random() * 600),
|
||||
getRandomArray(Math.random() * 700),
|
||||
],
|
||||
itemStyle: {
|
||||
color: (params) => {
|
||||
if (params.value >= 200) {
|
||||
return '#E34D59';
|
||||
}
|
||||
return '#0052D9';
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
injectOption: option => ({ ...option, color: CHART_LIST_COLOR }),
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -253,16 +791,94 @@ export function getColumnChartDataSet(isMonth = false): any {
|
|||
*/
|
||||
export function getPieChartDataSet(radius = 42): any {
|
||||
return {
|
||||
title: {
|
||||
text: '',
|
||||
color: chartListColor,
|
||||
tooltip: {
|
||||
trigger: 'item',
|
||||
},
|
||||
dataset: [
|
||||
['状态', '审核中', '待履行', '履行中', '已完成'],
|
||||
['数量', 67, 45, radius, 36],
|
||||
grid: {
|
||||
top: '0',
|
||||
right: '0',
|
||||
},
|
||||
legend: {
|
||||
left: 'center',
|
||||
bottom: '0',
|
||||
orient: 'horizontal', // legend 横向布局。
|
||||
},
|
||||
series: [
|
||||
{
|
||||
name: '销售渠道',
|
||||
type: 'pie',
|
||||
radius: ['45%', '60%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'center',
|
||||
},
|
||||
emphasis: {
|
||||
label: {
|
||||
show: true,
|
||||
fontSize: '12',
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
},
|
||||
labelLine: {
|
||||
show: false,
|
||||
},
|
||||
data: [
|
||||
{ value: 1048, name: '线上' },
|
||||
{ value: radius * 7, name: '门店' },
|
||||
],
|
||||
},
|
||||
],
|
||||
injectOption: option => ({ ...option, color: CHART_LIST_COLOR }),
|
||||
pie: {
|
||||
radius: ['45%', '60%'], // 设置内圆和外圆半径
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 依据主题类型获取颜色
|
||||
*
|
||||
* @export
|
||||
* @param {string} theme
|
||||
* @returns {any[]}
|
||||
*/
|
||||
export function getColorFromTheme(theme: string): any[] {
|
||||
const themeColor: any = getBrandColor(theme);
|
||||
const themeColorList: Array<any> = [];
|
||||
|
||||
// eslint-disable-next-line no-restricted-syntax
|
||||
for (const key in themeColor) {
|
||||
if (Object.prototype.hasOwnProperty.call(themeColor, key)) {
|
||||
const elementColor: any = themeColor[key];
|
||||
|
||||
themeColorList.push(elementColor);
|
||||
}
|
||||
}
|
||||
|
||||
return themeColorList;
|
||||
}
|
||||
|
||||
/**
|
||||
* 更改图表主题颜色
|
||||
*
|
||||
* @export
|
||||
* @param {Array<any>} chartsList
|
||||
* @param {string} theme
|
||||
*/
|
||||
export function changeChartsTheme(chartsList: Array<any>, theme: string): void {
|
||||
if (chartsList && chartsList.length) {
|
||||
const chartChangeColor: Array<any> = getColorFromTheme(theme) || chartListColor;
|
||||
chartListColor = chartChangeColor;
|
||||
|
||||
for (let index = 0; index < chartsList.length; index++) {
|
||||
const elementChart: any = chartsList[index];
|
||||
|
||||
if (elementChart) {
|
||||
const optionVal: any = elementChart.getOption();
|
||||
|
||||
// 更改主题颜色
|
||||
optionVal.color = chartChangeColor;
|
||||
|
||||
elementChart.setOption(optionVal);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,138 +1,68 @@
|
|||
@import '@/style/index';
|
||||
|
||||
.t-tabs__content {
|
||||
padding-top: @spacer-3;
|
||||
}
|
||||
|
||||
.dashboard-panel-detail {
|
||||
padding: 0;
|
||||
border-radius: @border-radius;
|
||||
}
|
||||
|
||||
// 标题内容
|
||||
.dashboard-chart-title {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-weight: bold;
|
||||
|
||||
span {
|
||||
font-size: 16px;
|
||||
color: rgba(0,0,0,0.90);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.dashboard-chart-title-date {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #DDDDDD;
|
||||
border-radius: @border-radius;
|
||||
padding: 5px 8px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
|
||||
.dashboard-chart-title-to {
|
||||
color: rgba(0,0,0,0.30);
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.t-icon-creditcard {
|
||||
margin-left: 20px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-chart-title-search {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
border: 1px solid #DDDDDD;
|
||||
border-radius: @border-radius;
|
||||
padding: 0;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-weight: normal;
|
||||
|
||||
input {
|
||||
border: solid 0px #ffffff !important;
|
||||
}
|
||||
}
|
||||
|
||||
label {
|
||||
font-weight: normal !important;
|
||||
padding: 5px 15px !important;
|
||||
|
||||
.t-radio-button__label {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
.list-card-item + .list-card-item {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.dashboard-panel-detail {
|
||||
margin-top: -16px;
|
||||
}
|
||||
|
||||
.dashboard-detail-top-container {
|
||||
padding: 20px 24px;
|
||||
background-color: white;
|
||||
.card-date-picker {
|
||||
width: 240px;
|
||||
}
|
||||
|
||||
.card-date-button {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.dashboard-detail-container-item {
|
||||
height: 168px;
|
||||
border: solid 1px #ebebeb;
|
||||
padding: 24px 32px;
|
||||
box-sizing: border-box;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.dashboard-detail-box {
|
||||
.dashboard-detail-container-item:not(:last-child) {
|
||||
border-right: solid 1px #EBEBEB;
|
||||
margin-right: 22.5px;
|
||||
}
|
||||
@media screen and (min-width: @screen-md-max) {
|
||||
.dashboard-detail-container-item-perfix {
|
||||
border-right: solid 1px #EBEBEB;
|
||||
margin-right: 22.5px;
|
||||
}
|
||||
display: flex;
|
||||
}
|
||||
@media screen and (max-width: @screen-md-max - 1px) and (min-width: 0) {
|
||||
display: normal;
|
||||
&:hover {
|
||||
background: @gray-color-1;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
color: rgba(0,0,0,.90);
|
||||
font-weight: 500;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 24px;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.30);
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
.dashboard-detail-container {
|
||||
|
||||
.dashboard-detail-container-item-text {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: row;
|
||||
padding-top: 20px;
|
||||
|
||||
.dashboard-detail-container-item {
|
||||
min-width: 108px;
|
||||
width: 100%;
|
||||
height: 106px;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 36px;
|
||||
color: rgba(0,0,0,0.90);
|
||||
font-weight: 500;
|
||||
padding-top: 8px;
|
||||
|
||||
span {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.30);
|
||||
padding-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.dashboard-detail-container-item-text {
|
||||
// color: #E34D59;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
font-size: 12px;
|
||||
color: rgba(0,0,0,0.40);
|
||||
text-align: left;
|
||||
line-height: 20px;
|
||||
}
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.40);
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
|
||||
> span {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.dashboard-detail-bottom-container {
|
||||
padding: 20px 24px;
|
||||
|
|
@ -141,7 +71,8 @@
|
|||
margin-top: 16px;
|
||||
min-height: 400px;
|
||||
|
||||
.dashboard-chart-title-container {
|
||||
width: 240px;
|
||||
}
|
||||
}
|
||||
|
||||
.trend-container {
|
||||
margin-left: 4px;
|
||||
}
|
||||
|
|
@ -1,247 +1,301 @@
|
|||
@import '@/style/index';
|
||||
|
||||
.login-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
position: absolute;
|
||||
top: 28%;
|
||||
left: 12%;
|
||||
min-height: 500px;
|
||||
line-height: 22px;
|
||||
position: absolute;
|
||||
top: 28%;
|
||||
left: 12%;
|
||||
min-height: 500px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
.icon {
|
||||
width: 290px;
|
||||
height: 60px;
|
||||
}
|
||||
.side-title {
|
||||
margin-top: 24.9px;
|
||||
.tip1, .tip2 {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
}
|
||||
.tip2 {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: 290px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.side-title {
|
||||
margin-top: 24.9px;
|
||||
|
||||
.tip1,
|
||||
.tip2 {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
}
|
||||
|
||||
.tip2 {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step1 {
|
||||
.input-container {
|
||||
margin-top: 72px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
.check-container {
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.input-container {
|
||||
margin-top: 72px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step3 {
|
||||
.input-container {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
.tip-container {
|
||||
margin-bottom: 16px;
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
}
|
||||
.tip2 {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
|
||||
.t-icon {
|
||||
height: 20px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
.button-container {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
.tip-container {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
}
|
||||
|
||||
.tip2 {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
|
||||
.t-icon {
|
||||
height: 20px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
|
||||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step1 {
|
||||
.bottom-container {
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-step3 {
|
||||
.bottom-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
.input-container .tip-container {
|
||||
width: 192px;
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.input-container .tip-container {
|
||||
width: 192px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-step2 {
|
||||
.input-container {
|
||||
margin-top: 108.9px;
|
||||
.tip1 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin-top: 108.9px;
|
||||
|
||||
.tip1 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
i {
|
||||
font-style: normal;
|
||||
color: @gray-color-3;
|
||||
margin: 0 14px;
|
||||
}
|
||||
margin-top: 66px;
|
||||
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: @gray-color-3;
|
||||
margin: 0 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rex-check {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-color-placeholder;
|
||||
line-height: 22px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-color-placeholder;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.format-correct {
|
||||
color: @text-color-primary;
|
||||
color: @text-color-primary;
|
||||
|
||||
.t-icon {
|
||||
color: @success-color-5;
|
||||
}
|
||||
.t-icon {
|
||||
color: @success-color-5;
|
||||
}
|
||||
}
|
||||
|
||||
.login-step4 {
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.verification-code {
|
||||
margin-bottom: 24px;
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
.check-container {
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step5 {
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.t-select-popup-reference {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
.check-container {
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.t-select-popup-reference {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step6 {
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.verification-code {
|
||||
margin: 24px 0;
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
.check-container {
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin: 24px 0;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
@font-face {
|
||||
font-family: "TencentSansW7";
|
||||
src: url("data:application/font-woff;charset=utf-8;base64,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") format("woff");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
font-family: 'TencentSansW7';
|
||||
src: url('data:application/font-woff;charset=utf-8;base64,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') format('woff');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
|
@ -1,167 +1,172 @@
|
|||
@import "./common.less";
|
||||
@import "./variables.less";
|
||||
@import "./rewrite.less";
|
||||
@import "./font-family.less";
|
||||
@import "./sidenav.less";
|
||||
@import './common.less';
|
||||
|
||||
@import './variables.less';
|
||||
|
||||
@import './rewrite.less';
|
||||
|
||||
@import './font-family.less';
|
||||
|
||||
@import './sidenav.less';
|
||||
|
||||
body {
|
||||
color: @text-level-2-color;
|
||||
font-family: -apple-system, BlinkMacSystemFont, @font-family;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding: 0;
|
||||
min-width: @screen-sm-min;
|
||||
}
|
||||
pre {
|
||||
font-family: @font-family;
|
||||
}
|
||||
color: @text-level-2-color;
|
||||
font-family: -apple-system, BlinkMacSystemFont, @font-family;
|
||||
font-size: @font-size-base;
|
||||
line-height: 1.5;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
padding: 0;
|
||||
min-width: @screen-sm-min;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-family: @font-family;
|
||||
}
|
||||
|
||||
ul,
|
||||
dl,
|
||||
li,
|
||||
dd,
|
||||
dt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
ul,
|
||||
dl,
|
||||
li,
|
||||
dd,
|
||||
dt {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
figure,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.@{prefix}-text-ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.@{prefix}-text-ellipsis {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.@{prefix}-text-tip {
|
||||
font-size: 12px;
|
||||
color: @text-level-3-color;
|
||||
}
|
||||
.@{prefix}-text-tip {
|
||||
font-size: 12px;
|
||||
color: @text-level-3-color;
|
||||
}
|
||||
|
||||
.@{prefix}-pic {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
.@{prefix}-pic {
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100%;
|
||||
}
|
||||
|
||||
.@{prefix}-main-link {
|
||||
.@{prefix}-main-link {
|
||||
color: @text-level-1-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @text-level-1-color;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @text-level-1-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @text-level-1-color;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix}-link {
|
||||
color: @primary-color;
|
||||
|
||||
&:active {
|
||||
color: @text-level-1-color;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: #000;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
margin-right: @spacer-3;
|
||||
}
|
||||
}
|
||||
|
||||
.@{prefix}-link {
|
||||
color: @primary-color;
|
||||
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
margin-right: @spacer-3;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:active {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
// 布局元素调整
|
||||
.@{prefix}-wrapper {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
&:active {
|
||||
color: @primary-color;
|
||||
}
|
||||
.@{prefix}-sidenav-layout {
|
||||
|
||||
&--active {
|
||||
color: @primary-color;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
|
||||
// 布局元素调整
|
||||
.@{prefix}-wrapper {
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.@{prefix}-sidenav-layout {
|
||||
|
||||
&-relative {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.@{prefix}-content-layout {
|
||||
margin: @spacer-3;
|
||||
&-relative {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
.@{prefix}-content-layout {
|
||||
margin: @spacer-3;
|
||||
}
|
||||
|
||||
.@{prefix}-footer-layout {
|
||||
padding: 0;
|
||||
margin-bottom: @spacer-2;
|
||||
}
|
||||
.@{prefix}-footer-layout {
|
||||
padding: 0;
|
||||
margin-bottom: @spacer-2;
|
||||
}
|
||||
|
||||
.@{prefix}-footer {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
.@{prefix}-footer {
|
||||
color: rgba(0, 0, 0, .3);
|
||||
line-height: 20px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.@{prefix}-icon-container {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.@{prefix}-icon-container {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 4px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.@{prefix}-flat-icon {
|
||||
width: 10px;
|
||||
height: 3px;
|
||||
background: rgba(0,0,0,0.60);
|
||||
}
|
||||
.@{prefix}-flat-icon {
|
||||
width: 10px;
|
||||
height: 3px;
|
||||
background: rgba(0,0,0,.60);
|
||||
}
|
||||
|
||||
.@{prefix}-up-triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 6px 8px 6px;
|
||||
border-color: transparent transparent #00A870 transparent;
|
||||
}
|
||||
.@{prefix}-up-triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 0 6px 8px 6px;
|
||||
border-color: transparent transparent #00A870 transparent;
|
||||
}
|
||||
|
||||
.@{prefix}-down-triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 8px 6px 0 6px;
|
||||
border-color: #E34D59 transparent transparent transparent;
|
||||
}
|
||||
.@{prefix}-down-triangle {
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-style: solid;
|
||||
border-width: 8px 6px 0 6px;
|
||||
border-color: #E34D59 transparent transparent transparent;
|
||||
}
|
||||
|
|
@ -1,96 +1,92 @@
|
|||
@import './variables.less';
|
||||
|
||||
@import './font-family.less';
|
||||
|
||||
.@{prefix} {
|
||||
&-sidebar-layout {
|
||||
height: 100%;
|
||||
|
||||
&-sidebar-layout {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
&-sidebar-compact {
|
||||
width: 64px;
|
||||
}
|
||||
|
||||
&-sidebar-layout-side {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&-sidenav {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
transition: all .3s;
|
||||
min-height: 100%;
|
||||
|
||||
&-mix {
|
||||
top: 64px;
|
||||
|
||||
&-fixed {
|
||||
top: 64px;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-sidebar-compact {
|
||||
width: 64px;
|
||||
.@{prefix}-sidenav-logo-wrapper {
|
||||
padding-left: 16px;
|
||||
}
|
||||
}
|
||||
&-sidebar-layout-side {
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
&-sidenav{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 10;
|
||||
transition: all .3s;
|
||||
min-height: 100%;
|
||||
|
||||
&-mix {
|
||||
top: 64px;
|
||||
|
||||
&-fixed {
|
||||
top: 64px;
|
||||
z-index: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-no-fixed {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-no-logo {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
&-logo-t-logo {
|
||||
width: 32px;
|
||||
}
|
||||
&-logo-tdesign-logo {
|
||||
width: 112px;
|
||||
}
|
||||
&-logo-normal {
|
||||
font-family: TencentSansKoreanW7;
|
||||
color: @primary-color;
|
||||
font-size: @font-size-l;
|
||||
transition: all .3s;
|
||||
}
|
||||
&-no-fixed {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
|
||||
&-sidenav-placeholder {
|
||||
flex: 1 1 232px;
|
||||
min-width: 232px;
|
||||
transition: all .3s;
|
||||
|
||||
&-hidden {
|
||||
flex: 1 1 72px;
|
||||
min-width: 72px;
|
||||
transition: all .3s;
|
||||
}
|
||||
&-no-logo {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&-logo-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&-logo-t-logo {
|
||||
width: 32px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
&-logo-tdesign-logo {
|
||||
width: 112px;
|
||||
}
|
||||
|
||||
&-logo-normal {
|
||||
font-family: TencentSansKoreanW7;
|
||||
color: @brand-color;
|
||||
font-size: @font-size-l;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
&-sidenav-placeholder {
|
||||
flex: 1 1 232px;
|
||||
min-width: 232px;
|
||||
transition: all .3s;
|
||||
|
||||
&-hidden {
|
||||
flex: 1 1 72px;
|
||||
min-width: 72px;
|
||||
transition: all .3s;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.t-menu--dark .t-menu__options:not(:empty) .t-icon-menu-unfold {
|
||||
color: rgba(255, 255, 255, 0.55)
|
||||
color: rgba(255, 255, 255, .55)
|
||||
}
|
||||
|
||||
.logo-container {
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
height: 64px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
||||
.optional-icon {
|
||||
color: #000000;
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
cursor: pointer;
|
||||
display: inline-flex;
|
||||
height: 64px;
|
||||
margin-left: 24px;
|
||||
}
|
||||
|
|
|
|||
10
stylelint.config.js
Normal file
10
stylelint.config.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
module.exports = {
|
||||
defaultSeverity: 'error',
|
||||
extends: ['stylelint-config-airbnb'],
|
||||
plugins: ['stylelint-scss'],
|
||||
rules: {
|
||||
'max-nesting-depth': 10,
|
||||
'string-quotes': 'single',
|
||||
'declaration-property-value-disallowed-list': { '/^border/': ['none'] },
|
||||
},
|
||||
};
|
||||
|
|
@ -1,12 +1,18 @@
|
|||
import { defineConfig } from 'vite';
|
||||
// import { viteMockServe } from 'vite-plugin-mock';
|
||||
import { viteMockServe } from 'vite-plugin-mock';
|
||||
import { viteThemePlugin } from 'vite-plugin-theme';
|
||||
import createVuePlugin from '@vitejs/plugin-vue';
|
||||
import createSvgPlugin from 'vite-plugin-vue-svg';
|
||||
import vueJsx from '@vitejs/plugin-vue-jsx';
|
||||
|
||||
import vue from '@vitejs/plugin-vue';
|
||||
import HttpProxyAgent from 'http-proxy-agent';
|
||||
import path from 'path';
|
||||
|
||||
// import proxy from './src/config/proxy';
|
||||
// const HttpProxyAgent = require('http-proxy-agent');
|
||||
const path = require('path');
|
||||
import proxy from './src/config/proxy';
|
||||
import { getColorList, getGreyColor, getBrandColor } from './src/config/color';
|
||||
import USER_CONFIG from './src/config/style';
|
||||
|
||||
const { brandTheme, backgroundTheme } = USER_CONFIG;
|
||||
|
||||
// https://vitejs.dev/config/
|
||||
export default defineConfig({
|
||||
|
|
@ -16,10 +22,31 @@ export default defineConfig({
|
|||
'@': path.resolve(__dirname, './src'),
|
||||
},
|
||||
},
|
||||
|
||||
css: {
|
||||
preprocessorOptions: {
|
||||
less: {
|
||||
modifyVars: {
|
||||
...getBrandColor(brandTheme),
|
||||
...getGreyColor(backgroundTheme),
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
vue(),
|
||||
createVuePlugin(),
|
||||
vueJsx(),
|
||||
viteMockServe({
|
||||
mockPath: 'mock',
|
||||
localEnabled: true,
|
||||
}),
|
||||
viteThemePlugin({
|
||||
colorVariables: getColorList([getGreyColor(backgroundTheme), getBrandColor(brandTheme)]),
|
||||
}),
|
||||
createSvgPlugin(),
|
||||
],
|
||||
|
||||
server: {
|
||||
port: 3002,
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user