aidlab/FiDA_Front
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: 输入框悬浮样式

Browse Source
This commit is contained in:
zhangyahui
2026-03-05 11:46:41 +08:00
parent a9725f9fa2
commit 11ac83b502
1 changed files with 156 additions and 153 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
src/views/home/components/Input.vue
View File

@@ -1,5 +1,6 @@
<template> <template>
<div class="assist-input-wrapper flex flex-col" :class="{ agent: isAgentMode }"> <div class="assist-input-wrapper flex flex-col" :class="{ agent: isAgentMode }">
<div class="animate-container flex-1 flex flex-col">
<div class="scroll-content flex-col"> <div class="scroll-content flex-col">
<!-- 图片预览区域 --> <!-- 图片预览区域 -->
<div v-if="uploadedImages.length > 0" class="image-preview-list flex wrap"> <div v-if="uploadedImages.length > 0" class="image-preview-list flex wrap">
@@ -127,7 +128,9 @@
<img src="@/assets/images/setting.png" class="setting-icon" /> <img src="@/assets/images/setting.png" class="setting-icon" />
</template> </template>
<div class="fida-setting-popover-content flex flex-col"> <div class="fida-setting-popover-content flex flex-col">
<div class="fida-setting-popover-header">{{ $t('Input.styleTitle') }}</div> <div class="fida-setting-popover-header">
{{ $t('Input.styleTitle') }}
</div>
<div class="fida-setting-slider-list"> <div class="fida-setting-slider-list">
<div <div
v-for="item in settingOptions" v-for="item in settingOptions"
@@ -169,6 +172,8 @@
</div> </div>
</div> </div>
</div> </div>
</div>
<div v-if="!isAgentMode" class="report-btn flex flex-center" @click="toogltReportTag"> <div v-if="!isAgentMode" class="report-btn flex flex-center" @click="toogltReportTag">
<SvgIcon class="light-icon" name="light" size="16" /> <SvgIcon class="light-icon" name="light" size="16" />
<span>{{ $t('Input.trendingReport') }}</span> <span>{{ $t('Input.trendingReport') }}</span>
@@ -618,24 +623,22 @@
min-height: 23.5rem; min-height: 23.5rem;
max-height: 43.5rem; max-height: 43.5rem;
width: 106.3rem; width: 106.3rem;
border-radius: 2.8rem;
background-color: #fff;
border: 0.1rem solid #00000005;
box-shadow: 0px 0.5rem 1.4rem 0px #0000001a;
margin: 0 auto; margin: 0 auto;
padding: 0; padding: 0;
position: relative; position: relative;
&:not(.agent) .animate-container {
box-shadow: 0px 0.5rem 1.4rem 0px #0000001a;
transition: all 0.3s ease;
border-radius: 2.8rem;
background-color: #fff;
border: 0.1rem solid #00000005;
&:not(.agent):hover { &:not(.agent):hover {
box-shadow: 0px 0.5rem 3.36rem 2.2rem #f1ede999; box-shadow: 0px 0.5rem 3.36rem 2.2rem #f1ede999;
transition: all 0.3s ease; transform: translateY(-1rem);
top: -1rem;
.report-btn {
bottom: -8.4rem;
} }
} }
.scroll-content { .scroll-content {
display: flex; display: flex;
flex: 1; flex: 1;