Add File
This commit is contained in:
917
frontend/src/views/system/appearance/index.vue
Normal file
917
frontend/src/views/system/appearance/index.vue
Normal file
@@ -0,0 +1,917 @@
|
||||
<template>
|
||||
<div class="appearance">
|
||||
<p class="router-title">{{ t('system.appearance_settings') }}</p>
|
||||
<div class="appearance-table__content">
|
||||
<el-scrollbar>
|
||||
<div class="theme">
|
||||
<div class="show-theme">{{ $t('system.platform_display_theme') }}</div>
|
||||
<div class="theme-color">
|
||||
<div class="btn-select">
|
||||
<el-button
|
||||
:class="[themeColor === 'default' && 'is-active']"
|
||||
text
|
||||
@click="themeColorChange('default')"
|
||||
>
|
||||
{{ $t('system.default_turquoise') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
:class="[themeColor === 'blue' && 'is-active']"
|
||||
text
|
||||
@click="themeColorChange('blue')"
|
||||
>
|
||||
{{ $t('system.tech_blue') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
:class="[themeColor === 'custom' && 'is-active']"
|
||||
text
|
||||
@click="themeColorChange('custom')"
|
||||
>
|
||||
{{ $t('system.custom') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<template v-if="themeColor === 'custom'">
|
||||
<div class="theme-bg">{{ t('system.customize_theme_color') }}</div>
|
||||
<el-color-picker
|
||||
v-model="customColor"
|
||||
:trigger-width="28"
|
||||
:predefine="COLOR_PANEL"
|
||||
is-custom
|
||||
effect="light"
|
||||
@change="customColorChange"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<div class="login" :class="themeColor">
|
||||
<div class="platform-login">
|
||||
{{ t('system.platform_login_settings') }}
|
||||
</div>
|
||||
<div class="page-preview">
|
||||
<div class="title">
|
||||
<span class="left">{{ t('system.page_preview') }}</span>
|
||||
<el-button text @click="resetLoginForm(true)">{{
|
||||
t('system.restore_default')
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="page-setting">
|
||||
<div class="page-content">
|
||||
<!-- <img :src="loginPreview" alt="" /> -->
|
||||
<login-preview
|
||||
:navigate-bg="navigateBg"
|
||||
:theme-color="themeColor"
|
||||
:custom-color="customColor"
|
||||
:name="loginForm.name"
|
||||
:slogan="loginForm.slogan"
|
||||
:web="web"
|
||||
:showSlogan="loginForm.showSlogan"
|
||||
:bg="bg"
|
||||
:login="login"
|
||||
:is-blue="isBlue"
|
||||
:height="navigateHeight"
|
||||
:foot="loginForm.foot"
|
||||
:foot-content="loginForm.footContent"
|
||||
/>
|
||||
<div class="tips-page">
|
||||
{{
|
||||
t('system.screen_customization_supported', {
|
||||
msg: loginForm.name || 'SQLBot',
|
||||
})
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-list">
|
||||
<div v-for="ele in configList" :key="ele.type" class="config-item">
|
||||
<div class="config-logo">
|
||||
<span class="logo">{{ ele.logo }}</span>
|
||||
<el-upload
|
||||
:name="ele.type"
|
||||
:show-file-list="false"
|
||||
class="upload-demo"
|
||||
accept=".jpeg,.jpg,.png,.gif,.svg"
|
||||
:before-upload="(e: any) => beforeUpload(e, ele)"
|
||||
:http-request="uploadImg"
|
||||
>
|
||||
<el-button secondary>{{ t('system.replace_image') }}</el-button>
|
||||
</el-upload>
|
||||
</div>
|
||||
<div class="tips">{{ ele.tips }}</div>
|
||||
</div>
|
||||
<el-form
|
||||
ref="loginFormRef"
|
||||
:model="loginForm"
|
||||
label-position="top"
|
||||
:rules="rules"
|
||||
require-asterisk-position="right"
|
||||
label-width="120px"
|
||||
class="page-Form form-content_error_a"
|
||||
>
|
||||
<el-form-item :label="t('system.website_name')" prop="name">
|
||||
<el-input
|
||||
v-model="loginForm.name"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('system.website_name')
|
||||
"
|
||||
maxlength="20"
|
||||
/>
|
||||
<div class="form-tips">{{ t('system.on_webpage_tabs') }}</div>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<template #label>
|
||||
<el-checkbox
|
||||
v-model="loginForm.showSlogan"
|
||||
true-value="0"
|
||||
false-value="1"
|
||||
:label="$t('system.welcome_message')"
|
||||
/>
|
||||
</template>
|
||||
<el-input v-model="loginForm.slogan" maxlength="50" />
|
||||
</el-form-item>
|
||||
<!-- <el-form-item :label="t('system.footer')" prop="foot">
|
||||
<el-switch v-model="loginForm.foot" active-value="true" inactive-value="false" />
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
v-if="loginForm.foot === 'true'"
|
||||
:label="t('system.footer_content')"
|
||||
prop="footContent"
|
||||
>
|
||||
<tinymce-editor
|
||||
v-if="loginForm.foot === 'true'"
|
||||
v-model="loginForm.footContent"
|
||||
/>
|
||||
</el-form-item> -->
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="login">
|
||||
<div class="platform-login">{{ t('system.platform_settings') }}</div>
|
||||
<div class="page-preview">
|
||||
<div class="title">
|
||||
<span class="left">{{ t('system.page_preview') }}</span>
|
||||
<el-button text @click="resetTopForm(true)">{{
|
||||
t('system.restore_default')
|
||||
}}</el-button>
|
||||
</div>
|
||||
<div class="page-setting">
|
||||
<div class="page-content">
|
||||
<!-- <div class="navigate-preview" :style="{'height': `${navigateHeight}px`}"> -->
|
||||
<div class="navigate-preview" style="height: 425px">
|
||||
<div class="navigate-head">
|
||||
<div class="header-sql">
|
||||
<custom_small v-if="themeColor === 'custom'" class="logo" />
|
||||
|
||||
<img
|
||||
v-else-if="isBlue"
|
||||
width="131"
|
||||
height="30"
|
||||
class="logo"
|
||||
:src="logoBlue"
|
||||
alt=""
|
||||
/>
|
||||
<logo v-else></logo>
|
||||
</div>
|
||||
<div class="bottom-sql">
|
||||
<Person
|
||||
:is-blue="isBlue"
|
||||
:show-about="topForm.showAbout === '0'"
|
||||
:show-doc="topForm.showDoc === '0'"
|
||||
></Person>
|
||||
<el-icon size="20" class="fold">
|
||||
<icon_side_fold_outlined></icon_side_fold_outlined>
|
||||
</el-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tips-page">
|
||||
{{
|
||||
t('system.screen_customization_settings', { msg: loginForm.name || 'SQLBot' })
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-list">
|
||||
<el-checkbox
|
||||
v-model="topForm.showDoc"
|
||||
true-value="0"
|
||||
false-value="1"
|
||||
:label="$t('system.help_documentation')"
|
||||
/>
|
||||
<div class="doc-input">
|
||||
<el-input
|
||||
v-model="topForm.help"
|
||||
style="width: 100%"
|
||||
:placeholder="
|
||||
$t('datasource.please_enter') +
|
||||
$t('common.empty') +
|
||||
$t('system.help_documentation')
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<el-checkbox
|
||||
v-model="topForm.showAbout"
|
||||
true-value="0"
|
||||
false-value="1"
|
||||
:label="$t('system.show_about')"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-scrollbar>
|
||||
</div>
|
||||
<div class="appearance-foot">
|
||||
<el-button secondary @click="giveUp">{{ $t('system.abort_update') }}</el-button>
|
||||
<el-button v-if="showSaveButton" type="primary" @click="saveHandler">{{
|
||||
$t('system.save_and_apply')
|
||||
}}</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import logo from '@/assets/LOGO.svg'
|
||||
import custom_small from '@/assets/svg/LOGO-custom.svg'
|
||||
import { ref, unref, reactive, onMounted, onUnmounted, nextTick, computed } from 'vue'
|
||||
import {
|
||||
type FormInstance,
|
||||
type FormRules,
|
||||
type UploadUserFile,
|
||||
ElMessage,
|
||||
} from 'element-plus-secondary'
|
||||
import logoBlue from '@/assets/blue/LOGO-blue.png'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { request } from '@/utils/request'
|
||||
import icon_side_fold_outlined from '@/assets/svg/icon_side-fold_outlined.svg'
|
||||
import { useAppearanceStoreWithOut } from '@/stores/appearance'
|
||||
import LoginPreview from './LoginPreview.vue'
|
||||
import Person from './Person.vue'
|
||||
import { setCurrentColor } from '@/utils/utils'
|
||||
// import TinymceEditor from '@/components/rich-text/TinymceEditor.vue'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
const appearanceStore = useAppearanceStoreWithOut()
|
||||
const { t } = useI18n()
|
||||
interface LoginForm {
|
||||
name: string
|
||||
slogan: string
|
||||
foot: string
|
||||
showSlogan: string
|
||||
footContent?: string
|
||||
}
|
||||
interface ConfigItem {
|
||||
pkey: string
|
||||
pval: string
|
||||
ptype: string
|
||||
sort: number
|
||||
}
|
||||
const COLOR_PANEL = [
|
||||
'#FF4500',
|
||||
'#FF8C00',
|
||||
'#FFD700',
|
||||
'#71AE46',
|
||||
'#00CED1',
|
||||
'#1E90FF',
|
||||
'#C71585',
|
||||
'#999999',
|
||||
'#000000',
|
||||
'#FFFFFF',
|
||||
]
|
||||
const fileList = ref<(UploadUserFile & { flag: string })[]>([])
|
||||
const navigateBg = ref('dark')
|
||||
const themeColor = ref('default')
|
||||
const customColor = ref('#1CBA90')
|
||||
const web = ref('')
|
||||
const bg = ref('')
|
||||
const login = ref('')
|
||||
const navigate = ref('')
|
||||
const mobileLogin = ref('')
|
||||
const mobileLoginBg = ref('')
|
||||
const navigateHeight = ref(400)
|
||||
|
||||
const changedItemArray = ref<ConfigItem[]>([])
|
||||
|
||||
const loginFormRef = ref<FormInstance>()
|
||||
const defaultLoginForm = reactive<LoginForm>({
|
||||
name: 'SQLBot',
|
||||
slogan: t('common.intelligent_questioning_platform'),
|
||||
foot: 'false',
|
||||
showSlogan: '0',
|
||||
footContent: '',
|
||||
})
|
||||
const loginForm = reactive<LoginForm>(cloneDeep(defaultLoginForm))
|
||||
|
||||
const rules = reactive<FormRules>({
|
||||
name: [
|
||||
{
|
||||
required: true,
|
||||
message: t('datasource.please_enter') + t('common.empty') + t('system.website_name'),
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
foot: [
|
||||
{
|
||||
required: true,
|
||||
message: '',
|
||||
trigger: 'change',
|
||||
},
|
||||
],
|
||||
})
|
||||
|
||||
const defaultTopForm = {
|
||||
help: 'https://dataease.cn/sqlbot/v1/',
|
||||
showDoc: '0',
|
||||
showAbout: '0',
|
||||
}
|
||||
|
||||
const topForm = reactive<{
|
||||
help: string
|
||||
showDoc: string
|
||||
showAbout: string
|
||||
}>(cloneDeep(defaultTopForm))
|
||||
|
||||
const isBlue = computed(() => {
|
||||
return themeColor.value === 'blue'
|
||||
})
|
||||
const configList = [
|
||||
{
|
||||
logo: t('system.website_logo'),
|
||||
type: 'web',
|
||||
tips: t('system.larger_than_200kb'),
|
||||
size: 200 * 1024,
|
||||
},
|
||||
{
|
||||
logo: t('system.login_logo'),
|
||||
type: 'login',
|
||||
tips: t('system.larger_than_200kb_de'),
|
||||
size: 200 * 1024,
|
||||
},
|
||||
{
|
||||
logo: t('system.login_background_image'),
|
||||
type: 'bg',
|
||||
tips: t('system.larger_than_5mb'),
|
||||
size: 1024 * 1024 * 5,
|
||||
},
|
||||
]
|
||||
|
||||
const giveUp = () => {
|
||||
resetLoginForm(false)
|
||||
resetTopForm(false)
|
||||
resetMobileForm(false)
|
||||
init()
|
||||
}
|
||||
const showSaveButton = ref(true)
|
||||
const saveHandler = () => {
|
||||
loginFormRef.value?.validate((valLogin) => {
|
||||
if (valLogin) {
|
||||
const param = buildParam()
|
||||
const url = '/system/appearance'
|
||||
request
|
||||
.post(url, param, {
|
||||
headers: {
|
||||
'Content-Type': 'multipart/form-data',
|
||||
},
|
||||
})
|
||||
.then((res) => {
|
||||
if (!res) {
|
||||
ElMessage.success(t('system.setting_successfully'))
|
||||
appearanceStore.setLoaded(false)
|
||||
appearanceStore.setAppearance()
|
||||
showSaveButton.value = false
|
||||
nextTick(() => {
|
||||
showSaveButton.value = true
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
}
|
||||
const buildParam = () => {
|
||||
for (const key in loginForm) {
|
||||
const item = loginForm[key as keyof typeof loginForm]
|
||||
if (key === 'footContent') {
|
||||
addChangeArray(key, item!, 'file')
|
||||
} else {
|
||||
addChangeArray(key, item!)
|
||||
}
|
||||
}
|
||||
for (const key in topForm) {
|
||||
const item = topForm[key as keyof typeof topForm]
|
||||
addChangeArray(key, item)
|
||||
}
|
||||
const formData = new FormData()
|
||||
if (fileList.value.length) {
|
||||
fileList.value.forEach((file: any) => {
|
||||
const name = file.name + ',' + file['flag']
|
||||
const fileArray = [file]
|
||||
const newfile = new File(fileArray, name, { type: file['type'] })
|
||||
formData.append('files', newfile)
|
||||
})
|
||||
}
|
||||
formData.append('data', JSON.stringify(unref(changedItemArray)))
|
||||
return formData
|
||||
}
|
||||
const init = () => {
|
||||
const url = '/system/appearance/ui'
|
||||
changedItemArray.value = []
|
||||
fileList.value = []
|
||||
request
|
||||
.get(url)
|
||||
.then((res) => {
|
||||
const list = res || []
|
||||
if (!list.length) {
|
||||
return
|
||||
}
|
||||
list.forEach((item: any) => {
|
||||
const pkey = item.pkey
|
||||
const pval = item.pval
|
||||
if (pkey === 'navigateBg') {
|
||||
navigateBg.value = pval
|
||||
} else if (pkey === 'themeColor') {
|
||||
themeColor.value = pval
|
||||
} else if (pkey === 'customColor') {
|
||||
customColor.value = pval
|
||||
} else if (pkey === 'web') {
|
||||
web.value = pval
|
||||
} else if (pkey === 'login') {
|
||||
login.value = pval
|
||||
} else if (pkey === 'bg') {
|
||||
bg.value = pval
|
||||
} else if (pkey === 'navigate') {
|
||||
navigate.value = pval
|
||||
} else if (Object.prototype.hasOwnProperty.call(loginForm, pkey)) {
|
||||
loginForm[pkey as keyof typeof loginForm] = pval
|
||||
} else if (Object.prototype.hasOwnProperty.call(topForm, pkey)) {
|
||||
topForm[pkey as keyof typeof topForm] = pval
|
||||
} else if (pkey === 'mobileLogin') {
|
||||
mobileLogin.value = pval
|
||||
} else if (pkey === 'mobileLoginBg') {
|
||||
mobileLoginBg.value = pval
|
||||
}
|
||||
})
|
||||
})
|
||||
.finally(() => {
|
||||
nextTick(() => {
|
||||
if (themeColor.value === 'custom') {
|
||||
setPageCustomColor(customColor.value)
|
||||
} else {
|
||||
setPageCustomColor(isBlue.value ? '#3370FF' : '#1CBA90')
|
||||
}
|
||||
})
|
||||
})
|
||||
}
|
||||
const addChangeArray = (key: string, val: string, type?: string) => {
|
||||
let len = changedItemArray.value.length
|
||||
let match = false
|
||||
while (len--) {
|
||||
const item = changedItemArray.value[len]
|
||||
if (item['pkey'] === key) {
|
||||
changedItemArray.value[len] = {
|
||||
pkey: key,
|
||||
pval: val,
|
||||
ptype: type || 'str',
|
||||
sort: 1,
|
||||
}
|
||||
match = true
|
||||
}
|
||||
}
|
||||
if (!match) {
|
||||
changedItemArray.value.push({
|
||||
pkey: key,
|
||||
pval: val,
|
||||
ptype: type || 'str',
|
||||
sort: 1,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const themeColorChange = (val: any) => {
|
||||
themeColor.value = val
|
||||
addChangeArray('themeColor', val)
|
||||
if (themeColor.value === 'custom') {
|
||||
setPageCustomColor(customColor.value)
|
||||
} else {
|
||||
setPageCustomColor(isBlue.value ? '#3370FF' : '#1CBA90')
|
||||
}
|
||||
}
|
||||
const customColorChange = (val: any) => {
|
||||
addChangeArray('customColor', val)
|
||||
setPageCustomColor(val)
|
||||
}
|
||||
const setPageCustomColor = (val: any) => {
|
||||
const ele = document.getElementsByClassName('appearance-table__content')[0] as HTMLElement
|
||||
setCurrentColor(val, ele)
|
||||
}
|
||||
const resetLoginForm = (reset2Default?: boolean) => {
|
||||
for (const key in loginForm) {
|
||||
loginForm[key as keyof typeof loginForm] =
|
||||
defaultLoginForm[key as keyof typeof defaultLoginForm]!
|
||||
}
|
||||
clearFiles(['web', 'login', 'bg'])
|
||||
if (reset2Default) {
|
||||
addChangeArray('web', '', 'file')
|
||||
addChangeArray('login', '', 'file')
|
||||
addChangeArray('bg', '', 'file')
|
||||
web.value = ''
|
||||
login.value = ''
|
||||
bg.value = ''
|
||||
}
|
||||
}
|
||||
const resetTopForm = (reset2Default?: boolean) => {
|
||||
for (const key in topForm) {
|
||||
topForm[key as keyof typeof topForm] = defaultTopForm[key as keyof typeof defaultTopForm]
|
||||
}
|
||||
clearFiles(['navigate'])
|
||||
if (reset2Default) {
|
||||
addChangeArray('navigate', '', 'file')
|
||||
navigate.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const resetMobileForm = (reset2Default?: boolean) => {
|
||||
clearFiles(['mobileLogin', 'mobileLoginBg'])
|
||||
if (reset2Default) {
|
||||
addChangeArray('mobileLogin', '', 'file')
|
||||
addChangeArray('mobileLoginBg', '', 'file')
|
||||
mobileLogin.value = ''
|
||||
mobileLoginBg.value = ''
|
||||
}
|
||||
}
|
||||
|
||||
const uploadImg = (options: any) => {
|
||||
const file = options.file
|
||||
if (file['flag'] === 'web') {
|
||||
web.value = URL.createObjectURL(file)
|
||||
} else if (file['flag'] === 'bg') {
|
||||
bg.value = URL.createObjectURL(file)
|
||||
} else if (file['flag'] === 'login') {
|
||||
login.value = URL.createObjectURL(file)
|
||||
} else if (file['flag'] === 'navigate') {
|
||||
navigate.value = URL.createObjectURL(file)
|
||||
} else if (file['flag'] === 'mobileLogin') {
|
||||
mobileLogin.value = URL.createObjectURL(file)
|
||||
} else if (file['flag'] === 'mobileLoginBg') {
|
||||
mobileLoginBg.value = URL.createObjectURL(file)
|
||||
}
|
||||
}
|
||||
const beforeUpload = (file: any, { type, size, tips }: any) => {
|
||||
if (file.size > size) {
|
||||
ElMessage.error(tips)
|
||||
return false
|
||||
}
|
||||
addChangeArray(type, file.uid, 'file')
|
||||
let len = fileList.value?.length
|
||||
let match = false
|
||||
file.flag = type
|
||||
while (len--) {
|
||||
const tfile = fileList.value[len]
|
||||
if (type == tfile['flag']) {
|
||||
fileList.value[len] = file
|
||||
match = true
|
||||
}
|
||||
}
|
||||
if (!match) {
|
||||
fileList.value?.push(file)
|
||||
}
|
||||
return true
|
||||
}
|
||||
|
||||
const clearFiles = (array?: string[]) => {
|
||||
if (!array?.length || !fileList.value?.length) {
|
||||
fileList.value = []
|
||||
return
|
||||
}
|
||||
let len = fileList.value.length
|
||||
while (len--) {
|
||||
const file = fileList.value[len]
|
||||
if (array.includes(file['flag'])) {
|
||||
fileList.value.splice(len, 1)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getHeight = () => {
|
||||
const dom = document.getElementsByClassName('navigate-preview')
|
||||
const width = dom[0].clientWidth
|
||||
navigateHeight.value = parseInt((width * 0.625).toString())
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
init()
|
||||
nextTick(() => {
|
||||
getHeight()
|
||||
})
|
||||
window.addEventListener('resize', getHeight)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
window.removeEventListener('resize', getHeight)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.appearance {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
.router-title {
|
||||
color: #1f2329;
|
||||
font-feature-settings:
|
||||
'clig' off,
|
||||
'liga' off;
|
||||
font-family: var(--de-custom_font, 'PingFang');
|
||||
font-size: 20px;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: 28px;
|
||||
}
|
||||
.appearance-table__content {
|
||||
width: 100%;
|
||||
min-width: 840px;
|
||||
margin-top: 16px;
|
||||
overflow-y: auto;
|
||||
height: calc(100vh - 180px);
|
||||
box-sizing: border-box;
|
||||
|
||||
:deep(.ed-form-item__error) {
|
||||
top: 88%;
|
||||
}
|
||||
:deep(.ed-form-item__label) {
|
||||
line-height: 22px !important;
|
||||
height: 22px;
|
||||
}
|
||||
|
||||
.login,
|
||||
.setting {
|
||||
background: var(--ContentBG, #ffffff);
|
||||
width: 100%;
|
||||
border-radius: 6px;
|
||||
|
||||
& > :nth-child(1) {
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.theme {
|
||||
:deep(.ed-color-picker__trigger) {
|
||||
padding: 0 !important;
|
||||
height: 26px !important;
|
||||
width: 26px !important;
|
||||
}
|
||||
:deep(.ed-color-picker__icon) {
|
||||
display: none;
|
||||
}
|
||||
:deep(.ed-color-picker) {
|
||||
height: 28px !important;
|
||||
padding: 0;
|
||||
}
|
||||
.navigate-bg {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
margin: 16px 0 8px 0;
|
||||
}
|
||||
.theme-bg {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
margin: 16px 0 8px 0;
|
||||
}
|
||||
:deep(.ed-color-picker) {
|
||||
height: 32px;
|
||||
.ed-color-picker__trigger {
|
||||
height: 100%;
|
||||
padding: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.color-type {
|
||||
display: flex;
|
||||
.color-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding-top: 10px;
|
||||
width: 258px;
|
||||
height: 184px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #dee0e3;
|
||||
background-color: #f5f6f7;
|
||||
margin-right: 17px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
}
|
||||
img {
|
||||
width: 180px;
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
.color-item-label {
|
||||
height: 40px;
|
||||
width: 100%;
|
||||
border-top: 1px solid #dddedf;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-left: 12px;
|
||||
background-color: #fff;
|
||||
border-bottom-left-radius: 4px;
|
||||
border-bottom-right-radius: 4px;
|
||||
}
|
||||
&.active {
|
||||
border-color: var(--ed-color-primary);
|
||||
.color-item-label {
|
||||
background-color: #ebf1ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.show-theme {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
line-height: 22px;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.theme-color {
|
||||
.btn-select {
|
||||
height: 32px;
|
||||
display: inline-flex;
|
||||
padding: 0 4px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #ffffff;
|
||||
border: 1px solid var(--ed-border-color);
|
||||
border-radius: 6px;
|
||||
|
||||
.is-active {
|
||||
background: var(--ed-color-primary-1a, #1cba901a);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.ed-button:not(.is-active) {
|
||||
color: #1f2329;
|
||||
}
|
||||
.ed-button.is-text {
|
||||
height: 24px;
|
||||
padding: 0 8px;
|
||||
line-height: 22px;
|
||||
}
|
||||
.ed-button + .ed-button {
|
||||
margin-left: 4px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.setting,
|
||||
.login {
|
||||
margin-top: 24px;
|
||||
}
|
||||
|
||||
.login.custom {
|
||||
margin-top: 19px;
|
||||
}
|
||||
|
||||
.login {
|
||||
.page-preview {
|
||||
background-color: #f8f9fa;
|
||||
border: 1px solid #dee0e3;
|
||||
margin-top: 16px;
|
||||
padding: 16px;
|
||||
border-radius: 12px;
|
||||
.title {
|
||||
margin-bottom: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
.left {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
line-height: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
.page-setting {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
.page-content {
|
||||
width: calc(100% - 378px);
|
||||
|
||||
.tips-page {
|
||||
margin-top: 8px;
|
||||
}
|
||||
.navigate-preview {
|
||||
height: calc(100% - 28px);
|
||||
background-color: #fff;
|
||||
border-radius: 6px;
|
||||
overflow: hidden;
|
||||
|
||||
.navigate-head {
|
||||
width: 240px;
|
||||
margin-bottom: 1px;
|
||||
background-color: #eff1f0;
|
||||
padding: 16px;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
|
||||
.bottom-sql {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
left: 16px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: calc(100% - 32px);
|
||||
|
||||
.fold {
|
||||
cursor: pointer;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.config-list {
|
||||
width: 378px;
|
||||
margin-left: 16px;
|
||||
.doc-input {
|
||||
padding-left: 24px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.config-item {
|
||||
min-height: 104px;
|
||||
margin-bottom: 8px;
|
||||
padding: 16px;
|
||||
border-radius: 6px;
|
||||
border: 1px solid #dee0e3;
|
||||
background: #fff;
|
||||
.config-logo {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
.logo {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
}
|
||||
.ed-button {
|
||||
min-width: 64px;
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
padding: 4px 7px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
.tips {
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
line-height: 18px;
|
||||
white-space: pre-wrap;
|
||||
color: #8f959e;
|
||||
}
|
||||
}
|
||||
|
||||
.page-Form {
|
||||
.form-tips {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 22px;
|
||||
color: #8f959e;
|
||||
}
|
||||
|
||||
.appearance-radio-item {
|
||||
:deep(.ed-form-item__content) {
|
||||
line-height: 22px;
|
||||
}
|
||||
:deep(label) {
|
||||
height: 22px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.appearance-foot {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding: 16px 24px;
|
||||
padding-bottom: 0;
|
||||
background: var(--ContentBG, #ffffff);
|
||||
position: absolute;
|
||||
left: -24px;
|
||||
bottom: 0;
|
||||
width: calc(100% + 48px);
|
||||
border-top: 1px solid #1f232926;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user