style(css): 优化主题颜色和样式
- 更新 primary color 为 #71b73c- 调整输入框焦点边框颜色 - 优化下拉菜单样式 - 统一选择框样式 - 调整按钮样式
This commit is contained in:
@@ -1,6 +1,6 @@
|
|||||||
/* color palette from <https://github.com/vuejs/theme> */
|
/* color palette from <https://github.com/vuejs/theme> */
|
||||||
:root {
|
:root {
|
||||||
--primary-color: rgb(111, 185, 55);
|
--primary-color: #71b73c;
|
||||||
--vt-c-white: #fff;
|
--vt-c-white: #fff;
|
||||||
--vt-c-white-soft: #f8f8f8;
|
--vt-c-white-soft: #f8f8f8;
|
||||||
--vt-c-white-mute: #f2f2f2;
|
--vt-c-white-mute: #f2f2f2;
|
||||||
@@ -16,6 +16,9 @@
|
|||||||
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
--vt-c-text-light-2: rgba(60, 60, 60, 0.66);
|
||||||
--vt-c-text-dark-1: var(--vt-c-white);
|
--vt-c-text-dark-1: var(--vt-c-white);
|
||||||
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
--vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
|
||||||
|
--van-picker-confirm-action-color: var(--primary-color);
|
||||||
|
--van-calendar-range-edge-background: var(--primary-color);
|
||||||
|
--van-cascader-active-color: var(--primary-color);
|
||||||
--status-bar-height: 20px;
|
--status-bar-height: 20px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -29,6 +32,7 @@
|
|||||||
--color-heading: var(--vt-c-text-light-1);
|
--color-heading: var(--vt-c-text-light-1);
|
||||||
--color-text: var(--vt-c-text-light-1);
|
--color-text: var(--vt-c-text-light-1);
|
||||||
--section-gap: 160px;
|
--section-gap: 160px;
|
||||||
|
--el-select-input-focus-border-color: var(--primary-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
|
|||||||
@@ -209,6 +209,9 @@
|
|||||||
color: $theme-color;
|
color: $theme-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
input {
|
||||||
|
outline-color: transparent;
|
||||||
|
}
|
||||||
.el-input__wrapper,
|
.el-input__wrapper,
|
||||||
.el-select__wrapper {
|
.el-select__wrapper {
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@@ -224,8 +227,3 @@
|
|||||||
color: $theme-color;
|
color: $theme-color;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.el-dropdown-menu__item:not(.is-disabled):focus,
|
|
||||||
.el-dropdown-menu__item:not(.is-disabled):hover {
|
|
||||||
background-color: #fff !important;
|
|
||||||
color: #2dc26b !important;
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -83,14 +83,14 @@ export default defineComponent({
|
|||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.yl-select-wrapper {
|
.yl-select-wrapper {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: inline-block;
|
|
||||||
padding: 2px 0;
|
|
||||||
border-color: transparent;
|
|
||||||
border-radius: 12px;
|
|
||||||
background: #fafbfc;
|
|
||||||
outline-color: transparent;
|
outline-color: transparent;
|
||||||
|
border-color: transparent;
|
||||||
|
display: inline-block;
|
||||||
font-size: 16px; /* 增加字体大小 */
|
font-size: 16px; /* 增加字体大小 */
|
||||||
line-height: 1.5; /* 增加行高 */
|
line-height: 1.5; /* 增加行高 */
|
||||||
|
padding: 2px 0;
|
||||||
|
background: #fafbfc;
|
||||||
|
border-radius: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.yl-select-label {
|
.yl-select-label {
|
||||||
|
|||||||
@@ -235,7 +235,8 @@ const textTypeList = [
|
|||||||
const emit = defineEmits(['update:modelValue', 'saveOption']);
|
const emit = defineEmits(['update:modelValue', 'saveOption']);
|
||||||
//
|
//
|
||||||
const selectText = (textType) => {
|
const selectText = (textType) => {
|
||||||
return textTypeList.filter((item) => item.value === textType)[0].text;
|
let item = textTypeList.filter((item) => item.value === textType)[0];
|
||||||
|
return item ? item.text : '';
|
||||||
};
|
};
|
||||||
const confirm = ({ selectedValues }) => {
|
const confirm = ({ selectedValues }) => {
|
||||||
actionQuestion.value.config.text_type = Number(selectedValues[0]);
|
actionQuestion.value.config.text_type = Number(selectedValues[0]);
|
||||||
|
|||||||
@@ -59,10 +59,10 @@
|
|||||||
<div>
|
<div>
|
||||||
<el-button @click="deleteItem(item)"> 删除</el-button>
|
<el-button @click="deleteItem(item)"> 删除</el-button>
|
||||||
<el-button @click="copyItem(item)"> 复制</el-button>
|
<el-button @click="copyItem(item)"> 复制</el-button>
|
||||||
<el-button @click="toPreview(item)" style="border: 2px solid #71b73c">
|
<el-button style="border: 2px solid #71b73c" @click="toPreview(item)">
|
||||||
<el-text style="color: #71b73c">预览</el-text>
|
<el-text style="color: #71b73c">预览</el-text>
|
||||||
</el-button>
|
</el-button>
|
||||||
<el-button @click="toPublish(item)" color="#6fb937">
|
<el-button color="#6fb937" @click="toPublish(item)">
|
||||||
<el-text style="color: white">开启投放</el-text>
|
<el-text style="color: white">开启投放</el-text>
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user