renxiaodong/lingji-work-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: 样式调整

Browse Source
This commit is contained in:
rd
2025-07-30 14:07:18 +08:00
parent 4a7efc2c9b
commit 35835ca113
6 changed files with 61 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/layouts/Basic.vue
View File

@ -170,7 +170,7 @@ $layout-max-width: 1100px;
min-width: 1366px; min-width: 1366px;
min-height: 100vh; min-height: 100vh;
overflow-y: hidden; overflow-y: hidden;
background-color: var(--color-fill-2); background-color: $color-background;
transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1); transition: padding 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
} }
</style> </style>

2
src/styles/lib/variable.scss
View File

@ -11,7 +11,7 @@ $font-family-manrope-medium: 'Manrope-Medium';
$font-family-manrope-bold: 'Manrope-Bold'; $font-family-manrope-bold: 'Manrope-Bold';
$font-family-manrope-semiBold: 'Manrope-SemiBold'; $font-family-manrope-semiBold: 'Manrope-SemiBold';
$color-background: #f9f9f9; $color-background: #F7F8FA;
$color-primary: #6d4cfe; // 常规 $color-primary: #6d4cfe; // 常规
$color-primary-5: #8A70FE; // hover $color-primary-5: #8A70FE; // hover

4
src/views/agent/chat/index.vue
View File

@ -6,7 +6,9 @@
</div> </div>
<div class="workflow-container"> <div class="workflow-container">
<div class="left-wap mr-24px" v-if="isCollapsed == false"> <div class="left-wap mr-24px" v-if="isCollapsed == false">
<img :src="cozeInfo?.image_url" class="w-full h-160px rounded-8px object-contain w-100% mb-15px bg-#F0EDFF" /> <div class="w-full w-100% mb-15px bg-#F0EDFF h-160px rounded-8px">
<img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class= "w-full h-full object-contain" />
</div>
<div class="content mb-15px"> <div class="content mb-15px">
<div class="title-body"> <div class="title-body">
<div class="text mr-4px">{{ cozeInfo?.name }}</div> <div class="text mr-4px">{{ cozeInfo?.name }}</div>

2
src/views/agent/chat/style.scss
View File

