feat: update less

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

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

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -1,7 +1,5 @@
<template>
<div>
<t-page-header>合同详情页</t-page-header>
<div :class="prefix + '-panel'">
<div class="base-info">
<t-row
@ -65,7 +63,7 @@
/>
<t-step-item
title="完成"
content=""
content
/>
</t-steps>
</t-row>
@ -85,57 +83,182 @@
<t-col :flex="1">
<div class="operater-add">
<div class="operater-sub">
<t-icon
name="add"
size="20px"
<svg
width="34"
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>
</div>
</div>
</t-col>
<t-col :flex="1">
<div class="operater-block operater-gap">
<div class="operater-content">
<div class="operater-title">
<t-icon
name="server"
size="2em"
<svg
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"
/>
<h1>Macbook</h1>
<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>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">
<h1>产品编号</h1>
<span>p_tmp_60a637cd0d</span>
<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-item">
<h1>计费方式</h1>
<span>按量计费</span>
<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 class="operater-item">
<h1>交付时间</h1>
<span>2020-12-21 11:05:17</span>
</div>
</div>
</t-col>
<t-col :flex="1">
<div class="operater-block operater-gap">
<div class="operater-content">
<div class="operater-title">
<t-icon
name="server"
size="2em"
<svg
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"
/>
<h1>椅子</h1>
<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">
<h1>产品编号</h1>
<span>p_tmp_60a637cd0C</span>
<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 class="operater-item">
<h1>计费方式</h1>
<span>按量计费</span>
</div>
<div class="operater-item">
<h1>交付时间</h1>
<span>2020-12-21 13:08:09</span>
<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"
/>
</div>
</div>
</t-col>
@ -157,12 +280,34 @@
:columns="columns"
:data="data"
:pagination="pagination"
:bordered="bordered"
:hover="hover"
row-key="index"
size="large"
@sort-change="sortChange"
@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">
<a
:class="prefix + '-link'"
@ -173,6 +318,7 @@
@click="deleteClickOp(slotProps)"
>删除</a>
</template>
<template #op-column>
<t-icon name="descending-order" />
</template>
@ -208,8 +354,8 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import model from './index';
import { PREFIX as prefix } from '@/config/global';
import model from './index';
//
import './index.less';

View File

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

View File

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

View File

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

View File

@ -19,12 +19,19 @@
:class="['content', { unread: item.status }]"
@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>
<template #action>
<p class="msg-date">
{{ item.date }}
</p>
<span class="msg-date">{{ item.date }}</span>
<div class="msg-action">
<t-tooltip
class="set-read-icon"
@ -55,16 +62,20 @@
<path
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"
/></svg></span>
/>
</svg>
</span>
</t-tooltip>
<t-tooltip
content="删除通知"
:overlay-style="{ margin: '6px' }"
>
<span @click="handleClickDeleteBtn(item)"><t-icon
<span @click="handleClickDeleteBtn(item)">
<t-icon
name="delete"
size="16px"
/></span>
/>
</span>
</t-tooltip>
</div>
</template>
@ -98,7 +109,15 @@
:class="['content', { unread: item.status }]"
@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>
<template #action>
<p class="msg-date">
@ -121,10 +140,12 @@
content="删除通知"
:overlay-style="{ margin: '6px' }"
>
<span @click="handleClickDeleteBtn(item)"><t-icon
<span @click="handleClickDeleteBtn(item)">
<t-icon
name="delete"
size="16px"
/></span>
/>
</span>
</t-tooltip>
</div>
</template>
@ -155,7 +176,15 @@
:key="index"
>
<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>
<template #action>
<p class="msg-date">
@ -193,10 +222,12 @@
content="删除通知"
:overlay-style="{ margin: '6px' }"
>
<span @click="handleClickDeleteBtn(item)"><t-icon
<span @click="handleClickDeleteBtn(item)">
<t-icon
name="delete"
size="16px"
/></span>
/>
</span>
</t-tooltip>
</div>
</template>
@ -226,6 +257,7 @@
import { defineComponent } from 'vue';
import { mapState, mapGetters } from 'vuex';
import { PREFIX as prefix } from '@/config/global';
import { NOTIFICATION_TYPES } from '@/constants';
//
import './index.less';
@ -235,6 +267,7 @@ export default defineComponent({
components: {},
data() {
return {
NOTIFICATION_TYPES,
prefix,
data: [],
value: 'frist',

View File

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

View File

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

View File

@ -1,5 +1,4 @@
<template>
<t-page-header> 合同档案 </t-page-header>
<list-common-table />
</template>
<script lang="ts">
@ -14,6 +13,24 @@ export default defineComponent({
});
</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>

View File

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

View File

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

View File

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