编辑器-基础-开场提示-显示设置功能与样式

src/views/base/openingTipSettings.vue

@@ -30,6 +30,15 @@
       </div>
     </div>
 
+    <div class="title">显示设置</div>
+    <div class="switch-wrapper">
+        <span class="label">仅首次打开链接时，提示</span>
+        <switcher name="pano" :value="info.isRemind" @change="onSwitcherChange"></switcher>
+    </div>
+    <div class="range-wrapper">
+      <RangeItem :value="rang" @input="onRangeChange" />
+    </div>
+
     <div class="dialog" style="z-index: 2000" v-if="isShowSelectionWindow">
       <Table2
         title="选择素材"
@@ -45,16 +54,29 @@
 import TooltipInEditor from '@/components/TooltipInEditor.vue'
 import Table2 from "@/components/tableSelect2.vue";
 import { mapGetters } from "vuex";
+import Switcher from "@/components/shared/Switcher";
+import RangeItem from "@/components/rangeItem/index.vue";
 
 export default {
   components: {
     TooltipInEditor,
     Table2,
+    Switcher,
+    RangeItem
   },
   data() {
     return {
       isShowSelectionWindow: false,
       selectingFor: '', // 'pc', 'mobile'
+      rang: {
+        label: '显示时间',
+        unit: "秒",
+        value: 1,
+        min: 0,
+        max: 3,
+        gradient: 1,
+        tip:true
+      }
     }
   },
   computed: {
@@ -70,7 +92,13 @@ export default {
         this.info.appIcon = selected[0].icon
       }
       this.isShowSelectionWindow = false
-    }
+    },
+    onSwitcherChange(data){
+      this.info.isRemind = data
+    },
+    onRangeChange(data) {
+      this.info.remindTime = parseInt(data.value)
+    },
   }
 }
 </script>
@@ -95,6 +123,7 @@ export default {
     width: 50%;
     display: inline-block;
     margin-top: 16px;
+    margin-bottom: 24px;
     .title {
       color: rgba(255, 255, 255, 0.6);
       font-size: 14px;
@@ -123,5 +152,18 @@ export default {
       }
     }
   }
+  .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;
+    }
+  }
+  .range-wrapper {
+    margin-top: 18px;
+  }
 }
 </style>