调整样式
This commit is contained in:
wcq
parent
70b4c7eb80
commit
83b707bc90
12
index.html
12
index.html
|
|
@ -8,7 +8,17 @@
|
|||
name="viewport"
|
||||
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0"
|
||||
/>
|
||||
<title>维德评级</title>
|
||||
<title>WideRating</title>
|
||||
<style>
|
||||
/* latin */
|
||||
@font-face {
|
||||
font-family: 'Monoton';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('/Monoton.ttf');
|
||||
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||
}
|
||||
</style>
|
||||
<link rel="icon" href="/favicon2.ico" />
|
||||
<script>
|
||||
window.process = {};
|
||||
|
|
|
|||
Binary file not shown.
|
|
@ -1,18 +1,18 @@
|
|||
{
|
||||
"Version": "4.5.0",
|
||||
"Title": "维德评级",
|
||||
"Title": "WideRating",
|
||||
"FixedHeader": true,
|
||||
"HiddenSideBar": false,
|
||||
"MultiTagsCache": false,
|
||||
"KeepAlive": true,
|
||||
"Layout": "vertical",
|
||||
"Theme": "default",
|
||||
"DarkMode": true,
|
||||
"DarkMode": false,
|
||||
"Grey": false,
|
||||
"Weak": false,
|
||||
"HideTabs": false,
|
||||
"SidebarStatus": true,
|
||||
"EpThemeColor": "#855ae3",
|
||||
"EpThemeColor": "#008efa",
|
||||
"ShowLogo": true,
|
||||
"ShowModel": "smart",
|
||||
"MenuArrowIconNoTransition": true,
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
|
@ -5,6 +5,14 @@
|
|||
url("iconfont.ttf?t=1671895108120") format("truetype");
|
||||
}
|
||||
|
||||
/*!* latin *!*/
|
||||
/*@font-face {*/
|
||||
/* font-family: "monoton";*/
|
||||
|
||||
/* src: url('monoton.ttf') format('ttf');*/
|
||||
/* unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;*/
|
||||
/*}*/
|
||||
|
||||
.iconfont {
|
||||
font-family: "iconfont" !important;
|
||||
font-size: 16px;
|
||||
|
|
|
|||
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 1.9 MiB |
|
|
@ -55,7 +55,7 @@ const toggleClick = () => {
|
|||
@mouseenter="visible = true"
|
||||
@mouseleave="visible = false"
|
||||
/>
|
||||
</el-tooltip>
|
||||
</el-tooltip>z
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -19,7 +19,7 @@ const { title } = useNav();
|
|||
class="sidebar-logo-link"
|
||||
:to="getTopMenu()?.path ?? '/'"
|
||||
>
|
||||
<img src="/logo2.png" alt="logo" />
|
||||
<!-- <img src="/logo2.png" alt="logo" />-->
|
||||
<span class="sidebar-title">{{ title }}</span>
|
||||
</router-link>
|
||||
<router-link
|
||||
|
|
@ -29,7 +29,7 @@ const { title } = useNav();
|
|||
class="sidebar-logo-link"
|
||||
:to="getTopMenu()?.path ?? '/'"
|
||||
>
|
||||
<img src="/logo2.png" alt="logo" />
|
||||
<!-- <img src="/logo2.png" alt="logo" />-->
|
||||
<span class="sidebar-title">{{ title }}</span>
|
||||
</router-link>
|
||||
</transition>
|
||||
|
|
@ -55,12 +55,13 @@ const { title } = useNav();
|
|||
}
|
||||
|
||||
.sidebar-title {
|
||||
font-family: 'Monoton';
|
||||
display: inline-block;
|
||||
height: 32px;
|
||||
margin: 2px 0 0 12px;
|
||||
margin: 0 0 0 6px;
|
||||
overflow: hidden;
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 100 !important;
|
||||
line-height: 32px;
|
||||
color: $subMenuActiveText;
|
||||
text-overflow: ellipsis;
|
||||
|
|
|
|||
|
|
@ -63,7 +63,11 @@ watch(
|
|||
}
|
||||
);
|
||||
|
||||
const systemRouter=computed(()=>{
|
||||
return menuData.value.find(item=>item.name=='系统设置')
|
||||
})
|
||||
onMounted(() => {
|
||||
console.log(menuData.value)
|
||||
getSubMenuData();
|
||||
|
||||
emitter.on("logoChange", key => {
|
||||
|
|
@ -85,31 +89,42 @@ onBeforeUnmount(() => {
|
|||
<Logo v-if="showLogo" :collapse="isCollapse" />
|
||||
<el-scrollbar
|
||||
wrap-class="scrollbar-wrapper"
|
||||
:class="[device === 'mobile' ? 'mobile' : 'pc']"
|
||||
:class="[device === 'mobile' ? 'mobile' : 'pc h-full']"
|
||||
>
|
||||
<el-menu
|
||||
router
|
||||
unique-opened
|
||||
mode="vertical"
|
||||
class="outer-most select-none"
|
||||
class="outer-most select-none flex flex-col h-full"
|
||||
:collapse="isCollapse"
|
||||
:default-active="defaultActive"
|
||||
:collapse-transition="false"
|
||||
>
|
||||
<sidebar-item
|
||||
v-for="routes in menuData"
|
||||
:key="routes.path"
|
||||
:item="routes"
|
||||
:base-path="routes.path"
|
||||
class="outer-most select-none"
|
||||
/>
|
||||
<div>
|
||||
<sidebar-item
|
||||
v-for="routes in menuData.filter(item=>item.name!='系统设置')"
|
||||
:key="routes.path"
|
||||
:item="routes"
|
||||
:base-path="routes.path"
|
||||
class="outer-most select-none"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="systemRouter" class="flex flex-col flex-1 justify-end bg-[#2c374a] dark:bg-[unset]">
|
||||
<sidebar-item
|
||||
:key="systemRouter.path"
|
||||
:item="systemRouter"
|
||||
:base-path="systemRouter.path"
|
||||
class="outer-most select-none system border-t-[1px]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
</el-menu>
|
||||
</el-scrollbar>
|
||||
<leftCollapse
|
||||
v-if="device !== 'mobile'"
|
||||
:is-active="pureApp.sidebar.opened"
|
||||
@toggleClick="toggleSideBar"
|
||||
/>
|
||||
<!-- <leftCollapse-->
|
||||
<!-- v-if="device !== 'mobile'"-->
|
||||
<!-- :is-active="pureApp.sidebar.opened"-->
|
||||
<!-- @toggleClick="toggleSideBar"-->
|
||||
<!-- />-->
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -117,4 +132,16 @@ onBeforeUnmount(() => {
|
|||
:deep(.el-loading-mask) {
|
||||
opacity: 0.45;
|
||||
}
|
||||
:deep(.el-scrollbar__view){
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
</style>
|
||||
<style>
|
||||
.system::before {
|
||||
//inset:0 0 !important;
|
||||
//margin: 0 !important;
|
||||
//border-radius: 0 !important;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -15,22 +15,22 @@ export function useDataThemeChange() {
|
|||
const themeColors = ref<Array<themeColorsType>>([
|
||||
/* 道奇蓝（默认） */
|
||||
{ color: "#1b2a47", themeColor: "default" },
|
||||
/* 亮白色 */
|
||||
{ color: "#ffffff", themeColor: "light" },
|
||||
/* 猩红色 */
|
||||
{ color: "#f5222d", themeColor: "dusk" },
|
||||
/* 橙红色 */
|
||||
{ color: "#fa541c", themeColor: "volcano" },
|
||||
/* 金色 */
|
||||
{ color: "#fadb14", themeColor: "yellow" },
|
||||
/* 绿宝石 */
|
||||
{ color: "#13c2c2", themeColor: "mingQing" },
|
||||
/* 酸橙绿 */
|
||||
{ color: "#52c41a", themeColor: "auroraGreen" },
|
||||
/* 深粉色 */
|
||||
{ color: "#eb2f96", themeColor: "pink" },
|
||||
/* 深紫罗兰色 */
|
||||
{ color: "#502e7e", themeColor: "saucePurple" }
|
||||
// /* 亮白色 */
|
||||
// { color: "#ffffff", themeColor: "light" },
|
||||
// /* 猩红色 */
|
||||
// { color: "#f5222d", themeColor: "dusk" },
|
||||
// /* 橙红色 */
|
||||
// { color: "#fa541c", themeColor: "volcano" },
|
||||
// /* 金色 */
|
||||
// { color: "#fadb14", themeColor: "yellow" },
|
||||
// /* 绿宝石 */
|
||||
// { color: "#13c2c2", themeColor: "mingQing" },
|
||||
// /* 酸橙绿 */
|
||||
// { color: "#52c41a", themeColor: "auroraGreen" },
|
||||
// /* 深粉色 */
|
||||
// { color: "#eb2f96", themeColor: "pink" },
|
||||
// /* 深紫罗兰色 */
|
||||
// { color: "#502e7e", themeColor: "saucePurple" }
|
||||
]);
|
||||
|
||||
const { $storage } = useGlobal<GlobalPropertiesApi>();
|
||||
|
|
|
|||
|
|
@ -6,16 +6,30 @@ import {type multipleScopeVarsOptions} from "@pureadmin/theme";
|
|||
|
||||
/** 预设主题色 */
|
||||
const themeColors = {
|
||||
// default: {
|
||||
// subMenuActiveText: "#fff",
|
||||
// // menuBg: "#271b3d",
|
||||
// menuBg: "linear-gradient(0deg, rgb(41 18 49) 28%, rgb(42 30 72) 100%, rgb(0, 212, 255) 100%)",
|
||||
// menuHover: "#4091f7",
|
||||
// subMenuBg: "#231531",
|
||||
// subMenuActiveBg: "#9840f7",
|
||||
// menuText: "rgb(254 254 254 / 90%)",
|
||||
// // sidebarLogo: "linear-gradient(85deg, rgb(67 39 113) 38%, rgb(91 0 132) 100%, rgba(0,212,255,1) 100%)",
|
||||
// sidebarLogo: "#281b41",
|
||||
// // sidebarLogo: "#422e6c",
|
||||
// menuTitleHover: "#fff",
|
||||
// menuActiveBefore: "#4091f7"
|
||||
// },
|
||||
default: {
|
||||
subMenuActiveText: "#fff",
|
||||
// menuBg: "#271b3d",
|
||||
menuBg: "linear-gradient(0deg, rgb(41 18 49) 28%, rgb(42 30 72) 100%, rgb(0, 212, 255) 100%)",
|
||||
menuBg: "#334154",
|
||||
menuHover: "#4091f7",
|
||||
subMenuBg: "#231531",
|
||||
subMenuActiveBg: "#9840f7",
|
||||
subMenuBg: "#222d3c",
|
||||
subMenuActiveBg: "#334154",
|
||||
menuText: "rgb(254 254 254 / 90%)",
|
||||
// sidebarLogo: "linear-gradient(85deg, rgb(67 39 113) 38%, rgb(91 0 132) 100%, rgba(0,212,255,1) 100%)",
|
||||
sidebarLogo: "#281b41",
|
||||
sidebarLogo: "#3d4e63",
|
||||
// sidebarLogo: "#422e6c",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#4091f7"
|
||||
|
|
|
|||
|
|
@ -13,7 +13,8 @@ const themeColors = {
|
|||
subMenuBg: "#080d1e",
|
||||
subMenuActiveBg: "#4091f7",
|
||||
menuText: "rgb(254 254 254 / 90%)",
|
||||
sidebarLogo: "#2f315b",
|
||||
// sidebarLogo: "#2f315b",
|
||||
sidebarLogo: "#3d4e63",
|
||||
menuTitleHover: "#fff",
|
||||
menuActiveBefore: "#4091f7"
|
||||
},
|
||||
|
|
|
|||
|
|
@ -17,7 +17,16 @@ export default {
|
|||
name: "dashboard",
|
||||
component: () => import("@/views/dashboard/dashboard.vue"),
|
||||
meta: {
|
||||
title: "首页",
|
||||
title: "评级看板",
|
||||
showLink: VITE_HIDE_HOME === "true" ? false : true
|
||||
}
|
||||
},
|
||||
{
|
||||
path: "/dashboard2",
|
||||
name: "dashboard2",
|
||||
component: () => import("@/views/dashboard/dashboard2.vue"),
|
||||
meta: {
|
||||
title: "评级动态",
|
||||
showLink: VITE_HIDE_HOME === "true" ? false : true
|
||||
}
|
||||
},
|
||||
|
|
|
|||
|
|
@ -23,3 +23,5 @@
|
|||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -11,14 +11,19 @@
|
|||
height: 100vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-gap: 18rem;
|
||||
padding: 0 2rem;
|
||||
/*grid-gap: 18rem;*/
|
||||
/*padding: 0 2rem;*/
|
||||
}
|
||||
|
||||
.img {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
background: radial-gradient(at left top, #2D77D2, #FFFFE3);
|
||||
}
|
||||
|
||||
html[class*="dark"] .img{
|
||||
background :radial-gradient(at left top, #3e597a, #00084b);
|
||||
}
|
||||
|
||||
.img img {
|
||||
|
|
@ -29,6 +34,7 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
text-align: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
|
|
@ -49,7 +55,7 @@
|
|||
|
||||
@media screen and (max-width: 1180px) {
|
||||
.login-container {
|
||||
grid-gap: 9rem;
|
||||
/*grid-gap: 9rem;*/
|
||||
}
|
||||
|
||||
.login-form {
|
||||
|
|
@ -88,3 +94,5 @@
|
|||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@ body {
|
|||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
|
||||
"Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
line-height: inherit;
|
||||
font-weight: bold;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
text-rendering: optimizelegibility;
|
||||
|
|
|
|||
|
|
@ -103,7 +103,7 @@
|
|||
&.has-logo {
|
||||
.el-scrollbar.pc {
|
||||
/* logo: 48px、leftCollapse: 40px、leftCollapse-shadow: 4px */
|
||||
height: calc(100% - 92px);
|
||||
height: calc(100% - 48px);
|
||||
}
|
||||
|
||||
.el-scrollbar.mobile {
|
||||
|
|
@ -178,7 +178,7 @@
|
|||
margin: 4px 0;
|
||||
clear: both;
|
||||
content: "";
|
||||
background: var(--el-color-primary) !important;
|
||||
background: #697d93 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -227,7 +227,7 @@
|
|||
margin: 4px 0;
|
||||
clear: both;
|
||||
content: "";
|
||||
background: var(--el-color-primary) !important;
|
||||
background: #697d93 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
|
@ -293,7 +293,7 @@
|
|||
inset: 0 8px;
|
||||
clear: both;
|
||||
content: "";
|
||||
background: var(--el-color-primary) !important;
|
||||
background: #697d93 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
|
|
@ -382,7 +382,7 @@
|
|||
inset: 0 5px;
|
||||
clear: both;
|
||||
content: "";
|
||||
background: var(--el-color-primary) !important;
|
||||
background: #697d93 !important;
|
||||
border-radius: 3px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -19,3 +19,5 @@
|
|||
@apply dark:text-white dark:hover:!bg-[#242424];
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,393 @@
|
|||
<template>
|
||||
<div class="h-full w-full ">
|
||||
<div class="w-full h-full flex flex-col gap-4">
|
||||
<div class="flex-1 flex gap-4 min-h-[20rem] justify-around">
|
||||
<div class="flex-1 dash-item bg-white dark:bg-[var(--el-bg-color)]" id="dash-1"></div>
|
||||
<div class="flex-1 dash-item bg-white dark:bg-[var(--el-bg-color)]" id="dash-2"></div>
|
||||
<div class="flex-1 dash-item bg-white dark:bg-[var(--el-bg-color)] flex flex-col" id="dash-3">
|
||||
<div class="flex justify-between mb-1" style="font-weight: 100;">
|
||||
<div style="opacity: 0.7">
|
||||
我的项目
|
||||
</div>
|
||||
<div>
|
||||
<el-button type="primary" size="small">进入作业页面</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="border-line"></div>
|
||||
<div class="flex flex-col flex-1">
|
||||
<div class="flex-1">
|
||||
<div style="font-size: 0.9rem;font-weight: 400" class="my-2">今日截止项目</div>
|
||||
<div class="">a</div>
|
||||
<div>a</div>
|
||||
<div>a</div>
|
||||
</div>
|
||||
<div class="flex-1">
|
||||
<div style="font-size: 0.9rem;font-weight: 400" class="my-2">待完成的项目</div>
|
||||
<div>a</div>
|
||||
<div>a</div>
|
||||
<div>a</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex-1 flex flex-col pb-4 bg-white dark:bg-[var(--el-bg-color)]" style="overflow-y: auto">
|
||||
<div style="font-weight: 100;opacity: 0.7" class="m-2 mb-0.5">项目列表</div>
|
||||
<div class="border-line"></div>
|
||||
<div class="flex-1 overflow-y-auto">
|
||||
<el-table :data="tableData" height="100%">
|
||||
<el-table-column prop="projectName" label="项目名称"/>
|
||||
<el-table-column prop="customerName" label="客户"/>
|
||||
<el-table-column prop="state" label="状态"/>
|
||||
<el-table-column prop="createTime" label="创建时间"/>
|
||||
<el-table-column prop="finishTime" label="截止时间"/>
|
||||
<el-table-column prop="projectManager" label="项目经理"/>
|
||||
<el-table-column prop="analyst" label="分析师"/>
|
||||
<el-table-column label="操作">
|
||||
<template #default>
|
||||
<el-button type="primary" link>查看</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
|
||||
defineOptions({
|
||||
name: "dashboard2"
|
||||
})
|
||||
import * as echarts from 'echarts/core';
|
||||
import {
|
||||
TitleComponent,
|
||||
TooltipComponent,
|
||||
LegendComponent
|
||||
} from 'echarts/components';
|
||||
import {PieChart} from 'echarts/charts';
|
||||
import {LabelLayout} from 'echarts/features';
|
||||
import {CanvasRenderer} from 'echarts/renderers';
|
||||
import {GridComponent} from 'echarts/components';
|
||||
import {LineChart} from 'echarts/charts';
|
||||
import {UniversalTransition} from 'echarts/features';
|
||||
import {useDark} from "@pureadmin/utils";
|
||||
|
||||
echarts.use([
|
||||
TitleComponent,
|
||||
GridComponent,
|
||||
LineChart,
|
||||
CanvasRenderer,
|
||||
UniversalTransition,
|
||||
TooltipComponent,
|
||||
LegendComponent,
|
||||
PieChart,
|
||||
LabelLayout
|
||||
]);
|
||||
|
||||
|
||||
const tableData = ref<{
|
||||
projectName: string
|
||||
customerName: string
|
||||
state: string
|
||||
createTime: string
|
||||
finishTime: string
|
||||
projectManager: string
|
||||
analyst: string
|
||||
}[]>([
|
||||
{
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, , {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, , {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, , {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
}, , {
|
||||
projectName: "项目1",
|
||||
customerName: "客户1",
|
||||
state: "材料审核",
|
||||
createTime: "2023-09-27",
|
||||
finishTime: "2023-09-27",
|
||||
projectManager: "张三",
|
||||
analyst: "李四",
|
||||
},
|
||||
])
|
||||
|
||||
function createDash1() {
|
||||
const chartDom = document.getElementById('dash-1');
|
||||
const myChart = echarts.init(chartDom,isDark.isDark.value ? 'dark' : 'light');
|
||||
let option;
|
||||
|
||||
option = {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
grid: {
|
||||
bottom: '10%'
|
||||
},
|
||||
title: {
|
||||
text: '已完成中小商企信用评级',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 100
|
||||
},
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'item'
|
||||
},
|
||||
legend: {
|
||||
top: '37%',
|
||||
right: 'right',
|
||||
orient: 'vertical'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
radius: ['40%', '40%'],
|
||||
type: 'pie',
|
||||
zlevel: -1,
|
||||
data: [{value: 1048}],
|
||||
tooltip: {show: false},
|
||||
label: {
|
||||
normal: {
|
||||
show: true,
|
||||
position: 'center', // 展示在中间位置
|
||||
formatter: () => {
|
||||
return `{b|总评级次数}\n\n{a|${1239}次}`;
|
||||
},
|
||||
rich: {
|
||||
a: {
|
||||
fontSize: 24,
|
||||
fontWeight: 900
|
||||
},
|
||||
b: {
|
||||
fontSize: 14,
|
||||
fontWeight: 400,
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
{
|
||||
name: 'Access From',
|
||||
type: 'pie',
|
||||
radius: ['40%', '68%'],
|
||||
avoidLabelOverlap: false,
|
||||
label: {
|
||||
show: true,
|
||||
position: 'inside',
|
||||
formatter: '{d}%'
|
||||
},
|
||||
|
||||
labelLine: {
|
||||
show: false
|
||||
},
|
||||
data: [
|
||||
{value: 1048, name: 'AAA+'},
|
||||
{value: 735, name: 'AAA'},
|
||||
{value: 580, name: 'AA'},
|
||||
{value: 484, name: 'A'},
|
||||
{value: 300, name: 'A-'}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
dashDict.dash1.chart=myChart
|
||||
dashDict.dash1.option=option
|
||||
window.addEventListener('resize', () => {
|
||||
setTimeout(() => myChart?.resize(), 300)
|
||||
})
|
||||
}
|
||||
|
||||
function createDash2() {
|
||||
const chartDom = document.getElementById('dash-2');
|
||||
const myChart = echarts.init(chartDom,isDark.isDark.value ? 'dark' : 'light');
|
||||
let option;
|
||||
|
||||
option = {
|
||||
backgroundColor: 'rgba(0,0,0,0)',
|
||||
title: {
|
||||
text: '已完成中小商企信用评级',
|
||||
textStyle: {
|
||||
fontSize: 16,
|
||||
fontWeight: 100
|
||||
}
|
||||
},
|
||||
grid: {
|
||||
bottom: '10%',
|
||||
right: '5%'
|
||||
},
|
||||
xAxis: {
|
||||
type: 'category',
|
||||
boundaryGap: false,
|
||||
data: ['9月27', '9月28', '9月29', '9月30', '10月1', '10月2', '10月3']
|
||||
},
|
||||
yAxis: {
|
||||
type: 'value'
|
||||
},
|
||||
series: [
|
||||
{
|
||||
data: [10, 14, 13, 16, 22, 22, 19],
|
||||
type: 'line',
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
|
||||
{
|
||||
offset: 0,
|
||||
color: 'rgba(0, 0, 200, 0.4)'
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: 'rgba(0, 0, 0, 0)'
|
||||
}
|
||||
])
|
||||
}
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
option && myChart.setOption(option);
|
||||
dashDict.dash2.chart=myChart
|
||||
dashDict.dash2.option=option
|
||||
window.addEventListener('resize', () => {
|
||||
setTimeout(() => myChart?.resize(), 200)
|
||||
})
|
||||
}
|
||||
|
||||
const dashDict = {
|
||||
dash1: {
|
||||
chart: null,
|
||||
option: null,
|
||||
id: 'dash-1'
|
||||
},
|
||||
dash2: {
|
||||
chart: null,
|
||||
option: null,
|
||||
id: 'dash-2'
|
||||
},
|
||||
}
|
||||
const isDark = useDark()
|
||||
watch(() => isDark.isDark.value, (value: boolean) => {
|
||||
Object.values(dashDict).forEach(dash => {
|
||||
if (dash.chart) {
|
||||
dash.chart.dispose();
|
||||
dash.chart = echarts.init(document.getElementById(dash.id), value ? 'dark' : 'light'); //init函数后加参数：'light'/'dark'即为浅色深色主题
|
||||
dash.option && dash.chart.setOption(dash.option);
|
||||
}
|
||||
}
|
||||
)
|
||||
|
||||
})
|
||||
|
||||
onMounted(() => {
|
||||
createDash1()
|
||||
createDash2()
|
||||
})
|
||||
</script>
|
||||
<style scoped>
|
||||
.dash-item {
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
.border-line {
|
||||
height: 1px;
|
||||
border: 1px solid rgba(119, 119, 119, 0.58);
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
@ -12,7 +12,7 @@ import {bg, avatar, illustration} from "./utils/static";
|
|||
import {useRenderIcon} from "@/components/ReIcon/src/hooks";
|
||||
import {ref, reactive, toRaw, onMounted, onBeforeUnmount} from "vue";
|
||||
import {useDataThemeChange} from "@/layout/hooks/useDataThemeChange";
|
||||
|
||||
import loginBgBar from "@/assets/login_bg_bar.png"
|
||||
import dayIcon from "@/assets/svg/day.svg?component";
|
||||
import darkIcon from "@/assets/svg/dark.svg?component";
|
||||
import Lock from "@iconify-icons/ri/lock-fill";
|
||||
|
|
@ -99,7 +99,7 @@ onBeforeUnmount(() => {
|
|||
|
||||
<template>
|
||||
<div class="select-none">
|
||||
<img :src="bg" class="wave login-bg"/>
|
||||
<!-- <img :src="bg" class="wave login-bg"/>-->
|
||||
<div class="flex-c absolute right-5 top-3">
|
||||
<!-- 主题 -->
|
||||
<el-switch
|
||||
|
|
@ -111,17 +111,24 @@ onBeforeUnmount(() => {
|
|||
/>
|
||||
</div>
|
||||
<div class="login-container">
|
||||
<div class="img">
|
||||
<component :is="toRaw(illustration)"/>
|
||||
<div class="flex-c img flex-col" >
|
||||
<div style="color:white;position: relative;margin-bottom: -4rem">
|
||||
<span style="font-family: monoton;font-weight: 100;font-size: 2rem">{{ title }}</span>
|
||||
<span style="font-size: 2rem;margin-left: 0.5rem">评级作业平台</span>
|
||||
</div>
|
||||
<img :src="loginBgBar" alt="">
|
||||
</div>
|
||||
<!-- <div class="img">-->
|
||||
<!-- <component :is="toRaw(illustration)"/>-->
|
||||
<!-- </div>-->
|
||||
<div class="login-box">
|
||||
<div class="login-form">
|
||||
<div class="avatar flex-c">
|
||||
<img src="@/assets/login/logo2.png" alt=""/>
|
||||
</div>
|
||||
<!-- <div class="avatar flex-c">-->
|
||||
<!-- <img src="@/assets/login/logo2.png" alt=""/>-->
|
||||
<!-- </div>-->
|
||||
<!-- <avatar class="avatar" />-->
|
||||
<Motion>
|
||||
<h2 class="outline-none">{{ title }}</h2>
|
||||
<h2 class="outline-none" style="color: var( --el-color-primary);font-size: 1.25rem;font-family: none;font-weight: 500">验证码登录</h2>
|
||||
</Motion>
|
||||
|
||||
<el-form
|
||||
|
|
@ -136,13 +143,13 @@ onBeforeUnmount(() => {
|
|||
{
|
||||
required: true,
|
||||
message: '请输入邮箱或手机号',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="account"
|
||||
>
|
||||
<el-input
|
||||
clearable
|
||||
:validate-event="false"
|
||||
v-model="ruleForm.account"
|
||||
placeholder="账户"
|
||||
:prefix-icon="useRenderIcon(User)"
|
||||
|
|
@ -156,7 +163,6 @@ onBeforeUnmount(() => {
|
|||
{
|
||||
required: true,
|
||||
message: '请输入验证码',
|
||||
trigger: 'blur'
|
||||
}
|
||||
]"
|
||||
prop="code"
|
||||
|
|
@ -165,6 +171,7 @@ onBeforeUnmount(() => {
|
|||
clearable
|
||||
v-model="ruleForm.code"
|
||||
placeholder="验证码"
|
||||
:validate-event="false"
|
||||
:prefix-icon="useRenderIcon(Lock)"
|
||||
>
|
||||
<template #append>
|
||||
|
|
|
|||
Loading…
Reference in New Issue