|
|
@@ -2,51 +2,129 @@
|
|
|
<div class="custom-button-settings">
|
|
|
<span class="title">{{ custom_button }}</span>
|
|
|
|
|
|
-
|
|
|
- <i class="iconfont icon-material_prompt tool-tip-for-editor" v-tooltip="custom_button_tips">
|
|
|
+ <i
|
|
|
+ class="iconfont icon-material_prompt tool-tip-for-editor"
|
|
|
+ v-tooltip="custom_button_tips"
|
|
|
+ >
|
|
|
</i>
|
|
|
<br />
|
|
|
|
|
|
- <div v-for="(item, index) of info.customButton" :key="index" class="button-setting-item"
|
|
|
- :class="{ expand: expandStatus[index] }">
|
|
|
- <div class="title-bar" :class="info.customButton[index].isShow ? 'bright' : 'dark'"
|
|
|
- @click="onRequestForChangeExpandStatus(index)">
|
|
|
+ <div
|
|
|
+ v-for="(item, index) of info.customButton"
|
|
|
+ :key="index"
|
|
|
+ class="button-setting-item"
|
|
|
+ :class="{ expand: expandStatus[index] }"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="title-bar"
|
|
|
+ :class="info.customButton[index].isShow ? 'bright' : 'dark'"
|
|
|
+ @click="onRequestForChangeExpandStatus(index)"
|
|
|
+ >
|
|
|
+ <!-- 新增的体验图片 -->
|
|
|
+ <div class="experience">
|
|
|
+ <img src="@/assets/img/experience.png" alt="" />
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="left">
|
|
|
<i class="iconfont icon-edit_input_arrow icon-expand"></i>
|
|
|
- <img v-if="info.customButton[index].type === '电话' && info.customButton[index].isShow"
|
|
|
- :src="require('@/assets/images/icons/phone.svg')" class="button-icon" alt="">
|
|
|
- <img v-if="info.customButton[index].type === '电话' && !info.customButton[index].isShow"
|
|
|
- :src="require('@/assets/images/icons/phone-dark.svg')" class="button-icon" alt="">
|
|
|
- <img v-if="info.customButton[index].type === '链接' && info.customButton[index].isShow"
|
|
|
- :src="require('@/assets/images/icons/link.svg')" class="button-icon" alt="">
|
|
|
- <img v-if="info.customButton[index].type === '链接' && !info.customButton[index].isShow"
|
|
|
- :src="require('@/assets/images/icons/link-dark.svg')" class="button-icon" alt="">
|
|
|
+ <img
|
|
|
+ v-if="
|
|
|
+ info.customButton[index].type === '电话' &&
|
|
|
+ info.customButton[index].isShow
|
|
|
+ "
|
|
|
+ :src="require('@/assets/images/icons/phone.svg')"
|
|
|
+ class="button-icon"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="
|
|
|
+ info.customButton[index].type === '电话' &&
|
|
|
+ !info.customButton[index].isShow
|
|
|
+ "
|
|
|
+ :src="require('@/assets/images/icons/phone-dark.svg')"
|
|
|
+ class="button-icon"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="
|
|
|
+ info.customButton[index].type === '链接' &&
|
|
|
+ info.customButton[index].isShow
|
|
|
+ "
|
|
|
+ :src="require('@/assets/images/icons/link.svg')"
|
|
|
+ class="button-icon"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-if="
|
|
|
+ info.customButton[index].type === '链接' &&
|
|
|
+ !info.customButton[index].isShow
|
|
|
+ "
|
|
|
+ :src="require('@/assets/images/icons/link-dark.svg')"
|
|
|
+ class="button-icon"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
<span class="button-name">
|
|
|
{{ buttonName[index] }}
|
|
|
- <!-- {{ info.customButton[index].name }} -->
|
|
|
</span>
|
|
|
</div>
|
|
|
<div class="right">
|
|
|
- <i class="iconfont icon-editor_list_edit btn-edit" @click.stop="onRequestForEdit(index)" v-tooltip="edittips">
|
|
|
+ <i
|
|
|
+ class="iconfont icon-editor_list_edit btn-edit"
|
|
|
+ @click.stop="onRequestForEdit(index)"
|
|
|
+ v-tooltip="edittips"
|
|
|
+ >
|
|
|
</i>
|
|
|
- <i v-show="info.customButton[index].isShow" class="iconfont icon-editor_on btn-show" v-tooltip="hidetips"
|
|
|
- @click.stop="info.customButton[index].isShow = false"></i>
|
|
|
- <i v-show="!info.customButton[index].isShow" class="iconfont icon-editor_off btn-hide" v-tooltip="showtips"
|
|
|
- @click.stop="onRequestForShow(index)"></i>
|
|
|
+ <i
|
|
|
+ v-show="info.customButton[index].isShow"
|
|
|
+ class="iconfont icon-editor_on btn-show"
|
|
|
+ v-tooltip="hidetips"
|
|
|
+ @click.stop="info.customButton[index].isShow = false"
|
|
|
+ ></i>
|
|
|
+ <i
|
|
|
+ v-show="!info.customButton[index].isShow"
|
|
|
+ class="iconfont icon-editor_off btn-hide"
|
|
|
+ v-tooltip="showtips"
|
|
|
+ @click.stop="onRequestForShow(index)"
|
|
|
+ ></i>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="edit-content">
|
|
|
<div class="edit-content-item">
|
|
|
+ <span class="item-name">{{ button_type }}</span>
|
|
|
+ <div style="margin-left: 16px">{{ buttonName[index] }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="edit-content-item">
|
|
|
<span class="item-name">{{ button_name }}</span>
|
|
|
- <PulldownMenuInEditor class="selector" :valueList="buttonTypeList" v-model="info.customButton[index].type">
|
|
|
- </PulldownMenuInEditor>
|
|
|
- <input class="name-input" :placeholder="button_placeholder" v-model="info.customButton[index].name"
|
|
|
- maxlength="15">
|
|
|
+ <div style="margin-left: 16px">
|
|
|
+ {{ info.customButton[index].name }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="edit-content-item">
|
|
|
<span class="item-name">{{ buttonValueTips[index] }}</span>
|
|
|
- <input class="value-input" v-model="info.customButton[index].value">
|
|
|
+ <div style="margin-left: 16px">
|
|
|
+ {{ info.customButton[index].value }}
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
+ <!-- <div class="edit-content-item">
|
|
|
+ <span class="item-name">{{ button_name }}</span>
|
|
|
+ <PulldownMenuInEditor
|
|
|
+ class="selector"
|
|
|
+ :valueList="buttonTypeList"
|
|
|
+ v-model="info.customButton[index].type"
|
|
|
+ >
|
|
|
+ </PulldownMenuInEditor>
|
|
|
+ <input
|
|
|
+ class="name-input"
|
|
|
+ :placeholder="button_placeholder"
|
|
|
+ v-model="info.customButton[index].name"
|
|
|
+ maxlength="15"
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+ <!-- <div class="edit-content-item">
|
|
|
+ <span class="item-name">{{ buttonValueTips[index] }}</span>
|
|
|
+ <input class="value-input" v-model="info.customButton[index].value" />
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -62,14 +140,26 @@
|
|
|
<div class="ui-message-main">
|
|
|
<div class="edit-content-item">
|
|
|
<span class="item-name">{{ button_name }}</span>
|
|
|
- <PulldownMenuInEditor class="selector" :valueList="buttonTypeList" v-model="editingInfo.type">
|
|
|
+ <PulldownMenuInEditor
|
|
|
+ class="selector"
|
|
|
+ :valueList="buttonTypeList"
|
|
|
+ v-model="editingInfo.type"
|
|
|
+ >
|
|
|
</PulldownMenuInEditor>
|
|
|
- <input class="name-input" :placeholder="button_placeholder" v-model="editingInfo.name" maxlength="15">
|
|
|
+ <input
|
|
|
+ class="name-input"
|
|
|
+ :placeholder="button_placeholder"
|
|
|
+ v-model="editingInfo.name"
|
|
|
+ maxlength="15"
|
|
|
+ />
|
|
|
</div>
|
|
|
<div class="edit-content-item">
|
|
|
<span class="item-name">{{ editingButtonValueTip }}</span>
|
|
|
- <input class="value-input" :placeholder="`${please_input}${editingButtonValueTip}`"
|
|
|
- v-model="editingInfo.value">
|
|
|
+ <input
|
|
|
+ class="value-input"
|
|
|
+ :placeholder="`${please_input}${editingButtonValueTip}`"
|
|
|
+ v-model="editingInfo.value"
|
|
|
+ />
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
@@ -91,8 +181,7 @@ import { mapGetters } from "vuex";
|
|
|
import PulldownMenuInEditor from "@/components/pulldownMenuInEditor.vue";
|
|
|
import { isValidPhoneNumber } from "@/utils/other.js";
|
|
|
import Popup from "@/components/shared/popup/index.vue";
|
|
|
-import { i18n } from "@/lang"
|
|
|
-
|
|
|
+import { i18n } from "@/lang";
|
|
|
|
|
|
export default {
|
|
|
components: {
|
|
|
@@ -107,6 +196,7 @@ export default {
|
|
|
hidetips: i18n.t("edit_settings.hide"),
|
|
|
showtips: i18n.t("edit_settings.show"),
|
|
|
button_name: i18n.t("edit_settings.button_name"),
|
|
|
+ button_type: i18n.t("edit_settings.button_type"),
|
|
|
button_placeholder: i18n.t("edit_settings.button_placeholder"),
|
|
|
please_input: i18n.t("edit_settings.please_input"),
|
|
|
|
|
|
@@ -114,75 +204,72 @@ export default {
|
|
|
comfirmtips: i18n.t("gather.comfirm"),
|
|
|
|
|
|
expandStatus: [],
|
|
|
- buttonTypeList: [
|
|
|
- '电话',
|
|
|
- '链接',
|
|
|
- ],
|
|
|
+ buttonTypeList: ["电话", "链接"],
|
|
|
isEditing: false,
|
|
|
editingButtonIdx: -1,
|
|
|
isIgnoreTypeChangeWhenEditing: false,
|
|
|
editingInfo: {
|
|
|
- type: '',
|
|
|
- name: '',
|
|
|
- value: '',
|
|
|
- }
|
|
|
- }
|
|
|
+ type: "",
|
|
|
+ name: "",
|
|
|
+ value: "",
|
|
|
+ },
|
|
|
+ };
|
|
|
},
|
|
|
computed: {
|
|
|
...mapGetters({
|
|
|
- info: 'info'
|
|
|
+ info: "info",
|
|
|
}),
|
|
|
buttonValueTips() {
|
|
|
if (this.info.customButton) {
|
|
|
return this.info.customButton.map((item) => {
|
|
|
- if (item.type === '电话') {
|
|
|
- return i18n.t("edit_settings.phone")
|
|
|
- } else if (item.type === '链接') {
|
|
|
- return i18n.t("edit_settings.link")
|
|
|
+ if (item.type === "电话") {
|
|
|
+ return i18n.t("edit_settings.phone");
|
|
|
+ } else if (item.type === "链接") {
|
|
|
+ return i18n.t("edit_settings.link");
|
|
|
} else {
|
|
|
- return ''
|
|
|
+ return "";
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
} else {
|
|
|
- return null
|
|
|
+ return null;
|
|
|
}
|
|
|
},
|
|
|
|
|
|
buttonName() {
|
|
|
if (this.info.customButton) {
|
|
|
return this.info.customButton.map((item) => {
|
|
|
- if (item.type === '电话') {
|
|
|
- return i18n.t("edit_settings.phone_short")
|
|
|
- } else if (item.type === '链接') {
|
|
|
- return i18n.t("edit_settings.link_short")
|
|
|
+ if (item.type === "电话") {
|
|
|
+ return i18n.t("edit_settings.phone_short");
|
|
|
+ } else if (item.type === "链接") {
|
|
|
+ return i18n.t("edit_settings.link_short");
|
|
|
} else {
|
|
|
- return ''
|
|
|
+ return "";
|
|
|
}
|
|
|
- })
|
|
|
+ });
|
|
|
} else {
|
|
|
- return null
|
|
|
+ return null;
|
|
|
}
|
|
|
},
|
|
|
editingButtonValueTip() {
|
|
|
- if (this.editingInfo.type === '电话') {
|
|
|
- return i18n.t("edit_settings.phone")
|
|
|
- } else if (this.editingInfo.type === '链接') {
|
|
|
- return i18n.t("edit_settings.link")
|
|
|
+ if (this.editingInfo.type === "电话") {
|
|
|
+ return i18n.t("edit_settings.phone");
|
|
|
+ } else if (this.editingInfo.type === "链接") {
|
|
|
+ return i18n.t("edit_settings.link");
|
|
|
} else {
|
|
|
- return ''
|
|
|
+ return "";
|
|
|
}
|
|
|
},
|
|
|
},
|
|
|
watch: {
|
|
|
- 'editingInfo.type': {
|
|
|
+ "editingInfo.type": {
|
|
|
handler(vNew) {
|
|
|
if (!this.isIgnoreTypeChangeWhenEditing) {
|
|
|
console.log(vNew);
|
|
|
- this.editingInfo.name = i18n.t(`zh_key.${vNew}`)
|
|
|
- this.editingInfo.value = ''
|
|
|
+ this.editingInfo.name = i18n.t(`zh_key.${vNew}`);
|
|
|
+ this.editingInfo.value = "";
|
|
|
}
|
|
|
- this.isIgnoreTypeChangeWhenEditing = false
|
|
|
- }
|
|
|
+ this.isIgnoreTypeChangeWhenEditing = false;
|
|
|
+ },
|
|
|
},
|
|
|
},
|
|
|
beforeMount() {
|
|
|
@@ -190,82 +277,95 @@ export default {
|
|
|
// 这是在v1.2版之前创建的作品，还没设置过自定义按钮，所以还没有customButton字段
|
|
|
this.info.customButton = [
|
|
|
{
|
|
|
- "type": "电话",
|
|
|
- "name": "电话",
|
|
|
- "value": "",
|
|
|
- "isShow": false
|
|
|
+ type: "电话",
|
|
|
+ name: "电话",
|
|
|
+ value: "",
|
|
|
+ isShow: false,
|
|
|
},
|
|
|
{
|
|
|
- "type": "链接",
|
|
|
- "name": "链接",
|
|
|
- "value": "",
|
|
|
- "isShow": false
|
|
|
- }
|
|
|
- ]
|
|
|
+ type: "链接",
|
|
|
+ name: "链接",
|
|
|
+ value: "",
|
|
|
+ isShow: false,
|
|
|
+ },
|
|
|
+ ];
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
onRequestForChangeExpandStatus(index) {
|
|
|
- this.$set(this.expandStatus, index, !this.expandStatus[index])
|
|
|
+ this.$set(this.expandStatus, index, !this.expandStatus[index]);
|
|
|
},
|
|
|
onRequestForEdit(index) {
|
|
|
- this.editingButtonIdx = index
|
|
|
- this.isIgnoreTypeChangeWhenEditing = true,
|
|
|
- this.editingInfo.type = this.info.customButton[index].type
|
|
|
- this.editingInfo.name = this.info.customButton[index].name
|
|
|
- this.editingInfo.value = this.info.customButton[index].value
|
|
|
- this.isEditing = true
|
|
|
+ this.editingButtonIdx = index;
|
|
|
+ (this.isIgnoreTypeChangeWhenEditing = true),
|
|
|
+ (this.editingInfo.type = this.info.customButton[index].type);
|
|
|
+ this.editingInfo.name = this.info.customButton[index].name;
|
|
|
+ this.editingInfo.value = this.info.customButton[index].value;
|
|
|
+ this.isEditing = true;
|
|
|
},
|
|
|
checkButtonName(name) {
|
|
|
if (!name) {
|
|
|
- this.$msg.warning(i18n.t('gather.fill_complete'))
|
|
|
- return false
|
|
|
+ this.$msg.warning(i18n.t("gather.fill_complete"));
|
|
|
+ return false;
|
|
|
}
|
|
|
- return true
|
|
|
+ return true;
|
|
|
},
|
|
|
checkButtonValue(value, type) {
|
|
|
- if (type === '电话') {
|
|
|
+ if (type === "电话") {
|
|
|
if (!isValidPhoneNumber(value)) {
|
|
|
- this.$msg.warning(i18n.t('gather.fill_phone'))
|
|
|
- return false
|
|
|
+ this.$msg.warning(i18n.t("gather.fill_phone"));
|
|
|
+ return false;
|
|
|
}
|
|
|
- } else if (type === '链接') {
|
|
|
+ } else if (type === "链接") {
|
|
|
if (!value) {
|
|
|
- this.$msg.warning(i18n.t('gather.fill_complete'))
|
|
|
- return false
|
|
|
+ this.$msg.warning(i18n.t("gather.fill_complete"));
|
|
|
+ return false;
|
|
|
}
|
|
|
}
|
|
|
- return true
|
|
|
+ return true;
|
|
|
},
|
|
|
onConfirmEditing() {
|
|
|
if (!this.checkButtonName(this.editingInfo.name)) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- if (!this.checkButtonValue(this.editingInfo.value, this.editingInfo.type)) {
|
|
|
- return
|
|
|
+ if (
|
|
|
+ !this.checkButtonValue(this.editingInfo.value, this.editingInfo.type)
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
}
|
|
|
- this.info.customButton[this.editingButtonIdx].type = this.editingInfo.type
|
|
|
- this.info.customButton[this.editingButtonIdx].name = this.editingInfo.name
|
|
|
- this.info.customButton[this.editingButtonIdx].value = this.editingInfo.value
|
|
|
- this.$msg.success(i18n.t('gather.success'))
|
|
|
- this.isEditing = false
|
|
|
+ this.info.customButton[this.editingButtonIdx].type =
|
|
|
+ this.editingInfo.type;
|
|
|
+ this.info.customButton[this.editingButtonIdx].name =
|
|
|
+ this.editingInfo.name;
|
|
|
+ this.info.customButton[this.editingButtonIdx].value =
|
|
|
+ this.editingInfo.value;
|
|
|
+ this.$msg.success(i18n.t("gather.success"));
|
|
|
+ this.isEditing = false;
|
|
|
},
|
|
|
onRequestForShow(index) {
|
|
|
if (!this.checkButtonName(this.info.customButton[index].name)) {
|
|
|
- return
|
|
|
+ return;
|
|
|
}
|
|
|
- if (!this.checkButtonValue(this.info.customButton[index].value, this.info.customButton[index].type)) {
|
|
|
- return
|
|
|
+ if (
|
|
|
+ !this.checkButtonValue(
|
|
|
+ this.info.customButton[index].value,
|
|
|
+ this.info.customButton[index].type
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ return;
|
|
|
}
|
|
|
- this.info.customButton[index].isShow = true
|
|
|
- }
|
|
|
+ this.info.customButton[index].isShow = true;
|
|
|
+ },
|
|
|
},
|
|
|
mounted() {
|
|
|
- this.info.customButton.forEach(item=>{
|
|
|
- item.name = i18n.t(`zh_key.${item.name}`).indexOf('zh_key')>-1?item.name:i18n.t(`zh_key.${item.name}`)
|
|
|
- })
|
|
|
+ this.info.customButton.forEach((item) => {
|
|
|
+ item.name =
|
|
|
+ i18n.t(`zh_key.${item.name}`).indexOf("zh_key") > -1
|
|
|
+ ? item.name
|
|
|
+ : i18n.t(`zh_key.${item.name}`);
|
|
|
+ });
|
|
|
},
|
|
|
-}
|
|
|
+};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
@@ -276,7 +376,7 @@ export default {
|
|
|
|
|
|
.title {
|
|
|
font-size: 18px;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
}
|
|
|
|
|
|
.tool-tip-for-editor {
|
|
|
@@ -287,24 +387,36 @@ export default {
|
|
|
top: -2px;
|
|
|
}
|
|
|
|
|
|
- >.button-setting-item {
|
|
|
+ > .button-setting-item {
|
|
|
margin-top: 16px;
|
|
|
position: relative;
|
|
|
min-height: 50px;
|
|
|
|
|
|
- >.title-bar {
|
|
|
+ > .title-bar {
|
|
|
position: absolute;
|
|
|
width: 100%;
|
|
|
height: 50px;
|
|
|
- background: #1A1B1D;
|
|
|
+ background: #1a1b1d;
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid #404040;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
padding: 0 16px;
|
|
|
+ padding-right: 40px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
+ .experience {
|
|
|
+ position: absolute;
|
|
|
+ z-index: 10;
|
|
|
+ top: 0;
|
|
|
+ right: 0;
|
|
|
+ & > img {
|
|
|
+ width: 31px;
|
|
|
+ height: 31px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
&.bright {
|
|
|
color: #fff;
|
|
|
}
|
|
|
@@ -313,30 +425,30 @@ export default {
|
|
|
color: #808080;
|
|
|
}
|
|
|
|
|
|
- >.left {
|
|
|
+ > .left {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
- >.icon-expand {
|
|
|
+ > .icon-expand {
|
|
|
font-size: 10px;
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
transform: rotate(-90deg);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
|
|
|
- >.button-icon {
|
|
|
+ > .button-icon {
|
|
|
width: 18px;
|
|
|
height: 18px;
|
|
|
margin-left: 6px;
|
|
|
}
|
|
|
|
|
|
- >.button-name {
|
|
|
+ > .button-name {
|
|
|
font-size: 16px;
|
|
|
margin-left: 6px;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.right {
|
|
|
+ > .right {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
@@ -345,31 +457,31 @@ export default {
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
- color: #0076F6;
|
|
|
+ color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.btn-show {
|
|
|
+ > .btn-show {
|
|
|
margin-left: 16px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
- color: #0076F6;
|
|
|
+ color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.btn-hide {
|
|
|
+ > .btn-hide {
|
|
|
margin-left: 16px;
|
|
|
cursor: pointer;
|
|
|
|
|
|
&:hover {
|
|
|
- color: #0076F6;
|
|
|
+ color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.edit-content {
|
|
|
+ > .edit-content {
|
|
|
border-radius: 2px;
|
|
|
border: 1px solid #404040;
|
|
|
padding-top: 58px;
|
|
|
@@ -377,22 +489,22 @@ export default {
|
|
|
display: none;
|
|
|
pointer-events: none;
|
|
|
|
|
|
- >.edit-content-item {
|
|
|
+ > .edit-content-item {
|
|
|
margin-top: 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
- >.item-name {
|
|
|
+ > .item-name {
|
|
|
margin-left: 16px;
|
|
|
font-size: 14px;
|
|
|
- color: rgba(255, 255, 255, 0.5)
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
|
|
|
- >.selector {
|
|
|
+ > .selector {
|
|
|
margin-left: 16px;
|
|
|
}
|
|
|
|
|
|
- >.name-input {
|
|
|
+ > .name-input {
|
|
|
height: 36px;
|
|
|
background: transparent;
|
|
|
border-radius: 2px;
|
|
|
@@ -404,11 +516,11 @@ export default {
|
|
|
width: 470px;
|
|
|
|
|
|
&:focus {
|
|
|
- border-color: #0076F6;
|
|
|
+ border-color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.value-input {
|
|
|
+ > .value-input {
|
|
|
margin-left: 16px;
|
|
|
height: 36px;
|
|
|
background: transparent;
|
|
|
@@ -421,23 +533,23 @@ export default {
|
|
|
width: 610px;
|
|
|
|
|
|
&:focus {
|
|
|
- border-color: #0076F6;
|
|
|
+ border-color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.button-setting-item.expand {
|
|
|
- >.title-bar {
|
|
|
- >.left {
|
|
|
- >.icon-expand {
|
|
|
+ > .button-setting-item.expand {
|
|
|
+ > .title-bar {
|
|
|
+ > .left {
|
|
|
+ > .icon-expand {
|
|
|
transform: rotate(0deg);
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.edit-content {
|
|
|
+ > .edit-content {
|
|
|
display: block;
|
|
|
}
|
|
|
}
|
|
|
@@ -445,25 +557,25 @@ export default {
|
|
|
.edit-window {
|
|
|
width: 574px;
|
|
|
|
|
|
- >.ui-message-main {
|
|
|
+ > .ui-message-main {
|
|
|
margin-bottom: 40px;
|
|
|
|
|
|
- >.edit-content-item {
|
|
|
+ > .edit-content-item {
|
|
|
margin-top: 16px;
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
|
|
|
- >.item-name {
|
|
|
+ > .item-name {
|
|
|
flex: 0 0 auto;
|
|
|
font-size: 14px;
|
|
|
- color: rgba(255, 255, 255, 0.5)
|
|
|
+ color: rgba(255, 255, 255, 0.5);
|
|
|
}
|
|
|
|
|
|
- >.selector {
|
|
|
+ > .selector {
|
|
|
margin-left: 16px;
|
|
|
}
|
|
|
|
|
|
- >.name-input {
|
|
|
+ > .name-input {
|
|
|
height: 36px;
|
|
|
background: #252526;
|
|
|
border-radius: 2px;
|
|
|
@@ -475,11 +587,11 @@ export default {
|
|
|
width: 470px;
|
|
|
|
|
|
&:focus {
|
|
|
- border-color: #0076F6;
|
|
|
+ border-color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
- >.value-input {
|
|
|
+ > .value-input {
|
|
|
margin-left: 16px;
|
|
|
height: 36px;
|
|
|
background: #252526;
|
|
|
@@ -492,7 +604,7 @@ export default {
|
|
|
width: 610px;
|
|
|
|
|
|
&:focus {
|
|
|
- border-color: #0076F6;
|
|
|
+ border-color: #0076f6;
|
|
|
}
|
|
|
}
|
|
|
}
|
