mirror of
https://github.com/Tencent/tdesign-vue-next-starter.git
synced 2024-09-19 18:24:20 +08:00
fix: style bug (#408)
* fix: style bug * fix: style bug * fix: list style bug * fix: form page style bug * fix: detail style bug * fix: result style bug * fix: user style bug
This commit is contained in:
WenKang
GitHub
parent
77b692742b
commit
e70bac6dfc
|
|
@ -1,5 +1,7 @@
|
|||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#0052D9" stroke="none"/>
|
||||
<path d="M23.9219 31H26.0859L22.0781 19.7266H19.8125L15.8125 31H17.8516L18.8203 28.1172H22.9688L23.9219 31ZM20.8359 21.875H20.9688L22.5 26.5234H19.2891L20.8359 21.875ZM30.6328 29.6172C29.7734 29.6172 29.1562 29.1875 29.1562 28.4688C29.1562 27.7734 29.6641 27.3828 30.75 27.3125L32.6797 27.1875V27.8672C32.6797 28.8594 31.8047 29.6172 30.6328 29.6172ZM30.0625 31.1406C31.1797 31.1406 32.1172 30.6562 32.5938 29.8281H32.7266V31H34.5938V25.1641C34.5938 23.3516 33.3594 22.2812 31.1641 22.2812C29.1328 22.2812 27.7188 23.2422 27.5625 24.75H29.3906C29.5703 24.1719 30.1797 23.8594 31.0703 23.8594C32.1172 23.8594 32.6797 24.3281 32.6797 25.1641V25.8828L30.4766 26.0156C28.3984 26.1406 27.2344 27.0312 27.2344 28.5781C27.2344 30.1406 28.4141 31.1406 30.0625 31.1406Z" fill="white"/>
|
||||
</svg>
|
||||
<rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#0052D9" stroke="none" />
|
||||
<path
|
||||
d="M23.9219 31H26.0859L22.0781 19.7266H19.8125L15.8125 31H17.8516L18.8203 28.1172H22.9688L23.9219 31ZM20.8359 21.875H20.9688L22.5 26.5234H19.2891L20.8359 21.875ZM30.6328 29.6172C29.7734 29.6172 29.1562 29.1875 29.1562 28.4688C29.1562 27.7734 29.6641 27.3828 30.75 27.3125L32.6797 27.1875V27.8672C32.6797 28.8594 31.8047 29.6172 30.6328 29.6172ZM30.0625 31.1406C31.1797 31.1406 32.1172 30.6562 32.5938 29.8281H32.7266V31H34.5938V25.1641C34.5938 23.3516 33.3594 22.2812 31.1641 22.2812C29.1328 22.2812 27.7188 23.2422 27.5625 24.75H29.3906C29.5703 24.1719 30.1797 23.8594 31.0703 23.8594C32.1172 23.8594 32.6797 24.3281 32.6797 25.1641V25.8828L30.4766 26.0156C28.3984 26.1406 27.2344 27.0312 27.2344 28.5781C27.2344 30.1406 28.4141 31.1406 30.0625 31.1406Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 979 B After Width: | Height: | Size: 996 B |
|
|
@ -1,5 +1,7 @@
|
|||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#0594FA" stroke="none"/>
|
||||
<path d="M20.6641 31C23.0703 31 24.5391 29.7734 24.5391 27.7969C24.5391 26.3281 23.4922 25.2344 21.9766 25.0938V24.9531C23.1094 24.7734 23.9844 23.7266 23.9844 22.5391C23.9844 20.8047 22.6953 19.7266 20.5547 19.7266H15.8438V31H20.6641ZM17.8594 21.3281H20.0625C21.2812 21.3281 21.9922 21.9062 21.9922 22.8984C21.9922 23.9141 21.2344 24.4688 19.8047 24.4688H17.8594V21.3281ZM17.8594 29.3984V25.9219H20.125C21.6641 25.9219 22.4766 26.5156 22.4766 27.6406C22.4766 28.7891 21.6875 29.3984 20.2031 29.3984H17.8594ZM31.2812 31.1406C33.4375 31.1406 34.7891 29.4453 34.7891 26.7266C34.7891 23.9922 33.4453 22.3125 31.2812 22.3125C30.1094 22.3125 29.125 22.8828 28.6797 23.8125H28.5469V19.1484H26.6094V31H28.4766V29.6484H28.6094C29.0938 30.5859 30.0859 31.1406 31.2812 31.1406ZM30.6719 23.9609C31.9922 23.9609 32.7969 25.0078 32.7969 26.7266C32.7969 28.4453 32 29.4922 30.6719 29.4922C29.3438 29.4922 28.5156 28.4297 28.5156 26.7266C28.5156 25.0234 29.3516 23.9609 30.6719 23.9609Z" fill="white"/>
|
||||
</svg>
|
||||
<rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#0594FA" stroke="none" />
|
||||
<path
|
||||
d="M20.6641 31C23.0703 31 24.5391 29.7734 24.5391 27.7969C24.5391 26.3281 23.4922 25.2344 21.9766 25.0938V24.9531C23.1094 24.7734 23.9844 23.7266 23.9844 22.5391C23.9844 20.8047 22.6953 19.7266 20.5547 19.7266H15.8438V31H20.6641ZM17.8594 21.3281H20.0625C21.2812 21.3281 21.9922 21.9062 21.9922 22.8984C21.9922 23.9141 21.2344 24.4688 19.8047 24.4688H17.8594V21.3281ZM17.8594 29.3984V25.9219H20.125C21.6641 25.9219 22.4766 26.5156 22.4766 27.6406C22.4766 28.7891 21.6875 29.3984 20.2031 29.3984H17.8594ZM31.2812 31.1406C33.4375 31.1406 34.7891 29.4453 34.7891 26.7266C34.7891 23.9922 33.4453 22.3125 31.2812 22.3125C30.1094 22.3125 29.125 22.8828 28.6797 23.8125H28.5469V19.1484H26.6094V31H28.4766V29.6484H28.6094C29.0938 30.5859 30.0859 31.1406 31.2812 31.1406ZM30.6719 23.9609C31.9922 23.9609 32.7969 25.0078 32.7969 26.7266C32.7969 28.4453 32 29.4922 30.6719 29.4922C29.3438 29.4922 28.5156 28.4297 28.5156 26.7266C28.5156 25.0234 29.3516 23.9609 30.6719 23.9609Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
|
@ -1,5 +1,7 @@
|
|||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#7587DB" stroke="none"/>
|
||||
<path d="M21.1172 31.2812C23.7188 31.2812 25.625 29.7266 25.8906 27.4219H23.9062C23.6328 28.6875 22.5469 29.4844 21.1172 29.4844C19.1953 29.4844 18 27.9062 18 25.3594C18 22.8203 19.1953 21.2422 21.1094 21.2422C22.5312 21.2422 23.6172 22.1172 23.8984 23.4688H25.8828C25.6484 21.1172 23.6719 19.4453 21.1094 19.4453C17.9141 19.4453 15.9375 21.7031 15.9375 25.3672C15.9375 29.0156 17.9219 31.2812 21.1172 31.2812ZM35.3125 25.3281C35.1094 23.5312 33.7812 22.2812 31.5859 22.2812C29.0156 22.2812 27.5078 23.9297 27.5078 26.7031C27.5078 29.5156 29.0234 31.1719 31.5938 31.1719C33.7578 31.1719 35.1016 29.9688 35.3125 28.1797H33.4688C33.2656 29.0703 32.5938 29.5469 31.5859 29.5469C30.2656 29.5469 29.4688 28.5 29.4688 26.7031C29.4688 24.9297 30.2578 23.9062 31.5859 23.9062C32.6484 23.9062 33.2891 24.5 33.4688 25.3281H35.3125Z" fill="white"/>
|
||||
</svg>
|
||||
<rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#7587DB" stroke="none" />
|
||||
<path
|
||||
d="M21.1172 31.2812C23.7188 31.2812 25.625 29.7266 25.8906 27.4219H23.9062C23.6328 28.6875 22.5469 29.4844 21.1172 29.4844C19.1953 29.4844 18 27.9062 18 25.3594C18 22.8203 19.1953 21.2422 21.1094 21.2422C22.5312 21.2422 23.6172 22.1172 23.8984 23.4688H25.8828C25.6484 21.1172 23.6719 19.4453 21.1094 19.4453C17.9141 19.4453 15.9375 21.7031 15.9375 25.3672C15.9375 29.0156 17.9219 31.2812 21.1172 31.2812ZM35.3125 25.3281C35.1094 23.5312 33.7812 22.2812 31.5859 22.2812C29.0156 22.2812 27.5078 23.9297 27.5078 26.7031C27.5078 29.5156 29.0234 31.1719 31.5938 31.1719C33.7578 31.1719 35.1016 29.9688 35.3125 28.1797H33.4688C33.2656 29.0703 32.5938 29.5469 31.5859 29.5469C30.2656 29.5469 29.4688 28.5 29.4688 26.7031C29.4688 24.9297 30.2578 23.9062 31.5859 23.9062C32.6484 23.9062 33.2891 24.5 33.4688 25.3281H35.3125Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 1.0 KiB After Width: | Height: | Size: 1.0 KiB |
|
|
@ -1,5 +1,7 @@
|
|||
<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#00A870" stroke="none"/>
|
||||
<path d="M15.875 19.7266V31H20.1016C23.4766 31 25.4062 28.9297 25.4062 25.3125C25.4062 21.7734 23.4531 19.7266 20.1016 19.7266H15.875ZM17.8906 21.4688H19.8359C22.0469 21.4688 23.3516 22.8828 23.3516 25.3438C23.3516 27.8594 22.0781 29.2578 19.8359 29.2578H17.8906V21.4688ZM30.5938 31.1406C31.7812 31.1406 32.7656 30.5859 33.25 29.6484H33.3828V31H35.2578V19.1484H33.3203V23.8125H33.1875C32.7344 22.875 31.7656 22.3125 30.5938 22.3125C28.4375 22.3125 27.0781 24.0156 27.0781 26.7188C27.0781 29.4375 28.4297 31.1406 30.5938 31.1406ZM31.1953 23.9609C32.5234 23.9609 33.3438 25.0234 33.3438 26.7266C33.3438 28.4453 32.5312 29.4922 31.1953 29.4922C29.8672 29.4922 29.0625 28.4531 29.0625 26.7266C29.0625 25.0078 29.875 23.9609 31.1953 23.9609Z" fill="white"/>
|
||||
</svg>
|
||||
<rect x="0.5" y="0.5" width="49" height="49" rx="24.5" fill="#00A870" stroke="none" />
|
||||
<path
|
||||
d="M15.875 19.7266V31H20.1016C23.4766 31 25.4062 28.9297 25.4062 25.3125C25.4062 21.7734 23.4531 19.7266 20.1016 19.7266H15.875ZM17.8906 21.4688H19.8359C22.0469 21.4688 23.3516 22.8828 23.3516 25.3438C23.3516 27.8594 22.0781 29.2578 19.8359 29.2578H17.8906V21.4688ZM30.5938 31.1406C31.7812 31.1406 32.7656 30.5859 33.25 29.6484H33.3828V31H35.2578V19.1484H33.3203V23.8125H33.1875C32.7344 22.875 31.7656 22.3125 30.5938 22.3125C28.4375 22.3125 27.0781 24.0156 27.0781 26.7188C27.0781 29.4375 28.4297 31.1406 30.5938 31.1406ZM31.1953 23.9609C32.5234 23.9609 33.3438 25.0234 33.3438 26.7266C33.3438 28.4453 32.5312 29.4922 31.1953 29.4922C29.8672 29.4922 29.0625 28.4531 29.0625 26.7266C29.0625 25.0078 29.875 23.9609 31.1953 23.9609Z"
|
||||
fill="white" />
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 958 B After Width: | Height: | Size: 972 B |
|
|
@ -103,22 +103,19 @@ const handleClickDelete = (product: CardProductType) => {
|
|||
min-height: 140px;
|
||||
|
||||
&--name {
|
||||
margin-bottom: 8px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
margin-bottom: var(--td-comp-margin-s);
|
||||
font: var(--td-font-title-medium);
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
|
||||
&--desc {
|
||||
color: var(--td-text-color-secondary);
|
||||
font-size: 12px;
|
||||
line-height: 20px;
|
||||
font: var(--td-font-body-small);
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@ const dynamicComponent = computed(() => {
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 24px;
|
||||
}
|
||||
|
||||
&-bg-img {
|
||||
|
|
@ -84,14 +83,13 @@ const dynamicComponent = computed(() => {
|
|||
|
||||
&-title {
|
||||
font-style: normal;
|
||||
margin-top: 8px;
|
||||
margin-top: var(--td-comp-margin-l);
|
||||
color: var(--td-text-color-primary);
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-tip {
|
||||
margin: 8px 0 32px;
|
||||
margin: var(--td-comp-margin-s) 0 var(--td-comp-margin-xxxl);
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -25,11 +25,11 @@
|
|||
:default-value="LAST_7_DAYS"
|
||||
theme="primary"
|
||||
mode="date"
|
||||
style="width: 240px"
|
||||
style="width: 248px"
|
||||
@change="onMaterialChange"
|
||||
/>
|
||||
</template>
|
||||
<div id="lineContainer" style="width: 100%; height: 410px" />
|
||||
<div id="lineContainer" style="width: 100%; height: 412px" />
|
||||
</t-card>
|
||||
</t-col>
|
||||
<t-col :xs="12" :xl="3">
|
||||
|
|
@ -48,12 +48,12 @@
|
|||
:default-value="LAST_7_DAYS"
|
||||
theme="primary"
|
||||
mode="date"
|
||||
style="display: inline-block; margin-right: 8px; width: 240px"
|
||||
style="display: inline-block; margin-right: var(--td-comp-margin-s); width: 248px"
|
||||
@change="onSatisfyChange"
|
||||
/>
|
||||
<t-button class="card-date-button"> 导出数据 </t-button>
|
||||
</template>
|
||||
<div id="scatterContainer" style="width: 100%; height: 330px" />
|
||||
<div id="scatterContainer" style="width: 100%; height: 434px" />
|
||||
</t-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
{{ data.subtitle }}
|
||||
</div>
|
||||
<div class="operator-title-tags">
|
||||
<t-tag class="operator-title-tag" theme="success" size="small">
|
||||
<t-tag class="operator-title-tag" theme="success" size="medium">
|
||||
{{ data.size }}
|
||||
</t-tag>
|
||||
<t-tag class="operator-title-tag" size="small">
|
||||
<t-tag class="operator-title-tag" size="medium">
|
||||
{{ data.cpu }}
|
||||
</t-tag>
|
||||
<t-tag class="operator-title-tag" size="small">
|
||||
<t-tag class="operator-title-tag" size="medium">
|
||||
{{ data.memory }}
|
||||
</t-tag>
|
||||
</div>
|
||||
|
|
@ -54,50 +54,43 @@ export default defineComponent({
|
|||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.operator-gap {
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
.operator-block {
|
||||
position: relative;
|
||||
background-color: var(--td-bg-color-container);
|
||||
border: 1px solid var(--td-component-border);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--td-radius-medium);
|
||||
|
||||
.operator-content {
|
||||
padding: 20px 32px 24px 32px;
|
||||
height: 256px;
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl);
|
||||
height: 240px;
|
||||
|
||||
.operator-title-icon {
|
||||
background: var(--td-brand-color-1);
|
||||
background: var(--td-brand-color-focus);
|
||||
color: var(--td-brand-color);
|
||||
font-size: 56px;
|
||||
padding: 14px;
|
||||
font-size: var(--td-comp-size-xxxl);
|
||||
padding: calc(var(--td-comp-size-xxxl) - var(--td-comp-size-xl));
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.operator-title {
|
||||
margin-bottom: 25px;
|
||||
margin-bottom: var(--td-comp-margin-xxl);
|
||||
position: relative;
|
||||
|
||||
h1 {
|
||||
display: inline-block;
|
||||
font-weight: 500;
|
||||
font-size: 24px;
|
||||
font: var(--td-font-title-large);
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
|
||||
&-subtitle {
|
||||
display: block;
|
||||
font-weight: 400;
|
||||
font-size: 14px;
|
||||
width: 60%;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-placeholder);
|
||||
}
|
||||
|
||||
&-tag {
|
||||
margin-right: 4px;
|
||||
margin-top: 8px;
|
||||
margin-right: var(--td-comp-margin-s);
|
||||
margin-top: var(--td-comp-margin-l);
|
||||
margin-left: unset;
|
||||
border: unset;
|
||||
}
|
||||
|
|
@ -110,7 +103,7 @@ export default defineComponent({
|
|||
|
||||
svg {
|
||||
circle {
|
||||
fill: var(--td-brand-color-2);
|
||||
fill: var(--td-brand-color-focus);
|
||||
}
|
||||
|
||||
path {
|
||||
|
|
@ -121,21 +114,21 @@ export default defineComponent({
|
|||
|
||||
.operator-item {
|
||||
position: relative;
|
||||
padding-top: 8px;
|
||||
padding-bottom: 8px;
|
||||
padding-bottom: var(--td-comp-margin-xxl);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
|
||||
&-info {
|
||||
display: inline-block;
|
||||
width: 60%;
|
||||
width: 80%;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-placeholder);
|
||||
}
|
||||
|
||||
&-icon {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
right: 0;
|
||||
font-size: var(--td-comp-size-xxxs);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -148,14 +141,34 @@ export default defineComponent({
|
|||
|
||||
.t-progress--thin {
|
||||
display: unset;
|
||||
|
||||
:deep(.t-progress__info) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-percentage {
|
||||
position: absolute;
|
||||
bottom: 15px;
|
||||
right: 32px;
|
||||
bottom: var(--td-comp-margin-l);
|
||||
right: var(--td-comp-paddingLR-xl);
|
||||
color: var(--td-text-color-placeholder);
|
||||
}
|
||||
|
||||
.operator-progress {
|
||||
display: unset;
|
||||
|
||||
:deep(.t-progress__bar) {
|
||||
border-radius: 0px 0px var(--td-radius-medium) var(--td-radius-medium);
|
||||
}
|
||||
|
||||
:deep(.t-progress__inner) {
|
||||
border-radius: 0px 0px 0px var(--td-radius-medium);
|
||||
}
|
||||
|
||||
:deep(.t-progress__info) {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -79,7 +79,7 @@ export const BASE_INFO_DATA = [
|
|||
|
||||
export const TABLE_COLUMNS_DATA = [
|
||||
{
|
||||
width: 300,
|
||||
width: 280,
|
||||
ellipsis: true,
|
||||
colKey: 'index',
|
||||
title: '申请号',
|
||||
|
|
@ -99,14 +99,14 @@ export const TABLE_COLUMNS_DATA = [
|
|||
title: '产品编号',
|
||||
},
|
||||
{
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'purchaseNum',
|
||||
title: '采购数量',
|
||||
sorter: (a, b) => a.purchaseNum - b.purchaseNum,
|
||||
},
|
||||
{
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'adminName',
|
||||
title: '申请部门',
|
||||
|
|
@ -131,7 +131,7 @@ export const TABLE_COLUMNS_DATA = [
|
|||
export const PRODUCT_LIST = [
|
||||
{
|
||||
name: 'MacBook Pro 2021',
|
||||
subTitle: 'MacBook Pro 2021',
|
||||
subtitle: '苹果公司（Apple Inc. ）',
|
||||
size: '13.3 英寸',
|
||||
cpu: 'Apple M1',
|
||||
memory: 'RAM 16GB',
|
||||
|
|
@ -141,7 +141,7 @@ export const PRODUCT_LIST = [
|
|||
},
|
||||
{
|
||||
name: 'Surface Laptop Go',
|
||||
subTitle: '微软（Microsoft Corporation）',
|
||||
subtitle: '微软（Microsoft Corporation）',
|
||||
size: '12.4 英寸',
|
||||
cpu: 'Core i7',
|
||||
memory: 'RAM 16GB',
|
||||
|
|
|
|||
|
|
@ -2,55 +2,72 @@
|
|||
|
||||
.detail-advanced {
|
||||
:deep(.t-card) {
|
||||
padding: 8px;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
}
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
margin-bottom: var(--td-comp-margin-m);
|
||||
}
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__title) {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.advanced-card {
|
||||
margin-top: 0 !important;
|
||||
|
||||
.card-title-default {
|
||||
margin-bottom: 12px;
|
||||
margin-bottom: var(--td-comp-margin-m);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.container-base-margin-top {
|
||||
:deep(.t-card__body) {
|
||||
margin-top: var(--td-comp-margin-xxxl);
|
||||
}
|
||||
|
||||
:deep(.t-text-ellipsis) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.product-block-container {
|
||||
.t-col-xl-4 + .t-col-xl-4 {
|
||||
@media (max-width: @screen-lg-max) {
|
||||
.operator-gap {
|
||||
margin: 16px 0 0 0;
|
||||
margin: var(--td-comp-margin-l) 0 0 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-add {
|
||||
width: 100%;
|
||||
height: 256px;
|
||||
height: 240px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-items: center;
|
||||
padding: 20px 10px 24px 20px;
|
||||
border: dashed 1px var(--td-component-border);
|
||||
border-radius: 3px;
|
||||
border-radius: var(--td-radius-medium);
|
||||
|
||||
.product-sub-icon {
|
||||
background: var(--td-brand-color-1);
|
||||
background: var(--td-brand-color-focus);
|
||||
color: var(--td-brand-color);
|
||||
font-size: 33px;
|
||||
padding: 8px;
|
||||
font-size: var(--td-comp-size-xxxl);
|
||||
padding: calc(var(--td-comp-size-xxxl) - var(--td-comp-size-xl));
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
.product-sub {
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
margin: 0 auto;
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -58,7 +75,7 @@
|
|||
|
||||
svg {
|
||||
rect {
|
||||
fill: var(--td-brand-color-1);
|
||||
fill: var(--td-brand-color-light);
|
||||
}
|
||||
|
||||
path {
|
||||
|
|
@ -68,7 +85,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
padding-top: 12px;
|
||||
padding-top: var(--td-comp-margin-xxl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,7 @@
|
|||
:data="data"
|
||||
:pagination="pagination"
|
||||
:hover="true"
|
||||
:stripe="true"
|
||||
row-key="index"
|
||||
size="large"
|
||||
@sort-change="sortChange"
|
||||
|
|
@ -67,14 +68,21 @@
|
|||
<template #pdName="{ row }">
|
||||
<span>
|
||||
{{ row.pdName }}
|
||||
<t-tag v-if="row.pdType" size="small">{{ row.pdType }}</t-tag>
|
||||
<t-tag v-if="row.pdType" size="medium" style="margin-left: var(--td-comp-margin-s)">{{ 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>
|
||||
<t-tag
|
||||
v-if="row.purchaseNum > 50"
|
||||
theme="danger"
|
||||
variant="light"
|
||||
size="medium"
|
||||
style="margin-left: var(--td-comp-margin-s)"
|
||||
>超预算</t-tag
|
||||
>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,15 +1,24 @@
|
|||
.detail-base {
|
||||
:deep(.t-card) {
|
||||
padding: 8px;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
}
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
margin-bottom: var(--td-comp-margin-m);
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__title) {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
&-info-steps {
|
||||
padding-top: 12px;
|
||||
padding-top: var(--td-comp-margin-xl);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -17,19 +26,19 @@
|
|||
column-count: 2;
|
||||
|
||||
.info-item {
|
||||
padding: 12px 0;
|
||||
padding-top: var(--td-comp-margin-xxl);
|
||||
display: flex;
|
||||
color: var(--td-text-color-primary);
|
||||
|
||||
h1 {
|
||||
width: 200px;
|
||||
width: 160px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
font-weight: normal;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
width: 100px;
|
||||
width: 80px;
|
||||
}
|
||||
|
||||
@media (min-width: @screen-md-min) and (max-width: @screen-md-max) {
|
||||
|
|
@ -41,7 +50,7 @@
|
|||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
margin-left: 24px;
|
||||
margin-left: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
@ -49,11 +58,11 @@
|
|||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--td-radius-circle);
|
||||
background: var(--td-success-color-5);
|
||||
background: var(--td-success-color);
|
||||
}
|
||||
|
||||
.inProgress {
|
||||
color: var(--td-success-color-5);
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
|
||||
.pdf {
|
||||
|
|
@ -81,7 +90,7 @@
|
|||
}
|
||||
|
||||
span {
|
||||
margin-left: 24px;
|
||||
margin-left: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
@ -89,11 +98,11 @@
|
|||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: var(--td-radius-circle);
|
||||
background: var(--td-success-color-5);
|
||||
background: var(--td-success-color);
|
||||
}
|
||||
|
||||
.green {
|
||||
color: var(--td-success-color-5);
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
|
||||
.blue {
|
||||
|
|
|
|||
|
|
@ -83,20 +83,20 @@ export const BASE_INFO_DATA = [
|
|||
|
||||
export const TABLE_COLUMNS = [
|
||||
{
|
||||
width: '448',
|
||||
width: '280',
|
||||
ellipsis: true,
|
||||
colKey: 'name',
|
||||
title: '项目名称',
|
||||
sorter: (a, b) => a.name.substr(10) - b.name.substr(10),
|
||||
},
|
||||
{
|
||||
width: '448',
|
||||
width: '280',
|
||||
ellipsis: true,
|
||||
colKey: 'adminName',
|
||||
title: '管理员',
|
||||
},
|
||||
{
|
||||
width: '448',
|
||||
width: '280',
|
||||
className: 'test',
|
||||
ellipsis: true,
|
||||
colKey: 'updateTime',
|
||||
|
|
|
|||
|
|
@ -28,6 +28,7 @@
|
|||
:data="data"
|
||||
:pagination="pagination"
|
||||
:hover="true"
|
||||
:stripe="true"
|
||||
row-key="index"
|
||||
@sort-change="sortChange"
|
||||
@change="rehandleChange"
|
||||
|
|
@ -204,12 +205,25 @@ const deleteClickOp = (e) => {
|
|||
|
||||
.detail-deploy {
|
||||
:deep(.t-card) {
|
||||
padding: 8px;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
}
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
:deep(.t-card__title) {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:deep(.t-text-ellipsis) {
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
.secondary-notification {
|
||||
background-color: var(--td-bg-color-container);
|
||||
border-radius: var(--td-radius-default);
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
|
||||
border-radius: var(--td-radius-medium);
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
.t-tabs__content {
|
||||
padding-top: 0;
|
||||
|
|
@ -13,7 +13,8 @@
|
|||
|
||||
.t-list-item {
|
||||
cursor: pointer;
|
||||
padding: 13px 24px 13px 0;
|
||||
padding: var(--td-comp-paddingTB-l) 0;
|
||||
transition: .2s linear;
|
||||
|
||||
&:hover {
|
||||
background-color: var(--td-bg-color-container-hover);
|
||||
|
|
@ -33,6 +34,10 @@
|
|||
}
|
||||
}
|
||||
|
||||
:deep(.t-tag) {
|
||||
margin-right: var(--td-comp-margin-l);
|
||||
}
|
||||
|
||||
.t-tag.t-size-s {
|
||||
margin-right: var(--td-comp-margin-s);
|
||||
margin-left: 0;
|
||||
|
|
@ -40,25 +45,25 @@
|
|||
}
|
||||
|
||||
.content {
|
||||
font-family: PingFangSC-Medium;
|
||||
font-size: 14px;
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-placeholder);
|
||||
text-align: left;
|
||||
line-height: 22px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.unread {
|
||||
color: var(--td-brand-color);
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
|
||||
.msg-action {
|
||||
display: none;
|
||||
margin-right: var(--td-comp-margin-xxl);
|
||||
transition: .2s linear;
|
||||
|
||||
.set-read-icon {
|
||||
margin-right: 24px;
|
||||
margin-right: var(--td-comp-margin-l);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<t-list v-if="msgDataList.length > 0" class="secondary-msg-list" :split="true">
|
||||
<t-list-item v-for="(item, index) in msgDataList" :key="index">
|
||||
<p :class="['content', { unread: item.status }]" @click="setReadStatus(item)">
|
||||
<t-tag size="small" :theme="NOTIFICATION_TYPES[item.quality]" variant="light">
|
||||
<t-tag size="medium" :theme="NOTIFICATION_TYPES[item.quality]" variant="light">
|
||||
{{ item.type }}
|
||||
</t-tag>
|
||||
{{ item.content }}
|
||||
|
|
|
|||
|
|
@ -3,13 +3,14 @@
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--td-bg-color-container);
|
||||
padding: 0 32px 134px;
|
||||
border-radius: var(--td-radius-medium) var(--td-radius-medium) 0 0;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl) 80px var(--td-comp-paddingLR-xxl);
|
||||
|
||||
@media (max-width: @screen-sm-max) {
|
||||
padding: 0 32px 67px;
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xl) 80px var(--td-comp-paddingLR-xl);
|
||||
|
||||
.form-basic-container-title {
|
||||
margin: 32px 0 32px;
|
||||
margin: 0 0 var(--td-comp-margin-xxxl) 0;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -17,10 +18,14 @@
|
|||
width: 676px;
|
||||
|
||||
.form-basic-container-title {
|
||||
font-size: 20px;
|
||||
line-height: 24px;
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 400;
|
||||
color: var(--td-text-color-primary);
|
||||
margin: 64px 0 32px;
|
||||
margin: var(--td-comp-margin-xxl) 0 var(--td-comp-margin-xl) 0;
|
||||
}
|
||||
|
||||
.form-title-gap {
|
||||
margin: calc(var(--td-comp-margin-xxl) * 2) 0 var(--td-comp-margin-xl) 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -30,11 +35,12 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding-top: 30px;
|
||||
padding-bottom: 28px;
|
||||
background-color: var(--td-bg-color-component);
|
||||
border-bottom-left-radius: 3px;
|
||||
border-bottom-right-radius: 3px;
|
||||
padding-top: var(--td-comp-paddingLR-xl);
|
||||
padding-bottom: var(--td-comp-paddingLR-xl);
|
||||
background-color: var(--td-bg-color-secondarycontainer);
|
||||
border-bottom-left-radius: var(--td-radius-medium);
|
||||
border-bottom-right-radius: var(--td-radius-medium);
|
||||
border-top: 1px solid var(--td-component-stroke);
|
||||
|
||||
.form-submit-sub {
|
||||
width: 676px;
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
<!-- 表单内容 -->
|
||||
|
||||
<!-- 合同名称,合同类型 -->
|
||||
<t-row class="row-gap" :gutter="[16, 24]">
|
||||
<t-row class="row-gap" :gutter="[32, 24]">
|
||||
<t-col :span="6">
|
||||
<t-form-item label="合同名称" name="name">
|
||||
<t-input v-model="formData.name" :style="{ width: '322px' }" placeholder="请输入内容" />
|
||||
|
|
@ -115,7 +115,7 @@
|
|||
</t-form-item>
|
||||
</t-col>
|
||||
<t-col :span="6">
|
||||
<t-form-item label="" name="files">
|
||||
<t-form-item label="上传文件" name="files">
|
||||
<t-upload
|
||||
v-model="formData.files"
|
||||
action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"
|
||||
|
|
@ -149,7 +149,7 @@
|
|||
<div class="form-submit-container">
|
||||
<div class="form-submit-sub">
|
||||
<div class="form-submit-left">
|
||||
<t-button theme="primary" class="form-submit-confirm" type="submit"> 提交 </t-button>
|
||||
<t-button theme="primary" class="form-submit-confirm" type="submit"> 确认提交 </t-button>
|
||||
<t-button type="reset" class="form-submit-cancel" theme="default" variant="base"> 取消 </t-button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,35 +1,21 @@
|
|||
.form-step-container {
|
||||
background-color: var(--td-bg-color-container);
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
border-radius: var(--td-radius-medium);
|
||||
|
||||
.t-card {
|
||||
padding: 8px;
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rule-tips {
|
||||
margin: 8px 24px 0;
|
||||
margin-top: var(--td-comp-margin-xxxl);
|
||||
}
|
||||
|
||||
.step-container {
|
||||
padding: 8px 24px 0;
|
||||
}
|
||||
|
||||
.step-form {
|
||||
padding: 24px;
|
||||
margin-top: var(--td-comp-margin-xxxl);
|
||||
}
|
||||
|
||||
.step-form-4 {
|
||||
padding: 66px 0 90px 0;
|
||||
text-align: center;
|
||||
> .t-icon {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
> .text {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
> .button-group {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="form-step-container">
|
||||
<!-- 简单步骤条 -->
|
||||
<t-card :bordered="false">
|
||||
<t-steps class="step-container" :current="activeForm" status="process">
|
||||
<t-step-item title="提交开票申请" />
|
||||
<t-step-item title="填写发票信息" />
|
||||
<t-step-item title="确认邮寄地址" />
|
||||
<t-step-item title="完成" />
|
||||
<t-steps class="step-container" :current="1" status="process">
|
||||
<t-step-item title="提交申请" content="已于12月21日提交" />
|
||||
<t-step-item title="电子信息" content="预计1-3个工作日" />
|
||||
<t-step-item title="发票已邮寄" content="电子发票开出后联系" />
|
||||
<t-step-item title="完成申请" content="如有疑问联系客服" />
|
||||
</t-steps>
|
||||
</t-card>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,39 +5,39 @@ export const COLUMNS: PrimaryTableCol<TableRowData>[] = [
|
|||
{
|
||||
title: '合同名称',
|
||||
align: 'left',
|
||||
width: 300,
|
||||
width: 320,
|
||||
colKey: 'name',
|
||||
fixed: 'left',
|
||||
},
|
||||
{ title: '合同状态', colKey: 'status', width: 200 },
|
||||
{ title: '合同状态', colKey: 'status', width: 160 },
|
||||
{
|
||||
title: '合同编号',
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'no',
|
||||
},
|
||||
{
|
||||
title: '合同类型',
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'contractType',
|
||||
},
|
||||
{
|
||||
title: '合同收付类型',
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'paymentType',
|
||||
},
|
||||
{
|
||||
title: '合同金额 (元)',
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'amount',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
fixed: 'right',
|
||||
width: 200,
|
||||
width: 160,
|
||||
colKey: 'op',
|
||||
title: '操作',
|
||||
},
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<div class="search-input">
|
||||
<t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
|
||||
<template #suffix-icon>
|
||||
<search-icon size="20px" />
|
||||
<search-icon size="16px" />
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
|
|
@ -193,17 +193,26 @@ const headerAffixedTop = computed(
|
|||
.trend-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
margin-left: var(--td-comp-margin-s);
|
||||
}
|
||||
}
|
||||
|
||||
.list-card-container {
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.left-operation-container {
|
||||
padding: 6px 0;
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-bottom: var(--td-comp-margin-xxl);
|
||||
|
||||
.selected-count {
|
||||
display: inline-block;
|
||||
margin-left: 8px;
|
||||
margin-left: var(--td-comp-margin-l);
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class="search-input">
|
||||
<t-input v-model="searchValue" placeholder="请输入你需要搜索的内容" clearable>
|
||||
<template #suffix-icon>
|
||||
<search-icon v-if="searchValue === ''" size="20px" />
|
||||
<search-icon v-if="searchValue === ''" size="var(--td-comp-size-xxxs)" />
|
||||
</template>
|
||||
</t-input>
|
||||
</div>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
<template v-if="pagination.total > 0 && !dataLoading">
|
||||
<div class="list-card-items">
|
||||
<t-row :gutter="[16, 12]">
|
||||
<t-row :gutter="[16, 16]">
|
||||
<t-col
|
||||
v-for="product in productList.slice(
|
||||
pagination.pageSize * (pagination.current - 1),
|
||||
|
|
@ -152,19 +152,33 @@ const handleManageProduct = (product) => {
|
|||
&-operation {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: var(--td-comp-margin-xxl);
|
||||
|
||||
.search-input {
|
||||
width: 360px;
|
||||
}
|
||||
}
|
||||
|
||||
&-items {
|
||||
margin-top: 14px;
|
||||
margin-bottom: 24px;
|
||||
&-item {
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingTB-xl);
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
margin-bottom: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
:deep(.t-card__footer) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&-pagination {
|
||||
padding: 16px;
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingTB-xl);
|
||||
}
|
||||
|
||||
&-loading {
|
||||
|
|
|
|||
|
|
@ -1,17 +1,9 @@
|
|||
<template>
|
||||
<div class="list-common-table">
|
||||
<t-form
|
||||
ref="form"
|
||||
:data="formData"
|
||||
:label-width="80"
|
||||
colon
|
||||
:style="{ marginBottom: '8px' }"
|
||||
@reset="onReset"
|
||||
@submit="onSubmit"
|
||||
>
|
||||
<t-form ref="form" :data="formData" :label-width="80" colon @reset="onReset" @submit="onSubmit">
|
||||
<t-row>
|
||||
<t-col :span="10">
|
||||
<t-row :gutter="[16, 24]">
|
||||
<t-row :gutter="[24, 24]">
|
||||
<t-col :span="4">
|
||||
<t-form-item label="合同名称" name="name">
|
||||
<t-input
|
||||
|
|
@ -58,7 +50,7 @@
|
|||
</t-col>
|
||||
|
||||
<t-col :span="2" class="operation-container">
|
||||
<t-button theme="primary" type="submit" :style="{ marginLeft: '8px' }"> 查询 </t-button>
|
||||
<t-button theme="primary" type="submit" :style="{ marginLeft: 'var(--td-comp-margin-s)' }"> 查询 </t-button>
|
||||
<t-button type="reset" variant="base" theme="default"> 重置 </t-button>
|
||||
</t-col>
|
||||
</t-row>
|
||||
|
|
@ -134,40 +126,40 @@ const COLUMNS: PrimaryTableCol<TableRowData>[] = [
|
|||
{
|
||||
title: '合同名称',
|
||||
fixed: 'left',
|
||||
width: 200,
|
||||
width: 280,
|
||||
ellipsis: true,
|
||||
align: 'left',
|
||||
colKey: 'name',
|
||||
},
|
||||
{ title: '合同状态', colKey: 'status', width: 200 },
|
||||
{ title: '合同状态', colKey: 'status', width: 160 },
|
||||
{
|
||||
title: '合同编号',
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'no',
|
||||
},
|
||||
{
|
||||
title: '合同类型',
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'contractType',
|
||||
},
|
||||
{
|
||||
title: '合同收付类型',
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'paymentType',
|
||||
},
|
||||
{
|
||||
title: '合同金额 (元)',
|
||||
width: 200,
|
||||
width: 160,
|
||||
ellipsis: true,
|
||||
colKey: 'amount',
|
||||
},
|
||||
{
|
||||
align: 'left',
|
||||
fixed: 'right',
|
||||
width: 200,
|
||||
width: 160,
|
||||
colKey: 'op',
|
||||
title: '操作',
|
||||
},
|
||||
|
|
@ -273,11 +265,11 @@ const headerAffixedTop = computed(
|
|||
<style lang="less" scoped>
|
||||
.list-common-table {
|
||||
background-color: var(--td-bg-color-container);
|
||||
padding: 30px 32px;
|
||||
border-radius: var(--td-radius-default);
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
border-radius: var(--td-radius-medium);
|
||||
|
||||
.table-container {
|
||||
margin-top: 30px;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -294,10 +286,6 @@ const headerAffixedTop = computed(
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.t-icon {
|
||||
margin-left: 4px;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -307,7 +295,7 @@ const headerAffixedTop = computed(
|
|||
.trend-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 8px;
|
||||
margin-left: var(--td-comp-margin-s);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="list-tree-operator">
|
||||
<t-input v-model="filterText" placeholder="请输入关键词" @input="onInput">
|
||||
<template #suffix-icon>
|
||||
<search-icon size="20px" />
|
||||
<search-icon size="var(--td-comp-size-xxxs)" />
|
||||
</template>
|
||||
</t-input>
|
||||
<t-tree :data="TREE_DATA" hover expand-on-click-node :default-expanded="expanded" :filter="filterByText" />
|
||||
|
|
@ -45,10 +45,10 @@ const onInput = () => {
|
|||
<style lang="less" scoped>
|
||||
.table-tree-container {
|
||||
background-color: var(--td-bg-color-container);
|
||||
border-radius: var(--td-radius-default);
|
||||
border-radius: var(--td-radius-medium);
|
||||
|
||||
.t-tree {
|
||||
margin-top: 24px;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -57,9 +57,9 @@ const onInput = () => {
|
|||
}
|
||||
|
||||
.list-tree-operator {
|
||||
width: 200px;
|
||||
width: 280px;
|
||||
float: left;
|
||||
padding: 30px 32px;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
}
|
||||
|
||||
.list-tree-content {
|
||||
|
|
|
|||
|
|
@ -36,19 +36,19 @@ import Thumbnail from '@/components/thumbnail/index.vue';
|
|||
align-items: center;
|
||||
justify-content: space-between;
|
||||
color: var(--td-text-color-secondary);
|
||||
height: calc(75vh - 254px);
|
||||
min-height: 156px;
|
||||
height: 80vh;
|
||||
max-height: 240px;
|
||||
}
|
||||
|
||||
.recommend-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 24px 48px;
|
||||
padding: var(--td-comp-paddingTB-xl) var(--td-comp-paddingLR-xxl);
|
||||
width: 640px;
|
||||
background: var(--td-bg-color-container);
|
||||
box-shadow: 0px 1px 2px var(--td-shadow-1);
|
||||
border-radius: 3px;
|
||||
box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.1);
|
||||
border-radius: var(--td-radius-medium);
|
||||
}
|
||||
|
||||
.recommend-browser {
|
||||
|
|
@ -59,16 +59,16 @@ import Thumbnail from '@/components/thumbnail/index.vue';
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
height: 70px;
|
||||
}
|
||||
|
||||
> div + div {
|
||||
margin-left: 40px;
|
||||
margin-left: var(--td-comp-margin-xxxl);
|
||||
}
|
||||
}
|
||||
|
||||
.browser-icon {
|
||||
width: 36.67px;
|
||||
height: 36.67px;
|
||||
width: var(--td-comp-size-xl);
|
||||
height: var(--td-comp-size-xl);
|
||||
margin-bottom: var(--td-comp-margin-s);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<div class="result-success-title">项目创建失败</div>
|
||||
<div class="result-success-describe">企业微信联系检查创建者权限，或返回修改</div>
|
||||
<div>
|
||||
<t-button @click="() => $router.push('/form/base')">返回修改</t-button>
|
||||
<t-button theme="default" @click="() => $router.push('/dashboard/base')">返回首页</t-button>
|
||||
<t-button @click="() => $router.push('/form/base')">返回修改</t-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -22,24 +22,21 @@ export default {
|
|||
align-items: center;
|
||||
height: 75vh;
|
||||
&-icon {
|
||||
font-size: 64px;
|
||||
font-size: var(--td-comp-size-xxxxl);
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 16px;
|
||||
font-size: 20px;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
font: var(--td-font-title-large);
|
||||
color: var(--td-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-describe {
|
||||
margin: 8px 0 32px;
|
||||
font-size: 14px;
|
||||
margin: var(--td-comp-margin-s) 0 var(--td-comp-margin-xxxl);
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<result title="系统维护中" tip="系统维护中，请稍后再试" type="maintenance">
|
||||
<t-button theme="default" @click="() => $router.push('/')">返回首页</t-button>
|
||||
<t-button theme="primary" @click="() => $router.push('/')">返回首页</t-button>
|
||||
</result>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -4,8 +4,8 @@
|
|||
<div class="result-success-title">项目已创建成功</div>
|
||||
<div class="result-success-describe">可以联系负责人分发应用</div>
|
||||
<div>
|
||||
<t-button @click="() => $router.push('/form/base')"> 返回首页 </t-button>
|
||||
<t-button theme="default" @click="() => $router.push('/detail/advanced')"> 查看进度 </t-button>
|
||||
<t-button @click="() => $router.push('/form/base')"> 返回首页 </t-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -23,24 +23,21 @@ export default {
|
|||
height: 75vh;
|
||||
|
||||
&-icon {
|
||||
font-size: 64px;
|
||||
font-size: var(--td-comp-size-xxxxl);
|
||||
color: var(--td-success-color);
|
||||
}
|
||||
|
||||
&-title {
|
||||
margin-top: 16px;
|
||||
font-size: 20px;
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
font: var(--td-font-title-large);
|
||||
color: var(--td-text-color-primary);
|
||||
text-align: center;
|
||||
line-height: 22px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&-describe {
|
||||
margin: 8px 0 32px;
|
||||
font-size: 14px;
|
||||
color: var(--td-text-color-primary);
|
||||
line-height: 22px;
|
||||
margin: var(--td-comp-margin-s) 0 var(--td-comp-margin-xxxl);
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-secondary);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,50 +1,53 @@
|
|||
:deep(.t-card__title) {
|
||||
font-size: 20px;
|
||||
font-weight: 500;
|
||||
font: var(--td-font-title-large);
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.user-left-greeting {
|
||||
padding: 28px 32px;
|
||||
line-height: 28px;
|
||||
font-size: 20px;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
font: var(--td-font-title-large);
|
||||
background: var(--td-bg-color-container);
|
||||
color: var(--td-text-color-primary);
|
||||
text-align: left;
|
||||
border-radius: var(--td-radius-default);
|
||||
border-radius: var(--td-radius-medium);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
.regular {
|
||||
margin-right: 15px;
|
||||
font-size: 14px;
|
||||
margin-left: var(--td-comp-margin-xl);
|
||||
font: var(--td-font-body-medium);
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 180px;
|
||||
width: 168px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info-list {
|
||||
margin-top: 16px;
|
||||
margin-top: var(--td-comp-margin-l);
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
.content {
|
||||
width: 90%;
|
||||
}
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.contract {
|
||||
width: 340px;
|
||||
height: 88px;
|
||||
border-radius: var(--td-radius-default);
|
||||
margin: 8px 0;
|
||||
|
||||
&-title {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 24px;
|
||||
margin: 20px 0 6px;
|
||||
font-size: 14px;
|
||||
margin: var(--td-comp-margin-xxxl) 0 var(--td-comp-margin-l);
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-placeholder);
|
||||
}
|
||||
|
||||
|
|
@ -52,9 +55,8 @@
|
|||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
color: var(--td-text-color-secondary);
|
||||
font: var(--td-font-body-medium);
|
||||
color: var(--td-text-color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -64,23 +66,25 @@
|
|||
}
|
||||
|
||||
.user-intro {
|
||||
padding: 32px 24px;
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
background: var(--td-brand-color);
|
||||
border-radius: var(--td-radius-default);
|
||||
border-radius: var(--td-radius-medium);
|
||||
color: var(--td-text-color-primary);
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.name {
|
||||
line-height: 37px;
|
||||
font-size: 20px;
|
||||
margin-top: 36px;
|
||||
color: #fff;
|
||||
font: var(--td-font-title-large);
|
||||
margin-top: var(--td-comp-margin-xxxl);
|
||||
color: var(--td-text-color-anti);
|
||||
}
|
||||
|
||||
.position {
|
||||
line-height: 24px;
|
||||
font-size: 14px;
|
||||
margin-top: 8px;
|
||||
color: #fff;
|
||||
font: var(--td-font-body-medium);
|
||||
margin-top: var(--td-comp-margin-s);
|
||||
color: var(--td-text-color-anti);
|
||||
}
|
||||
|
||||
.user-info {
|
||||
|
|
@ -106,41 +110,82 @@
|
|||
}
|
||||
|
||||
.product-container {
|
||||
margin-top: 16px;
|
||||
border-radius: var(--td-radius-default);
|
||||
margin-top: var(--td-comp-margin-l);
|
||||
border-radius: var(--td-radius-medium);
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
margin-bottom: var(--td-comp-margin-m);
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
width: 100%;
|
||||
margin: 24px 0 12px;
|
||||
margin: var(--td-comp-margin-xxxl) 0 0;
|
||||
}
|
||||
|
||||
.logo {
|
||||
width: 48px;
|
||||
width: var(--td-comp-size-xxl);
|
||||
}
|
||||
}
|
||||
|
||||
.content-container {
|
||||
margin-top: 16px;
|
||||
margin-top: var(--td-comp-margin-l);
|
||||
background: var(--td-bg-color-container);
|
||||
border-radius: var(--td-radius-default);
|
||||
}
|
||||
border-radius: var(--td-radius-medium);
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
.user-team {
|
||||
margin-top: 16px;
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.t-list-item {
|
||||
padding: 15px 0;
|
||||
|
||||
.t-list-item__meta-avatar {
|
||||
height: 50px;
|
||||
width: 50px;
|
||||
margin: 0 24px 0 0;
|
||||
}
|
||||
|
||||
.t-list-item__meta-description {
|
||||
display: inline-block;
|
||||
color: rgb(0 0 0 / 40%);
|
||||
font-size: 14px;
|
||||
.card-padding-no {
|
||||
margin-top: var(--td-comp-margin-xxxl);
|
||||
:deep(.t-card__body) {
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-team {
|
||||
margin-top: var(--td-comp-margin-l);
|
||||
padding: var(--td-comp-paddingTB-xxl) var(--td-comp-paddingLR-xxl);
|
||||
|
||||
:deep(.t-card__header) {
|
||||
padding: 0;
|
||||
margin-bottom: var(--td-comp-margin-m);
|
||||
}
|
||||
|
||||
:deep(.t-card__body) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.t-list-item {
|
||||
margin-top: var(--td-comp-margin-xxl);
|
||||
padding: 0;
|
||||
|
||||
:deep(.t-list-item__meta-avatar) {
|
||||
height: var(--td-comp-size-xxl);
|
||||
width: var(--td-comp-size-xxl);
|
||||
margin-right: var(--td-comp-margin-xxl);
|
||||
}
|
||||
|
||||
:deep(.t-list-item__meta-title) {
|
||||
margin: 0 0 var(--td-comp-margin-xs);
|
||||
}
|
||||
|
||||
:deep(.t-list-item__meta-description) {
|
||||
display: inline-block;
|
||||
color: var(--td-text-color-placeholder);
|
||||
font: var(--td-font-body-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
<t-card class="user-info-list" title="个人信息" :bordered="false">
|
||||
<template #actions>
|
||||
<t-button theme="default" shape="square" variant="text">
|
||||
<t-icon name="edit" size="18" />
|
||||
<t-icon name="ellipsis" />
|
||||
</t-button>
|
||||
</template>
|
||||
<t-row class="content" justify="space-between">
|
||||
|
|
@ -43,7 +43,7 @@
|
|||
@change="onLineChange"
|
||||
/>
|
||||
</template>
|
||||
<div id="lineContainer" style="width: 100%; height: 330px" />
|
||||
<div id="lineContainer" style="width: 100%; height: 328px" />
|
||||
</t-card>
|
||||
</t-tab-panel>
|
||||
<t-tab-panel value="third" label="内容列表">
|
||||
|
|
@ -55,7 +55,7 @@
|
|||
|
||||
<t-col :flex="1">
|
||||
<t-card class="user-intro" :bordered="false">
|
||||
<t-avatar size="90px">T</t-avatar>
|
||||
<t-avatar size="80px">T</t-avatar>
|
||||
<div class="name">My Account</div>
|
||||
<div class="position">XXG 港澳业务拓展组员工 直客销售</div>
|
||||
</t-card>
|
||||
|
|
@ -63,7 +63,7 @@
|
|||
<t-card title="团队成员" class="user-team" :bordered="false">
|
||||
<template #actions>
|
||||
<t-button theme="default" shape="square" variant="text">
|
||||
<t-icon name="edit" size="18" />
|
||||
<t-icon name="ellipsis" />
|
||||
</t-button>
|
||||
</template>
|
||||
<t-list :split="false">
|
||||
|
|
@ -76,7 +76,7 @@
|
|||
<t-card title="服务产品" class="product-container" :bordered="false">
|
||||
<template #actions>
|
||||
<t-button theme="default" shape="square" variant="text">
|
||||
<t-icon name="edit" size="18" />
|
||||
<t-icon name="ellipsis" />
|
||||
</t-button>
|
||||
</template>
|
||||
<t-row class="content" :getters="16">
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user