-
+
+ ,
default: '',
},
+ subtitle: {
+ type: String as PropType,
+ default: '',
+ },
compact: {
type: Boolean as PropType,
default: false,
@@ -37,11 +42,15 @@ export default defineComponent({
type: String as PropType,
default: 'default',
},
+ border: {
+ type: Boolean,
+ default: false,
+ },
},
setup(props) {
const containerCls = computed(() => {
- const { compact } = props;
- return ['card-container', { 'card-container-compact': compact }];
+ const { compact, border } = props;
+ return ['card-container', { 'card-container-compact': compact, 'card-container--border': border }];
});
const titleCls = computed(() => {
@@ -49,8 +58,8 @@ export default defineComponent({
return [
'card-title',
{
- 'card-title-small': size === 'small',
- 'card-title-default': size !== 'small',
+ 'card-title--small': size === 'small',
+ 'card-title--default': size !== 'small',
},
];
});
@@ -59,8 +68,8 @@ export default defineComponent({
const { size } = props;
return [
{
- 'card-title-text-small': size === 'small',
- 'card-title-text-default': size !== 'small',
+ 'card-title__text--small': size === 'small',
+ 'card-title__text--default': size !== 'small',
},
];
});
@@ -74,12 +83,29 @@ export default defineComponent({
});
diff --git a/src/components/trend/index.vue b/src/components/trend/index.vue
index 834f1d0..ab73088 100644
--- a/src/components/trend/index.vue
+++ b/src/components/trend/index.vue
@@ -67,38 +67,38 @@ export default defineComponent({
.trend {
&-container {
&__up {
- color: #e34d59 !important;
+ color: @error-color;
display: inline-flex;
align-items: center;
justify-content: center;
.trend-icon-container {
- background: #f9d7d9;
- margin-right: 4px;
+ background: @error-color-2;
+ margin-right: 8px;
}
}
&__down {
- color: #00a870 !important;
+ color: @success-color;
display: inline-flex;
align-items: center;
justify-content: center;
.trend-icon-container {
- background: #bcebdc;
- margin-right: 4px;
+ background: @success-color-2;
+ margin-right: 8px;
}
}
&__reverse {
- color: #ffffff !important;
+ color: #ffffff;
display: inline-flex;
align-items: center;
justify-content: center;
.trend-icon-container {
background: @brand-color-5;
- margin-right: 4px;
+ margin-right: 8px;
}
}
diff --git a/src/config/global.ts b/src/config/global.ts
index 205a1e0..18c2515 100644
--- a/src/config/global.ts
+++ b/src/config/global.ts
@@ -1,10 +1,4 @@
export const PREFIX = 'tdesign-starter';
export const THEME = 'light';
-// customize(自定义登录，外网域名，统一重定向到登录页面)
-// export const authenticationMethod = 'smartProxy';
export const AUTHENTICATION_METHOD = 'customize';
-export default {
- PREFIX,
- THEME,
- AUTHENTICATION_METHOD,
-};
+export const TOKEN_NAME = 'tdesign-starter';
diff --git a/src/interface.ts b/src/interface.ts
index 1fdb229..b791437 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -9,7 +9,9 @@ export interface MenuRoute {
path: string;
title?: string;
icon?: string;
+ redirect?: string;
children: MenuRoute[];
+ meta: any;
}
export type ModeType = 'dark' | 'light';
@@ -21,3 +23,13 @@ export type ClassName = { [className: string]: any } | ClassName[] | string;
export type CommonObjType = {
[key: string]: string | number;
};
+
+export interface NotificationItem {
+ id: string;
+ content: string;
+ type: string;
+ status: boolean;
+ collected: boolean;
+ date: string;
+ quality: 'high' | 'low' | 'middle';
+}
diff --git a/src/layouts/blank.vue b/src/layouts/blank.vue
new file mode 100644
index 0000000..9c9e48b
--- /dev/null
+++ b/src/layouts/blank.vue
@@ -0,0 +1,19 @@
+
+
+
+ {{ item.title }}
+
+
+
+
+
+
diff --git a/src/layouts/components/Content.vue b/src/layouts/components/Content.vue
new file mode 100644
index 0000000..e3b9e02
--- /dev/null
+++ b/src/layouts/components/Content.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/Footer.vue b/src/layouts/components/Footer.vue
new file mode 100644
index 0000000..1306300
--- /dev/null
+++ b/src/layouts/components/Footer.vue
@@ -0,0 +1,27 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/Search.vue b/src/layouts/components/Search.vue
new file mode 100644
index 0000000..94304c5
--- /dev/null
+++ b/src/layouts/components/Search.vue
@@ -0,0 +1,113 @@
+
+
+
+ ,
+ default: () => [],
+ },
+ showLogo: {
+ type: Boolean as PropType,
+ default: true,
+ },
+ isFixed: {
+ type: Boolean as PropType,
+ default: true,
+ },
+ layout: {
+ type: String as PropType,
+ default: '',
+ },
+ headerHeight: {
+ type: String as PropType,
+ default: '64px',
+ },
+ theme: {
+ type: String as PropType,
+ default: 'light',
+ },
+ isCompact: {
+ type: Boolean as PropType,
+ default: false,
+ },
+ },
+ setup(props) {
+ const store = useStore();
+ const router = useRouter();
+
+ const changeCollapsed = () => {
+ store.commit('setting/toggleSidebarCompact');
+ };
+
+ const autoCollapsed = () => {
+ const isCompact = window.innerWidth <= MIN_POINT;
+ store.commit('setting/showSidebarCompact', isCompact);
+ };
+
+ onMounted(() => {
+ autoCollapsed();
+ window.onresize = () => {
+ autoCollapsed();
+ };
+ });
+
+ const getActiveName = (maxLevel = 2) => {
+ const route = useRoute();
+ if (!route.path) {
+ return '';
+ }
+ return route.path
+ .split('/')
+ .filter((_item: string, index: number) => index <= maxLevel && index > 0)
+ .map((item: string) => `/${item}`)
+ .join('');
+ };
+
+ const routerChange = (path: string) => {
+ router.push({
+ path,
+ });
+ };
+
+ const goHome = () => {
+ router.push('/dashboard/base');
+ };
+
+ return {
+ PREFIX,
+ ...useComputed(props),
+ autoCollapsed,
+ changeCollapsed,
+ getActiveName,
+ routerChange,
+ goHome,
+ };
+ },
+ render() {
+ const active = this.getActiveName();
+ return (
+ ) => {
+ return list.map((item) => {
+ if (!item.children || !item.children.length || item.meta?.single) {
+ return (
+ item.icon &&
+ );
+ }
+ return (
+ item.icon &&
+ );
+ });
+};
+
+export default defineComponent({
+ name: 'SubMenu',
+ props: {
+ navData: {
+ type: Array as PropType,
+ default: () => [],
+ },
+ },
+ setup(props) {
+ const list = computed(() => {
+ const { navData } = props;
+ return getMenuList(navData);
+ });
+
+ return {
+ prefix,
+ list,
+ useRenderNav,
+ };
+ },
+ render() {
+ return
+
+ {showBreadcrumb &&
+ {showFooter && this.renderFooter()}
+
+ );
+ },
+
+ renderFooter() {
+ return (
+
+
+ );
+ },
+ },
+
+ render() {
+ const { layout } = this.setting;
+ const header = this.renderHeader();
+ const sidebar = this.renderSidebar();
+ const content = this.renderContent();
+ const footer = this.renderFooter();
+
+ return (
+
+
+
+
+
diff --git a/src/main.ts b/src/main.ts
index 68e69f7..59f9a0c 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -7,6 +7,7 @@ import { store } from './store';
import router from './router';
import '@/style/index.less';
+import './permission';
const app = createApp(App);
diff --git a/src/pages/dashboard/base/constants.ts b/src/pages/dashboard/base/constants.ts
index a0f4e63..153e170 100644
--- a/src/pages/dashboard/base/constants.ts
+++ b/src/pages/dashboard/base/constants.ts
@@ -1,6 +1,6 @@
import { TdBaseTableProps } from 'tdesign-vue-next';
-interface DashboardPannel {
+interface DashboardPanel {
title: string;
number: string | number;
leftType: string;
@@ -15,7 +15,7 @@ interface TendItem {
date: string;
}
-export const PANE_LIST: Array = [
+export const PANE_LIST: Array = [
{
title: '总收入',
number: '¥ 28,425.00',
@@ -31,7 +31,7 @@ export const PANE_LIST: Array = [
{
title: '活跃用户（个）',
number: '1126',
- downTrend: '20.5%',
+ upTrend: '20.5%',
leftType: 'icon-usergroup',
},
{
@@ -125,14 +125,15 @@ export const SALE_COLUMNS: TdBaseTableProps['columns'] = [
align: 'center',
colKey: 'index',
title: '排名',
- width: 64,
+ width: 80,
+ fixed: 'left',
},
{
align: 'left',
ellipsis: true,
colKey: 'productName',
title: '客户名称',
- minWidth: '200',
+ minWidth: 200,
},
{
align: 'center',
@@ -149,14 +150,15 @@ export const SALE_COLUMNS: TdBaseTableProps['columns'] = [
{
align: 'center',
colKey: 'date',
- width: 132,
+ width: 140,
title: '合同签订日期',
},
{
align: 'center',
colKey: 'operation',
title: '操作',
- width: 76,
+ width: 80,
+ fixed: 'right',
},
];
@@ -165,7 +167,8 @@ export const BUY_COLUMNS: TdBaseTableProps['columns'] = [
align: 'center',
colKey: 'index',
title: '排名',
- width: 64,
+ width: 80,
+ fixed: 'left',
},
{
align: 'left',
@@ -184,18 +187,19 @@ export const BUY_COLUMNS: TdBaseTableProps['columns'] = [
align: 'center',
colKey: 'count',
title: '订单量',
- width: '100',
+ width: 100,
},
{
align: 'center',
colKey: 'date',
- width: 132,
+ width: 140,
title: '合同签订日期',
},
{
align: 'center',
colKey: 'operation',
title: '操作',
- width: 76,
+ width: 80,
+ fixed: 'right',
},
];
diff --git a/src/pages/dashboard/base/index.less b/src/pages/dashboard/base/index.less
index 7c6b142..37ee4a8 100644
--- a/src/pages/dashboard/base/index.less
+++ b/src/pages/dashboard/base/index.less
@@ -1,63 +1,4 @@
-@import '@/style/index';
-
-.t-tabs__content {
- padding-top: @spacer-3;
-}
-
-.card-title-text-default {
- display: inline-block;
- white-space: nowrap;
-}
-
-.card-option {
- width: 100%;
- justify-content: right !important;
-
- .dashboard-chart-title-left {
- display: flex;
- justify-content: left;
- align-self: left;
- width: 100%;
- color: rgb(0 0 0 / 40%);
- font-size: 15px;
- padding-left: 8px;
- }
-}
-
-.dashboard-panel {
- padding: 0;
- border-radius: @border-radius;
-
- >div {
- padding: 4px;
- }
-
- .card-container {
- .card-content {
- &-label-title {
- color: @text-color-primary;
- padding-bottom: 4px;
- }
-
- .t-table-content {
- overflow: auto;
- }
- }
-
- .t-table th,
- .t-table td {
- padding: 10px 8px;
- }
-
- .t-table tr {
- color: @text-color-primary;
- }
- }
-}
-
-.dashboard-item-perfix {
- margin-right: 0 !important;
-}
+@import '@/style/variables.less';
.dashboard-item {
display: flex;
@@ -72,11 +13,15 @@
> span {
display: inline-block;
- color: black;
+ color: @text-color-primary;
font-size: 36px;
line-height: 44px;
}
}
+
+ &:hover {
+ cursor: pointer;
+ }
}
.dashboard-item-bottom {
@@ -87,167 +32,9 @@
> .t-icon {
cursor: pointer;
- color: inherit;
}
}
-.dashboard-bottom {
- margin-top: 16px;
- display: flex;
- flex-direction: row;
-
- /* 左边图表 */
- .dashboard-bottom-left {
- width: 100%;
- height: 100%;
-
- .dashboard-bottom-left-top {
- display: flex;
- flex-direction: row;
- width: 100%;
- height: 100%;
-
- /* 计量统计 */
- .dashboard-bottom-left-top-count-chart {
- padding: 20px 24px;
- background-color: white;
- border-radius: @border-radius;
- width: 100%;
- min-width: 300px;
- height: 320px;
- }
-
- /* 动态监测 */
- .dashboard-bottom-left-top-monitor-chart {
- padding: 20px 24px;
- background-color: white;
- border-radius: @border-radius;
- margin-left: 16px;
- width: 100%;
- height: 320px;
- }
- }
-
- /* 出入库概览（） */
- .dashboard-bottom-left-bottom {
- background-color: white;
- padding: 20px 24px;
- border-radius: @border-radius;
- margin-top: 16px;
- width: 100%;
- display: flex;
- flex-direction: column;
- justify-content: center;
- min-height: 366px;
- }
- }
-
- /* 右边列表-实时热度趋势 */
- .dashboard-bottom-right {
- padding: 20px 24px;
- background-color: white;
- border-radius: @border-radius;
- margin-left: 16px;
- width: 426px;
- min-height: 690px;
-
- ul {
- padding-top: 16px;
-
- li {
- .dashboard-chart-tend-item-title {
- color: grey !important;
- }
-
- .dashboard-chart-tend-sep {
- padding: 0 0 17px !important;
- }
-
- .dashboard-chart-tend-item-line {
- border-bottom: solid 1px #dedede;
- padding: 9px 0;
- }
-
- .dashboard-chart-tend-item {
- display: flex;
- flex-direction: row;
- justify-content: space-between;
-
- .dashboard-chart-tend-left {
- display: flex;
- flex-direction: row;
-
- .dashboard-chart-tend-num {
- width: 48px;
- }
-
- .dashboard-chart-tend-rante {
- width: 48px;
- }
- }
- }
- }
- }
- }
-}
-
-/* 标题内容 */
-.dashboard-chart-title {
- display: flex;
- flex-direction: row;
- align-items: center;
- justify-content: space-between;
- font-weight: bold;
-
- &-describe {
- font-size: 14px !important;
- color: rgb(0 0 0 / 60%) !important;
- text-align: left;
- line-height: 22px;
- }
-
- &-container {
- .t-date-picker {
- width: 240px;
- }
- }
-
- span {
- font-size: 16px;
- color: rgb(0 0 0 / 90%);
- overflow: hidden;
- text-overflow: ellipsis;
- }
-
- .dashboard-chart-title-search {
- display: flex;
- flex-direction: row;
- border: 1px solid #ddd;
- border-radius: @border-radius;
- padding: 0;
- align-items: center;
- justify-content: center;
- font-weight: normal;
-
- input {
- border: solid 0 #fff !important;
- }
- }
-
- label {
- font-weight: normal !important;
- padding: 5px 15px !important;
-
- .t-radio-button__label {
- font-size: 10px !important;
- }
- }
-}
-
-.dashboard-chart-container {
- margin: 0 auto;
-}
-
.dashboard-item-block {
display: flex;
align-items: center;
@@ -257,10 +44,10 @@
}
.dashboard-item-trend {
- margin-left: 4px;
+ margin-left: 8px;
}
-.dashbord-item-left {
+.dashboard-item-left {
position: absolute;
top: 32px;
right: 32px;
@@ -281,7 +68,7 @@
}
}
-.dashbord-rank {
+.dashboard-rank {
display: inline-flex;
width: 24px;
height: 24px;
@@ -298,32 +85,15 @@
}
}
-.row-container {
- margin-bottom: 8px !important;
-}
-
-.overview-pannel {
+.overview-panel {
background-color: @bg-color-container;
border-radius: 3px;
}
-.card-container.main-color {
- background: @brand-color;
- color: @text-color-primary;
-
- .card-describe {
- color: white;
- }
-
- .dashboard-item-top span {
- color: white;
- }
-
- .dashboard-item-block {
- color: rgb(255 255 255 / 55%);
- }
-
- .dashboard-item-bottom {
- color: white;
- }
+.row-container {
+ margin-top: 16px;
+}
+
+.card-date-picker-container {
+ width: 240px;
}
diff --git a/src/pages/dashboard/base/index.ts b/src/pages/dashboard/base/index.ts
index 6e98dfa..82c5c63 100644
--- a/src/pages/dashboard/base/index.ts
+++ b/src/pages/dashboard/base/index.ts
@@ -32,7 +32,7 @@ export function getColorFromTheme(theme: string) {
/** 图表颜色 */
function chartListColor(): Array {
const colorList: Array = ['#0052D9', '#BCC4D0', '#7D46BD', '#0594FA', '#ED7B2F'];
- const { setting } = state;
+ const { setting } = state as any;
return getColorFromTheme(setting.brandTheme) || colorList;
}
@@ -1020,13 +1020,16 @@ export function getPieChartDataSet(radius = 42) {
return {
color: chartListColor(),
tooltip: {
- trigger: 'item',
+ show: false,
+ trigger: 'axis',
+ position: null,
},
grid: {
top: '0',
right: '0',
},
legend: {
+ selectedMode: false,
itemWidth: 12,
itemHeight: 4,
textStyle: {
@@ -1042,7 +1045,10 @@ export function getPieChartDataSet(radius = 42) {
name: '销售渠道',
type: 'pie',
radius: ['48%', '60%'],
- avoidLabelOverlap: false,
+ avoidLabelOverlap: true,
+ selectedMode: true,
+ hoverAnimation: true,
+ silent: true,
label: {
show: true,
position: 'center',
@@ -1050,13 +1056,13 @@ export function getPieChartDataSet(radius = 42) {
rich: {
value: {
color: '#303133',
- fontSize: 36,
+ fontSize: 28,
fontWeight: 'normal',
lineHeight: 46,
},
name: {
color: '#909399',
- fontSize: 14,
+ fontSize: 12,
lineHeight: 14,
},
},
@@ -1068,7 +1074,7 @@ export function getPieChartDataSet(radius = 42) {
rich: {
value: {
color: '#303133',
- fontSize: 36,
+ fontSize: 28,
fontWeight: 'normal',
lineHeight: 46,
},
diff --git a/src/pages/dashboard/base/index.vue b/src/pages/dashboard/base/index.vue
index 6090334..15698da 100644
--- a/src/pages/dashboard/base/index.vue
+++ b/src/pages/dashboard/base/index.vue
@@ -1,14 +1,13 @@
-
{{ title }}
{{ describe }}
-
+ {{ subtitle }}
+
+
+
+
+
diff --git a/src/layouts/components/Breadcrumb.vue b/src/layouts/components/Breadcrumb.vue
new file mode 100644
index 0000000..50cb4e4
--- /dev/null
+++ b/src/layouts/components/Breadcrumb.vue
@@ -0,0 +1,46 @@
+
+ Copyright @ 2021-{{ new Date().getFullYear() }} Tencent. All Rights Reserved
+
+
+
+
+
diff --git a/src/layouts/components/Header.vue b/src/layouts/components/Header.vue
new file mode 100644
index 0000000..55fa868
--- /dev/null
+++ b/src/layouts/components/Header.vue
@@ -0,0 +1,351 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/Notice.vue b/src/layouts/components/Notice.vue
new file mode 100644
index 0000000..06111f1
--- /dev/null
+++ b/src/layouts/components/Notice.vue
@@ -0,0 +1,207 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tencent
+
+
+
+
+ 设为已读
+
+
+
+
+
+
+
+ 清空
+
+ 通知
+
+
+ {{ item.content }}
+{{ item.type }}
+{{ item.date }}
+ +
+ 
+
+
+ 暂无通知
+
+ 查看全部
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/layouts/components/SideNav.tsx b/src/layouts/components/SideNav.tsx
new file mode 100644
index 0000000..fc14d1e
--- /dev/null
+++ b/src/layouts/components/SideNav.tsx
@@ -0,0 +1,173 @@
+import { defineComponent, PropType, computed, onMounted } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { useStore } from 'vuex';
+import { PREFIX } from '@/config/global';
+import pgk from '../../../package.json';
+import SubMenu from './SubMenu';
+import tLogoUrl from '@/assets/assets-t-logo.svg?url';
+import tLogoFull from '@/assets/assets-logo-full.svg?component';
+
+const MIN_POINT = 992 - 1;
+
+const useComputed = (props) => {
+ const store = useStore();
+
+ const collapsed = computed(() => store.state.setting.isSidebarCompact);
+
+ const sideNavCls = computed(() => {
+ const { isCompact } = props;
+ return [
+ `${PREFIX}-sidebar-layout`,
+ {
+ [`${PREFIX}-sidebar-compact`]: isCompact,
+ },
+ ];
+ });
+
+ const menuCls = computed(() => {
+ const { showLogo, isFixed, layout } = props;
+ return [
+ `${PREFIX}-side-nav`,
+ {
+ [`${PREFIX}-side-nav-no-logo`]: !showLogo,
+ [`${PREFIX}-side-nav-no-fixed`]: !isFixed,
+ [`${PREFIX}-side-nav-mix-fixed`]: layout === 'mix' && isFixed,
+ },
+ ];
+ });
+
+ const layoutCls = computed(() => {
+ const { layout } = props;
+ return [`${PREFIX}-side-nav-${layout}`, `${PREFIX}-sidebar-layout`];
+ });
+
+ return {
+ collapsed,
+ sideNavCls,
+ menuCls,
+ layoutCls,
+ };
+};
+
+export default defineComponent({
+ name: 'SideNav',
+ components: {
+ SubMenu,
+ tLogoFull,
+ },
+ props: {
+ menu: {
+ type: Array as PropType
+
+ this.showLogo && (
+
+ {this.collapsed ? (
+ 
+ ) : (
+
+
+
+ );
+ },
+});
diff --git a/src/layouts/components/SubMenu.tsx b/src/layouts/components/SubMenu.tsx
new file mode 100644
index 0000000..03ddf42
--- /dev/null
+++ b/src/layouts/components/SubMenu.tsx
@@ -0,0 +1,72 @@
+import { defineComponent, PropType, computed } from 'vue';
+import { PREFIX as prefix } from '@/config/global';
+import { MenuRoute } from '@/interface';
+
+const getMenuList = (list: MenuRoute[], basePath?: string): MenuRoute[] => {
+ if (!list) {
+ return [];
+ }
+ return list.map((item) => {
+ const path = basePath ? `${basePath}/${item.path}` : item.path;
+ return {
+ path,
+ title: item.meta?.title,
+ icon: item.meta?.icon || '',
+ children: getMenuList(item.children, path),
+ meta: item.meta,
+ redirect: item.redirect,
+ };
+ });
+};
+
+const useRenderNav = (list: Array{this.useRenderNav(this.list)}
;
+ },
+});
diff --git a/src/layouts/index.tsx b/src/layouts/index.tsx
new file mode 100644
index 0000000..e18987b
--- /dev/null
+++ b/src/layouts/index.tsx
@@ -0,0 +1,166 @@
+import { defineComponent } from 'vue';
+import { mapGetters } from 'vuex';
+import TdesignHeader from './components/Header.vue';
+import TdesignBreadcrumb from './components/Breadcrumb.vue';
+import TdesignFooter from './components/Footer.vue';
+import TdesignSideNav from './components/SideNav';
+import TdesignContent from './components/Content.vue';
+
+import { PREFIX } from '@/config/global';
+import TdesignSetting from './setting.vue';
+import { ModeType, SettingType, ClassName } from '@/interface';
+import '@/style/layout.less';
+
+const name = `${PREFIX}-base-layout`;
+
+export default defineComponent({
+ name,
+ components: {
+ TdesignHeader,
+ TdesignFooter,
+ TdesignSideNav,
+ TdesignSetting,
+ TdesignBreadcrumb,
+ TdesignContent,
+ },
+ computed: {
+ ...mapGetters({
+ showSidebar: 'setting/showSidebar',
+ showHeader: 'setting/showHeader',
+ showHeaderLogo: 'setting/showHeaderLogo',
+ showSidebarLogo: 'setting/showSidebarLogo',
+ showFooter: 'setting/showFooter',
+ mode: 'setting/mode',
+ menuRouters: 'permission/routers',
+ }),
+ setting(): SettingType {
+ return this.$store.state.setting;
+ },
+ mainLayoutCls(): ClassName {
+ return [
+ {
+ 't-layout-has-sider': this.showSidebar,
+ },
+ ];
+ },
+ headerMenu() {
+ const { layout, splitMenu } = this.$store.state.setting;
+ const { menuRouters } = this;
+ if (layout === 'mix') {
+ if (splitMenu) {
+ return menuRouters.map((menu) => ({
+ ...menu,
+ children: [],
+ }));
+ }
+ return [];
+ }
+ return menuRouters;
+ },
+ sideMenu() {
+ const { layout, splitMenu } = this.$store.state.setting;
+ const { menuRouters } = this;
+ if (layout === 'mix' && splitMenu) {
+ let index;
+ for (index = 0; index < menuRouters.length; index++) {
+ const item = menuRouters[index];
+ if (item.children && item.children.length > 0) {
+ return item.children.map((menuRouter) => ({ ...menuRouter, path: `${item.path}/${menuRouter.path}` }));
+ }
+ }
+ }
+ return menuRouters;
+ },
+ },
+ methods: {
+ getNavTheme(mode: ModeType, layout: string, type: string): string {
+ if (mode === 'dark') {
+ return 'dark';
+ }
+ if (type.includes(layout)) {
+ return 'dark';
+ }
+ return this.mode;
+ },
+ renderSidebar() {
+ // const theme =
+ // this.setting.mode === 'dark' ? 'dark' : this.setting.layout === 'mix' ? 'light' : this.setting.theme;
+ // menu 组件最多支持 3级菜单
+ const theme = this.getNavTheme(this.setting.mode, this.setting.layout, ['side']);
+ return (
+ this.showSidebar && (
+
+ {layout === 'side' ? (
+
+ {sidebar}
+ {[header, content]}
+
+ ) : (
+
+ {header}
+ {[sidebar, content]}
+ {this.showFooter && footer}
+
+ )}
+
+ );
+ },
+});
diff --git a/src/layouts/setting.vue b/src/layouts/setting.vue
new file mode 100644
index 0000000..10283ee
--- /dev/null
+++ b/src/layouts/setting.vue
@@ -0,0 +1,269 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 主题模式
+
+
+
+
+ 主题色
+
+
+
+
+ 导航布局
+
+
+
+
+ 元素开关
+
+ 复制配置项
+
+ 请复制后手动修改配置文件: /src/config/style.js
+
-
-
+
+
-
+
{{ item.number }}
-
+
-
+
-
-
-
-
(万元) {{ currentMonth }}
{{ currentMonth }}
-
+
- 操作
+ 操作
@@ -132,9 +127,8 @@
+
-
+
-
-
(件)
-
-
+
-
-
- 导出数据
-
-
+
+
+ 导出数据
+
-
+
1726
@@ -191,7 +181,7 @@
-
+
@@ -309,12 +299,37 @@ export default defineComponent({
console.log(val);
},
getRankClass(index: number) {
- return ['dashbord-rank', { 'dashbord-rank__top': index < 3 }];
+ return ['dashboard-rank', { 'dashboard-rank__top': index < 3 }];
},
};
},
});
-
+
diff --git a/src/pages/dashboard/detail/constants.ts b/src/pages/dashboard/detail/constants.ts
index e1d9529..8bdabad 100644
--- a/src/pages/dashboard/detail/constants.ts
+++ b/src/pages/dashboard/detail/constants.ts
@@ -1,33 +1,34 @@
export const PANE_LIST_DATA = [
{
title: '总申请数（次）',
- count: 1126,
- percent: 10,
+ number: '1126',
+ upTrend: '10%',
},
{
title: '供应商数量（个）',
- count: 1126,
- percent: -13,
+ number: '13',
+ downTrend: '13%',
},
{
title: '采购商品品类（类）',
- count: 1126,
- percent: 10,
+ number: '4',
+ upTrend: '10%',
},
{
title: '申请人数量（人）',
- count: 1126,
- percent: 44,
+ number: 90,
+ downTrend: '44%',
+ leftType: 'icon-file-paste',
},
{
title: '申请完成率（%）',
- count: 1126,
- percent: 70,
+ number: 80.5,
+ upTrend: '70%',
},
{
title: '到货及时率（%）',
- count: 78,
- percent: 16,
+ number: 78,
+ upTrend: '16%',
},
];
diff --git a/src/pages/dashboard/detail/index.less b/src/pages/dashboard/detail/index.less
index c214df6..3afaa32 100644
--- a/src/pages/dashboard/detail/index.less
+++ b/src/pages/dashboard/detail/index.less
@@ -1,18 +1,10 @@
-@import '@/style/index';
+@import '@/style/variables.less';
-.t-tabs__content {
- padding-top: @spacer-3;
-}
-
-.list-card-item + .list-card-item {
+.card-container-margin {
margin-top: 16px;
}
-.dashboard-panel-detail {
- margin-top: -16px;
-}
-
-.card-date-picker {
+.card-date-picker-container {
width: 240px;
}
@@ -20,30 +12,39 @@
margin-left: 8px;
}
-.dashboard-detail-container-item {
- height: 168px;
- border: solid 1px #ebebeb;
- padding: 24px 32px;
- box-sizing: border-box;
- border-radius: @border-radius;
+.dark {
+ .dashboard-detail-container-item {
+ &:hover {
+ background: @gray-color-14;
+ cursor: pointer;
+ }
+ }
+}
- &:hover {
- background: @gray-color-1;
- cursor: pointer;
+.light {
+ .dashboard-detail-container-item {
+ &:hover {
+ background: @gray-color-1;
+ cursor: pointer;
+ }
+ }
+}
+
+.dashboard-detail-container-item {
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+ flex: 1;
+ height: 170px;
+
+ .title {
+ color: @text-color-secondary;
}
- h1 {
+ .number {
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;
- }
+ line-height: 44px;
+ color: @text-color-primary;
}
.dashboard-detail-container-item-text {
@@ -52,27 +53,25 @@
align-items: center;
justify-content: space-between;
font-size: 14px;
- color: rgba(0,0,0,.40);
+ color: @text-color-placeholder;
text-align: left;
- line-height: 22px;
-
- > span {
+ line-height: 18px;
+
+ &-left {
display: flex;
+
+ .icon {
+ margin: 0 8px;
+ }
}
}
}
-
-
-
-.dashboard-detail-bottom-container {
- padding: 20px 24px;
- background-color: white;
- border-radius: @border-radius;
- margin-top: 16px;
- min-height: 400px;
+.dashboard-chart-title-left {
+ display: flex;
+ width: 100%;
+ color: @text-color-placeholder;
+ justify-content: left;
+ font-size: 15px;
+ padding-left: 8px;
}
-
-.trend-container {
- margin-left: 4px;
-}
\ No newline at end of file
diff --git a/src/pages/dashboard/detail/index.vue b/src/pages/dashboard/detail/index.vue
index dd9921e..55f253d 100644
--- a/src/pages/dashboard/detail/index.vue
+++ b/src/pages/dashboard/detail/index.vue
@@ -1,46 +1,50 @@
-
+
-
-
+
-
+
-
-
-
+
diff --git a/src/pages/detail/advanced/constants.ts b/src/pages/detail/advanced/constants.ts
index afac053..50fcacf 100644
--- a/src/pages/detail/advanced/constants.ts
+++ b/src/pages/detail/advanced/constants.ts
@@ -1,10 +1,3 @@
-interface TableRowType {
- index: number;
- pdName: string;
- purchaseNum: number;
- updateTime: string;
-}
-
export const BASE_INFO_DATA = [
{
name: '合同名称',
@@ -86,52 +79,50 @@ export const BASE_INFO_DATA = [
export const TABLE_COLUMNS_DATA = [
{
- align: 'center',
- minWidth: '250',
+ width: 300,
ellipsis: true,
colKey: 'index',
title: '申请号',
- sorter: (a: TableRowType, b: TableRowType) => a.index - b.index,
+ sorter: (a, b) => a.index.substr(3) - b.index.substr(3),
},
{
- minWidth: '100',
+ width: 200,
ellipsis: true,
colKey: 'pdName',
title: '产品名称',
- sorter: (a: TableRowType, b: TableRowType) => a.pdName.length - b.pdName.length,
+ sorter: (a, b) => a.pdName.length - b.pdName.length,
},
{
- minWidth: '250',
+ width: 200,
ellipsis: true,
colKey: 'pdNum',
title: '产品编号',
},
{
- minWidth: '100',
+ width: 200,
ellipsis: true,
colKey: 'purchaseNum',
title: '采购数量',
- sorter: (a: TableRowType, b: TableRowType) => a.purchaseNum - b.purchaseNum,
+ sorter: (a, b) => a.purchaseNum - b.purchaseNum,
},
{
- minWidth: '100',
+ width: 200,
ellipsis: true,
colKey: 'adminName',
title: '申请部门',
},
{
- minWidth: '250',
- className: 'test',
+ width: 200,
ellipsis: true,
colKey: 'updateTime',
title: '创建时间',
- sorter: (a: TableRowType, b: TableRowType) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
+ sorter: (a, b) => Date.parse(a.updateTime) - Date.parse(b.updateTime),
},
{
align: 'left',
+ fixed: 'right',
width: 200,
className: 'test2',
- ellipsis: true,
colKey: 'op',
title: '操作',
},
@@ -139,8 +130,8 @@ export const TABLE_COLUMNS_DATA = [
export const PRODUCT_LIST = [
{
- name: 'Macbook Pro 2021',
- subTitle: 'Macbook Pro 2021',
+ name: 'MacBook Pro 2021',
+ subTitle: 'MacBook Pro 2021',
size: '13.3 英寸',
cpu: 'Apple M1',
memory: 'RAM 16GB',
diff --git a/src/pages/detail/advanced/index.less b/src/pages/detail/advanced/index.less
index 85192b7..63965cb 100644
--- a/src/pages/detail/advanced/index.less
+++ b/src/pages/detail/advanced/index.less
@@ -1,29 +1,7 @@
-@import '@/style/index';
+@import '@/style/variables.less';
+@import '../base//index.less';
-.t-tabs__content {
- padding-top: @spacer-3;
-}
-
-.t-layout--content-replace {
- color: rgba(0, 0, 0, .6) !important;
-}
-
-.t-table.t-size-l th,
-.t-table.t-size-l td {
- padding: 13px 13px 12px 24px;
- line-height: 22px;
-}
-
-.row-padding {
- padding-top: 30px;
- padding-left: 20px;
-}
-
-.t-tag.t-size-s {
- margin-left: 8px;
-}
-
-.operater-add {
+.product-add {
width: 100%;
height: 256px;
display: flex;
@@ -33,7 +11,7 @@
border: dashed 1px #dedede;
border-radius: 3px;
- .operater-sub-icon {
+ .product-sub-icon {
background: #ecf2fe;
color: @brand-color;
font-size: 33px;
@@ -41,7 +19,7 @@
border-radius: 100%;
}
- .operater-sub {
+ .product-sub {
font-size: 14px;
color: @text-color-secondary;
margin: 0 auto;
@@ -53,7 +31,6 @@
cursor: pointer;
svg {
-
rect {
fill: @brand-color-1;
}
@@ -68,233 +45,3 @@
padding-top: 12px;
}
}
-
-.operater-gap {
- margin-left: 20px;
-}
-
-.operater-block {
- position: relative;
- background-color: #fff;
- border: 1px solid #e3e6eb;
- border-radius: 3px;
-
- .operater-content {
- padding: 20px 32px 24px 32px;
- height: 256px;
-
- .operater-title-icon {
- background: #ecf2fe;
- color: @brand-color;
- font-size: 56px;
- padding: 14px;
- border-radius: 100%;
- }
-
- .operater-title {
- margin-bottom: 25px;
- position: relative;
-
- h1 {
- display: inline-block;
- font-weight: 500;
- font-size: 24px;
- }
-
- &-subtitle {
- display: block;
- font-weight: 400;
- font-size: 14px;
- width: 60%;
- color: rgba(0, 0, 0, .4);
- }
-
- &-tag {
- margin-right: 4px;
- margin-top: 8px;
- margin-left: unset;
- border: unset
- }
-
- &-icon {
- position: absolute;
- top: 0px;
- right: 0px;
- }
-
- svg {
-
- circle {
- fill: @brand-color-2;
- }
-
- path {
- fill: @brand-color;
- }
- }
- }
-
- .operater-item {
- position: relative;
- padding-top: 8px;
- padding-bottom: 8px;
-
- &-info {
- display: inline-block;
- width: 60%;
- text-align: left;
- font-size: 14px;
- color: rgba(0, 0, 0, .4);
- }
-
- &-icon {
- position: absolute;
- bottom: 8px;
- right: 0;
- }
- }
- }
-
- .operater-footer {
- position: absolute;
- width: 100%;
- bottom: 0px;
- left: 0;
-
- .t-progress--thin {
- display: unset;
- }
-
- &-percentage {
- position: absolute;
- bottom: 15px;
- right: 32px;
- color: rgba(0, 0, 0, .4);
- }
- }
-}
-
-.@{prefix} {
-
- &-panel {
- background-color: white;
- padding: @spacer-3 @spacer-4 @spacer-4 @spacer-4;
- border-radius: @border-radius;
- }
-
- &-search-input {
- width: 360px;
- margin-right: 8px;
- }
-
- &-operater-row {
- margin-bottom: 32px;
- }
-
- &-operater-title {
- font-size: 20px;
- color: rgba(0, 0, 0, .9);
- }
-
- &-operater-label {
- color: #000;
- padding-left: 112px;
- }
-}
-
-.advanced-card {
- margin-top: 0 !important;
-
- .card-title-default {
- margin-bottom: 12px;
- }
-}
-
-.info-block {
- column-count: 2;
- margin-bottom: 12px;
-
- .info-item {
- padding: 12px 0;
- display: flex;
-
- @media (max-width: @screen-sm-max) {
-
- h1 {
- width: 80px;
- }
- }
-
- @media (min-width: @screen-md-min) {
-
- h1 {
- width: 200px;
- }
- }
-
- h1 {
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: @text-color-secondary;
- text-align: left;
- line-height: 22px;
- }
-
- span {
- margin-left: 24px;
- }
-
- i {
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: @border-radius-50;
- background: @success-color-5;
- }
-
- .inProgress {
- color: @success-color-5;
- }
-
- .pdf {
- color: @brand-color-8;
- }
- }
-}
-
-.dialog-info-block {
-
- .info-item {
- padding: 12px 0;
- display: flex;
-
- h1 {
- width: 84px;
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: @text-color-secondary;
- text-align: left;
- line-height: 22px;
- }
-
- span {
- margin-left: 24px;
- }
-
- i {
- display: inline-block;
- width: 8px;
- height: 8px;
- border-radius: @border-radius-50;
- background: @success-color-5;
- }
-
- .green {
- color: @success-color-5;
- }
-
- .blue {
- color: @brand-color-8;
- }
- }
-}
diff --git a/src/pages/detail/advanced/index.vue b/src/pages/detail/advanced/index.vue
index 965415b..4e60135 100644
--- a/src/pages/detail/advanced/index.vue
+++ b/src/pages/detail/advanced/index.vue
@@ -1,6 +1,6 @@
226
@@ -206,7 +196,7 @@
-
+
- {{ item.title }}
-
+
+ {{ item.count }}
+{{ item.number }}
- 环比
-
+ 环比
+
-
+
-
+
-
-
+
+
+
-
+
季度
月份
-
+
-
{{ item.name }}
@@ -18,30 +18,30 @@ -
-
-
+
+
@@ -53,7 +53,7 @@
-
+
-
+
+
+
diff --git a/src/pages/detail/secondary/index.less b/src/pages/detail/secondary/index.less
index d0af381..6971cdd 100644
--- a/src/pages/detail/secondary/index.less
+++ b/src/pages/detail/secondary/index.less
@@ -50,10 +50,6 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
-
- span {
- font-family: PingFangSC-Regular;
- }
}
.unread {
@@ -72,5 +68,6 @@
min-height: 443px;
padding-top: 170px;
text-align: center;
+ color: @text-color-primary;
}
}
diff --git a/src/pages/detail/secondary/index.vue b/src/pages/detail/secondary/index.vue
index 7672de9..3c9b53f 100644
--- a/src/pages/detail/secondary/index.vue
+++ b/src/pages/detail/secondary/index.vue
@@ -1,58 +1,59 @@
-
-
-
+
-
+
+
+ 基本信息
-{{ item.name }}
@@ -18,26 +15,103 @@
-
-
-
-
-
- 变更记录
-
-
-
-
-
-
{{
+ product.isSetup ? '已启用' : '已停用'
+ }}
-
+
@@ -51,13 +54,15 @@
diff --git a/src/pages/list/card/index.less b/src/pages/list/card/index.less
new file mode 100644
index 0000000..44ad880
--- /dev/null
+++ b/src/pages/list/card/index.less
@@ -0,0 +1,31 @@
+@import '@/style/variables.less';
+
+.list-card {
+ height: 100%;
+
+ &-operation {
+ display: flex;
+ justify-content: space-between;
+
+ .search-input {
+ width: 360px;
+ }
+ }
+
+ &-items {
+ margin-top: 14px;
+ margin-bottom: 24px;
+ }
+
+ &-pagination {
+ padding: 16px;
+ }
+
+ &-loading {
+ height: 100%;
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ }
+}
diff --git a/src/pages/list/card/index.vue b/src/pages/list/card/index.vue
index b728d64..c64d8bc 100644
--- a/src/pages/list/card/index.vue
+++ b/src/pages/list/card/index.vue
@@ -1,66 +1,67 @@
-
-
+
-
+
+
+
+
+
-
-
-
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
- 暂无通知
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 暂无通知
+
-
- - {{ product.isSetup ? '已启用' : '已停用' }} -
+
{{ product.name }}
@@ -25,11 +25,12 @@
{{ typeMap[product.type - 1] }}
- 新建产品
-
-
+
+
-
+ 新建产品
+
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {{ isExpand ? '收起' : '展开' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
查询
重置
-
-
-
+
@@ -86,8 +84,8 @@
- 管理
- 删除
+ 管理
+ 删除
-
diff --git a/src/pages/login/components/Header.vue b/src/pages/login/components/Header.vue
new file mode 100644
index 0000000..ec2593e
--- /dev/null
+++ b/src/pages/login/components/Header.vue
@@ -0,0 +1,78 @@
+
+
+
+
+
+
+
+
diff --git a/src/pages/login/components/Login.vue b/src/pages/login/components/Login.vue
index 4becbb3..be5a154 100644
--- a/src/pages/login/components/Login.vue
+++ b/src/pages/login/components/Login.vue
@@ -1,5 +1,4 @@
-
-
+
-
-
-
-
-
@@ -67,7 +58,7 @@
-
+
登录
@@ -98,8 +89,11 @@ const INITIAL_DATA = {
};
const FORM_RULES = {
- phone: [{ required: true, message: '手机号必填', type: 'error' }],
account: [{ required: true, message: '账号必填', type: 'error' }],
+ phone: [
+ { required: true, message: '手机号必填', type: 'error' },
+ { telnumber: true, message: '请输入正确的手机号', type: 'warning' },
+ ],
password: [{ required: true, message: '密码必填', type: 'error' }, { validator: passwordValidator }],
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
};
@@ -121,15 +115,18 @@ export default defineComponent({
const router = useRouter();
const store = useStore();
- const onSubmit = ({ validateResult }) => {
+ const onSubmit = async ({ validateResult }) => {
if (validateResult === true) {
- store.commit('user/SET_USER_INFO', formData.value);
-
- MessagePlugin.success('登录成功');
-
- router.push({
- path: '/',
- });
+ try {
+ await store.dispatch('user/login', formData.value);
+ MessagePlugin.success('登陆成功');
+ router.push({
+ path: '/dashboard/base',
+ });
+ } catch (e) {
+ console.log(e);
+ MessagePlugin.error(e.message);
+ }
}
};
diff --git a/src/pages/login/components/Register.vue b/src/pages/login/components/Register.vue
index 772f70b..aae82f6 100644
--- a/src/pages/login/components/Register.vue
+++ b/src/pages/login/components/Register.vue
@@ -9,13 +9,7 @@
>
-
+
-
-
-
+
+
+
@@ -88,7 +74,7 @@
import { defineComponent, ref } from 'vue';
import { MessagePlugin } from 'tdesign-vue-next';
import { useCounter } from '@/utils/hooks';
-import { passwordValidator, getEmails } from '../helper';
+import { passwordValidator } from '../helper';
const INITIAL_DATA = {
phone: '',
@@ -100,7 +86,10 @@ const INITIAL_DATA = {
const FORM_RULES = {
phone: [{ required: true, message: '手机号必填', type: 'error' }],
- email: [{ required: true, email: true, message: '邮箱必填', type: 'error' }],
+ email: [
+ { required: true, message: '邮箱必填', type: 'error' },
+ { email: true, message: '请输入正确的邮箱', type: 'warning' },
+ ],
password: [{ required: true, message: '密码必填', type: 'error' }, { validator: passwordValidator }],
verifyCode: [{ required: true, message: '验证码必填', type: 'error' }],
};
@@ -109,11 +98,6 @@ export default defineComponent({
setup(props, ctx) {
const type = ref('phone');
const emailOptions = ref([]);
- const remoteMethod = (search: string) => {
- if (search && search.indexOf('@') === -1) {
- emailOptions.value = getEmails(search);
- }
- };
const form = ref();
const formData = ref({ ...INITIAL_DATA });
@@ -146,7 +130,6 @@ export default defineComponent({
form,
type,
emailOptions,
- remoteMethod,
countDown,
handleCounter,
onSubmit,
diff --git a/src/pages/login/helper.ts b/src/pages/login/helper.ts
index 468c7e0..3dd3eb8 100644
--- a/src/pages/login/helper.ts
+++ b/src/pages/login/helper.ts
@@ -8,34 +8,6 @@ export const passwordValidator = (val) => {
return { result: true };
};
-export const getEmails = (search) => [
- {
- value: `${search}@qq.com`,
- label: `${search}@qq.com`,
- },
- {
- value: `${search}@gmail.com`,
- label: `${search}@gmail.com`,
- },
- {
- value: `${search}@126.com`,
- label: `${search}@126.com`,
- },
- {
- value: `${search}@163.com`,
- label: `${search}@163.com`,
- },
- {
- value: `${search}@21cn.com`,
- label: `${search}@21cn.com`,
- },
- {
- value: `${search}@yahoo.com`,
- label: `${search}@yahoo.com`,
- },
-];
-
export default {
passwordValidator,
- getEmails,
};
diff --git a/src/pages/login/index.less b/src/pages/login/index.less
index 99bfb27..e05d20c 100644
--- a/src/pages/login/index.less
+++ b/src/pages/login/index.less
@@ -1,9 +1,23 @@
-@import '@/style/index';
+@import '@/style/variables.less';
+
+.light {
+ &.login-wrapper {
+ background-color: white;
+ background-image: url('@/assets/assets-login-bg-white.png');
+ }
+}
+
+.dark {
+ &.login-wrapper {
+ background-color: @bg-color-page;
+ background-image: url('@/assets/assets-login-bg-black.png');
+ }
+}
.login-wrapper {
- width: 100%;
- height: 100%;
- background-image: url('https://tdesign.gtimg.com/pro-template/login-bg-img.jpg');
+ height: 100vh;
+ display: flex;
+ flex-direction: column;
background-size: cover;
background-position: 50%;
position: relative;
@@ -11,53 +25,68 @@
.login-container {
position: absolute;
- top: 28%;
- left: 12%;
+ top: 22%;
+ left: 5%;
min-height: 500px;
line-height: 22px;
}
.title-container {
- .icon {
- width: 290px;
- height: 40px;
+ .title {
+ font-size: 36px;
+ line-height: 44px;
+ color: @text-color-primary;
+ margin-top: 4px;
+
+ &.margin-no {
+ margin-top: 0;
+ }
}
- .side-title {
- margin-top: 24.9px;
+ .sub-title {
+ margin-top: 16px;
- .tip1,
- .tip2 {
+ .tip {
display: inline-block;
margin-right: 8px;
- }
-
- .tip1 {
font-size: 14px;
- color: rgb(0 0 0 / 60%);
- }
- .tip2 {
- font-size: 14px;
- color: @brand-color-8;
- cursor: pointer;
+ &:first-child {
+ color: @text-color-secondary;
+ }
+
+ &:last-child {
+ color: @text-color-primary;
+ cursor: pointer;
+ }
}
}
}
.item-container {
width: 400px;
- margin-top: 64px;
+ margin-top: 48px;
&.login-qrcode {
- margin-top: 34px;
-
.tip-container {
width: 192px;
+ margin-bottom: 16px;
+ font-size: 14px;
+ display: flex;
+ justify-content: space-between;
+
+ .tip {
+ color: @text-color-primary;
+ }
.refresh {
display: flex;
align-items: center;
+ color: @brand-color;
+
+ .t-icon {
+ font-size: 14px;
+ }
&:hover {
cursor: pointer;
@@ -76,14 +105,6 @@
}
}
- &.register-phone {
- margin-top: 64px;
-
- .t-select-popup-reference {
- margin: 0;
- }
- }
-
.check-container {
display: flex;
align-items: center;
@@ -98,7 +119,7 @@
}
span {
- color: @brand-color-8;
+ color: @brand-color;
&:hover {
cursor: pointer;
@@ -106,26 +127,6 @@
}
}
- .tip-container {
- margin-bottom: 16px;
-
- .tip1 {
- font-size: 14px;
- color: rgb(0 0 0 / 60%);
- }
-
- .tip2 {
- float: right;
- font-size: 14px;
- color: @brand-color-8;
-
- .t-icon {
- height: 20px;
- vertical-align: text-bottom;
- }
- }
- }
-
.verification-code {
display: flex;
align-items: center;
@@ -141,10 +142,14 @@
}
}
}
+
+ .btn-container {
+ margin-top: 48px;
+ }
}
.switch-container {
- margin-top: 66px;
+ margin-top: 24px;
.tip {
font-size: 14px;
@@ -173,7 +178,7 @@
.check-container {
font-size: 14px;
- color: rgb(0 0 0 / 60%);
+ color: @text-color-secondary;
.tip {
float: right;
diff --git a/src/pages/login/index.vue b/src/pages/login/index.vue
index d07564c..07fb4b0 100644
--- a/src/pages/login/index.vue
+++ b/src/pages/login/index.vue
@@ -1,27 +1,33 @@
+
+
+
+
+
+
+
+
- 请使用微信扫一扫登录
- 刷新
+
返回首页
diff --git a/src/pages/result/success/index.vue b/src/pages/result/success/index.vue
index a0fa921..3e6cb8b 100644
--- a/src/pages/result/success/index.vue
+++ b/src/pages/result/success/index.vue
@@ -1,25 +1,20 @@
-
-
- 
-
-
-
- {{ type == 'register' ? '没有账号吗?' : '已有账号?' }} -
-+
登录到
+TDesign Starter
+
+
{{ type == 'register' ? '已有账号?' : '没有账号吗?' }}
+{{ type == 'register' ? '登录' : '注册新账号' }}
-
项目已创建成功
- 可以联系负责人分发应用
-
- 查看进度
- 再次创建
-
+
+
@@ -44,6 +39,7 @@ export default defineComponent({
color: @text-color-primary;
text-align: center;
line-height: 22px;
+ font-weight: 500;
}
&-describe {
diff --git a/src/pages/user/constants.ts b/src/pages/user/constants.ts
index 7d3bfa0..b55737a 100644
--- a/src/pages/user/constants.ts
+++ b/src/pages/user/constants.ts
@@ -40,23 +40,23 @@ export const USER_INFO_LIST = [
export const TEAM_MEMBERS = [
{
- avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar5.png',
- title: 'Lovellzhang 张庆霖',
+ avatar: 'https://avatars.githubusercontent.com/Wen1kang',
+ title: 'Lovellzhong 钟某某',
description: '直客销售 港澳拓展组员工',
},
{
- avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar1.png',
- title: 'Jiajingwang 王佳静',
+ avatar: 'https://avatars.githubusercontent.com/pengYYYYY',
+ title: 'Jiajingwang 彭某某',
description: '前端开发 前台研发组员工',
},
{
- avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar5.png',
- title: 'cruisezhang 张超',
+ avatar: 'https://avatars.githubusercontent.com/u/24469546?s=96&v=4',
+ title: 'cruisezhang 林某某',
description: '技术产品 产品组员工',
},
{
- avatar: 'https://tdesign.gtimg.com/pro-template/personal/avatar3.png',
- title: 'Lovellzhang 张庆霖',
+ avatar: 'https://avatars.githubusercontent.com/u/88708072?s=96&v=4',
+ title: 'Lovellzhang 商某某',
description: '产品运营 港澳拓展组员工',
},
];
diff --git a/src/pages/user/index.less b/src/pages/user/index.less
index 6c5ece2..5cc9632 100644
--- a/src/pages/user/index.less
+++ b/src/pages/user/index.less
@@ -1,279 +1,166 @@
-@import '@/style/index';
+@import '@/style/variables.less';
-.user-panel {
- @media (max-width: @screen-sm-max) {
+.card-padding-no {
+ padding-left: 0;
+ padding-right: 0;
+}
- .user-right {
- min-width: 100%;
- }
+.user-left-greeting {
+ padding: 28px 32px;
+ line-height: 28px;
+ font-size: 20px;
+ background: @bg-color-container;
+ color: @text-color-primary;
+ text-align: left;
+ border-radius: @border-radius;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ .regular {
+ margin-right: 15px;
+ font-size: 14px;
}
- @media (min-width: @screen-md-min) {
+ .logo {
+ width: 180px;
+ }
+}
- .user-right {
- min-width: 33.33%;
- }
+.user-info-list {
+ margin-top: 16px;
+
+ .content {
+ width: 90%;
}
- .user-right {
- transition: width .3s linear;
+ .contract {
+ width: 340px;
+ height: 88px;
+ border-radius: @border-radius;
+ margin: 8px 0;
- &-greeting {
- margin-bottom: 16px;
- background: #fff;
- border-radius: @border-radius;
- }
-
- &-trend {
- margin-bottom: 16px;
- background: #fff;
- border-radius: @border-radius;
- }
-
- &-todo {
- margin-bottom: 16px;
- background: #fff;
- border-radius: @border-radius;
- }
- }
-
- .head-bar {
- display: flex;
- justify-content: space-between;
- margin-bottom: 8px;
-
- .title {
+ &-title {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
line-height: 24px;
- font-family: PingFangSC;
- font-size: 20px;
- color: @text-color-primary;
- text-align: left;
+ margin: 20px 0 6px;
+ font-family: PingFangSC-Regular;
+ font-size: 14px;
+ color: rgb(0 0 0 / 40%);
+ }
+
+ &-detail {
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+ line-height: 40px;
+ font-family: PingFangSC-Regular;
+ font-size: 14px;
+ color: rgb(0 0 0 / 90%);
+ }
+ }
+
+ .contract:last-child {
+ margin-bottom: 0;
+ }
+}
+
+.user-intro {
+ padding: 48px;
+ background: @brand-color;
+ border-radius: @border-radius;
+ color: @text-color-primary;
+
+ .name {
+ line-height: 37px;
+ font-size: 20px;
+ margin-top: 36px;
+ color: #fff;
+ }
+
+ .position {
+ line-height: 24px;
+ font-size: 14px;
+ margin-top: 8px;
+ color: #fff;
+ }
+
+ .user-info {
+ line-height: 24px;
+ font-size: 14px;
+ color: @text-color-primary;
+
+ .hiredate,
+ .del,
+ .mail {
+ display: flex;
}
.t-icon {
- font-size: 16px;
- color: rgba(0, 0, 0, .9);
+ height: 24px;
+ margin-right: 8px;
}
- .more {
- display: flex;
- align-items: center;
- justify-content: center;
- line-height: 22px;
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: @text-color-primary;
- cursor: pointer;
-
- .t-icon {
- vertical-align: bottom;
- font-size: 20px;
- }
-
- &:hover {
- color: @brand-color-8;
- }
- }
- }
-
- .user-right-panel {
-
- .user-top {
- padding: 48px;
- margin: 0 0 16px 16px;
- background: @brand-color;
- border-radius: @border-radius;
-
- .account {
- text-align: left;
- margin-bottom: 0;
- color: @text-color-primary;
-
- .img {
- display: block;
- width: 90px;
- height: 90px;
- border-radius: @border-radius-50;
- border: 1px solid @brand-color;
- background: #ebedf1;
- }
-
- .name {
- line-height: 37px;
- font-family: PingFangSC-Semibold;
- font-size: 20px;
- margin-top: 36px;
- color: #fff;
- }
-
- .position {
- line-height: 24px;
- font-family: PingFangSC-Regular;
- font-size: 14px;
- margin-top: 8px;
- color: #fff;
- }
- }
-
- .user-info {
- line-height: 24px;
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: @text-color-primary;
-
- .hiredate,
- .del,
- .mail {
- display: flex;
- }
-
- .t-icon {
- height: 24px;
- margin-right: 8px;
- }
-
- .del {
- margin: 16px 0;
- }
- }
- }
-
- .user-middle {
- padding: 28px 32px 5px 32px;
- margin: 0 0 16px 16px;
- background: #fff;
- border-radius: @border-radius;
-
- .t-list {
- margin: 20px 0;
- }
-
- .t-list-item {
- padding: 15px 0;
-
- .t-list-item__meta-avatar {
- height: 50px;
- width: 50px;
- margin: 0 24px 0 0;
- }
-
- .t-list-item__meta-description {
- display: inline-block;
- color: rgba(0, 0, 0, .4);
- font-size: 14px;
- }
- }
- }
-
- .user-bottom {
- padding: 24px 24px 5px 24px;
- margin: 0 0 16px 16px;
- background: #fff;
- border-radius: @border-radius;
-
- .content {
- width: 70%;
- margin: 24px 0 12px 0;
- }
-
- .user-right-logo {
- width: 48px;
- }
- }
- }
-
- .user-left-panel {
-
- .user-top {
-
- .user-left-greeting {
- padding: 28px 32px;
- line-height: 28px;
- font-family: PingFangSC-Semibold;
- font-size: 20px;
- color: @text-color-primary;
- text-align: left;
- background-color: #fff;
- border-radius: @border-radius;
-
- .regular {
- margin: 0 0 0 15px;
- vertical-align: bottom;
- font-family: PingFangSC-Semibold;
- font-size: 14px;
- }
- }
-
- .user-left-logo {
- float: right;
- width: 180px;
- }
-
- .user-right-info {
- margin: 16px 0;
- padding: 32px;
- background-color: #fff;
- border-radius: @border-radius;
-
- .content {
- width: 90%;
- }
-
- .contract {
- width: 340px;
- height: 88px;
- border-radius: @border-radius;
- margin: 8px 0;
-
- &-title {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- line-height: 24px;
- margin: 20px 0 6px 0;
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: rgba(0, 0, 0, .4);
- }
-
- &-detail {
- white-space: nowrap;
- text-overflow: ellipsis;
- overflow: hidden;
- line-height: 40px;
- font-family: PingFangSC-Regular;
- font-size: 14px;
- color: rgba(0, 0, 0, .9);
- }
- }
-
- .contract:last-child {
- margin-bottom: 0;
- }
- }
- }
-
- .user-bottom {
- margin: 0 0 16px 0;
- padding: 28px 32px;
- background: #fff;
- border-radius: @border-radius;
-
- .user-bottom-container {
- margin-top: 15px;
-
- .unit {
- font-size: 14px;
- font-family: PingFangSC-Regular;
- color: rgba(0, 0, 0, .4);
- }
-
- .time-picker {
- float: right;
- width: 250px;
- }
- }
+ .del {
+ margin: 16px 0;
}
}
}
+.product-container {
+ margin-top: 16px;
+ border-radius: @border-radius;
+
+ .content {
+ width: 70%;
+ margin: 24px 0 12px;
+ }
+
+ .logo {
+ width: 48px;
+ }
+}
+
+.content-container {
+ margin-top: 16px;
+ padding: 28px 32px;
+ background: #fff;
+ border-radius: @border-radius;
+
+ .user-bottom-container {
+ margin-top: 15px;
+
+ .unit {
+ font-size: 14px;
+ font-family: PingFangSC-Regular;
+ color: rgb(0 0 0 / 40%);
+ }
+
+ .time-picker {
+ float: right;
+ width: 250px;
+ }
+ }
+}
+
+.user-team {
+ margin-top: 16px;
+
+ .t-list-item {
+ padding: 15px 0;
+
+ .t-list-item__meta-avatar {
+ height: 50px;
+ width: 50px;
+ margin: 0 24px 0 0;
+ }
+
+ .t-list-item__meta-description {
+ display: inline-block;
+ color: rgb(0 0 0 / 40%);
+ font-size: 14px;
+ }
+ }
+}
diff --git a/src/pages/user/index.vue b/src/pages/user/index.vue
index a5dcacd..92d4661 100644
--- a/src/pages/user/index.vue
+++ b/src/pages/user/index.vue
@@ -1,98 +1,93 @@
- 创建成功
+ 可以联系负责人分发应用
+
+ 查看进度
+ 再次创建
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ![]()
+
+
+
+
+
-
-
-
+
+
+
-
+
- Hi，Image
- 下午好，今天是你加入鹅厂的第 100 天～
- 
-
-
-
-
-
-
-
-
-
-
- {{ item.title }}
-
-
- {{ item.content }}
-
-
+ 
+
-
+ Hi，Image
+ 下午好，今天是你加入鹅厂的第 100 天～
+
+
+
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
+ T
+
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
-
+ 内容列表
-
-
-
-
- 内容列表
-
+ {{ item.title }}
-
+ {{ item.content }}
+
+
+
+
-
-
+
- 
-
-
- My Account
- XXG 港澳业务拓展组员工 直客销售
- 内容列表
+内容列表
+
-
-
-
-
-
-
+ My Account
+ XXG 港澳业务拓展组员工 直客销售
+
-
-
-
- ![]()
-
-
-
-