study/uTools-quickcommand
1
0
Fork 0
mirror of https://github.com/fofolee/uTools-quickcommand.git synced 2025-06-08 22:51:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
fofolee 2024-12-21 20:25:32 +08:00
parent 5c02214063
commit 06756777ea
2 changed files with 68 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

57
src/components/editor/CommandSideBar.vue
View File

@ -57,6 +57,7 @@
<!-- 匹配类型 --> <!-- 匹配类型 -->
<q-select <q-select
:disable="!canCommandSave" :disable="!canCommandSave"
popup-content-class="side-bar-popup-content"
hide-dropdown-icon hide-dropdown-icon
stack-label stack-label
label-color="primary" label-color="primary"
@ -74,14 +75,12 @@
<q-icon class="command-side-bar-icon" :name="cmdType.icon" /> <q-icon class="command-side-bar-icon" :name="cmdType.icon" />
</template> </template>
<template v-slot:option="scope"> <template v-slot:option="scope">
<q-item v-bind="scope.itemProps"> <q-item v-bind="scope.itemProps" class="row items-center">
<q-item-section avatar> <q-icon :name="scope.opt.icon" class="q-mr-md" />
<q-icon :name="scope.opt.icon" /> <div>
</q-item-section>
<q-item-section>
<q-item-label v-html="scope.opt.name" /> <q-item-label v-html="scope.opt.name" />
<q-item-label caption>{{ scope.opt.desc }}</q-item-label> <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
</q-item-section> </div>
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
@ -89,6 +88,7 @@
<q-select <q-select
v-if="cmdType.valueType === 'array'" v-if="cmdType.valueType === 'array'"
:disable="!canCommandSave" :disable="!canCommandSave"
popup-content-class="side-bar-popup-content"
hide-dropdown-icon hide-dropdown-icon
stack-label stack-label
label-color="primary" label-color="primary"
@ -151,6 +151,7 @@
:disable="!canCommandSave" :disable="!canCommandSave"
hide-dropdown-icon hide-dropdown-icon
stack-label stack-label
popup-content-class="side-bar-popup-content"
label-color="primary" label-color="primary"
transition-show="jump-down" transition-show="jump-down"
transition-hide="jump-up" transition-hide="jump-up"
@ -179,6 +180,7 @@
<q-select <q-select
:disable="!canCommandSave" :disable="!canCommandSave"
hide-dropdown-icon hide-dropdown-icon
popup-content-class="side-bar-popup-content"
stack-label stack-label
label-color="primary" label-color="primary"
transition-show="jump-down" transition-show="jump-down"
@ -218,6 +220,7 @@
hide-dropdown-icon hide-dropdown-icon
stack-label stack-label
label-color="primary" label-color="primary"
popup-content-class="side-bar-popup-content"
transition-show="jump-down" transition-show="jump-down"
transition-hide="jump-up" transition-hide="jump-up"
borderless borderless
@ -235,13 +238,11 @@
/> />
</template> </template>
<template v-slot:option="scope"> <template v-slot:option="scope">
<q-item v-bind="scope.itemProps"> <q-item v-bind="scope.itemProps" class="row items-center">
<q-item-section avatar> <q-icon :name="outputTypes[scope.opt].icon" class="q-mr-md" />
<q-icon :name="outputTypes[scope.opt].icon" /> <div>
</q-item-section>
<q-item-section>
<q-item-label v-html="outputTypes[scope.opt].label" /> <q-item-label v-html="outputTypes[scope.opt].label" />
</q-item-section> </div>
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
@ -251,6 +252,7 @@
hide-dropdown-icon hide-dropdown-icon
stack-label stack-label
label-color="primary" label-color="primary"
popup-content-class="side-bar-popup-content"
transition-show="jump-down" transition-show="jump-down"
transition-hide="jump-up" transition-hide="jump-up"
borderless borderless
@ -287,6 +289,7 @@
hide-dropdown-icon hide-dropdown-icon
stack-label stack-label
label-color="primary" label-color="primary"
popup-content-class="side-bar-popup-content"
transition-show="jump-down" transition-show="jump-down"
transition-hide="jump-up" transition-hide="jump-up"
borderless borderless
@ -312,15 +315,16 @@
</q-chip> </q-chip>
</template> </template>
<template v-slot:option="scope"> <template v-slot:option="scope">
<q-item v-bind="scope.itemProps"> <q-item v-bind="scope.itemProps" class="row items-center">
<q-item-section avatar> <q-img
<span :src="platformTypes[scope.opt].icon"
:class="`iconfont icon-${platformTypes[scope.opt].icon}`" width="24px"
></span> class="q-mr-md"
</q-item-section> />
<q-item-section> <div>
<q-item-label v-html="platformTypes[scope.opt].label" /> <q-item-label v-html="platformTypes[scope.opt].label" />
</q-item-section> <q-item-label caption>{{ scope.opt.desc }}</q-item-label>
</div>
</q-item> </q-item>
</template> </template>
</q-select> </q-select>
@ -631,4 +635,17 @@ export default {
background: var(--q-primary); background: var(--q-primary);
opacity: 0.85; opacity: 0.85;
} }
.side-bar-popup-content .q-item .q-icon {
font-size: 20px;
}
.command-side-bar-content *,
.side-bar-popup-content .q-item__label {
font-size: 13px;
}
.side-bar-popup-content .q-item__label--caption {
font-size: 12px;
}
</style> </style>

32
src/pages/ConfigurationPage.vue
View File

@ -175,6 +175,7 @@
color="primary" color="primary"
label="分享中心" label="分享中心"
icon="groups" icon="groups"
class="share-btn"
/> />
<!-- <q-separator vertical /> --> <!-- <q-separator vertical /> -->
<!-- 新建按钮 --> <!-- 新建按钮 -->
@ -185,6 +186,7 @@
color="primary" color="primary"
label="新建" label="新建"
icon="add" icon="add"
class="new-btn"
/> />
<!-- <q-separator vertical /> --> <!-- <q-separator vertical /> -->
<q-btn <q-btn
@ -834,5 +836,33 @@ body.body--dark.glass-effect-menu .absolute-bottom {
background: none !important; background: none !important;
} }
/* ... 其他样式保持不变 ... */ /* 基础按钮动画 */
.share-btn,
.new-btn {
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.share-btn:hover,
.new-btn:hover {
transform: translateY(-2px);
background: rgba(var(--q-primary-rgb), 0.1) !important;
}
/* 搜索框动画 */
@keyframes searchIconShake {
0%,
100% {
transform: rotate(0deg);
}
25% {
transform: rotate(-10deg);
}
75% {
transform: rotate(10deg);
}
}
.q-field--focused .q-field__prepend .q-icon {
animation: searchIconShake 0.8s ease;
color: var(--q-primary);
}
</style> </style>