|
@@ -1,13 +1,9 @@
|
|
|
<template>
|
|
|
- <transition
|
|
|
- appear
|
|
|
- name="custom-classes-transition"
|
|
|
- enter-active-class="animated slideInRight speed"
|
|
|
- leave-active-class="animated slideOutRight speed"
|
|
|
- >
|
|
|
+ <transition appear name="custom-classes-transition" enter-active-class="animated slideInRight speed"
|
|
|
+ leave-active-class="animated slideOutRight speed">
|
|
|
<div class="hots-panel" v-show="show">
|
|
|
<div class="ui-between header">
|
|
|
- <span>{{editTitle}}热点</span>
|
|
|
+ <span>{{ editTitle }}热点</span>
|
|
|
<i class="iconfont icon_close" @click="confirmCancel"></i>
|
|
|
</div>
|
|
|
<div class="content" ref="content">
|
|
@@ -17,12 +13,8 @@
|
|
|
<div class="icon-list">
|
|
|
<div class="margin-handler-layer">
|
|
|
<ul>
|
|
|
- <li
|
|
|
- :class="{ active: item.id == hotspot.icontype }"
|
|
|
- v-for="(item,i) in hotStyle"
|
|
|
- @click="addhotspot(item)"
|
|
|
- :key="i"
|
|
|
- >
|
|
|
+ <li :class="{ active: item.id == hotspot.icontype }" v-for="(item, i) in hotStyle"
|
|
|
+ @click="addhotspot(item)" :key="i">
|
|
|
<img :src="item.thumb" alt="">
|
|
|
</li>
|
|
|
</ul>
|
|
@@ -39,52 +31,25 @@
|
|
|
<Switcher :value="hotspot.visible" @change="hotspot.visible = !hotspot.visible"></Switcher>
|
|
|
</div>
|
|
|
<div class="title-input-wrapper">
|
|
|
- <input
|
|
|
- v-model.trim="hotspot.hotspotTitle"
|
|
|
- type="text"
|
|
|
- maxlength="50"
|
|
|
- placeholder="请输入标题,限50字"
|
|
|
- />
|
|
|
- <span class="count">{{hotspot.hotspotTitle.length}}/50</span>
|
|
|
+ <input v-model.trim="hotspot.hotspotTitle" type="text" maxlength="50" placeholder="请输入标题,限50字" />
|
|
|
+ <span class="count">{{ hotspot.hotspotTitle.length }}/50</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="effect-setting">
|
|
|
<div class="effect-setting-title">效果设置</div>
|
|
|
- <combox
|
|
|
- class="combox"
|
|
|
- :data="hotSpotTypeList"
|
|
|
- :selected-id="hotspot.hotspotType"
|
|
|
- :bottomSpace="comboxBottomSpace"
|
|
|
- @change="onhotSpotTypeChange"
|
|
|
- ></combox>
|
|
|
- <component
|
|
|
- class="effect-setting-component"
|
|
|
-
|
|
|
- @sceneSelect="handleSceneSelect"
|
|
|
- :scene="hotspot.secne"
|
|
|
-
|
|
|
- @imageChange="data=>{hotspot.image=data}"
|
|
|
- :image="hotspot.image"
|
|
|
-
|
|
|
- @linkChange="data=>{hotspot.hyperlink=data}"
|
|
|
- :link="hotspot.hyperlink"
|
|
|
-
|
|
|
- @textChange="data=>{hotspot.textarea=data}"
|
|
|
- :textarea="hotspot.textarea"
|
|
|
-
|
|
|
- @audioChange="data=>{hotspot.audio=data}"
|
|
|
- :audio="hotspot.audio"
|
|
|
-
|
|
|
- @videoChange="data=>{hotspot.video=data}"
|
|
|
- :video="hotspot.video"
|
|
|
-
|
|
|
- :is="effectSettingComponent"
|
|
|
- />
|
|
|
+ <combox class="combox" :data="hotSpotTypeList" :selected-id="hotspot.hotspotType"
|
|
|
+ :bottomSpace="comboxBottomSpace" @change="onhotSpotTypeChange"></combox>
|
|
|
+ <component class="effect-setting-component" @sceneSelect="handleSceneSelect" :scene="hotspot.secne"
|
|
|
+ @imageChange="data => { hotspot.image = data }" :image="hotspot.image"
|
|
|
+ @linkChange="data => { hotspot.hyperlink = data }" :link="hotspot.hyperlink"
|
|
|
+ @textChange="data => { hotspot.textarea = data }" :textarea="hotspot.textarea"
|
|
|
+ @audioChange="data => { hotspot.audio = data }" :audio="hotspot.audio"
|
|
|
+ @videoChange="data => { hotspot.video = data }" :video="hotspot.video" :is="effectSettingComponent" />
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="ui-between footer" app-border dir-top>
|
|
|
- <button class="ui-button deepcancel" :class="{disable: false}" @click="confirmCancel">取消</button>
|
|
|
- <button class="ui-button submit" :class="{disable: false}" @click="save">完成</button>
|
|
|
+ <button class="ui-button deepcancel" :class="{ disable: false }" @click="confirmCancel">取消</button>
|
|
|
+ <button class="ui-button submit" :class="{ disable: false }" @click="save">完成</button>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
@@ -96,83 +61,100 @@ import Combox from "@/components/shared/Combox";
|
|
|
import { mapGetters } from "vuex";
|
|
|
import Switcher from "@/components/shared/Switcher.vue";
|
|
|
|
|
|
+let comparisonKey = [
|
|
|
+ 'fontSize',
|
|
|
+ 'hotspotTitle',
|
|
|
+ 'hotspotType',
|
|
|
+ 'hyperlink',
|
|
|
+ 'icontype',
|
|
|
+ 'image',
|
|
|
+ 'img',
|
|
|
+ 'link',
|
|
|
+ 'secne',
|
|
|
+ 'size',
|
|
|
+ 'textarea',
|
|
|
+ 'type',
|
|
|
+ 'video'
|
|
|
+]
|
|
|
+
|
|
|
let HTMap = {
|
|
|
- scene:{
|
|
|
- key:'secne',
|
|
|
- type:'Object',
|
|
|
- errortxt:'请选择场景'
|
|
|
+ scene: {
|
|
|
+ key: 'secne',
|
|
|
+ type: 'Object',
|
|
|
+ errortxt: '请选择场景'
|
|
|
},
|
|
|
- audio:{
|
|
|
- key:'audio',
|
|
|
- type:'String',
|
|
|
- errortxt:'请选择音频'
|
|
|
+ audio: {
|
|
|
+ key: 'audio',
|
|
|
+ type: 'String',
|
|
|
+ errortxt: '请选择音频'
|
|
|
},
|
|
|
- video:{
|
|
|
- key:'video',
|
|
|
- type:'String',
|
|
|
- errortxt:'请选择视频'
|
|
|
+ video: {
|
|
|
+ key: 'video',
|
|
|
+ type: 'String',
|
|
|
+ errortxt: '请选择视频'
|
|
|
},
|
|
|
- image:{
|
|
|
- key:'image',
|
|
|
- type:'Array',
|
|
|
- errortxt:'请选择图片'
|
|
|
+ image: {
|
|
|
+ key: 'image',
|
|
|
+ type: 'Array',
|
|
|
+ errortxt: '请选择图片'
|
|
|
},
|
|
|
- link:{
|
|
|
- key:'hyperlink',
|
|
|
- type:'String',
|
|
|
- errortxt:'请输入超链接'
|
|
|
+ link: {
|
|
|
+ key: 'hyperlink',
|
|
|
+ type: 'String',
|
|
|
+ errortxt: '请输入超链接'
|
|
|
},
|
|
|
- textarea:{
|
|
|
- key:'textarea',
|
|
|
- type:'String',
|
|
|
- errortxt:'请输入文本'
|
|
|
+ textarea: {
|
|
|
+ key: 'textarea',
|
|
|
+ type: 'String',
|
|
|
+ errortxt: '请输入文本'
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+
|
|
|
export default {
|
|
|
- props: ['show','data','editTitle'],
|
|
|
- components:{
|
|
|
+ props: ['show', 'data', 'editTitle'],
|
|
|
+ components: {
|
|
|
RangeItem,
|
|
|
Combox,
|
|
|
Switcher,
|
|
|
},
|
|
|
- data(){
|
|
|
+ data() {
|
|
|
let cdn = this.$config.getStaticResource('/panoassets/images/hotspot/icon/')
|
|
|
let hotStyle = []
|
|
|
|
|
|
for (let i = 0; i < 12; i++) {
|
|
|
hotStyle[i] = {
|
|
|
- id:'icon'+(i+1),
|
|
|
- img:cdn+`img_doticon_${String(i+1).padStart(2, '0')}.svg`,
|
|
|
- thumb:cdn+`img_doticon_${String(i+1).padStart(2, '0')}.svg`
|
|
|
+ id: 'icon' + (i + 1),
|
|
|
+ img: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`,
|
|
|
+ thumb: cdn + `img_doticon_${String(i + 1).padStart(2, '0')}.svg`
|
|
|
}
|
|
|
}
|
|
|
return {
|
|
|
- canSave:false,
|
|
|
- hotSpotTypeList:[
|
|
|
+ canSave: false,
|
|
|
+ hotSpotTypeList: [
|
|
|
{
|
|
|
- id:'scene',
|
|
|
- name:'场景切换'
|
|
|
+ id: 'scene',
|
|
|
+ name: '场景切换'
|
|
|
},
|
|
|
{
|
|
|
- id:'link',
|
|
|
- name:'超链接'
|
|
|
+ id: 'link',
|
|
|
+ name: '超链接'
|
|
|
},
|
|
|
{
|
|
|
- id:'textarea',
|
|
|
- name:'文本'
|
|
|
+ id: 'textarea',
|
|
|
+ name: '文本'
|
|
|
},
|
|
|
{
|
|
|
- id:'image',
|
|
|
- name:'图片'
|
|
|
+ id: 'image',
|
|
|
+ name: '图片'
|
|
|
},
|
|
|
{
|
|
|
- id:'audio',
|
|
|
- name:'音频'
|
|
|
+ id: 'audio',
|
|
|
+ name: '音频'
|
|
|
},
|
|
|
{
|
|
|
- id:'video',
|
|
|
- name:'视频'
|
|
|
+ id: 'video',
|
|
|
+ name: '视频'
|
|
|
}
|
|
|
],
|
|
|
hotStyle,
|
|
@@ -184,33 +166,33 @@ export default {
|
|
|
min: 0.5,
|
|
|
max: 2,
|
|
|
},
|
|
|
- selectItem:'',
|
|
|
- styIcon:'',
|
|
|
- linkicon:'',
|
|
|
+ selectItem: '',
|
|
|
+ styIcon: '',
|
|
|
+ linkicon: '',
|
|
|
infoItem: '',
|
|
|
- isAdd:true,
|
|
|
+ isAdd: true,
|
|
|
comboxBottomSpace: 0,
|
|
|
}
|
|
|
},
|
|
|
|
|
|
- watch:{
|
|
|
- 'hotspot.hotspotTitle':function () {
|
|
|
- this.$getKrpano().set('layer[tooltip_'+this.hotspot.name+'].html',this.hotspot.hotspotTitle)
|
|
|
+ watch: {
|
|
|
+ 'hotspot.hotspotTitle': function () {
|
|
|
+ this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].html', this.hotspot.hotspotTitle)
|
|
|
},
|
|
|
- 'hotspot.visible':function () {
|
|
|
- this.$getKrpano().set('layer[tooltip_'+this.hotspot.name+'].visible',this.hotspot.visible)
|
|
|
+ 'hotspot.visible': function () {
|
|
|
+ this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].visible', this.hotspot.visible)
|
|
|
},
|
|
|
'hotspot.size': {
|
|
|
- immediate:true,
|
|
|
- handler:function (newVal) {
|
|
|
+ immediate: true,
|
|
|
+ handler: function (newVal) {
|
|
|
let h = 52
|
|
|
- let scaleH = h*newVal
|
|
|
+ let scaleH = h * newVal
|
|
|
|
|
|
let offset = '-130%'
|
|
|
|
|
|
this.rang = { ...this.rang, value: newVal }
|
|
|
- this.$getKrpano().set(`hotspot[${this.hotspot.name}].height`,scaleH)
|
|
|
-
|
|
|
+ this.$getKrpano().set(`hotspot[${this.hotspot.name}].height`, scaleH)
|
|
|
+
|
|
|
if (newVal < 1) {
|
|
|
offset = '-200%'
|
|
|
}
|
|
@@ -218,65 +200,69 @@ export default {
|
|
|
if (newVal > 1) {
|
|
|
offset = '-100%'
|
|
|
}
|
|
|
- this.$getKrpano().set('layer[tooltip_'+this.hotspot.name+'].y',`${offset}`)
|
|
|
+ this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].y', `${offset}`)
|
|
|
|
|
|
|
|
|
}
|
|
|
},
|
|
|
- 'hotspot.fontSize':{
|
|
|
- handler:function (newVal) {
|
|
|
- this.$getKrpano().set('layer[tooltip_'+this.hotspot.name+'].css',`text-align:center; color:#FFFFFF;
|
|
|
+ 'hotspot.fontSize': {
|
|
|
+ handler: function (newVal) {
|
|
|
+ this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].css', `text-align:center; color:#FFFFFF;
|
|
|
font-family:STXihei;font-size:${newVal}px;`)
|
|
|
}
|
|
|
},
|
|
|
- show(newVal){
|
|
|
+ show(newVal) {
|
|
|
if (!newVal) {
|
|
|
- this.$bus.removeListener('selectUrl',this.listerFn)
|
|
|
+ this.$bus.removeListener('selectUrl', this.listerFn)
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- beforeDestroy(){
|
|
|
- this.$bus.removeListener('selectUrl',this.listerFn)
|
|
|
+ beforeDestroy() {
|
|
|
+ this.$bus.removeListener('selectUrl', this.listerFn)
|
|
|
},
|
|
|
- computed:{
|
|
|
+ computed: {
|
|
|
...mapGetters({
|
|
|
- hotspot:'hotspot',
|
|
|
- backupHotSpot:'backupHotSpot'
|
|
|
+ hotspot: 'hotspot',
|
|
|
+ backupHotSpot: 'backupHotSpot'
|
|
|
}),
|
|
|
- effectSettingComponent(){
|
|
|
+ effectSettingComponent() {
|
|
|
let tmp = this.hotspot.hotspotType
|
|
|
return () => import(`./hotspotType/${tmp}.vue`);
|
|
|
},
|
|
|
},
|
|
|
- mounted(){
|
|
|
- this.selectItem = {
|
|
|
- sceneCode: this.infoItem.link
|
|
|
- }
|
|
|
- this.$bus.on('selectUrl',this.listerFn)
|
|
|
- this.$bus.on('resethotspotTitle',()=>{
|
|
|
- this.hotspot.hotspotTitle = ''
|
|
|
- })
|
|
|
+ mounted() {
|
|
|
+ this.selectItem = {
|
|
|
+ sceneCode: this.infoItem.link
|
|
|
+ }
|
|
|
+ this.$bus.on('selectUrl', this.listerFn)
|
|
|
+ this.$bus.on('resethotspotTitle', () => {
|
|
|
+ this.hotspot.hotspotTitle = ''
|
|
|
+ })
|
|
|
+
|
|
|
+ this.$bus.on('delhotspot', () => {
|
|
|
+ this.cancel()
|
|
|
+ })
|
|
|
|
|
|
- this.$bus.on('delhotspot',()=>{
|
|
|
- this.cancel()
|
|
|
- })
|
|
|
|
|
|
- this.$nextTick(()=>{
|
|
|
+ this.$nextTick(() => {
|
|
|
if (this.editTitle != '编辑') {
|
|
|
this.addhotspot(this.hotStyle[0])
|
|
|
+ this.rang.value = window.g_hotspotCurrentScale
|
|
|
+ this.onRangeChange({ value: window.g_hotspotCurrentScale })
|
|
|
}
|
|
|
this.comboxBottomSpace = this.$refs.content.getBoundingClientRect().bottom
|
|
|
})
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
- handleSceneSelect(data){
|
|
|
- this.hotspot.secne= data
|
|
|
+ handleSceneSelect(data) {
|
|
|
+ this.hotspot.secne = data
|
|
|
},
|
|
|
- onhotSpotTypeChange(data){
|
|
|
+ onhotSpotTypeChange(data) {
|
|
|
this.hotspot.hotspotType = data.id
|
|
|
},
|
|
|
onRangeChange(data) {
|
|
|
+ console.log(data);
|
|
|
this.rang = { ...this.rang, value: data.value }
|
|
|
this.hotspot.size = data.value
|
|
|
switch (data.value) {
|
|
@@ -297,35 +283,83 @@ export default {
|
|
|
break;
|
|
|
}
|
|
|
},
|
|
|
- listerFn(data){
|
|
|
+ listerFn(data) {
|
|
|
this.selectItem = {
|
|
|
sceneCode: data.sceneCode
|
|
|
}
|
|
|
this.infoItem.link = data.sceneCode
|
|
|
- this.infoItem.thumb = data.icon
|
|
|
+ this.infoItem.thumb = data.icon
|
|
|
+ },
|
|
|
+ isDiffHotSpot() {
|
|
|
+ let flag = false
|
|
|
+ comparisonKey.forEach(item => {
|
|
|
+ if (JSON.stringify(this.hotspot[item]) != JSON.stringify(this.backupHotSpot[item])) {
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ })
|
|
|
+ return flag
|
|
|
+ },
|
|
|
+
|
|
|
+ isAddChange() {
|
|
|
+ let flag = false
|
|
|
+ let { hotspotTitle, hotspotType } = this.hotspot
|
|
|
+ let item = HTMap[hotspotType]
|
|
|
+ console.log(
|
|
|
+ (hotspotTitle.trim() && hotspotTitle.trim() != '单击确定热点位置'),
|
|
|
+ this.hotspot[item.key],
|
|
|
+ (item.type == 'Array' && this.hotspot[item.key].length > 0)
|
|
|
+ );
|
|
|
+
|
|
|
+ if (
|
|
|
+ (hotspotTitle.trim() && hotspotTitle.trim() != '单击确定热点位置')
|
|
|
+ || this.hotspot[item.key]
|
|
|
+ || (item.type == 'Array' && this.hotspot[item.key].length > 0)
|
|
|
+ ) {
|
|
|
+ flag = true
|
|
|
+ }
|
|
|
+ return flag
|
|
|
},
|
|
|
- confirmCancel(){
|
|
|
- this.$confirm({
|
|
|
+
|
|
|
+ confirmCancel() {
|
|
|
+ console.log(this.isAddChange());
|
|
|
+ if (this.editTitle != '编辑') {
|
|
|
+ if (this.isAddChange()) {
|
|
|
+ this.$confirm({
|
|
|
content: "热点内容未编辑完,确定要关闭吗",
|
|
|
ok: () => {
|
|
|
this.cancel()
|
|
|
}
|
|
|
- });
|
|
|
+ });
|
|
|
+ } else{
|
|
|
+ this.cancel()
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (this.isDiffHotSpot() || this.isAddChange()) {
|
|
|
+ this.$confirm({
|
|
|
+ content: "热点内容未编辑完,确定要关闭吗",
|
|
|
+ ok: () => {
|
|
|
+ this.cancel()
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.cancel()
|
|
|
+ }
|
|
|
+ }
|
|
|
},
|
|
|
cancel() {
|
|
|
this.$store.commit("SetHotspot", this.backupHotSpot);
|
|
|
- this.$emit("close",{
|
|
|
- type:this.editTitle=='编辑'?'edit':'add',
|
|
|
- data:this.backupHotSpot
|
|
|
+ this.$emit("close", {
|
|
|
+ type: this.editTitle == '编辑' ? 'edit' : 'add',
|
|
|
+ data: this.backupHotSpot
|
|
|
});
|
|
|
},
|
|
|
- reset(data){
|
|
|
- this.$bus.emit('edithotspotTitle',data)
|
|
|
- this.$bus.emit('edithotspotTitleisShow',data)
|
|
|
- this.$getKrpano().set(`hotspot[${data.name}].url`,data.img)
|
|
|
+ reset(data) {
|
|
|
+ this.$bus.emit('edithotspotTitle', data)
|
|
|
+ this.$bus.emit('edithotspotTitleisShow', data)
|
|
|
+ this.$getKrpano().set(`hotspot[${data.name}].url`, data.img)
|
|
|
},
|
|
|
save() {
|
|
|
- let {img,hotspotTitle,hotspotType} = this.hotspot
|
|
|
+ let { img, hotspotTitle, hotspotType } = this.hotspot
|
|
|
let item = HTMap[hotspotType]
|
|
|
|
|
|
if (!img) {
|
|
@@ -334,38 +368,38 @@ export default {
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- if (!hotspotTitle.trim()) {
|
|
|
+ if (!(hotspotTitle.trim() && hotspotTitle.trim() != '单击确定热点位置')) {
|
|
|
return this.$alert({
|
|
|
content: "请输入热点标题",
|
|
|
});
|
|
|
}
|
|
|
|
|
|
- if (!this.hotspot[item.key]||(item.type == 'Array'&&this.hotspot[item.key].length<=0)) {
|
|
|
+ if (!this.hotspot[item.key] || (item.type == 'Array' && this.hotspot[item.key].length <= 0)) {
|
|
|
return this.$alert({
|
|
|
content: `${item.errortxt}`,
|
|
|
});
|
|
|
}
|
|
|
this.$store.commit("SetHotspot", this.hotspot);
|
|
|
this.$emit("close");
|
|
|
- this.$emit("save",this.hotspot);
|
|
|
+ this.$emit("save", this.hotspot);
|
|
|
},
|
|
|
- addhotspot(data){
|
|
|
+ addhotspot(data) {
|
|
|
|
|
|
if (this.isAdd) {
|
|
|
this.isAdd = false
|
|
|
this.hotspot.img = data.img
|
|
|
this.hotspot.icontype = data.id
|
|
|
this.styIcon = data.id
|
|
|
- this.$bus.emit('addhotspot',this.hotspot)
|
|
|
- this.$getKrpano().set('layer[tooltip_'+this.hotspot.name+'].css',`text-align:center; color:#FFFFFF;
|
|
|
+ this.$bus.emit('addhotspot', this.hotspot)
|
|
|
+ this.$getKrpano().set('layer[tooltip_' + this.hotspot.name + '].css', `text-align:center; color:#FFFFFF;
|
|
|
font-family:STXihei;font-size:${this.hotspot.fontSize}px;`)
|
|
|
}
|
|
|
- else{
|
|
|
+ else {
|
|
|
this.hotspot.img = data.img
|
|
|
this.hotspot.icontype = data.id
|
|
|
this.styIcon = data.id
|
|
|
- this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`,data.img)
|
|
|
- this.$getKrpano().set(`hotspot[${this.hotspot.name}].hotspottitle`,this.hotspot.hotspotTitle)
|
|
|
+ this.$getKrpano().set(`hotspot[${this.hotspot.name}].url`, data.img)
|
|
|
+ this.$getKrpano().set(`hotspot[${this.hotspot.name}].hotspottitle`, this.hotspot.hotspotTitle)
|
|
|
}
|
|
|
}
|
|
|
}
|
|
@@ -375,36 +409,41 @@ export default {
|
|
|
.hots-panel {
|
|
|
background: #1A1B1D;
|
|
|
z-index: 10;
|
|
|
-
|
|
|
+
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
-
|
|
|
+
|
|
|
.header {
|
|
|
padding: 20px;
|
|
|
display: flex;
|
|
|
font-size: 18px;
|
|
|
color: #fff;
|
|
|
flex: 0 0 auto;
|
|
|
+
|
|
|
.icon_close {
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.content {
|
|
|
padding: 20px 20px 14px 20px;
|
|
|
background: #252526;
|
|
|
flex: 1 0 1px;
|
|
|
overflow: auto;
|
|
|
+
|
|
|
.icon-setting {
|
|
|
.icon-setting-title {
|
|
|
font-size: 18px;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
+
|
|
|
.remark {
|
|
|
margin-top: 16px;
|
|
|
font-size: 14px;
|
|
|
color: #ababab;
|
|
|
}
|
|
|
+
|
|
|
.icon-list {
|
|
|
margin-top: 16px;
|
|
|
height: 158px;
|
|
@@ -413,14 +452,17 @@ export default {
|
|
|
border: 1px solid #404040;
|
|
|
overflow: auto;
|
|
|
padding: 4px;
|
|
|
- > .margin-handler-layer {
|
|
|
+
|
|
|
+ >.margin-handler-layer {
|
|
|
overflow: hidden;
|
|
|
+
|
|
|
ul {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
flex-wrap: wrap;
|
|
|
margin-right: -17px;
|
|
|
margin-bottom: -17px;
|
|
|
+
|
|
|
li {
|
|
|
cursor: pointer;
|
|
|
margin-right: 17px;
|
|
@@ -433,7 +475,8 @@ export default {
|
|
|
align-items: center;
|
|
|
justify-content: center;
|
|
|
position: relative;
|
|
|
- &::after{
|
|
|
+
|
|
|
+ &::after {
|
|
|
position: absolute;
|
|
|
content: '';
|
|
|
height: 100%;
|
|
@@ -447,6 +490,7 @@ export default {
|
|
|
z-index: 999;
|
|
|
pointer-events: none;
|
|
|
}
|
|
|
+
|
|
|
&.active {
|
|
|
border-color: #0076f6;
|
|
|
}
|
|
@@ -454,27 +498,33 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .bars{
|
|
|
+
|
|
|
+ .bars {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.title-setting {
|
|
|
margin-top: 24px;
|
|
|
+
|
|
|
.title-setting-title {
|
|
|
font-size: 18px;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
+
|
|
|
.switch-wrapper {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 18px;
|
|
|
+
|
|
|
.label {
|
|
|
color: rgba(255, 255, 255, 0.6);
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
}
|
|
|
- > .title-input-wrapper {
|
|
|
+
|
|
|
+ >.title-input-wrapper {
|
|
|
position: relative;
|
|
|
border: 1px solid rgba(151, 151, 151, 0.2);
|
|
|
padding: 0 16px;
|
|
@@ -483,10 +533,12 @@ export default {
|
|
|
height: 36px;
|
|
|
width: 100%;
|
|
|
margin-top: 18px;
|
|
|
+
|
|
|
&:focus-within {
|
|
|
border-color: #0076F6;
|
|
|
}
|
|
|
- > input {
|
|
|
+
|
|
|
+ >input {
|
|
|
border: none;
|
|
|
background: transparent;
|
|
|
outline: none;
|
|
@@ -497,7 +549,8 @@ export default {
|
|
|
letter-spacing: 1px;
|
|
|
font-size: 14px;
|
|
|
}
|
|
|
- > .count {
|
|
|
+
|
|
|
+ >.count {
|
|
|
position: absolute;
|
|
|
top: 50%;
|
|
|
transform: translateY(-50%);
|
|
@@ -507,27 +560,34 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.effect-setting {
|
|
|
margin-top: 16px;
|
|
|
+
|
|
|
.effect-setting-title {
|
|
|
font-size: 18px;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
+
|
|
|
.combox {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
+
|
|
|
.effect-setting-component {
|
|
|
margin-top: 16px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.footer {
|
|
|
flex: 0 0 auto;
|
|
|
padding: 15px;
|
|
|
background: #252526;
|
|
|
+
|
|
|
.deepcancel {
|
|
|
margin-right: 10px;
|
|
|
}
|
|
|
+
|
|
|
.ui-button {
|
|
|
width: 112px;
|
|
|
}
|