feat: 修改ui样式

pull/106/head
刘释隆 1 year ago
parent 0ee2ea778e
commit 7c6e5b9c45

@ -101,8 +101,8 @@ const options = computed(() => {
> >
<template #trigger> <template #trigger>
<div class="setting"> <div class="setting">
<span>{{ useInfo.username }}</span> <span style="color:#333333">{{ useInfo.username }}</span>
<SvgIcon style="margin-left: 6px" :name="iconName" size="14" /> <SvgIcon style="margin-left: 6px" :name="iconName" size="16" />
</div> </div>
</template> </template>
<div class="container"> <div class="container">

@ -197,6 +197,7 @@ export default defineComponent({
<!-- 菜单收起 --> <!-- 菜单收起 -->
<div <div
class="ml-1 layout-header-trigger layout-header-trigger-min" class="ml-1 layout-header-trigger layout-header-trigger-min"
style="padding-top: 2px;"
@click="() => $emit('update:collapsed', !collapsed)" @click="() => $emit('update:collapsed', !collapsed)"
> >
<SvgIcon name="homepage" size="16" /> <SvgIcon name="homepage" size="16" />
@ -267,7 +268,7 @@ export default defineComponent({
img { img {
width: auto; width: auto;
height: 32px; height: 34px;
margin-right: 10px; margin-right: 10px;
} }
@ -280,7 +281,7 @@ export default defineComponent({
&-right { &-right {
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 20px; margin-right: 24px;
.back { .back {
width: 28px; width: 28px;

@ -312,7 +312,7 @@ const showSearch = computed(() => {
<span class="wrapper-title">全部筛选值</span> <span class="wrapper-title">全部筛选值</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px' }">基本信息</span> <span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span>
</div> </div>
</div> </div>
<div class="wrapper-form" v-if="!showSearch"> <div class="wrapper-form" v-if="!showSearch">

@ -261,7 +261,7 @@ defineExpose({
<span class="wrapper-title">{{ modalTitle }}</span> <span class="wrapper-title">{{ modalTitle }}</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px' }">基本信息</span> <span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span>
</div> </div>
</div> </div>
<div class="wrapper-form"> <div class="wrapper-form">

@ -364,7 +364,7 @@ const handleOk = () => {
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span <span
:style="{ 'margin-left': '18px', 'font-size': '16px' }" :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }"
class="wrapper-info-title" class="wrapper-info-title"
>基本信息</span >基本信息</span
> >

@ -310,7 +310,7 @@ defineExpose({
<span class="wrapper-title">{{ modalTitle }}</span> <span class="wrapper-title">{{ modalTitle }}</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px' }">基本信息</span> <span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span>
</div> </div>
</div> </div>
<div class="wrapper-form"> <div class="wrapper-form">

@ -785,7 +785,7 @@ const dropdownOptions = ref([
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: #fff; background: #fff;
padding: 0px 15px 0px 15px; padding: 0px 16px 0px 15px;
box-sizing: border-box; box-sizing: border-box;
height: 64px; height: 64px;
border: 1px solid rgb(239, 239, 245); border: 1px solid rgb(239, 239, 245);
@ -802,7 +802,10 @@ const dropdownOptions = ref([
font-weight: bold; font-weight: bold;
color: #333333; color: #333333;
line-height: 25px; line-height: 25px;
margin-left: 12px; width: 89px;
height: 25px;
white-space: nowrap;
// margin-left: 12px;
} }
} }

@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted, ref } from "vue"; import { onMounted, ref } from "vue";
import {getToolsCount } from '@/api/home/main' import { getToolsCount } from "@/api/home/main";
const emit = defineEmits<{ const emit = defineEmits<{
(e: "reject", params: any); (e: "reject", params: any);
@ -13,13 +13,13 @@ const toolsData = ref({} as any);
async function getData() { async function getData() {
const res = await getToolsCount(); const res = await getToolsCount();
toolsData.value = res.data || {}; toolsData.value = res.data || {};
if(res.code == 'OK'){ if (res.code == "OK") {
showModal(); showModal();
} }
} }
onMounted(() => { onMounted(() => {
getData() getData();
}) });
function showModal() { function showModal() {
show.value = true; show.value = true;
@ -40,8 +40,6 @@ async function viewRepeat(e: MouseEvent) {
closeModal(); closeModal();
} }
defineExpose({ defineExpose({
showModal, showModal,
}); });
@ -55,32 +53,33 @@ defineExpose({
<div class="wrapper-mark">某某有限公司-某某事业部-张小凡</div> <div class="wrapper-mark">某某有限公司-某某事业部-张小凡</div>
</div> </div>
<div class="wrapper-content"> <div class="wrapper-content">
<div class="flex_box" style="height: 100px"> <div class="flex_box">
<div class="item"> <div class="item">
<SvgIcon name="task_count" width="80" height="96" /> <SvgIcon name="task_count" width="49" height="58" />
<div class="num_box">{{ toolsData?.total || 0 }}</div> <div class="num_box">{{ toolsData?.total || 0 }}</div>
<div class="title_box">任务总数</div> <div class="title_box">任务总数</div>
</div> </div>
<div class="item"> <div class="item">
<SvgIcon name="task_wait" width="80" height="96" /> <SvgIcon name="task_wait" width="49" height="58" />
<div class="num_box">{{ toolsData?.treat || 0 }}</div> <div class="num_box">{{ toolsData?.treat || 0 }}</div>
<div class="title_box">待审批</div> <div class="title_box">待审批</div>
</div> </div>
<div class="item"> <div class="item">
<SvgIcon name="task_over" width="80" height="96" /> <SvgIcon name="task_over" width="49" height="58" />
<div class="num_box">{{ toolsData?.approvedCount || 0 }}</div> <div class="num_box">{{ toolsData?.approvedCount || 0 }}</div>
<div class="title_box">已审批</div> <div class="title_box">已审批</div>
</div> </div>
</div> </div>
<div class="footer"> <div class="footer" @click="viewRepeat"></div>
<!-- <div class="footer">
<SvgIcon <SvgIcon
@click="viewRepeat" @click="viewRepeat"
style="cursor: pointer" style="cursor: pointer"
name="login_r" name="login_r"
width="200" width="167"
height="70" height="60"
/> />
</div> </div> -->
</div> </div>
</div> </div>
</n-modal> </n-modal>
@ -91,60 +90,61 @@ defineExpose({
background-image: url(../../../../assets/images/approval_modal_bg.png); background-image: url(../../../../assets/images/approval_modal_bg.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: 100%; background-size: 100%;
width: 700px; width: 510px;
height: 500px; height: 361px;
box-shadow: none !important; box-shadow: none !important;
} }
.wrapper { .wrapper {
position: absolute; position: absolute;
left: calc(50% - 350px); left: calc(50% - 350px);
.wrapper-hearder { .wrapper-hearder {
margin-top: 110px; margin-top: 80px;
.wrapper-title { .wrapper-title {
text-align: center; text-align: center;
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC-Semibold; font-family: PingFang SC, PingFang SC-Semibold;
font-weight: Semibold; font-weight: 600;
text-align: center; text-align: center;
color: #333333; color: #333333;
line-height: 32px; line-height: 22px;
} }
.wrapper-mark { .wrapper-mark {
text-align: center;
font-size: 13px; font-size: 13px;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Regular;
font-weight: Regular; font-weight: 400;
text-align: center; text-align: center;
color: #666666; color: #666666;
line-height: 18px; line-height: 18px;
margin-top: 8px;
} }
} }
.wrapper-content { .wrapper-content {
flex: 1; flex: 1;
border-radius: 8px; border-radius: 8px;
margin: 100px 60px 35px 120px; margin: 24px 50px 16px 48px;
.flex_box { .flex_box {
display: flex; display: flex;
flex-flow: row nowrap; flex-flow: row nowrap;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
margin: 58.5px 0 0 20px;
.item { .item {
.num_box { .num_box {
font-size: 32px; font-size: 20px;
font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold; font-family: HarmonyOS Sans SC, HarmonyOS Sans SC-Bold;
font-weight: Bold; font-weight: bold;
text-align: left;
color: #202020;
text-align: center; text-align: center;
color: #202020;
line-height: 23px;
} }
.title_box { .title_box {
opacity: 0.6; opacity: 0.6;
font-size: 16px; font-size: 12px;
font-family: PingFang SC, PingFang SC-Regular; font-family: PingFang SC, PingFang SC-Regular;
font-weight: Regular; font-weight: Regular;
text-align: center; text-align: center;
color: #202020; color: #202020;
text-align: center; line-height: 16px;
} }
} }
} }
@ -193,14 +193,39 @@ defineExpose({
} }
} }
.footer { .footer {
display: flex; width: 153px;
flex-flow: row nowrap; height: 46px;
align-items: center; background: linear-gradient(135deg, #3258e8, #786efc);
justify-content: center; border: 1px solid;
margin: 20px 30px 0 0; border-image: linear-gradient(123deg, #d7dffe 2%, #d7d5ff 88%) 1 1;
border-radius: 24px;
box-shadow: 0px 2px 6px 0px rgba(116, 153, 253, 0.3);
cursor: pointer;
margin: 20px auto 0;
position: relative; position: relative;
bottom: -80px; bottom: -30px;
} left: 20px;
font-size: 24px;
font-family: YouSheBiaoTiHei, YouSheBiaoTiHei-Regular;
text-align: center;
color: #ffffff;
line-height: 46px;
border: none;
font-style: italic;
}
// .footer {
// display: flex;
// flex-flow: row nowrap;
// align-items: center;
// justify-content: center;
// margin: 20px 30px 0 0;
// position: relative;
// bottom: -30px;
// left: 20px;
// }
} }
} }
</style> </style>

@ -77,7 +77,7 @@ function afterLeave() {
<span class="wrapper-title">生成任务包设置</span> <span class="wrapper-title">生成任务包设置</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px' }">基本信息</span> <span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span>
</div> </div>
</div> </div>
<n-form ref="formRef" :model="model" require-mark-placement="left" style="margin-top: 8px;" :rules="rules"> <n-form ref="formRef" :model="model" require-mark-placement="left" style="margin-top: 8px;" :rules="rules">
@ -111,8 +111,9 @@ function afterLeave() {
flex-direction: column; flex-direction: column;
&-title { &-title {
font-weight: bold; font-weight: 600;
font-size: 16px; // font-weight: bold;
font-size: 18px;
color: #333; color: #333;
} }

@ -74,7 +74,7 @@ defineProps({
align-items: center; align-items: center;
font-size: 16px; font-size: 16px;
font-family: PingFang SC, PingFang SC-Medium; font-family: PingFang SC, PingFang SC-Medium;
font-weight: 500; font-weight: 600;
color: #333333; color: #333333;
&:before { &:before {

@ -275,7 +275,7 @@ defineExpose({
<span class="wrapper-title">{{ modalTitle }}</span> <span class="wrapper-title">{{ modalTitle }}</span>
<div class="wrapper-bar"> <div class="wrapper-bar">
<div class="wrapper-info"> <div class="wrapper-info">
<span :style="{ 'margin-left': '18px' }">基本信息</span> <span :style="{ 'margin-left': '18px', 'font-size': '16px','font-weight':'600' }">基本信息</span>
</div> </div>
</div> </div>
<div class="wrapper-form"> <div class="wrapper-form">

Loading…
Cancel
Save