mirror of
https://gitee.com/dromara/go-view.git
synced 2025-02-24 08:12:49 +08:00
style: 优化写法
This commit is contained in:
奔跑的面条
parent
de681dbcd4
commit
a6194b8fa9
@ -1,122 +1,123 @@
|
|||||||
import { ref, toRefs, toRaw, watch } from 'vue'
|
import { ref, toRefs, toRaw, watch } from 'vue'
|
||||||
import type VChart from 'vue-echarts'
|
import type VChart from 'vue-echarts'
|
||||||
import { customizeHttp } from '@/api/http'
|
import { customizeHttp } from '@/api/http'
|
||||||
import { useChartDataPondFetch } from '@/hooks/'
|
import { useChartDataPondFetch } from '@/hooks/'
|
||||||
import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
|
import { CreateComponentType, ChartFrameEnum } from '@/packages/index.d'
|
||||||
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
import { useChartEditStore } from '@/store/modules/chartEditStore/chartEditStore'
|
||||||
import { RequestDataTypeEnum } from '@/enums/httpEnum'
|
import { RequestDataTypeEnum } from '@/enums/httpEnum'
|
||||||
import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
|
import { isPreview, newFunctionHandle, intervalUnitHandle } from '@/utils'
|
||||||
import { setOption } from '@/packages/public/chart'
|
import { setOption } from '@/packages/public/chart'
|
||||||
|
|
||||||
// 获取类型
|
// 获取类型
|
||||||
type ChartEditStoreType = typeof useChartEditStore
|
type ChartEditStoreType = typeof useChartEditStore
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* setdata 数据监听与更改
|
* setdata 数据监听与更改
|
||||||
* @param targetComponent
|
* @param targetComponent
|
||||||
* @param useChartEditStore 若直接引会报错，只能动态传递
|
* @param useChartEditStore 若直接引会报错，只能动态传递
|
||||||
* @param updateCallback 自定义更新函数
|
* @param updateCallback 自定义更新函数
|
||||||
*/
|
*/
|
||||||
export const useChartDataFetch = (
|
export const useChartDataFetch = (
|
||||||
targetComponent: CreateComponentType,
|
targetComponent: CreateComponentType,
|
||||||
useChartEditStore: ChartEditStoreType,
|
useChartEditStore: ChartEditStoreType,
|
||||||
updateCallback?: (...args: any) => any
|
updateCallback?: (...args: any) => any
|
||||||
) => {
|
) => {
|
||||||
const vChartRef = ref<typeof VChart | null>(null)
|
const vChartRef = ref<typeof VChart | null>(null)
|
||||||
let fetchInterval: any = 0
|
let fetchInterval: any = 0
|
||||||
|
|
||||||
// 数据池
|
// 数据池
|
||||||
const { addGlobalDataInterface } = useChartDataPondFetch()
|
const { addGlobalDataInterface } = useChartDataPondFetch()
|
||||||
|
|
||||||
// 组件类型
|
// 组件类型
|
||||||
const { chartFrame } = targetComponent.chartConfig
|
const { chartFrame } = targetComponent.chartConfig
|
||||||
|
|
||||||
// eCharts 组件配合 vChart 库更新方式
|
// eCharts 组件配合 vChart 库更新方式
|
||||||
const echartsUpdateHandle = (dataset: any) => {
|
const echartsUpdateHandle = (dataset: any) => {
|
||||||
if (chartFrame === ChartFrameEnum.ECHARTS) {
|
if (chartFrame === ChartFrameEnum.ECHARTS) {
|
||||||
if (vChartRef.value) {
|
if (vChartRef.value) {
|
||||||
setOption(vChartRef.value, { dataset: dataset })
|
setOption(vChartRef.value, { dataset: dataset })
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const requestIntervalFn = () => {
|
const requestIntervalFn = () => {
|
||||||
const chartEditStore = useChartEditStore()
|
const chartEditStore = useChartEditStore()
|
||||||
|
|
||||||
// 全局数据
|
// 全局数据
|
||||||
const {
|
const {
|
||||||
requestOriginUrl,
|
requestOriginUrl,
|
||||||
requestIntervalUnit: globalUnit,
|
requestIntervalUnit: globalUnit,
|
||||||
requestInterval: globalRequestInterval
|
requestInterval: globalRequestInterval
|
||||||
} = toRefs(chartEditStore.getRequestGlobalConfig)
|
} = toRefs(chartEditStore.getRequestGlobalConfig)
|
||||||
|
|
||||||
// 目标组件
|
// 目标组件
|
||||||
const {
|
const {
|
||||||
requestDataType,
|
requestDataType,
|
||||||
requestUrl,
|
requestUrl,
|
||||||
requestIntervalUnit: targetUnit,
|
requestIntervalUnit: targetUnit,
|
||||||
requestInterval: targetInterval
|
requestInterval: targetInterval
|
||||||
} = toRefs(targetComponent.request)
|
} = toRefs(targetComponent.request)
|
||||||
|
|
||||||
// 非请求类型
|
// 非请求类型
|
||||||
if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
|
if (requestDataType.value !== RequestDataTypeEnum.AJAX) return
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// 处理地址
|
// 处理地址
|
||||||
// @ts-ignore
|
// @ts-ignore
|
||||||
if (requestUrl?.value) {
|
if (requestUrl?.value) {
|
||||||
// requestOriginUrl 允许为空
|
// requestOriginUrl 允许为空
|
||||||
const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
|
const completePath = requestOriginUrl && requestOriginUrl.value + requestUrl.value
|
||||||
if (!completePath) return
|
if (!completePath) return
|
||||||
|
|
||||||
clearInterval(fetchInterval)
|
clearInterval(fetchInterval)
|
||||||
|
|
||||||
const fetchFn = async () => {
|
const fetchFn = async () => {
|
||||||
const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
|
const res = await customizeHttp(toRaw(targetComponent.request), toRaw(chartEditStore.getRequestGlobalConfig))
|
||||||
if (res) {
|
if (res) {
|
||||||
try {
|
try {
|
||||||
const filter = targetComponent.filter
|
const filter = targetComponent.filter
|
||||||
echartsUpdateHandle(newFunctionHandle(res?.data, res, filter))
|
const { data } = res
|
||||||
// 更新回调函数
|
echartsUpdateHandle(newFunctionHandle(data, res, filter))
|
||||||
if (updateCallback) {
|
// 更新回调函数
|
||||||
updateCallback(newFunctionHandle(res?.data, res, filter))
|
if (updateCallback) {
|
||||||
}
|
updateCallback(newFunctionHandle(data, res, filter))
|
||||||
} catch (error) {
|
}
|
||||||
console.error(error)
|
} catch (error) {
|
||||||
}
|
console.error(error)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// 普通初始化与组件交互处理监听
|
|
||||||
watch(
|
// 普通初始化与组件交互处理监听
|
||||||
() => targetComponent.request,
|
watch(
|
||||||
() => {
|
() => targetComponent.request,
|
||||||
fetchFn()
|
() => {
|
||||||
},
|
fetchFn()
|
||||||
{
|
},
|
||||||
immediate: true,
|
{
|
||||||
deep: true
|
immediate: true,
|
||||||
}
|
deep: true
|
||||||
)
|
}
|
||||||
|
)
|
||||||
// 定时时间
|
|
||||||
const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
|
// 定时时间
|
||||||
// 单位
|
const time = targetInterval && targetInterval.value ? targetInterval.value : globalRequestInterval.value
|
||||||
const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
|
// 单位
|
||||||
// 开启轮询
|
const unit = targetInterval && targetInterval.value ? targetUnit.value : globalUnit.value
|
||||||
if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
|
// 开启轮询
|
||||||
}
|
if (time) fetchInterval = setInterval(fetchFn, intervalUnitHandle(time, unit))
|
||||||
// eslint-disable-next-line no-empty
|
}
|
||||||
} catch (error) {
|
// eslint-disable-next-line no-empty
|
||||||
console.log(error)
|
} catch (error) {
|
||||||
}
|
console.log(error)
|
||||||
}
|
}
|
||||||
|
}
|
||||||
if (isPreview()) {
|
|
||||||
// 判断是否是数据池类型
|
if (isPreview()) {
|
||||||
targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
|
// 判断是否是数据池类型
|
||||||
? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
|
targetComponent.request.requestDataType === RequestDataTypeEnum.Pond
|
||||||
: requestIntervalFn()
|
? addGlobalDataInterface(targetComponent, useChartEditStore, updateCallback || echartsUpdateHandle)
|
||||||
}
|
: requestIntervalFn()
|
||||||
return { vChartRef }
|
}
|
||||||
}
|
return { vChartRef }
|
||||||
|
}
|
||||||
|
|||||||
@ -1,196 +1,197 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="go-chart-configurations-data-ajax">
|
<div class="go-chart-configurations-data-ajax">
|
||||||
<n-card class="n-card-shallow">
|
<n-card class="n-card-shallow">
|
||||||
<setting-item-box name="请求配置">
|
<setting-item-box name="请求配置">
|
||||||
<setting-item name="类型">
|
<setting-item name="类型">
|
||||||
<n-tag :bordered="false" type="primary" style="border-radius: 5px">
|
<n-tag :bordered="false" type="primary" style="border-radius: 5px">
|
||||||
{{ targetData.request.requestContentType === RequestContentTypeEnum.DEFAULT ? '普通请求' : 'SQL请求' }}
|
{{ targetData.request.requestContentType === RequestContentTypeEnum.DEFAULT ? '普通请求' : 'SQL请求' }}
|
||||||
</n-tag>
|
</n-tag>
|
||||||
</setting-item>
|
</setting-item>
|
||||||
|
|
||||||
<setting-item name="方式">
|
<setting-item name="方式">
|
||||||
<n-input size="small" :placeholder="targetData.request.requestHttpType || '暂无'" :disabled="true"></n-input>
|
<n-input size="small" :placeholder="targetData.request.requestHttpType || '暂无'" :disabled="true"></n-input>
|
||||||
</setting-item>
|
</setting-item>
|
||||||
|
|
||||||
<setting-item name="组件间隔">
|
<setting-item name="组件间隔">
|
||||||
<n-input size="small" :placeholder="`${targetData.request.requestInterval || '暂无'}`" :disabled="true">
|
<n-input size="small" :placeholder="`${targetData.request.requestInterval || '暂无'}`" :disabled="true">
|
||||||
<template #suffix> {{ SelectHttpTimeNameObj[targetData.request.requestIntervalUnit] }} </template>
|
<template #suffix> {{ SelectHttpTimeNameObj[targetData.request.requestIntervalUnit] }} </template>
|
||||||
</n-input>
|
</n-input>
|
||||||
</setting-item>
|
</setting-item>
|
||||||
|
|
||||||
<setting-item name="全局间隔（默认）">
|
<setting-item name="全局间隔（默认）">
|
||||||
<n-input size="small" :placeholder="`${GlobalRequestInterval || '暂无'} `" :disabled="true">
|
<n-input size="small" :placeholder="`${GlobalRequestInterval || '暂无'} `" :disabled="true">
|
||||||
<template #suffix> {{ SelectHttpTimeNameObj[GlobalRequestIntervalUnit] }} </template>
|
<template #suffix> {{ SelectHttpTimeNameObj[GlobalRequestIntervalUnit] }} </template>
|
||||||
</n-input>
|
</n-input>
|
||||||
</setting-item>
|
</setting-item>
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<setting-item-box name="源地址" :alone="true">
|
<setting-item-box name="源地址" :alone="true">
|
||||||
<n-input size="small" :placeholder="requestOriginUrl || '暂无'" :disabled="true">
|
<n-input size="small" :placeholder="requestOriginUrl || '暂无'" :disabled="true">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-icon :component="PulseIcon" />
|
<n-icon :component="PulseIcon" />
|
||||||
</template>
|
</template>
|
||||||
</n-input>
|
</n-input>
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<setting-item-box name="组件地址" :alone="true">
|
<setting-item-box name="组件地址" :alone="true">
|
||||||
<n-input size="small" :placeholder="targetData.request.requestUrl || '暂无'" :disabled="true">
|
<n-input size="small" :placeholder="targetData.request.requestUrl || '暂无'" :disabled="true">
|
||||||
<template #prefix>
|
<template #prefix>
|
||||||
<n-icon :component="FlashIcon" />
|
<n-icon :component="FlashIcon" />
|
||||||
</template>
|
</template>
|
||||||
</n-input>
|
</n-input>
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<div class="edit-text" @click="requestModelHandle">
|
<div class="edit-text" @click="requestModelHandle">
|
||||||
<div class="go-absolute-center">
|
<div class="go-absolute-center">
|
||||||
<n-button type="primary" secondary>编辑配置</n-button>
|
<n-button type="primary" secondary>编辑配置</n-button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</n-card>
|
</n-card>
|
||||||
|
|
||||||
<setting-item-box :alone="true">
|
<setting-item-box :alone="true">
|
||||||
<template #name>
|
<template #name>
|
||||||
测试
|
测试
|
||||||
<n-tooltip trigger="hover">
|
<n-tooltip trigger="hover">
|
||||||
<template #trigger>
|
<template #trigger>
|
||||||
<n-icon size="21" :depth="3">
|
<n-icon size="21" :depth="3">
|
||||||
<help-outline-icon></help-outline-icon>
|
<help-outline-icon></help-outline-icon>
|
||||||
</n-icon>
|
</n-icon>
|
||||||
</template>
|
</template>
|
||||||
默认赋值给 dataset 字段
|
默认赋值给 dataset 字段
|
||||||
</n-tooltip>
|
</n-tooltip>
|
||||||
</template>
|
</template>
|
||||||
<n-button type="primary" ghost @click="sendHandle">
|
<n-button type="primary" ghost @click="sendHandle">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
<n-icon>
|
<n-icon>
|
||||||
<flash-icon />
|
<flash-icon />
|
||||||
</n-icon>
|
</n-icon>
|
||||||
</template>
|
</template>
|
||||||
发送请求
|
发送请求
|
||||||
</n-button>
|
</n-button>
|
||||||
</setting-item-box>
|
</setting-item-box>
|
||||||
|
|
||||||
<!-- 底部数据展示 -->
|
<!-- 底部数据展示 -->
|
||||||
<chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
|
<chart-data-matching-and-show :show="showMatching && !loading" :ajax="true"></chart-data-matching-and-show>
|
||||||
|
|
||||||
<!-- 骨架图 -->
|
<!-- 骨架图 -->
|
||||||
<go-skeleton :load="loading" :repeat="3"></go-skeleton>
|
<go-skeleton :load="loading" :repeat="3"></go-skeleton>
|
||||||
|
|
||||||
<!-- 请求配置model -->
|
<!-- 请求配置model -->
|
||||||
<chart-data-request
|
<chart-data-request
|
||||||
v-model:modelShow="requestShow"
|
v-model:modelShow="requestShow"
|
||||||
:targetData="targetData"
|
:targetData="targetData"
|
||||||
@sendHandle="sendHandle"
|
@sendHandle="sendHandle"
|
||||||
></chart-data-request>
|
></chart-data-request>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import { ref, toRefs, computed, onBeforeUnmount, watchEffect, toRaw } from 'vue'
|
import { ref, toRefs, computed, onBeforeUnmount, watchEffect, toRaw } from 'vue'
|
||||||
import { icon } from '@/plugins'
|
import { icon } from '@/plugins'
|
||||||
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
import { useDesignStore } from '@/store/modules/designStore/designStore'
|
||||||
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
import { SettingItemBox, SettingItem } from '@/components/Pages/ChartItemSetting'
|
||||||
import { ChartDataRequest } from '../ChartDataRequest/index'
|
import { ChartDataRequest } from '../ChartDataRequest/index'
|
||||||
import { RequestHttpEnum, ResultEnum, SelectHttpTimeNameObj, RequestContentTypeEnum } from '@/enums/httpEnum'
|
import { RequestHttpEnum, ResultEnum, SelectHttpTimeNameObj, RequestContentTypeEnum } from '@/enums/httpEnum'
|
||||||
import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
|
import { chartDataUrl, rankListUrl, scrollBoardUrl, numberFloatUrl, numberIntUrl, textUrl, imageUrl } from '@/api/mock'
|
||||||
import { http, customizeHttp } from '@/api/http'
|
import { http, customizeHttp } from '@/api/http'
|
||||||
import { SelectHttpType } from '../../index.d'
|
import { SelectHttpType } from '../../index.d'
|
||||||
import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
|
import { ChartDataMatchingAndShow } from '../ChartDataMatchingAndShow'
|
||||||
import { useTargetData } from '../../../hooks/useTargetData.hook'
|
import { useTargetData } from '../../../hooks/useTargetData.hook'
|
||||||
import { newFunctionHandle } from '@/utils'
|
import { newFunctionHandle } from '@/utils'
|
||||||
|
|
||||||
const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
|
const { HelpOutlineIcon, FlashIcon, PulseIcon } = icon.ionicons5
|
||||||
const { targetData, chartEditStore } = useTargetData()
|
const { targetData, chartEditStore } = useTargetData()
|
||||||
|
|
||||||
const {
|
const {
|
||||||
requestOriginUrl,
|
requestOriginUrl,
|
||||||
requestInterval: GlobalRequestInterval,
|
requestInterval: GlobalRequestInterval,
|
||||||
requestIntervalUnit: GlobalRequestIntervalUnit
|
requestIntervalUnit: GlobalRequestIntervalUnit
|
||||||
} = toRefs(chartEditStore.getRequestGlobalConfig)
|
} = toRefs(chartEditStore.getRequestGlobalConfig)
|
||||||
const designStore = useDesignStore()
|
const designStore = useDesignStore()
|
||||||
|
|
||||||
// 是否展示数据分析
|
// 是否展示数据分析
|
||||||
const loading = ref(false)
|
const loading = ref(false)
|
||||||
const requestShow = ref(false)
|
const requestShow = ref(false)
|
||||||
const showMatching = ref(false)
|
const showMatching = ref(false)
|
||||||
|
|
||||||
let firstFocus = 0
|
let firstFocus = 0
|
||||||
let lastFilter: any = undefined
|
let lastFilter: any = undefined
|
||||||
|
|
||||||
// 请求配置 model
|
// 请求配置 model
|
||||||
const requestModelHandle = () => {
|
const requestModelHandle = () => {
|
||||||
requestShow.value = true
|
requestShow.value = true
|
||||||
}
|
}
|
||||||
|
|
||||||
// 发送请求
|
// 发送请求
|
||||||
const sendHandle = async () => {
|
const sendHandle = async () => {
|
||||||
if (!targetData.value?.request) return
|
if (!targetData.value?.request) return
|
||||||
loading.value = true
|
loading.value = true
|
||||||
try {
|
try {
|
||||||
const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
|
const res = await customizeHttp(toRaw(targetData.value.request), toRaw(chartEditStore.getRequestGlobalConfig))
|
||||||
loading.value = false
|
loading.value = false
|
||||||
if (res) {
|
if (res) {
|
||||||
if (!res?.data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
|
const { data } = res
|
||||||
targetData.value.option.dataset = newFunctionHandle(res?.data, res, targetData.value.filter)
|
if (!data && !targetData.value.filter) window['$message'].warning('您的数据不符合默认格式，请配置过滤器！')
|
||||||
showMatching.value = true
|
targetData.value.option.dataset = newFunctionHandle(data, res, targetData.value.filter)
|
||||||
return
|
showMatching.value = true
|
||||||
}
|
return
|
||||||
window['$message'].warning('没有拿到返回值，请检查接口！')
|
}
|
||||||
} catch (error) {
|
window['$message'].warning('没有拿到返回值，请检查接口！')
|
||||||
console.error(error);
|
} catch (error) {
|
||||||
loading.value = false
|
console.error(error);
|
||||||
window['$message'].warning('数据异常，请检查参数！')
|
loading.value = false
|
||||||
}
|
window['$message'].warning('数据异常，请检查参数！')
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// 颜色
|
|
||||||
const themeColor = computed(() => {
|
// 颜色
|
||||||
return designStore.getAppTheme
|
const themeColor = computed(() => {
|
||||||
})
|
return designStore.getAppTheme
|
||||||
|
})
|
||||||
watchEffect(() => {
|
|
||||||
const filter = targetData.value?.filter
|
watchEffect(() => {
|
||||||
if (lastFilter !== filter && firstFocus) {
|
const filter = targetData.value?.filter
|
||||||
lastFilter = filter
|
if (lastFilter !== filter && firstFocus) {
|
||||||
sendHandle()
|
lastFilter = filter
|
||||||
}
|
sendHandle()
|
||||||
firstFocus++
|
}
|
||||||
})
|
firstFocus++
|
||||||
|
})
|
||||||
onBeforeUnmount(() => {
|
|
||||||
lastFilter = null
|
onBeforeUnmount(() => {
|
||||||
})
|
lastFilter = null
|
||||||
</script>
|
})
|
||||||
|
</script>
|
||||||
<style lang="scss" scoped>
|
|
||||||
@include go('chart-configurations-data-ajax') {
|
<style lang="scss" scoped>
|
||||||
.n-card-shallow {
|
@include go('chart-configurations-data-ajax') {
|
||||||
&.n-card {
|
.n-card-shallow {
|
||||||
@extend .go-background-filter;
|
&.n-card {
|
||||||
@include deep() {
|
@extend .go-background-filter;
|
||||||
.n-card__content {
|
@include deep() {
|
||||||
padding: 10px;
|
.n-card__content {
|
||||||
}
|
padding: 10px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.edit-text {
|
}
|
||||||
position: absolute;
|
.edit-text {
|
||||||
top: 0px;
|
position: absolute;
|
||||||
left: 0px;
|
top: 0px;
|
||||||
width: 325px;
|
left: 0px;
|
||||||
height: 270px;
|
width: 325px;
|
||||||
cursor: pointer;
|
height: 270px;
|
||||||
opacity: 0;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
opacity: 0;
|
||||||
@extend .go-background-filter;
|
transition: all 0.3s;
|
||||||
backdrop-filter: blur(2px) !important;
|
@extend .go-background-filter;
|
||||||
}
|
backdrop-filter: blur(2px) !important;
|
||||||
&:hover {
|
}
|
||||||
border-color: v-bind('themeColor');
|
&:hover {
|
||||||
.edit-text {
|
border-color: v-bind('themeColor');
|
||||||
opacity: 1;
|
.edit-text {
|
||||||
}
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
}
|
||||||
|
</style>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user