Compare commits

...

5 Commits

@ -90,13 +90,13 @@ const getThemeOverrides = computed(() => {
// transform: rotate(-90deg) !important; // transform: rotate(-90deg) !important;
// } // }
.n-scrollbar-content { .n-scrollbar-content {
padding: 0 7.97px 0 4px; padding: 0 7.97px 16 16px;
} }
.n-form-item .n-form-item-label { .n-form-item .n-form-item-label {
font-size: 14px !important; font-size: 14px !important;
color: #333333 !important; color: #333333 !important;
} }
.n-slider-dots > .n-slider-dot:nth-child(2) { .n-slider-dots > .n-slider-dot {
display: none !important; display: none !important;
} }
.n-collapse-item-arrow i svg { .n-collapse-item-arrow i svg {

@ -1,6 +1,15 @@
<script lang="ts"> <script lang="ts">
import { useDialog, useMessage } from 'naive-ui' import { useDialog, useMessage } from 'naive-ui'
import { defineComponent, inject, onMounted, reactive, ref, toRefs, unref, watch } from 'vue' import {
defineComponent,
inject,
onMounted,
reactive,
ref,
toRefs,
unref,
watch,
} from 'vue'
import { useRoute, useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
import QuillModal from './QuillModal.vue' import QuillModal from './QuillModal.vue'
import RecycleModal from './RecycleModal.vue' import RecycleModal from './RecycleModal.vue'
@ -198,6 +207,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-left: 13px"
@click="() => $emit('update:collapsed', !collapsed)" @click="() => $emit('update:collapsed', !collapsed)"
> >
<SvgIcon name="homepage" size="16" /> <SvgIcon name="homepage" size="16" />
@ -227,7 +237,11 @@ export default defineComponent({
<!-- 个人中心 --> <!-- 个人中心 -->
<div class="layout-header-trigger layout-header-trigger-min"> <div class="layout-header-trigger layout-header-trigger-min">
<!-- <n-avatar :src="getImgUrl(useInfo.usericon)" round /> --> <!-- <n-avatar :src="getImgUrl(useInfo.usericon)" round /> -->
<n-avatar style="width:36px;height:36px;" :src="(useInfo.usericon && getImgUrl(useInfo.usericon)) || defaultAvatarSrc" round /> <n-avatar
style="width: 36px; height: 36px"
:src="(useInfo.usericon && getImgUrl(useInfo.usericon)) || defaultAvatarSrc"
round
/>
</div> </div>
<!-- 设置 --> <!-- 设置 -->
<UserSettings @logout="doLogout" /> <UserSettings @logout="doLogout" />

@ -1,7 +1,7 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { FormInst, FormRules } from 'naive-ui'; import type { FormInst, FormRules } from 'naive-ui'
import { useMessage } from 'naive-ui'; import { useMessage } from 'naive-ui'
import { ref } from 'vue'; import { ref } from 'vue'
const emit = defineEmits<{ const emit = defineEmits<{
(e: 'commit', value: any) (e: 'commit', value: any)
@ -72,18 +72,38 @@ function afterLeave() {
<template> <template>
<n-modal v-model:show="show" transform-origin="center" @after-leave="afterLeave"> <n-modal v-model:show="show" transform-origin="center" @after-leave="afterLeave">
<n-card :style="cardStyle" :bordered="false" size="huge" role="dialog" aria-modal="true"> <n-card
:style="cardStyle"
:bordered="false"
size="huge"
role="dialog"
aria-modal="true"
>
<div class="wrapper"> <div class="wrapper">
<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', 'font-size': '16px','font-weight':'600' }">基本信息</span> <span
:style="{
'margin-left': '18px',
'font-size': '16px',
'font-weight': '600',
}"
>基本信息</span>
</div> </div>
</div> </div>
<!-- require-mark-placement="left" --> <!-- require-mark-placement="left" -->
<n-form ref="formRef" :model="model" style="margin-top: 8px;" :rules="rules"> <n-form ref="formRef" :model="model" style="margin-top: 8px" :rules="rules">
<n-form-item class="wrapper-task-package-name" path="packagename" label="任务包名称"> <n-form-item
<n-input v-model:value="model.packagename" maxlength="12" @keydown.enter.prevent /> class="wrapper-task-package-name"
path="packagename"
label="任务包名称"
>
<n-input
v-model:value="model.packagename"
maxlength="12"
@keydown.enter.prevent
/>
</n-form-item> </n-form-item>
<!-- <n-form-item path="mark" :style="formItemStyle"> <!-- <n-form-item path="mark" :style="formItemStyle">
<n-checkbox v-model:checked="model.mark" > <n-checkbox v-model:checked="model.mark" >
@ -94,10 +114,23 @@ function afterLeave() {
</div> </div>
<template #footer> <template #footer>
<div class="wrapper-footer"> <div class="wrapper-footer">
<n-button style="background-color: #507AFD !important;" type="info" @click="handleSumbit"> <n-button
style="background-color: #507afd !important"
type="info"
@click="handleSumbit"
>
生成任务包 生成任务包
</n-button> </n-button>
<n-button secondary style="margin-left:15px;color: #333;background-color: #fff;border: 1px solid #CAD2DD;" @click="closeModal"> <n-button
secondary
style="
margin-left: 15px;
color: #333;
background-color: #fff;
border: 1px solid #cad2dd;
"
@click="closeModal"
>
取消 取消
</n-button> </n-button>
</div> </div>
@ -110,7 +143,7 @@ function afterLeave() {
.wrapper { .wrapper {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 14px 14px 0 14px ; padding: 14px 14px 0 14px;
&-title { &-title {
font-weight: 600; font-weight: 600;
// font-weight: bold; // font-weight: bold;
@ -123,7 +156,8 @@ function afterLeave() {
width: 100%; width: 100%;
margin-top: 24px; margin-top: 24px;
font-size: 16px; font-size: 16px;
margin-bottom: 16px; // margin-top:8px;
margin-bottom: 8px;
span { span {
color: #333; color: #333;
} }
@ -139,7 +173,8 @@ function afterLeave() {
::v-deep(.n-form-item-label) { ::v-deep(.n-form-item-label) {
color: #666; color: #666;
font-weight: 500; font-weight: 500;
margin-bottom: 8px; // labelpadding-bottom 2px 8-2
margin-bottom: 6px;
} }
} }
@ -162,8 +197,8 @@ function afterLeave() {
&-footer { &-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
padding-bottom:6px ; padding-bottom: 6px;
button{ button {
font-size: 14px !important; font-size: 14px !important;
font-weight: 500 !important; font-weight: 500 !important;
} }
@ -174,7 +209,7 @@ function afterLeave() {
position: relative; position: relative;
&:before { &:before {
background-color: #1980FF; background-color: #1980ff;
content: ""; content: "";
width: 5px; width: 5px;
border-radius: 2px; border-radius: 2px;
@ -185,7 +220,6 @@ function afterLeave() {
} }
} }
::v-deep(.n-button--info-type){ ::v-deep(.n-button--info-type) {
} }
</style> </style>

@ -1,50 +1,50 @@
<script lang="ts" setup> <script lang="ts" setup>
import { ref } from "vue"; import { ref } from 'vue'
import { useConfig } from "@/store/modules/asideConfig"; import { useConfig } from '@/store/modules/asideConfig'
const emit = defineEmits<{ const emit = defineEmits<{
(e: "closeCallback", value: any); (e: 'closeCallback', value: any)
}>(); }>()
const show = ref(false); const show = ref(false)
const stys = { const stys = {
width: "424px", 'width': '424px',
height: "232px", 'height': '232px',
"--n-padding-bottom": "20px", '--n-padding-bottom': '20px',
"--n-padding-left": "0px", '--n-padding-left': '0px',
background: 'background':
"linear-gradient(132deg, rgba(255, 255, 255, 0.32) 21%, rgba(152, 172, 255, 0.14) 100%)", 'linear-gradient(132deg, rgba(255, 255, 255, 0.32) 21%, rgba(152, 172, 255, 0.14) 100%)',
"border-radius": "4px", 'border-radius': '4px',
"box-shadow": "0px 12px 48px 16px rgba(0, 0, 0, 0.03)", 'box-shadow': '0px 12px 48px 16px rgba(0, 0, 0, 0.03)',
"backdrop-filter": " blur(10px)", 'backdrop-filter': ' blur(10px)',
}; }
function showModal() { function showModal() {
show.value = true; show.value = true
} }
function closeModal() { function closeModal() {
show.value = false; show.value = false
emit("closeCallback", true); emit('closeCallback', true)
} }
function closeOnlyModal() { function closeOnlyModal() {
show.value = false; show.value = false
} }
defineExpose({ defineExpose({
showModal, showModal,
closeModal, closeModal,
closeOnlyModal, closeOnlyModal,
}); })
const configStore = useConfig(); const configStore = useConfig()
const percent = ref(0); const percent = ref(0)
configStore.$subscribe(() => { configStore.$subscribe(() => {
percent.value = configStore.getTimeNum; percent.value = configStore.getTimeNum
}); })
</script> </script>
<template> <template>
@ -58,13 +58,13 @@ configStore.$subscribe(() => {
<svg-icon <svg-icon
size="15" size="15"
name="close" name="close"
@click="closeModal"
style="position: absolute; right: 15.7px; top: 6px; cursor: pointer" style="position: absolute; right: 15.7px; top: 6px; cursor: pointer"
@click="closeModal"
/> />
<div class="wrapper"> <div class="wrapper">
<svg-icon size="90" name="robot2" /> <svg-icon size="90" name="robot2" />
<span style="margin-top: 24px">正在查重中</span>
</div> </div>
<span class="span_box">正在查重中</span>
<div style="padding: 0 20px"> <div style="padding: 0 20px">
<n-progress type="line" :percentage="percent" :show-indicator="false" /> <n-progress type="line" :percentage="percent" :show-indicator="false" />
</div> </div>
@ -74,10 +74,22 @@ configStore.$subscribe(() => {
<style lang="less" scoped> <style lang="less" scoped>
.wrapper { .wrapper {
width: 100%;
height: 95px;
display: flex; display: flex;
height: 100%;
flex-direction: column;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.span_box {
display: flex;
justify-content: center;
}
.n-modal {
// 360*157 20px
width: 360px !important;
height: 157px !important;
}
.n-modal > .n-card > .n-card__content:first-child {
--n-padding-top: 16px !important;
}
</style> </style>

Loading…
Cancel
Save