@ -29,6 +29,7 @@
justify-content: flex-start; justify-content: flex-start;
align-items: flex-start; align-items: flex-start;
display: inline-flex; display: inline-flex;
background: var(--BG-100, #F7F8FA);
// .header { // .header {
// align-self: stretch; // align-self: stretch;
@ -228,6 +229,7 @@
background: var(--BG-White, white); background: var(--BG-White, white);
overflow: hidden; overflow: hidden;
border-radius: 8px; border-radius: 8px;
display: flex;
flex-direction: column; flex-direction: column;
.header { .header {

27
src/views/agent/work-flow/index.vue
View File

@ -1,25 +1,26 @@
<template> <template>
<div> <div>
<span class="back-wap" @click="goChatIndex"> <icon-left /> 返回空间 </span> <div class="back-wap cursor-pointer mb-20px" @click="goChatIndex">
<icon-left size="16" class="color-#737478 mr-4px" />
<span class="cs">返回空间</span>
</div>
<div class="workflow-container"> <div class="workflow-container">
<div class="left-wap" v-if="isCollapsed == false"> <div class="left-wap mr-24px" v-if="isCollapsed == false">
<div class="header"> <div class="w-full w-100% mb-15px bg-#F0EDFF h-160px rounded-8px">
<div class="image-body"> <img v-if="cozeInfo?.image_url" :src="cozeInfo?.image_url" class= "w-full h-full object-contain" />
<img :src="cozeInfo.image_url" />
</div>
</div> </div>
<div class="content"> <div class="content mb-15px">
<div class="title-body"> <div class="title-body">
<div class="text">{{ cozeInfo.name }}</div> <div class="text mr-4px">{{ cozeInfo.name }}</div>
<div data-尺寸="迷你-20px" data-颜色="red" class="tag-body"> <div data-尺寸="迷你-20px" data-颜色="red" class="tag-body">
<div class=""> <div class="">
<img class="status-icon" :src="workflow" /> <SvgIcon size="12" name="svg-workflow" class="color-#F64B31" />
</div> </div>
<div class="text">工作流</div> <div class="text">工作流</div>
</div> </div>
</div> </div>
<div class="use-body"> <div class="use-body flex items-center">
<div class="num">{{ cozeInfo.views }}</div> <div class="num mr-2px">{{ formatNumberShow({ value: cozeInfo?.views, showExactValue: true }) }}</div>
<div class="text">次使用</div> <div class="text">次使用</div>
</div> </div>
</div> </div>
@ -46,7 +47,7 @@
<div class="header"> <div class="header">
<div class="body"> <div class="body">
<div class=""> <div class="">
<div class="toggle-btn" @click="toggleCollapse"> <div class="toggle-btn cursor-pointer" @click="toggleCollapse">
<a-tooltip :content="isCollapsed ? '展开' : '折叠'"> <a-tooltip :content="isCollapsed ? '展开' : '折叠'">
<img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" /> <img class="status-icon" :src="isCollapsed ? menuUnfold : menuFold" />
</a-tooltip> </a-tooltip>
@ -78,7 +79,7 @@ import { marked } from 'marked';
import DOMPurify from 'dompurify'; import DOMPurify from 'dompurify';
import menuFold from '@/assets/svg/menu-fold.svg'; import menuFold from '@/assets/svg/menu-fold.svg';
import menuUnfold from '@/assets/svg/menu-unfold.svg'; import menuUnfold from '@/assets/svg/menu-unfold.svg';
import workflow from '@/assets/svg/svg-workflow.svg'; import { formatNumberShow } from "@/utils/tools"
const formFields = ref({}); const formFields = ref({});
const history = ref([]); const history = ref([]);

90
src/views/agent/work-flow/style.scss
View File

@ -1,23 +1,23 @@
.cs {
color: #3C4043;
font-family: $font-family-regular;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 22px;
}
.back-wap { .back-wap {
width: 100%; width: 100%;
height: 100%;
margin-bottom: 20px;
padding-left: 24px;
padding-right: 24px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 4px;
display: inline-flex; display: inline-flex;
} }
.workflow-container { .workflow-container {
width: 100%; width: 100%;
height: 100%; height: 100%;
padding-left: 24px;
padding-right: 24px;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: 24px;
display: inline-flex; display: inline-flex;
.left-wap { .left-wap {
@ -31,37 +31,35 @@
align-items: flex-start; align-items: flex-start;
display: inline-flex; display: inline-flex;
.header { // .header {
align-self: stretch; // align-self: stretch;
height: 160px; // height: 160px;
flex-direction: column; // flex-direction: column;
justify-content: center; // justify-content: center;
align-items: center; // align-items: center;
gap: 10px; // gap: 10px;
display: flex; // display: flex;
.image-body { // .image-body {
align-self: stretch; // align-self: stretch;
flex: 1 1 0; // flex: 1 1 0;
position: relative; // position: relative;
background: #FFEDED; // background: #FFEDED;
overflow: hidden; // overflow: hidden;
border-radius: 8px; // border-radius: 8px;
img { // img {
width: 408.90px; // width: 408.90px;
height: 218px; // height: 218px;
left: -24.45px; // left: -24.45px;
top: -29px; // top: -29px;
position: absolute // position: absolute
} // }
} // }
} // }
.content { .content {
align-self: stretch; align-self: stretch;
padding-top: 15px;
padding-bottom: 15px;
justify-content: space-between; justify-content: space-between;
align-items: flex-start; align-items: flex-start;
display: inline-flex; display: inline-flex;
@ -78,7 +76,7 @@
flex-direction: column; flex-direction: column;
color: var(--Text-1, #211F24); color: var(--Text-1, #211F24);
font-size: 18px; font-size: 18px;
font-family: Alibaba PuHuiTi; font-family: $font-family-medium;
font-weight: 400; font-weight: 400;
line-height: 26px; line-height: 26px;
word-wrap: break-word; word-wrap: break-word;
@ -99,7 +97,7 @@
.text { .text {
color: var(--Functional-Red-6, #F64B31); color: var(--Functional-Red-6, #F64B31);
font-size: 12px; font-size: 12px;
font-family: Alibaba PuHuiTi; font-family: $font-family-medium;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
word-wrap: break-word word-wrap: break-word
@ -109,29 +107,20 @@
} }
.use-body { .use-body {
width: 79px;
height: 24px;
position: relative;
.num { .num {
left: 20px;
top: 0px;
position: absolute;
color: var(--Text-2, #3C4043); color: var(--Text-2, #3C4043);
font-size: 16px; font-size: 16px;
font-family: Alibaba PuHuiTi; font-family: $font-family-manrope-medium;
font-weight: 400; font-weight: 400;
line-height: 24px; line-height: 24px;
word-wrap: break-word word-wrap: break-word
} }
.text { .text {
left: 43px;
top: 3px;
position: absolute;
color: var(--Text-3, #737478); color: var(--Text-3, #737478);
font-size: 12px; font-size: 12px;
font-family: Alibaba PuHuiTi; font-family: $font-family-regular;
font-weight: 400; font-weight: 400;
line-height: 20px; line-height: 20px;
word-wrap: break-word; word-wrap: break-word;
@ -147,12 +136,11 @@
align-items: center; align-items: center;
gap: 10px; gap: 10px;
display: flex; display: flex;
padding: 10px;
.text { .text {
align-self: stretch; align-self: stretch;
color: var(--Text-2, #3C4043); color: var(--Text-2, #3C4043);
font-size: 14px; font-size: 14px;
font-family: Alibaba PuHuiTi; font-family: $font-family-regular;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
word-wrap: break-word; word-wrap: break-word;
@ -196,7 +184,7 @@
.text { .text {
color: var(--Text-3, #737478); color: var(--Text-3, #737478);
font-size: 14px; font-size: 14px;
font-family: Alibaba PuHuiTi; font-family: $font-family-regular;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
word-wrap: break-word word-wrap: break-word
@ -224,7 +212,7 @@
flex: 1 1 0; flex: 1 1 0;
color: var(--Text-1, #211F24); color: var(--Text-1, #211F24);
font-size: 14px; font-size: 14px;
font-family: Alibaba PuHuiTi; font-family: $font-family-regular;
font-weight: 400; font-weight: 400;
line-height: 22px; line-height: 22px;
word-wrap: break-word; word-wrap: break-word;