image/tdesign-vue-next-starter
1
0
Fork 1
mirror of https://github.com/Tencent/tdesign-vue-next-starter.git synced 2024-12-23 05:26:33 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: update less

Browse Source
This commit is contained in:
pengYYYYY 2021-10-19 16:21:14 +08:00
parent 7282a8a48d
commit 6a6e3637a8
20 changed files with 807 additions and 501 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/tencent-logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

3
src/components/card/index.vue
View File

@ -86,6 +86,9 @@ export default defineComponent({
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
// position: absolute;
// top: 30px;
// right: 32px;
} }
&-container { &-container {

1
src/components/color.vue
View File

@ -34,3 +34,4 @@ export default defineComponent({
display: inline-block; display: inline-block;
} }
</style> </style>

10
src/components/result/index.vue
View File

@ -49,20 +49,20 @@ export default defineComponent({
.result { .result {
&-link { &-link {
color: @primary-color; color: @brand-color;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: @primary-color; color: @brand-color;
} }
&:active { &:active {
color: @primary-color; color: @brand-color;
} }
&--active { &--active {
color: @primary-color; color: @brand-color;
} }
&:focus { &:focus {
@ -88,7 +88,7 @@ export default defineComponent({
&-tip { &-tip {
margin: 16px 0 8px; margin: 16px 0 8px;
font-size: @font-size-base; font-size: @font-size-base;
color: @text-level-2-color; color: @text-color-secondary;
line-height: 22px; line-height: 22px;
} }
} }

2
src/components/trend/index.vue
View File

@ -77,8 +77,6 @@ export default defineComponent({
</script> </script>
<style lang="less" scoped> <style lang="less" scoped>
@import url('@/style/index.less');
.trend { .trend {
&-container { &-container {

6
src/config/proxy.ts
View File

@ -1,10 +1,4 @@
export default { export default {
production: {
// 开发环境接口请求
host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',
// 开发环境 cdn 路径
cdn: '',
},
development: { development: {
// 开发环境接口请求 // 开发环境接口请求
host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com', host: 'https://service-exndqyuk-1257786608.gz.apigw.tencentcs.com',

7
src/constants/index.ts
View File

@ -33,3 +33,10 @@ export const CONTRACT_PAYMENT_TYPES = {
PAYMENT: 0, PAYMENT: 0,
RECIPT: 1, RECIPT: 1,
}; };
// 通知的优先级对应的TAG类型
export const NOTIFICATION_TYPES = {
low: 'primary',
middle: 'warning',
high: 'danger',
};

157
src/pages/detail/advanced/index.less
View File

@ -1,26 +1,31 @@
@import '@/style/index'; @import '@/style/index';
.t-tabs__content { .t-tabs__content {
padding-top: @spacer-3; padding-top: @spacer-3;
} }
.t-layout--content-replace { .t-layout--content-replace {
color: rgba(0, 0, 0, 0.6) !important; color: rgba(0, 0, 0, .6) !important;
} }
.row-padding { .row-padding {
padding-top: 30px; padding-top: 30px;
padding-left: 20px; padding-left: 20px;
} }
.operater-block-container { .operater-block-container {
padding: 10px 0 30px; padding: 10px 0 30px;
} }
.operater-add { .operater-add {
width: 100%; width: 100%;
height: 210px; height: 256px;
display: flex; display: flex;
align-items: center; align-items: center;
justify-items: center; justify-items: center;
padding: 20px 10px 24px 20px; padding: 20px 10px 24px 20px;
border: dashed 1px #dedede; border: dashed 1px #dedede;
border-radius: 3px;
.operater-sub { .operater-sub {
font-size: 14px; font-size: 14px;
@ -29,15 +34,24 @@
text-align: center; text-align: center;
line-height: 22px; line-height: 22px;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
cursor: pointer; cursor: pointer;
.t-icon {
color: @brand-color-8; svg {
rect {
fill: @brand-color-2;
}
path {
fill: @brand-color;
}
} }
} }
span { span {
padding-left: 10px; padding-top: 12px;
} }
} }
@ -46,41 +60,96 @@
} }
.operater-block { .operater-block {
background-color: #EBEDF1; position: relative;
padding: 20px 10px 24px 20px; background-color: #fff;
height: 210px; border: 1px solid #e3e6eb;
border-radius: 3px;
.operater-title { .operater-content {
display: flex; padding: 20px 32px 24px 32px;
align-items: center; height: 256px;
margin-bottom: 25px;
h1 { .operater-title {
display: inline-block; margin-bottom: 25px;
padding-left: 20px; position: relative;
font-weight: bold;
font-size: 14px; 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: 8px;
}
&-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: 0;
right: 0;
}
} }
} }
.operater-item {
padding-left: 48px; .operater-footer {
padding-top: 8px; position: absolute;
padding-bottom: 8px; width: 100%;
display: flex; bottom: 0px;
h1 {
display: inline-block; .t-progress--thin {
width: 136px; display: unset;
text-align: left;
font-size: 14px;
color: rgba(0,0,0,0.60);
} }
span {
width: 100%; &-percentage {
position: absolute;
bottom: 15px;
right: 32px;
color: rgba(0, 0, 0, .4);
} }
} }
} }
.@{prefix} { .@{prefix} {
&-panel { &-panel {
background-color: white; background-color: white;
padding: @spacer-3; padding: @spacer-3;
@ -98,8 +167,8 @@
} }
&-operater-title { &-operater-title {
font-size: 16px; font-size: 20px;
color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, .9);
font-weight: bold; font-weight: bold;
} }
@ -116,17 +185,32 @@
padding: 12px 0; padding: 12px 0;
display: flex; display: flex;
@media (max-width: @screen-sm-max) {
h1 {
width: 80px;
}
}
@media (min-width: @screen-md-min) {
h1 {
width: 200px;
}
}
h1 { h1 {
width: 84px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: @text-color-secondary; color: @text-color-secondary;
text-align: left; text-align: left;
line-height: 22px; line-height: 22px;
} }
span { span {
margin-left: 24px; margin-left: 24px;
} }
i { i {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
@ -134,14 +218,17 @@
border-radius: @border-radius-50; border-radius: @border-radius-50;
background: @success-color-5; background: @success-color-5;
} }
.inProgress { .inProgress {
color: @success-color-5; color: @success-color-5;
} }
.pdf { .pdf {
color: @brand-color-8; color: @brand-color-8;
} }
} }
} }
.dialog-info-block { .dialog-info-block {
.info-item { .info-item {
@ -156,9 +243,11 @@
text-align: left; text-align: left;
line-height: 22px; line-height: 22px;
} }
span { span {
margin-left: 24px; margin-left: 24px;
} }
i { i {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
@ -166,9 +255,11 @@
border-radius: @border-radius-50; border-radius: @border-radius-50;
background: @success-color-5; background: @success-color-5;
} }
.green { .green {
color: @success-color-5; color: @success-color-5;
} }
.blue { .blue {
color: @brand-color-8; color: @brand-color-8;
} }

234
src/pages/detail/advanced/index.vue
View File

@ -1,7 +1,5 @@
<template> <template>
<div> <div>
<t-page-header>合同详情页</t-page-header>
<div :class="prefix + '-panel'"> <div :class="prefix + '-panel'">
<div class="base-info"> <div class="base-info">
<t-row <t-row
@ -65,7 +63,7 @@
/> />
<t-step-item <t-step-item
title="完成" title="完成"
content="" content
/> />
</t-steps> </t-steps>
</t-row> </t-row>
@ -85,57 +83,182 @@
<t-col :flex="1"> <t-col :flex="1">
<div class="operater-add"> <div class="operater-add">
<div class="operater-sub"> <div class="operater-sub">
<t-icon <svg
name="add" width="34"
size="20px" height="34"
/> viewBox="0 0 34 34"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<rect
x="0.5"
y="0.5"
width="33"
height="33"
rx="16.5"
stroke="white"
/>
<path d="M16.35 17.6501V21.5H17.65V17.6501H21.5V16.3501H17.65V12.5H16.35V16.3501H12.5V17.6501H16.35Z" />
</svg>
<span>新增产品</span> <span>新增产品</span>
</div> </div>
</div> </div>
</t-col> </t-col>
<t-col :flex="1"> <t-col :flex="1">
<div class="operater-block operater-gap"> <div class="operater-block operater-gap">
<div class="operater-title"> <div class="operater-content">
<t-icon <div class="operater-title">
name="server" <svg
size="2em" class="operater-title-icon"
/> width="56"
<h1>Macbook</h1> height="56"
</div> viewBox="0 0 56 56"
<div class="operater-item"> fill="none"
<h1>产品编号</h1> xmlns="http://www.w3.org/2000/svg"
<span>p_tmp_60a637cd0d</span> >
</div> <circle
<div class="operater-item"> cx="28"
<h1>计费方式</h1> cy="28"
<span>按量计费</span> r="28"
</div> />
<div class="operater-item"> <path
<h1>交付时间</h1> fill-rule="evenodd"
<span>2020-12-21 11:05:17</span> clip-rule="evenodd"
d="M14 18H17.1529L19.93 34.663C20.0586 35.4345 20.7261 36 21.5083 36H40V34H21.8471L21.1805 30H38.4478C39.182 30 39.8219 29.5003 40 28.7881L41.7 21.9881C41.9525 20.9782 41.1887 20 40.1478 20H19.5138L19.07 17.337C18.9414 16.5655 18.2739 16 17.4917 16H14V18ZM38.1355 28H20.8471L19.8471 22H39.6355L38.1355 28Z"
/>
<path
d="M21.5 41C22.3284 41 23 40.3284 23 39.5C23 38.6716 22.3284 38 21.5 38C20.6716 38 20 38.6716 20 39.5C20 40.3284 20.6716 41 21.5 41Z"
/>
<path
d="M37.6259 41C38.4543 41 39.1259 40.3284 39.1259 39.5C39.1259 38.6716 38.4543 38 37.6259 38C36.7975 38 36.1259 38.6716 36.1259 39.5C36.1259 40.3284 36.7975 41 37.6259 41Z"
/>
</svg>
<h1>Macbook Pro 2021</h1>
<div class="operater-title-subtitle">
Macbook Pro 2021
</div>
<div class="operater-title-tags">
<t-tag
class="operater-title-tag"
theme="success"
size="small"
>
13.3 英寸
</t-tag>
<t-tag
class="operater-title-tag"
size="small"
>
Apple M1
</t-tag>
<t-tag
class="operater-title-tag"
size="small"
>
RAM 16GB
</t-tag>
</div>
</div>
<div class="operater-item">
<span
class="operater-item-info"
>最高可选配 16GB 内存 · 最高可选配 2TB 存储设备 电池续航最长达 18 小时</span>
<t-icon
class="operater-item-icon"
name="chevron-right"
size="small"
style="color: rgba(0, 0, 0, .26)"
/>
</div>
<div class="operater-footer">
<span class="operater-footer-percentage">1420 / 1500（台）</span>
<t-progress
class="operater-progress"
theme="line"
:percentage="(1420 / 1500) * 100"
:label="false"
track-color="#D4E3FC"
/>
</div>
</div> </div>
</div> </div>
</t-col> </t-col>
<t-col :flex="1"> <t-col :flex="1">
<div class="operater-block operater-gap"> <div class="operater-block operater-gap">
<div class="operater-title"> <div class="operater-content">
<t-icon <div class="operater-title">
name="server" <svg
size="2em" class="operater-title-icon"
width="56"
height="56"
viewBox="0 0 56 56"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="28"
cy="28"
r="28"
/>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M14 18H17.1529L19.93 34.663C20.0586 35.4345 20.7261 36 21.5083 36H40V34H21.8471L21.1805 30H38.4478C39.182 30 39.8219 29.5003 40 28.7881L41.7 21.9881C41.9525 20.9782 41.1887 20 40.1478 20H19.5138L19.07 17.337C18.9414 16.5655 18.2739 16 17.4917 16H14V18ZM38.1355 28H20.8471L19.8471 22H39.6355L38.1355 28Z"
/>
<path
d="M21.5 41C22.3284 41 23 40.3284 23 39.5C23 38.6716 22.3284 38 21.5 38C20.6716 38 20 38.6716 20 39.5C20 40.3284 20.6716 41 21.5 41Z"
/>
<path
d="M37.6259 41C38.4543 41 39.1259 40.3284 39.1259 39.5C39.1259 38.6716 38.4543 38 37.6259 38C36.7975 38 36.1259 38.6716 36.1259 39.5C36.1259 40.3284 36.7975 41 37.6259 41Z"
/>
</svg>
<h1>Surface Laptop Go</h1>
<div class="operater-title-subtitle">
微软（Microsoft Corporation）
</div>
<div class="operater-title-tags">
<t-tag
class="operater-title-tag"
theme="success"
size="small"
>
12.4 英寸
</t-tag>
<t-tag
class="operater-title-tag"
size="small"
>
Core i7
</t-tag>
<t-tag
class="operater-title-tag"
size="small"
>
RAM 16GB
</t-tag>
</div>
</div>
<div class="operater-item">
<span class="operater-item-info">常规使用 Surface，续航时间最长可达13小时 随时伴您工作</span>
<t-icon
class="operater-item-icon"
name="chevron-right"
size="small"
style="color: rgba(0, 0, 0, .26)"
/>
</div>
</div>
<div class="operater-footer">
<span class="operater-footer-percentage">120 / 2000（台）</span>
<t-progress
class="operater-progress"
theme="line"
:percentage="(120 / 2000) * 100"
:label="false"
color="#E24D59"
track-color="#FCD4D4"
/> />
<h1>椅子</h1>
</div>
<div class="operater-item">
<h1>产品编号</h1>
<span>p_tmp_60a637cd0C</span>
</div>
<div class="operater-item">
<h1>计费方式</h1>
<span>按量计费</span>
</div>
<div class="operater-item">
<h1>交付时间</h1>
<span>2020-12-21 13:08:09</span>
</div> </div>
</div> </div>
</t-col> </t-col>
@ -157,12 +280,34 @@
:columns="columns" :columns="columns"
:data="data" :data="data"
:pagination="pagination" :pagination="pagination"
:bordered="bordered"
:hover="hover" :hover="hover"
row-key="index" row-key="index"
size="large"
@sort-change="sortChange" @sort-change="sortChange"
@change="rehandleChange" @change="rehandleChange"
> >
<template #pdName="{ row }">
<span>
{{ row.pdName }}
<t-tag
v-if="row.pdType"
size="small"
>{{ row.pdType }}</t-tag>
</span>
</template>
<template #purchaseNum="{ row }">
<span>
{{ row.purchaseNum }}
<t-tag
v-if="row.purchaseNum > 50"
theme="danger"
variant="light"
size="small"
>超预算</t-tag>
</span>
</template>
<template #op="slotProps"> <template #op="slotProps">
<a <a
:class="prefix + '-link'" :class="prefix + '-link'"
@ -173,6 +318,7 @@
@click="deleteClickOp(slotProps)" @click="deleteClickOp(slotProps)"
>删除</a> >删除</a>
</template> </template>
<template #op-column> <template #op-column>
<t-icon name="descending-order" /> <t-icon name="descending-order" />
</template> </template>
@ -208,8 +354,8 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import model from './index';
import { PREFIX as prefix } from '@/config/global'; import { PREFIX as prefix } from '@/config/global';
import model from './index';
// 导入样式 // 导入样式
import './index.less'; import './index.less';

31
src/pages/detail/base/index.less
View File

@ -1,12 +1,14 @@
@import '@/style/index'; @import '@/style/index';
.t-tabs__content { .t-tabs__content {
padding-top: @spacer-3; padding-top: @spacer-3;
} }
.@{prefix} { .@{prefix} {
&-panel { &-panel {
background-color: white; background-color: white;
padding: @spacer-3; padding: @spacer-4;
border-radius: @border-radius; border-radius: @border-radius;
} }
@ -15,9 +17,13 @@
} }
&-operater-title { &-operater-title {
font-size: 16px; font-weight: 400;
color: @text-color-primary; color: @text-color-primary;
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
.t-steps-item-title {
font-size: @font-size-base;
}
} }
} }
@ -28,18 +34,33 @@
padding: 12px 0; padding: 12px 0;
display: flex; display: flex;
@media (max-width: @screen-sm-max) {
h1 {
width: 80px;
}
}
@media (min-width: @screen-md-min) {
h1 {
width: 200px;
}
}
h1 { h1 {
font-weight: normal; font-weight: normal;
width: 84px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: @font-size-base;
color: @text-color-secondary; color: @text-color-secondary;
text-align: left; text-align: left;
line-height: 22px; line-height: 22px;
} }
span { span {
margin-left: 24px; margin-left: 24px;
} }
i { i {
display: inline-block; display: inline-block;
width: 8px; width: 8px;
@ -47,9 +68,11 @@
border-radius: @border-radius-50; border-radius: @border-radius-50;
background: @success-color-5; background: @success-color-5;
} }
.inProgress { .inProgress {
color: @success-color-5; color: @success-color-5;
} }
.pdf { .pdf {
color: @brand-color-8; color: @brand-color-8;
} }

1
src/pages/detail/base/index.vue
View File

@ -1,6 +1,5 @@
<template> <template>
<div> <div>
<t-page-header> 合同基础详情 </t-page-header>
<div :class="prefix + '-panel'"> <div :class="prefix + '-panel'">
<div class="base-info"> <div class="base-info">
<t-row <t-row

11
src/pages/detail/secondary/index.less
View File

@ -4,23 +4,28 @@
background-color: white; background-color: white;
border-radius: @border-radius; border-radius: @border-radius;
margin-top: 16px; margin-top: 16px;
padding: 32px;
.t-tabs__content { .t-tabs__content {
padding-top: 0; padding-top: 0;
} }
} }
.secondary-msg-list { .secondary-msg-list {
min-height: 443px; min-height: 443px;
max-height: calc(100vh - 400px); max-height: calc(100vh - 400px);
.t-list-item { .t-list-item {
cursor: pointer; cursor: pointer;
padding: 16px 24px 16px 0;
&:hover { &:hover {
background-color: @bg-color-container-hover; background-color: @bg-color-container-hover;
.msg-date { .msg-date {
display: none; display: none;
} }
.msg-action { .msg-action {
display: flex; display: flex;
align-items: center; align-items: center;
@ -32,10 +37,11 @@
} }
} }
} }
.content { .content {
font-family: PingFangSC-Medium; font-family: PingFangSC-Medium;
font-size: 14px; font-size: 14px;
color:@text-color-placeholder; color: @text-color-placeholder;
text-align: left; text-align: left;
line-height: 22px; line-height: 22px;
overflow: hidden; overflow: hidden;
@ -46,9 +52,11 @@
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
} }
} }
.unread { .unread {
color: @brand-color-8; color: @brand-color-8;
} }
.msg-action { .msg-action {
display: none; display: none;
@ -56,6 +64,7 @@
margin-right: 24px; margin-right: 24px;
} }
} }
&__empty-list { &__empty-list {
min-height: 443px; min-height: 443px;
padding-top: 170px; padding-top: 170px;

71
src/pages/detail/secondary/index.vue
View File

@ -19,12 +19,19 @@
:class="['content', { unread: item.status }]" :class="['content', { unread: item.status }]"
@click="setReadStatus(item)" @click="setReadStatus(item)"
> >
{{ item.content }}<span> - {{ item.type }}</span> <t-tag
class="operater-title-tag"
size="small"
:theme="NOTIFICATION_TYPES[item.priorty]"
variant="light"
>
{{ item.type }}
</t-tag>
{{ item.content }}
</p> </p>
<template #action> <template #action>
<p class="msg-date"> <span class="msg-date">{{ item.date }}</span>
{{ item.date }}
</p>
<div class="msg-action"> <div class="msg-action">
<t-tooltip <t-tooltip
class="set-read-icon" class="set-read-icon"
@ -55,16 +62,20 @@
<path <path
d="M11.7786 14.9286L15.3536 11.3535L14.6464 10.6465L11.7786 13.5144L10.1318 11.8677L9.42471 12.5748L11.7786 14.9286Z" d="M11.7786 14.9286L15.3536 11.3535L14.6464 10.6465L11.7786 13.5144L10.1318 11.8677L9.42471 12.5748L11.7786 14.9286Z"
fill="black" fill="black"
/></svg></span> />
</svg>
</span>
</t-tooltip> </t-tooltip>
<t-tooltip <t-tooltip
content="删除通知" content="删除通知"
:overlay-style="{ margin: '6px' }" :overlay-style="{ margin: '6px' }"
> >
<span @click="handleClickDeleteBtn(item)"><t-icon <span @click="handleClickDeleteBtn(item)">
name="delete" <t-icon
size="16px" name="delete"
/></span> size="16px"
/>
</span>
</t-tooltip> </t-tooltip>
</div> </div>
</template> </template>
@ -98,7 +109,15 @@
:class="['content', { unread: item.status }]" :class="['content', { unread: item.status }]"
@click="setReadStatus(item)" @click="setReadStatus(item)"
> >
{{ item.content }}<span> - {{ item.type }}</span> <t-tag
class="operater-title-tag"
size="small"
:theme="NOTIFICATION_TYPES[item.priorty]"
variant="light"
>
{{ item.type }}
</t-tag>
{{ item.content }}
</p> </p>
<template #action> <template #action>
<p class="msg-date"> <p class="msg-date">
@ -121,10 +140,12 @@
content="删除通知" content="删除通知"
:overlay-style="{ margin: '6px' }" :overlay-style="{ margin: '6px' }"
> >
<span @click="handleClickDeleteBtn(item)"><t-icon <span @click="handleClickDeleteBtn(item)">
name="delete" <t-icon
size="16px" name="delete"
/></span> size="16px"
/>
</span>
</t-tooltip> </t-tooltip>
</div> </div>
</template> </template>
@ -155,7 +176,15 @@
:key="index" :key="index"
> >
<p :class="['content', { unread: item.status }]"> <p :class="['content', { unread: item.status }]">
{{ item.content }}<span> - {{ item.type }}</span> <t-tag
class="operater-title-tag"
size="small"
:theme="NOTIFICATION_TYPES[item.priorty]"
variant="light"
>
{{ item.type }}
</t-tag>
{{ item.content }}
</p> </p>
<template #action> <template #action>
<p class="msg-date"> <p class="msg-date">
@ -193,10 +222,12 @@
content="删除通知" content="删除通知"
:overlay-style="{ margin: '6px' }" :overlay-style="{ margin: '6px' }"
> >
<span @click="handleClickDeleteBtn(item)"><t-icon <span @click="handleClickDeleteBtn(item)">
name="delete" <t-icon
size="16px" name="delete"
/></span> size="16px"
/>
</span>
</t-tooltip> </t-tooltip>
</div> </div>
</template> </template>
@ -226,6 +257,7 @@
import { defineComponent } from 'vue'; import { defineComponent } from 'vue';
import { mapState, mapGetters } from 'vuex'; import { mapState, mapGetters } from 'vuex';
import { PREFIX as prefix } from '@/config/global'; import { PREFIX as prefix } from '@/config/global';
import { NOTIFICATION_TYPES } from '@/constants';
// 导入样式 // 导入样式
import './index.less'; import './index.less';
@ -235,6 +267,7 @@ export default defineComponent({
components: {}, components: {},
data() { data() {
return { return {
NOTIFICATION_TYPES,
prefix, prefix,
data: [], data: [],
value: 'frist', value: 'frist',

14
src/pages/form/base/index.less
View File

@ -1,29 +1,27 @@
@import '@/style/index'; @import '@/style/index';
.t-tabs__content { .t-tabs__content {
padding-top: @spacer-3; padding-top: @spacer-3;
} }
.@{prefix} { .@{prefix} {
&-panel { &-panel {
background-color: white; background-color: white;
padding: @spacer-3; padding: @spacer-3;
border-radius: @border-radius; border-radius: @border-radius;
.base-form {
.t-form__label {
min-width: 108px;
}
}
} }
&-form { &-form {
padding-right: 50px; padding-right: 50px;
padding-top: 30px; padding-top: 30px;
border-top: solid 1px #EEEEEE; border-top: solid 1px #eee;
} }
} }
.upload-tips { .upload-tips {
margin-left: 16px; margin-left: 16px;
font-size: 12px; font-size: 12px;
color: @text-level-2-color; color: @text-color-secondary;
line-height: 20px; line-height: 20px;
} }

14
src/pages/form/step/index.less
View File

@ -1,9 +1,11 @@
@import '@/style/index'; @import '@/style/index';
.t-tabs__content { .t-tabs__content {
padding-top: @spacer-3; padding-top: @spacer-3;
} }
.@{prefix} { .@{prefix} {
&-panel { &-panel {
background-color: white; background-color: white;
@ -11,13 +13,15 @@
padding: 0; padding: 0;
} }
} }
&-step { &-step {
padding: 14px 0 24px 0; padding: 14px 0 24px 0;
} }
&-form { &-form {
padding-right: 50px; padding-right: 50px;
padding-top: 30px; padding-top: 30px;
border-top: solid 1px #eeeeee; border-top: solid 1px #eee;
} }
} }
@ -27,7 +31,7 @@
.step-top { .step-top {
padding: 24px; padding: 24px;
border-bottom: #eeeeee solid 1px; border-bottom: #eee solid 1px;
} }
.step-form { .step-form {
@ -46,17 +50,19 @@
.t-icon { .t-icon {
margin: 6px; margin: 6px;
} }
.text { .text {
margin: 16px 0 8px 0; margin: 16px 0 8px 0;
font-weight: bold; font-weight: bold;
font-size: 20px; font-size: 20px;
color: @text-level-1-color; color: @text-color-primary;
line-height: 30px; line-height: 30px;
} }
.tips { .tips {
margin-bottom: 24px; margin-bottom: 24px;
font-size: 14px; font-size: 14px;
color: @text-level-2-color; color: @text-color-secondary;
line-height: 22px; line-height: 22px;
} }
} }

21
src/pages/list/select/index.vue
View File

@ -1,5 +1,4 @@
<template> <template>
<t-page-header> 合同档案 </t-page-header>
<list-common-table /> <list-common-table />
</template> </template>
<script lang="ts"> <script lang="ts">
@ -14,6 +13,24 @@ export default defineComponent({
}); });
</script> </script>
<style> <style lang="less" scoped>
@import '@/style/index';
.@{prefix} {
&-panel {
background-color: white;
padding: @spacer-3;
border-radius: @border-radius;
}
&-operater-row {
margin-bottom: 16px;
}
&-form-item-content {
width: 240px;
display: inline-block;
margin-right: 40px;
}
}
</style> </style>

398
src/pages/login/index.less
View File

@ -1,301 +1,301 @@
@import '@/style/index'; @import '@/style/index';
.login-wrapper { .login-wrapper {
width: 100%; width: 100%;
height: 100%; height: 100%;
background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg); background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg);
background-size: cover; background-size: cover;
background-position: 50%; background-position: 50%;
position: relative; position: relative;
} }
.login-container { .login-container {
position: absolute; position: absolute;
top: 28%; top: 28%;
left: 12%; left: 12%;
min-height: 500px; min-height: 500px;
line-height: 22px; line-height: 22px;
} }
.title-container { .title-container {
.icon { .icon {
width: 290px; width: 290px;
height: 60px; height: 60px;
} }
.side-title { .side-title {
margin-top: 24.9px; margin-top: 24.9px;
.tip1, .tip1,
.tip2 { .tip2 {
display: inline-block; display: inline-block;
margin-right: 8px; margin-right: 8px;
} }
.tip1 { .tip1 {
font-size: 14px; font-size: 14px;
color: rgba(0,0,0,.60); color: rgba(0,0,0,.60);
} }
.tip2 { .tip2 {
font-size: 14px; font-size: 14px;
color: @brand-color-8; color: @brand-color-8;
cursor: pointer; cursor: pointer;
} }
} }
} }
.login-step1 { .login-step1 {
.input-container { .input-container {
margin-top: 72px; margin-top: 72px;
.t-input { .t-input {
display: block; display: block;
} }
.t-popup-reference { .t-popup-reference {
margin: 24px 0; margin: 24px 0;
} }
} }
.check-container { .check-container {
.t-checkbox__label { .t-checkbox__label {
color: @text-color-secondary; color: @text-color-secondary;
span { span {
color: @brand-color-8; color: @brand-color-8;
} }
} }
} }
} }
.login-step3 { .login-step3 {
.input-container { .input-container {
margin-top: 34px; margin-top: 34px;
} }
} }
.input-container { .input-container {
.tip-container { .tip-container {
margin-bottom: 16px; margin-bottom: 16px;
.tip1 { .tip1 {
font-size: 14px; font-size: 14px;
color: rgba(0,0,0,.60); color: rgba(0,0,0,.60);
} }
.tip2 { .tip2 {
float: right; float: right;
font-size: 14px; font-size: 14px;
color: @brand-color-8; color: @brand-color-8;
.t-icon { .t-icon {
height: 20px; height: 20px;
vertical-align: text-bottom; vertical-align: text-bottom;
} }
} }
} }
.button-container { .button-container {
margin-top: 16px; margin-top: 16px;
} }
.check-container { .check-container {
font-size: 14px; font-size: 14px;
color: rgba(0,0,0,.60); color: rgba(0,0,0,.60);
.tip { .tip {
float: right; float: right;
font-size: 14px; font-size: 14px;
color: @brand-color-8; color: @brand-color-8;
} }
} }
} }
.login-step1 { .login-step1 {
.bottom-container { .bottom-container {
margin-top: 72px; margin-top: 72px;
} }
} }
.login-step3 { .login-step3 {
.bottom-container { .bottom-container {
margin-top: 32px; margin-top: 32px;
} }
.input-container .tip-container { .input-container .tip-container {
width: 192px; width: 192px;
} }
} }
.login-step2 { .login-step2 {
.input-container { .input-container {
margin-top: 108.9px; margin-top: 108.9px;
.tip1 { .tip1 {
cursor: pointer; cursor: pointer;
} }
} }
} }
.bottom-container { .bottom-container {
margin-top: 66px; margin-top: 66px;
.tip { .tip {
font-size: 14px; font-size: 14px;
color: @brand-color-8; color: @brand-color-8;
cursor: pointer; cursor: pointer;
} }
i { i {
font-style: normal; font-style: normal;
color: @gray-color-3; color: @gray-color-3;
margin: 0 14px; margin: 0 14px;
} }
} }
.rex-check { .rex-check {
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: @text-color-placeholder; color: @text-color-placeholder;
line-height: 22px; line-height: 22px;
} }
.format-correct { .format-correct {
color: @text-color-primary; color: @text-color-primary;
.t-icon { .t-icon {
color: @success-color-5; color: @success-color-5;
} }
} }
.login-step4 { .login-step4 {
.input-container { .input-container {
margin-top: 64px; margin-top: 64px;
.t-input { .t-input {
display: block; display: block;
} }
.t-popup-reference { .t-popup-reference {
margin: 24px 0; margin: 24px 0;
} }
.verification-code { .verification-code {
margin-bottom: 24px; margin-bottom: 24px;
.t-input { .t-input {
display: inline-block; display: inline-block;
} }
button { button {
width: 102px; width: 102px;
height: 40px; height: 40px;
margin-left: 11px; margin-left: 11px;
} }
} }
} }
.bottom-container { .bottom-container {
margin-top: 66px; margin-top: 66px;
} }
.check-container { .check-container {
.t-checkbox__label { .t-checkbox__label {
color: @text-color-secondary; color: @text-color-secondary;
span { span {
color: @brand-color-8; color: @brand-color-8;
} }
} }
} }
} }
.login-step5 { .login-step5 {
.input-container { .input-container {
margin-top: 64px; margin-top: 64px;
.t-input { .t-input {
display: block; display: block;
} }
.t-popup-reference { .t-popup-reference {
margin: 24px 0; margin: 24px 0;
} }
.t-select-popup-reference { .t-select-popup-reference {
margin: 0; margin: 0;
} }
} }
.bottom-container { .bottom-container {
margin-top: 66px; margin-top: 66px;
} }
.check-container { .check-container {
.t-checkbox__label { .t-checkbox__label {
color: @text-color-secondary; color: @text-color-secondary;
span { span {
color: @brand-color-8; color: @brand-color-8;
} }
} }
} }
} }
.login-step6 { .login-step6 {
.input-container { .input-container {
margin-top: 64px; margin-top: 64px;
.t-input { .t-input {
display: block; display: block;
} }
.t-popup-reference { .t-popup-reference {
margin: 24px 0; margin: 24px 0;
} }
.verification-code { .verification-code {
margin: 24px 0; margin: 24px 0;
.t-input { .t-input {
display: inline-block; display: inline-block;
} }
button { button {
width: 102px; width: 102px;
height: 40px; height: 40px;
margin-left: 11px; margin-left: 11px;
} }
} }
} }
.bottom-container { .bottom-container {
margin-top: 66px; margin-top: 66px;
} }
.check-container { .check-container {
.t-checkbox__label { .t-checkbox__label {
color: @text-color-secondary; color: @text-color-secondary;
span { span {
color: @brand-color-8; color: @brand-color-8;
} }
} }
} }
} }

5
src/pages/result/success/index.vue
View File

@ -45,6 +45,7 @@ export default defineComponent({
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 75vh; height: 75vh;
&-icon { &-icon {
font-size: 64px; font-size: 64px;
color: @success-color; color: @success-color;
@ -53,7 +54,7 @@ export default defineComponent({
&-title { &-title {
margin-top: 16px; margin-top: 16px;
font-size: 20px; font-size: 20px;
color: rgba(0, 0, 0, 0.9); color: rgba(0, 0, 0, .9);
text-align: center; text-align: center;
line-height: 22px; line-height: 22px;
} }
@ -61,7 +62,7 @@ export default defineComponent({
&-describe { &-describe {
margin: 8px 0 32px; margin: 8px 0 32px;
font-size: 14px; font-size: 14px;
color: rgba(0, 0, 0, 0.6); color: rgba(0, 0, 0, .6);
line-height: 22px; line-height: 22px;
} }
} }

295
src/pages/user/index.less
View File

@ -1,35 +1,42 @@
@import '@/style/index'; @import '@/style/index';
.user-panel {
.user-panel {
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
.user-right { .user-right {
min-width: 100%; min-width: 100%;
} }
} }
@media (min-width: @screen-md-min) { @media (min-width: @screen-md-min) {
.user-right { .user-right {
min-width: 33.33%; min-width: 33.33%;
} }
} }
.user-right { .user-right {
transition: width .3s linear; transition: width .3s linear;
&-greeting { &-greeting {
margin-bottom: 16px; margin-bottom: 16px;
background: #fff; background: #fff;
border-radius: @border-radius; border-radius: @border-radius;
} }
&-trend { &-trend {
margin-bottom: 16px; margin-bottom: 16px;
background: #fff; background: #fff;
border-radius: @border-radius; border-radius: @border-radius;
} }
&-todo { &-todo {
margin-bottom: 16px; margin-bottom: 16px;
background: #fff; background: #fff;
border-radius: @border-radius; border-radius: @border-radius;
} }
} }
.head-bar { .head-bar {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@ -37,11 +44,17 @@
.title { .title {
line-height: 24px; line-height: 24px;
font-family: PingFangSC-Medium; font-family: PingFangSC;
font-size: 16px; font-size: 20px;
color: @text-level-1-color; color: @text-color-primary;
text-align: left; text-align: left;
} }
.t-icon {
font-size: 16px;
color: rgba(0, 0, 0, .9);
}
.more { .more {
display: flex; display: flex;
align-items: center; align-items: center;
@ -49,250 +62,218 @@
line-height: 22px; line-height: 22px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: @text-level-1-color; color: @text-color-primary;
cursor: pointer; cursor: pointer;
.t-icon { .t-icon {
vertical-align: bottom; vertical-align: bottom;
font-size: 20px; font-size: 20px;
} }
&:hover { &:hover {
color: @brand-color-8; color: @brand-color-8;
} }
} }
} }
.user-left { .user-right-panel {
.user-top { .user-top {
padding: 24px; padding: 48px;
margin: 0 16px 16px 0; margin: 0 0 16px 16px;
background: #fff; background: @brand-color;
border-radius: @border-radius; border-radius: @border-radius;
.account { .account {
text-align: center; text-align: left;
margin-bottom: 48px; margin-bottom: 0;
color: @text-level-1-color; color: @text-color-primary;
.img { .img {
display: block; display: block;
width: 122px; width: 90px;
height: 122px; height: 90px;
border-radius: @border-radius-50; border-radius: @border-radius-50;
background: #EBEDF1; border: 1px solid @brand-color;
margin-top: 16px; background: #ebedf1;
margin-left: 50%;
transform: translateX(-50%);
} }
.name { .name {
line-height: 37px; line-height: 37px;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 26px; font-size: 20px;
margin-top: 16px; margin-top: 36px;
color: #fff;
} }
.position { .position {
line-height: 24px; line-height: 24px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
margin-top: 8px; margin-top: 8px;
color: #fff;
} }
} }
.user-info { .user-info {
line-height: 24px; line-height: 24px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: @text-level-1-color; color: @text-color-primary;
.hiredate, .del, .mail {
.hiredate,
.del,
.mail {
display: flex; display: flex;
} }
.t-icon { .t-icon {
height: 24px; height: 24px;
margin-right: 8px; margin-right: 8px;
} }
.del { .del {
margin: 16px 0; margin: 16px 0;
} }
} }
} }
.user-bottom {
padding: 24px 24px 0 24px; .user-middle {
margin: 0 16px 16px 0; padding: 28px 32px 5px 32px;
margin: 0 0 16px 16px;
background: #fff; background: #fff;
border-radius: @border-radius; border-radius: @border-radius;
.t-list {
margin: 20px 0;
}
.t-list-item { .t-list-item {
height: 64px; padding: 15px 0;
min-width: 230px;
margin: 8px 0 16px 0;
background: #F3F3F3;
border-radius: @border-radius;
.t-list-item__meta-avatar { .t-list-item__meta-avatar {
height: 32px; height: 50px;
width: 32px; width: 50px;
margin: auto; margin: 0 24px 0 0;
}
.t-list-item__meta-content {
line-height: 22px;
margin-left: 10px;
padding: 5px 0;
}
.t-list-item__meta-title {
display: inline-block;
margin: 0 7px 0 0;
} }
.t-list-item__meta-description { .t-list-item__meta-description {
display: inline-block; display: inline-block;
color: @text-color-secondary; color: rgba(0, 0, 0, .4);
font-size: 12px; font-size: 14px;
}
.t-list-item__action {
li {
margin-right: 16px;
cursor: pointer;
}
.t-icon {
color: @text-level-1-color;
&:hover {
color: @brand-color-8;
}
}
} }
} }
} }
.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-right {
.user-left-panel {
.user-top { .user-top {
.user-right-greeting {
padding: 24px; .user-left-greeting {
padding: 28px 32px;
line-height: 28px; line-height: 28px;
font-family: PingFangSC-Semibold; font-family: PingFangSC-Semibold;
font-size: 20px; font-size: 20px;
color: @text-level-1-color; color: @text-color-primary;
text-align: left; text-align: left;
background-color: #fff;
border-radius: @border-radius;
.regular { .regular {
margin: 0 0 0 15px;
vertical-align: bottom; vertical-align: bottom;
font-family: PingFangSC-Regular; font-family: PingFangSC-Semibold;
font-size: 14px; font-size: 14px;
} }
} }
.user-right-trend {
padding: 24px;
.t-list-item { .user-left-logo {
padding: 8px 0; float: right;
cursor: pointer; width: 180px;
}
.text { .user-right-info {
display: flex; margin: 16px 0;
line-height: 20px; 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-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: @text-level-1-color; color: rgba(0, 0, 0, .4);
.t-icon {
margin-right: 8px;
height: 20px;
font-size: 16px;
color: @text-level-3-color;
}
p {
display: inline-block;
}
} }
.t-list-item__action {
line-height: 20px; &-detail {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 40px;
font-family: PingFangSC-Regular; font-family: PingFangSC-Regular;
font-size: 12px; font-size: 14px;
color: @text-level-2-color; color: rgba(0, 0, 0, .9);
}
&:hover {
.text {
color: @brand-color-8;
.t-icon {
color: @brand-color-8;
}
}
} }
} }
.t-list-item:last-child {
padding-bottom: 0;
}
}
.user-right-todo {
padding: 24px;
.empty-list { .contract:last-child {
margin-top: 18px; margin-bottom: 0;
line-height: 20px;
font-family: PingFangSC-Regular;
font-size: 14px;
color: @text-level-3-color;
text-align: center;
img {
margin-bottom: 2px;
width: 42px;
}
} }
} }
} }
.user-bottom { .user-bottom {
padding: 24px; margin: 0 0 16px 0;
padding: 28px 32px;
background: #fff; background: #fff;
border-radius: @border-radius; border-radius: @border-radius;
.contract { .user-bottom-container {
width: 340px; margin-top: 15px;
height: 88px;
border-radius: @border-radius;
margin: 8px 0;
cursor: pointer;
&-type { .unit {
position: relative;
float: left;
margin: 13px 16px;
img {
width: 64px;
height: 64px;
}
}
&-title {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 24px;
margin: 20px 0 6px 0;
font-family: PingFangSC-Medium;
font-size: 16px;
color: @text-level-1-color;
}
&-date {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
line-height: 22px;
font-family: PingFangSC-Regular;
font-size: 14px; font-size: 14px;
color: @text-level-3-color; font-family: PingFangSC-Regular;
color: rgba(0, 0, 0, .4);
} }
&:hover {
background: #f7f7f7; .time-picker {
float: right;
width: 250px;
} }
} }
.contract:last-child,
.contract:nth-last-child(2) {
margin-bottom: 0;
}
} }
} }
.user-bottom .user-right{
height: 447px;
background: #fff;
border-radius: @border-radius;
}
} }

23
src/style/index.less
View File

@ -9,13 +9,12 @@
@import './sidenav.less'; @import './sidenav.less';
body { body {
color: @text-level-2-color; color: @text-color-secondary;
font-family: -apple-system, BlinkMacSystemFont, @font-family; font-family: -apple-system, BlinkMacSystemFont, @font-family;
font-size: @font-size-base; font-size: @font-size-base;
line-height: 1.5; line-height: 1.5;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
padding: 0; padding: 0;
min-width: @screen-sm-min;
} }
pre { pre {
@ -57,7 +56,7 @@ p {
.@{prefix}-text-tip { .@{prefix}-text-tip {
font-size: 12px; font-size: 12px;
color: @text-level-3-color; color: @text-color-placeholder;
} }
.@{prefix}-pic { .@{prefix}-pic {
@ -67,16 +66,16 @@ p {
} }
.@{prefix}-main-link { .@{prefix}-main-link {
color: @text-level-1-color; color: @text-color-primary;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: @text-level-1-color; color: @text-color-primary;
} }
&:active { &:active {
color: @text-level-1-color; color: @text-color-primary;
} }
&--active { &--active {
@ -89,7 +88,7 @@ p {
} }
.@{prefix}-link { .@{prefix}-link {
color: @primary-color; color: @brand-color;
text-decoration: none; text-decoration: none;
margin-right: @spacer-3; margin-right: @spacer-3;
@ -97,15 +96,15 @@ p {
cursor: pointer; cursor: pointer;
&:hover { &:hover {
color: @primary-color; color: @brand-color;
} }
&:active { &:active {
color: @primary-color; color: @brand-color;
} }
&--active { &--active {
color: @primary-color; color: @brand-color;
} }
&:focus { &:focus {
@ -160,7 +159,7 @@ p {
height: 0; height: 0;
border-style: solid; border-style: solid;
border-width: 0 6px 8px 6px; border-width: 0 6px 8px 6px;
border-color: transparent transparent #00A870 transparent; border-color: transparent transparent #00a870 transparent;
} }
.@{prefix}-down-triangle { .@{prefix}-down-triangle {
@ -168,5 +167,5 @@ p {
height: 0; height: 0;
border-style: solid; border-style: solid;
border-width: 8px 6px 0 6px; border-width: 8px 6px 0 6px;
border-color: #E34D59 transparent transparent transparent; border-color: #e34d59 transparent transparent transparent;
} }