样式调整

This commit is contained in:
fofolee 2024-12-20 20:02:28 +08:00
parent 45a2170ff3
commit a65d9ccdff
3 changed files with 61 additions and 40 deletions

View File

@ -117,24 +117,6 @@ export default {
</script>
<style scoped>
.q-card.command {
cursor: pointer;
user-select: none;
transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
background: rgba(255, 255, 255, 0.3) !important;
backdrop-filter: blur(calc(var(--glass-effect-strength) * 1px)) !important;
border: 1px solid rgba(255, 255, 255, 0.1);
box-shadow: 0 4px 16px 0 rgba(31, 38, 135, 0.07);
will-change: transform, box-shadow;
}
.body--dark .q-card.command {
background: rgba(57, 57, 57, 0.09) !important;
border: 1px solid rgb(59 58 58 / 5%);
box-shadow: 0 1px 5px rgb(0 0 0 / 20%), 0 2px 2px rgb(0 0 0 / 14%),
0 3px 1px -2px rgb(69 67 67 / 12%);
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
@ -173,14 +155,14 @@ export default {
background-size: contain;
background-position: center;
background-repeat: no-repeat;
filter: blur(6px) brightness(1.2);
transform: scale(1.1);
filter: blur(8px) brightness(1.1);
transform: scale(1.05);
pointer-events: none;
}
.featureIcoHover::after {
opacity: 1;
transform: scale(1.2);
opacity: 0.8;
transform: scale(1.1);
}
.feature-disabled {

View File

@ -27,19 +27,25 @@
<div class="history-layout">
<!-- 左侧预览区域 -->
<div class="preview-container">
<div v-if="selectedIndex !== null" class="preview-content">
<div class="preview-header text-h6">
<q-icon name="code" size="16px" />
<span class="q-ml-sm">代码预览</span>
</div>
<pre>{{ historyList[selectedIndex]?.content || "" }}</pre>
<div class="preview-header text-h6">
<q-icon name="code" size="16px" />
<span class="q-ml-sm">代码预览</span>
</div>
<div v-else class="preview-placeholder">
<q-icon name="code" size="48px" color="grey-7" />
<div class="text-grey-7 q-mt-sm text-subtitle1">
鼠标悬停查看代码预览
<transition
mode="out-in"
enter-active-class="fade-in"
leave-active-class="fade-out"
>
<div v-if="selectedIndex !== null" class="preview-content" :key="selectedIndex">
<pre>{{ historyList[selectedIndex]?.content || "" }}</pre>
</div>
</div>
<div v-else class="preview-placeholder" key="placeholder">
<q-icon name="code" size="48px" color="grey-7" />
<div class="text-grey-7 q-mt-sm text-subtitle1">
鼠标悬停查看代码预览
</div>
</div>
</transition>
</div>
<!-- 右侧历史列表 -->
@ -118,7 +124,7 @@
</template>
<script>
import { ref, reactive } from "vue";
import { reactive } from "vue";
export default {
name: "EditorHistory",
@ -361,18 +367,20 @@ export default {
.preview-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: stretch;
overflow: hidden;
background: #f4f4f4;
transition: all 0.3s ease;
position: relative;
}
.preview-header {
padding: 16px 16px 8px;
/* font-size: 13px; */
display: flex;
align-items: center;
z-index: 1;
}
.history-list {
@ -411,9 +419,13 @@ export default {
transform: translateX(2px);
}
.preview-content {
width: 100%;
height: 100%;
.preview-content,
.preview-placeholder {
position: absolute;
left: 0;
right: 0;
top: 48px;
bottom: 0;
margin: 0;
font-size: 12px;
overflow: hidden;
@ -546,4 +558,31 @@ export default {
min-width: 300px;
padding: 8px;
}
/* 自定义淡入淡出动画 */
.fade-in {
animation: fadeIn 0.3s ease-out;
}
.fade-out {
animation: fadeOut 0.3s ease-in;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
</style>

View File

@ -61,8 +61,8 @@
left: tabBarWidth,
}"
v-model="currentTag"
transition-prev="slide-down"
transition-next="slide-up"
transition-prev="jump-down"
transition-next="jump-up"
>
<q-tab-panel
style="padding: 0"