change background color of stage loader route
This commit is contained in:
parent
c1ba6a85b3
commit
bbc01ee2c9
3 changed files with 16 additions and 10 deletions
|
@ -1,13 +1,16 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="select-wrapper">
|
<div class="select-wrapper">
|
||||||
<select @change="onValueChanged" autocomplete="off">
|
<select @change="onValueChanged" autocomplete="off">
|
||||||
<option v-if="placeholder != null" value="placeholder" selected disabled>{{ placeholder }}</option>
|
<option v-if="placeholder != null" value="placeholder" selected disabled>{{
|
||||||
|
placeholder
|
||||||
|
}}</option>
|
||||||
<optgroup v-for="optGroup in optGroups" :label="optGroup.label">
|
<optgroup v-for="optGroup in optGroups" :label="optGroup.label">
|
||||||
<option
|
<option
|
||||||
v-for="option in optGroup.options"
|
v-for="option in optGroup.options"
|
||||||
:value="option.value"
|
:value="option.value"
|
||||||
:selected="selectedValue && option.value === selectedValue"
|
:selected="selectedValue && option.value === selectedValue"
|
||||||
>{{ option.label }}</option>
|
>{{ option.label }}</option
|
||||||
|
>
|
||||||
</optgroup>
|
</optgroup>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
@ -19,19 +22,19 @@ export default {
|
||||||
selectedValue: { type: String },
|
selectedValue: { type: String },
|
||||||
placeholder: { type: String },
|
placeholder: { type: String },
|
||||||
optGroups: { type: Array },
|
optGroups: { type: Array },
|
||||||
onChange: { type: Function }
|
onChange: { type: Function },
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
generation: 2
|
generation: 2,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
onValueChanged(e) {
|
onValueChanged(e) {
|
||||||
this.onChange(e.target.value);
|
this.onChange(e.target.value);
|
||||||
}
|
},
|
||||||
}
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -89,7 +92,7 @@ select optgroup {
|
||||||
top: 3px;
|
top: 3px;
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
content: "\25BC";
|
content: '\25BC';
|
||||||
text-align: center;
|
text-align: center;
|
||||||
color: white;
|
color: white;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
|
|
|
@ -270,10 +270,12 @@ ul li {
|
||||||
color: red;
|
color: red;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
|
||||||
<style>
|
.level-select >>> .select-wrapper {
|
||||||
.ghost select {
|
background-color: #62809e;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost >>> .select-wrapper {
|
||||||
background-color: orange;
|
background-color: orange;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -6,6 +6,7 @@ module.exports = {
|
||||||
head: [
|
head: [
|
||||||
['meta', { name: 'theme-color', content: '#3eaf7c' }],
|
['meta', { name: 'theme-color', content: '#3eaf7c' }],
|
||||||
['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
|
['meta', { name: 'viewport', content: 'width=device-width, initial-scale=1' }],
|
||||||
|
['meta', { name: 'Cache-control', content: 'public,max-age=3600' }],
|
||||||
],
|
],
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue