mirror of
https://github.com/fofolee/uTools-quickcommand.git
synced 2025-06-08 14:34:13 +08:00
样式调整
This commit is contained in:
parent
45a2170ff3
commit
a65d9ccdff
@ -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 {
|
||||
|
@ -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>
|
||||
|
@ -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"
|
||||
|
Loading…
x
Reference in New Issue
Block a user