mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-12-22 18:39:45 +08:00
feat: update less
This commit is contained in:
pengYYYYY
parent
7282a8a48d
commit
6a6e3637a8
BIN
src/assets/tencent-logo.png
Normal file
BIN
src/assets/tencent-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
|
|
@ -86,6 +86,9 @@ export default defineComponent({
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
// position: absolute;
|
||||
// top: 30px;
|
||||
// right: 32px;
|
||||
}
|
||||
|
||||
&-container {
|
||||
|
|
|
|||
|
|
@ -34,3 +34,4 @@ export default defineComponent({
|
|||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -77,8 +77,6 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@import url('@/style/index.less');
|
||||
|
||||
.trend {
|
||||
|
||||
&-container {
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
|
|||
|
|
@ -33,3 +33,10 @@ export const CONTRACT_PAYMENT_TYPES = {
|
|||
PAYMENT: 0,
|
||||
RECIPT: 1,
|
||||
};
|
||||
|
||||
// 通知的优先级对应的TAG类型
|
||||
export const NOTIFICATION_TYPES = {
|
||||
low: 'primary',
|
||||
middle: 'warning',
|
||||
high: 'danger',
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: 25px;
|
||||
.operater-content {
|
||||
padding: 20px 32px 24px 32px;
|
||||
height: 256px;
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
padding-left: 20px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
.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: 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;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
display: flex;
|
||||
h1 {
|
||||
display: inline-block;
|
||||
width: 136px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,0.60);
|
||||
|
||||
.operater-footer {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
bottom: 0px;
|
||||
|
||||
.t-progress--thin {
|
||||
display: unset;
|
||||
}
|
||||
span {
|
||||
width: 100%;
|
||||
|
||||
&-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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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-title">
|
||||
<t-icon
|
||||
name="server"
|
||||
size="2em"
|
||||
/>
|
||||
<h1>Macbook</h1>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<h1>产品编号</h1>
|
||||
<span>p_tmp_60a637cd0d</span>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<h1>计费方式</h1>
|
||||
<span>按量计费</span>
|
||||
</div>
|
||||
<div class="operater-item">
|
||||
<h1>交付时间</h1>
|
||||
<span>2020-12-21 11:05:17</span>
|
||||
<div class="operater-content">
|
||||
<div class="operater-title">
|
||||
<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"
|
||||
/>
|
||||
<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">
|
||||
<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>
|
||||
</t-col>
|
||||
<t-col :flex="1">
|
||||
<div class="operater-block operater-gap">
|
||||
<div class="operater-title">
|
||||
<t-icon
|
||||
name="server"
|
||||
size="2em"
|
||||
<div class="operater-content">
|
||||
<div class="operater-title">
|
||||
<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"
|
||||
/>
|
||||
<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>
|
||||
</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';
|
||||
|
|
|
|||
|
|
@ -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,11 +68,13 @@
|
|||
border-radius: @border-radius-50;
|
||||
background: @success-color-5;
|
||||
}
|
||||
|
||||
.inProgress {
|
||||
color: @success-color-5;
|
||||
}
|
||||
|
||||
.pdf {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div>
|
||||
<t-page-header> 合同基础详情 </t-page-header>
|
||||
<div :class="prefix + '-panel'">
|
||||
<div class="base-info">
|
||||
<t-row
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
name="delete"
|
||||
size="16px"
|
||||
/></span>
|
||||
<span @click="handleClickDeleteBtn(item)">
|
||||
<t-icon
|
||||
name="delete"
|
||||
size="16px"
|
||||
/>
|
||||
</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
|
||||
name="delete"
|
||||
size="16px"
|
||||
/></span>
|
||||
<span @click="handleClickDeleteBtn(item)">
|
||||
<t-icon
|
||||
name="delete"
|
||||
size="16px"
|
||||
/>
|
||||
</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
|
||||
name="delete"
|
||||
size="16px"
|
||||
/></span>
|
||||
<span @click="handleClickDeleteBtn(item)">
|
||||
<t-icon
|
||||
name="delete"
|
||||
size="16px"
|
||||
/>
|
||||
</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',
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -1,301 +1,301 @@
|
|||
@import '@/style/index';
|
||||
|
||||
.login-wrapper {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-image: url(https://tdesign.gtimg.com/pro-template/login-bg-img.jpg);
|
||||
background-size: cover;
|
||||
background-position: 50%;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
position: absolute;
|
||||
top: 28%;
|
||||
left: 12%;
|
||||
min-height: 500px;
|
||||
line-height: 22px;
|
||||
position: absolute;
|
||||
top: 28%;
|
||||
left: 12%;
|
||||
min-height: 500px;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.title-container {
|
||||
|
||||
.icon {
|
||||
width: 290px;
|
||||
height: 60px;
|
||||
}
|
||||
.icon {
|
||||
width: 290px;
|
||||
height: 60px;
|
||||
}
|
||||
|
||||
.side-title {
|
||||
margin-top: 24.9px;
|
||||
.side-title {
|
||||
margin-top: 24.9px;
|
||||
|
||||
.tip1,
|
||||
.tip2 {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.tip1,
|
||||
.tip2 {
|
||||
display: inline-block;
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
}
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
}
|
||||
|
||||
.tip2 {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.tip2 {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step1 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 72px;
|
||||
.input-container {
|
||||
margin-top: 72px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.check-container {
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step3 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 34px;
|
||||
}
|
||||
.input-container {
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
|
||||
.tip-container {
|
||||
margin-bottom: 16px;
|
||||
.tip-container {
|
||||
margin-bottom: 16px;
|
||||
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
}
|
||||
.tip1 {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
}
|
||||
|
||||
.tip2 {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
.tip2 {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
|
||||
.t-icon {
|
||||
height: 20px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
.t-icon {
|
||||
height: 20px;
|
||||
vertical-align: text-bottom;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.button-container {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.button-container {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
.check-container {
|
||||
font-size: 14px;
|
||||
color: rgba(0,0,0,.60);
|
||||
|
||||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
.tip {
|
||||
float: right;
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step1 {
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 72px;
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-step3 {
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 32px;
|
||||
}
|
||||
|
||||
.input-container .tip-container {
|
||||
width: 192px;
|
||||
}
|
||||
.input-container .tip-container {
|
||||
width: 192px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-step2 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 108.9px;
|
||||
.input-container {
|
||||
margin-top: 108.9px;
|
||||
|
||||
.tip1 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
.tip1 {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
margin-top: 66px;
|
||||
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tip {
|
||||
font-size: 14px;
|
||||
color: @brand-color-8;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
color: @gray-color-3;
|
||||
margin: 0 14px;
|
||||
}
|
||||
i {
|
||||
font-style: normal;
|
||||
color: @gray-color-3;
|
||||
margin: 0 14px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.rex-check {
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-color-placeholder;
|
||||
line-height: 22px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 14px;
|
||||
color: @text-color-placeholder;
|
||||
line-height: 22px;
|
||||
}
|
||||
|
||||
.format-correct {
|
||||
color: @text-color-primary;
|
||||
color: @text-color-primary;
|
||||
|
||||
.t-icon {
|
||||
color: @success-color-5;
|
||||
}
|
||||
.t-icon {
|
||||
color: @success-color-5;
|
||||
}
|
||||
}
|
||||
|
||||
.login-step4 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin-bottom: 24px;
|
||||
.verification-code {
|
||||
margin-bottom: 24px;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step5 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.t-select-popup-reference {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.t-select-popup-reference {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.login-step6 {
|
||||
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
.input-container {
|
||||
margin-top: 64px;
|
||||
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
.t-input {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
.t-popup-reference {
|
||||
margin: 24px 0;
|
||||
}
|
||||
|
||||
.verification-code {
|
||||
margin: 24px 0;
|
||||
.verification-code {
|
||||
margin: 24px 0;
|
||||
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
.t-input {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
button {
|
||||
width: 102px;
|
||||
height: 40px;
|
||||
margin-left: 11px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
.bottom-container {
|
||||
margin-top: 66px;
|
||||
}
|
||||
|
||||
.check-container {
|
||||
.check-container {
|
||||
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
.t-checkbox__label {
|
||||
color: @text-color-secondary;
|
||||
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
span {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
.t-list-item__action {
|
||||
li {
|
||||
margin-right: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.t-icon {
|
||||
color: @text-level-1-color;
|
||||
|
||||
&:hover {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
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-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;
|
||||
background-color: #fff;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.regular {
|
||||
margin: 0 0 0 15px;
|
||||
vertical-align: bottom;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-family: PingFangSC-Semibold;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
.user-right-trend {
|
||||
padding: 24px;
|
||||
|
||||
.t-list-item {
|
||||
padding: 8px 0;
|
||||
cursor: pointer;
|
||||
.user-left-logo {
|
||||
float: right;
|
||||
width: 180px;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
line-height: 20px;
|
||||
.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: @text-level-1-color;
|
||||
|
||||
.t-icon {
|
||||
margin-right: 8px;
|
||||
height: 20px;
|
||||
font-size: 16px;
|
||||
color: @text-level-3-color;
|
||||
}
|
||||
p {
|
||||
display: inline-block;
|
||||
}
|
||||
color: rgba(0, 0, 0, .4);
|
||||
}
|
||||
.t-list-item__action {
|
||||
line-height: 20px;
|
||||
|
||||
&-detail {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 40px;
|
||||
font-family: PingFangSC-Regular;
|
||||
font-size: 12px;
|
||||
color: @text-level-2-color;
|
||||
}
|
||||
&:hover {
|
||||
.text {
|
||||
color: @brand-color-8;
|
||||
|
||||
.t-icon {
|
||||
color: @brand-color-8;
|
||||
}
|
||||
}
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, .9);
|
||||
}
|
||||
}
|
||||
.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;
|
||||
}
|
||||
|
||||
.contract:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-bottom {
|
||||
padding: 24px;
|
||||
margin: 0 0 16px 0;
|
||||
padding: 28px 32px;
|
||||
background: #fff;
|
||||
border-radius: @border-radius;
|
||||
|
||||
.contract {
|
||||
width: 340px;
|
||||
height: 88px;
|
||||
border-radius: @border-radius;
|
||||
margin: 8px 0;
|
||||
cursor: pointer;
|
||||
|
||||
&-type {
|
||||
position: relative;
|
||||
float: left;
|
||||
margin: 13px 16px;
|
||||
.user-bottom-container {
|
||||
margin-top: 15px;
|
||||
|
||||
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;
|
||||
.unit {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user